HAR-10208 - Trackable id

packages/super-editor/src/core/utilities/index.js

@@ -8,3 +8,4 @@ export * from './deleteProps.js';
 export * from './parseSizeUnit.js';
 export * from './minMax.js';
 export * from './clipboardUtils.js';
+export * from './sdBlockUniqueId.js';

packages/super-editor/src/core/utilities/sdBlockUniqueId.js

@@ -0,0 +1,9 @@
+let counter = 0;
+
+export function generateBlockUniqueId(type) {
+  counter++;
+  const prefix = (typeof type === 'string' && type.length ? type : 'b').toLowerCase();
+  const ts = Date.now().toString(36);
+  const rand = Math.floor(Math.random() * 0xffffffff).toString(36);
+  return `${prefix}-${ts}-${rand}-${counter}`;
+}

packages/super-editor/src/extensions/block-node/block-node.js

@@ -0,0 +1,167 @@
+import { Extension } from '@core/Extension.js';
+import { helpers } from '@core/index.js';
+const { findChildren } = helpers;
+import { Plugin } from 'prosemirror-state';
+import { generateBlockUniqueId } from '@core/utilities/index.js';
+
+export const BlockNode = Extension.create({
+  name: 'BlockNode',
+
+  addCommands() {
+    return {
+      replaceBlockNodeById:
+        (id, contentNode) =>
+        ({ dispatch, tr }) => {
+          let blockNode = this.editor.helpers.BlockNode.getBlockNodeById(id);
+          if (!blockNode || blockNode.length > 1) {
+            return true;
+          }
+
+          if (dispatch) {
+            let { pos, node } = blockNode[0];
+            let newPosFrom = tr.mapping.map(pos);
+            let newPosTo = tr.mapping.map(pos + node.nodeSize);
+
+            let currentNode = tr.doc.nodeAt(newPosFrom);
+            if (node.eq(currentNode)) {
+              tr.replaceWith(newPosFrom, newPosTo, contentNode);
+            }
+          }
+
+          return true;
+        },
+
+      deleteBlockNodeById:
+        (id) =>
+        ({ dispatch, tr }) => {
+          let blockNode = this.editor.helpers.BlockNode.getBlockNodeById(id);
+          if (!blockNode || blockNode.length > 1) {
+            return true;
+          }
+
+          if (dispatch) {
+            let { pos, node } = blockNode[0];
+            let newPosFrom = tr.mapping.map(pos);
+            let newPosTo = tr.mapping.map(pos + node.nodeSize);
+
+            let currentNode = tr.doc.nodeAt(newPosFrom);
+            if (node.eq(currentNode)) {
+              tr.delete(newPosFrom, newPosTo);
+            }
+          }
+
+          return true;
+        },
+
+      updateBlockNodeAttributes:
+        (id, attrs = {}) =>
+        ({ dispatch, tr }) => {
+          if (!dispatch) return true;
+
+          let blockNode = this.editor.helpers.BlockNode.getBlockNodeById(id);
+          if (!blockNode || blockNode.length > 1) {
+            return true;
+          }
+
+          let { pos, node } = blockNode[0];
+          let newPos = tr.mapping.map(pos);
+          let currentNode = tr.doc.nodeAt(newPos);
+          if (node.eq(currentNode)) {
+            tr.setNodeMarkup(newPos, undefined, {
+              ...node.attrs,
+              ...attrs,
+            });
+          }
+
+          return true;
+        },
+    };
+  },
+
+  addHelpers() {
+    return {
+      getBlockNodes: () => {
+        return findChildren(this.editor.state.doc, (node) => node.type.groups.includes('block'));
+      },
+
+      getBlockNodeById: (id) => {
+        return findChildren(this.editor.state.doc, (node) => node.attrs.sdBlockId === id);
+      },
+
+      getBlockNodesByType: (type) => {
+        return findChildren(this.editor.state.doc, (node) => node.type.name === type);
+      },
+
+      getBlockNodesInRange: (from, to) => {
+        let blockNodes = [];
+
+        this.editor.state.doc.nodesBetween(from, to, (node, pos) => {
+          if (!node || node?.nodeSize === undefined) {
+            return;
+          }
+          if (node.type.groups.includes('block')) {
+            blockNodes.push({
+              node,
+              pos,
+            });
+          }
+        });
+
+        return blockNodes;
+      },
+    };
+  },
+  onCreate() {
+    const { state, view } = this.editor;
+    const tr = state.tr;
+    let changed = false;
+
+    state.doc.descendants((node, pos) => {
+      if (!node.type.spec.group?.split(' ')?.includes('block')) return;
+      if (node.attrs?.sdBlockId) return;
+      tr.setNodeMarkup(
+        pos,
+        undefined,
+        {
+          ...node.attrs,
+          sdBlockId: generateBlockUniqueId(node.type.name),
+        },
+        node.marks,
+      );
+      changed = true;
+      return false;
+    });
+
+    if (changed) view.dispatch(tr);
+  },
+  addPmPlugins() {
+    return [
+      new Plugin({
+        appendTransaction: (transactions, _oldState, newState) => {
+          if (!transactions.some((tr) => tr.docChanged)) return null;
+
+          let tr = null;
+          let changed = false;
+          newState.doc.descendants((node, pos) => {
+            if (!node.type.spec.group?.split(' ')?.includes('block')) return;
+            if (node.attrs?.sdBlockId) return;
+
+            tr = tr ?? newState.tr;
+            tr.setNodeMarkup(
+              pos,
+              undefined,
+              {
+                ...node.attrs,
+                sdBlockId: generateBlockUniqueId(node.type.name),
+              },
+              node.marks,
+            );
+            changed = true;
+          });
+
+          return changed ? tr : null;
+        },
+      }),
+    ];
+  },
+});

packages/super-editor/src/extensions/block-node/index.js

@@ -0,0 +1 @@
+export * from './block-node.js';

packages/super-editor/src/extensions/bullet-list/bullet-list.js

@@ -50,6 +50,15 @@ export const BulletList = Node.create({
         rendered: false,
       },
 
+      sdBlockId: {
+        default: null,
+        keepOnSplit: false,
+        parseDOM: (elem) => elem.getAttribute('data-sd-block-id'),
+        renderDOM: (attrs) => {
+          return attrs.sdBlockId ? { 'data-sd-block-id': attrs.sdBlockId } : {};
+        },
+      },
+
       attributes: {
         rendered: false,
         keepOnSplit: true,

packages/super-editor/src/extensions/heading/heading.js

@@ -25,6 +25,14 @@ export const Heading = Node.create({
         rendered: false,
       },
       tabStops: { rendered: false },
+      sdBlockId: {
+        default: null,
+        keepOnSplit: false,
+        parseDOM: (elem) => elem.getAttribute('data-sd-block-id'),
+        renderDOM: (attrs) => {
+          return attrs.sdBlockId ? { 'data-sd-block-id': attrs.sdBlockId } : {};
+        },
+      },
     };
   },
 

packages/super-editor/src/extensions/index.js

@@ -39,6 +39,7 @@ import { ShapeContainer } from './shape-container/index.js';
 import { ShapeTextbox } from './shape-textbox/index.js';
 import { ContentBlock } from './content-block/index.js';
 import { StructuredContent, DocumentSection } from './structured-content/index.js';
+import { BlockNode } from './block-node/index.js';
 
 // Marks extensions
 import { TextStyle } from './text-style/text-style.js';
@@ -112,6 +113,7 @@ const getRichTextExtensions = () => {
 const getStarterExtensions = () => {
   return [
     Bold,
+    BlockNode,
     BulletList,
     Color,
     CommentRangeStart,
@@ -216,6 +218,7 @@ export {
   TableHeader,
   Placeholder,
   DropCursor,
+  BlockNode,
   FieldAnnotation,
   fieldAnnotationHelpers,
   Image,

packages/super-editor/src/extensions/ordered-list/ordered-list.js

@@ -43,6 +43,15 @@ export const OrderedList = Node.create({
         },
       },
 
+      sdBlockId: {
+        default: null,
+        keepOnSplit: false,
+        parseDOM: (elem) => elem.getAttribute('data-sd-block-id'),
+        renderDOM: (attrs) => {
+          return attrs.sdBlockId ? { 'data-sd-block-id': attrs.sdBlockId } : {};
+        },
+      },
+
       syncId: {
         default: null,
         parseDOM: (elem) => elem.getAttribute('data-sync-id'),

packages/super-editor/src/extensions/paragraph/paragraph.js

@@ -86,6 +86,14 @@ export const Paragraph = Node.create({
         },
       },
       styleId: {},
+      sdBlockId: {
+        default: null,
+        keepOnSplit: false,
+        parseDOM: (elem) => elem.getAttribute('data-sd-block-id'),
+        renderDOM: (attrs) => {
+          return attrs.sdBlockId ? { 'data-sd-block-id': attrs.sdBlockId } : {};
+        },
+      },
       attributes: {
         rendered: false,
       },

packages/super-editor/src/extensions/shape-container/shape-container.js

@@ -28,7 +28,14 @@ export const ShapeContainer = Node.create({
           };
         },
       },
-
+      sdBlockId: {
+        default: null,
+        keepOnSplit: false,
+        parseDOM: (elem) => elem.getAttribute('data-sd-block-id'),
+        renderDOM: (attrs) => {
+          return attrs.sdBlockId ? { 'data-sd-block-id': attrs.sdBlockId } : {};
+        },
+      },
       style: {
         renderDOM: (attrs) => {
           if (!attrs.style) return {};

packages/super-editor/src/extensions/shape-textbox/shape-textbox.js

@@ -20,6 +20,14 @@ export const ShapeTextbox = Node.create({
 
   addAttributes() {
     return {
+      sdBlockId: {
+        default: null,
+        keepOnSplit: false,
+        parseDOM: (elem) => elem.getAttribute('data-sd-block-id'),
+        renderDOM: (attrs) => {
+          return attrs.sdBlockId ? { 'data-sd-block-id': attrs.sdBlockId } : {};
+        },
+      },
       attributes: {
         rendered: false,
       },

packages/super-editor/src/extensions/structured-content/document-section.js

@@ -37,6 +37,14 @@ export const DocumentSection = Node.create({
   addAttributes() {
     return {
       id: {},
+      sdBlockId: {
+        default: null,
+        keepOnSplit: false,
+        parseDOM: (elem) => elem.getAttribute('data-sd-block-id'),
+        renderDOM: (attrs) => {
+          return attrs.sdBlockId ? { 'data-sd-block-id': attrs.sdBlockId } : {};
+        },
+      },
       title: {},
       description: {},
       sectionType: {},

packages/super-editor/src/extensions/table/table.js

@@ -72,6 +72,14 @@ export const Table = Node.create({
           };
         },
       }, */
+      sdBlockId: {
+        default: null,
+        keepOnSplit: false,
+        parseDOM: (elem) => elem.getAttribute('data-sd-block-id'),
+        renderDOM: (attrs) => {
+          return attrs.sdBlockId ? { 'data-sd-block-id': attrs.sdBlockId } : {};
+        },
+      },
 
       tableIndent: {
         renderDOM: ({ tableIndent }) => {