@tarviks/lexical-rich-editor 1.3.9 → 1.3.11

package/dist/index.mjs

@@ -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;
       }
@@ -2945,6 +2982,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 +5138,35 @@ 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;
+}
+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;
+  }
+  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 +5192,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 +5204,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       if (!$isRangeSelection(selection)) {
         setIsInTable(false);
         setAnchorRect(null);
+        setIsAnchorVisible(false);
         setContentRight(null);
         return;
       }
@@ -5147,6 +5213,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       if (!cellNode || !$isTableCellNode(cellNode)) {
         setIsInTable(false);
         setAnchorRect(null);
+        setIsAnchorVisible(false);
         setContentRight(null);
         return;
       }
@@ -5154,11 +5221,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 = {
@@ -5184,6 +5254,18 @@ function TableActionMenuPlugin({ disabled = false }) {
       })
     );
   }, [editor, updateFromSelection]);
+  React9.useEffect(() => {
+    const root = editor.getRootElement();
+    const reposition = () => updateFromSelection();
+    window.addEventListener("resize", reposition);
+    window.addEventListener("scroll", reposition, true);
+    root?.addEventListener("scroll", reposition, { passive: true });
+    return () => {
+      window.removeEventListener("resize", reposition);
+      window.removeEventListener("scroll", reposition, true);
+      root?.removeEventListener("scroll", reposition);
+    };
+  }, [editor, updateFromSelection]);
   React9.useEffect(() => {
     return editor.registerCommand(
       KEY_DOWN_COMMAND,
@@ -5225,7 +5307,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);