@mdxeditor/editor 2.3.9 → 2.5.0

package/dist/MDXEditor.js

@@ -37,7 +37,7 @@ const RichTextEditor = () => {
     editorWrappers$,
     placeholder$
   );
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, topAreaChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })), /* @__PURE__ */ React__default.createElement(RenderRecurisveWrappers, { wrappers: editorWrappers }, /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.rootContentEditableWrapper) }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, topAreaChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })), /* @__PURE__ */ React__default.createElement(RenderRecursiveWrappers, { wrappers: editorWrappers }, /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.rootContentEditableWrapper) }, /* @__PURE__ */ React__default.createElement(
     RichTextPlugin,
     {
       contentEditable: /* @__PURE__ */ React__default.createElement(ContentEditable, { className: classNames(styles.contentEditable, contentEditableClassName) }),
@@ -56,7 +56,7 @@ const IconFallback = () => {
 const defaultIconComponentFor = (name) => {
   return /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: /* @__PURE__ */ React__default.createElement(IconFallback, null) }, /* @__PURE__ */ React__default.createElement(DefaultIcon, { name }));
 };
-const RenderRecurisveWrappers = ({
+const RenderRecursiveWrappers = ({
   wrappers,
   children
 }) => {
@@ -64,7 +64,7 @@ const RenderRecurisveWrappers = ({
     return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
   }
   const Wrapper = wrappers[0];
-  return /* @__PURE__ */ React__default.createElement(Wrapper, null, /* @__PURE__ */ React__default.createElement(RenderRecurisveWrappers, { wrappers: wrappers.slice(1) }, children));
+  return /* @__PURE__ */ React__default.createElement(Wrapper, null, /* @__PURE__ */ React__default.createElement(RenderRecursiveWrappers, { wrappers: wrappers.slice(1) }, children));
 };
 const EditorRootElement = ({ children, className }) => {
   const editorRootElementRef = React__default.useRef(null);

package/dist/index.d.ts

@@ -67,6 +67,7 @@ import { ReactNode } from 'react';
 import { Realm } from '@mdxeditor/gurx';
 import { RootNode } from 'lexical';
 import { SandpackProvider } from '@codesandbox/sandpack-react';
+import { SandpackThemeProp } from '@codesandbox/sandpack-react/types';
 import { SerializedElementNode } from 'lexical';
 import { SerializedLexicalNode } from 'lexical';
 import { Spread } from 'lexical';
@@ -385,6 +386,8 @@ export declare const ChangeAdmonitionType: () => React_2.JSX.Element;
  */
 export declare const ChangeCodeMirrorLanguage: () => React_2.JSX.Element;
 
+export declare type ClickLinkCallback = (url: string) => void;
+
 /**
  * Close the image dialog.
  * @group Image
@@ -473,6 +476,10 @@ export declare interface CodeBlockEditorProps {
      * Note: you don't need to unsubscribe, the emiter has a single subscription model.
      */
     focusEmitter: VoidEmitter;
+    /**
+     * The theme CodeMirrorEditor used.
+     */
+    theme: SandpackThemeProp;
 }
 
 /**
@@ -530,9 +537,13 @@ export declare const codeBlockPlugin: (params?: {
      * The default language to use when creating a new code block if no language is passed.
      */
     defaultCodeBlockLanguage?: string | undefined;
+    /**
+     * The theme of CodeMirrorEditor
+     */
+    theme?: SandpackThemeProp | undefined;
 } | undefined) => RealmPlugin;
 
-/* Excluded from this release type: CodeMirrorEditor */
+export declare const CodeMirrorEditor: ({ language, nodeKey, code, focusEmitter, theme }: CodeBlockEditorProps) => React_2.JSX.Element;
 
 /**
  * A plugin that adds lets users edit code blocks with CodeMirror.
@@ -1660,8 +1671,18 @@ export declare type LexicalVisitor = LexicalExportVisitor<LexicalNode, Mdast.Roo
  * @group Link Dialog
  */
 export declare const linkDialogPlugin: (params?: {
+    /**
+     * If passed, the link dialog will be rendered using this component instead of the default one.
+     */
     LinkDialog?: (() => JSX.Element) | undefined;
+    /**
+     * If passed, the link input field will autocomplete using the published suggestions.
+     */
     linkAutocompleteSuggestions?: string[] | undefined;
+    /**
+     * If set, clicking on the link in the preview popup will call this callback instead of opening the link.
+     */
+    onClickLinkCallback?: ClickLinkCallback | undefined;
 } | undefined) => RealmPlugin;
 
 /**
@@ -2077,6 +2098,8 @@ export declare function noop(): void;
  */
 export declare const onBlur$: NodeRef<FocusEvent>;
 
+/* Excluded from this release type: onClickLinkCallback$ */
+
 /**
  * Emits when the window is resized.
  * @group Utils
@@ -2483,6 +2506,15 @@ export declare function tap<T>(arg: T, proc: (arg: T) => unknown): T;
  */
 export declare const thematicBreakPlugin: (params?: unknown) => RealmPlugin;
 
+/**
+ * The theme CodeMirrorEditor used.
+ * It can be "light" | "dark" | "auto",
+ * or the theme in "@codesandbox/sandpack-themes" package,
+ * or you can also custom one,
+ * learn more https://sandpack.codesandbox.io/docs/getting-started/themes#custom-theme
+ */
+export declare const theme$: NodeRef<SandpackThemeProp>;
+
 /**
  * Takes a value and applies a function to it.
  * @group Utils

package/dist/index.js

@@ -17,11 +17,11 @@ import { GenericJsxEditor } from "./jsx-editors/GenericJsxEditor.js";
 import { insertSandpack$, sandpackConfig$, sandpackPlugin } from "./plugins/sandpack/index.js";
 import { codeBlockLanguages$, codeMirrorPlugin, insertCodeMirror$ } from "./plugins/codemirror/index.js";
 import { CodeMirrorEditor } from "./plugins/codemirror/CodeMirrorEditor.js";
-import { appendCodeBlockEditorDescriptor$, codeBlockPlugin, defaultCodeBlockLanguage$, insertCodeBlock$ } from "./plugins/codeblock/index.js";
+import { appendCodeBlockEditorDescriptor$, codeBlockPlugin, defaultCodeBlockLanguage$, insertCodeBlock$, theme$ } from "./plugins/codeblock/index.js";
 import { directivesPlugin, insertDirective$ } from "./plugins/directives/index.js";
 import { ADMONITION_TYPES, AdmonitionDirectiveDescriptor } from "./directive-editors/AdmonitionDirectiveDescriptor.js";
 import { GenericDirectiveEditor } from "./directive-editors/GenericDirectiveEditor.js";
-import { applyLinkChanges$, cancelLinkEdit$, linkAutocompleteSuggestions$, linkDialogPlugin, linkDialogState$, onWindowChange$, openLinkEditDialog$, removeLink$, switchFromPreviewToLinkEdit$, updateLink$ } from "./plugins/link-dialog/index.js";
+import { applyLinkChanges$, cancelLinkEdit$, linkAutocompleteSuggestions$, linkDialogPlugin, linkDialogState$, onClickLinkCallback$, onWindowChange$, openLinkEditDialog$, removeLink$, switchFromPreviewToLinkEdit$, updateLink$ } from "./plugins/link-dialog/index.js";
 import { toolbarContents$, toolbarPlugin } from "./plugins/toolbar/index.js";
 import { cmExtensions$, diffMarkdown$, diffSourcePlugin } from "./plugins/diff-source/index.js";
 import { markdownShortcutPlugin } from "./plugins/markdown-shortcut/index.js";
@@ -246,6 +246,7 @@ export {
   nestedEditorChildren$,
   noop,
   onBlur$,
+  onClickLinkCallback$,
   onWindowChange$,
   openEditImageDialog$,
   openLinkEditDialog$,
@@ -268,6 +269,7 @@ export {
   tablePlugin,
   tap,
   thematicBreakPlugin,
+  theme$,
   thrush,
   toMarkdownExtensions$,
   toMarkdownOptions$,

package/dist/plugins/codeblock/CodeBlockNode.js

@@ -7,6 +7,7 @@ var __publicField = (obj, key, value) => {
 import { useCellValue } from "@mdxeditor/gurx";
 import { DecoratorNode } from "lexical";
 import React__default from "react";
+import { theme$ } from "./index.js";
 import { voidEmitter } from "../../utils/voidEmitter.js";
 import { codeBlockEditorDescriptors$, NESTED_EDITOR_UPDATED_COMMAND } from "../core/index.js";
 class CodeBlockNode extends DecoratorNode {
@@ -87,7 +88,8 @@ class CodeBlockNode extends DecoratorNode {
         language: this.getLanguage(),
         codeBlockNode: this,
         nodeKey: this.getKey(),
-        focusEmitter: this.__focusEmitter
+        focusEmitter: this.__focusEmitter,
+        theme: "auto"
       }
     );
   }
@@ -140,6 +142,7 @@ const CodeBlockEditorContainer = (props) => {
   }
   const Editor = descriptor.Editor;
   const { codeBlockNode: _, parentEditor: __, ...restProps } = props;
+  restProps.theme = useCellValue(theme$);
   return /* @__PURE__ */ React__default.createElement(CodeBlockEditorContextProvider, { parentEditor: props.parentEditor, lexicalNode: props.codeBlockNode }, /* @__PURE__ */ React__default.createElement(Editor, { ...restProps }));
 };
 function $createCodeBlockNode(options) {

package/dist/plugins/codeblock/index.js

@@ -6,6 +6,7 @@ import { $isCodeBlockNode, useCodeBlockEditorContext } from "./CodeBlockNode.js"
 import { Cell, Signal, withLatestFrom, map } from "@mdxeditor/gurx";
 import { realmPlugin } from "../../RealmWithPlugins.js";
 const defaultCodeBlockLanguage$ = Cell("");
+const theme$ = Cell("auto");
 const insertCodeBlock$ = Signal((r) => {
   r.link(
     r.pipe(
@@ -22,6 +23,7 @@ const appendCodeBlockEditorDescriptor$ = Appender(codeBlockEditorDescriptors$);
 const codeBlockPlugin = realmPlugin({
   update(realm, params) {
     realm.pub(defaultCodeBlockLanguage$, (params == null ? void 0 : params.defaultCodeBlockLanguage) || "");
+    realm.pub(theme$, (params == null ? void 0 : params.theme) || "auto");
   },
   init(realm, params) {
     realm.pubIn({
@@ -41,5 +43,6 @@ export {
   codeBlockPlugin,
   defaultCodeBlockLanguage$,
   insertCodeBlock$,
+  theme$,
   useCodeBlockEditorContext
 };

package/dist/plugins/codemirror/CodeMirrorEditor.js

@@ -5,7 +5,7 @@ import { useCodeBlockEditorContext } from "../codeblock/CodeBlockNode.js";
 import { readOnly$ } from "../core/index.js";
 import { useCodeMirrorRef } from "../sandpack/useCodeMirrorRef.js";
 import { useCellValue } from "@mdxeditor/gurx";
-const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
+const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter, theme }) => {
   const codeMirrorRef = useCodeMirrorRef(nodeKey, "codeblock", "jsx", focusEmitter);
   const readOnly = useCellValue(readOnly$);
   const { setCode } = useCodeBlockEditorContext();
@@ -23,7 +23,7 @@ const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
         e.stopPropagation();
       }
     },
-    /* @__PURE__ */ React__default.createElement(SandpackProvider, null, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement(SandpackProvider, { theme }, /* @__PURE__ */ React__default.createElement(
       CodeEditor,
       {
         readOnly,

package/dist/plugins/link-dialog/LinkDialog.js

@@ -7,7 +7,7 @@ import styles from "../../styles/ui.module.css.js";
 import classNames from "classnames";
 import { createCommand } from "lexical";
 import { useForm } from "react-hook-form";
-import { linkDialogState$, linkAutocompleteSuggestions$, onWindowChange$, updateLink$, cancelLinkEdit$, switchFromPreviewToLinkEdit$, removeLink$ } from "./index.js";
+import { linkDialogState$, linkAutocompleteSuggestions$, onClickLinkCallback$, onWindowChange$, updateLink$, cancelLinkEdit$, switchFromPreviewToLinkEdit$, removeLink$ } from "./index.js";
 import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 createCommand();
 function LinkEditForm({ url, title, onSubmit, onCancel, linkAutocompleteSuggestions }) {
@@ -55,12 +55,13 @@ function LinkEditForm({ url, title, onSubmit, onCancel, linkAutocompleteSuggesti
   );
 }
 const LinkDialog = () => {
-  const [editorRootElementRef, activeEditor, iconComponentFor, linkDialogState, linkAutocompleteSuggestions] = useCellValues(
+  const [editorRootElementRef, activeEditor, iconComponentFor, linkDialogState, linkAutocompleteSuggestions, onClickLinkCallback] = useCellValues(
     editorRootElementRef$,
     activeEditor$,
     iconComponentFor$,
     linkDialogState$,
-    linkAutocompleteSuggestions$
+    linkAutocompleteSuggestions$,
+    onClickLinkCallback$
   );
   const publishWindowChange = usePublisher(onWindowChange$);
   const updateLink = usePublisher(updateLink$);
@@ -119,6 +120,12 @@ const LinkDialog = () => {
         className: styles.linkDialogPreviewAnchor,
         href: linkDialogState.url,
         ...urlIsExternal ? { target: "_blank", rel: "noreferrer" } : {},
+        onClick: (e) => {
+          if (onClickLinkCallback !== null) {
+            e.preventDefault();
+            onClickLinkCallback(linkDialogState.url);
+          }
+        },
         title: urlIsExternal ? `Open ${linkDialogState.url} in new window` : linkDialogState.url
       },
       /* @__PURE__ */ React__default.createElement("span", null, linkDialogState.url),

package/dist/plugins/link-dialog/index.js

@@ -213,9 +213,11 @@ const openLinkEditDialog$ = Action((r) => {
   );
 });
 const linkAutocompleteSuggestions$ = Cell([]);
+const onClickLinkCallback$ = Cell(null);
 const linkDialogPlugin = realmPlugin({
   init(r, params) {
     r.pub(addComposerChild$, (params == null ? void 0 : params.LinkDialog) || LinkDialog);
+    r.pub(onClickLinkCallback$, (params == null ? void 0 : params.onClickLinkCallback) ?? null);
   },
   update(r, params = {}) {
     r.pub(linkAutocompleteSuggestions$, params.linkAutocompleteSuggestions || []);
@@ -227,6 +229,7 @@ export {
   linkAutocompleteSuggestions$,
   linkDialogPlugin,
   linkDialogState$,
+  onClickLinkCallback$,
   onWindowChange$,
   openLinkEditDialog$,
   removeLink$,

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "2.3.9",
+  "version": "2.5.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",