@yurikilian/lex4 1.5.8 → 1.6.0

package/dist/lex4-editor.js

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { createContext, useContext, useMemo, useReducer, useState, useRef, useCallback, useEffect, forwardRef, createElement, useImperativeHandle } from "react";
-import { $getRoot, $createRangeSelectionFromDom, $getSelection, $isRangeSelection, $isTextNode, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $createParagraphNode, $applyNodeReplacement, DecoratorNode, KEY_BACKSPACE_COMMAND, COMMAND_PRIORITY_LOW, KEY_DELETE_COMMAND, $isNodeSelection, $getNodeByKey, $selectAll, SELECTION_CHANGE_COMMAND, KEY_TAB_COMMAND, $isElementNode, $isParagraphNode, $setSelection, FOCUS_COMMAND, $splitNode, $getNearestNodeFromDOMNode, CONTROLLED_TEXT_INSERTION_COMMAND, KEY_DOWN_COMMAND, PASTE_COMMAND, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_CRITICAL, $insertNodes, $createLineBreakNode, $createTextNode, createCommand, COMMAND_PRIORITY_EDITOR } from "lexical";
+import { $getRoot, $createRangeSelectionFromDom, $getSelection, $isRangeSelection, $isTextNode, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $createParagraphNode, $applyNodeReplacement, DecoratorNode, KEY_BACKSPACE_COMMAND, COMMAND_PRIORITY_LOW, KEY_DELETE_COMMAND, KEY_DOWN_COMMAND, $isNodeSelection, $getNodeByKey, $selectAll, SELECTION_CHANGE_COMMAND, KEY_TAB_COMMAND, $isElementNode, $isParagraphNode, $setSelection, FOCUS_COMMAND, $splitNode, $getNearestNodeFromDOMNode, CONTROLLED_TEXT_INSERTION_COMMAND, PASTE_COMMAND, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_CRITICAL, $insertNodes, $createLineBreakNode, $createTextNode, createCommand, COMMAND_PRIORITY_EDITOR } from "lexical";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode, ListItemNode, $isListNode, $createListItemNode, $createListNode } from "@lexical/list";
 import { $setBlocksType } from "@lexical/selection";
@@ -1024,7 +1024,11 @@ const DocumentProvider = ({
     register: (pageId, editor) => {
       editorMapRef.current.set(pageId, editor);
     },
-    unregister: (pageId) => {
+    unregister: (pageId, editor) => {
+      const currentEditor = editorMapRef.current.get(pageId);
+      if (editor && currentEditor && currentEditor !== editor) {
+        return;
+      }
       editorMapRef.current.delete(pageId);
     },
     get: (pageId) => editorMapRef.current.get(pageId),
@@ -2405,9 +2409,43 @@ function VariableChip({
       },
       COMMAND_PRIORITY_LOW
     );
+    const moveCaretFromSelectedNode = (direction) => {
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if (!$isVariableNode(node)) {
+          return;
+        }
+        if (direction === "backward") {
+          node.selectPrevious();
+        } else {
+          node.selectNext();
+        }
+      });
+    };
+    const unregisterArrowNavigation = editor.registerCommand(
+      KEY_DOWN_COMMAND,
+      (event) => {
+        if (!isSelected || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) {
+          return false;
+        }
+        if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+          event.preventDefault();
+          moveCaretFromSelectedNode("backward");
+          return true;
+        }
+        if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+          event.preventDefault();
+          moveCaretFromSelectedNode("forward");
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_LOW
+    );
     return () => {
       unregisterBackspace();
       unregisterDelete();
+      unregisterArrowNavigation();
     };
   }, [editor, isSelected, nodeKey]);
   return /* @__PURE__ */ jsx(
@@ -2491,15 +2529,23 @@ function applyFontSizeToSelectedVariables(editor, size) {
   });
 }
 function readSelectedVariableFormatting(editor) {
-  const firstNode = getSelectedVariableNodes(editor)[0];
-  if (!firstNode) {
-    return {};
-  }
-  const style = firstNode.getStyle();
-  return {
-    fontFamily: extractFontFamilyFromStyle(style),
-    fontSize: extractFontSizePtFromStyle(style)
-  };
+  let formatting = {};
+  editor.getEditorState().read(() => {
+    const selection = $getSelection();
+    if (!$isNodeSelection(selection)) {
+      return;
+    }
+    const firstNode = selection.getNodes().filter($isVariableNode)[0];
+    if (!firstNode) {
+      return;
+    }
+    const style = firstNode.getStyle();
+    formatting = {
+      fontFamily: extractFontFamilyFromStyle(style),
+      fontSize: extractFontSizePtFromStyle(style)
+    };
+  });
+  return formatting;
 }
 const BLOCK_TYPE_OPTIONS = [
   { value: "paragraph", shortLabel: "P" },
@@ -3781,6 +3827,22 @@ const ActiveEditorPlugin = ({
     setActiveEditor,
     setActivePageId
   ]);
+  useEffect(() => {
+    const caretPosition = { pageId, region };
+    const markEditorActive = () => {
+      setActivePageId(pageId);
+      setActiveEditor(editor, caretPosition);
+      onFocus == null ? void 0 : onFocus(editor);
+    };
+    return editor.registerRootListener((rootElement, prevRootElement) => {
+      prevRootElement == null ? void 0 : prevRootElement.removeEventListener("focusin", markEditorActive);
+      prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousedown", markEditorActive);
+      prevRootElement == null ? void 0 : prevRootElement.removeEventListener("pointerdown", markEditorActive);
+      rootElement == null ? void 0 : rootElement.addEventListener("focusin", markEditorActive);
+      rootElement == null ? void 0 : rootElement.addEventListener("mousedown", markEditorActive);
+      rootElement == null ? void 0 : rootElement.addEventListener("pointerdown", markEditorActive);
+    });
+  }, [editor, onFocus, pageId, region, setActiveEditor, setActivePageId]);
   useEffect(() => {
     return editor.registerCommand(
       FOCUS_COMMAND,
@@ -4448,7 +4510,7 @@ const EditorRegistryPlugin = ({ pageId }) => {
     editorRegistry.register(pageId, editor);
     debug("registry", `registered editor for page ${shortId(pageId)}`);
     return () => {
-      editorRegistry.unregister(pageId);
+      editorRegistry.unregister(pageId, editor);
       debug("registry", `unregistered editor for page ${shortId(pageId)}`);
     };
   }, [editor, pageId, editorRegistry]);
@@ -4772,7 +4834,7 @@ const PageView = React.memo(({
   onMoveToPreviousPage,
   onMoveToNextPage
 }) => {
-  const { document: document2, dispatch, setActivePageId } = useDocument();
+  const { document: document2, dispatch, editorRegistry, setActiveEditor, setActivePageId } = useDocument();
   const t = useTranslations();
   const page = document2.pages.find((p) => p.id === pageId);
   const showHeaderFooter = document2.headerFooterEnabled;
@@ -4802,7 +4864,11 @@ const PageView = React.memo(({
   );
   const handleFocus = useCallback(() => {
     setActivePageId(pageId);
-  }, [setActivePageId, pageId]);
+    const editor = editorRegistry.get(pageId);
+    if (editor) {
+      setActiveEditor(editor, { pageId, region: "body" });
+    }
+  }, [editorRegistry, pageId, setActiveEditor, setActivePageId]);
   const handleOverflow = useCallback(
     (overflowContent, cause) => {
       onOverflow == null ? void 0 : onOverflow(overflowContent, cause);
@@ -5462,6 +5528,20 @@ function insertDocumentContent(editor, document2) {
   });
   return inserted;
 }
+function resolveDocumentInsertTarget({
+  activeEditor,
+  activeCaretPosition,
+  activePageId,
+  editorRegistry
+}) {
+  if (activeEditor && (activeCaretPosition == null ? void 0 : activeCaretPosition.region) === "body") {
+    return activeEditor;
+  }
+  if (activePageId) {
+    return editorRegistry.get(activePageId) ?? null;
+  }
+  return editorRegistry.all()[0] ?? null;
+}
 function selectEntireDocument(rootElement, selectionBuffer) {
   if (!rootElement || !selectionBuffer) {
     return;
@@ -5667,8 +5747,10 @@ const EditorChrome = ({
 const EditorWithHandle = forwardRef(({ captureHistoryShortcutsOnWindow, onSave, className }, ref) => {
   const {
     document: doc,
+    activePageId,
     activeEditor,
     activeCaretPosition,
+    editorRegistry,
     historySidebarOpen,
     runHistoryAction,
     setHistorySidebarOpen
@@ -5677,7 +5759,6 @@ const EditorWithHandle = forwardRef(({ captureHistoryShortcutsOnWindow, onSave,
   const t = useTranslations();
   const documentRef = useRef(doc);
   const activeEditorRef = useRef(activeEditor);
-  const activeCaretRegionRef = useRef(activeCaretPosition == null ? void 0 : activeCaretPosition.region);
   const historySidebarOpenRef = useRef(historySidebarOpen);
   const runHistoryActionRef = useRef(runHistoryAction);
   const insertedDocumentContentLabelRef = useRef(t.history.actions.insertedDocumentContent);
@@ -5687,9 +5768,6 @@ const EditorWithHandle = forwardRef(({ captureHistoryShortcutsOnWindow, onSave,
   useEffect(() => {
     activeEditorRef.current = activeEditor;
   }, [activeEditor]);
-  useEffect(() => {
-    activeCaretRegionRef.current = activeCaretPosition == null ? void 0 : activeCaretPosition.region;
-  }, [activeCaretPosition == null ? void 0 : activeCaretPosition.region]);
   useEffect(() => {
     historySidebarOpenRef.current = historySidebarOpen;
   }, [historySidebarOpen]);
@@ -5712,8 +5790,13 @@ const EditorWithHandle = forwardRef(({ captureHistoryShortcutsOnWindow, onSave,
     setHistorySidebarOpen(!historySidebarOpenRef.current);
   };
   handle.insertDocumentContent = (documentToInsert) => {
-    const currentActiveEditor = activeEditorRef.current;
-    if (!currentActiveEditor || activeCaretRegionRef.current !== "body") {
+    const targetEditor = resolveDocumentInsertTarget({
+      activeEditor: activeEditorRef.current,
+      activeCaretPosition,
+      activePageId,
+      editorRegistry
+    });
+    if (!targetEditor) {
       return false;
     }
     let inserted = false;
@@ -5724,7 +5807,7 @@ const EditorWithHandle = forwardRef(({ captureHistoryShortcutsOnWindow, onSave,
         region: "document"
       },
       () => {
-        inserted = insertDocumentContent(currentActiveEditor, documentToInsert);
+        inserted = insertDocumentContent(targetEditor, documentToInsert);
       }
     );
     return inserted;