Fix

webstudio-is · Oct 25, 2024 · e77758a · e77758a
1 parent c30b74b
commit e77758a
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 4 deletions.
diff --git a/apps/builder/app/canvas/features/text-editor/text-editor.stories.tsx b/apps/builder/app/canvas/features/text-editor/text-editor.stories.tsx
@@ -7,6 +7,7 @@ import { Box, Button, Flex } from "@webstudio-is/design-system";
 import { theme } from "@webstudio-is/design-system";
 import type { Instance, Instances } from "@webstudio-is/sdk";
 import {
+  $instances,
   $pages,
   $registeredComponentMetas,
   $selectedPageId,
@@ -262,7 +263,8 @@ export const CursorPositioningUpDown: StoryFn<typeof TextEditor> = () => {
       <$.Body ws:id="bodyId">
         <$.Box ws:id="boxAId">
           Hello world <$.Bold ws:id="boldA">Hello world</$.Bold> Hello world
-          Hello world Hello world Hello world
+          world Hello worldsdsdj skdk ls dk jslkdjklsjdkl sdk jskdj ksjd lksdj
+          dsj
         </$.Box>
         <$.Box ws:id="boxBId">
           Let it be Let it be <$.Bold ws:id="boldB">Let it be Let</$.Bold> Let
@@ -272,6 +274,10 @@ export const CursorPositioningUpDown: StoryFn<typeof TextEditor> = () => {
     );
   });
 
+  useEffect(() => {
+    $instances.set(instances);
+  }, [instances]);
+
   const textEditingInstanceSelector = useStore($textEditingInstanceSelector);
 
   return (

diff --git a/apps/builder/app/canvas/features/text-editor/text-editor.tsx b/apps/builder/app/canvas/features/text-editor/text-editor.tsx
@@ -62,7 +62,7 @@ import {
   getVisibleElementsByInstanceSelector,
 } from "~/shared/dom-utils";
 import deepEqual from "fast-deep-equal";
-import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
+// import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
 
 const BindInstanceToNodePlugin = ({ refs }: { refs: Refs }) => {
   const [editor] = useLexicalComposerContext();
@@ -578,6 +578,13 @@ const SwitchBlockPlugin = ({ onNext }: SwitchBlockPluginProps) => {
         if (!$isRangeSelection(selection)) {
           return false;
         }
+        const isCaret =
+          selection.anchor.offset === selection.focus.offset &&
+          selection.anchor.key === selection.focus.key;
+
+        if (!isCaret) {
+          return false;
+        }
 
         const isLast = isSelectionLastNode();
 
@@ -603,6 +610,13 @@ const SwitchBlockPlugin = ({ onNext }: SwitchBlockPluginProps) => {
         if (!$isRangeSelection(selection)) {
           return false;
         }
+        const isCaret =
+          selection.anchor.offset === selection.focus.offset &&
+          selection.anchor.key === selection.focus.key;
+
+        if (!isCaret) {
+          return false;
+        }
 
         const isFirst = isSelectionFirstNode();
 
@@ -629,6 +643,14 @@ const SwitchBlockPlugin = ({ onNext }: SwitchBlockPluginProps) => {
           return false;
         }
 
+        const isCaret =
+          selection.anchor.offset === selection.focus.offset &&
+          selection.anchor.key === selection.focus.key;
+
+        if (!isCaret) {
+          return false;
+        }
+
         const isLast = isSelectionLastNode();
 
         const rect = getDomSelectionRect();
@@ -685,6 +707,14 @@ const SwitchBlockPlugin = ({ onNext }: SwitchBlockPluginProps) => {
           return false;
         }
 
+        const isCaret =
+          selection.anchor.offset === selection.focus.offset &&
+          selection.anchor.key === selection.focus.key;
+
+        if (!isCaret) {
+          return false;
+        }
+
         const isFirst = isSelectionFirstNode();
         const rect = getDomSelectionRect();
 
@@ -701,6 +731,7 @@ const SwitchBlockPlugin = ({ onNext }: SwitchBlockPluginProps) => {
 
         const rootNode = $getRoot();
         const lastNode = rootNode.getFirstDescendant();
+
         if ($isLineBreakNode(lastNode)) {
           return false;
         }
@@ -724,6 +755,11 @@ const SwitchBlockPlugin = ({ onNext }: SwitchBlockPluginProps) => {
           return true;
         }
 
+        // Lexical has a bug where the cursor sometimes stops moving up.
+        // Slight adjustments fix this issue.
+        selection.modify("move", false, "character");
+        selection.modify("move", true, "character");
+
         return false;
       },
       COMMAND_PRIORITY_CRITICAL
@@ -765,6 +801,47 @@ const InitialJSONStatePlugin = ({
   return null;
 };
 
+/*
+const ShowFocusPlugin = () => {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    const rootElement = editor.getRootElement();
+
+    const abortController = new AbortController();
+
+    rootElement?.addEventListener(
+      "focus",
+      () => {
+        console.log("focused", editor.getRootElement()?.innerText);
+      },
+      {
+        signal: abortController.signal,
+      }
+    );
+    rootElement?.addEventListener(
+      "blur",
+      () => {
+        // console.log("blurred", editor.getRootElement()?.innerText);
+        // console.log($textEditingInstanceSelector.get()?.selector, selector);
+
+        const text = editor.getRootElement()?.innerText;
+        console.log("blured", text);
+      },
+      {
+        signal: abortController.signal,
+      }
+    );
+
+    return () => {
+      abortController.abort();
+    };
+  }, [editor]);
+
+  return null;
+};
+*/
+
 export const TextEditor = ({
   rootInstanceSelector,
   instances,
@@ -910,8 +987,7 @@ export const TextEditor = ({
 
   return (
     <LexicalComposer initialConfig={initialConfig}>
-      <AutoFocusPlugin />
-
+      {/* <ShowFocusPlugin /> */}
       <RemoveParagaphsPlugin />
       <CaretColorPlugin />
       <ToolbarConnectorPlugin

diff --git a/apps/builder/app/shared/instance-utils.ts b/apps/builder/app/shared/instance-utils.ts
@@ -211,6 +211,7 @@ export const findAllEditableInstanceSelector = (
   if (instance === undefined) {
     return;
   }
+
   // Check if current instance is text editing instance
   if (isTextEditingInstance(instance, instances, metas)) {
     results.push([instanceId, ...currentPath]);