@mdxeditor/editor/dist/plugins/toolbar/components/ChangeCodeMirrorLanguage.js

React component for rich text markdown editing

import { useCellValues } from "@mdxeditor/gurx";
import React__default from "react";
import styles from "../../../styles/ui.module.css.js";
import { $isCodeBlockNode } from "../../codeblock/CodeBlockNode.js";
import { codeBlockLanguages$, EMPTY_VALUE } from "../../codemirror/index.js";
import { editorInFocus$, activeEditor$, useTranslation } from "../../core/index.js";
import { Select } from "../primitives/select.js";
const ChangeCodeMirrorLanguage = () => {
  const [editorInFocus, theEditor, codeBlockLanguages] = useCellValues(editorInFocus$, activeEditor$, codeBlockLanguages$);
  const codeBlockNode = $isCodeBlockNode(editorInFocus.rootNode) ? editorInFocus.rootNode : null;
  const t = useTranslation();
  if (!codeBlockNode) {
    return null;
  }
  const rawLanguage = codeBlockNode.getLanguage();
  let currentLanguage = codeBlockLanguages.keyMap[rawLanguage] ?? rawLanguage;
  if (currentLanguage === "") {
    currentLanguage = EMPTY_VALUE;
  }
  return /* @__PURE__ */ React__default.createElement("div", { className: styles.selectWithLabel }, /* @__PURE__ */ React__default.createElement("label", null, t("codeBlock.language", "Code block language")), /* @__PURE__ */ React__default.createElement(
    Select,
    {
      value: currentLanguage,
      onChange: (language) => {
        theEditor == null ? void 0 : theEditor.update(() => {
          codeBlockNode.setLanguage(language === EMPTY_VALUE ? "" : language);
          setTimeout(() => {
            theEditor.update(() => {
              codeBlockNode.getLatest().select();
            });
          });
        });
      },
      triggerTitle: t("codeBlock.selectLanguage", "Select code block language"),
      placeholder: t("codeBlock.language", "Code block language"),
      items: codeBlockLanguages.items
    }
  ));
};
export {
  ChangeCodeMirrorLanguage
};