Add CommentPlugin (#2021)

* Add CommentPlugin

packages/lexical-link/src/index.js

@@ -90,7 +90,7 @@ export class LinkNode extends ElementNode {
     return false;
   }
 
-  canInsertTextAfter(): boolean {
+  canInsertTextAfter(): false {
     return false;
   }
 

packages/lexical-list/src/LexicalListItemNode.js

@@ -271,8 +271,8 @@ export class ListItemNode extends ElementNode {
     if ($isListItemNode(nodeToInsert)) {
       const parent = this.getParentOrThrow();
       if ($isListNode(parent)) {
-        // mark subsequent list items dirty so we update their value attribute.
-        updateChildrenListItemValue(parent);
+        const siblings = this.getNextSiblings();
+        updateChildrenListItemValue(parent, siblings);
       }
     }
     return super.insertBefore(nodeToInsert);

packages/lexical-playground/src/App.jsx

@@ -69,9 +69,10 @@ export default function PlaygroundApp(): React$Node {
             border: '0',
             color: '#fff',
             fill: '#151513',
+            left: '0',
             position: 'absolute',
-            right: '0',
             top: '0',
+            transform: 'scale(-1,1)',
           }}
           aria-hidden="true">
           <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />

packages/lexical-playground/src/Editor.jsx

@@ -35,6 +35,7 @@ import AutoLinkPlugin from './plugins/AutoLinkPlugin';
 import CharacterStylesPopupPlugin from './plugins/CharacterStylesPopupPlugin';
 import ClickableLinkPlugin from './plugins/ClickableLinkPlugin';
 import CodeHighlightPlugin from './plugins/CodeHighlightPlugin';
+import CommentPlugin from './plugins/CommentPlugin';
 import EmojisPlugin from './plugins/EmojisPlugin';
 import EquationsPlugin from './plugins/EquationsPlugin';
 import ExcalidrawPlugin from './plugins/ExcalidrawPlugin';
@@ -171,15 +172,12 @@ export default function Editor(): React$Node {
         <LexicalClearEditorPlugin />
         <MentionsPlugin />
         <EmojisPlugin />
-        <ExcalidrawPlugin />
         <HashtagsPlugin />
         <KeywordsPlugin />
-        <HorizontalRulePlugin />
         <SpeechToTextPlugin />
         <AutoLinkPlugin />
-        <CharacterStylesPopupPlugin />
-        <EquationsPlugin />
         <AutoScrollPlugin scrollRef={scrollRef} />
+        {!isCollab && <CommentPlugin />}
         {isRichText ? (
           <>
             {isCollab ? (
@@ -211,6 +209,10 @@ export default function Editor(): React$Node {
             <TwitterPlugin />
             <YouTubePlugin />
             <ClickableLinkPlugin />
+            <HorizontalRulePlugin />
+            <CharacterStylesPopupPlugin />
+            <EquationsPlugin />
+            <ExcalidrawPlugin />
           </>
         ) : (
           <>

packages/lexical-playground/src/index.css

@@ -129,10 +129,6 @@ pre::-webkit-scrollbar-thumb {
   background-color: #444;
 }
 
-.editor-dev-button + .editor-dev-button {
-  margin-left: 8px;
-}
-
 .editor-dev-button::after {
   content: '';
   position: absolute;
@@ -195,13 +191,13 @@ pre::-webkit-scrollbar-thumb {
 
 #options-button {
   position: fixed;
-  right: 20px;
+  left: 20px;
   bottom: 20px;
 }
 
 #test-recorder-button {
   position: fixed;
-  right: 70px;
+  left: 70px;
   bottom: 20px;
 }
 
@@ -264,7 +260,7 @@ pre::-webkit-scrollbar-thumb {
 
 .link-editor {
   position: absolute;
-  z-index: 100;
+  z-index: 10;
   top: -10000px;
   left: -10000px;
   margin-top: -6px;
@@ -585,7 +581,7 @@ select.font-family {
 }
 
 .dropdown {
-  z-index: 5;
+  z-index: 10;
   display: block;
   position: absolute;
   box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
@@ -700,15 +696,15 @@ select.font-family {
 .switches {
   z-index: 6;
   position: fixed;
-  right: 10px;
+  left: 10px;
   bottom: 70px;
   animation: slide-in 0.4s ease;
 }
 
 @keyframes slide-in {
   0% {
     opacity: 0;
-    transform: translateX(200px);
+    transform: translateX(-200px);
   }
   100% {
     opacity: 1;
@@ -1140,6 +1136,7 @@ button.action-button:disabled {
   border-top-right-radius: 10px;
   vertical-align: middle;
   overflow: auto;
+  height: 36px;
 }
 
 .toolbar button.toolbar-item {
@@ -1256,7 +1253,7 @@ button.action-button:disabled {
 
 .sticky-note-container {
   position: absolute;
-  z-index: 20;
+  z-index: 9;
   width: 120px;
   display: inline-block;
 }
@@ -1371,7 +1368,7 @@ button.action-button:disabled {
   padding: 4px;
   vertical-align: middle;
   position: absolute;
-  z-index: 100;
+  z-index: 10;
   top: -10000px;
   left: -10000px;
   margin-top: -6px;

packages/lexical-playground/src/nodes/MarkNode.js

@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * 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 {EditorConfig, LexicalNode, NodeKey, RangeSelection} from 'lexical';
+
+import {addClassNamesToElement} from '@lexical/utils';
+import {$isElementNode, ElementNode} from 'lexical';
+
+export class MarkNode extends ElementNode {
+  __ids: Array<string>;
+
+  static getType(): string {
+    return 'mark';
+  }
+
+  static clone(node: MarkNode): MarkNode {
+    return new MarkNode(node.__ids, node.__key);
+  }
+
+  constructor(ids: Array<string>, key?: NodeKey): void {
+    super(key);
+    this.__ids = ids || [];
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const element = document.createElement('mark');
+    addClassNamesToElement(element, config.theme.mark);
+    return element;
+  }
+
+  updateDOM(): boolean {
+    return false;
+  }
+
+  hasID(id: string): boolean {
+    const ids = this.getIDs();
+    for (let i = 0; i < ids.length; i++) {
+      if (id === ids[i]) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  getIDs(): Array<string> {
+    const self = this.getLatest();
+    return self.__ids;
+  }
+
+  addID(id: string): void {
+    const self = this.getWritable();
+    const ids = Array.from(self.__ids);
+    self.__ids = ids;
+    for (let i = 0; i < ids.length; i++) {
+      // If we already have it, don't add again
+      if (id === ids[i]) {
+        return;
+      }
+    }
+    ids.push(id);
+  }
+
+  deleteID(id: string): void {
+    const self = this.getWritable();
+    const ids = Array.from(self.__ids);
+    self.__ids = ids;
+    for (let i = 0; i < ids.length; i++) {
+      if (id === ids[i]) {
+        ids.splice(i, 1);
+        return;
+      }
+    }
+  }
+
+  insertNewAfter(selection: RangeSelection): null | ElementNode {
+    const element = this.getParentOrThrow().insertNewAfter(selection);
+    if ($isElementNode(element)) {
+      const linkNode = $createMarkNode(this.__ids);
+      element.append(linkNode);
+      return linkNode;
+    }
+    return null;
+  }
+
+  canInsertTextBefore(): false {
+    return false;
+  }
+
+  canInsertTextAfter(): false {
+    return false;
+  }
+
+  canBeEmpty(): false {
+    return false;
+  }
+
+  isInline(): true {
+    return true;
+  }
+
+  // TODO: It seems excludeFromCopy doesn't work as expected anymore.
+  // excludeFromCopy(): true {
+  //   return true;
+  // }
+}
+
+export function $createMarkNode(ids: Array<string>): MarkNode {
+  return new MarkNode(ids);
+}
+
+export function $isMarkNode(node: ?LexicalNode): boolean %checks {
+  return node instanceof MarkNode;
+}

packages/lexical-playground/src/nodes/PlaygroundNodes.js

@@ -23,6 +23,7 @@ import {EquationNode} from './EquationNode';
 import {ExcalidrawNode} from './ExcalidrawNode';
 import {ImageNode} from './ImageNode';
 import {KeywordNode} from './KeywordNode';
+import {MarkNode} from './MarkNode';
 import {MentionNode} from './MentionNode';
 import {PollNode} from './PollNode';
 import {StickyNode} from './StickyNode';
@@ -56,6 +57,7 @@ const PlaygroundNodes: Array<Class<LexicalNode>> = [
   HorizontalRuleNode,
   TweetNode,
   YouTubeNode,
+  MarkNode,
 ];
 
 export default PlaygroundNodes;