fix: Element display & updates handling

vriteio · Jul 5, 2024 · 34f7a54 · 34f7a54
1 parent 560e279
commit 34f7a54
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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()}