@mindlogic-ai/logician-ui 2.0.0-alpha.5 → 2.0.0-alpha.7

package/dist/index.d.mts

@@ -9,7 +9,7 @@ import { RangeDatepickerProps, SingleDatepickerProps } from 'chakra-dayzed-datep
 import { IconType as IconType$1 } from 'react-icons/lib';
 import { DataKey as DataKey$1 } from 'recharts/types/util/types.d';
 import { Options } from 'react-markdown';
-import { MDXEditorProps as MDXEditorProps$1 } from '@mdxeditor/editor';
+import { MDXEditorProps as MDXEditorProps$1, MDXEditorMethods } from '@mdxeditor/editor';
 import { GroupBase, Props } from 'react-select';
 
 declare const Accordion: (props: AccordionProps) => react_jsx_runtime.JSX.Element;
@@ -572,11 +572,12 @@ declare const MaxLengthIndicator: ({ value, maxLength, ...rest }: {
     maxLength: number;
 } & TextProps) => react_jsx_runtime.JSX.Element;
 
-interface MDXEditorProps extends MDXEditorProps$1 {
+interface MDXEditorProps extends Omit<MDXEditorProps$1, 'onError'> {
     containerProps?: BoxProps;
+    onError?: (error: string) => void;
 }
 
-declare function MDXEditor({ containerProps, autoFocus, ...rest }: MDXEditorProps): react_jsx_runtime.JSX.Element;
+declare const MDXEditor: react.ForwardRefExoticComponent<MDXEditorProps & react.RefAttributes<MDXEditorProps$1 & MDXEditorMethods>>;
 
 interface ButtonMenuButtonProps extends MenuButtonProps {
     as: typeof Button$1;

package/dist/index.d.ts

@@ -9,7 +9,7 @@ import { RangeDatepickerProps, SingleDatepickerProps } from 'chakra-dayzed-datep
 import { IconType as IconType$1 } from 'react-icons/lib';
 import { DataKey as DataKey$1 } from 'recharts/types/util/types.d';
 import { Options } from 'react-markdown';
-import { MDXEditorProps as MDXEditorProps$1 } from '@mdxeditor/editor';
+import { MDXEditorProps as MDXEditorProps$1, MDXEditorMethods } from '@mdxeditor/editor';
 import { GroupBase, Props } from 'react-select';
 
 declare const Accordion: (props: AccordionProps) => react_jsx_runtime.JSX.Element;
@@ -572,11 +572,12 @@ declare const MaxLengthIndicator: ({ value, maxLength, ...rest }: {
     maxLength: number;
 } & TextProps) => react_jsx_runtime.JSX.Element;
 
-interface MDXEditorProps extends MDXEditorProps$1 {
+interface MDXEditorProps extends Omit<MDXEditorProps$1, 'onError'> {
     containerProps?: BoxProps;
+    onError?: (error: string) => void;
 }
 
-declare function MDXEditor({ containerProps, autoFocus, ...rest }: MDXEditorProps): react_jsx_runtime.JSX.Element;
+declare const MDXEditor: react.ForwardRefExoticComponent<MDXEditorProps & react.RefAttributes<MDXEditorProps$1 & MDXEditorMethods>>;
 
 interface ButtonMenuButtonProps extends MenuButtonProps {
     as: typeof Button$1;

package/dist/index.js

@@ -3747,44 +3747,46 @@ var MaxLengthIndicator = ({
     maxLength
   ] });
 };
-function MDXEditor({
-  containerProps,
-  autoFocus = true,
-  ...rest
-}) {
+var MDXEditor = React7.forwardRef(({ containerProps, autoFocus = true, onError, ...rest }, ref) => {
   const theme = react.useTheme();
+  const [error, setError] = React7.useState(null);
   const editorRef = React7.useRef(null);
+  React7.useImperativeHandle(ref, () => editorRef.current, []);
   const handleContainerClick = (e) => {
     const target = e.target;
-    const isToolbarClick = target.closest(".toolbar");
-    if (!isToolbarClick && editorRef.current) {
-      editorRef.current.focus();
+    const isToolbarClick = target.closest(".mdxeditor-toolbar");
+    const isTableClick = target.closest("table");
+    if (!isToolbarClick && !isTableClick) {
+      editorRef.current?.focus();
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { ...containerProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     react.Box,
     {
       width: "100%",
+      height: "100%",
       borderWidth: "1px",
       borderRadius: "lg",
       overflow: "hidden",
       onClick: handleContainerClick,
       cursor: "text",
+      ...containerProps,
       sx: {
         ...containerProps?.sx,
         ".mdxeditor": {
           width: "100%",
           minHeight: "300px",
-          bg: theme.colors.white,
+          height: "100%",
+          bg: "white",
           display: "flex",
           flexDirection: "column"
         },
-        ".toolbar": {
+        ".mdxeditor-toolbar": {
           display: "flex",
           gap: theme.space[2],
           p: theme.space[2],
           borderBottomWidth: "1px",
-          bg: theme.colors.gray[50],
+          bg: "gray.50",
           flexShrink: 0,
           cursor: "default"
         },
@@ -3793,7 +3795,9 @@ function MDXEditor({
           flex: 1,
           display: "flex",
           flexDirection: "column",
-          minHeight: 0
+          minHeight: 0,
+          height: "100%",
+          overflow: "auto"
         },
         // Target the actual contenteditable element
         '[contenteditable="true"]': {
@@ -3809,12 +3813,12 @@ function MDXEditor({
         },
         ".content-editable": {
           padding: theme.space[4],
-          color: theme.colors.black,
+          color: "black",
           display: "flex",
           flexDirection: "column",
           gap: theme.space[1.5],
           flex: 1,
-          minHeight: "100%",
+          height: "100%",
           "h1, h2, h3, h4, h5": {
             marginBottom: theme.space[0.5],
             fontWeight: "bold"
@@ -3847,23 +3851,29 @@ function MDXEditor({
           },
           blockquote: {
             borderLeftWidth: "4px",
-            borderLeftColor: theme.colors.blue[200],
-            bg: theme.colors.blue[50],
+            borderLeftColor: "primary.light",
+            bg: "primary.lighter",
             pl: theme.space[4],
             py: theme.space[2],
             my: theme.space[4],
-            color: theme.colors.gray[700]
+            color: "gray.800"
           },
           a: {
-            color: theme.colors.blue[500],
+            color: "primary.main",
             textDecoration: "underline"
           },
           code: {
             fontFamily: "mono",
-            bg: theme.colors.gray[100],
+            bg: "gray.100",
             px: theme.space[1],
-            borderRadius: theme.radii.sm
+            borderRadius: theme.radii.sm,
+            span: {
+              bg: "transparent"
+            }
           }
+        },
+        ".mdxeditor-diff-source-wrapper": {
+          overflow: "auto"
         }
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3873,19 +3883,36 @@ function MDXEditor({
           contentEditableClassName: "content-editable",
           overlayContainer: typeof document !== "undefined" ? document.body : void 0,
           autoFocus,
+          onError: ({ error: error2 }) => {
+            setError(error2);
+            onError?.(error2);
+          },
           plugins: [
             editor.headingsPlugin({
               allowedHeadingLevels: [2, 3, 4, 5]
             }),
+            editor.linkPlugin(),
             editor.listsPlugin(),
+            editor.imagePlugin(),
             editor.quotePlugin(),
             editor.thematicBreakPlugin(),
             editor.markdownShortcutPlugin(),
+            editor.tablePlugin(),
+            editor.diffSourcePlugin(),
             editor.toolbarPlugin({
               toolbarContents: () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(editor.UndoRedo, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(editor.Separator, {}),
                 /* @__PURE__ */ jsxRuntime.jsx(editor.BoldItalicUnderlineToggles, {}),
-                /* @__PURE__ */ jsxRuntime.jsx(editor.BlockTypeSelect, {})
+                /* @__PURE__ */ jsxRuntime.jsx(editor.CodeToggle, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(editor.Separator, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(editor.ListsToggle, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(editor.Separator, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(editor.BlockTypeSelect, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(editor.Separator, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(editor.InsertTable, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(editor.InsertThematicBreak, {}),
+                error && /* @__PURE__ */ jsxRuntime.jsx(editor.DiffSourceToggleWrapper, { options: ["rich-text", "source"], children: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) })
               ] })
             })
           ],
@@ -3893,8 +3920,9 @@ function MDXEditor({
         }
       )
     }
-  ) });
-}
+  );
+});
+MDXEditor.displayName = "MDXEditor";
 var MenuButton = ({ as, ...rest }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.MenuButton, { as, ...rest });
 };