Add @lexical/overflow @lexical/link (facebook#1556)

* Add @lexical/overflow @lexical/link

* Fix tests

.flowconfig

@@ -18,11 +18,6 @@ exact_by_default=true
 
 module.name_mapper='^lexical$' -> '<PROJECT_ROOT>/packages/lexical/flow/Lexical.js.flow'
 
-module.name_mapper='^lexical/LinkNode' -> '<PROJECT_ROOT>/packages/lexical/flow/LexicalLinkNode.js.flow'
-module.name_mapper='^lexical/AutoLinkNode' -> '<PROJECT_ROOT>/packages/lexical/flow/LexicalAutoLinkNode.js.flow'
-module.name_mapper='^lexical/OverflowNode' -> '<PROJECT_ROOT>/packages/lexical/flow/LexicalOverflowNode.js.flow'
-module.name_mapper='^lexical/ExtendedNodes' -> '<PROJECT_ROOT>/packages/lexical/flow/LexicalExtendedNodes.js.flow'
-
 module.name_mapper='^@lexical/list' -> '<PROJECT_ROOT>/packages/lexical-list/flow/LexicalList.js.flow'
 module.name_mapper='^@lexical/table' -> '<PROJECT_ROOT>/packages/lexical-table/flow/LexicalTable.js.flow'
 module.name_mapper='^@lexical/file' -> '<PROJECT_ROOT>/packages/lexical-file/flow/LexicalFile.js.flow'
@@ -35,6 +30,8 @@ module.name_mapper='^@lexical/code' -> '<PROJECT_ROOT>/packages/lexical-code/src
 module.name_mapper='^@lexical/plain-text' -> '<PROJECT_ROOT>/packages/lexical-plain-text/src/index.js'
 module.name_mapper='^@lexical/rich-text' -> '<PROJECT_ROOT>/packages/lexical-rich-text/src/index.js'
 module.name_mapper='^@lexical/dragon' -> '<PROJECT_ROOT>/packages/lexical-dragon/src/index.js'
+module.name_mapper='^@lexical/link' -> '<PROJECT_ROOT>/packages/lexical-link/src/index.js'
+module.name_mapper='^@lexical/overflow' -> '<PROJECT_ROOT>/packages/lexical-overflow/src/index.js'
 
 module.name_mapper='^@lexical/react/DEPRECATED_useLexicalEditor' -> '<PROJECT_ROOT>/packages/lexical-react/src/DEPRECATED_useLexicalEditor.js'
 module.name_mapper='^@lexical/react/DEPRECATED_useLexicalRichText' -> '<PROJECT_ROOT>/packages/lexical-react/src/DEPRECATED_useLexicalRichText.js'

jest.config.js

@@ -27,8 +27,11 @@ module.exports = {
         '^@lexical/dragon$': '<rootDir>/packages/lexical-dragon/src/index.js',
         '^@lexical/file$': '<rootDir>/packages/lexical-file/src/index.js',
         '^@lexical/hashtag$': '<rootDir>/packages/lexical-hashtag/src/index.js',
+        '^@lexical/link$': '<rootDir>/packages/lexical-link/src/index.js',
         '^@lexical/list$': '<rootDir>/packages/lexical-list/src/index.js',
         '^@lexical/offset$': '<rootDir>/packages/lexical-offset/src/index.js',
+        '^@lexical/overflow$':
+          '<rootDir>/packages/lexical-overflow/src/index.js',
         '^@lexical/plain-text$':
           '<rootDir>/packages/lexical-plain-text/src/index.js',
         '^@lexical/react/DEPRECATED_useLexicalRichText$':
@@ -68,14 +71,6 @@ module.exports = {
         '^@lexical/utils$': '<rootDir>/packages/lexical-utils/src/index.js',
         '^@lexical/yjs$': '<rootDir>/packages/lexical-yjs/src/index.js',
         '^lexical$': '<rootDir>/packages/lexical/src/index.js',
-        '^lexical/AutoLinkNode$':
-          '<rootDir>/packages/lexical/src/nodes/extended/LexicalAutoLinkNode.js',
-        '^lexical/ExtendedNodes$':
-          '<rootDir>/packages/lexical/src/nodes/extended/LexicalExtendedNodes.js',
-        '^lexical/LinkNode$':
-          '<rootDir>/packages/lexical/src/nodes/extended/LexicalLinkNode.js',
-        '^lexical/OverflowNode$':
-          '<rootDir>/packages/lexical/src/nodes/extended/LexicalOverflowNode.js',
         '^shared/canUseDOM$': '<rootDir>/packages/shared/src/canUseDOM.js',
         '^shared/environment$': '<rootDir>/packages/shared/src/environment.js',
         '^shared/getDOMSelection$':

packages/lexical/src/nodes/extended/__tests__/unit/LexicalCodeNode.test.js → packages/lexical-code/src/__tests__/unit/LexicalCodeNode.test.js

@@ -13,8 +13,7 @@ import {
   $getRoot,
   $getSelection,
 } from 'lexical';
-
-import {initializeUnitTest} from '../../../../../../lexical/src/__tests__/utils';
+import {initializeUnitTest} from 'lexical/src/__tests__/utils';
 
 // No idea why we suddenly need to do this, but it fixes the tests
 // with latest experimental React version.

packages/lexical-hashtag/package.json

@@ -9,7 +9,6 @@
     "lexical",
     "editor",
     "rich-text",
-    "table",
     "hashtag"
   ],
   "license": "MIT",

packages/lexical/flow/LexicalExtendedNodes.js.flow → packages/lexical-link/LexicalLink.js

@@ -4,9 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ *
  */
 
-import type {LexicalNode} from 'lexical';
+'use strict';
 
-declare export default Array<Class<LexicalNode>>;
+module.exports = require('./dist/LexicalLink.js');

packages/lexical-link/README.md

@@ -0,0 +1,5 @@
+# `@lexical/link`
+
+This package contains the functionality for Lexical links.
+
+More documentation coming soon.

packages/lexical-link/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@lexical/link",
+  "author": {
+    "name": "Dominic Gannaway",
+    "email": "dg@domgan.com"
+  },
+  "description": "This package contains the functionality for Lexical links.",
+  "keywords": [
+    "lexical",
+    "editor",
+    "rich-text",
+    "link"
+  ],
+  "license": "MIT",
+  "version": "0.1.16",
+  "main": "LexicalLink.js",
+  "peerDependencies": {
+    "lexical": "0.1.16"
+  },
+  "dependencies": {
+    "@lexical/utils": "0.1.16"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/lexical",
+    "directory": "packages/lexical-link"
+  }
+}

packages/lexical/src/nodes/extended/__tests__/unit/LexicalLinkNode.test.js → packages/lexical-link/src/__tests__/unit/LexicalLinkNode.test.js

@@ -6,9 +6,8 @@
  *
  */
 
-import {$createLinkNode, $isLinkNode, LinkNode} from 'lexical/LinkNode';
-
-import {initializeUnitTest} from '../../../../../../lexical/src/__tests__/utils';
+import {$createLinkNode, $isLinkNode, LinkNode} from '@lexical/link';
+import {initializeUnitTest} from 'lexical/src/__tests__/utils';
 
 const editorConfig = Object.freeze({
   theme: {

packages/lexical/src/nodes/extended/LexicalLinkNode.js → packages/lexical-link/src/index.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -116,3 +116,34 @@ export function $createLinkNode(url: string): LinkNode {
 export function $isLinkNode(node: ?LexicalNode): boolean %checks {
   return node instanceof LinkNode;
 }
+
+// Custom node type to override `canInsertTextAfter` that will
+// allow typing within the link
+export class AutoLinkNode extends LinkNode {
+  static getType(): string {
+    return 'autolink';
+  }
+
+  // $FlowFixMe[incompatible-extend]
+  static clone(node: AutoLinkNode): AutoLinkNode {
+    return new AutoLinkNode(node.__url, node.__key);
+  }
+
+  insertNewAfter(selection: RangeSelection): null | ElementNode {
+    const element = this.getParentOrThrow().insertNewAfter(selection);
+    if ($isElementNode(element)) {
+      const linkNode = $createAutoLinkNode(this.__url);
+      element.append(linkNode);
+      return linkNode;
+    }
+    return null;
+  }
+}
+
+export function $createAutoLinkNode(url: string): AutoLinkNode {
+  return new AutoLinkNode(url);
+}
+
+export function $isAutoLinkNode(node: ?LexicalNode): boolean %checks {
+  return node instanceof AutoLinkNode;
+}

packages/lexical/ExtendedNodes.d.ts → packages/lexical-overflow/LexicalOverflow.js

@@ -4,10 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
+ *
  */
 
-import {Class} from 'utility-types';
-import type {LexicalNode} from 'lexical';
-declare const ExtendedNodes: Array<Class<LexicalNode>>;
+'use strict';
 
-export default ExtendedNodes;
+module.exports = require('./dist/LexicalOverflow.js');

packages/lexical-overflow/README.md

@@ -0,0 +1,3 @@
+# `@lexical/overflow`
+
+This package contains selection overflow helpers and nodes for Lexical.

packages/lexical-overflow/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@lexical/overflow",
+  "author": {
+    "name": "Dominic Gannaway",
+    "email": "dg@domgan.com"
+  },
+  "description": "This package contains selection overflow helpers and nodes for Lexical.",
+  "keywords": [
+    "lexical",
+    "editor",
+    "rich-text",
+    "overflow"
+  ],
+  "license": "MIT",
+  "version": "0.1.16",
+  "main": "LexicalOverflow.js",
+  "peerDependencies": {
+    "lexical": "0.1.16"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/lexical",
+    "directory": "packages/lexical-overflow"
+  }
+}

packages/lexical-playground/package.json

@@ -22,6 +22,8 @@
     "@lexical/plain-text": "0.1.16",
     "@lexical/rich-text": "0.1.16",
     "@lexical/code": "0.1.16",
+    "@lexical/link": "0.1.16",
+    "@lexical/overflow": "0.1.16",
     "link-preview-generator": "1.0.7",
     "@excalidraw/excalidraw": "0.11.0",
     "yjs": ">=13.5.22",