@tarviks/lexical-rich-editor 1.3.8 → 1.3.10

package/dist/index.mjs

@@ -358,6 +358,7 @@ var init_ImageComponent = __esm({
           };
           img3.onerror = () => {
             imageCache.add(src);
+            resolve(null);
           };
         });
       }
@@ -417,6 +418,7 @@ var init_ImageComponent = __esm({
                 node.remove();
               }
             });
+            return true;
           }
           return false;
         },
@@ -586,6 +588,7 @@ var init_ImageComponent = __esm({
         {
           draggable,
           style: { position: "relative", display: "inline-block" },
+          onClick: (e) => onClick(e.nativeEvent),
           children: [
             isLoadError ? /* @__PURE__ */ jsx(BrokenImage, {}) : /* @__PURE__ */ jsx(
               LazyImage,
@@ -863,6 +866,10 @@ var init_InlineImageComponent = __esm({
             imageCache2.add(src);
             resolve(null);
           };
+          img3.onerror = () => {
+            imageCache2.add(src);
+            resolve(null);
+          };
         });
       }
     };
@@ -907,6 +914,7 @@ var init_InlineImageComponent = __esm({
                 }
               });
             }
+            return true;
           }
           return false;
         },
@@ -1026,34 +1034,42 @@ var init_InlineImageComponent = __esm({
       };
       const draggable = !isResizing;
       const isFocused = (isSelected || isResizing) && isEditable;
-      return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsxs("span", { draggable, style: { position: "relative", display: "inline-block" }, children: [
-        /* @__PURE__ */ jsx(
-          LazyImage2,
-          {
-            className: isFocused ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}` : null,
-            src,
-            altText,
-            imageRef,
-            width,
-            height,
-            position
-          }
-        ),
-        $isNodeSelection(selection) && isFocused && /* @__PURE__ */ jsx(
-          ImageResizer_default,
-          {
-            showCaption: false,
-            setShowCaption: () => {
-            },
-            captionsEnabled: false,
-            editor,
-            buttonRef,
-            imageRef,
-            onResizeStart,
-            onResizeEnd
-          }
-        )
-      ] }) });
+      return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsxs(
+        "span",
+        {
+          draggable,
+          style: { position: "relative", display: "inline-block" },
+          onClick: (e) => onClick(e.nativeEvent),
+          children: [
+            /* @__PURE__ */ jsx(
+              LazyImage2,
+              {
+                className: isFocused ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}` : null,
+                src,
+                altText,
+                imageRef,
+                width,
+                height,
+                position
+              }
+            ),
+            $isNodeSelection(selection) && isFocused && /* @__PURE__ */ jsx(
+              ImageResizer_default,
+              {
+                showCaption: false,
+                setShowCaption: () => {
+                },
+                captionsEnabled: false,
+                editor,
+                buttonRef,
+                imageRef,
+                onResizeStart,
+                onResizeEnd
+              }
+            )
+          ]
+        }
+      ) });
     };
     InlineImageComponent_default = InlineImageComponent;
   }
@@ -2934,6 +2950,7 @@ var ALLOWED_ATTRS = /* @__PURE__ */ new Set([
   "allowfullscreen"
 ]);
 var DANGEROUS_URL = /^\s*(javascript|data\s*:|vbscript)/i;
+var SAFE_IMAGE_DATA_URL = /^\s*data:image\/[a-z0-9.+-]+;base64,/i;
 function sanitizeElement(el) {
   for (const child of Array.from(el.children)) {
     sanitizeElement(child);
@@ -2965,7 +2982,8 @@ function sanitizeElement(el) {
       continue;
     }
     if (lname === "href" || lname === "src") {
-      if (DANGEROUS_URL.test(value)) {
+      const isSafeImageDataUrl = tag === "img" && lname === "src" && SAFE_IMAGE_DATA_URL.test(value);
+      if (DANGEROUS_URL.test(value) && !isSafeImageDataUrl) {
         el.removeAttribute(name);
       }
     }
@@ -4131,11 +4149,6 @@ var InlineImagePlugin = () => {
           if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
             $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
           }
-          const parent = imageNode.getParent();
-          if (parent && typeof parent.setFormat === "function") {
-            const fmt = payload.position === "right" ? "right" : payload.position === "full" ? "center" : "left";
-            parent.setFormat(fmt);
-          }
           return true;
         },
         COMMAND_PRIORITY_EDITOR
@@ -5088,6 +5101,7 @@ function SpellCheckPlugin({
 }
 function TableActionMenuPlugin({ disabled = false }) {
   const [editor] = useLexicalComposerContext();
+  const portalContainer = useFloatingPortalContainer(editor);
   const [isInTable, setIsInTable] = React9.useState(false);
   const [anchorRect, setAnchorRect] = React9.useState(null);
   const [contentRight, setContentRight] = React9.useState(null);
@@ -5170,6 +5184,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,
@@ -5221,7 +5247,10 @@ function TableActionMenuPlugin({ disabled = false }) {
       position: "fixed",
       top,
       left,
-      zIndex: 9999
+      // Matches the other floating surfaces (see FloatingPortal.ts): must clear
+      // Fluent's Panel/Modal Layer host (z-index 1000000), otherwise this
+      // button renders behind the modal chrome in a full-page/Panel view.
+      zIndex: 10000010
     };
   }, [anchorRect, contentRight]);
   const dangerStyle = {
@@ -5264,7 +5293,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       if (tableNode) tableNode.remove();
     });
   };
-  if (!canShow || !handleStyle) return null;
+  if (!canShow || !handleStyle || !portalContainer) return null;
   return createPortal(
     /* @__PURE__ */ jsx("div", { style: handleStyle, className: "aoTableActionHandleRoot", "data-lexical-editor-portal": "true", children: /* @__PURE__ */ jsxs(Menu, { open, onOpenChange: (_, data) => {
       openRef.current = data.open;
@@ -5321,7 +5350,7 @@ function TableActionMenuPlugin({ disabled = false }) {
         ] })
       ] }) })
     ] }) }),
-    document.body
+    portalContainer
   );
 }
 var MIN_ROW_HEIGHT = 33;
@@ -6020,6 +6049,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
             "div",
             {
               ref: svRef,
+              "data-testid": "color-sv-box",
               onPointerDown: handleSVPointerDown,
               onPointerMove: handleSVPointerMove,
               style: {
@@ -6077,6 +6107,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
             "div",
             {
               ref: hueRef,
+              "data-testid": "color-hue-bar",
               onPointerDown: handleHuePointerDown,
               onPointerMove: handleHuePointerMove,
               style: {
@@ -6126,6 +6157,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
             /* @__PURE__ */ jsx(
               TextField,
               {
+                "data-testid": "color-hex-input",
                 value: hexText,
                 onChange: handleHexChange,
                 onBlur: handleHexBlur,
@@ -6609,7 +6641,7 @@ var TableItemPlugin = ({ disabled }) => {
     const col = Number(columns);
     if (!row || !col) return;
     editor.update(() => {
-      const tableNode = $createTableNodeWithDimensions(row, col, true);
+      const tableNode = $createTableNodeWithDimensions(row, col, { columns: false, rows: true });
       $insertNodeToNearestRoot(tableNode);
     });
     setRows("");