@mdxeditor/editor 0.1.1 → 0.2.0

package/dist/index.js

@@ -229,7 +229,8 @@ class CodeBlockNode extends DecoratorNode {
     );
   }
 }
-function $createCodeBlockNode({ code: code2, language, meta }) {
+function $createCodeBlockNode(options) {
+  const { code: code2, language, meta } = options;
   return new CodeBlockNode(code2, language, meta);
 }
 function $isCodeBlockNode(node) {
@@ -249,9 +250,7 @@ class FrontmatterNode extends DecoratorNode {
   }
   static importJSON(serializedNode) {
     const { yaml } = serializedNode;
-    const node = $createFrontmatterNode({
-      yaml
-    });
+    const node = $createFrontmatterNode(yaml);
     return node;
   }
   exportJSON() {
@@ -292,7 +291,7 @@ class FrontmatterNode extends DecoratorNode {
     );
   }
 }
-function $createFrontmatterNode({ yaml }) {
+function $createFrontmatterNode(yaml) {
   return new FrontmatterNode(yaml);
 }
 function $isFrontmatterNode(node) {
@@ -357,7 +356,6 @@ class ImageNode extends DecoratorNode {
       version: 1
     };
   }
-  // View
   createDOM(config) {
     const span = document.createElement("span");
     const theme2 = config.theme;
@@ -386,7 +384,8 @@ class ImageNode extends DecoratorNode {
     return /* @__PURE__ */ React__default.createElement("img", { title: this.__title, src: this.__src, alt: this.__altText });
   }
 }
-function $createImageNode({ altText, title, src, key }) {
+function $createImageNode(options) {
+  const { altText, title, src, key } = options;
   return new ImageNode(src, altText, title, key);
 }
 function $isImageNode(node) {
@@ -593,8 +592,8 @@ class JsxNode extends DecoratorNode {
     );
   }
 }
-function $createJsxNode(payload) {
-  return new JsxNode(payload);
+function $createJsxNode(options) {
+  return new JsxNode(options);
 }
 function $isJsxNode(node) {
   return node instanceof JsxNode;
@@ -695,7 +694,8 @@ class SandpackNode extends DecoratorNode {
     );
   }
 }
-function $createSandpackNode({ code: code2, language, meta }) {
+function $createSandpackNode(options) {
+  const { code: code2, language, meta } = options;
   return new SandpackNode(code2, language, meta);
 }
 function $isSandpackNode(node) {
@@ -1391,11 +1391,7 @@ const MdastImageVisitor = {
 const MdastFrontmatterVisitor = {
   testNode: "yaml",
   visitNode({ mdastNode, actions }) {
-    actions.addAndStepInto(
-      $createFrontmatterNode({
-        yaml: mdastNode.value
-      })
-    );
+    actions.addAndStepInto($createFrontmatterNode(mdastNode.value));
   }
 };
 const MdastMdxJsEsmVisitor = {
@@ -2264,7 +2260,7 @@ const [EditorSystem, EditorSystemType] = system((r) => {
     theEditor == null ? void 0 : theEditor.update(() => {
       const firstItem = $getRoot().getFirstChild();
       if (!$isFrontmatterNode(firstItem)) {
-        const fmNode = $createFrontmatterNode({ yaml: '"": ""' });
+        const fmNode = $createFrontmatterNode('"": ""');
         if (firstItem) {
           firstItem.insertBefore(fmNode);
         } else {
@@ -2497,9 +2493,17 @@ const defaultSandpackConfig$1 = {
     }
   ]
 };
+const defaultCodeBlockLanguages = {
+  js: "JavaScript",
+  ts: "TypeScript",
+  tsx: "TypeScript (React)",
+  jsx: "JavaScript (React)",
+  css: "CSS"
+};
 const [SandpackSystem] = system(
   (r, [{ activeEditor, activeEditorType, createEditorSubscription }]) => {
     const sandpackConfig = r.node(defaultSandpackConfig$1);
+    const codeBlockLanguages = r.node(defaultCodeBlockLanguages);
     const insertSandpack = r.node();
     const insertCodeBlock = r.node();
     r.pub(createEditorSubscription, (editor) => {
@@ -2555,6 +2559,7 @@ const [SandpackSystem] = system(
       });
     });
     return {
+      codeBlockLanguages,
       insertSandpack,
       insertCodeBlock,
       sandpackConfig
@@ -2875,7 +2880,8 @@ const {
       editorRootElementRef: "editorRootElementRef",
       viewMode: "viewMode",
       linkAutocompleteSuggestions: "linkAutocompleteSuggestions",
-      imageAutocompleteSuggestions: "imageAutocompleteSuggestions"
+      imageAutocompleteSuggestions: "imageAutocompleteSuggestions",
+      codeBlockLanguages: "codeBlockLanguages"
     },
     events: {
       onChange: "onChange"
@@ -2919,57 +2925,59 @@ const SvgArrowDropDown$1 = (props) => /* @__PURE__ */ React.createElement("svg",
   maskType: "alpha"
 } }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h24v24H0z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "m12 15-5-5h10l-5 5Z" })));
 const DropDownIcon = SvgArrowDropDown$1;
-const editorRoot = "_editorRoot_1nlu3_43";
-const editorWrapper = "_editorWrapper_1nlu3_121";
-const nestedListItem = "_nestedListItem_1nlu3_125";
-const toolbarRoot = "_toolbarRoot_1nlu3_129";
-const toolbarModeSwitch = "_toolbarModeSwitch_1nlu3_150";
-const toolbarToggleItem = "_toolbarToggleItem_1nlu3_159";
-const toolbarGroupOfGroups = "_toolbarGroupOfGroups_1nlu3_169";
-const toolbarToggleSingleGroup = "_toolbarToggleSingleGroup_1nlu3_173";
-const toolbarButton = "_toolbarButton_1nlu3_187";
-const toolbarNodeKindSelectContainer = "_toolbarNodeKindSelectContainer_1nlu3_216";
-const toolbarButtonDropdownContainer = "_toolbarButtonDropdownContainer_1nlu3_217";
-const toolbarNodeKindSelectTrigger = "_toolbarNodeKindSelectTrigger_1nlu3_230";
-const toolbarButtonSelectTrigger = "_toolbarButtonSelectTrigger_1nlu3_231";
-const toolbarNodeKindSelectItem = "_toolbarNodeKindSelectItem_1nlu3_264";
-const toolbarNodeKindSelectDropdownArrow = "_toolbarNodeKindSelectDropdownArrow_1nlu3_287";
-const contentEditable = "_contentEditable_1nlu3_291";
-const sandpackWrapper = "_sandpackWrapper_1nlu3_299";
-const frontmatterWrapper = "_frontmatterWrapper_1nlu3_303";
-const frontmatterToggleButton = "_frontmatterToggleButton_1nlu3_313";
-const frontmatterEditorTable = "_frontmatterEditorTable_1nlu3_321";
-const iconButton = "_iconButton_1nlu3_339";
-const frontmatterInput = "_frontmatterInput_1nlu3_345";
-const primaryButton = "_primaryButton_1nlu3_360";
-const linkDialogEditForm = "_linkDialogEditForm_1nlu3_370";
-const linkDialogInputContainer = "_linkDialogInputContainer_1nlu3_376";
-const linkDialogInputWrapper = "_linkDialogInputWrapper_1nlu3_382";
-const linkDialogInput = "_linkDialogInput_1nlu3_376";
-const linkDialogAutocompleteContainer = "_linkDialogAutocompleteContainer_1nlu3_412";
-const linkDialogAnchor = "_linkDialogAnchor_1nlu3_457";
-const linkDialogPopoverContent = "_linkDialogPopoverContent_1nlu3_471";
-const tableColumnEditorPopoverContent = "_tableColumnEditorPopoverContent_1nlu3_471";
-const dialogContent = "_dialogContent_1nlu3_471";
-const linkDialogPreviewAnchor = "_linkDialogPreviewAnchor_1nlu3_485";
-const tooltipContent = "_tooltipContent_1nlu3_507";
-const actionButton = "_actionButton_1nlu3_519";
-const primaryActionButton = "_primaryActionButton_1nlu3_525";
-const tableEditor = "_tableEditor_1nlu3_534";
-const toolCell = "_toolCell_1nlu3_545";
-const tableColumnEditorTrigger = "_tableColumnEditorTrigger_1nlu3_562";
-const tableRowEditorTrigger = "_tableRowEditorTrigger_1nlu3_562";
-const addRowButton = "_addRowButton_1nlu3_562";
-const addColumnButton = "_addColumnButton_1nlu3_562";
-const tableColumnEditorToolbar = "_tableColumnEditorToolbar_1nlu3_596";
-const toggleGroupRoot = "_toggleGroupRoot_1nlu3_608";
-const tableToolsColumn = "_tableToolsColumn_1nlu3_625";
-const leftAlignedCell = "_leftAlignedCell_1nlu3_633";
-const rightAlignedCell = "_rightAlignedCell_1nlu3_637";
-const centeredCell = "_centeredCell_1nlu3_641";
-const dialogOverlay = "_dialogOverlay_1nlu3_669";
-const overlayShow = "_overlayShow_1nlu3_1";
-const contentShow = "_contentShow_1nlu3_1";
+const editorRoot = "_editorRoot_1bxeh_43";
+const editorWrapper = "_editorWrapper_1bxeh_121";
+const nestedListItem = "_nestedListItem_1bxeh_125";
+const toolbarRoot = "_toolbarRoot_1bxeh_129";
+const toolbarModeSwitch = "_toolbarModeSwitch_1bxeh_150";
+const toolbarToggleItem = "_toolbarToggleItem_1bxeh_159";
+const toolbarGroupOfGroups = "_toolbarGroupOfGroups_1bxeh_169";
+const toolbarToggleSingleGroup = "_toolbarToggleSingleGroup_1bxeh_173";
+const toolbarButton = "_toolbarButton_1bxeh_187";
+const toolbarNodeKindSelectContainer = "_toolbarNodeKindSelectContainer_1bxeh_216";
+const toolbarButtonDropdownContainer = "_toolbarButtonDropdownContainer_1bxeh_217";
+const toolbarCodeBlockLanguageSelectContent = "_toolbarCodeBlockLanguageSelectContent_1bxeh_218";
+const toolbarNodeKindSelectTrigger = "_toolbarNodeKindSelectTrigger_1bxeh_232";
+const toolbarButtonSelectTrigger = "_toolbarButtonSelectTrigger_1bxeh_233";
+const toolbarCodeBlockLanguageSelectTrigger = "_toolbarCodeBlockLanguageSelectTrigger_1bxeh_266";
+const toolbarNodeKindSelectItem = "_toolbarNodeKindSelectItem_1bxeh_272";
+const toolbarNodeKindSelectDropdownArrow = "_toolbarNodeKindSelectDropdownArrow_1bxeh_295";
+const contentEditable = "_contentEditable_1bxeh_299";
+const sandpackWrapper = "_sandpackWrapper_1bxeh_307";
+const frontmatterWrapper = "_frontmatterWrapper_1bxeh_311";
+const frontmatterToggleButton = "_frontmatterToggleButton_1bxeh_321";
+const frontmatterEditorTable = "_frontmatterEditorTable_1bxeh_329";
+const iconButton = "_iconButton_1bxeh_347";
+const frontmatterInput = "_frontmatterInput_1bxeh_353";
+const primaryButton = "_primaryButton_1bxeh_368";
+const linkDialogEditForm = "_linkDialogEditForm_1bxeh_378";
+const linkDialogInputContainer = "_linkDialogInputContainer_1bxeh_384";
+const linkDialogInputWrapper = "_linkDialogInputWrapper_1bxeh_390";
+const linkDialogInput = "_linkDialogInput_1bxeh_384";
+const linkDialogAutocompleteContainer = "_linkDialogAutocompleteContainer_1bxeh_420";
+const linkDialogAnchor = "_linkDialogAnchor_1bxeh_465";
+const linkDialogPopoverContent = "_linkDialogPopoverContent_1bxeh_479";
+const tableColumnEditorPopoverContent = "_tableColumnEditorPopoverContent_1bxeh_479";
+const dialogContent = "_dialogContent_1bxeh_479";
+const linkDialogPreviewAnchor = "_linkDialogPreviewAnchor_1bxeh_493";
+const tooltipContent = "_tooltipContent_1bxeh_515";
+const actionButton = "_actionButton_1bxeh_527";
+const primaryActionButton = "_primaryActionButton_1bxeh_533";
+const tableEditor = "_tableEditor_1bxeh_542";
+const toolCell = "_toolCell_1bxeh_553";
+const tableColumnEditorTrigger = "_tableColumnEditorTrigger_1bxeh_570";
+const tableRowEditorTrigger = "_tableRowEditorTrigger_1bxeh_570";
+const addRowButton = "_addRowButton_1bxeh_570";
+const addColumnButton = "_addColumnButton_1bxeh_570";
+const tableColumnEditorToolbar = "_tableColumnEditorToolbar_1bxeh_604";
+const toggleGroupRoot = "_toggleGroupRoot_1bxeh_616";
+const tableToolsColumn = "_tableToolsColumn_1bxeh_633";
+const leftAlignedCell = "_leftAlignedCell_1bxeh_641";
+const rightAlignedCell = "_rightAlignedCell_1bxeh_645";
+const centeredCell = "_centeredCell_1bxeh_649";
+const dialogOverlay = "_dialogOverlay_1bxeh_677";
+const overlayShow = "_overlayShow_1bxeh_1";
+const contentShow = "_contentShow_1bxeh_1";
 const styles = {
   editorRoot,
   editorWrapper,
@@ -2982,8 +2990,10 @@ const styles = {
   toolbarButton,
   toolbarNodeKindSelectContainer,
   toolbarButtonDropdownContainer,
+  toolbarCodeBlockLanguageSelectContent,
   toolbarNodeKindSelectTrigger,
   toolbarButtonSelectTrigger,
+  toolbarCodeBlockLanguageSelectTrigger,
   toolbarNodeKindSelectItem,
   toolbarNodeKindSelectDropdownArrow,
   contentEditable,
@@ -3940,8 +3950,8 @@ const SelectItem = React__default.forwardRef(
     return /* @__PURE__ */ React__default.createElement(Select.Item, { ...props, ref: forwardedRef, className: classNames(className, styles.toolbarNodeKindSelectItem) }, /* @__PURE__ */ React__default.createElement(Select.ItemText, null, children));
   }
 );
-const SelectTrigger = ({ placeholder }) => {
-  return /* @__PURE__ */ React__default.createElement(Select.Trigger, { "aria-label": placeholder, className: styles.toolbarNodeKindSelectTrigger }, /* @__PURE__ */ React__default.createElement(Select.Value, { placeholder }), /* @__PURE__ */ React__default.createElement(Select.Icon, { className: styles.toolbarNodeKindSelectDropdownArrow }, /* @__PURE__ */ React__default.createElement(DropDownIcon, null)));
+const SelectTrigger = ({ placeholder, className }) => {
+  return /* @__PURE__ */ React__default.createElement(Select.Trigger, { "aria-label": placeholder, className: classNames(styles.toolbarNodeKindSelectTrigger, className) }, /* @__PURE__ */ React__default.createElement(Select.Value, { placeholder }), /* @__PURE__ */ React__default.createElement(Select.Icon, { className: styles.toolbarNodeKindSelectDropdownArrow }, /* @__PURE__ */ React__default.createElement(DropDownIcon, null)));
 };
 const SelectContent = ({
   children,
@@ -3958,7 +3968,7 @@ const SelectButtonTrigger = ({
   return /* @__PURE__ */ React__default.createElement(Select.Trigger, { className: classNames(styles.toolbarButtonSelectTrigger, className), title }, children, /* @__PURE__ */ React__default.createElement(Select.Icon, { className: styles.toolbarNodeKindSelectDropdownArrow }, /* @__PURE__ */ React__default.createElement(DropDownIcon, null)));
 };
 function CodeBlockLanguageSelect() {
-  const [activeEditorType, activeEditor] = useEmitterValues("activeEditorType", "activeEditor");
+  const [activeEditorType, activeEditor, codeBlockLanguages] = useEmitterValues("activeEditorType", "activeEditor", "codeBlockLanguages");
   const nodeLanguage = React__default.useMemo(() => {
     let language;
     activeEditor.getEditorState().read(() => {
@@ -3981,8 +3991,8 @@ function CodeBlockLanguageSelect() {
         });
       }
     },
-    /* @__PURE__ */ React__default.createElement(SelectTrigger, { placeholder: "Language" }),
-    /* @__PURE__ */ React__default.createElement(SelectContent, null, /* @__PURE__ */ React__default.createElement(SelectItem, { value: "js" }, "JavaScript"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "ts" }, "TypeScript"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "css" }, "CSS"))
+    /* @__PURE__ */ React__default.createElement(SelectTrigger, { placeholder: "Language", className: styles.toolbarCodeBlockLanguageSelectTrigger }),
+    /* @__PURE__ */ React__default.createElement(SelectContent, { className: styles.toolbarCodeBlockLanguageSelectContent }, Object.entries(codeBlockLanguages).map(([value, label]) => /* @__PURE__ */ React__default.createElement(SelectItem, { key: value, value }, label)))
   );
 }
 const SvgDelete = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 24, height: 24, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {