From 34f7a54b3c5fcd1aadf0035682740727710f2d93 Mon Sep 17 00:00:00 2001
From: Arek Nawo <areknawo@areknawo.com>
Date: Fri, 5 Jul 2024 12:42:43 +0200
Subject: [PATCH] fix: Element display & updates handling

---
 .../extensions/block-action-menu/options.tsx    | 17 ++++++++++++++---
 .../extensions/block-action-menu/plugin.tsx     |  2 +-
 .../extensions/element/custom-node-view.tsx     |  9 +++++++++
 .../editor/extensions/xml-node-menu/editor.tsx  | 15 +++++++++++++--
 apps/web/src/views/content-piece/index.tsx      |  6 +++++-
 5 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/lib/editor/extensions/block-action-menu/options.tsx b/apps/web/src/lib/editor/extensions/block-action-menu/options.tsx
index c64e54a7..2f9ffa2d 100644
--- a/apps/web/src/lib/editor/extensions/block-action-menu/options.tsx
+++ b/apps/web/src/lib/editor/extensions/block-action-menu/options.tsx
@@ -100,7 +100,7 @@ const options: Record<
 const OptionsDropdown: Component<OptionsDropdownProps> = (props) => {
   const [opened, setOpened] = createSignal(false);
   const availableOptions = createMemo(() => {
-    opened;
+    opened();
 
     return (
       options[props.node.type.name]?.filter((option) => {
@@ -138,14 +138,25 @@ const OptionsDropdown: Component<OptionsDropdownProps> = (props) => {
         <div class="flex flex-col gap-1">
           <For each={availableOptions()}>
             {(option) => {
+              const path = (): string => {
+                if (!opened()) return "";
+
+                return typeof option.icon === "function" ? option.icon(props) : option.icon;
+              };
+              const label = (): string => {
+                if (!opened()) return "";
+
+                return typeof option.label === "function" ? option.label(props) : option.label;
+              };
+
               return (
                 <IconButton
                   class="m-0 w-full justify-start"
                   text={option.color || "soft"}
                   color={option.color || "base"}
                   variant="text"
-                  path={typeof option.icon === "function" ? option.icon(props) : option.icon}
-                  label={typeof option.label === "function" ? option.label(props) : option.label}
+                  path={path()}
+                  label={label()}
                   onClick={() => {
                     option.onClick(props);
                     setOpened(false);
diff --git a/apps/web/src/lib/editor/extensions/block-action-menu/plugin.tsx b/apps/web/src/lib/editor/extensions/block-action-menu/plugin.tsx
index 82e38825..c1138595 100644
--- a/apps/web/src/lib/editor/extensions/block-action-menu/plugin.tsx
+++ b/apps/web/src/lib/editor/extensions/block-action-menu/plugin.tsx
@@ -129,7 +129,7 @@ const BlockActionMenuPlugin = Extension.create({
   onFocus() {
     box.style.display = "block";
   },
-  onSelectionUpdate() {
+  onTransaction() {
     repositionMenu(this.editor as SolidEditor);
   }
 });
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
index 48589ed0..1373da46 100644
--- a/apps/web/src/lib/editor/extensions/element/custom-node-view.tsx
+++ b/apps/web/src/lib/editor/extensions/element/custom-node-view.tsx
@@ -1,4 +1,5 @@
 import { ElementDisplay } from "./view-manager";
+import { isElementSelection } from "./selection";
 import { NodeViewRendererProps } from "@tiptap/core";
 import { SolidEditor, SolidRenderer } from "@vrite/tiptap-solid";
 import { ExtensionElementViewContext, ExtensionElement } from "@vrite/sdk/extensions";
@@ -119,6 +120,14 @@ const customNodeView = ({
     contentHole.append(buttonContainer);
   }
 
+  const { selection } = editor.state;
+  const selectionPos = selection.$from.pos;
+  const pos = typeof props.getPos === "function" ? props.getPos() : null;
+
+  if (pos === selectionPos && isElementSelection(selection)) {
+    wrapper.classList.add("ring", "ring-primary", "ring-2");
+  }
+
   return {
     onSelect() {
       wrapper.classList.add("ring", "ring-primary", "ring-2");
diff --git a/apps/web/src/lib/editor/extensions/xml-node-menu/editor.tsx b/apps/web/src/lib/editor/extensions/xml-node-menu/editor.tsx
index 41bd95d0..788879eb 100644
--- a/apps/web/src/lib/editor/extensions/xml-node-menu/editor.tsx
+++ b/apps/web/src/lib/editor/extensions/xml-node-menu/editor.tsx
@@ -215,10 +215,21 @@ const ElementMenuEditor = lazy(async () => {
             return;
           }
 
-          // TODO: Handle word wrap
           if (code) {
-            code.textContent = value;
+            // WARNING: This is a private API
+            const viewModel = (codeEditor as any)._modelData.viewModel as Pick<
+              monaco.editor.ITextModel,
+              "getLineCount" | "getLineContent"
+            >;
+
             requestAnimationFrame(() => {
+              let viewModelContent = "";
+
+              for (let i = 1; i <= viewModel.getLineCount(); i++) {
+                viewModelContent += `${viewModel.getLineContent(i)}\n`;
+              }
+
+              code.textContent = viewModelContent.trim();
               code.style.minHeight = `${codeEditor.getContentHeight()}px`;
             });
           }
diff --git a/apps/web/src/views/content-piece/index.tsx b/apps/web/src/views/content-piece/index.tsx
index bed67bd8..0d277303 100644
--- a/apps/web/src/views/content-piece/index.tsx
+++ b/apps/web/src/views/content-piece/index.tsx
@@ -277,7 +277,11 @@ const ContentPieceView: Component = () => {
                     />
                   </div>
                 </CollapsibleSection>
-                <CollapsibleSection icon={mdiCodeJson} label="Custom data" defaultOpened={false}>
+                <CollapsibleSection
+                  icon={mdiCodeJson}
+                  label="Custom JSON data"
+                  defaultOpened={false}
+                >
                   <div class="w-full">
                     <CustomDataSection
                       editable={editable()}