UI language

import { configureEditorEnvironment, createEditorState, mountEditor, type EditorEnvironment, type MarkdownEditor } from "@openmarkdown-dev/editor";

type Language = NonNullable<EditorEnvironment["language"]>;

const parent = document.getElementById("editor")!;
const select = document.getElementById("language") as HTMLSelectElement;
let editor: MarkdownEditor | null = null;
let doc = "---\ntitle: Language\ntags: [demo]\n---\n\n# UI language\n\nThe editor's own words, like the property controls above and the find panel (Cmd/Ctrl+F), follow the language you pick.\n\n```js\nconsole.log(\"the copy button's tooltip too\");\n```\n";

/** The language is read when a word is drawn, so remount to redraw what is already on screen. */
function mount(language: Language) {
  if (editor) {
    doc = editor.getDoc();
    editor.destroy();
  }
  configureEditorEnvironment({ language });
  editor = mountEditor(parent, createEditorState({ doc }));
}

select.addEventListener("change", () => mount(select.value as Language));
mount(select.value as Language);

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>OpenMarkdown editor: UI language</title>
    <style>
      #lang { margin-bottom: 10px; font: 14px system-ui, sans-serif; }
      #editor { height: 340px; border: 1px solid #d9d6cf; border-radius: 8px; overflow: hidden; }
      #editor .cm-editor { height: 100%; }
    </style>
  </head>
  <body>
    <label id="lang">
      Editor language
      <select id="language">
        <option value="en">English</option>
        <option value="zh">中文</option>
        <option value="ja">日本語</option>
        <option value="ko">한국어</option>
      </select>
    </label>
    <div id="editor"></div>
    <script type="module" src="./main.ts"></script>
  </body>
</html>

{
  "name": "openmarkdown-editor-example-language",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@openmarkdown-dev/editor": "0.1.0"
  },
  "devDependencies": {
    "typescript": "~5.8.3",
    "vite": "^7.0.4"
  }
}