@tarviks/lexical-rich-editor 1.3.11 → 1.3.12

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());
@@ -5149,16 +5191,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 }) {
@@ -8266,7 +8310,10 @@ var ContentEditorComponent = forwardRef(
           AutocompleteNode,
           SpellErrorNode,
           HtmlBlockNode
-        ]
+        ],
+        html: {
+          import: preserveTextStyleImportMap
+        }
       };
       props.onBeforeInitialize?.(config);
       return config;