Seiten Hard

Wiki — Article Editor (markdown + preview)

A genuinely working markdown article editor in a clean knowledge-base aesthetic. A formatting toolbar wraps or inserts markdown at the selection, a split pane pairs a mono source textarea with a live serif preview rendered by a small from-scratch markdown engine, and a metadata bar carries the title, edit summary, and tags. Synced scrolling links the panes, write/split/preview modes reflow the layout, keyboard shortcuts drive the toolbar, and a footer tracks word count with save-draft and publish actions plus an unsaved-changes indicator.

In Lab öffnen

html css vanilla-js

Targets: JS HTML

Code

:root {
  --bg: #ffffff;
  --bg-2: #f7f8fa;
  --panel: #ffffff;
  --ink: #1a1a1f;
  --ink-2: #3a3a42;
  --muted: #6b7280;
  --line: rgba(20, 20, 30, 0.10);
  --line-2: rgba(20, 20, 30, 0.18);
  --link: #2563eb;
  --link-hover: #1d4ed8;
  --accent: #2563eb;
  --note: #2563eb;
  --tip: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --code-bg: #f4f4f6;
  --kbd-bg: #eceef2;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.05);
  --shadow-md: 0 6px 22px rgba(20, 20, 30, 0.10);
  --topbar-h: 54px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--ink);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  z-index: 50;
}
.skip-link:focus { left: 8px; }

/* ── Topbar ──────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  height: var(--topbar-h);
  padding: 0 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex: none;
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: linear-gradient(150deg, #2563eb, #16a34a);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  box-shadow: var(--shadow-sm);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 14px; font-weight: 700; }
.brand-sub { font-size: 11px; color: var(--muted); }

.crumbs {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--muted);
  min-width: 0; overflow: hidden; white-space: nowrap;
}
.crumbs a { color: var(--ink-2); }
.crumbs span[aria-current] { color: var(--ink); font-weight: 600; }
.crumbs > span[aria-hidden] { color: var(--line-2); }

.topbar-status { margin-left: auto; flex: none; }

.dirty-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.dirty-badge .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dirty-badge.is-clean { color: var(--tip); background: rgba(22, 163, 74, 0.08); border-color: rgba(22, 163, 74, 0.22); }
.dirty-badge.is-clean .dot { background: var(--tip); }
.dirty-badge.is-dirty { color: var(--warn); background: rgba(217, 119, 6, 0.10); border-color: rgba(217, 119, 6, 0.28); }
.dirty-badge.is-dirty .dot { background: var(--warn); animation: pulse 1.6s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

/* ── Metabar ─────────────────────────────────────────── */
.metabar {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(220px, 2fr) minmax(200px, 1.4fr);
  gap: 14px;
  padding: 12px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.field input {
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: var(--ink);
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field-title input { font-weight: 700; font-size: 15px; }
.field input::placeholder { color: var(--muted); }
.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

/* ── Toolbar ─────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  flex: none;
  flex-wrap: wrap;
}
.tool-group { display: inline-flex; gap: 3px; }
.tool {
  width: 34px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, color 0.13s, transform 0.06s;
}
.tool:hover { background: var(--panel); border-color: var(--line); color: var(--ink); }
.tool:active { transform: translateY(1px); }
.tool-glyph { font-size: 14px; line-height: 1; }
.tool-glyph.mono { font-family: var(--font-mono); font-size: 12px; }
.tool-sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 4px; }
.toolbar-spacer { flex: 1 1 auto; min-width: 8px; }

.mode-switch {
  display: inline-flex;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 2px;
}
.mode-btn {
  font-family: var(--font-ui);
  font-size: 12.5px; font-weight: 600;
  padding: 5px 13px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.13s, color 0.13s;
}
.mode-btn:hover { color: var(--ink); }
.mode-btn.is-active { background: var(--accent); color: #fff; }

/* ── Panes ───────────────────────────────────────────── */
.panes {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  min-height: 0;
  background: var(--panel);
}
.panes[data-mode="write"] { grid-template-columns: 1fr 0 0; }
.panes[data-mode="write"] .pane-divider,
.panes[data-mode="write"] .pane-preview { display: none; }
.panes[data-mode="preview"] { grid-template-columns: 0 0 1fr; }
.panes[data-mode="preview"] .pane-divider,
.panes[data-mode="preview"] .pane-write { display: none; }

.pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--panel);
}
.pane-preview { background: var(--bg); }

.pane-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  flex: none;
}
.pane-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-2);
}
.pane-hint { font-size: 11px; color: var(--muted); }
.pane-hint.mono { font-family: var(--font-mono); }

.pane-divider { background: var(--line); }

.source {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  resize: none;
  border: 0;
  padding: 22px 24px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--panel);
  tab-size: 2;
  overflow-y: auto;
}
.source:focus { outline: none; }
.source::selection { background: rgba(37, 99, 235, 0.18); }

/* ── Preview (rendered markdown, serif body) ─────────── */
.preview {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 36px 60px;
}
.preview::-webkit-scrollbar, .source::-webkit-scrollbar { width: 11px; }
.preview::-webkit-scrollbar-thumb, .source::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}

.preview .doc {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
}
.preview .doc > *:first-child { margin-top: 0; }

.preview h1 {
  font-family: var(--font-serif);
  font-size: 30px; font-weight: 700; line-height: 1.2;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.preview h2 {
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 600; line-height: 1.3;
  margin: 32px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.preview h3 {
  font-family: var(--font-serif);
  font-size: 18px; font-weight: 600;
  margin: 24px 0 8px;
}
.preview p { margin: 0 0 14px; }
.preview a { text-decoration: underline; text-underline-offset: 2px; }

.preview ul, .preview ol { margin: 0 0 14px; padding-left: 26px; }
.preview li { margin: 4px 0; }

.preview blockquote {
  margin: 16px 0;
  padding: 6px 18px;
  border-left: 3px solid var(--accent);
  background: var(--bg-2);
  color: var(--ink-2);
  font-style: italic;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.preview blockquote p:last-child { margin-bottom: 0; }

.preview code {
  font-family: var(--font-mono);
  font-size: 0.84em;
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  color: #b5237b;
}
.preview pre {
  margin: 16px 0;
  padding: 16px 18px;
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow-x: auto;
}
.preview pre code {
  background: none; border: 0; padding: 0; color: var(--ink);
  font-size: 13px; line-height: 1.6;
}

.preview img {
  max-width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  display: block;
  margin: 16px 0;
}
.preview .img-ph {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 120px;
  margin: 16px 0;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  background: var(--bg-2);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
}

.preview hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }

.preview table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-family: var(--font-ui);
  font-size: 14px;
}
.preview th, .preview td {
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
}
.preview th { background: var(--bg-2); font-weight: 600; }

.preview strong { font-weight: 700; }
.preview em { font-style: italic; }

.preview-empty {
  max-width: 720px;
  margin: 0 auto;
  color: var(--muted);
  font-family: var(--font-ui);
  font-style: italic;
  padding: 24px 0;
}

/* ── Footer ──────────────────────────────────────────── */
.footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  flex: none;
}
.footer-stats {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--muted);
  flex-wrap: wrap;
}
.footer-stats strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-sep { color: var(--line-2); }
.footer-actions { margin-left: auto; display: flex; gap: 8px; }

.btn {
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  cursor: pointer;
  background: var(--panel);
  color: var(--ink);
  transition: background 0.13s, border-color 0.13s, transform 0.06s, box-shadow 0.13s;
}
.btn:hover { background: var(--bg-2); border-color: var(--line-2); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--link-hover); border-color: var(--link-hover); box-shadow: var(--shadow-sm); }

/* ── Toast ───────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 76px;
  transform: translate(-50%, 14px);
  background: var(--ink);
  color: #fff;
  font-size: 13px; font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 60;
  max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 820px) {
  .metabar { grid-template-columns: 1fr 1fr; }
  .field-summary { grid-column: 1 / -1; }
  .crumbs { display: none; }
  .panes { grid-template-columns: 1fr 1px 1fr; }
  /* On narrow screens split would be cramped — force single pane */
  .panes:not([data-mode="preview"]) { grid-template-columns: 1fr 0 0; }
  .panes:not([data-mode="preview"]) .pane-divider,
  .panes:not([data-mode="preview"]) .pane-preview { display: none; }
  .panes[data-mode="preview"] { grid-template-columns: 0 0 1fr; }
  .panes[data-mode="preview"] .pane-write { display: none; }
  .mode-switch [data-mode="split"] { display: none; }
}

@media (max-width: 520px) {
  body { font-size: 13.5px; }
  .topbar { gap: 12px; padding: 0 12px; }
  .brand-sub { display: none; }
  .metabar { grid-template-columns: 1fr; padding: 10px 12px; gap: 10px; }
  .field-summary, .field-tags { grid-column: auto; }
  .toolbar { padding: 7px 10px; gap: 4px; }
  .toolbar-spacer { flex-basis: 100%; height: 0; }
  .mode-switch { margin-top: 2px; }
  .source { padding: 16px 14px; }
  .preview { padding: 18px 16px 50px; }
  .preview .doc { font-size: 15.5px; }
  .preview h1 { font-size: 25px; }
  .preview h2 { font-size: 19px; }
  .footer { flex-wrap: wrap; gap: 10px; }
  .footer-actions { margin-left: 0; width: 100%; }
  .footer-actions .btn { flex: 1; }
  .toast { bottom: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

(function () {
  "use strict";

  var source = document.getElementById("source");
  var preview = document.getElementById("preview");
  var panes = document.getElementById("editor-main");
  var paneWrite = document.querySelector(".pane-write");
  var panePreview = document.querySelector(".pane-preview");
  var dirtyBadge = document.getElementById("dirty-badge");
  var dirtyLabel = dirtyBadge.querySelector(".dirty-label");
  var toastEl = document.getElementById("toast");

  /* ── Seed content ─────────────────────────────────────── */
  var SEED = [
    "# Aurora DB",
    "",
    "**Aurora DB** is a fictional, horizontally-scalable distributed database",
    "built by the *Verdant* group for low-latency reads across many regions.",
    "It pairs a [Raft](https://example.org/raft) replication core with a",
    "tunable consistency layer.",
    "",
    "## Overview",
    "",
    "Aurora DB shards data into *ranges* and replicates each range across a",
    "quorum of nodes. Writes are serialized through a per-range leader, while",
    "reads can be served from the nearest follower when `staleness` is allowed.",
    "",
    "- Strongly-consistent reads from the leader",
    "- Bounded-stale reads from local followers",
    "- Automatic range splitting and rebalancing",
    "",
    "> Design goal: a single logical database that behaves like one machine,",
    "> while running on hundreds.",
    "",
    "## Consistency model",
    "",
    "Each transaction is assigned a hybrid logical clock timestamp. Use the",
    "`SET CONSISTENCY` statement to pick a level:",
    "",
    "```",
    "BEGIN;",
    "SET CONSISTENCY = 'bounded(50ms)';",
    "SELECT * FROM orders WHERE region = 'eu-west';",
    "COMMIT;",
    "```",
    "",
    "### Isolation",
    "",
    "Aurora DB defaults to `serializable` isolation. Lower it per-session with",
    "the `txn_isolation` flag when you need throughput over strictness.",
    "",
    "## See also",
    "",
    "1. Project Nimbus storage engine",
    "2. The Verdant query planner",
    "3. Hybrid logical clocks",
    ""
  ].join("\n");

  /* ── Tiny markdown → HTML renderer ────────────────────── */
  function escapeHtml(s) {
    return s
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;");
  }

  function inline(text) {
    // protect inline code first
    var codes = [];
    text = text.replace(/`([^`]+)`/g, function (_, c) {
      codes.push("<code>" + escapeHtml(c) + "</code>");
      return "C" + (codes.length - 1) + "";
    });

    text = escapeHtml(text);

    // images ![alt](url)
    text = text.replace(/!\[([^\]]*)\]\(([^)\s]+)[^)]*\)/g, function (_, alt) {
      return '<span class="img-ph">🖼 ' + (alt || "image") + "</span>";
    });
    // links [text](url)
    text = text.replace(/\[([^\]]+)\]\(([^)\s]+)[^)]*\)/g, function (_, t, url) {
      var safe = /^https?:|^#|^\//.test(url) ? url : "#";
      return '<a href="' + safe + '" rel="noopener">' + t + "</a>";
    });
    // bold
    text = text.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
    text = text.replace(/__([^_]+)__/g, "<strong>$1</strong>");
    // italic
    text = text.replace(/\*([^*\n]+)\*/g, "<em>$1</em>");
    text = text.replace(/(^|[^\w])_([^_\n]+)_/g, "$1<em>$2</em>");

    // restore code
    text = text.replace(/C(\d+)/g, function (_, i) {
      return codes[+i];
    });
    return text;
  }

  function render(md) {
    var lines = md.replace(/\r\n/g, "\n").split("\n");
    var out = [];
    var i = 0;
    var listType = null; // 'ul' | 'ol'

    function closeList() {
      if (listType) {
        out.push("</" + listType + ">");
        listType = null;
      }
    }

    while (i < lines.length) {
      var line = lines[i];

      // fenced code block
      if (/^```/.test(line)) {
        closeList();
        var buf = [];
        i++;
        while (i < lines.length && !/^```/.test(lines[i])) {
          buf.push(lines[i]);
          i++;
        }
        i++; // skip closing fence
        out.push("<pre><code>" + escapeHtml(buf.join("\n")) + "</code></pre>");
        continue;
      }

      // blank
      if (/^\s*$/.test(line)) {
        closeList();
        i++;
        continue;
      }

      // horizontal rule
      if (/^(-{3,}|\*{3,}|_{3,})\s*$/.test(line)) {
        closeList();
        out.push("<hr/>");
        i++;
        continue;
      }

      // headings
      var h = /^(#{1,6})\s+(.*)$/.exec(line);
      if (h) {
        closeList();
        var lvl = h[1].length;
        out.push("<h" + lvl + ">" + inline(h[2].trim()) + "</h" + lvl + ">");
        i++;
        continue;
      }

      // blockquote (collect consecutive)
      if (/^>\s?/.test(line)) {
        closeList();
        var qbuf = [];
        while (i < lines.length && /^>\s?/.test(lines[i])) {
          qbuf.push(lines[i].replace(/^>\s?/, ""));
          i++;
        }
        out.push("<blockquote>" + inline(qbuf.join(" ")) + "</blockquote>");
        continue;
      }

      // unordered list
      if (/^\s*[-*+]\s+/.test(line)) {
        if (listType !== "ul") {
          closeList();
          out.push("<ul>");
          listType = "ul";
        }
        out.push("<li>" + inline(line.replace(/^\s*[-*+]\s+/, "")) + "</li>");
        i++;
        continue;
      }

      // ordered list
      if (/^\s*\d+\.\s+/.test(line)) {
        if (listType !== "ol") {
          closeList();
          out.push("<ol>");
          listType = "ol";
        }
        out.push("<li>" + inline(line.replace(/^\s*\d+\.\s+/, "")) + "</li>");
        i++;
        continue;
      }

      // paragraph (collect until blank / block start)
      closeList();
      var pbuf = [line];
      i++;
      while (
        i < lines.length &&
        !/^\s*$/.test(lines[i]) &&
        !/^(#{1,6})\s/.test(lines[i]) &&
        !/^>\s?/.test(lines[i]) &&
        !/^```/.test(lines[i]) &&
        !/^\s*[-*+]\s+/.test(lines[i]) &&
        !/^\s*\d+\.\s+/.test(lines[i]) &&
        !/^(-{3,}|\*{3,}|_{3,})\s*$/.test(lines[i])
      ) {
        pbuf.push(lines[i]);
        i++;
      }
      out.push("<p>" + inline(pbuf.join(" ")) + "</p>");
    }

    closeList();
    return out.join("\n");
  }

  /* ── State + render loop ──────────────────────────────── */
  var dirty = false;

  function setDirty(state) {
    if (state === dirty) return;
    dirty = state;
    if (dirty) {
      dirtyBadge.classList.remove("is-clean");
      dirtyBadge.classList.add("is-dirty");
      dirtyLabel.textContent = "Unsaved changes";
    } else {
      dirtyBadge.classList.add("is-clean");
      dirtyBadge.classList.remove("is-dirty");
      dirtyLabel.textContent = "Saved";
    }
  }

  function updatePreview() {
    var md = source.value;
    if (md.trim() === "") {
      preview.innerHTML =
        '<p class="preview-empty">Nothing to preview yet — start writing on the left.</p>';
    } else {
      preview.innerHTML = '<div class="doc">' + render(md) + "</div>";
    }
    updateStats(md);
  }

  function updateStats(md) {
    var text = md
      .replace(/```[\s\S]*?```/g, " ")
      .replace(/[#>*_`\-\[\]()!]/g, " ");
    var words = (text.match(/\b[\w'-]+\b/g) || []).length;
    document.getElementById("stat-words").textContent = words.toLocaleString();
    document.getElementById("stat-chars").textContent = md.length.toLocaleString();
    document.getElementById("stat-read").textContent = Math.max(
      1,
      Math.ceil(words / 200)
    );
  }

  /* ── Toolbar insert / wrap ────────────────────────────── */
  function applyCommand(cmd) {
    var start = source.selectionStart;
    var end = source.selectionEnd;
    var val = source.value;
    var sel = val.slice(start, end);

    function wrap(before, after, placeholder) {
      var content = sel || placeholder || "";
      var insert = before + content + after;
      source.value = val.slice(0, start) + insert + val.slice(end);
      var selStart = start + before.length;
      source.selectionStart = selStart;
      source.selectionEnd = selStart + content.length;
    }

    function linePrefix(prefix, placeholder) {
      // operate on the full lines spanned by the selection
      var lineStart = val.lastIndexOf("\n", start - 1) + 1;
      var lineEnd = val.indexOf("\n", end);
      if (lineEnd === -1) lineEnd = val.length;
      var block = val.slice(lineStart, lineEnd) || placeholder || "";
      var newBlock = block
        .split("\n")
        .map(function (l, idx) {
          var p = typeof prefix === "function" ? prefix(idx) : prefix;
          return p + l;
        })
        .join("\n");
      source.value = val.slice(0, lineStart) + newBlock + val.slice(lineEnd);
      source.selectionStart = lineStart;
      source.selectionEnd = lineStart + newBlock.length;
    }

    switch (cmd) {
      case "bold": wrap("**", "**", "bold text"); break;
      case "italic": wrap("*", "*", "italic text"); break;
      case "code": wrap("`", "`", "code"); break;
      case "h2": linePrefix("## ", "Heading"); break;
      case "h3": linePrefix("### ", "Heading"); break;
      case "quote": linePrefix("> ", "Quote"); break;
      case "ul": linePrefix("- ", "List item"); break;
      case "ol":
        linePrefix(function (idx) { return (idx + 1) + ". "; }, "List item");
        break;
      case "link": {
        var label = sel || "link text";
        var insert = "[" + label + "](https://example.org)";
        source.value = val.slice(0, start) + insert + val.slice(end);
        var urlStart = start + label.length + 3;
        source.selectionStart = urlStart;
        source.selectionEnd = urlStart + "https://example.org".length;
        break;
      }
      case "image": {
        var alt = sel || "alt text";
        var ins = "![" + alt + "](https://example.org/image.png)";
        source.value = val.slice(0, start) + ins + val.slice(end);
        source.selectionStart = source.selectionEnd = start + ins.length;
        break;
      }
      case "codeblock": {
        var body = sel || "code here";
        var pre = (start > 0 && val[start - 1] !== "\n") ? "\n" : "";
        var block = pre + "```\n" + body + "\n```\n";
        source.value = val.slice(0, start) + block + val.slice(end);
        var bStart = start + pre.length + 4;
        source.selectionStart = bStart;
        source.selectionEnd = bStart + body.length;
        break;
      }
    }

    source.focus();
    setDirty(true);
    updatePreview();
  }

  /* ── Synced scroll ────────────────────────────────────── */
  var syncing = false;
  function syncScroll(from, to) {
    if (syncing) return;
    syncing = true;
    var max = from.scrollHeight - from.clientHeight;
    var ratio = max > 0 ? from.scrollTop / max : 0;
    var toMax = to.scrollHeight - to.clientHeight;
    to.scrollTop = ratio * toMax;
    requestAnimationFrame(function () { syncing = false; });
  }

  source.addEventListener("scroll", function () {
    if (panes.dataset.mode === "split") syncScroll(source, preview);
  });
  preview.addEventListener("scroll", function () {
    if (panes.dataset.mode === "split") syncScroll(preview, source);
  });

  /* ── Mode switch ──────────────────────────────────────── */
  var modeBtns = Array.prototype.slice.call(document.querySelectorAll(".mode-btn"));
  function setMode(mode) {
    panes.dataset.mode = mode;
    modeBtns.forEach(function (b) {
      var active = b.dataset.mode === mode;
      b.classList.toggle("is-active", active);
      b.setAttribute("aria-pressed", active ? "true" : "false");
    });
  }
  modeBtns.forEach(function (b) {
    b.addEventListener("click", function () { setMode(b.dataset.mode); });
  });

  /* ── Toolbar wiring ───────────────────────────────────── */
  document.querySelectorAll(".tool").forEach(function (btn) {
    btn.addEventListener("click", function () {
      applyCommand(btn.dataset.cmd);
    });
  });

  /* ── Input + keyboard shortcuts ───────────────────────── */
  source.addEventListener("input", function () {
    setDirty(true);
    updatePreview();
  });

  source.addEventListener("keydown", function (e) {
    var mod = e.ctrlKey || e.metaKey;
    if (!mod) {
      // tab inserts two spaces
      if (e.key === "Tab") {
        e.preventDefault();
        var s = source.selectionStart, en = source.selectionEnd;
        source.value = source.value.slice(0, s) + "  " + source.value.slice(en);
        source.selectionStart = source.selectionEnd = s + 2;
        setDirty(true);
        updatePreview();
      }
      return;
    }
    var map = { b: "bold", i: "italic", k: "link", e: "code" };
    var key = e.key.toLowerCase();
    if (map[key]) {
      e.preventDefault();
      applyCommand(map[key]);
    } else if (key === "s") {
      e.preventDefault();
      saveDraft();
    }
  });

  /* ── Save / publish ───────────────────────────────────── */
  function timeNow() {
    return new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
  }
  function saveDraft() {
    setDirty(false);
    document.getElementById("stat-saved").textContent = "Draft saved at " + timeNow();
    toast("Draft saved");
  }
  function publish() {
    var title = (document.getElementById("meta-title").value || "Untitled").trim();
    setDirty(false);
    document.getElementById("stat-saved").textContent = "Published at " + timeNow();
    toast("Published “" + title + "” ✓");
  }
  document.getElementById("btn-draft").addEventListener("click", saveDraft);
  document.getElementById("btn-publish").addEventListener("click", publish);

  /* metadata edits mark dirty */
  ["meta-title", "meta-summary", "meta-tags"].forEach(function (id) {
    document.getElementById(id).addEventListener("input", function () {
      setDirty(true);
    });
  });

  /* ── Toast helper ─────────────────────────────────────── */
  var toastTimer;
  function toast(msg) {
    toastEl.textContent = msg;
    toastEl.classList.add("show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () {
      toastEl.classList.remove("show");
    }, 2200);
  }

  /* ── Warn on leaving with unsaved changes ─────────────── */
  window.addEventListener("beforeunload", function (e) {
    if (dirty) {
      e.preventDefault();
      e.returnValue = "";
    }
  });

  /* ── Init ─────────────────────────────────────────────── */
  source.value = SEED;
  updatePreview();
  setDirty(false);
  document.getElementById("stat-saved").textContent = "Draft autosaved just now";
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Wiki — Article Editor</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:opsz,[email protected],400;8..60,600;8..60,700&family=JetBrains+Mono:wght@400;500;600&display=swap"
    rel="stylesheet"
  />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <a class="skip-link" href="#editor-main">Skip to editor</a>

  <header class="topbar">
    <div class="brand">
      <span class="brand-mark" aria-hidden="true">V</span>
      <div class="brand-text">
        <strong>Verdant Wiki</strong>
        <span class="brand-sub">Article editor</span>
      </div>
    </div>

    <nav class="crumbs" aria-label="Breadcrumb">
      <a href="#">Articles</a>
      <span aria-hidden="true">/</span>
      <a href="#">Databases</a>
      <span aria-hidden="true">/</span>
      <span aria-current="page">Editing</span>
    </nav>

    <div class="topbar-status">
      <span id="dirty-badge" class="dirty-badge is-clean" role="status" aria-live="polite">
        <span class="dot" aria-hidden="true"></span>
        <span class="dirty-label">Saved</span>
      </span>
    </div>
  </header>

  <section class="metabar" aria-label="Article metadata">
    <label class="field field-title">
      <span class="field-label">Title</span>
      <input
        id="meta-title"
        type="text"
        value="Aurora DB"
        autocomplete="off"
        spellcheck="false"
      />
    </label>
    <label class="field field-summary">
      <span class="field-label">Edit summary</span>
      <input
        id="meta-summary"
        type="text"
        placeholder="Briefly describe your change…"
        value="Expand consistency section, add CLI example"
        autocomplete="off"
      />
    </label>
    <label class="field field-tags">
      <span class="field-label">Tags</span>
      <input
        id="meta-tags"
        type="text"
        value="database, distributed-systems, raft"
        autocomplete="off"
        spellcheck="false"
      />
    </label>
  </section>

  <div class="toolbar" role="toolbar" aria-label="Formatting">
    <div class="tool-group">
      <button class="tool" type="button" data-cmd="bold" title="Bold (Ctrl+B)" aria-keyshortcuts="Control+B">
        <span class="tool-glyph" style="font-weight:800">B</span>
      </button>
      <button class="tool" type="button" data-cmd="italic" title="Italic (Ctrl+I)" aria-keyshortcuts="Control+I">
        <span class="tool-glyph" style="font-style:italic;font-family:'Source Serif 4',serif">I</span>
      </button>
      <button class="tool" type="button" data-cmd="code" title="Inline code (Ctrl+E)" aria-keyshortcuts="Control+E">
        <span class="tool-glyph mono">&lt;/&gt;</span>
      </button>
    </div>

    <span class="tool-sep" aria-hidden="true"></span>

    <div class="tool-group">
      <button class="tool" type="button" data-cmd="h2" title="Heading 2">
        <span class="tool-glyph">H2</span>
      </button>
      <button class="tool" type="button" data-cmd="h3" title="Heading 3">
        <span class="tool-glyph">H3</span>
      </button>
      <button class="tool" type="button" data-cmd="quote" title="Blockquote">
        <span class="tool-glyph">&rdquo;</span>
      </button>
    </div>

    <span class="tool-sep" aria-hidden="true"></span>

    <div class="tool-group">
      <button class="tool" type="button" data-cmd="ul" title="Bulleted list">
        <span class="tool-glyph">&bull;&#8202;&equiv;</span>
      </button>
      <button class="tool" type="button" data-cmd="ol" title="Numbered list">
        <span class="tool-glyph mono">1.</span>
      </button>
      <button class="tool" type="button" data-cmd="link" title="Link (Ctrl+K)" aria-keyshortcuts="Control+K">
        <span class="tool-glyph">&#128279;</span>
      </button>
      <button class="tool" type="button" data-cmd="image" title="Image">
        <span class="tool-glyph">&#128247;</span>
      </button>
      <button class="tool" type="button" data-cmd="codeblock" title="Code block">
        <span class="tool-glyph mono">{ }</span>
      </button>
    </div>

    <div class="toolbar-spacer"></div>

    <div class="mode-switch" role="group" aria-label="View mode">
      <button class="mode-btn" type="button" data-mode="write">Write</button>
      <button class="mode-btn is-active" type="button" data-mode="split" aria-pressed="true">Split</button>
      <button class="mode-btn" type="button" data-mode="preview">Preview</button>
    </div>
  </div>

  <main id="editor-main" class="panes" data-mode="split">
    <section class="pane pane-write" aria-label="Markdown source">
      <div class="pane-head">
        <span class="pane-title">Markdown</span>
        <span class="pane-hint mono">⌘/Ctrl + B · I · K · E</span>
      </div>
      <textarea
        id="source"
        class="source"
        spellcheck="true"
        aria-label="Markdown source"
      ></textarea>
    </section>

    <div class="pane-divider" aria-hidden="true"></div>

    <section class="pane pane-preview" aria-label="Rendered preview">
      <div class="pane-head">
        <span class="pane-title">Preview</span>
        <span class="pane-hint">Live rendered</span>
      </div>
      <article id="preview" class="preview" tabindex="0"></article>
    </section>
  </main>

  <footer class="footer">
    <div class="footer-stats" aria-live="polite">
      <span class="stat"><strong id="stat-words">0</strong> words</span>
      <span class="stat-sep" aria-hidden="true">·</span>
      <span class="stat"><strong id="stat-chars">0</strong> chars</span>
      <span class="stat-sep" aria-hidden="true">·</span>
      <span class="stat"><strong id="stat-read">0</strong> min read</span>
      <span class="stat-sep" aria-hidden="true">·</span>
      <span class="stat" id="stat-saved">Draft autosaved just now</span>
    </div>
    <div class="footer-actions">
      <button id="btn-draft" class="btn btn-ghost" type="button">Save draft</button>
      <button id="btn-publish" class="btn btn-primary" type="button">Publish changes</button>
    </div>
  </footer>

  <div id="toast" class="toast" role="status" aria-live="polite"></div>

  <script src="script.js"></script>
</body>
</html>

Article Editor (markdown + preview)

A functional wiki editor for the fictional Aurora DB article, built in the clean, high-density knowledge-base tradition. A breadcrumb topbar carries the Verdant Wiki mark and a live saved / unsaved-changes badge; below it a metadata bar holds the article title, an edit summary, and a comma-separated tag list. The formatting toolbar groups bold, italic, and inline code, then headings and blockquote, then lists, link, image, and a fenced code block — each button wraps the current selection or prefixes the spanned lines with the right markdown, leaving the inserted text reselected so you can keep typing.

The body is a split pane: a JetBrains Mono source textarea on the left and a live preview on the right, set in a serif face at a generous 1.65 line-height. A small markdown-to-HTML renderer — written from scratch, no libraries — re-parses on every keystroke, handling headings, bold/italic, links and image placeholders, inline and fenced code, blockquotes, ordered and unordered lists, horizontal rules, and paragraphs. The two panes scroll in sync by ratio, and a Write / Split / Preview switch reflows the layout, collapsing to a single column under 820px.

The script wires Ctrl/⌘ + B · I · K · E shortcuts to the toolbar (and S to save), Tab to indent, an unsaved-changes indicator that flips the topbar badge, a live footer with word count, character count, and estimated read time, and Save draft / Publish actions that stamp the footer and fire a toast(). A beforeunload guard warns before discarding unsaved edits.

Illustrative UI only — fictional articles, products, and data.