@mdxeditor/editor 3.55.0 → 4.0.0

package/dist/defaultSvgIcons.js

@@ -141,13 +141,6 @@ const defaultSvgIcons = {
       fill: "currentColor"
     }
   )),
-  sandpack: /* @__PURE__ */ React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React__default.createElement(
-    "path",
-    {
-      d: "M12.9999 22.5C12.4947 22.5 12.0671 22.325 11.7171 21.975C11.3671 21.625 11.1921 21.1974 11.1921 20.6922V7.30775C11.1921 6.80258 11.3671 6.375 11.7171 6.025C12.0671 5.675 12.4947 5.5 12.9999 5.5H16.3844C16.8895 5.5 17.3171 5.675 17.6671 6.025C18.0171 6.375 18.1921 6.80258 18.1921 7.30775V20.6922C18.1921 21.1974 18.0171 21.625 17.6671 21.975C17.3171 22.325 16.8895 22.5 16.3844 22.5H12.9999ZM12.6921 7.30775V20.6922C12.6921 20.7692 12.7242 20.8398 12.7884 20.9038C12.8524 20.9679 12.9229 21 12.9999 21H16.3844C16.4614 21 16.5319 20.9679 16.5959 20.9038C16.66 20.8398 16.6921 20.7692 16.6921 20.6922V7.30775C16.6921 7.23075 16.66 7.16025 16.5959 7.09625C16.5319 7.03208 16.4614 7 16.3844 7H12.9999C12.9229 7 12.8524 7.03208 12.7884 7.09625C12.7242 7.16025 12.6921 7.23075 12.6921 7.30775ZM6.61537 18.5C6.1102 18.5 5.68262 18.325 5.33262 17.975C4.98262 17.625 4.80762 17.1974 4.80762 16.6923V3.30775C4.80762 2.80258 4.98262 2.375 5.33262 2.025C5.68262 1.675 6.1102 1.5 6.61537 1.5H9.99987C10.505 1.5 10.9326 1.675 11.2826 2.025C11.6326 2.375 11.8076 2.80258 11.8076 3.30775V16.6923C11.8076 17.1974 11.6326 17.625 11.2826 17.975C10.9326 18.325 10.505 18.5 9.99987 18.5H6.61537ZM6.30762 3.30775V16.6923C6.30762 16.7692 6.3397 16.8398 6.40387 16.9038C6.46787 16.9679 6.53837 17 6.61537 17H9.99987C10.0769 17 10.1474 16.9679 10.2114 16.9038C10.2755 16.8398 10.3076 16.7692 10.3076 16.6923V3.30775C10.3076 3.23075 10.2755 3.16025 10.2114 3.09625C10.1474 3.03208 10.0769 3 9.99987 3H6.61537C6.53837 3 6.46787 3.03208 6.40387 3.09625C6.3397 3.16025 6.30762 3.23075 6.30762 3.30775Z",
-      fill: "currentColor"
-    }
-  )),
   rich_text: /* @__PURE__ */ React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React__default.createElement(
     "path",
     {

package/dist/index.d.ts

@@ -44,7 +44,6 @@ import { RangeSelection } from 'lexical';
 import { ReactNode } from 'react';
 import { Realm } from '@mdxeditor/gurx';
 import { RootNode } from 'lexical';
-import { SandpackProvider } from '@codesandbox/sandpack-react';
 import { SerializedElementNode } from 'lexical';
 import { SerializedLexicalNode } from 'lexical';
 import { Spread } from 'lexical';
@@ -669,7 +668,6 @@ export declare function compose<I, A, R>(a: (arg: A) => R, b: (arg: I) => A): (a
  *    <ConditionalContents
  *      options={[
  *        { when: (editor) => editor?.editorType === 'codeblock', contents: () => <ChangeCodeMirrorLanguage /> },
- *        { when: (editor) => editor?.editorType === 'sandpack', contents: () => <ShowSandpackInfo /> },
  *        {
  *          fallback: () => (
  *            <>
@@ -875,7 +873,6 @@ export declare const defaultSvgIcons: {
     frame_source: JSX_2.Element;
     arrow_drop_down: JSX_2.Element;
     admonition: JSX_2.Element;
-    sandpack: JSX_2.Element;
     rich_text: JSX_2.Element;
     difference: JSX_2.Element;
     markdown: JSX_2.Element;
@@ -1436,7 +1433,7 @@ export declare const htmlTags: string[];
  */
 export declare const iconComponentFor$: NodeRef<(name: IconKey) => default_2.ReactNode>;
 
-export declare type IconKey = 'undo' | 'redo' | 'format_bold' | 'format_italic' | 'format_underlined' | 'code' | 'strikeThrough' | 'superscript' | 'subscript' | 'format_list_bulleted' | 'format_list_numbered' | 'format_list_checked' | 'format_highlight' | 'link' | 'add_photo' | 'table' | 'horizontal_rule' | 'frontmatter' | 'frame_source' | 'arrow_drop_down' | 'admonition' | 'sandpack' | 'rich_text' | 'difference' | 'markdown' | 'open_in_new' | 'link_off' | 'edit' | 'content_copy' | 'more_horiz' | 'more_vert' | 'close' | 'settings' | 'delete_big' | 'delete_small' | 'format_align_center' | 'format_align_left' | 'format_align_right' | 'add_row' | 'add_column' | 'insert_col_left' | 'insert_row_above' | 'insert_row_below' | 'insert_col_right' | 'check';
+export declare type IconKey = 'undo' | 'redo' | 'format_bold' | 'format_italic' | 'format_underlined' | 'code' | 'strikeThrough' | 'superscript' | 'subscript' | 'format_list_bulleted' | 'format_list_numbered' | 'format_list_checked' | 'format_highlight' | 'link' | 'add_photo' | 'table' | 'horizontal_rule' | 'frontmatter' | 'frame_source' | 'arrow_drop_down' | 'admonition' | 'rich_text' | 'difference' | 'markdown' | 'open_in_new' | 'link_off' | 'edit' | 'content_copy' | 'more_horiz' | 'more_vert' | 'close' | 'settings' | 'delete_big' | 'delete_small' | 'format_align_center' | 'format_align_left' | 'format_align_right' | 'add_row' | 'add_column' | 'insert_col_left' | 'insert_row_above' | 'insert_row_below' | 'insert_col_right' | 'check';
 
 /**
  * Holds the autocomplete suggestions for image sources.
@@ -1689,20 +1686,6 @@ export declare const insertJsx$: NodeRef<{
  */
 export declare const insertMarkdown$: NodeRef<string>;
 
-/**
- * A signal that inserts a new sandpack code block with the specified name from the {@link SandpackConfig}.
- * If no name is specified, the default preset will be used.
- * @group Sandpack
- */
-export declare const insertSandpack$: NodeRef<string>;
-
-/**
- * A dropdown button that allows the user to insert a live code block into the editor. The dropdown offers a list of presets that are defined in the sandpack plugin config.
- * For this to work, you need to have the `sandpackPlugin` installed.
- * @group Toolbar Components
- */
-export declare const InsertSandpack: () => JSX_2.Element;
-
 /**
  * A signal that will insert a table with the published amount of rows and columns into the active editor.
  * @example
@@ -2739,91 +2722,6 @@ export declare const rootEditor$: NodeRef<LexicalEditor | null>;
 
 /* Excluded from this release type: rootEditorSubscriptions$ */
 
-/**
- * Holds the current sandpack configuration.
- * @group Sandpack
- */
-export declare const sandpackConfig$: NodeRef<SandpackConfig>;
-
-/**
- * The configuration for the available sandpack presets.
- * @group Sandpack
- */
-export declare interface SandpackConfig {
-    /**
-     * The name of the default preset that will be used if no meta (other than live) is set.
-     */
-    defaultPreset: string;
-    /**
-     * The list of sandpack presets that can be used.
-     */
-    presets: SandpackPreset[];
-}
-
-export declare const SandpackEditor: ({ nodeKey, code, focusEmitter, preset }: SandpackEditorProps) => JSX_2.Element;
-
-export declare interface SandpackEditorProps extends CodeBlockEditorProps {
-    preset: SandpackPreset;
-}
-
-/**
- * A plugin that adds support for sandpack code blocks in the editor.
- * @group Sandpack
- */
-export declare const sandpackPlugin: (params?: {
-    sandpackConfig: SandpackConfig;
-} | undefined) => RealmPlugin;
-
-/**
- * Defines a single preset that can be used to create a Sandpack sandbox.
- * @group Sandpack
- */
-export declare interface SandpackPreset {
-    /**
-     * The name of the preset - use this to reference the preset from the defaultPreset field.
-     */
-    name: string;
-    /**
-     * The label of the preset, displayed in the sandpack button dropdown.
-     */
-    label: string | JSX.Element;
-    /**
-     * The meta string that will be used to identify the preset from the fenced code block. e.g. "live react"
-     */
-    meta: string;
-    /**
-     * The sandpack template that will be used to create the sandbox. e.g. "react", "react-ts", "vanilla".
-     */
-    sandpackTemplate: SandpackProviderProps['template'];
-    /**
-     * The sandpack theme that will be used to create the sandbox. e.g. "light", "dark".
-     */
-    sandpackTheme: SandpackProviderProps['theme'];
-    /**
-     * The name of the file that will be created in the sandbox. e.g. "/App.js".
-     */
-    snippetFileName: string;
-    /**
-     * The dependencies that will be added to the sandbox, just like in package.json.
-     */
-    dependencies?: Record<string, string>;
-    /**
-     * The files that will be added to the sandbox (read-only).
-     * The key is the name of the file, and the value is the contents of the file.
-     */
-    files?: Record<string, string>;
-    /**
-     * The language used in the editable snippet. e.g. "jsx", "tsx", etc.
-     */
-    snippetLanguage?: string;
-    /**
-     * The initial content of the editable snippet.
-     */
-    initialSnippetContent?: string;
-}
-
-declare type SandpackProviderProps = default_2.ComponentProps<typeof SandpackProvider>;
-
 /**
  * Saves the data from the image dialog
  * @group Image
@@ -2943,14 +2841,6 @@ export declare const setMarkdown$: NodeRef<string>;
 
 export declare const showLinkTitleField$: NodeRef<boolean>;
 
-/**
- * A component that displays the focused live code block's name.
- * For this component to work, you must enable the `sandpackPlugin` for the editor.
- * See {@link ConditionalContents} for an example on how to display the dropdown only when a sandpack editor is in focus.
- * @group Toolbar Components
- */
-export declare const ShowSandpackInfo: () => JSX_2.Element | null;
-
 /**
  * A toolbar primitive that allows you to build an UI with multiple exclusive toggle groups, like the list type toggle.
  * @group Toolbar Primitives

package/dist/index.js

@@ -16,8 +16,6 @@ import { quotePlugin } from "./plugins/quote/index.js";
 import { maxLengthPlugin } from "./plugins/maxlength/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 { SandpackEditor } from "./plugins/sandpack/SandpackEditor.js";
 import { EMPTY_VALUE, codeBlockLanguages$, codeMirrorAutoLoadLanguageSupport$, codeMirrorExtensions$, codeMirrorPlugin, getCodeBlockLanguageSelectData, insertCodeMirror$, normalizeCodeBlockLanguages } from "./plugins/codemirror/index.js";
 import { COMMON_STATE_CONFIG_EXTENSIONS, CodeMirrorEditor } from "./plugins/codemirror/CodeMirrorEditor.js";
 import { appendCodeBlockEditorDescriptor$, codeBlockPlugin, defaultCodeBlockLanguage$, insertCodeBlock$ } from "./plugins/codeblock/index.js";
@@ -41,11 +39,9 @@ import { InsertAdmonition } from "./plugins/toolbar/components/InsertAdmonition.
 import { InsertCodeBlock } from "./plugins/toolbar/components/InsertCodeBlock.js";
 import { InsertFrontmatter } from "./plugins/toolbar/components/InsertFrontmatter.js";
 import { InsertImage } from "./plugins/toolbar/components/InsertImage.js";
-import { InsertSandpack } from "./plugins/toolbar/components/InsertSandpack.js";
 import { InsertTable } from "./plugins/toolbar/components/InsertTable.js";
 import { InsertThematicBreak } from "./plugins/toolbar/components/InsertThematicBreak.js";
 import { ListsToggle } from "./plugins/toolbar/components/ListsToggle.js";
-import { ShowSandpackInfo } from "./plugins/toolbar/components/ShowSandpackInfo.js";
 import { UndoRedo } from "./plugins/toolbar/components/UndoRedo.js";
 import { KitchenSinkToolbar } from "./plugins/toolbar/components/KitchenSinkToolbar.js";
 import { Button, ButtonOrDropdownButton, ButtonWithTooltip, ConditionalContents, MultipleChoiceToggleGroup, Root, Separator, SingleChoiceToggleGroup, SingleToggleGroup, ToggleSingleGroupWithItem, ToolbarToggleItem } from "./plugins/toolbar/primitives/toolbar.js";
@@ -132,7 +128,6 @@ export {
   InsertCodeBlock,
   InsertFrontmatter,
   InsertImage,
-  InsertSandpack,
   InsertTable,
   InsertThematicBreak,
   KitchenSinkToolbar,
@@ -149,14 +144,12 @@ export {
   RealmWithPlugins,
   RemoteMDXEditorRealmProvider,
   Root,
-  SandpackEditor,
   Select,
   SelectButtonTrigger,
   SelectContent,
   SelectItem,
   SelectTrigger,
   Separator,
-  ShowSandpackInfo,
   SingleChoiceToggleGroup,
   SingleToggleGroup,
   StrikeThroughSupSubToggles,
@@ -278,7 +271,6 @@ export {
   insertImage$,
   insertJsx$,
   insertMarkdown$,
-  insertSandpack$,
   insertTable$,
   insertThematicBreak$,
   isMdastHTMLNode,
@@ -328,8 +320,6 @@ export {
   removeLink$,
   rootEditor$,
   rootEditorSubscriptions$,
-  sandpackConfig$,
-  sandpackPlugin,
   saveImage$,
   searchOpen$,
   searchPlugin,

package/dist/plugins/codemirror/CodeMirrorEditor.js

@@ -11,7 +11,7 @@ import { basicLight } from "cm6-theme-basic-light";
 import { basicSetup } from "codemirror";
 import { $setSelection } from "lexical";
 import { codeMirrorExtensions$, codeMirrorAutoLoadLanguageSupport$, codeBlockLanguages$, getCodeBlockLanguageSelectData, EMPTY_VALUE } from "./index.js";
-import { useCodeMirrorRef } from "../sandpack/useCodeMirrorRef.js";
+import { useCodeMirrorRef } from "./useCodeMirrorRef.js";
 import { Select } from "../toolbar/primitives/select.js";
 const COMMON_STATE_CONFIG_EXTENSIONS = [];
 const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
@@ -24,7 +24,7 @@ const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
     iconComponentFor$,
     codeBlockLanguages$
   );
-  const codeMirrorRef = useCodeMirrorRef(nodeKey, "codeblock", language, focusEmitter);
+  const codeMirrorRef = useCodeMirrorRef(nodeKey, language, focusEmitter);
   const { setCode } = useCodeBlockEditorContext();
   const editorViewRef = React__default.useRef(null);
   const elRef = React__default.useRef(null);

package/dist/plugins/codemirror/index.js

@@ -90,15 +90,15 @@ const codeMirrorPlugin = realmPlugin({
     r.pubIn({
       [codeBlockLanguages$]: normalized,
       [codeMirrorExtensions$]: (params == null ? void 0 : params.codeMirrorExtensions) ?? [],
-      [appendCodeBlockEditorDescriptor$]: buildCodeBlockDescriptor(),
+      [appendCodeBlockEditorDescriptor$]: buildCodeBlockDescriptor(normalized),
       [codeMirrorAutoLoadLanguageSupport$]: (params == null ? void 0 : params.autoLoadLanguageSupport) ?? true
     });
   }
 });
-function buildCodeBlockDescriptor(_normalized) {
+function buildCodeBlockDescriptor(normalized) {
   return {
-    match(_language, meta) {
-      return !meta;
+    match(language, meta) {
+      return !meta || Object.hasOwn(normalized.keyMap, language ?? "");
     },
     priority: 1,
     Editor: CodeMirrorEditor

package/dist/plugins/{sandpack → codemirror}/useCodeMirrorRef.js

@@ -3,7 +3,7 @@ import React__default from "react";
 import { useCodeBlockEditorContext } from "../codeblock/CodeBlockNode.js";
 import { activeEditor$, editorInFocus$ } from "../core/index.js";
 import { useCellValue, usePublisher } from "@mdxeditor/gurx";
-function useCodeMirrorRef(nodeKey, editorType, language, focusEmitter) {
+function useCodeMirrorRef(nodeKey, language, focusEmitter) {
   const activeEditor = useCellValue(activeEditor$);
   const setEditorInFocus = usePublisher(editorInFocus$);
   const codeMirrorRef = React__default.useRef(null);
@@ -12,11 +12,11 @@ function useCodeMirrorRef(nodeKey, editorType, language, focusEmitter) {
   const atTop = React__default.useRef(false);
   const onFocusHandler = React__default.useCallback(() => {
     setEditorInFocus({
-      editorType,
+      editorType: "codeblock",
       rootNode: lexicalNode,
       editorRef: codeMirrorRef.current
     });
-  }, [editorType, lexicalNode, setEditorInFocus]);
+  }, [lexicalNode, setEditorInFocus]);
   const onKeyDownHandler = React__default.useCallback(
     (e) => {
       var _a, _b, _c, _d, _e, _f;

package/dist/plugins/toolbar/components/KitchenSinkToolbar.js

@@ -10,11 +10,9 @@ import { InsertAdmonition } from "./InsertAdmonition.js";
 import { InsertCodeBlock } from "./InsertCodeBlock.js";
 import { InsertFrontmatter } from "./InsertFrontmatter.js";
 import { InsertImage } from "./InsertImage.js";
-import { InsertSandpack } from "./InsertSandpack.js";
 import { InsertTable } from "./InsertTable.js";
 import { InsertThematicBreak } from "./InsertThematicBreak.js";
 import { ListsToggle } from "./ListsToggle.js";
-import { ShowSandpackInfo } from "./ShowSandpackInfo.js";
 import { UndoRedo } from "./UndoRedo.js";
 import { CreateLink } from "./CreateLink.js";
 import { HighlightToggle } from "./HighlightToggle.js";
@@ -31,14 +29,13 @@ const KitchenSinkToolbar = () => {
     {
       options: [
         { when: (editor) => (editor == null ? void 0 : editor.editorType) === "codeblock", contents: () => /* @__PURE__ */ React__default.createElement(ChangeCodeMirrorLanguage, null) },
-        { when: (editor) => (editor == null ? void 0 : editor.editorType) === "sandpack", contents: () => /* @__PURE__ */ React__default.createElement(ShowSandpackInfo, null) },
         {
           fallback: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(UndoRedo, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(BoldItalicUnderlineToggles, null), /* @__PURE__ */ React__default.createElement(CodeToggle, null), /* @__PURE__ */ React__default.createElement(HighlightToggle, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(StrikeThroughSupSubToggles, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(ListsToggle, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(
             ConditionalContents,
             {
               options: [{ when: whenInAdmonition, contents: () => /* @__PURE__ */ React__default.createElement(ChangeAdmonitionType, null) }, { fallback: () => /* @__PURE__ */ React__default.createElement(BlockTypeSelect, null) }]
             }
-          ), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(CreateLink, null), /* @__PURE__ */ React__default.createElement(InsertImage, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(InsertTable, null), /* @__PURE__ */ React__default.createElement(InsertThematicBreak, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(InsertCodeBlock, null), /* @__PURE__ */ React__default.createElement(InsertSandpack, null), /* @__PURE__ */ React__default.createElement(
+          ), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(CreateLink, null), /* @__PURE__ */ React__default.createElement(InsertImage, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(InsertTable, null), /* @__PURE__ */ React__default.createElement(InsertThematicBreak, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(InsertCodeBlock, null), /* @__PURE__ */ React__default.createElement(
             ConditionalContents,
             {
               options: [