fix: Element structure enforcement on transaction

vriteio · May 8, 2024 · 2e87d85 · 2e87d85
1 parent 916896b
commit 2e87d85
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 7 deletions.
diff --git a/apps/web/src/lib/editor/extensions/collab-cursor.tsx b/apps/web/src/lib/editor/extensions/collab-cursor.tsx
@@ -114,6 +114,9 @@ const CollabCursor = (provider: HocuspocusProvider): Extension => {
           ) {
             const rect = container.previousElementSibling?.getBoundingClientRect();
             const isElement = container.previousElementSibling?.getAttribute("data-element");
+            const isTextElement =
+              container.previousElementSibling?.tagName === "P" ||
+              container.previousElementSibling?.tagName.startsWith("H");
             const relativeParent =
               container.previousElementSibling?.closest("th,td") ||
               document.getElementById("pm-container");
@@ -129,7 +132,7 @@ const CollabCursor = (provider: HocuspocusProvider): Extension => {
             setBlockSelection({
               h: rect.height,
               w: rect.width,
-              display: isElement ? "none" : "block",
+              display: isElement || isTextElement ? "none" : "block",
               top: rect.top - parentPos.top
             });
           }

diff --git a/apps/web/src/lib/editor/extensions/element/node.tsx b/apps/web/src/lib/editor/extensions/element/node.tsx
@@ -104,7 +104,10 @@ const Element = BaseElement.extend<Partial<ExtensionsContextData>>({
 
           tr.doc.descendants((node, pos) => {
             if (node.type.name === "element" && customElements[node.attrs.type.toLowerCase()]) {
-              entries.push({ node, pos });
+              entries.push({
+                node,
+                pos
+              });
 
               return true;
             }
@@ -113,12 +116,35 @@ const Element = BaseElement.extend<Partial<ExtensionsContextData>>({
           for (const entry of entries) {
             const activeElementNode = entry.node;
             const activePos = entry.pos;
-            const element = editor.view.nodeDOM(activePos) as HTMLElement;
-            const uid = element instanceof HTMLElement ? element?.getAttribute("data-uid") : null;
+            // TODO: Stop relying on the view
+            const getCustomView = (): CustomView | null => {
+              const element = editor.view.nodeDOM(activePos) as HTMLElement | null;
+              const elementNext = editor.view.nodeDOM(activePos + 1) as HTMLElement | null;
+              const uid = element instanceof HTMLElement ? element?.getAttribute("data-uid") : null;
+              const uidNextPos =
+                elementNext instanceof HTMLElement ? elementNext?.getAttribute("data-uid") : null;
+
+              if (uid) {
+                const customView = customViews.get(uid);
+
+                if (customView?.type.toLowerCase() === entry.node.attrs.type.toLowerCase()) {
+                  return customView || null;
+                }
+              }
 
-            if (!uid) continue;
+              if (uidNextPos) {
+                const customView = customViews.get(uidNextPos);
 
-            const customView = customViews.get(uid);
+                if (customView?.type.toLowerCase() === entry.node.attrs.type.toLowerCase()) {
+                  return customView || null;
+                }
+              }
+
+              return null;
+            };
+            const customView = getCustomView();
+
+            if (!customView) continue;
 
             if (
               JSON.stringify(applyStructure(activeElementNode, customView?.structure!)) !==
@@ -309,7 +335,7 @@ const Element = BaseElement.extend<Partial<ExtensionsContextData>>({
         contentDOM: contentWrapper,
         ignoreMutation(mutation: MutationRecord | { type: "selection"; target: Element }) {
           if (mutation.type === "selection") {
-            return true;
+            return false;
           }
 
           return referenceView.ignoreMutation(mutation);