@mdxeditor/editor 2.4.0 → 2.5.1

package/README.md

@@ -10,6 +10,7 @@ The component supports the core markdown syntax and certain extensions, includin
 
 ```jsx
 import {MDXEditor, headingsPlugin} from '@mdxeditor/editor';
+import '@mdxeditor/editor/style.css';
 
 export default function App() {
   return <MDXEditor markdown={'# Hello World'} plugins={[headingsPlugin()]} />;
@@ -21,7 +22,11 @@ The best place to get started using the component is the [documentation](https:/
 
 ## Help and support
 
-Should you encounter any issues, please [create an issue](https://github.com/mdx-editor/editor/issues), but check if there's something similar already open first.
+If you find a bug, check if something similar is not reported already in the [issues](https://github.com/mdx-editor/editor/issues). If not, [create a new issue](https://github.com/mdx-editor/editor/issues/new?assignees=&labels=bug&projects=&template=1.bug.md&title=%5BBUG%5D).
+
+If you're integrating the component in your commercial project and need dedicated assistance with your issues in exchange of sponsorship, [contact me over email](mailto:petyo@mdxeditor.dev).
+
+If you want to discuss ideas [join the Discord server](https://discord.gg/4q7U2Hc) or start a discussion in the [Discussions](https://github.com/mdx-editor/editor/discussions) section.
 
 ## License
 

package/dist/index.d.ts

@@ -386,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
@@ -474,10 +476,6 @@ 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;
 }
 
 /**
@@ -535,13 +533,9 @@ 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;
 
-export declare const CodeMirrorEditor: ({ language, nodeKey, code, focusEmitter, theme }: CodeBlockEditorProps) => React_2.JSX.Element;
+export declare const CodeMirrorEditor: ({ language, nodeKey, code, focusEmitter }: CodeBlockEditorProps) => React_2.JSX.Element;
 
 /**
  * A plugin that adds lets users edit code blocks with CodeMirror.
@@ -549,8 +543,21 @@ export declare const CodeMirrorEditor: ({ language, nodeKey, code, focusEmitter,
  */
 export declare const codeMirrorPlugin: (params?: {
     codeBlockLanguages: Record<string, string>;
+    /**
+     * The theme of CodeMirrorEditor
+     */
+    theme?: SandpackThemeProp | undefined;
 } | undefined) => 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 codeMirrorTheme$: NodeRef<SandpackThemeProp>;
+
 /**
  * A toolbar component that lets the user toggle code formatting.
  * Use for inline `code` elements (like variables, methods, etc).
@@ -1669,8 +1676,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;
 
 /**
@@ -2086,6 +2103,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
@@ -2492,15 +2511,6 @@ 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

@@ -15,13 +15,13 @@ import { quotePlugin } from "./plugins/quote/index.js";
 import { insertJsx$, isMdastJsxNode, jsxPlugin } from "./plugins/jsx/index.js";
 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 { codeBlockLanguages$, codeMirrorPlugin, codeMirrorTheme$, insertCodeMirror$ } from "./plugins/codemirror/index.js";
 import { CodeMirrorEditor } from "./plugins/codemirror/CodeMirrorEditor.js";
-import { appendCodeBlockEditorDescriptor$, codeBlockPlugin, defaultCodeBlockLanguage$, insertCodeBlock$, theme$ } from "./plugins/codeblock/index.js";
+import { appendCodeBlockEditorDescriptor$, codeBlockPlugin, defaultCodeBlockLanguage$, insertCodeBlock$ } 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";
@@ -164,6 +164,7 @@ export {
   codeBlockLanguages$,
   codeBlockPlugin,
   codeMirrorPlugin,
+  codeMirrorTheme$,
   compose,
   composerChildren$,
   contentEditableClassName$,
@@ -246,6 +247,7 @@ export {
   nestedEditorChildren$,
   noop,
   onBlur$,
+  onClickLinkCallback$,
   onWindowChange$,
   openEditImageDialog$,
   openLinkEditDialog$,
@@ -268,7 +270,6 @@ export {
   tablePlugin,
   tap,
   thematicBreakPlugin,
-  theme$,
   thrush,
   toMarkdownExtensions$,
   toMarkdownOptions$,

package/dist/plugins/codeblock/CodeBlockNode.js

@@ -7,7 +7,6 @@ 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 {
@@ -88,8 +87,7 @@ class CodeBlockNode extends DecoratorNode {
         language: this.getLanguage(),
         codeBlockNode: this,
         nodeKey: this.getKey(),
-        focusEmitter: this.__focusEmitter,
-        theme: "auto"
+        focusEmitter: this.__focusEmitter
       }
     );
   }
@@ -142,7 +140,6 @@ 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,7 +6,6 @@ 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(
@@ -23,7 +22,6 @@ 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({
@@ -43,6 +41,5 @@ export {
   codeBlockPlugin,
   defaultCodeBlockLanguage$,
   insertCodeBlock$,
-  theme$,
   useCodeBlockEditorContext
 };

package/dist/plugins/codemirror/CodeMirrorEditor.js

@@ -4,10 +4,11 @@ import styles from "../../styles/ui.module.css.js";
 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, theme }) => {
+import { useCellValues } from "@mdxeditor/gurx";
+import { codeMirrorTheme$ } from "./index.js";
+const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
   const codeMirrorRef = useCodeMirrorRef(nodeKey, "codeblock", "jsx", focusEmitter);
-  const readOnly = useCellValue(readOnly$);
+  const [readOnly, theme] = useCellValues(readOnly$, codeMirrorTheme$);
   const { setCode } = useCodeBlockEditorContext();
   React__default.useEffect(() => {
     var _a, _b;

package/dist/plugins/codemirror/index.js

@@ -24,13 +24,18 @@ const insertCodeMirror$ = Signal((r) => {
     insertCodeBlock$
   );
 });
+const codeMirrorTheme$ = Cell("auto");
 const codeMirrorPlugin = realmPlugin({
   update(r, params) {
-    r.pub(codeBlockLanguages$, params == null ? void 0 : params.codeBlockLanguages);
+    r.pubIn({
+      [codeBlockLanguages$]: params == null ? void 0 : params.codeBlockLanguages,
+      [codeMirrorTheme$]: (params == null ? void 0 : params.theme) || "auto"
+    });
   },
   init(r, params) {
     r.pubIn({
       [codeBlockLanguages$]: params == null ? void 0 : params.codeBlockLanguages,
+      [codeMirrorTheme$]: (params == null ? void 0 : params.theme) || "auto",
       [appendCodeBlockEditorDescriptor$]: buildCodeBlockDescriptor((params == null ? void 0 : params.codeBlockLanguages) || {})
     });
   }
@@ -47,5 +52,6 @@ function buildCodeBlockDescriptor(codeBlockLanguages) {
 export {
   codeBlockLanguages$,
   codeMirrorPlugin,
+  codeMirrorTheme$,
   insertCodeMirror$
 };

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.4.0",
+  "version": "2.5.1",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",