Reading mode

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

const doc = `# Release notes

Reading mode renders the document and **cannot be edited**. Switch to Live to
edit with the preview, or to Source for the plain text.

| Version | Change |
| --- | --- |
| 0.1.0 | First release |

- [x] Tables, math and diagrams render here too
`;

const editor = mountEditor(document.getElementById("editor")!, createEditorState({ doc, mode: "reading" }));

const buttons = [...document.querySelectorAll<HTMLButtonElement>("[data-mode]")];
const show = () => buttons.forEach((b) => b.setAttribute("aria-pressed", String(b.dataset.mode === editor.mode())));
for (const b of buttons) {
  b.addEventListener("click", () => {
    // The document, selection and undo history are kept across modes.
    editor.setMode(b.dataset.mode as EditorMode);
    show();
  });
}
show();

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>OpenMarkdown editor: reading mode</title>
    <style>
      #modes { display: flex; gap: 6px; margin-bottom: 10px; font: 14px system-ui, sans-serif; }
      #modes [aria-pressed="true"] { font-weight: 700; }
      #editor { height: 340px; border: 1px solid #d9d6cf; border-radius: 8px; overflow: hidden; }
      #editor .cm-editor { height: 100%; }
    </style>
  </head>
  <body>
    <div id="modes" role="group" aria-label="Mode">
      <button type="button" data-mode="reading">Reading</button>
      <button type="button" data-mode="live">Live</button>
      <button type="button" data-mode="source">Source</button>
    </div>
    <div id="editor"></div>
    <script type="module" src="./main.ts"></script>
  </body>
</html>

{
  "name": "openmarkdown-editor-example-read-only",
  "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"
  }
}