rme 0.0.32 → 0.0.35

package/dist/index.d.ts

@@ -18,7 +18,7 @@ type EditorRef = {
     getType: () => EditorViewType;
 };
 declare const Editor: react.MemoExoticComponent<react.ForwardRefExoticComponent<EditorProps & react.RefAttributes<EditorRef>>>;
-type EditorChangeHandler = (params: RemirrorEventListenerProps<Extension>, content: string) => void;
+type EditorChangeHandler = (params: RemirrorEventListenerProps<Extension>) => void;
 interface EditorProps {
     delegate?: EditorDelegate;
     content: string;
@@ -239,6 +239,11 @@ type Props = {
          */
         codemirrorTheme?: CreateThemeOptions;
     };
+    i18n?: {
+        locales?: Record<string, Record<'translation', Record<string, any>>>;
+        language?: string;
+    };
+    locales?: Record<string, any>;
     children?: React.ReactNode;
 };
 declare const ThemeProvider: React.FC<Props>;

package/dist/index.mjs

@@ -7626,6 +7626,10 @@ var SourceCodeThemeWrapper = styled3.div.attrs((p) => p)`
     font-size: ${(props) => props.theme.fontBase};
     font-family: ${(props) => props.theme.codemirrorFontFamily} !important;
 
+    &.cm-focused {
+      outline: none;
+    }
+
     .cm-line {
       padding: 2px 2px 2px 6px;
 
@@ -16120,6 +16124,7 @@ import {
 } from "@mui/material";
 import { useCommands } from "@remirror/react";
 import styled6 from "styled-components";
+import { useTranslation } from "react-i18next";
 import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
 var Container2 = styled6.div`
   position: absolute;
@@ -16134,29 +16139,36 @@ var ActiveCellMenu = (props) => {
   const [open, setOpen] = useState4(false);
   const anchorRef = useRef4(null);
   const offset = useContext(OffsetContext);
+  const { t: t3 } = useTranslation();
   const options = [
     {
       label: "insert column after",
+      i18nKey: "table.insertColumnAfter",
       handler: commands.addTableColumnAfter
     },
     {
       label: "insert column before",
+      i18nKey: "table.insertColumnBefore",
       handler: commands.addTableColumnBefore
     },
     {
       label: "insert row after",
+      i18nKey: "table.insertRowAfter",
       handler: commands.addTableRowAfter
     },
     {
       label: "insert row before",
+      i18nKey: "table.insertRowBefore",
       handler: commands.addTableRowBefore
     },
     {
       label: "delete column",
+      i18nKey: "table.deleteColumn",
       handler: commands.deleteTableColumn
     },
     {
       label: "delete row",
+      i18nKey: "table.deleteRow",
       handler: commands.deleteTableRow
     }
   ];
@@ -16208,7 +16220,7 @@ var ActiveCellMenu = (props) => {
                       option.handler();
                       setOpen(false);
                     },
-                    children: /* @__PURE__ */ jsx10(ListItemText, { children: option.label })
+                    children: /* @__PURE__ */ jsx10(ListItemText, { children: t3(option.i18nKey) })
                   },
                   option.label
                 )) }) }) })
@@ -16820,8 +16832,7 @@ var WysiwygEditor = (props) => {
   const handleChange = useCallback4(
     (params) => {
       try {
-        const textContent = editorDelegate.docToString(params.state.doc);
-        props.onChange?.(params, textContent);
+        props.onChange?.(params);
       } catch (error) {
         console.error(error);
       }
@@ -17584,8 +17595,7 @@ var SourceEditor = (props) => {
   const handleChange = useCallback5(
     (params) => {
       try {
-        const textContent = editorDelegate.docToString(params.state.doc);
-        props.onChange?.(params, textContent);
+        props.onChange?.(params);
       } catch (error) {
         console.error(error);
       }
@@ -17608,10 +17618,6 @@ var SourceEditor_default = memo5(SourceEditor);
 // src/editor/hooks/index.ts
 import { useHelpers, useKeymap, useRemirrorContext as useRemirrorContext3, useCommands as useCommands4 } from "@remirror/react";
 
-// src/editor/components/index.tsx
-import { ThemeProvider as ScThemeProvider } from "styled-components";
-import { useEffect as useEffect7 } from "react";
-
 // src/editor/components/Editor.tsx
 import { forwardRef as forwardRef2, memo as memo6, useImperativeHandle as useImperativeHandle2, useMemo as useMemo5, useState as useState8 } from "react";
 
@@ -17646,12 +17652,62 @@ var Editor = memo6(
   })
 );
 
-// src/editor/components/index.tsx
+// src/editor/components/ThemeProvider.tsx
+import { ThemeProvider as ScThemeProvider } from "styled-components";
+import { useEffect as useEffect7 } from "react";
+
+// src/editor/i18n/index.ts
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+
+// src/editor/i18n/en.json
+var en_default = {
+  table: {
+    insertColumnAfter: "insert column after",
+    insertColumnBefore: "insert column before",
+    insertRowAfter: "insert row after",
+    insertRowBefore: "insert row before",
+    deleteColumn: "delete column",
+    deleteRow: "delete row"
+  }
+};
+
+// src/editor/i18n/index.ts
+async function i18nInit(locales = {}, options) {
+  await i18next.use(initReactI18next).init({
+    resources: {
+      en: {
+        translation: en_default
+      },
+      ...locales
+    },
+    interpolation: {
+      escapeValue: false
+      // react already safes from xss
+    },
+    fallbackLng: "en",
+    ...options
+  });
+}
+function changeLng(lng) {
+  return i18next.changeLanguage(lng);
+}
+
+// src/editor/components/ThemeProvider.tsx
 import { jsx as jsx20 } from "react/jsx-runtime";
-var ThemeProvider = ({ theme, children }) => {
+var ThemeProvider = ({ theme, i18n, children }) => {
   const mode = theme?.mode || "light";
   const defaultThemeToken = mode === "dark" ? darkTheme.styledConstants : lightTheme.styledConstants;
   const themeToken = theme?.token ? { ...defaultThemeToken, ...theme.token } : defaultThemeToken;
+  useEffect7(() => {
+    if (i18n?.locales) {
+      i18nInit(i18n.locales).then(() => {
+        if (i18n?.language) {
+          changeLng(i18n?.language);
+        }
+      });
+    }
+  }, [i18n]);
   useEffect7(() => {
     const codemirrorTheme = theme?.codemirrorTheme || mode === "dark" ? darkTheme.codemirrorTheme : lightTheme.codemirrorTheme;
     changeTheme(codemirrorTheme);