feat: Block editing with arrow keys (#4334)

## Description

- Double click now sets cursor to the click position
- Up/Down arrows on a first/last line trying to preserve cursor x
position (visible in case of block above block)
- Right/Left arrows switch blocks if cursor is at block begin/end.



## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: istarkov

.storybook/main.ts

@@ -55,6 +55,7 @@ export default {
         // storybook use "util" package internally which is bundled with stories
         // and gives and error that process is undefined
         "process.env.NODE_DEBUG": "undefined",
+        "process.env.IS_STROYBOOK": "true",
       },
       resolve: {
         ...config.resolve,

apps/builder/app/builder/features/workspace/canvas-tools/outline/selected-instance-outline.tsx

@@ -23,7 +23,7 @@ export const SelectedInstanceOutline = () => {
   const isEditingCurrentInstance =
     textEditingInstanceSelector !== undefined &&
     areInstanceSelectorsEqual(
-      textEditingInstanceSelector,
+      textEditingInstanceSelector.selector,
       selectedInstanceSelector
     );
 

apps/builder/app/canvas/features/text-editor/text-editor.stories.tsx

@@ -1,14 +1,22 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useStore } from "@nanostores/react";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import type { StoryFn, Meta } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
-import { Box } from "@webstudio-is/design-system";
+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 { $textToolbar } from "~/shared/nano-states";
+import {
+  $instances,
+  $pages,
+  $registeredComponentMetas,
+  $selectedPageId,
+  $textEditingInstanceSelector,
+  $textToolbar,
+} from "~/shared/nano-states";
 import { TextEditor } from "./text-editor";
 import { emitCommand, subscribeCommands } from "~/canvas/shared/commands";
+import { $, renderJsx } from "@webstudio-is/sdk/testing";
 
 export default {
   component: TextEditor,
@@ -33,17 +41,21 @@ const createInstancePair = (
 
 const instances: Instances = new Map([
   createInstancePair("1", "Text", [
-    { type: "text", value: "Paragraph you can edit " },
+    { type: "text", value: "Paragraph you can edit Blabla " },
     { type: "id", value: "2" },
     { type: "id", value: "3" },
     { type: "id", value: "5" },
   ]),
-  createInstancePair("2", "Bold", [{ type: "text", value: "very bold text " }]),
+  createInstancePair("2", "Bold", [
+    { type: "text", value: "Very Very very bold text " },
+  ]),
   createInstancePair("3", "Bold", [{ type: "id", value: "4" }]),
   createInstancePair("4", "Italic", [
-    { type: "text", value: "with small italic" },
+    { type: "text", value: "And Bold Small with small italic" },
+  ]),
+  createInstancePair("5", "Bold", [
+    { type: "text", value: " la la la subtext" },
   ]),
-  createInstancePair("5", "Bold", [{ type: "text", value: " subtext" }]),
 ]);
 
 export const Basic: StoryFn<typeof TextEditor> = ({ onChange }) => {
@@ -128,6 +140,229 @@ export const Basic: StoryFn<typeof TextEditor> = ({ onChange }) => {
   );
 };
 
+export const CursorPositioning: StoryFn<typeof TextEditor> = ({ onChange }) => {
+  const textEditingInstanceSelector = useStore($textEditingInstanceSelector);
+
+  return (
+    <>
+      <Box
+        css={{
+          width: 300,
+          "& > div": {
+            padding: 40,
+            backgroundColor: textEditingInstanceSelector
+              ? "unset"
+              : "rgba(0,0,0,0.1)",
+          },
+          border: "1px solid #999",
+          color: "black",
+          " *": {
+            outline: "none",
+          },
+        }}
+        onClick={(event) => {
+          if (textEditingInstanceSelector !== undefined) {
+            return;
+          }
+          $textEditingInstanceSelector.set({
+            selector: ["1"],
+            reason: "click",
+            mouseX: event.clientX,
+            mouseY: event.clientY,
+          });
+        }}
+      >
+        {textEditingInstanceSelector && (
+          <TextEditor
+            rootInstanceSelector={["1"]}
+            instances={instances}
+            contentEditable={<ContentEditable />}
+            onChange={onChange}
+            onSelectInstance={(instanceId) =>
+              console.info("select instance", instanceId)
+            }
+          />
+        )}
+
+        {!textEditingInstanceSelector && (
+          <div>
+            <span>Paragraph you can edit Blabla </span>
+            <strong>Very Very very bold text </strong>
+            <strong>
+              <i>And Bold Small with small italic</i>
+            </strong>
+            <strong> la la la subtext</strong>
+          </div>
+        )}
+      </Box>
+      <br />
+      <div>
+        <i>Click on text above, see cursor position and start editing text</i>
+      </div>
+      {textEditingInstanceSelector && (
+        <Button
+          onClick={() => {
+            $textEditingInstanceSelector.set(undefined);
+          }}
+        >
+          Reset
+        </Button>
+      )}
+    </>
+  );
+};
+
+export const CursorPositioningUpDown: StoryFn<typeof TextEditor> = () => {
+  const [{ instances }, setState] = useState(() => {
+    $pages.set({
+      folders: [],
+      homePage: {
+        id: "homePageId",
+        rootInstanceId: "bodyId",
+        meta: {},
+        path: "",
+        title: "",
+        name: "",
+        systemDataSourceId: "",
+      },
+      pages: [
+        {
+          id: "pageId",
+          rootInstanceId: "bodyId",
+          path: "",
+          title: "",
+          name: "",
+          systemDataSourceId: "",
+          meta: {},
+        },
+      ],
+    });
+
+    $selectedPageId.set("pageId");
+
+    $registeredComponentMetas.set(
+      new Map([
+        [
+          "Box",
+          {
+            type: "container",
+            icon: "icon",
+          },
+        ],
+        [
+          "Bold",
+          {
+            type: "rich-text-child",
+            icon: "icon",
+          },
+        ],
+      ])
+    );
+
+    return renderJsx(
+      <$.Body ws:id="bodyId">
+        <$.Box ws:id="boxAId">
+          Hello world <$.Bold ws:id="boldA">Hello world</$.Bold> 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
+          it be Let it be Let it be Let it be Let it be Let it be
+        </$.Box>
+      </$.Body>
+    );
+  });
+
+  useEffect(() => {
+    $instances.set(instances);
+  }, [instances]);
+
+  const textEditingInstanceSelector = useStore($textEditingInstanceSelector);
+
+  return (
+    <>
+      <Flex
+        gap={2}
+        direction={"column"}
+        css={{
+          width: 500,
+          "& > div > div": {
+            padding: 5,
+            border: "1px solid #999",
+          },
+          "& *[aria-readonly]": {
+            backgroundColor: "rgba(0,0,0,0.02)",
+          },
+          "& strong": {
+            fontSize: "1.5em",
+          },
+
+          color: "black",
+          " *": {
+            outline: "none",
+          },
+        }}
+      >
+        <div style={{ display: "contents" }} data-ws-selector="boxAId,bodyId">
+          <TextEditor
+            key={textEditingInstanceSelector?.selector[0] ?? ""}
+            editable={
+              textEditingInstanceSelector === undefined ||
+              textEditingInstanceSelector?.selector[0] === "boxAId"
+            }
+            rootInstanceSelector={["boxAId", "bodyId"]}
+            instances={instances}
+            contentEditable={<ContentEditable />}
+            onChange={(data) => {
+              setState((prev) => {
+                for (const instance of data) {
+                  prev.instances.set(instance.id, instance);
+                }
+                return prev;
+              });
+            }}
+            onSelectInstance={(instanceId) =>
+              console.info("select instance", instanceId)
+            }
+          />
+        </div>
+
+        <div
+          style={{ display: "contents" }}
+          data-ws-selector="boxBId,bodyId"
+          data-ws-collapsed="true"
+        >
+          <TextEditor
+            key={textEditingInstanceSelector?.selector[0] ?? ""}
+            editable={textEditingInstanceSelector?.selector[0] === "boxBId"}
+            rootInstanceSelector={["boxBId", "bodyId"]}
+            instances={instances}
+            contentEditable={<ContentEditable />}
+            onChange={(data) => {
+              setState((prev) => {
+                for (const instance of data) {
+                  prev.instances.set(instance.id, instance);
+                }
+                return prev;
+              });
+            }}
+            onSelectInstance={(instanceId) =>
+              console.info("select instance", instanceId)
+            }
+          />
+        </div>
+      </Flex>
+      <br />
+      <i>Use arrows to move between editors, clicks are not working</i>
+    </>
+  );
+};
+
 Basic.args = {
   onChange: action("onChange"),
 };
+
+CursorPositioning.args = {
+  onChange: action("onChange"),
+};