@node-edit-utils/core 2.2.6 → 2.2.8

package/src/lib/node-tools/highlight/updateHighlightFrameVisibility.ts

@@ -1,15 +1,20 @@
+import { getCanvasContainer } from "@/lib/canvas/helpers/getCanvasContainer";
 import { getHighlightFrameElement } from "./helpers/getHighlightFrameElement";
 
 export const updateHighlightFrameVisibility = (node: HTMLElement): void => {
   const frame = getHighlightFrameElement();
   if (!frame) return;
 
+  // Batch DOM reads
   const hasHiddenClass = node.classList.contains("hidden") || node.classList.contains("select-none");
   const displayValue = hasHiddenClass ? "none" : "";
 
+  // Batch DOM writes
   frame.style.display = displayValue;
 
-  const toolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper") as HTMLElement | null;
+  const canvasContainer = getCanvasContainer();
+  const container = canvasContainer || document.body;
+  const toolsWrapper = container.querySelector(".highlight-frame-tools-wrapper") as HTMLElement | null;
   if (toolsWrapper) {
     toolsWrapper.style.display = displayValue;
   }

package/src/lib/node-tools/select/selectNode.ts

@@ -1,3 +1,5 @@
+import { enterTextEditMode } from "../text/helpers/enterTextEditMode";
+import type { NodeText } from "../text/types";
 import { IGNORED_DOM_ELEMENTS } from "./constants";
 import { getElementsFromPoint } from "./helpers/getElementsFromPoint";
 import { isInsideComponent } from "./helpers/isInsideComponent";
@@ -6,7 +8,9 @@ import { targetSameCandidates } from "./helpers/targetSameCandidates";
 let candidateCache: Element[] = [];
 let attempt = 0;
 
-export const selectNode = (event: MouseEvent, editableNode: HTMLElement | null): HTMLElement | null => {
+let lastSelectedNode: HTMLElement | null = null;
+
+export const selectNode = (event: MouseEvent, nodeProvider: HTMLElement | null, text: NodeText): HTMLElement | null => {
   let selectedNode: HTMLElement | null = null;
 
   const clickX = event.clientX;
@@ -21,19 +25,29 @@ export const selectNode = (event: MouseEvent, editableNode: HTMLElement | null):
       !isInsideComponent(element)
   );
 
+  const editableNode = text.getEditableNode();
   if (editableNode && candidates.includes(editableNode)) {
-    return editableNode;
+    selectedNode = editableNode;
+    lastSelectedNode = selectedNode;
+
+    return selectedNode;
   }
 
   if (clickThrough) {
     candidateCache = [];
-
     selectedNode = candidates[0] as HTMLElement;
+
+    if (lastSelectedNode && lastSelectedNode === selectedNode) {
+      enterTextEditMode(selectedNode, nodeProvider, text);
+    }
+
+    lastSelectedNode = selectedNode;
+
     return selectedNode;
   }
 
   if (targetSameCandidates(candidateCache, candidates)) {
-    attempt <= candidates.length && attempt++;
+    attempt <= candidates.length - 2 && attempt++;
   } else {
     attempt = 0;
   }
@@ -41,8 +55,13 @@ export const selectNode = (event: MouseEvent, editableNode: HTMLElement | null):
   const nodeIndex = candidates.length - 1 - attempt;
 
   selectedNode = candidates[nodeIndex] as HTMLElement;
-
   candidateCache = candidates;
 
+  if (lastSelectedNode && lastSelectedNode === selectedNode) {
+    enterTextEditMode(selectedNode, nodeProvider, text);
+  }
+
+  lastSelectedNode = selectedNode;
+
   return selectedNode;
 };

package/src/lib/node-tools/text/events/setupMutationObserver.ts

@@ -1,10 +1,24 @@
 import { connectMutationObserver } from "../../../helpers/observer/connectMutationObserver";
+import { withRAFThrottle } from "../../../helpers/withRAF";
 import { refreshHighlightFrame } from "../../highlight/refreshHighlightFrame";
+import { handleTextChange } from "../helpers/handleTextChange";
 
-export const setupMutationObserver = (node: HTMLElement, nodeProvider: HTMLElement, canvasName: string = "canvas"): (() => void) | undefined => {
-  const mutationObserver = connectMutationObserver(node, () => {
+export const setupMutationObserver = (
+  node: HTMLElement,
+  nodeProvider: HTMLElement,
+  canvasName: string = "canvas"
+): (() => void) | undefined => {
+  const throttledHandleTextChange = withRAFThrottle((mutations: MutationRecord[]) => {
+    handleTextChange(node, mutations);
+  });
+
+  const mutationObserver = connectMutationObserver(node, (mutations) => {
+    throttledHandleTextChange(mutations);
     refreshHighlightFrame(node, nodeProvider, canvasName);
   });
 
-  return () => mutationObserver.disconnect();
+  return () => {
+    mutationObserver.disconnect();
+    throttledHandleTextChange.cleanup();
+  };
 };

package/src/lib/node-tools/text/helpers/enterTextEditMode.ts

@@ -0,0 +1,9 @@
+import type { NodeText } from "../types";
+
+export const enterTextEditMode = (node: HTMLElement, nodeProvider: HTMLElement | null, text: NodeText): void => {
+  if (!node || !nodeProvider) {
+    return;
+  }
+
+  text.enableEditMode(node, nodeProvider);
+};

package/src/lib/node-tools/text/helpers/handleTextChange.ts

@@ -0,0 +1,27 @@
+import { sendPostMessage } from "@/lib/post-message/sendPostMessage";
+
+export const handleTextChange = (node: HTMLElement, mutations: MutationRecord[]): void => {
+  // Check if any mutation is a text content change
+  const hasTextChange = mutations.some((mutation) => {
+    return (
+      mutation.type === "characterData" ||
+      (mutation.type === "childList" && (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0))
+    );
+  });
+
+  if (!hasTextChange) {
+    return;
+  }
+
+  // Get the text content of the node
+  const textContent = node.textContent ?? "";
+
+  // Get the node ID
+  const nodeId = node.getAttribute("data-node-id");
+
+  // Send postMessage with the text change
+  sendPostMessage("textContentChanged", {
+    nodeId,
+    textContent,
+  });
+};

package/src/lib/node-tools/text/helpers/shouldEnterTextEditMode.ts

@@ -0,0 +1,9 @@
+import { hasTextContent } from "./hasTextContent";
+
+export const shouldEnterTextEditMode = (node: HTMLElement | null): boolean => {
+  if (!node) {
+    return false;
+  }
+
+  return hasTextContent(node);
+};

package/src/lib/styles/styles.css

@@ -2,6 +2,8 @@
   --primary-color: oklch(0.6235 0.22 294);
   --uncode-color: oklch(45.7% 0.24 277.023);
   --component-color: oklch(65.6% 0.241 354.308);
+  --text-edit-color: oklch(62.3% 0.214 259.815);
+  --text-edit-selection-color: oklch(62.3% 0.214 259.815 / 0.2);
 
   --handle-color: oklch(55.2% 0.016 285.938);
   --handle-color-transparent: oklch(55.2% 0.016 285.938 / 0.7);
@@ -19,7 +21,7 @@
   --transition-medium: 0.2s ease-in-out;
 
   --z-index-high: 10000;
-  --z-index-highlight: 5000;
+  --z-index-highlight: 500;
   --z-index-medium: 1000;
 
   --letter-spacing: 0.02em;
@@ -54,16 +56,19 @@
   padding-top: var(--spacing-2xs);
   display: flex;
   justify-content: center;
+  contain: layout style;
 }
 
 .highlight-frame-overlay {
-  position: fixed;
+  position: absolute;
   inset: 0;
   width: 100vw;
   height: 100vh;
   pointer-events: none;
   z-index: var(--z-index-highlight);
   overflow: visible;
+  contain: layout style paint;
+  will-change: transform;
 }
 
 .highlight-frame-rect {
@@ -76,6 +81,10 @@
   stroke: var(--component-color);
 }
 
+.highlight-frame-overlay.is-text-edit .highlight-frame-rect {
+  stroke: var(--text-edit-color);
+}
+
 .highlight-frame-handle {
   fill: white;
   stroke: var(--primary-color);
@@ -88,6 +97,10 @@
   stroke: var(--component-color);
 }
 
+.highlight-frame-overlay.is-text-edit .highlight-frame-handle {
+  stroke: var(--text-edit-color);
+}
+
 .highlight-frame-handle.handle-top-left {
   cursor: nwse-resize;
 }
@@ -105,7 +118,9 @@
 }
 
 .highlight-frame-tools-wrapper {
-  position: fixed;
+  position: absolute;
+  left: 0;
+  top: 0;
   pointer-events: none;
   z-index: var(--z-index-highlight);
   contain: layout style;
@@ -116,14 +131,14 @@
   color: var(--text-color-white);
   font-size: 0.575rem;
   font-weight: 500;
-  text-transform: uppercase;
   height: 1rem;
   padding: 0.5625rem var(--spacing-sm);
-  line-height: 1;
+  line-height: 1.4;
   border-radius: var(--spacing-sm);
   display: flex;
   align-items: center;
   justify-content: center;
+  white-space: nowrap;
 }
 
 .highlight-frame-tools-wrapper.is-instance .tag-label,
@@ -131,6 +146,11 @@
   background-color: var(--component-color);
 }
 
+.highlight-frame-tools-wrapper.is-text-edit .tag-label,
+.node-tools.is-text-edit .tag-label {
+  background-color: var(--text-edit-color);
+}
+
 .viewport {
   position: relative;
   width: var(--container-width);
@@ -228,14 +248,14 @@
   user-select: text;
 
   &::selection {
-    background: var(--primary-color-selection);
+    background: var(--text-edit-selection-color);
   }
 
   &::-moz-selection {
-    background: var(--primary-color-selection);
+    background: var(--text-edit-selection-color);
   }
 
   &::-webkit-selection {
-    background: var(--primary-color-selection);
+    background: var(--text-edit-selection-color);
   }
 }