wip: Selection & content insert

apps/web/public/sandbox.js

@@ -1180,6 +1180,9 @@
                 const parts = path.split(".");
                 const getVal = () => {
                   return parts.slice(1).reduce((currentVal, part, index) => {
+                    if (typeof currentVal !== "function") {
+                      console.log(parts, part, currentVal, env.data);
+                    }
                     const value = currentVal();
                     if (typeof value !== "object" || Array.isArray(value) || value === null) {
                       throw new Error(`Cannot use ${path} in this context`);

apps/web/scripts/sandbox.ts

@@ -137,6 +137,10 @@ type SerializedContext<C extends ExtensionBaseContext> = Omit<
               const parts = path.split(".");
               const getVal = (): Val => {
                 return parts.slice(1).reduce((currentVal, part, index) => {
+                  if (typeof currentVal !== "function") {
+                    console.log(parts, part, currentVal, env!.data);
+                  }
+
                   const value = currentVal();
 
                   if (typeof value !== "object" || Array.isArray(value) || value === null) {

apps/web/src/lib/editor/extensions/element/custom-node-view.tsx

@@ -3,8 +3,12 @@ import { SolidEditor, SolidRenderer } from "@vrite/tiptap-solid";
 import { ExtensionElementViewContext, ExtensionElement } from "@vrite/sdk/extensions";
 import { NodeView as PMNodeView } from "@tiptap/pm/view";
 import clsx from "clsx";
+import { render } from "solid-js/web";
+import { mdiCursorText, mdiFormatParagraph, mdiPlus } from "@mdi/js";
+import { TextSelection } from "@tiptap/pm/state";
 import { useNotifications } from "#context";
 import { ExtensionDetails, ExtensionViewRenderer } from "#lib/extensions";
+import { IconButton } from "#components/primitives";
 
 const customSubTrees = new Map<string, Promise<ExtensionElement | null>>();
 const customNodeView = ({
@@ -76,10 +80,76 @@ const customNodeView = ({
   wrapper.setAttribute("data-initialized", "true");
   wrapper.append(component.element);
 
+  const pos = typeof props.getPos === "function" ? props.getPos() : null;
+  const { node } = props;
+
+  if (typeof pos === "number" && pos <= editor.view.state.doc.nodeSize) {
+    const res = editor.commands.command(({ tr, dispatch }) => {
+      if (!dispatch) return false;
+
+      if (typeof pos !== "number" || pos > editor.view.state.doc.nodeSize) {
+        return false;
+      }
+
+      if (node && node.type.name === "element") {
+        tr.setMeta("addToHistory", false)
+          .setMeta("customView", true)
+          .setNodeMarkup(pos, node.type, {
+            ...node.attrs,
+            _: { uid }
+          });
+      }
+
+      return true;
+    });
+  }
+
   if (top) {
     wrapper.setAttribute("data-custom-node-view", "true");
   }
 
+  if (!node.content.size && contentWrapperParent) {
+    const button = document.createElement("div");
+
+    button.setAttribute("contentEditable", "false");
+    button.setAttribute("class", "min-h-[35px] flex items-center");
+    render(
+      () => (
+        <IconButton
+          path={mdiPlus}
+          label="Add content"
+          class="m-0 pr-1"
+          text="soft"
+          variant="text"
+          size="small"
+          onPointerDown={(event) => {
+            editor
+              .chain()
+              .command(({ tr }) => {
+                if (typeof props.getPos !== "function") return false;
+
+                const lastPos = props.getPos();
+
+                tr.replaceWith(
+                  lastPos + 1,
+                  lastPos + 1,
+                  editor.schema.node("paragraph")
+                ).setSelection(TextSelection.create(tr.doc, lastPos + 1));
+
+                return true;
+              })
+              .focus()
+              .run();
+            event.preventDefault();
+            event.stopPropagation();
+          }}
+        />
+      ),
+      button
+    );
+    contentWrapperParent.append(button);
+  }
+
   return {
     selectNode() {
       wrapper.classList.add("ring", "ring-primary", "ring-2");