fix: Element view: node updates

vriteio · May 23, 2024 · 4fe1cef · 4fe1cef
1 parent 690a5f5
commit 4fe1cef
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/apps/web/src/lib/editor/extensions/element/custom-node-view.tsx b/apps/web/src/lib/editor/extensions/element/custom-node-view.tsx
@@ -5,6 +5,7 @@ import { ExtensionElementViewContext, ExtensionElement } from "@vrite/sdk/extens
 import clsx from "clsx";
 import { render } from "solid-js/web";
 import { mdiPlus } from "@mdi/js";
+import { Node as PMNode } from "@tiptap/pm/model";
 import { TextSelection } from "@tiptap/pm/state";
 import { useNotifications } from "#context";
 import { ExtensionDetails, ExtensionViewRenderer } from "#lib/extensions";
@@ -31,6 +32,8 @@ const customNodeView = ({
   updateProps(newProps: Record<string, any>): void;
   getProps(): Record<string, any>;
 }): ElementDisplay => {
+  let node = props.node as PMNode;
+
   const renderer = new SolidRenderer(
     () => {
       const { notify } = useNotifications();
@@ -73,7 +76,7 @@ const customNodeView = ({
     clsx(":base: relative", "content", contentHole?.getAttribute("data-class"))
   );
 
-  if (!props.node.content.size && contentHole) {
+  if (!node.content.size && contentHole) {
     const buttonContainer = document.createElement("div");
 
     buttonContainer.setAttribute("contentEditable", "false");
@@ -95,6 +98,7 @@ const customNodeView = ({
 
                 const lastPos = props.getPos();
 
+                buttonContainer.remove();
                 tr.replaceWith(
                   lastPos + 1,
                   lastPos + 1,
@@ -122,6 +126,11 @@ const customNodeView = ({
     onDeselect() {
       wrapper.classList.remove("ring", "ring-primary", "ring-2");
     },
+    onUpdate(newNode) {
+      if (newNode.type.name !== "element") return false;
+
+      node = newNode;
+    },
     unmount() {
       wrapper.removeAttribute("class");
       wrapper.removeAttribute("data-custom-view");

diff --git a/apps/web/src/lib/editor/extensions/element/node.tsx b/apps/web/src/lib/editor/extensions/element/node.tsx
@@ -419,7 +419,7 @@ const Element = BaseElement.extend<
               if (uid) wrapper.setAttribute("data-uid", uid);
 
               view = customNodeView({
-                props,
+                props: { ...props, node },
                 editor,
                 uid,
                 view: matchedView?.view!,
@@ -439,7 +439,7 @@ const Element = BaseElement.extend<
             }
           }
 
-          view = xmlNodeView({ props, editor, wrapper, contentWrapper });
+          view = xmlNodeView({ props: { ...props, node }, editor, wrapper, contentWrapper });
           loaded();
         };
 

diff --git a/apps/web/src/lib/editor/extensions/element/xml-node-view.tsx b/apps/web/src/lib/editor/extensions/element/xml-node-view.tsx
@@ -4,7 +4,6 @@ import { Editor, NodeViewRendererProps } from "@tiptap/core";
 import { Node as PMNode } from "@tiptap/pm/model";
 import { SolidEditor } from "@vrite/tiptap-solid";
 import { Transaction } from "@tiptap/pm/state";
-import { active } from "sortablejs";
 import { formatCode } from "#lib/code-editor";
 
 const getOpeningTag = async (node: PMNode): Promise<string> => {