@tarviks/lexical-rich-editor 1.3.10 → 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';
@@ -885,6 +885,7 @@ var init_InlineImageComponent = __esm({
           "data-position": position,
           style: {
             display: "block",
+            maxWidth: "100%",
             height,
             width
           },
@@ -1074,14 +1075,17 @@ var init_InlineImageComponent = __esm({
     InlineImageComponent_default = InlineImageComponent;
   }
 });
-var InlineImageComponent2, $convertInlineImageElement, InlineImageNode, $createInlineImageNode, $isInlineImageNode;
+var InlineImageComponent2, INLINE_IMAGE_MARKER_ATTR, $convertInlineImageElement, InlineImageNode, $createInlineImageNode, $isInlineImageNode;
 var init_InlineImageNode = __esm({
   "src/Nodes/InlineImageNode.tsx"() {
     InlineImageComponent2 = React9.lazy(() => Promise.resolve().then(() => (init_InlineImageComponent(), InlineImageComponent_exports)));
+    INLINE_IMAGE_MARKER_ATTR = "data-lexical-inline-image";
     $convertInlineImageElement = (domNode) => {
       if (isHTMLElement(domNode) && domNode.nodeName === "IMG") {
         const { alt: altText, src, width, height } = domNode;
-        const node = $createInlineImageNode({ altText, height, src, width });
+        const positionAttr = domNode.getAttribute("data-position");
+        const position = positionAttr === "left" || positionAttr === "right" || positionAttr === "full" ? positionAttr : void 0;
+        const node = $createInlineImageNode({ altText, height, position, src, width });
         return { node };
       }
       return null;
@@ -1125,10 +1129,15 @@ var init_InlineImageNode = __esm({
       }
       static importDOM() {
         return {
-          img: (node) => ({
-            conversion: $convertInlineImageElement,
-            priority: 0
-          })
+          img: (node) => {
+            if (isHTMLElement(node) && node.hasAttribute(INLINE_IMAGE_MARKER_ATTR)) {
+              return {
+                conversion: $convertInlineImageElement,
+                priority: 3
+              };
+            }
+            return null;
+          }
         };
       }
       constructor(src, altText, position, width, height, showCaption, caption, key) {
@@ -1147,6 +1156,11 @@ var init_InlineImageNode = __esm({
         element.setAttribute("alt", this.__altText);
         element.setAttribute("width", this.__width.toString());
         element.setAttribute("height", this.__height.toString());
+        element.setAttribute(INLINE_IMAGE_MARKER_ATTR, "true");
+        if (this.__position) {
+          element.setAttribute("data-position", this.__position);
+          _InlineImageNode.applyPositionStyle(element, this.__position);
+        }
         return { element };
       }
       exportJSON() {
@@ -1204,12 +1218,34 @@ var init_InlineImageNode = __esm({
         }
       }
       // View
+      // The position-left/right/full behavior is also defined in the package's
+      // CSS file as `.inline-editor-image.position-*` rules, but that file is a
+      // separate import (`@tarviks/lexical-rich-editor/dist/index.css`) a
+      // consuming app can forget to include. Applying it as inline styles here
+      // too means positioning still works even when that stylesheet isn't
+      // loaded, instead of silently no-op'ing back to normal block flow.
+      static applyPositionStyle(span, position) {
+        span.style.removeProperty("float");
+        span.style.removeProperty("display");
+        span.style.removeProperty("margin");
+        if (position === "left") {
+          span.style.float = "left";
+          span.style.margin = "4px 8px 4px 0";
+        } else if (position === "right") {
+          span.style.float = "right";
+          span.style.margin = "4px 0 4px 8px";
+        } else if (position === "full") {
+          span.style.display = "block";
+          span.style.margin = "8px 0";
+        }
+      }
       createDOM(config) {
         const span = document.createElement("span");
         const className = `${config.theme.inlineImage} position-${this.__position}`;
         if (className !== void 0) {
           span.className = className;
         }
+        _InlineImageNode.applyPositionStyle(span, this.__position);
         return span;
       }
       updateDOM(prevNode, dom, config) {
@@ -1219,6 +1255,7 @@ var init_InlineImageNode = __esm({
           if (className !== void 0) {
             dom.className = className;
           }
+          _InlineImageNode.applyPositionStyle(dom, position);
         }
         return false;
       }
@@ -2172,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());
@@ -2945,6 +3024,8 @@ var ALLOWED_ATTRS = /* @__PURE__ */ new Set([
   "data-lex-block",
   "data-kind",
   "data-lexical-decorator",
+  "data-lexical-inline-image",
+  "data-position",
   // Misc
   "title",
   "allowfullscreen"
@@ -5099,11 +5180,37 @@ function SpellCheckPlugin({
     }
   ) : null;
 }
+function getScrollClipAncestor(el) {
+  let node = el.parentElement;
+  while (node) {
+    const style = getComputedStyle(node);
+    if ((style.overflowY === "auto" || style.overflowY === "scroll") && node.scrollHeight > node.clientHeight) {
+      return node;
+    }
+    node = node.parentElement;
+  }
+  return null;
+}
+var BUTTON_VERTICAL_FOOTPRINT = 34;
+function isRectVisible(rect, cellDom) {
+  if (rect.width === 0 && rect.height === 0) return false;
+  const clipAncestor = getScrollClipAncestor(cellDom);
+  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 }) {
   const [editor] = useLexicalComposerContext();
   const portalContainer = useFloatingPortalContainer(editor);
   const [isInTable, setIsInTable] = React9.useState(false);
   const [anchorRect, setAnchorRect] = React9.useState(null);
+  const [isAnchorVisible, setIsAnchorVisible] = React9.useState(false);
   const [contentRight, setContentRight] = React9.useState(null);
   const [open, setOpen] = React9.useState(false);
   const openRef = React9.useRef(false);
@@ -5129,8 +5236,10 @@ function TableActionMenuPlugin({ disabled = false }) {
         if (tableNode) {
           const dom = editor.getElementByKey(tableNode.getKey());
           if (dom) {
+            const rect = dom.getBoundingClientRect();
             setIsInTable(true);
-            setAnchorRect(dom.getBoundingClientRect());
+            setAnchorRect(rect);
+            setIsAnchorVisible(isRectVisible(rect, dom));
             setContentRight(null);
             return;
           }
@@ -5139,6 +5248,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       if (!$isRangeSelection(selection)) {
         setIsInTable(false);
         setAnchorRect(null);
+        setIsAnchorVisible(false);
         setContentRight(null);
         return;
       }
@@ -5147,6 +5257,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       if (!cellNode || !$isTableCellNode(cellNode)) {
         setIsInTable(false);
         setAnchorRect(null);
+        setIsAnchorVisible(false);
         setContentRight(null);
         return;
       }
@@ -5154,11 +5265,14 @@ function TableActionMenuPlugin({ disabled = false }) {
       if (!cellDom) {
         setIsInTable(false);
         setAnchorRect(null);
+        setIsAnchorVisible(false);
         setContentRight(null);
         return;
       }
+      const cellRect = cellDom.getBoundingClientRect();
       setIsInTable(true);
-      setAnchorRect(cellDom.getBoundingClientRect());
+      setAnchorRect(cellRect);
+      setIsAnchorVisible(isRectVisible(cellRect, cellDom));
       setContentRight(measureContentRight(cellDom));
       if ($isRangeSelection(selection)) {
         savedAnchorRef.current = {
@@ -5237,7 +5351,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       COMMAND_PRIORITY_HIGH
     );
   }, [editor, disabled]);
-  const canShow = isInTable && !!anchorRect && !disabled;
+  const canShow = isInTable && !!anchorRect && isAnchorVisible && !disabled;
   const handleStyle = React9.useMemo(() => {
     if (!anchorRect) return void 0;
     const top = Math.max(8, anchorRect.top + 6);
@@ -8196,7 +8310,10 @@ var ContentEditorComponent = forwardRef(
           AutocompleteNode,
           SpellErrorNode,
           HtmlBlockNode
-        ]
+        ],
+        html: {
+          import: preserveTextStyleImportMap
+        }
       };
       props.onBeforeInitialize?.(config);
       return config;