@node-edit-utils/core 2.2.7 → 2.2.9

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,60 @@
 import { connectMutationObserver } from "../../../helpers/observer/connectMutationObserver";
 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 => {
+  // Accumulate mutations instead of replacing them
+  let pendingMutations: MutationRecord[] = [];
+  let rafId1: number | null = null;
+  let rafId2: number | null = null;
+
+  const processMutations = () => {
+    if (pendingMutations.length > 0) {
+      const mutationsToProcess = [...pendingMutations];
+      pendingMutations = [];
+      handleTextChange(node, mutationsToProcess);
+    }
+  };
+
+  const scheduleProcess = () => {
+    if (rafId1 === null) {
+      rafId1 = requestAnimationFrame(() => {
+        // First RAF: let browser complete layout
+        rafId2 = requestAnimationFrame(() => {
+          // Second RAF: read textContent after layout is complete
+          processMutations();
+          rafId1 = null;
+          rafId2 = null;
+        });
+      });
+    }
+  };
+
+  const cleanup = () => {
+    if (rafId1 !== null) {
+      cancelAnimationFrame(rafId1);
+      rafId1 = null;
+    }
+    if (rafId2 !== null) {
+      cancelAnimationFrame(rafId2);
+      rafId2 = null;
+    }
+    pendingMutations = [];
+  };
+
+  const mutationObserver = connectMutationObserver(node, (mutations) => {
+    // Accumulate mutations instead of replacing
+    pendingMutations.push(...mutations);
+    scheduleProcess();
     refreshHighlightFrame(node, nodeProvider, canvasName);
   });
 
-  return () => mutationObserver.disconnect();
+  return () => {
+    mutationObserver.disconnect();
+    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,29 @@
+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");
+
+  console.log("textContentChanged", nodeId, textContent);
+
+  // 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;
@@ -58,7 +60,7 @@
 }
 
 .highlight-frame-overlay {
-  position: fixed;
+  position: absolute;
   inset: 0;
   width: 100vw;
   height: 100vh;
@@ -79,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);
@@ -91,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;
 }
@@ -108,7 +118,7 @@
 }
 
 .highlight-frame-tools-wrapper {
-  position: fixed;
+  position: absolute;
   left: 0;
   top: 0;
   pointer-events: none;
@@ -121,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,
@@ -136,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);
@@ -233,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);
   }
 }