@mikedown/core 0.1.0 → 0.2.0

package/dist/index.js

@@ -8,6 +8,10 @@ import { TaskList } from "@tiptap/extension-task-list";
 // src/taskitem-drag.ts
 import { TaskItem } from "@tiptap/extension-task-item";
 import { NodeSelection } from "@tiptap/pm/state";
+function taskCheckboxLabel(node) {
+  const text = (node.firstChild?.textContent ?? "").replace(/\s+/g, " ").trim();
+  return text || "Task";
+}
 var DraggableTaskItem = TaskItem.extend({
   draggable: true,
   addNodeView() {
@@ -27,6 +31,7 @@ var DraggableTaskItem = TaskItem.extend({
       const checkbox = document.createElement("input");
       checkbox.type = "checkbox";
       checkbox.checked = !!node.attrs.checked;
+      checkbox.setAttribute("aria-label", taskCheckboxLabel(node));
       const bullet = document.createElement("span");
       label.append(checkbox, bullet);
       const content = document.createElement("div");
@@ -67,6 +72,10 @@ var DraggableTaskItem = TaskItem.extend({
           if (checkbox.checked !== checked) {
             checkbox.checked = checked;
           }
+          const name = taskCheckboxLabel(updated);
+          if (checkbox.getAttribute("aria-label") !== name) {
+            checkbox.setAttribute("aria-label", name);
+          }
           return true;
         },
         // Let the checkbox change event and the handle dragstart run without
@@ -1237,6 +1246,7 @@ function buildDecorations(doc, _view) {
         checkbox.type = "checkbox";
         checkbox.checked = checked;
         checkbox.classList.add("table-checkbox");
+        checkbox.setAttribute("aria-label", "Task done");
         checkbox.addEventListener("mousedown", (e) => {
           e.preventDefault();
           const newText = checked ? "[ ]" : "[x]";
@@ -4415,7 +4425,8 @@ function refreshTableToolbarStates(_editor) {
 }
 function updateTableToolbar(editor) {
   const isInTable = editor.isActive("table");
-  if (!isInTable) {
+  const focusedHere = editor.view.hasFocus() || !!document.activeElement?.closest("#mikedown-table-toolbar");
+  if (!isInTable || !focusedHere) {
     hideTableToolbar();
     return;
   }
@@ -9774,9 +9785,17 @@ function buildActionItem(item) {
       el.classList.add("tdd-active");
     }
   }
+  const disabled = item.isDisabled?.() ?? false;
+  if (disabled) {
+    el.classList.add("tdd-disabled");
+    el.setAttribute("aria-disabled", "true");
+  }
   el.addEventListener("mousedown", (e) => {
     e.preventDefault();
     e.stopPropagation();
+    if (disabled) {
+      return;
+    }
     hideToolbarDropdown();
     item.action();
   });
@@ -9908,6 +9927,54 @@ function handleClickOutside(e) {
   }
 }
 
+// src/toolbar-overflow.ts
+var OVERFLOWED = "toolbar-overflowed";
+function isLaidOut(el) {
+  return !el.hidden && !el.classList.contains(OVERFLOWED) && el.style.display !== "none";
+}
+function rowFits(toolbar) {
+  const children = Array.from(toolbar.children).filter(isLaidOut);
+  const last = children[children.length - 1];
+  if (!last) {
+    return true;
+  }
+  const padRight = parseFloat(getComputedStyle(toolbar).paddingRight) || 0;
+  return last.getBoundingClientRect().right <= toolbar.getBoundingClientRect().right - padRight + 0.5;
+}
+function layoutToolbarOverflow(toolbar) {
+  const more = toolbar.querySelector(":scope > .toolbar-more");
+  if (!more) {
+    return;
+  }
+  const items = Array.from(toolbar.children).filter((el) => el !== more);
+  items.forEach((el) => el.classList.remove(OVERFLOWED));
+  more.hidden = true;
+  if (rowFits(toolbar)) {
+    return;
+  }
+  more.hidden = false;
+  for (let i = items.length - 1; i >= 1; i--) {
+    items[i].classList.add(OVERFLOWED);
+    if (rowFits(toolbar)) {
+      break;
+    }
+  }
+  for (let i = items.length - 1; i >= 1; i--) {
+    const el = items[i];
+    if (!isLaidOut(el)) {
+      continue;
+    }
+    if (!el.classList.contains("toolbar-separator")) {
+      break;
+    }
+    el.classList.add(OVERFLOWED);
+  }
+  const listed = items.some((el) => el.classList.contains(OVERFLOWED) && el.tagName === "BUTTON" && el.style.display !== "none");
+  if (!listed) {
+    more.hidden = true;
+  }
+}
+
 // src/imageSrcPolicy.ts
 var FULLY_QUALIFIED = /^(https?|data|blob):/i;
 function resolveImageRenderSrc(src, host) {
@@ -10231,7 +10298,7 @@ function installWheelZoom(target, opts) {
 function resolveFeatures(partial) {
   return { ...DEFAULT_FEATURES, ...partial ?? {} };
 }
-function buildEditorShell(container, features) {
+function buildEditorShell(container, features, landmark = true) {
   const root = document.createElement("div");
   root.className = "mikedown-root";
   root.setAttribute("data-mikedown-root", "");
@@ -10262,8 +10329,10 @@ function buildEditorShell(container, features) {
   }
   const editorContainer = document.createElement("div");
   editorContainer.className = "mikedown-editor-container";
-  editorContainer.setAttribute("role", "main");
-  editorContainer.setAttribute("aria-label", "Markdown editor");
+  if (landmark) {
+    editorContainer.setAttribute("role", "main");
+    editorContainer.setAttribute("aria-label", "Markdown editor");
+  }
   const sourceContainer = document.createElement("div");
   sourceContainer.className = "mikedown-source-container";
   sourceContainer.style.display = "none";
@@ -10321,7 +10390,7 @@ ${body}`;
 function formatHotkeyChord(chord) {
   return chord.split("+").map((part) => part.length === 1 ? part.toUpperCase() : part.charAt(0).toUpperCase() + part.slice(1)).join("+");
 }
-var toolbarSvg = (d, sw = 1.8) => `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round">${d}</svg>`;
+var toolbarSvg = (d, sw = 1.8) => `<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round">${d}</svg>`;
 var toolbarIcons = {
   bold: toolbarSvg('<path d="M4 2.5h5a3 3 0 0 1 0 6H4zM4 8.5h6a3 3 0 0 1 0 6H4z" fill="none"/>', 2),
   italic: toolbarSvg('<line x1="10" y1="2" x2="6" y2="14"/><line x1="7" y1="2" x2="12" y2="2"/><line x1="4" y1="14" x2="9" y2="14"/>'),
@@ -10341,7 +10410,7 @@ var toolbarIcons = {
   undo: toolbarSvg('<polyline points="4 7 2 5 4 3"/><path d="M2 5h8a4 4 0 0 1 0 8H7"/>'),
   redo: toolbarSvg('<polyline points="12 7 14 5 12 3"/><path d="M14 5H6a4 4 0 0 0 0 8h3"/>'),
   source: toolbarSvg('<polyline points="5 4 2 8 5 12"/><polyline points="11 4 14 8 11 12"/><line x1="9" y1="3" x2="7" y2="13"/>'),
-  gear: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>`,
+  gear: `<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>`,
   diff: toolbarSvg('<path d="M4 3v10"/><path d="M12 3v10"/><path d="M7 5h2" stroke-opacity="0.5"/><path d="M7 8h2"/><path d="M7 11h2" stroke-opacity="0.5"/>'),
   sun: toolbarSvg('<circle cx="8" cy="8" r="3"/><path d="M8 1.5v1.5M8 13v1.5M1.5 8H3M13 8h1.5M3.4 3.4l1.06 1.06M11.54 11.54l1.06 1.06M3.4 12.6l1.06-1.06M11.54 4.46l1.06-1.06"/>'),
   moon: toolbarSvg('<path d="M13.5 8a5.5 5.5 0 0 1-8.38 4.68A5.5 5.5 0 0 1 8 2.5c0 .5.05 1 .16 1.47A4.5 4.5 0 0 0 13.5 8z"/>'),
@@ -10353,6 +10422,7 @@ var toolbarIcons = {
   headingNumbers: toolbarSvg('<text x="8" y="11.5" text-anchor="middle" font-size="8" font-weight="700" fill="currentColor" stroke="none" font-family="sans-serif">1.2</text>', 0),
   zoomIn: toolbarSvg('<circle cx="7" cy="7" r="4.5"/><line x1="10.2" y1="10.2" x2="14" y2="14"/><line x1="5" y1="7" x2="9" y2="7"/><line x1="7" y1="5" x2="7" y2="9"/>'),
   zoomOut: toolbarSvg('<circle cx="7" cy="7" r="4.5"/><line x1="10.2" y1="10.2" x2="14" y2="14"/><line x1="5" y1="7" x2="9" y2="7"/>'),
+  more: toolbarSvg('<circle cx="3.5" cy="8" r="1.2" fill="currentColor" stroke="none"/><circle cx="8" cy="8" r="1.2" fill="currentColor" stroke="none"/><circle cx="12.5" cy="8" r="1.2" fill="currentColor" stroke="none"/>'),
   emoji: toolbarSvg('<circle cx="8" cy="8" r="6"/><circle cx="6" cy="6.5" r="0.6" fill="currentColor" stroke="none"/><circle cx="10" cy="6.5" r="0.6" fill="currentColor" stroke="none"/><path d="M5.5 9.5c.7 1.2 1.7 1.8 2.5 1.8s1.8-.6 2.5-1.8"/>')
 };
 var CALLOUT_KIND_LABEL = {
@@ -10413,7 +10483,18 @@ function createMikeDownEditor(container, options) {
   const host = options.host;
   const hostOwnsShortcuts = options.hostOwnsShortcuts === true;
   const features = resolveFeatures(options.features);
-  const shell = buildEditorShell(container, features);
+  const shell = buildEditorShell(container, features, options.landmark !== false);
+  const surfaceAttrs = {};
+  if (options.id) {
+    surfaceAttrs.id = options.id;
+  }
+  if (options.ariaLabelledBy) {
+    surfaceAttrs["aria-labelledby"] = options.ariaLabelledBy;
+  }
+  surfaceAttrs["aria-label"] = options.ariaLabel || (options.ariaLabelledBy ? "" : "Document text");
+  if (!surfaceAttrs["aria-label"]) {
+    delete surfaceAttrs["aria-label"];
+  }
   const { root, editorContainer, sourceContainer } = shell;
   const disposers = [];
   function listen(target, type, fn, opts) {
@@ -11721,6 +11802,9 @@ function createMikeDownEditor(container, options) {
     if (btn) {
       btn.style.display = mode === "off" ? "none" : "";
     }
+    if (shell.toolbar) {
+      layoutToolbarOverflow(shell.toolbar);
+    }
   }
   let sidebarFooterLink = null;
   let outlineSidebar = null;
@@ -11930,13 +12014,21 @@ function createMikeDownEditor(container, options) {
       sep.setAttribute("role", "separator");
       return sep;
     }
+    const overflowOpeners = /* @__PURE__ */ new Map();
+    function wireDropdown(btn, open) {
+      overflowOpeners.set(btn, open);
+      btn.addEventListener("click", () => {
+        if (isToolbarDropdownOpen()) {
+          hideToolbarDropdown();
+          return;
+        }
+        open(btn);
+      });
+    }
     const textFormatBtn = makeDropdownTrigger("textFormat", "Text Format", getBlockLabel());
-    textFormatBtn.addEventListener("click", () => {
-      if (isToolbarDropdownOpen()) {
-        hideToolbarDropdown();
-        return;
-      }
-      showToolbarDropdown(textFormatBtn, [
+    textFormatBtn.setAttribute("aria-label", `${getBlockLabel()} Text Format`);
+    wireDropdown(textFormatBtn, (anchor) => {
+      showToolbarDropdown(anchor, [
         { type: "action", id: "h1", label: "Heading 1", icon: '<span style="font-weight:700;font-size:14px">H1</span>', isActive: () => editor2.isActive("heading", { level: 1 }), action: () => editor2.chain().focus().toggleHeading({ level: 1 }).run() },
         { type: "action", id: "h2", label: "Heading 2", icon: '<span style="font-weight:600;font-size:13px">H2</span>', isActive: () => editor2.isActive("heading", { level: 2 }), action: () => editor2.chain().focus().toggleHeading({ level: 2 }).run() },
         { type: "action", id: "h3", label: "Heading 3", icon: '<span style="font-weight:500;font-size:12px">H3</span>', isActive: () => editor2.isActive("heading", { level: 3 }), action: () => editor2.chain().focus().toggleHeading({ level: 3 }).run() },
@@ -11955,12 +12047,8 @@ function createMikeDownEditor(container, options) {
       ]);
     });
     const listBlockBtn = makeDropdownTrigger("listBlock", "Lists & Blocks", icons.ul);
-    listBlockBtn.addEventListener("click", () => {
-      if (isToolbarDropdownOpen()) {
-        hideToolbarDropdown();
-        return;
-      }
-      showToolbarDropdown(listBlockBtn, [
+    wireDropdown(listBlockBtn, (anchor) => {
+      showToolbarDropdown(anchor, [
         { type: "action", id: "bulletList", label: "Bullet List", icon: icons.ul, isActive: () => editor2.isActive("bulletList"), action: () => editor2.chain().focus().toggleBulletList().run() },
         { type: "action", id: "orderedList", label: "Ordered List", icon: icons.ol, isActive: () => editor2.isActive("orderedList"), action: () => editor2.chain().focus().toggleOrderedList().run() },
         { type: "action", id: "taskList", label: "Task List", icon: icons.task, isActive: () => editor2.isActive("taskList"), action: () => editor2.chain().focus().toggleTaskList().run() },
@@ -11984,14 +12072,10 @@ function createMikeDownEditor(container, options) {
     const linkBtn = makeBtn("link", "Insert Link (Cmd+K)", icons.link);
     linkBtn.addEventListener("click", () => showLinkDialog(editor2));
     const insertBtn = makeDropdownTrigger("insert", "Insert", icons.image);
-    insertBtn.addEventListener("click", () => {
-      if (isToolbarDropdownOpen()) {
-        hideToolbarDropdown();
-        return;
-      }
-      showToolbarDropdown(insertBtn, [
+    wireDropdown(insertBtn, (anchor) => {
+      showToolbarDropdown(anchor, [
         { type: "action", id: "image", label: "Image", icon: icons.image, action: () => showImageInsertDialog(editor2) },
-        { type: "action", id: "table", label: "Table", icon: icons.table, isActive: () => editor2.isActive("table"), action: () => showTableGridPicker(editor2, insertBtn) },
+        { type: "action", id: "table", label: "Table", icon: icons.table, isActive: () => editor2.isActive("table"), action: () => showTableGridPicker(editor2, anchor) },
         { type: "action", id: "hr", label: "Horizontal Rule", icon: icons.hr, action: () => editor2.chain().focus().setHorizontalRule().run() }
       ]);
     });
@@ -12002,12 +12086,8 @@ function createMikeDownEditor(container, options) {
     const sourceBtn = makeBtn("sourceToggle", "Toggle Source Mode (Cmd+/)", icons.source);
     sourceBtn.addEventListener("click", () => toggleSourceMode());
     const shareBtn = makeDropdownTrigger("share", "Share", icons.share);
-    shareBtn.addEventListener("click", () => {
-      if (isToolbarDropdownOpen()) {
-        hideToolbarDropdown();
-        return;
-      }
-      showToolbarDropdown(shareBtn, [
+    wireDropdown(shareBtn, (anchor) => {
+      showToolbarDropdown(anchor, [
         ...host.viewInBrowser ? [{ type: "action", id: "viewInBrowser", label: "View in Browser", icon: icons.browser, action: () => {
           host.viewInBrowser?.(getHtml());
         } }] : [],
@@ -12183,12 +12263,65 @@ function createMikeDownEditor(container, options) {
     headingNumbersBtn.style.display = currentHeadingNumbering === "off" ? "none" : "";
     const emojiBtn = makeBtn("emoji", "Insert Emoji (Cmd+;)", icons.emoji);
     emojiBtn.addEventListener("mousedown", (e) => e.preventDefault());
-    emojiBtn.addEventListener("click", () => {
+    const openEmoji = (anchor) => {
       if (isEmojiPickerOpen()) {
         hideEmojiPicker();
         return;
       }
-      showEmojiPicker(editor2, { anchorRect: emojiBtn.getBoundingClientRect() });
+      showEmojiPicker(editor2, { anchorRect: anchor.getBoundingClientRect() });
+    };
+    overflowOpeners.set(emojiBtn, openEmoji);
+    emojiBtn.addEventListener("click", () => openEmoji(emojiBtn));
+    const moreBtn = makeBtn("more", "More", icons.more);
+    moreBtn.classList.add("toolbar-more");
+    moreBtn.setAttribute("aria-haspopup", "menu");
+    moreBtn.hidden = true;
+    moreBtn.addEventListener("mousedown", (e) => e.preventDefault());
+    moreBtn.addEventListener("click", () => {
+      if (isToolbarDropdownOpen()) {
+        hideToolbarDropdown();
+        return;
+      }
+      const entries = [];
+      for (const el of Array.from(toolbar.children)) {
+        if (!el.classList.contains("toolbar-overflowed")) {
+          continue;
+        }
+        if (el.classList.contains("toolbar-separator")) {
+          if (entries.length && entries[entries.length - 1].type !== "separator") {
+            entries.push({ type: "separator" });
+          }
+          continue;
+        }
+        if (!(el instanceof HTMLButtonElement) || el.style.display === "none") {
+          continue;
+        }
+        const btn = el;
+        const svg2 = btn.querySelector("svg");
+        const opener = overflowOpeners.get(btn);
+        entries.push({
+          type: "action",
+          id: `more-${btn.dataset.action ?? ""}`,
+          label: btn.dataset.menuLabel ?? btn.dataset.tip ?? btn.getAttribute("aria-label") ?? "",
+          // An empty icon slot keeps text-only entries (the size readout) aligned.
+          icon: svg2 ? svg2.outerHTML : '<span aria-hidden="true"></span>',
+          isActive: () => btn.classList.contains("active"),
+          isDisabled: () => btn.disabled,
+          action: () => {
+            if (opener) {
+              opener(moreBtn);
+            } else {
+              btn.click();
+            }
+          }
+        });
+      }
+      while (entries.length && entries[entries.length - 1].type === "separator") {
+        entries.pop();
+      }
+      if (entries.length) {
+        showToolbarDropdown(moreBtn, entries);
+      }
     });
     toolbar.appendChild(textFormatBtn);
     toolbar.appendChild(listBlockBtn);
@@ -12216,11 +12349,27 @@ function createMikeDownEditor(container, options) {
     toolbar.appendChild(makeSeparator());
     toolbar.appendChild(themeBtn);
     toolbar.appendChild(settingsBtn);
+    toolbar.appendChild(moreBtn);
+    if (typeof ResizeObserver !== "undefined") {
+      let frame = 0;
+      const ro = new ResizeObserver(() => {
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(() => layoutToolbarOverflow(toolbar));
+      });
+      ro.observe(toolbar);
+      disposers.push(() => {
+        cancelAnimationFrame(frame);
+        ro.disconnect();
+      });
+    }
+    layoutToolbarOverflow(toolbar);
     toolbar.__condensedUpdate = () => {
       const labelEl = textFormatBtn.querySelector(".condensed-btn-label");
-      if (labelEl) {
-        labelEl.innerHTML = getBlockLabel();
+      const blockLabel = getBlockLabel();
+      if (labelEl && labelEl.innerHTML !== blockLabel) {
+        labelEl.innerHTML = blockLabel;
       }
+      textFormatBtn.setAttribute("aria-label", `${blockLabel} Text Format`);
       textFormatBtn.classList.toggle("active", isTextFormatActive());
       listBlockBtn.classList.toggle("active", isBlockActive());
       linkBtn.classList.toggle("active", editor2.isActive("link"));
@@ -12239,10 +12388,15 @@ function createMikeDownEditor(container, options) {
     const size = currentFontSize();
     const resetBtn = toolbar.querySelector('button[data-action="zoomReset"]');
     if (resetBtn) {
+      const sizeChanged = resetBtn.textContent !== String(size);
       resetBtn.textContent = String(size);
+      resetBtn.dataset.menuLabel = `Reset Font Size (${size}px)`;
       const tip = `Font size ${size}px (click to reset to ${DEFAULT_FONT_SIZE}px)`;
       resetBtn.dataset.tip = tip;
-      resetBtn.setAttribute("aria-label", tip);
+      resetBtn.setAttribute("aria-label", `${size} px font size (click to reset to ${DEFAULT_FONT_SIZE}px)`);
+      if (sizeChanged && resetBtn.isConnected) {
+        layoutToolbarOverflow(toolbar);
+      }
     }
     const outBtn = toolbar.querySelector('button[data-action="zoomOut"]');
     if (outBtn) {
@@ -12624,7 +12778,7 @@ function createMikeDownEditor(container, options) {
       // dispatching a no-op transaction (tr.setMeta('slashPlaceholder', true))
       // rather than touching editor.view.dom directly.
       Placeholder.configure({
-        placeholder: () => features.slashCommands && currentSlashCommandsEnabled ? "Type / for commands\u2026" : "Start writing\u2026"
+        placeholder: () => options.placeholder ?? (features.slashCommands && currentSlashCommandsEnabled ? "Type / for commands\u2026" : "Start writing\u2026")
       }),
       // ── Markdown serialiser / input rules (M2b / M2c) ─────────────────────────
       // tiptap-markdown provides:
@@ -12724,7 +12878,7 @@ function createMikeDownEditor(container, options) {
     // ── Keyboard shortcuts ──────────────────────────────────────────────────────
     editorProps: {
       // axe aria-input-field-name: the contenteditable textbox needs an accessible name.
-      attributes: { "aria-label": "Document text", "aria-multiline": "true" },
+      attributes: { ...surfaceAttrs, role: "textbox", "aria-multiline": "true" },
       handleKeyDown(view, event) {
         if (features.findReplace && (event.metaKey || event.ctrlKey) && event.key === "f") {
           event.preventDefault();
@@ -12964,6 +13118,7 @@ function createMikeDownEditor(container, options) {
     const { from, to } = editor.state.selection;
     postStats({ selection: from === to ? null : editor.state.doc.textBetween(from, to, "\n") });
   });
+  editor.on("focus", () => updateTableToolbar(editor));
   editor.on("blur", () => {
     setTimeout(() => {
       if (!document.activeElement?.closest("#mikedown-table-toolbar")) {
@@ -14106,6 +14261,7 @@ function createMikeDownEditor(container, options) {
         buildCmTheme(),
         cmReadOnly.of(EditorState3.readOnly.of(readOnly)),
         EditorView2.lineWrapping,
+        EditorView2.contentAttributes.of(options.id || options.ariaLabel || options.ariaLabelledBy ? { ...surfaceAttrs, "aria-multiline": "true" } : {}),
         EditorView2.updateListener.of((update2) => {
           if (update2.docChanged && !cmLoading) {
             const md = update2.state.doc.toString();
@@ -15047,9 +15203,224 @@ var NoopHost = class {
   onChange(_markdown, _meta) {
   }
 };
+
+// src/binding.ts
+function selectorAttributes(selector) {
+  const names = /* @__PURE__ */ new Set();
+  if (/\.[\w-]+/.test(selector)) {
+    names.add("class");
+  }
+  if (/#[\w-]+/.test(selector)) {
+    names.add("id");
+  }
+  for (const m of selector.matchAll(/\[\s*([\w:-]+)/g)) {
+    if (m[1]) {
+      names.add(m[1]);
+    }
+  }
+  return names.size ? [...names] : void 0;
+}
+function bindMikeDownValue(container, options = {}) {
+  const {
+    initialValue = "",
+    debounceMs = 150,
+    onValue,
+    onTouched,
+    disabled: initialDisabled = false,
+    theme: initialTheme = "auto",
+    darkSelector,
+    outputTransform,
+    host: hostOverrides,
+    ...editorOptions
+  } = options;
+  const out = (md) => outputTransform ? outputTransform(md) : md;
+  let destroyed = false;
+  let timer;
+  let pending = null;
+  let lastValue = out(initialValue);
+  let theme = initialTheme;
+  let readOnly = editorOptions.readOnly === true;
+  let disabled = initialDisabled;
+  const flush = () => {
+    if (timer !== void 0) {
+      clearTimeout(timer);
+      timer = void 0;
+    }
+    if (pending === null) {
+      return;
+    }
+    const value = out(pending);
+    pending = null;
+    if (value === lastValue) {
+      return;
+    }
+    lastValue = value;
+    onValue?.(value);
+  };
+  let labelEl = null;
+  let ariaLabelledBy = editorOptions.ariaLabelledBy;
+  if (editorOptions.id && !ariaLabelledBy) {
+    const root = container.getRootNode();
+    const escaped = typeof CSS !== "undefined" && CSS.escape ? CSS.escape(editorOptions.id) : editorOptions.id;
+    labelEl = root.querySelector?.(`label[for="${escaped}"]`) ?? null;
+    if (labelEl) {
+      if (!labelEl.id) {
+        labelEl.id = `${editorOptions.id}-label`;
+      }
+      ariaLabelledBy = labelEl.id;
+    }
+  }
+  const isDarkNow = () => {
+    if (darkSelector) {
+      try {
+        return !!container.closest(darkSelector);
+      } catch {
+        return false;
+      }
+    }
+    return window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false;
+  };
+  const resolve = (t) => t === "auto" ? isDarkNow() ? "dark" : "light" : t;
+  const handle = createMikeDownEditor(container, {
+    ...editorOptions,
+    ariaLabelledBy,
+    landmark: editorOptions.landmark ?? false,
+    readOnly: readOnly || disabled,
+    initialMarkdown: initialValue,
+    theme: resolve(theme),
+    host: {
+      ...hostOverrides,
+      onChange: (md, meta) => {
+        hostOverrides?.onChange?.(md, meta);
+        if (destroyed) {
+          return;
+        }
+        pending = md;
+        if (debounceMs <= 0) {
+          flush();
+          return;
+        }
+        if (timer !== void 0) {
+          clearTimeout(timer);
+        }
+        timer = setTimeout(flush, debounceMs);
+      }
+    }
+  });
+  const unBlur = handle.on("blur", flush);
+  let observer = null;
+  let mql = null;
+  let applied = resolve(theme);
+  const applyTheme = () => {
+    if (destroyed) {
+      return;
+    }
+    const next = resolve(theme);
+    if (next === applied) {
+      return;
+    }
+    applied = next;
+    handle.setTheme(next);
+  };
+  const stopFollowing = () => {
+    observer?.disconnect();
+    observer = null;
+    mql?.removeEventListener?.("change", applyTheme);
+    mql = null;
+  };
+  const startFollowing = () => {
+    stopFollowing();
+    if (theme !== "auto") {
+      return;
+    }
+    if (darkSelector) {
+      if (typeof MutationObserver === "undefined") {
+        return;
+      }
+      const attributeFilter = selectorAttributes(darkSelector);
+      observer = new MutationObserver(applyTheme);
+      observer.observe(container.ownerDocument.documentElement, {
+        attributes: true,
+        subtree: true,
+        ...attributeFilter ? { attributeFilter } : {}
+      });
+    } else if (window.matchMedia) {
+      mql = window.matchMedia("(prefers-color-scheme: dark)");
+      mql.addEventListener?.("change", applyTheme);
+    }
+  };
+  startFollowing();
+  const onFocusOut = (event) => {
+    const next = event.relatedTarget;
+    if (next && container.contains(next)) {
+      return;
+    }
+    if (next instanceof Element && next.closest(".mikedown-portal")) {
+      return;
+    }
+    flush();
+    onTouched?.();
+  };
+  container.addEventListener("focusout", onFocusOut);
+  const onLabelClick = () => handle.focus();
+  labelEl?.addEventListener("click", onLabelClick);
+  return {
+    handle,
+    setValue(markdown) {
+      if (destroyed) {
+        return;
+      }
+      if (timer !== void 0) {
+        clearTimeout(timer);
+        timer = void 0;
+      }
+      pending = null;
+      lastValue = markdown;
+      if (markdown === out(handle.getMarkdown())) {
+        return;
+      }
+      handle.setMarkdown(markdown, { pristine: true });
+    },
+    flush,
+    setTheme(next) {
+      theme = next;
+      if (!destroyed) {
+        applied = resolve(theme);
+        handle.setTheme(applied);
+      }
+      startFollowing();
+    },
+    setReadOnly(next) {
+      readOnly = next;
+      if (!destroyed) {
+        handle.setReadOnly(readOnly || disabled);
+      }
+    },
+    setDisabled(next) {
+      disabled = next;
+      if (!destroyed) {
+        handle.setReadOnly(readOnly || disabled);
+      }
+    },
+    focus: () => handle.focus(),
+    destroy() {
+      if (destroyed) {
+        return;
+      }
+      flush();
+      destroyed = true;
+      stopFollowing();
+      unBlur();
+      container.removeEventListener("focusout", onFocusOut);
+      labelEl?.removeEventListener("click", onLabelClick);
+      handle.destroy();
+    }
+  };
+}
 export {
   DEFAULT_FEATURES,
   NoopHost,
+  bindMikeDownValue,
   createMikeDownEditor
 };
 //# sourceMappingURL=index.js.map