ActionTextAttachmentMarkNode

[z-of-nz]

As mentioned before, my task was to create a commenting feature in lexxy: My approach is to use Lexicals MarkNode.
Details:

ActionTextAttachmentMarkNode

• This model references meta elements (like comments) in rich texts. The actual meta content will be saved and updated in RoR backend
• MarkNode from lexical is used to spread meta references over multiple html nodes of the rich text
• Adds an attribute (data-selection-group) for grouping selection before rails creates instance
• Adds an attribute (data-create-meta-content) for triggering the creation and storage of the meta user input as some ActiveStorage instance in backend
• Adds an attribute (data-delete-meta-content) for triggering the deletion of the referenced ActiveStorage instance in backend
• After creation the sgid is used for identification
• Updating of the meta content (UX and storage) should be provided by the parent application

@jorgemanrubia what is your take on my concept?

Dispatcher Commands for MarkNodes

The command for creating ActionTextAttachmentMarkNode(s) makes sure that all selections (could be several dom elements) are collected and marked by a selectionGroup - this ensures that the backend associates the multiple parts of the comment.

  dispatchInsertMarkNodeOnSelection(metaContent) {
    const selection = $getSelection();
    this.editor.update(() => {
      if ($isRangeSelection(selection)) {
        const isBackward = selection.isBackward();
        let i = 0
        const selectionGroupId = [...Array(8)].map(() => Math.floor(Math.random() * 16).toString(16)).join('');
        $wrapSelectionInMarkNode(selection, isBackward, "", ([]) => {
          let dataset = { selectionGroup: selectionGroupId }
          if (i === 0) { dataset.createMetaContent = metaContent; i++; }
          return new ActionTextAttachmentMarkNode([], dataset)
        });
        dispatch(this.editorElement, "lexxy:addMarkNodeOnSelection", { selectionGroupId: selectionGroupId })
      }
    })
  }
  
  dispatchInsertMarkNodeDeletionTrigger(sgid) {
    this.editor.update(() => {
      const rootNode = $getRoot();
      const traverse = (node) => {
        if (node.getType() === 'action_text_attachment_mark_node' && node.sgid && node.sgid === sgid) {
          const writableNode = node.getWritable();
          writableNode.__dataset.deleteMetaContent = true;
        }
        if ($isElementNode(node)) {
          node.getChildren().forEach(traverse);
        }
      };
      traverse(rootNode);
    })
  }