rme 0.3.0-beta.30 → 0.3.0-beta.31

package/dist/index.mjs

@@ -2253,7 +2253,7 @@ function computeChange(oldVal, newVal) {
 
 // src/editor/components/Editor.tsx
 import { prosemirrorNodeToHtml } from "@rme-sdk/main";
-import { forwardRef as forwardRef2, memo as memo9, useImperativeHandle as useImperativeHandle2, useMemo as useMemo7, useState as useState9 } from "react";
+import { forwardRef as forwardRef2, memo as memo9, useImperativeHandle as useImperativeHandle2, useMemo as useMemo7, useState as useState8 } from "react";
 
 // src/editor/components/SourceEditor/index.tsx
 import { ProsemirrorDevTools } from "@rme-sdk/dev";
@@ -12557,123 +12557,69 @@ import { PositionerPortal, useCommands as useCommands3, useMultiPositioner } fro
 import { useEffect as useEffect9 } from "react";
 
 // src/editor/toolbar/TableToolbar/ActiveCellMenu.tsx
-import {
-  ClickAwayListener,
-  Grow,
-  ListItemText,
-  MenuItem as MenuItem2,
-  MenuList,
-  Paper,
-  Popper
-} from "@mui/material";
 import { useCommands } from "@rme-sdk/react";
-import { useRef as useRef9, useState as useState8 } from "react";
+import { Dropdown } from "antd";
 import { useTranslation as useTranslation2 } from "react-i18next";
-import styled12 from "styled-components";
-import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
-var Container5 = styled12.div`
-  position: absolute;
-
-  .MuiList-padding {
-    padding: 0;
-  }
-`;
+import { jsx as jsx20 } from "react/jsx-runtime";
 var ActiveCellMenu = (props) => {
   const { positioner } = props;
   const commands = useCommands();
-  const [open, setOpen] = useState8(false);
-  const anchorRef = useRef9(null);
   const { t: t19 } = useTranslation2();
-  const options = [
+  const menuItems = [
     {
-      label: "insert column before",
-      i18nKey: "table.insertColumnBefore",
-      handler: commands.addTableColumnBefore
+      key: "insertColumnBefore",
+      label: t19("table.insertColumnBefore"),
+      onClick: commands.addTableColumnBefore
     },
     {
-      label: "insert column after",
-      i18nKey: "table.insertColumnAfter",
-      handler: commands.addTableColumnAfter
+      key: "insertColumnAfter",
+      label: t19("table.insertColumnAfter"),
+      onClick: commands.addTableColumnAfter
     },
     {
-      label: "insert row before",
-      i18nKey: "table.insertRowBefore",
-      handler: commands.addTableRowBefore
+      key: "insertRowBefore",
+      label: t19("table.insertRowBefore"),
+      onClick: commands.addTableRowBefore
     },
     {
-      label: "insert row after",
-      i18nKey: "table.insertRowAfter",
-      handler: commands.addTableRowAfter
+      key: "insertRowAfter",
+      label: t19("table.insertRowAfter"),
+      onClick: commands.addTableRowAfter
     },
     {
-      label: "delete column",
-      i18nKey: "table.deleteColumn",
-      handler: commands.deleteTableColumn
+      key: "deleteColumn",
+      label: t19("table.deleteColumn"),
+      onClick: commands.deleteTableColumn
     },
     {
-      label: "delete row",
-      i18nKey: "table.deleteRow",
-      handler: commands.deleteTableRow
+      key: "deleteRow",
+      label: t19("table.deleteRow"),
+      onClick: commands.deleteTableRow
     }
   ];
-  const handleClose = (event) => {
-    if (anchorRef.current && anchorRef.current.contains(event.target)) {
-      return;
-    }
-    setOpen(false);
-  };
   const { ref, key: key2, x, y } = positioner;
-  return /* @__PURE__ */ jsxs9(
-    Container5,
+  return /* @__PURE__ */ jsx20(
+    "div",
     {
       ref,
       style: {
+        position: "absolute",
         left: x,
         top: y,
         width: 20,
         height: 20,
         zIndex: 1
       },
-      onMouseDown: (e) => {
-        e.preventDefault();
-        setOpen(true);
-      },
-      children: [
-        /* @__PURE__ */ jsx20("div", { ref: anchorRef, children: /* @__PURE__ */ jsx20("i", { className: "ri-equalizer-line" }) }),
-        /* @__PURE__ */ jsx20(
-          Popper,
-          {
-            sx: {
-              zIndex: 1
-            },
-            open,
-            anchorEl: anchorRef.current,
-            role: void 0,
-            transition: true,
-            disablePortal: true,
-            children: ({ TransitionProps, placement }) => /* @__PURE__ */ jsx20(
-              Grow,
-              {
-                ...TransitionProps,
-                style: {
-                  transformOrigin: placement === "bottom" ? "center top" : "center bottom"
-                },
-                children: /* @__PURE__ */ jsx20(Paper, { children: /* @__PURE__ */ jsx20(ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsx20(MenuList, { dense: true, autoFocusItem: true, children: options.map((option) => /* @__PURE__ */ jsx20(
-                  MenuItem2,
-                  {
-                    onClick: () => {
-                      option.handler();
-                      setOpen(false);
-                    },
-                    children: /* @__PURE__ */ jsx20(ListItemText, { children: t19(option.i18nKey) })
-                  },
-                  option.label
-                )) }) }) })
-              }
-            )
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsx20(Dropdown, { menu: { items: menuItems }, trigger: ["click"], children: /* @__PURE__ */ jsx20(
+        "div",
+        {
+          onMouseDown: (e) => {
+            e.preventDefault();
+          },
+          style: { cursor: "pointer" },
+          children: /* @__PURE__ */ jsx20("i", { className: "ri-equalizer-line" })
+        }
+      ) })
     },
     key2
   );
@@ -12682,10 +12628,10 @@ var ActiveCellMenu_default = ActiveCellMenu;
 
 // src/editor/toolbar/TableToolbar/TableBar.tsx
 import { useCommands as useCommands2 } from "@rme-sdk/react";
-import styled13 from "styled-components";
+import styled12 from "styled-components";
 import { Tooltip } from "zens";
 import { jsx as jsx21 } from "react/jsx-runtime";
-var Container6 = styled13.div`
+var Container5 = styled12.div`
   position: absolute;
   color: ${(props) => props.theme.dangerColor};
 `;
@@ -12694,7 +12640,7 @@ function TableBar(props) {
   const commands = useCommands2();
   const { ref, key: key2, x, y } = positioner;
   return /* @__PURE__ */ jsx21(
-    Container6,
+    Container5,
     {
       ref,
       style: {
@@ -12820,7 +12766,7 @@ var TableToolbar_default = TableToolbar;
 // src/editor/toolbar/toolbar/command-btns/command-button.tsx
 import { isString as isString4 } from "@rme-sdk/core";
 import { useCallback as useCallback6 } from "react";
-import styled14 from "styled-components";
+import styled13 from "styled-components";
 import { Ariakit, Tooltip as Tooltip2 } from "zens";
 
 // src/editor/toolbar/toolbar/use-command-option-values.ts
@@ -12906,7 +12852,7 @@ var CommandButton = ({
   const tooltipText = label ?? labelText;
   const shortcutText = displayShortcut && commandOptions.shortcut ? ` (${commandOptions.shortcut})` : "";
   return /* @__PURE__ */ jsx24(Tooltip2, { title: `${tooltipText}${shortcutText}`, children: /* @__PURE__ */ jsx24(
-    Container7,
+    Container6,
     {
       "aria-label": labelText,
       disabled: !enabled,
@@ -12917,7 +12863,7 @@ var CommandButton = ({
     }
   ) });
 };
-var Container7 = styled14(Ariakit.ToolbarItem)`
+var Container6 = styled13(Ariakit.ToolbarItem)`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -12935,7 +12881,7 @@ var Container7 = styled14(Ariakit.ToolbarItem)`
 `;
 
 // src/editor/toolbar/toolbar/wysiwyg-toolbar.tsx
-import styled15 from "styled-components";
+import styled14 from "styled-components";
 import { Ariakit as Ariakit2 } from "zens";
 
 // src/editor/toolbar/toolbar/command-btns/insert-separator-button.tsx
@@ -13282,10 +13228,10 @@ var UndoButton = (props) => {
 };
 
 // src/editor/toolbar/toolbar/wysiwyg-toolbar.tsx
-import { jsx as jsx37, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs9 } from "react/jsx-runtime";
 var WysiwygToolbar = (props) => {
   const { prevActions = null, nextActions = null } = props;
-  return /* @__PURE__ */ jsxs10(ToolBar, { className: props.className, style: props.style, children: [
+  return /* @__PURE__ */ jsxs9(ToolBar, { className: props.className, style: props.style, children: [
     prevActions,
     /* @__PURE__ */ jsx37(UndoButton, {}),
     /* @__PURE__ */ jsx37(RedoButton, {}),
@@ -13304,7 +13250,7 @@ var WysiwygToolbar = (props) => {
     nextActions
   ] });
 };
-var ToolBar = styled15(Ariakit2.Toolbar)`
+var ToolBar = styled14(Ariakit2.Toolbar)`
   display: flex;
   flex-wrap: wrap;
   max-width: 100%;
@@ -13315,7 +13261,7 @@ var ToolBar = styled15(Ariakit2.Toolbar)`
   color: ${(props) => props.theme.primaryFontColor};
   background-color: ${(props) => props.theme.editorToolbarBgColor};
 `;
-var ToolbarSeparator = styled15(Ariakit2.ToolbarSeparator)`
+var ToolbarSeparator = styled14(Ariakit2.ToolbarSeparator)`
   height: 0.5em;
   margin: 0 0.25em;
   border-right-width: 1px;
@@ -13417,7 +13363,7 @@ var createWysiwygDelegate = (options = {}) => {
 };
 
 // src/editor/components/WysiwygEditor/index.tsx
-import { jsx as jsx39, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs10 } from "react/jsx-runtime";
 var WysiwygEditor = (props) => {
   const {
     content,
@@ -13458,7 +13404,7 @@ var WysiwygEditor = (props) => {
   } catch (error) {
     return /* @__PURE__ */ jsx39(ErrorBoundary_default, { hasError: true, error, ...props.errorHandler || {} });
   }
-  return /* @__PURE__ */ jsx39(ErrorBoundary_default, { ...props.errorHandler || {}, children: /* @__PURE__ */ jsx39(WysiwygThemeWrapper, { ...styleToken, children: /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsx39(ErrorBoundary_default, { ...props.errorHandler || {}, children: /* @__PURE__ */ jsx39(WysiwygThemeWrapper, { ...styleToken, children: /* @__PURE__ */ jsxs10(
     Remirror2,
     {
       manager: editorDelegate.manager,
@@ -13492,7 +13438,7 @@ var Editor = memo9(
       onContextMounted,
       ...otherProps
     } = props;
-    const [type, setType] = useState9(initialType);
+    const [type, setType] = useState8(initialType);
     useImperativeHandle2(ref, () => ({
       getType: () => type,
       toggleType: (targetType) => {
@@ -13659,7 +13605,7 @@ var ThemeProvider = memo10(({ theme, i18n, children }) => {
 });
 
 // src/editor/components/Preview/preview.tsx
-import { useEffect as useEffect12, useState as useState10 } from "react";
+import { useEffect as useEffect12, useState as useState9 } from "react";
 import { Icon } from "zens";
 
 // src/editor/utils/prosemirrorNodeToHtml.ts
@@ -13784,7 +13730,7 @@ var rmeProsemirrorNodeToHtml = async (doc, delegateOptions) => {
 import { jsx as jsx42 } from "react/jsx-runtime";
 var Preview = (props) => {
   const { doc, delegateOptions } = props;
-  const [processedHtml, setProcessedHtml] = useState10("");
+  const [processedHtml, setProcessedHtml] = useState9("");
   let targetDoc = doc;
   if (typeof targetDoc === "string") {
     targetDoc = createWysiwygDelegate(delegateOptions).stringToDoc(targetDoc);