@tarviks/lexical-rich-editor 1.3.11 → 1.3.13

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
-import { createCommand, DecoratorNode, COMMAND_PRIORITY_HIGH, TextNode, ElementNode, SELECTION_CHANGE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, $getSelection, $isRangeSelection, $findMatchingParent, COMMAND_PRIORITY_LOW, KEY_DOWN_COMMAND, $getNodeByKey, $createRangeSelection, $setSelection, $createParagraphNode, $insertNodes, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR, PASTE_COMMAND, DRAGSTART_COMMAND, DRAGOVER_COMMAND, DROP_COMMAND, $getRoot, $createTextNode, $isTextNode, $isElementNode, FORMAT_ELEMENT_COMMAND, CLICK_COMMAND, $isNodeSelection, $applyNodeReplacement, FORMAT_TEXT_COMMAND, $isDecoratorNode, $getNearestNodeFromDOMNode, COMMAND_PRIORITY_CRITICAL, REDO_COMMAND, UNDO_COMMAND, getDOMSelection, KEY_ESCAPE_COMMAND, isHTMLElement, getDOMSelectionFromTarget, $isLineBreakNode, SKIP_SELECTION_FOCUS_TAG, createEditor, KEY_ENTER_COMMAND } from 'lexical';
+import { createCommand, $isTextNode, DecoratorNode, COMMAND_PRIORITY_HIGH, TextNode, ElementNode, SELECTION_CHANGE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, $getSelection, $isRangeSelection, $findMatchingParent, COMMAND_PRIORITY_LOW, KEY_DOWN_COMMAND, $getNodeByKey, $createRangeSelection, $setSelection, $createParagraphNode, $insertNodes, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR, PASTE_COMMAND, DRAGSTART_COMMAND, DRAGOVER_COMMAND, DROP_COMMAND, $getRoot, $createTextNode, $isElementNode, FORMAT_ELEMENT_COMMAND, CLICK_COMMAND, $isNodeSelection, $applyNodeReplacement, FORMAT_TEXT_COMMAND, $isDecoratorNode, $getNearestNodeFromDOMNode, COMMAND_PRIORITY_CRITICAL, REDO_COMMAND, UNDO_COMMAND, getDOMSelection, KEY_ESCAPE_COMMAND, isHTMLElement, getDOMSelectionFromTarget, $isLineBreakNode, SKIP_SELECTION_FOCUS_TAG, createEditor, KEY_ENTER_COMMAND } from 'lexical';
 import { mergeStyleSets, Stack, css, useTheme, Callout, TextField } from '@fluentui/react';
 import { makeStyles, FluentProvider, webLightTheme, Menu, MenuTrigger, MenuPopover, MenuList, MenuGroup, MenuGroupHeader, MenuItem, MenuDivider, Dropdown, Option, Button, ToolbarDivider, MenuItemRadio, Field, Input, MessageBar, MessageBarBody, Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-components';
 import { CodeHighlightNode, CodeNode, $isCodeHighlightNode } from '@lexical/code';
@@ -2209,6 +2209,48 @@ function $createYouTubeNode(videoID, width = DEFAULT_WIDTH, height = DEFAULT_HEI
 function $isYouTubeNode(node) {
   return node instanceof YouTubeNode;
 }
+var PRESERVED_STYLE_PROPS = [
+  ["fontFamily", "font-family"],
+  ["fontSize", "font-size"],
+  ["color", "color"],
+  ["backgroundColor", "background-color"]
+];
+var $convertSpanElementWithStyle = (domNode) => {
+  const style = domNode.style;
+  const cssParts = [];
+  for (const [domProp, cssProp] of PRESERVED_STYLE_PROPS) {
+    const value = style[domProp];
+    if (value) cssParts.push(`${cssProp}: ${value}`);
+  }
+  const cssText = cssParts.length > 0 ? `${cssParts.join("; ")};` : "";
+  const fontWeight = style.fontWeight;
+  const textDecoration = style.textDecoration.split(" ");
+  const hasBoldFontWeight = fontWeight === "700" || fontWeight === "bold";
+  const hasLinethroughTextDecoration = textDecoration.includes("line-through");
+  const hasItalicFontStyle = style.fontStyle === "italic";
+  const hasUnderlineTextDecoration = textDecoration.includes("underline");
+  const verticalAlign = style.verticalAlign;
+  return {
+    node: null,
+    forChild: (lexicalNode) => {
+      if (!$isTextNode(lexicalNode)) return lexicalNode;
+      if (cssText) lexicalNode.setStyle(cssText);
+      if (hasBoldFontWeight && !lexicalNode.hasFormat("bold")) lexicalNode.toggleFormat("bold");
+      if (hasLinethroughTextDecoration && !lexicalNode.hasFormat("strikethrough")) lexicalNode.toggleFormat("strikethrough");
+      if (hasItalicFontStyle && !lexicalNode.hasFormat("italic")) lexicalNode.toggleFormat("italic");
+      if (hasUnderlineTextDecoration && !lexicalNode.hasFormat("underline")) lexicalNode.toggleFormat("underline");
+      if (verticalAlign === "sub" && !lexicalNode.hasFormat("subscript")) lexicalNode.toggleFormat("subscript");
+      if (verticalAlign === "super" && !lexicalNode.hasFormat("superscript")) lexicalNode.toggleFormat("superscript");
+      return lexicalNode;
+    }
+  };
+};
+var preserveTextStyleImportMap = {
+  span: () => ({
+    conversion: $convertSpanElementWithStyle,
+    priority: 0
+  })
+};
 var normalize = (s) => (s ?? "").replace(/\s+/g, " ").trim();
 function readContextWindow(maxChars = 300, cursorIndex) {
   const full = normalize($getRoot().getTextContent());
@@ -3156,12 +3198,16 @@ function splitHeadingsAtBrSequences(html) {
   });
   return doc.body.innerHTML;
 }
-var CustomOnChangePlugin = ({ value, onChange }) => {
+var CustomOnChangePlugin = ({ value, onChange, isReadOnly }) => {
   const [editor] = useLexicalComposerContext();
   const initializedRef = useRef(false);
+  const lastImportedValueRef = useRef(null);
   useEffect(() => {
-    if (!value || initializedRef.current) return;
+    if (!value) return;
+    if (!isReadOnly && initializedRef.current) return;
+    if (value === lastImportedValueRef.current) return;
     initializedRef.current = true;
+    lastImportedValueRef.current = value;
     editor.update(() => {
       const root = $getRoot();
       root.clear();
@@ -3172,14 +3218,17 @@ var CustomOnChangePlugin = ({ value, onChange }) => {
       const nodes = $generateNodesFromDOM(editor, dom);
       root.append(...nodes);
     });
-  }, [editor, value]);
+  }, [editor, value, isReadOnly]);
   return /* @__PURE__ */ jsx(
     OnChangePlugin,
     {
+      ignoreSelectionChange: true,
       onChange: (editorState) => {
         editorState.read(() => {
           const raw = $generateHtmlFromNodes(editor);
-          onChange(postProcessOutput(splitHeadingsAtBrSequences(raw)));
+          const html = postProcessOutput(splitHeadingsAtBrSequences(raw));
+          lastImportedValueRef.current = html;
+          onChange(html);
         });
       }
     }
@@ -5149,16 +5198,18 @@ function getScrollClipAncestor(el) {
   }
   return null;
 }
+var BUTTON_VERTICAL_FOOTPRINT = 34;
 function isRectVisible(rect, cellDom) {
   if (rect.width === 0 && rect.height === 0) return false;
-  if (rect.bottom <= 0 || rect.top >= window.innerHeight) return false;
-  if (rect.right <= 0 || rect.left >= window.innerWidth) return false;
   const clipAncestor = getScrollClipAncestor(cellDom);
-  if (clipAncestor) {
-    const containerRect = clipAncestor.getBoundingClientRect();
-    if (rect.bottom <= containerRect.top || rect.top >= containerRect.bottom) return false;
-    if (rect.right <= containerRect.left || rect.left >= containerRect.right) return false;
-  }
+  const containerRect = clipAncestor?.getBoundingClientRect();
+  const visibleTop = containerRect ? Math.max(0, containerRect.top) : 0;
+  const visibleBottom = containerRect ? Math.min(window.innerHeight, containerRect.bottom) : window.innerHeight;
+  const visibleLeft = containerRect ? Math.max(0, containerRect.left) : 0;
+  const visibleRight = containerRect ? Math.min(window.innerWidth, containerRect.right) : window.innerWidth;
+  if (rect.top < visibleTop) return false;
+  if (rect.top + BUTTON_VERTICAL_FOOTPRINT > visibleBottom) return false;
+  if (rect.left >= visibleRight || rect.right <= visibleLeft) return false;
   return true;
 }
 function TableActionMenuPlugin({ disabled = false }) {
@@ -5310,9 +5361,25 @@ function TableActionMenuPlugin({ disabled = false }) {
   const canShow = isInTable && !!anchorRect && isAnchorVisible && !disabled;
   const handleStyle = React9.useMemo(() => {
     if (!anchorRect) return void 0;
-    const top = Math.max(8, anchorRect.top + 6);
-    const clampedCellRight = Math.min(anchorRect.right, window.innerWidth - 8);
-    const left = contentRight !== null ? Math.max(anchorRect.left + 4, Math.min(contentRight + 4, clampedCellRight - 32)) : Math.max(8, anchorRect.left + 8);
+    const BUTTON_SIZE = 28;
+    const PAD = 8;
+    const editorRect = editor.getRootElement()?.getBoundingClientRect();
+    const clipRect = editorRect ? {
+      top: Math.max(editorRect.top, 0),
+      left: Math.max(editorRect.left, 0),
+      right: Math.min(editorRect.right, window.innerWidth),
+      bottom: Math.min(editorRect.bottom, window.innerHeight)
+    } : { top: 0, left: 0, right: window.innerWidth, bottom: window.innerHeight };
+    const isCellVisible = anchorRect.bottom > clipRect.top && anchorRect.top < clipRect.bottom && anchorRect.right > clipRect.left && anchorRect.left < clipRect.right;
+    if (!isCellVisible) return void 0;
+    const minTop = editorRect ? editorRect.top + PAD : PAD;
+    const maxTop = editorRect ? Math.max(minTop, editorRect.bottom - BUTTON_SIZE - PAD) : window.innerHeight - BUTTON_SIZE - PAD;
+    const minLeft = editorRect ? editorRect.left + PAD : PAD;
+    const maxLeft = editorRect ? Math.max(minLeft, editorRect.right - BUTTON_SIZE - PAD) : window.innerWidth - BUTTON_SIZE - PAD;
+    const top = Math.min(Math.max(anchorRect.top + 6, minTop), maxTop);
+    const clampedCellRight = Math.min(anchorRect.right, maxLeft + BUTTON_SIZE);
+    const rawLeft = contentRight !== null ? Math.max(anchorRect.left + 4, Math.min(contentRight + 4, clampedCellRight - 32)) : anchorRect.left + 8;
+    const left = Math.min(Math.max(rawLeft, minLeft), maxLeft);
     return {
       position: "fixed",
       top,
@@ -5322,7 +5389,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       // button renders behind the modal chrome in a full-page/Panel view.
       zIndex: 10000010
     };
-  }, [anchorRect, contentRight]);
+  }, [anchorRect, contentRight, editor]);
   const dangerStyle = {
     color: "var(--colorPaletteRedForeground1)"
   };
@@ -8266,7 +8333,10 @@ var ContentEditorComponent = forwardRef(
           AutocompleteNode,
           SpellErrorNode,
           HtmlBlockNode
-        ]
+        ],
+        html: {
+          import: preserveTextStyleImportMap
+        }
       };
       props.onBeforeInitialize?.(config);
       return config;
@@ -8594,7 +8664,14 @@ var ContentEditorComponent = forwardRef(
               }
             ),
             !isReadOnly && props.showFloatingToolbar && /* @__PURE__ */ jsx(CharacterStylesPopupPlugin, {}),
-            /* @__PURE__ */ jsx(CustomOnChangePlugin, { value: props.value, onChange: props.onChange }),
+            /* @__PURE__ */ jsx(
+              CustomOnChangePlugin,
+              {
+                value: props.value,
+                onChange: props.onChange,
+                isReadOnly
+              }
+            ),
             (props.wordLimit !== void 0 || props.required || props.minWords !== void 0 || props.maxWords !== void 0 || props.minChars !== void 0 || props.maxChars !== void 0 || props.noImages || props.maxImages !== void 0 || props.noLinks || props.maxLinks !== void 0 || props.noTables) && /* @__PURE__ */ jsx(ContentMetricsPlugin, { onMetricsChange: handleMetrics }),
             /* @__PURE__ */ jsx(
               RefApiPlugin,