@mdxeditor/editor 0.1.1 → 0.3.0

package/dist/index.js

@@ -17,17 +17,16 @@ import { ElementNode, $createParagraphNode, $applyNodeReplacement, DecoratorNode
 import { AdmonitionKind } from "lexical";
 import * as React from "react";
 import React__default, { createContext, forwardRef, useMemo, useImperativeHandle, createElement, useCallback, useContext, useState, useEffect } from "react";
-import { directiveToMarkdown, directiveFromMarkdown } from "mdast-util-directive";
-import { frontmatterToMarkdown, frontmatterFromMarkdown } from "mdast-util-frontmatter";
-import { gfmTableToMarkdown, gfmTableFromMarkdown } from "mdast-util-gfm-table";
-import { mdxToMarkdown, mdxFromMarkdown } from "mdast-util-mdx";
-import { toMarkdown } from "mdast-util-to-markdown";
 import { CodeNode } from "@lexical/code";
 import { $isLinkNode, LinkNode, $createLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
 import { $isListNode, $isListItemNode, ListNode, ListItemNode, $createListNode, $createListItemNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, $getListDepth } from "@lexical/list";
 import { $isHorizontalRuleNode, HorizontalRuleNode, $createHorizontalRuleNode, INSERT_HORIZONTAL_RULE_COMMAND } from "@lexical/react/LexicalHorizontalRuleNode";
 import { $isHeadingNode, $isQuoteNode, HeadingNode, QuoteNode, $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
+import { directiveToMarkdown, directiveFromMarkdown } from "mdast-util-directive";
 import { fromMarkdown } from "mdast-util-from-markdown";
+import { frontmatterToMarkdown, frontmatterFromMarkdown } from "mdast-util-frontmatter";
+import { gfmTableToMarkdown, gfmTableFromMarkdown } from "mdast-util-gfm-table";
+import { mdxToMarkdown, mdxFromMarkdown } from "mdast-util-mdx";
 import { directive } from "micromark-extension-directive";
 import { frontmatter } from "micromark-extension-frontmatter";
 import { gfmTable } from "micromark-extension-gfm-table";
@@ -36,6 +35,7 @@ import { addClassNamesToElement, $insertNodeToNearestRoot, $findMatchingParent,
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $setBlocksType, $isAtNodeEnd } from "@lexical/selection";
 import { createEmptyHistoryState, HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { toMarkdown } from "mdast-util-to-markdown";
 import * as RadixPopover from "@radix-ui/react-popover";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import { useCombobox } from "downshift";
@@ -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,27 +384,30 @@ 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) {
   return node instanceof ImageNode;
 }
-const bold = "_bold_1xdbx_1";
-const italic = "_italic_1xdbx_5";
-const underline = "_underline_1xdbx_9";
-const strikethrough = "_strikethrough_1xdbx_25";
-const underlineStrikethrough = "_underlineStrikethrough_1xdbx_29";
-const subscript = "_subscript_1xdbx_33";
-const superscript = "_superscript_1xdbx_38";
-const code = "_code_1xdbx_43";
-const nestedListItem$1 = "_nestedListItem_1xdbx_50";
-const admonitionDanger = "_admonitionDanger_1xdbx_54";
-const admonitionInfo = "_admonitionInfo_1xdbx_54";
-const admonitionNote = "_admonitionNote_1xdbx_54";
-const admonitionTip = "_admonitionTip_1xdbx_54";
-const admonitionCaution = "_admonitionCaution_1xdbx_54";
+const darkTheme = "_dark-theme_13nbk_1";
+const bold = "_bold_13nbk_10";
+const italic = "_italic_13nbk_14";
+const underline = "_underline_13nbk_18";
+const strikethrough = "_strikethrough_13nbk_34";
+const underlineStrikethrough = "_underlineStrikethrough_13nbk_38";
+const subscript = "_subscript_13nbk_42";
+const superscript = "_superscript_13nbk_47";
+const code = "_code_13nbk_52";
+const nestedListItem$1 = "_nestedListItem_13nbk_59";
+const admonitionDanger = "_admonitionDanger_13nbk_63";
+const admonitionInfo = "_admonitionInfo_13nbk_63";
+const admonitionNote = "_admonitionNote_13nbk_63";
+const admonitionTip = "_admonitionTip_13nbk_63";
+const admonitionCaution = "_admonitionCaution_13nbk_63";
 const styles$1 = {
+  darkTheme,
   bold,
   italic,
   underline,
@@ -422,6 +423,115 @@ const styles$1 = {
   admonitionTip,
   admonitionCaution
 };
+const editorRoot = "_editorRoot_1x7ym_47";
+const editorWrapper = "_editorWrapper_1x7ym_141";
+const nestedListItem = "_nestedListItem_1x7ym_145";
+const toolbarRoot = "_toolbarRoot_1x7ym_149";
+const toolbarModeSwitch = "_toolbarModeSwitch_1x7ym_170";
+const toolbarToggleItem = "_toolbarToggleItem_1x7ym_179";
+const toolbarGroupOfGroups = "_toolbarGroupOfGroups_1x7ym_189";
+const toolbarToggleSingleGroup = "_toolbarToggleSingleGroup_1x7ym_193";
+const toolbarButton = "_toolbarButton_1x7ym_207";
+const toolbarNodeKindSelectContainer = "_toolbarNodeKindSelectContainer_1x7ym_236";
+const toolbarButtonDropdownContainer = "_toolbarButtonDropdownContainer_1x7ym_237";
+const toolbarCodeBlockLanguageSelectContent = "_toolbarCodeBlockLanguageSelectContent_1x7ym_238";
+const toolbarNodeKindSelectTrigger = "_toolbarNodeKindSelectTrigger_1x7ym_252";
+const toolbarButtonSelectTrigger = "_toolbarButtonSelectTrigger_1x7ym_253";
+const toolbarCodeBlockLanguageSelectTrigger = "_toolbarCodeBlockLanguageSelectTrigger_1x7ym_286";
+const toolbarNodeKindSelectItem = "_toolbarNodeKindSelectItem_1x7ym_292";
+const toolbarNodeKindSelectDropdownArrow = "_toolbarNodeKindSelectDropdownArrow_1x7ym_315";
+const contentEditable = "_contentEditable_1x7ym_319";
+const sandpackWrapper = "_sandpackWrapper_1x7ym_327";
+const frontmatterWrapper = "_frontmatterWrapper_1x7ym_331";
+const frontmatterToggleButton = "_frontmatterToggleButton_1x7ym_341";
+const frontmatterEditorTable = "_frontmatterEditorTable_1x7ym_349";
+const iconButton = "_iconButton_1x7ym_367";
+const frontmatterInput = "_frontmatterInput_1x7ym_373";
+const primaryButton = "_primaryButton_1x7ym_388";
+const linkDialogEditForm = "_linkDialogEditForm_1x7ym_398";
+const linkDialogInputContainer = "_linkDialogInputContainer_1x7ym_404";
+const linkDialogInputWrapper = "_linkDialogInputWrapper_1x7ym_410";
+const linkDialogInput = "_linkDialogInput_1x7ym_404";
+const linkDialogAutocompleteContainer = "_linkDialogAutocompleteContainer_1x7ym_440";
+const linkDialogAnchor = "_linkDialogAnchor_1x7ym_485";
+const linkDialogPopoverContent = "_linkDialogPopoverContent_1x7ym_499";
+const tableColumnEditorPopoverContent = "_tableColumnEditorPopoverContent_1x7ym_499";
+const dialogContent = "_dialogContent_1x7ym_499";
+const linkDialogPreviewAnchor = "_linkDialogPreviewAnchor_1x7ym_513";
+const tooltipContent = "_tooltipContent_1x7ym_535";
+const actionButton = "_actionButton_1x7ym_547";
+const primaryActionButton = "_primaryActionButton_1x7ym_553";
+const tableEditor = "_tableEditor_1x7ym_562";
+const toolCell = "_toolCell_1x7ym_573";
+const tableColumnEditorTrigger = "_tableColumnEditorTrigger_1x7ym_590";
+const tableRowEditorTrigger = "_tableRowEditorTrigger_1x7ym_590";
+const addRowButton = "_addRowButton_1x7ym_590";
+const addColumnButton = "_addColumnButton_1x7ym_590";
+const tableColumnEditorToolbar = "_tableColumnEditorToolbar_1x7ym_624";
+const toggleGroupRoot = "_toggleGroupRoot_1x7ym_636";
+const tableToolsColumn = "_tableToolsColumn_1x7ym_653";
+const leftAlignedCell = "_leftAlignedCell_1x7ym_661";
+const rightAlignedCell = "_rightAlignedCell_1x7ym_665";
+const centeredCell = "_centeredCell_1x7ym_669";
+const dialogOverlay = "_dialogOverlay_1x7ym_697";
+const overlayShow = "_overlayShow_1x7ym_1";
+const contentShow = "_contentShow_1x7ym_1";
+const styles = {
+  editorRoot,
+  editorWrapper,
+  nestedListItem,
+  toolbarRoot,
+  toolbarModeSwitch,
+  toolbarToggleItem,
+  toolbarGroupOfGroups,
+  toolbarToggleSingleGroup,
+  toolbarButton,
+  toolbarNodeKindSelectContainer,
+  toolbarButtonDropdownContainer,
+  toolbarCodeBlockLanguageSelectContent,
+  toolbarNodeKindSelectTrigger,
+  toolbarButtonSelectTrigger,
+  toolbarCodeBlockLanguageSelectTrigger,
+  toolbarNodeKindSelectItem,
+  toolbarNodeKindSelectDropdownArrow,
+  contentEditable,
+  sandpackWrapper,
+  frontmatterWrapper,
+  frontmatterToggleButton,
+  frontmatterEditorTable,
+  iconButton,
+  frontmatterInput,
+  primaryButton,
+  linkDialogEditForm,
+  linkDialogInputContainer,
+  linkDialogInputWrapper,
+  linkDialogInput,
+  linkDialogAutocompleteContainer,
+  linkDialogAnchor,
+  linkDialogPopoverContent,
+  tableColumnEditorPopoverContent,
+  dialogContent,
+  linkDialogPreviewAnchor,
+  tooltipContent,
+  actionButton,
+  primaryActionButton,
+  tableEditor,
+  toolCell,
+  tableColumnEditorTrigger,
+  tableRowEditorTrigger,
+  addRowButton,
+  addColumnButton,
+  tableColumnEditorToolbar,
+  toggleGroupRoot,
+  tableToolsColumn,
+  leftAlignedCell,
+  rightAlignedCell,
+  centeredCell,
+  dialogOverlay,
+  overlayShow,
+  contentShow
+};
+console.log(styles);
 const theme = {
   text: {
     bold: styles$1.bold,
@@ -593,8 +703,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 +805,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) {
@@ -786,7 +897,7 @@ class TableNode extends DecoratorNode {
       const row = table.children[rowIndex];
       const cells = row.children;
       const cellsClone = Array.from(cells);
-      const rowClone = { ...row, hildren: cellsClone };
+      const rowClone = { ...row, children: cellsClone };
       cellsClone.splice(colIndex, 1);
       table.children[rowIndex] = rowClone;
     }
@@ -912,10 +1023,13 @@ const LexicalQuoteVisitor = {
 };
 const AdmonitionVisitor = {
   testLexicalNode: $isAdmonitionNode,
-  visitLexicalNode: ({ lexicalNode, actions }) => {
-    actions.addAndStepInto("containerDirective", {
-      name: lexicalNode.getKind()
+  visitLexicalNode: ({ mdastParent, lexicalNode, actions }) => {
+    const admonition = actions.appendToParent(mdastParent, {
+      type: "containerDirective",
+      name: lexicalNode.getKind(),
+      children: [{ type: "paragraph", children: [] }]
     });
+    actions.visitChildren(lexicalNode, admonition.children[0]);
   }
 };
 const SandpackNodeVisitor = {
@@ -1391,11 +1505,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 +2374,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 +2607,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 +2673,7 @@ const [SandpackSystem] = system(
       });
     });
     return {
+      codeBlockLanguages,
       insertSandpack,
       insertCodeBlock,
       sandpackConfig
@@ -2875,7 +2994,8 @@ const {
       editorRootElementRef: "editorRootElementRef",
       viewMode: "viewMode",
       linkAutocompleteSuggestions: "linkAutocompleteSuggestions",
-      imageAutocompleteSuggestions: "imageAutocompleteSuggestions"
+      imageAutocompleteSuggestions: "imageAutocompleteSuggestions",
+      codeBlockLanguages: "codeBlockLanguages"
     },
     events: {
       onChange: "onChange"
@@ -2919,110 +3039,6 @@ 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 styles = {
-  editorRoot,
-  editorWrapper,
-  nestedListItem,
-  toolbarRoot,
-  toolbarModeSwitch,
-  toolbarToggleItem,
-  toolbarGroupOfGroups,
-  toolbarToggleSingleGroup,
-  toolbarButton,
-  toolbarNodeKindSelectContainer,
-  toolbarButtonDropdownContainer,
-  toolbarNodeKindSelectTrigger,
-  toolbarButtonSelectTrigger,
-  toolbarNodeKindSelectItem,
-  toolbarNodeKindSelectDropdownArrow,
-  contentEditable,
-  sandpackWrapper,
-  frontmatterWrapper,
-  frontmatterToggleButton,
-  frontmatterEditorTable,
-  iconButton,
-  frontmatterInput,
-  primaryButton,
-  linkDialogEditForm,
-  linkDialogInputContainer,
-  linkDialogInputWrapper,
-  linkDialogInput,
-  linkDialogAutocompleteContainer,
-  linkDialogAnchor,
-  linkDialogPopoverContent,
-  tableColumnEditorPopoverContent,
-  dialogContent,
-  linkDialogPreviewAnchor,
-  tooltipContent,
-  actionButton,
-  primaryActionButton,
-  tableEditor,
-  toolCell,
-  tableColumnEditorTrigger,
-  tableRowEditorTrigger,
-  addRowButton,
-  addColumnButton,
-  tableColumnEditorToolbar,
-  toggleGroupRoot,
-  tableToolsColumn,
-  leftAlignedCell,
-  rightAlignedCell,
-  centeredCell,
-  dialogOverlay,
-  overlayShow,
-  contentShow
-};
 createCommand();
 const MAX_SUGGESTIONS$1 = 20;
 function LinkEditForm({ initialUrl, onSubmit, onCancel, linkAutocompleteSuggestions }) {
@@ -3940,8 +3956,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 +3974,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 +3997,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: {
@@ -4052,7 +4068,7 @@ const TableIcon = SvgTable;
 const BlockTypeSelect = () => {
   const [currentBlockType] = useEmitterValues("currentBlockType");
   const applyBlockType = usePublisher("applyBlockType");
-  return /* @__PURE__ */ React__default.createElement(Select.Root, { value: currentBlockType || "", onValueChange: applyBlockType }, /* @__PURE__ */ React__default.createElement(SelectTrigger, { placeholder: "Block type" }), /* @__PURE__ */ React__default.createElement(SelectContent, null, /* @__PURE__ */ React__default.createElement(SelectItem, { value: "paragraph" }, "Paragraph"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "quote" }, "Quote"), /* @__PURE__ */ React__default.createElement(Select.Separator, null), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h1" }, "Heading 1"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h2" }, "Heading 2"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h3" }, "Heading 3"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h4" }, "Heading 4"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h5" }, "Heading 5"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h6" }, "Heading 6"), /* @__PURE__ */ React__default.createElement(Select.Separator, null), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "info" }, "Info")));
+  return /* @__PURE__ */ React__default.createElement(Select.Root, { value: currentBlockType || "", onValueChange: applyBlockType }, /* @__PURE__ */ React__default.createElement(SelectTrigger, { placeholder: "Block type" }), /* @__PURE__ */ React__default.createElement(SelectContent, null, /* @__PURE__ */ React__default.createElement(SelectItem, { value: "paragraph" }, "Paragraph"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "quote" }, "Quote"), /* @__PURE__ */ React__default.createElement(Select.Separator, null), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h1" }, "Heading 1"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h2" }, "Heading 2"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h3" }, "Heading 3"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h4" }, "Heading 4"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h5" }, "Heading 5"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h6" }, "Heading 6"), /* @__PURE__ */ React__default.createElement(Select.Separator, null), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "note" }, "Note"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "tip" }, "Tip"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "info" }, "Info"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "caution" }, "Caution"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "danger" }, "Danger")));
 };
 const SvgAddPhoto = (props) => /* @__PURE__ */ React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "mask0_343_38", style: {
   maskType: "alpha"