WIP

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

@@ -0,0 +1,103 @@
+/**
+ * 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 {$isElementNode, ElementNode} from 'lexical';
+
+export class CommentNode extends ElementNode {
+  __ids: Array<string>;
+
+  static getType(): string {
+    return 'comment';
+  }
+
+  static clone(node: CommentNode): CommentNode {
+    return new CommentNode(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');
+    element.className = 'comment';
+    return element;
+  }
+
+  updateDOM(): boolean {
+    return false;
+  }
+
+  hasID(id: string): boolean {
+    const self = this.getLatest();
+    const ids = self.__ids;
+    for (let i = 0; i < ids.length; i++) {
+      if (id === ids[i]) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  addID(id: string): void {
+    const self = this.getWritable();
+    const ids = Array.from(self.__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);
+    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 = $createCommentNode(this.__ids);
+      element.append(linkNode);
+      return linkNode;
+    }
+    return null;
+  }
+
+  canBeEmpty(): false {
+    return false;
+  }
+
+  isInline(): true {
+    return true;
+  }
+
+  excludeFromCopy(): true {
+    return true;
+  }
+}
+
+export function $createCommentNode(ids: Array<string>): CommentNode {
+  return new CommentNode(ids);
+}
+
+export function $isCommentNode(node: ?LexicalNode): boolean %checks {
+  return node instanceof CommentNode;
+}

packages/lexical-playground/src/plugins/CommentPlugin.jsx

@@ -7,7 +7,12 @@
  * @flow strict
  */
 
-import type {EditorState, LexicalEditor, NodeKey} from 'lexical';
+import type {
+  EditorState,
+  LexicalEditor,
+  NodeKey,
+  RangeSelection,
+} from 'lexical';
 
 import './CommentPlugin.css';
 
@@ -640,6 +645,36 @@ function cloneReference(reference: Reference): Reference {
   };
 }
 
+function $wrapSelectionInCommentNode(
+  selection: RangeSelection,
+  isBackward: boolean,
+  id: string,
+): void {
+  const nodes = selection.getNodes();
+  const anchorOffset = selection.anchor.offset;
+  const focusOffset = selection.focus.offset;
+  const nodesLength = nodes.length;
+  let startOffset = isBackward ? focusOffset : anchorOffset;
+  let endOffset = isBackward ? anchorOffset : focusOffset;
+  // let lastNodeParent = null;
+  // let existinngLinkNode = null;
+
+  // We only want wrap adjacent text nodes, line break nodes
+  // and inline element nodes. For decorator nodes and block
+  // element nodes, we stop out their boundary and start again
+  // after, if there are more nodes.
+  for (let i = 0; i < nodesLength; i++) {
+    const node = nodes[i];
+    const isFirstNode = i === 0;
+    const isLastNode = i === nodesLength - 1;
+
+    if ($isTextNode(node)) {
+      startOffset = isFirstNode ? startOffset : 0;
+      endOffset = isLastNode ? endOffset : node.getTextContentSize();
+    }
+  }
+}
+
 export default function CommentPlugin({
   initialComments,
 }: {
@@ -698,7 +733,7 @@ export default function CommentPlugin({
   const submitAddComment = useCallback(
     (
       commentOrReference: Comment | Reference,
-      hideCommentInput: boolean,
+      isInlineComment: boolean,
       reference?: Reference,
     ) => {
       setComments((_comments) => {
@@ -718,15 +753,20 @@ export default function CommentPlugin({
         }
         return nextComments;
       });
-      if (hideCommentInput) {
+      if (isInlineComment) {
         editor.update(() => {
           const selection = $getSelection();
           if ($isRangeSelection(selection)) {
             const focus = selection.focus;
             const anchor = selection.anchor;
+            const isBackward = selection.isBackward();
+            const id = commentOrReference.id;
+
+            // Wrap content in a CommentNode
+            $wrapSelectionInCommentNode(selection, isBackward, id);
 
             // Make selection collapsed at the end
-            if (selection.isBackward()) {
+            if (isBackward) {
               focus.set(anchor.key, anchor.offset, anchor.type);
             } else {
               anchor.set(focus.key, focus.offset, focus.type);