@rigel-cms/rigel 1.0.0 → 1.1.0

package/src/editor/lib/BlockEditor.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import { t } from "../i18n";
+  import { subscribeMediaLabels } from "./embed-preview";
+  import { slashCommand } from "./slash-command";
   import { onMount, tick, untrack } from "svelte";
   import * as L from "lexical";
   import * as Rich from "@lexical/rich-text";
@@ -9,6 +12,10 @@
   import { ImageNode, type ImageData } from "../blocks/image";
   import { VideoNode, type VideoData } from "../blocks/video";
   import { EmbedNode, type EmbedData } from "../blocks/embed";
+  import { ExtensionNode, cloneBlockData } from "../blocks/extension";
+  import { extensionRegistry, extensionBlock, registerExtensionNodes } from "./extension-preview";
+  import { resolveExtensions, type ExtensionCommand, type ExtensionContext, type ExtensionSelection } from "../../extensions";
+  import extensionModules from "virtual:rigel-extensions";
   import ImagePicker from "./ImagePicker.svelte";
   import MediaPicker from "./MediaPicker.svelte";
   import type { StockResult } from "./images";
@@ -35,11 +42,26 @@
   let last = untrack(() => JSON.stringify(value));
   let received = last;
   let error = $state("");
+  let extensionError = $state("");
+  let extensionBusy = $state(false);
+  let extensionDisposed = false;
+  let extensionRevision = 0;
+  const extensionCommands = Object.values(extensionRegistry.commands);
+  const toolbarCommands = extensionCommands.filter(command => command.toolbar === true || (command.group && command.toolbar !== false));
+  const toolbarGroups = resolveExtensions(extensionModules).groups.map(group => ({ ...group, commands: toolbarCommands.filter(command => command.group === group.name) })).filter(group => group.commands.length);
+  let extensionMenu: HTMLDivElement;
+  let extensionTrigger = $state<HTMLButtonElement>();
+  let clickedExtensionTrigger: HTMLButtonElement;
+  let extensionGroup = $state("");
+  let extensionPosition = $state("");
+  const activeExtensionGroup = $derived(toolbarGroups.find(group => group.name === extensionGroup));
+
   let markdownView = $state(false);
   let activeKey = $state("");
   let hoverKey = $state("");
   let insertion = $state<{ after: string; top: number; left: number } | null>(null);
   let blockType = $state("paragraph");
+  let canInsertBlock = $state(false);
   let listType = $state("");
   let handleTop = $state(0);
   let handleLeft = $state(0);
@@ -67,20 +89,21 @@
   let embedData = $state<EmbedData | null>(null);
   let videoData = $state<VideoData | null>(null);
   const selectedVideo = $derived(embedData ?? videoData);
+  const extensionOnly = $derived((!!selectedVideo || blockType === "extension") && toolbarCommands.length > 0);
   let altOpen = $state(false);
   let altText = $state("");
   let altKey = "";
   let altInput: HTMLInputElement;
   const id = $props.id();
   const marks = [
-    { type: "bold", icon: "textB", label: "Bold" },
-    { type: "italic", icon: "textItalic", label: "Italic" },
-    { type: "code", icon: "code", label: "Inline code" },
-    { type: "strikethrough", icon: "textStrikethrough", label: "Strikethrough" },
-    { type: "underline", icon: "textUnderline", label: "Underline" },
-    { type: "highlight", icon: "highlighter", label: "Highlight" },
-    { type: "subscript", icon: "textSubscript", label: "Subscript" },
-    { type: "superscript", icon: "textSuperscript", label: "Superscript" },
+    { type: "bold", icon: "textB", label: "richtext.bold" },
+    { type: "italic", icon: "textItalic", label: "richtext.italic" },
+    { type: "code", icon: "code", label: "richtext.inlineCode" },
+    { type: "strikethrough", icon: "textStrikethrough", label: "richtext.strikethrough" },
+    { type: "underline", icon: "textUnderline", label: "richtext.underline" },
+    { type: "highlight", icon: "highlighter", label: "richtext.highlight" },
+    { type: "subscript", icon: "textSubscript", label: "richtext.subscript" },
+    { type: "superscript", icon: "textSuperscript", label: "richtext.superscript" },
   ] as const;
   let activeMarks = $state<string[]>([]);
   let canUndo = $state(false);
@@ -89,10 +112,11 @@
   let tableRows = $state(0);
   let tableColumns = $state(0);
   let tableHeader = $state(false);
-  const mediaTypes = [{ value: "video", label: "Video" }, { value: "youtube", label: "YouTube" }, { value: "vimeo", label: "Vimeo" }] as const;
-  const choices = $derived([...blockTypes, ...mediaTypes].filter(block => block.label.toLowerCase().includes((slash ?? "").toLowerCase())));
-  const textBlocks = blockTypes.filter(block => !["image", "table", "bullet", "number"].includes(block.value));
-  const activeBlock = $derived(blockTypes.find(block => block.value === blockType));
+  const mediaTypes = [{ value: "video", label: "richtext.video" }, { value: "youtube", label: "richtext.youtube" }, { value: "vimeo", label: "richtext.vimeo" }] as const;
+  const localizedBlocks = $derived.by(() => { $t; return blockTypes.map(block => ({ ...block })); });
+  const choices = $derived([...localizedBlocks, ...mediaTypes.map(block => ({ ...block, label: $t(block.label) })), ...extensionCommands.filter(command => command.slash).map(command => ({ value: `extension:${command.name}`, label: command.label, keyword: command.slash }))].filter(block => `${block.label} ${"keyword" in block ? block.keyword : ""}`.toLowerCase().includes((slash ?? "").toLowerCase())));
+  const textBlocks = $derived(localizedBlocks.filter(block => !["image", "table", "bullet", "number"].includes(block.value)));
+  const activeBlock = $derived(localizedBlocks.find(block => block.value === blockType));
 
   function topBlock(node: L.LexicalNode | null) {
     if (!node || L.$isRootNode(node)) return null;
@@ -108,6 +132,7 @@
       const anchor = L.$isRangeSelection(selection) || Tables.$isTableSelection(selection) ? selection.anchor.getNode() : null;
       listType = anchor ? [anchor, ...anchor.getParents()].find(Lists.$isListNode)?.getListType() ?? "" : "";
       const node = anchor ? topBlock(anchor) : L.$isNodeSelection(selection) ? topBlock(selection.getNodes()[0]) : null;
+      canInsertBlock = L.$isRangeSelection(selection) && selection.isCollapsed() && L.$isElementNode(node) && !Tables.$isTableNode(node) && node.getTextContentSize() === 0;
       tableCell = anchor ? Tables.$getTableCellNodeFromLexicalNode(anchor)?.getKey() ?? "" : "";
       if (Tables.$isTableNode(node)) {
         tableRows = node.getChildrenSize(); tableColumns = node.getColumnCount();
@@ -121,7 +146,7 @@
         blockType = Rich.$isHeadingNode(node) ? node.getTag() : Lists.$isListNode(node) ? node.getListType() : node.getType();
         activeMarks = L.$isRangeSelection(selection) ? marks.filter(mark => selection.hasFormat(mark.type)).map(mark => mark.type) : [];
         const text = node.getTextContent();
-        const match = node.getType() === "paragraph" && L.$isRangeSelection(selection) && selection.isCollapsed() ? text.match(/^\/([\w ]*)$/) : null;
+        const match = node.getType() === "paragraph" && L.$isRangeSelection(selection) && selection.isCollapsed() ? text.match(slashCommand) : null;
         const signature = node.getKey() + text;
         if (match && signature !== slashDismissed) { if (slash !== match[1]) slashIndex = 0; slash = match[1]; slashKey = node.getKey(); adding = false; }
         else if (!adding) slash = null;
@@ -140,13 +165,13 @@
     const selection = view.getSelection();
     if (!root.ownerDocument.hasFocus()) { floating = ""; return; }
     if (editorHost.contains(root.ownerDocument.activeElement) && !root.contains(root.ownerDocument.activeElement)) return;
-    if (inline || imageData || selectedVideo) {
-      if (imageData || selectedVideo ? root.ownerDocument.activeElement !== root : !selection?.rangeCount || !root.contains(selection.anchorNode) || !root.contains(selection.focusNode)) { floating = ""; return; }
+    if (inline || imageData || selectedVideo || extensionOnly) {
+      if (imageData || selectedVideo || extensionOnly ? !root.contains(root.ownerDocument.activeElement) : !selection?.rangeCount || !root.contains(selection.anchorNode) || !root.contains(selection.focusNode)) { floating = ""; return; }
       const block = editor.getElementByKey(activeKey);
       if (!block) { floating = ""; return; }
-      const rect = imageData || selectedVideo || selection!.isCollapsed ? block.getBoundingClientRect() : selection!.getRangeAt(0).getBoundingClientRect();
+      const rect = imageData || selectedVideo || extensionOnly || selection!.isCollapsed ? block.getBoundingClientRect() : selection!.getRangeAt(0).getBoundingClientRect();
       if (rect.bottom < 0 || rect.top > view.innerHeight) { floating = ""; return; }
-      if (selectedVideo) { floating = ""; return; }
+      if (selectedVideo && !toolbarCommands.length) { floating = ""; return; }
       const toolbarRect = editorHost.querySelector(imageData ? '.image-toolbar' : '.body-toolbar')?.getBoundingClientRect();
       const toolbarHeight = toolbarRect?.height || 42, toolbarWidth = toolbarRect?.width || 330;
       const top = rect.top >= toolbarHeight + 12 ? rect.top - toolbarHeight - 8 : rect.bottom + 8;
@@ -178,7 +203,7 @@
   onMount(() => {
     if (editableRoot) {
       root = editableRoot; root.classList.add("block-content", "rigel-article-content"); root.contentEditable = "true";
-      root.setAttribute("role", "textbox"); root.setAttribute("aria-label", "Body"); root.setAttribute("aria-multiline", "true");
+      root.setAttribute("role", "textbox"); root.setAttribute("aria-label", $t("richtext.body")); root.setAttribute("aria-multiline", "true");
       root.setAttribute("aria-keyshortcuts", "Alt+F10");
     }
     view = root.ownerDocument.defaultView!;
@@ -188,9 +213,9 @@
     editor.setRootElement(root);
     if (inline) { root.style.whiteSpace = whiteSpace; root.style.wordBreak = wordBreak; }
     Tables.setScrollableTablesActive(editor, true);
-    try { validateBody(value); const state = editor.parseEditorState(JSON.stringify(value)); last = JSON.stringify(state.toJSON()); editor.setEditorState(state); }
-    catch (cause) { error = cause instanceof Error ? cause.message : "Unable to load article"; editor.setEditable(false); }
-    const cleanups = [Rich.registerRichText(editor), Lists.registerList(editor), registerHistory(editor, createEmptyHistoryState(), 300)];
+    try { validateBody(value, $t); const state = editor.parseEditorState(JSON.stringify(value)); last = JSON.stringify(state.toJSON()); editor.setEditorState(state); }
+    catch (cause) { error = cause instanceof Error ? cause.message : $t("richtext.loadArticleError"); editor.setEditable(false); }
+    const cleanups = [subscribeMediaLabels(root), registerExtensionNodes(editor), Rich.registerRichText(editor), Lists.registerList(editor), registerHistory(editor, createEmptyHistoryState(), 300)];
     root.contentEditable = String(editor.isEditable());
     cleanups.push(editor.registerEditableListener(editable => { root.contentEditable = String(editable); }));
     cleanups.push(Tables.registerTablePlugin(editor), Tables.registerTableSelectionObserver(editor, true));
@@ -211,15 +236,16 @@
       refresh();
       if (dirtyElements.size || dirtyLeaves.size) {
         const next = editorState.toJSON(), serialized = JSON.stringify(next);
-        if (serialized !== last) { last = serialized; received = serialized; oninput(next); }
+        if (serialized !== last) { extensionRevision++; last = serialized; received = serialized; oninput(next); }
       }
     });
     refresh();
-    const position = () => { positionHandle(); positionFloating(); positionInsertion(); };
+    const position = () => { positionHandle(); positionFloating(); positionInsertion(); positionExtensionMenu(); };
     const toolbarObserver = new ResizeObserver(() => { positionFloating(); positionInsertion(); });
     editorHost.querySelectorAll('.body-toolbar').forEach(toolbar => toolbarObserver.observe(toolbar));
     toolbarObserver.observe(root);
     const outside = (event: PointerEvent) => {
+      if (extensionMenu?.matches(":popover-open") && !extensionMenu.contains(event.target as Node) && !extensionTrigger?.contains(event.target as Node)) closeMenu();
       if (linkOpen && !editorHost.querySelector('.markdown-link')?.contains(event.target as Node)) linkOpen = false;
       if ((inline || imageData || selectedVideo) && !root.contains(event.target as Node) && !editorHost.contains(event.target as Node)) { floating = ""; linkOpen = false; altOpen = false; closeMenu(); }
       if (slash !== null && !slashMenu?.contains(event.target as Node) && !root.contains(event.target as Node) && !(event.target as Element).closest('.block-add')) dismissSlash();
@@ -229,10 +255,17 @@
     view.addEventListener("pointerdown", outside, true); view.addEventListener("keydown", escape);
     if (root.ownerDocument !== document) document.addEventListener("pointerdown", outside, true);
     view.addEventListener("blur", positionFloating);
+    const extensionFailure = (event: Event) => { extensionError = (event as CustomEvent<string>).detail; };
+    const extensionTeardown = () => { extensionDisposed = true; };
+    root.addEventListener("rigel-extension-error", extensionFailure);
+    view.addEventListener("pagehide", extensionTeardown);
     root.addEventListener("pointerdown", contentClick); root.addEventListener("click", contentClick);
     root.addEventListener("pointerleave", leaveInsertion);
     if (inline) view.addEventListener("pointermove", hover);
     return () => {
+      extensionDisposed = true;
+      root.removeEventListener("rigel-extension-error", extensionFailure);
+      view.removeEventListener("pagehide", extensionTeardown);
       toolbarObserver?.disconnect();
       view.CSS.highlights?.delete("rigel-link-selection");
       view.removeEventListener("resize", position); view.removeEventListener("scroll", position, true);
@@ -241,17 +274,19 @@
       root.removeEventListener("pointerdown", contentClick); root.removeEventListener("click", contentClick);
       root.removeEventListener("pointerleave", leaveInsertion);
       if (inline) view.removeEventListener("pointermove", hover);
-      endDrag(true); updates(); cleanups.forEach(cleanup => cleanup()); editor.setRootElement(null);
+      closeMenu(); endDrag(true); updates(); cleanups.forEach(cleanup => cleanup()); editor.setRootElement(null);
     };
   });
 
+  $effect(() => { if (editableRoot) editableRoot.setAttribute("aria-label", $t("richtext.body")); });
+
   $effect(() => { if (!linkOpen) view?.CSS.highlights?.delete("rigel-link-selection"); });
 
   $effect(() => {
     const serialized = JSON.stringify(value);
     if (editor && serialized !== received) {
-      try { validateBody(value); received = serialized; const state = editor.parseEditorState(serialized); last = JSON.stringify(state.toJSON()); editor.setEditorState(state); }
-      catch (cause) { error = cause instanceof Error ? cause.message : "Unable to load article"; }
+      try { validateBody(value, $t); extensionRevision++; received = serialized; const state = editor.parseEditorState(serialized); last = JSON.stringify(state.toJSON()); editor.setEditorState(state); }
+      catch (cause) { error = cause instanceof Error ? cause.message : $t("richtext.loadArticleError"); }
     }
   });
 
@@ -276,13 +311,18 @@
   }
   async function addBlock() {
     slashKey = activeKey; adding = true; slash = ""; slashIndex = 0;
-    await tick(); editorHost.querySelector<HTMLInputElement>('[aria-label="Find a block"]')?.focus();
+    await tick(); slashMenu.querySelector<HTMLInputElement>('input')?.focus();
   }
   function inlineNodes(node: L.LexicalNode): L.LexicalNode[] {
     if (!L.$isElementNode(node)) return node.getTextContent() ? [L.$createTextNode(node.getTextContent())] : [];
     return node.getChildren().flatMap(child => L.$isElementNode(child) && !child.isInline() ? [...inlineNodes(child), L.$createLineBreakNode()] : [child]);
   }
   function changeBlock(type: string, fromSlash = false) {
+    if (type.startsWith("extension:")) {
+      const name = type.slice(10);
+      if (Object.hasOwn(extensionRegistry.commands, name)) void runExtension(extensionRegistry.commands[name], fromSlash);
+      return;
+    }
     if (type === "video" || type === "youtube" || type === "vimeo") {
       mediaJob = { key: fromSlash ? slashKey : activeKey, replace: fromSlash && !adding };
       dismissSlash(); closeMenu();
@@ -319,6 +359,84 @@
     });
     editor.focus();
   }
+  async function runExtension(command: ExtensionCommand, fromSlash = false) {
+    if (extensionBusy || extensionDisposed || !editor.isEditable()) return;
+    extensionBusy = true; extensionError = "";
+    const revision = extensionRevision, href = view.location.href;
+    const origin = fromSlash && !adding ? slashKey : "";
+    let selection: L.BaseSelection | null = null;
+    let key = "";
+    let snapshot: ExtensionSelection = { text: "", blockType: "" };
+    const actions: (() => void)[] = [];
+    let accepting = true;
+    const current = () => {
+      if (!accepting || extensionDisposed || extensionRevision !== revision || view.location.href !== href || !root.isConnected || !editor.isEditable() || (fromSlash && slash === null)) throw new Error("Extension command is no longer active");
+    };
+    try {
+      editor.getEditorState().read(() => {
+        selection = (savedSelection ?? L.$getSelection())?.clone() ?? null;
+        const node = L.$isRangeSelection(selection) || Tables.$isTableSelection(selection) ? topBlock(selection.anchor.getNode()) : L.$isNodeSelection(selection) ? topBlock(selection.getNodes()[0]) : null;
+        key = node?.getKey() ?? activeKey;
+        snapshot = { text: selection?.getTextContent() ?? "", blockType: node instanceof Rich.HeadingNode ? node.getTag() : node?.getType() ?? "paragraph", ...(node instanceof ExtensionNode ? { block: { name: node.__name, data: cloneBlockData(node.__data) } } : {}) };
+      });
+    } catch (cause) { extensionError = cause instanceof Error ? cause.message : String(cause); extensionBusy = false; return; }
+    const context: ExtensionContext = {
+      selection: snapshot,
+      insertText(text) {
+        current();
+        if (typeof text !== "string") throw new Error("Extension text must be a string");
+        if (!text) return;
+        actions.push(() => {
+          let target = L.$getSelection();
+          if (!L.$isRangeSelection(target)) {
+            const paragraph = L.$createParagraphNode(), previous = L.$getNodeByKey(key);
+            if (previous) previous.insertAfter(paragraph); else L.$getRoot().append(paragraph);
+            target = paragraph.select();
+          }
+          if (L.$isRangeSelection(target)) target.insertText(text);
+        });
+      },
+      insertBlock(name, raw) {
+        current();
+        const block = extensionBlock(name), data = cloneBlockData(raw);
+        if (!block) throw new Error(`Unknown extension block: ${name}`);
+        block.validate(cloneBlockData(data));
+        actions.push(() => {
+          const node = new ExtensionNode(name, data), selected = L.$getSelection();
+          const previous = L.$isRangeSelection(selected) ? topBlock(selected.anchor.getNode()) : L.$isNodeSelection(selected) ? topBlock(selected.getNodes()[0]) : L.$getNodeByKey(key);
+          if (previous && previous.getKey() === origin && !previous.getTextContentSize()) previous.replace(node);
+          else if (previous) previous.insertAfter(node);
+          else L.$getRoot().append(node);
+          const paragraph = L.$createParagraphNode(); node.insertAfter(paragraph); paragraph.select();
+        });
+      },
+      updateBlock(raw) {
+        current();
+        if (!snapshot.block) throw new Error("Select an extension block first");
+        const block = extensionBlock(snapshot.block.name), data = cloneBlockData(raw);
+        if (!block) throw new Error("Extension unavailable");
+        block.validate(cloneBlockData(data));
+        actions.push(() => { const node = L.$getNodeByKey(key); if (node instanceof ExtensionNode) node.getWritable().__data = data; });
+      },
+    };
+    try {
+      await command.run(context);
+      current();
+      if (actions.length) {
+        editor.update(() => {
+          if (selection) L.$setSelection(selection.clone());
+          const paragraph = origin ? L.$getNodeByKey(origin) : null;
+          if (paragraph instanceof L.ParagraphNode) paragraph.clear().select();
+          for (const action of actions) action();
+          const remaining = origin ? L.$getNodeByKey(origin) : null;
+          if (remaining instanceof L.ParagraphNode && remaining.isEmpty()) remaining.remove();
+        }, { discrete: true, tag: "history-push" });
+        if (fromSlash) dismissSlash();
+        editor.focus();
+      }
+    } catch (cause) { extensionError = cause instanceof Error ? cause.message : String(cause); }
+    finally { accepting = false; extensionBusy = false; }
+  }
   function format(type: L.TextFormatType) {
     closeMenu();
     editor.update(() => { if (savedSelection) L.$setSelection(savedSelection.clone()); editor.dispatchCommand(L.FORMAT_TEXT_COMMAND, type); });
@@ -381,7 +499,7 @@
     altOpen = false; refocus();
   }
   function applyLink(remove = false) {
-    if (!remove && !safePreviewUrl(linkUrl)) { linkError = "Enter a safe http, https, mailto or relative URL."; return; }
+    if (!remove && !safePreviewUrl(linkUrl)) { linkError = $t("richtext.safeUrlError"); return; }
     editor.update(() => {
       if (savedSelection) L.$setSelection(savedSelection.clone());
       const selection = L.$getSelection(), node = L.$isNodeSelection(selection) ? selection.getNodes()[0] : null;
@@ -447,7 +565,54 @@
   function pickEmbed(embed: EmbedData) {
     insertMedia(() => new EmbedNode({ ...embed, privacy: embed.privacy !== false }));
   }
-  function closeMenu() { for (const popup of [menu, tableMenu, formatMenu]) if (popup?.matches(":popover-open")) popup.hidePopover(); }
+  function closeMenu() { for (const popup of [menu, tableMenu, formatMenu, extensionMenu]) if (popup?.matches(":popover-open")) popup.hidePopover(); }
+  function positionExtensionMenu() {
+    if (!extensionMenu?.matches(":popover-open") || !extensionTrigger?.isConnected) return;
+    const rect = extensionTrigger.getBoundingClientRect();
+    const width = Math.min(224, view.document.documentElement.clientWidth - 16);
+    const below = view.innerHeight - rect.bottom - 8, above = rect.top - 8;
+    const upward = below < 160 && above > below;
+    const height = Math.max(32, Math.min(280, upward ? above : below));
+    extensionPosition = `left:${Math.max(8, Math.min(rect.left, view.document.documentElement.clientWidth - width - 8))}px;top:${upward ? Math.max(8, rect.top - Math.min(extensionMenu.scrollHeight, height) - 4) : rect.bottom + 4}px;width:${width}px;max-height:${height}px`;
+  }
+  async function openExtensionGroup(name: string, trigger: HTMLButtonElement, last = false) {
+    if (extensionBusy || error) return;
+    if (extensionGroup === name && extensionTrigger === trigger && extensionMenu.matches(":popover-open")) { closeMenu(); trigger.focus({ preventScroll: true }); return; }
+    closeMenu(); hoverKey = ""; extensionTrigger = trigger; extensionGroup = name;
+    await tick();
+    extensionMenu.showPopover(); positionExtensionMenu();
+    await tick(); positionExtensionMenu();
+    const buttons = extensionMenu.querySelectorAll<HTMLButtonElement>("button:not(:disabled)");
+    (last ? buttons[buttons.length - 1] : buttons[0])?.focus({ preventScroll: true });
+  }
+  function extensionGroupTrigger(node: HTMLElement, state: { name: string; expanded: boolean; disabled: boolean; trigger: HTMLButtonElement | undefined }) {
+    const button = node.querySelector<HTMLButtonElement>("button");
+    function update(next: typeof state) {
+      state = next;
+      button?.setAttribute("aria-haspopup", "menu");
+      button?.setAttribute("aria-controls", `${id}-extension-group`);
+      button?.setAttribute("aria-expanded", String(state.expanded && state.trigger === button));
+      if (button) button.disabled = state.disabled;
+    }
+    const pointerdown = (event: PointerEvent) => { event.preventDefault(); };
+    const click = () => { if (button) clickedExtensionTrigger = button; };
+    const keydown = (event: KeyboardEvent) => {
+      if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key) || !button) return;
+      event.preventDefault();
+      void openExtensionGroup(state.name, button, event.key === "ArrowUp" || event.key === "End");
+    };
+    update(state);
+    node.addEventListener("pointerdown", pointerdown);
+    node.addEventListener("click", click, true);
+    node.addEventListener("keydown", keydown);
+    return { update, destroy() { node.removeEventListener("pointerdown", pointerdown); node.removeEventListener("click", click, true); node.removeEventListener("keydown", keydown); } };
+  }
+  function extensionMenuItem(node: HTMLElement) {
+    node.querySelector("button")?.setAttribute("role", "menuitem");
+    const pointerdown = (event: PointerEvent) => { event.preventDefault(); };
+    node.addEventListener("pointerdown", pointerdown);
+    return { destroy() { node.removeEventListener("pointerdown", pointerdown); } };
+  }
   function openMenu(event?: MouseEvent, popup = menu) {
     if (suppressClick) { suppressClick = false; return; }
     const fromToolbar = !!(event?.currentTarget as Element)?.closest('.body-toolbar, .block-float');
@@ -458,12 +623,12 @@
     popup.showPopover();
     void tick().then(() => popup.querySelector<HTMLButtonElement>("button:not(:disabled)")?.focus());
   }
-  function formatKeydown(event: KeyboardEvent) {
-    if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); closeMenu(); formatTrigger?.focus(); return; }
+  function formatKeydown(event: KeyboardEvent, popup = formatMenu, trigger = formatTrigger) {
+    if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); closeMenu(); trigger?.focus({ preventScroll: true }); return; }
     if (event.key === "Tab") { closeMenu(); return; }
     if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
     event.preventDefault();
-    const buttons = [...formatMenu.querySelectorAll<HTMLButtonElement>("button")];
+    const buttons = [...popup.querySelectorAll<HTMLButtonElement>("button:not(:disabled)")];
     const index = buttons.indexOf(root.ownerDocument.activeElement as HTMLButtonElement);
     buttons[event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : (index + (event.key === "ArrowDown" ? 1 : -1) + buttons.length) % buttons.length]?.focus();
   }
@@ -553,6 +718,11 @@
     }, { discrete: true });
   }
   function contentClick(event: MouseEvent) {
+    const extension = (event.target as Element).closest<HTMLElement>('[data-rigel-extension-editor][data-block-key]');
+    if (extension) {
+      editor.update(() => { const selection = L.$createNodeSelection(); selection.add(extension.dataset.blockKey!); L.$setSelection(selection); });
+      return;
+    }
     const element = (event.target as Element).closest<HTMLElement>('figure[data-block-key],hr[data-block-key]');
     if (element && (event.target as Element).closest('[data-rigel-edit-video]')) {
       event.preventDefault();
@@ -571,113 +741,160 @@
 
 {#snippet formatButtons()}
   {#each marks.slice(0, 2) as mark}
-    <button type="button" aria-label={mark.label} data-tooltip={mark.label} aria-pressed={activeMarks.includes(mark.type)} onpointerdown={event => event.preventDefault()} onclick={() => format(mark.type)}><Icon name={mark.icon} size={18} /></button>
+    <button type="button" aria-label={$t(mark.label)} data-tooltip={$t(mark.label)} aria-pressed={activeMarks.includes(mark.type)} onpointerdown={event => event.preventDefault()} onclick={() => format(mark.type)}><Icon name={mark.icon} size={18} /></button>
   {/each}
-  <button type="button" aria-label="Link" data-tooltip="Link" aria-expanded={linkOpen} aria-controls={`${id}-link`} onpointerdown={event => event.preventDefault()} onclick={openLink}><Icon name="link" size={18} /></button>
-  <button type="button" aria-label="More formatting" data-tooltip="More formatting" aria-haspopup="menu" aria-expanded={formatsOpen} aria-controls={`${id}-formats`} popovertarget={`${id}-formats`} onpointerdown={event => event.preventDefault()} onclick={event => { event.preventDefault(); formatTrigger = event.currentTarget; formatMenu.matches(':popover-open') ? closeMenu() : openMenu(event, formatMenu); }}><Icon name="caretDown" size={18} /></button>
+  <button type="button" aria-label={$t("richtext.link")} data-tooltip={$t("richtext.link")} aria-expanded={linkOpen} aria-controls={`${id}-link`} onpointerdown={event => event.preventDefault()} onclick={openLink}><Icon name="link" size={18} /></button>
+  <button type="button" aria-label={$t("richtext.moreFormatting")} data-tooltip={$t("richtext.moreFormatting")} aria-haspopup="menu" aria-expanded={formatsOpen} aria-controls={`${id}-formats`} popovertarget={`${id}-formats`} onpointerdown={event => event.preventDefault()} onclick={event => { event.preventDefault(); formatTrigger = event.currentTarget; formatMenu.matches(':popover-open') ? closeMenu() : openMenu(event, formatMenu); }}><Icon name="caretDown" size={18} /></button>
 {/snippet}
 {#snippet tableControls()}
-  <div class="block-table-controls" role="group" aria-label="Table controls">
-    <button type="button" disabled={!tableCell || tableRows >= MAX_TABLE_ROWS} onpointerdown={event => event.preventDefault()} onclick={() => tableAction("row")}><Icon name="plus" />Add row below</button>
-    <button type="button" disabled={!tableCell || tableColumns >= MAX_TABLE_COLUMNS} onpointerdown={event => event.preventDefault()} onclick={() => tableAction("column")}><Icon name="plus" />Add column right</button>
-    <button type="button" disabled={!tableCell || tableRows <= 1} onpointerdown={event => event.preventDefault()} onclick={() => tableAction("delete-row")}><Icon name="minus" />Remove row</button>
-    <button type="button" disabled={!tableCell || tableColumns <= 1} onpointerdown={event => event.preventDefault()} onclick={() => tableAction("delete-column")}><Icon name="minus" />Remove column</button>
-    <label class="inline"><input type="checkbox" role="switch" class="switch" checked={tableHeader} disabled={!tableCell} onchange={event => tableAction("header", event.currentTarget.checked)} /><Icon name="table" /><span>Header row</span></label>
+  <div class="block-table-controls" role="group" aria-label={$t("richtext.tableControls")}>
+    <button type="button" disabled={!tableCell || tableRows >= MAX_TABLE_ROWS} onpointerdown={event => event.preventDefault()} onclick={() => tableAction("row")}><Icon name="plus" />{$t("richtext.addRowBelow")}</button>
+    <button type="button" disabled={!tableCell || tableColumns >= MAX_TABLE_COLUMNS} onpointerdown={event => event.preventDefault()} onclick={() => tableAction("column")}><Icon name="plus" />{$t("richtext.addColumnRight")}</button>
+    <button type="button" disabled={!tableCell || tableRows <= 1} onpointerdown={event => event.preventDefault()} onclick={() => tableAction("delete-row")}><Icon name="minus" />{$t("richtext.removeRow")}</button>
+    <button type="button" disabled={!tableCell || tableColumns <= 1} onpointerdown={event => event.preventDefault()} onclick={() => tableAction("delete-column")}><Icon name="minus" />{$t("richtext.removeColumn")}</button>
+    <label class="inline"><input type="checkbox" role="switch" class="switch" checked={tableHeader} disabled={!tableCell} onchange={event => tableAction("header", event.currentTarget.checked)} /><Icon name="table" /><span>{$t("richtext.headerRow")}</span></label>
   </div>
 {/snippet}
+{#snippet extensionButtons()}
+  {#each toolbarCommands.filter(command => !command.group) as command}
+    <span data-rigel-command={command.name} style="display:contents">
+    <svelte:boundary onerror={cause => { extensionError = cause instanceof Error ? cause.message : String(cause); }}>
+      {#if command.button}
+        {@const Button = command.button}
+        <Button label={command.label} disabled={extensionBusy || !!error} onclick={() => { void runExtension(command); }} />
+      {:else}
+        <button type="button" disabled={extensionBusy || !!error} aria-label={command.label} data-tooltip={command.label} onpointerdown={event => event.preventDefault()} onclick={() => { void runExtension(command); }}>{command.label}</button>
+      {/if}
+      {#snippet failed()}<span role="status">{$t("richtext.loadArticleError")}</span>{/snippet}
+    </svelte:boundary>
+    </span>
+  {/each}
+  {#each toolbarGroups as group}
+    <span data-rigel-group={group.name} class="extension-group-trigger" use:extensionGroupTrigger={{ name: group.name, expanded: extensionGroup === group.name, disabled: extensionBusy || !!error, trigger: extensionTrigger }}>
+      <svelte:boundary onerror={cause => { extensionError = cause instanceof Error ? cause.message : String(cause); }}>
+        {#if group.button}
+          {@const Button = group.button}
+          <Button label={group.label} disabled={extensionBusy || !!error} onclick={() => { void openExtensionGroup(group.name, clickedExtensionTrigger); }} />
+        {:else}
+          <button type="button" disabled={extensionBusy || !!error} onclick={event => { void openExtensionGroup(group.name, event.currentTarget); }}>{group.label}<Icon name="caretDown" size={12} /></button>
+        {/if}
+        {#snippet failed()}<span role="status">{$t("richtext.loadArticleError")}</span>{/snippet}
+      </svelte:boundary>
+    </span>
+  {/each}
+{/snippet}
 {#snippet toolbar(image: boolean)}
-  <div class="body-toolbar formatting-toolbar" class:image-toolbar={image} role="group" aria-label={image ? "Image editing" : "Body formatting"} style={inline || image ? floating : undefined} hidden={markdownView || ((inline || image) && !floating) || (image && !imageData) || (inline && !!selectedVideo)}>
+  <div class="body-toolbar formatting-toolbar" class:image-toolbar={image} role="group" aria-label={image ? $t("richtext.imageEditing") : $t("richtext.bodyFormatting")} style={inline || image ? floating : undefined} hidden={markdownView || ((inline || image) && !floating) || (image && !imageData) || (inline && !!selectedVideo && !toolbarCommands.length)}>
+    {#if !extensionOnly}
     {#if image}
-      <button type="button" aria-label="Edit alt text" data-tooltip="Edit alt text" onpointerdown={event => event.preventDefault()} onclick={openAlt}><Icon name="textAa" size={18} /></button>
-      <button type="button" aria-label={imageData?.url ? "Edit image link" : "Add image link"} data-tooltip={imageData?.url ? "Edit image link" : "Add image link"} onpointerdown={event => event.preventDefault()} onclick={openLink}><Icon name="link" size={18} /></button>
+      <button type="button" aria-label={$t("richtext.editAltText")} data-tooltip={$t("richtext.editAltText")} onpointerdown={event => event.preventDefault()} onclick={openAlt}><Icon name="textAa" size={18} /></button>
+      <button type="button" aria-label={imageData?.url ? $t("richtext.editImageLink") : $t("richtext.addImageLink")} data-tooltip={imageData?.url ? $t("richtext.editImageLink") : $t("richtext.addImageLink")} onpointerdown={event => event.preventDefault()} onclick={openLink}><Icon name="link" size={18} /></button>
     {:else}
-    <Select ariaLabel="Block type" data-tooltip={activeBlock?.label ?? "Block type"} icon={activeBlock?.icon ?? "paragraph"} value={imageData || embedData ? "" : blockType} options={textBlocks} disabled={!!imageData} onchange={next => { hoverKey = ""; changeBlock(String(next)); }} />
+    <Select ariaLabel={$t("richtext.blockType")} data-tooltip={activeBlock?.label ?? $t("richtext.blockType")} icon={activeBlock?.icon ?? "paragraph"} value={imageData || embedData ? "" : blockType} options={textBlocks} disabled={!!imageData} onchange={next => { hoverKey = ""; changeBlock(String(next)); }} />
     {#if !inline || !["image", "video", "embed", "divider"].includes(blockType)}<span class="toolbar-separator" aria-hidden="true"></span>{@render formatButtons()}<span class="toolbar-separator" aria-hidden="true"></span>{/if}
     {/if}
     {#if image}
-      <ImagePicker toolbar value={imageData?.src ?? ""} altText={imageData?.alt ?? ""} triggerLabel="Replace image" onopen={() => { if (!imageJob) imageJob = { key: activeKey, replace: true }; linkOpen = false; altOpen = false; }} onpick={pickImage} onclose={() => { imageJob = null; refocus(); }} />
+      <ImagePicker toolbar value={imageData?.src ?? ""} altText={imageData?.alt ?? ""} triggerLabel={$t("richtext.replaceImage")} onopen={() => { if (!imageJob) imageJob = { key: activeKey, replace: true }; linkOpen = false; altOpen = false; }} onpick={pickImage} onclose={() => { imageJob = null; refocus(); }} />
     {:else}
-      <button type="button" data-media-trigger aria-label="Insert media" data-tooltip="Insert media" aria-haspopup="menu" onpointerdown={event => event.preventDefault()} onclick={event => mediaPicker.toggleMenu(event.currentTarget)}><Icon name="image" size={18} /></button>
+      {#if !inline || canInsertBlock}<button type="button" data-media-trigger aria-label={$t("richtext.insertMedia")} data-tooltip={$t("richtext.insertMedia")} aria-haspopup="menu" onpointerdown={event => event.preventDefault()} onclick={event => mediaPicker.toggleMenu(event.currentTarget)}><Icon name="image" size={18} /></button>{/if}
       <ImagePicker toolbar hiddenTrigger value="" onopen={() => { if (!imageJob) imageJob = { key: activeKey, replace: false }; linkOpen = false; altOpen = false; }} onpick={pickImage} onclose={() => { imageJob = null; refocus(); }} />
     {/if}
     {#if !image}
-    <button type="button" aria-label="Table" data-tooltip="Table" aria-pressed={blockType === "table"} popovertarget={`${id}-table`} onpointerdown={event => event.preventDefault()} onclick={event => { event.preventDefault(); tableMenu.matches(':popover-open') ? closeMenu() : openMenu(event, tableMenu); }}><Icon name="table" size={18} /></button>
-    <button type="button" aria-label="Bulleted list" data-tooltip="Bulleted list" aria-pressed={listType === "bullet"} disabled={["image", "video", "embed", "divider"].includes(blockType)} onpointerdown={event => event.preventDefault()} onclick={() => toggleList("bullet")}><Icon name="listBullets" size={18} /></button>
-    <button type="button" aria-label="Numbered list" data-tooltip="Numbered list" aria-pressed={listType === "number"} disabled={["image", "video", "embed", "divider"].includes(blockType)} onpointerdown={event => event.preventDefault()} onclick={() => toggleList("number")}><Icon name="listNumbers" size={18} /></button>
+    {#if !inline || canInsertBlock || blockType === "table"}<button type="button" aria-label={$t("richtext.table")} data-tooltip={$t("richtext.table")} aria-pressed={blockType === "table"} popovertarget={`${id}-table`} onpointerdown={event => event.preventDefault()} onclick={event => { event.preventDefault(); tableMenu.matches(':popover-open') ? closeMenu() : openMenu(event, tableMenu); }}><Icon name="table" size={18} /></button>{/if}
+    <button type="button" aria-label={$t("richtext.bulletedList")} data-tooltip={$t("richtext.bulletedList")} aria-pressed={listType === "bullet"} disabled={["image", "video", "embed", "divider"].includes(blockType)} onpointerdown={event => event.preventDefault()} onclick={() => toggleList("bullet")}><Icon name="listBullets" size={18} /></button>
+    <button type="button" aria-label={$t("richtext.numberedList")} data-tooltip={$t("richtext.numberedList")} aria-pressed={listType === "number"} disabled={["image", "video", "embed", "divider"].includes(blockType)} onpointerdown={event => event.preventDefault()} onclick={() => toggleList("number")}><Icon name="listNumbers" size={18} /></button>
     {#if !inline}
-      <button type="button" class="block-history" disabled={!canUndo} onclick={() => editor.dispatchCommand(L.UNDO_COMMAND, undefined)}>Undo</button>
-      <button type="button" class="block-history" disabled={!canRedo} onclick={() => editor.dispatchCommand(L.REDO_COMMAND, undefined)}>Redo</button>
-      <button type="button" class="block-add" aria-label="Add block" data-tooltip="Add block" onclick={addBlock}>Add block</button>
+      <button type="button" class="block-history" disabled={!canUndo} onclick={() => editor.dispatchCommand(L.UNDO_COMMAND, undefined)}>{$t("richtext.undo")}</button>
+      <button type="button" class="block-history" disabled={!canRedo} onclick={() => editor.dispatchCommand(L.REDO_COMMAND, undefined)}>{$t("richtext.redo")}</button>
+      <button type="button" class="block-add" aria-label={$t("richtext.addBlock")} data-tooltip={$t("richtext.addBlock")} onclick={addBlock}>{$t("richtext.addBlock")}</button>
+    {/if}
     {/if}
     {/if}
-    {#if inline || image}<span class="toolbar-separator" aria-hidden="true"></span><button type="button" aria-label="More actions" data-tooltip="More actions" aria-haspopup="true" popovertarget={`${id}-actions`} onpointerdown={event => event.preventDefault()} onclick={event => { event.preventDefault(); menu.matches(':popover-open') ? closeMenu() : openMenu(event); }}><Icon name="dotsThreeOutlineVertical" size={18} /></button>{/if}
+    {@render extensionButtons()}
+    {#if inline || image}<span class="toolbar-separator" aria-hidden="true"></span><button type="button" aria-label={$t("richtext.moreActions")} data-tooltip={$t("richtext.moreActions")} aria-haspopup="true" popovertarget={`${id}-actions`} onpointerdown={event => event.preventDefault()} onclick={event => { event.preventDefault(); menu.matches(':popover-open') ? closeMenu() : openMenu(event); }}><Icon name="dotsThreeOutlineVertical" size={18} /></button>{/if}
   </div>
 {/snippet}
 <div class="block-editor" bind:this={editorHost}>
   <MediaPicker bind:this={mediaPicker} hiddenTrigger onopen={() => editor.blur()} onimage={() => { if (!imageJob) imageJob = { key: activeKey, replace: false }; editorHost.querySelector<HTMLButtonElement>('.body-toolbar:not(.image-toolbar) [data-image-trigger]')?.click(); }} onvideo={pickVideo} onembed={pickEmbed} onclose={() => { mediaJob = null; refocus(); }} />
-  {#if !inline}<div class="markdown-heading"><div class="field-label">Body</div><div class="markdown-modes"><button type="button" aria-pressed={markdownView} onclick={() => { markdownView = !markdownView; linkOpen = false; closeMenu(); dismissSlash(); }}>View as Markdown</button></div></div>{/if}
+  {#if !inline}<div class="markdown-heading"><div class="field-label">{$t("richtext.body")}</div><div class="markdown-modes"><button type="button" aria-pressed={markdownView} onclick={() => { markdownView = !markdownView; linkOpen = false; closeMenu(); dismissSlash(); }}>{$t("richtext.viewAsMarkdown")}</button></div></div>{/if}
   {@render toolbar(inline && !!imageData)}
   {#if !inline}{@render toolbar(true)}{/if}
 
   {#if error}<p role="alert">{error}</p>{/if}
+  {#if extensionError}<p role="alert">{extensionError}</p>{/if}
   {#if linkOpen}
-    <div class="markdown-link" class:image-form={!!imageData} style={linkPosition} id={`${id}-link`} role="group" aria-label="Edit link" onkeydown={event => { if (event.key === "Escape") { event.stopPropagation(); linkOpen = false; refocus(); } if (event.key === "Enter") { event.preventDefault(); applyLink(); } }}>
-      <label for={`${id}-url`}>Link URL</label>
+    <div class="markdown-link" class:image-form={!!imageData} style={linkPosition} id={`${id}-link`} role="group" aria-label={$t("richtext.editLink")} onkeydown={event => { if (event.key === "Escape") { event.stopPropagation(); linkOpen = false; refocus(); } if (event.key === "Enter") { event.preventDefault(); applyLink(); } }}>
+      <label for={`${id}-url`}>{$t("richtext.linkUrl")}</label>
       <div class="markdown-link-controls">
         <input id={`${id}-url`} type="text" placeholder="https://…" bind:this={linkInput} bind:value={linkUrl} aria-invalid={!!linkError} />
-        <button type="button" aria-label="Apply link" data-tooltip="Apply link" onclick={() => applyLink()}><Icon name="check" size={16} /></button>
-        <button type="button" aria-label="Remove link" data-tooltip="Remove link" onclick={() => applyLink(true)}><Icon name="linkBreak" size={16} /></button>
-        <button type="button" aria-label="Close link" data-tooltip="Close link" onclick={() => { linkOpen = false; refocus(); }}><Icon name="x" size={16} /></button>
+        <button type="button" aria-label={$t("richtext.applyLink")} data-tooltip={$t("richtext.applyLink")} onclick={() => applyLink()}><Icon name="check" size={16} /></button>
+        <button type="button" aria-label={$t("richtext.removeLink")} data-tooltip={$t("richtext.removeLink")} onclick={() => applyLink(true)}><Icon name="linkBreak" size={16} /></button>
+        <button type="button" aria-label={$t("richtext.closeLink")} data-tooltip={$t("richtext.closeLink")} onclick={() => { linkOpen = false; refocus(); }}><Icon name="x" size={16} /></button>
       </div>
       {#if linkError}<p role="alert">{linkError}</p>{/if}
     </div>
   {/if}
   {#if altOpen}
-    <div class="markdown-link image-form" style={linkPosition} role="group" aria-label="Edit image alt text" onkeydown={event => { if (event.key === "Escape") { event.stopPropagation(); altOpen = false; refocus(); } if (event.key === "Enter") { event.preventDefault(); applyAlt(); } }}>
-      <label for={`${id}-alt`}>Alt text (leave empty if decorative)</label>
+    <div class="markdown-link image-form" style={linkPosition} role="group" aria-label={$t("richtext.editImageAltText")} onkeydown={event => { if (event.key === "Escape") { event.stopPropagation(); altOpen = false; refocus(); } if (event.key === "Enter") { event.preventDefault(); applyAlt(); } }}>
+      <label for={`${id}-alt`}>{$t("richtext.decorativeAltText")}</label>
       <div class="markdown-link-controls">
-        <input id={`${id}-alt`} type="text" aria-label="Image alt text" bind:this={altInput} bind:value={altText} />
-        <button type="button" aria-label="Apply alt text" data-tooltip="Apply alt text" onclick={applyAlt}><Icon name="check" size={16} /></button>
-        <button type="button" aria-label="Close alt text" data-tooltip="Close alt text" onclick={() => { altOpen = false; refocus(); }}><Icon name="x" size={16} /></button>
+        <input id={`${id}-alt`} type="text" aria-label={$t("richtext.imageAltText")} bind:this={altInput} bind:value={altText} />
+        <button type="button" aria-label={$t("richtext.applyAltText")} data-tooltip={$t("richtext.applyAltText")} onclick={applyAlt}><Icon name="check" size={16} /></button>
+        <button type="button" aria-label={$t("richtext.closeAltText")} data-tooltip={$t("richtext.closeAltText")} onclick={() => { altOpen = false; refocus(); }}><Icon name="x" size={16} /></button>
       </div>
     </div>
   {/if}
-  {#if !inline && !imageData && !selectedVideo && floating && !markdownView}<div class="block-float" style={floating} role="group" aria-label="Selected text formatting">{@render formatButtons()}</div>{/if}
+  {#if !inline && !imageData && (!selectedVideo || toolbarCommands.length) && floating && !markdownView}<div class="block-float" style={floating} role="group" aria-label={$t("richtext.selectedTextFormatting")}>{#if !extensionOnly}{@render formatButtons()}{/if}{@render extensionButtons()}</div>{/if}
   {#if markdownView}
-    <div class="block-markdown-view">{#if inline}<button type="button" class="outlined" onclick={async () => { markdownView = false; await tick(); editor.focus(); }}>Close Markdown view</button>{/if}<pre class="block-markdown" aria-label="Body as Markdown" tabindex="0">{articleMarkdown(value)}</pre></div>
+    <div class="block-markdown-view">{#if inline}<button type="button" class="outlined" onclick={async () => { markdownView = false; await tick(); editor.focus(); }}>{$t("richtext.closeMarkdownView")}</button>{/if}<pre class="block-markdown" aria-label={$t("richtext.bodyAsMarkdown")} tabindex="0">{articleMarkdown(value)}</pre></div>
   {/if}
-  <div class="block-surface" bind:this={surface} hidden={markdownView} onpointermove={hover} role="group" aria-label="Article blocks">
-    {#if insertion && !markdownView}<button type="button" class="block-insert" style={`top:${insertion.top}px;left:${insertion.left}px`} aria-label="Insert paragraph here" data-tooltip="Insert paragraph" onpointerdown={event => event.preventDefault()} onpointerleave={leaveInsertion} onblur={() => { insertion = null; }} onclick={insertParagraph}><Icon name="plus" size={16} /></button>{/if}
-    {#if !inline}<div class="block-content" contenteditable="true" role="textbox" aria-label="Body" aria-multiline="true" bind:this={root}></div>{/if}
-    {#if hoverKey || activeKey}<button bind:this={handle} type="button" class="block-handle" style={`top:${handleTop}px;${inline ? `left:${handleLeft}px` : ''}`} aria-label="Block options and drag handle" data-tooltip="Drag to reorder; click for block options" onpointerdown={startDrag} onpointermove={moveDrag} onpointerup={() => endDrag()} onpointercancel={() => endDrag(true)} onlostpointercapture={() => endDrag(true)} onclick={openMenu}><Icon name="dotsThreeOutlineVertical" size={16} /></button>{/if}
+  <div class="block-surface" bind:this={surface} hidden={markdownView} onpointermove={hover} role="group" aria-label={$t("richtext.articleBlocks")}>
+    {#if insertion && !markdownView}<button type="button" class="block-insert" style={`top:${insertion.top}px;left:${insertion.left}px`} aria-label={$t("richtext.insertParagraphHere")} data-tooltip={$t("richtext.insertParagraph")} onpointerdown={event => event.preventDefault()} onpointerleave={leaveInsertion} onblur={() => { insertion = null; }} onclick={insertParagraph}><Icon name="plus" size={16} /></button>{/if}
+    {#if !inline}<div class="block-content" contenteditable="true" role="textbox" aria-label={$t("richtext.body")} aria-multiline="true" bind:this={root}></div>{/if}
+    {#if hoverKey || activeKey}<button bind:this={handle} type="button" class="block-handle" style={`top:${handleTop}px;${inline ? `left:${handleLeft}px` : ''}`} aria-label={$t("richtext.blockOptionsHandle")} data-tooltip={$t("richtext.dragBlockHint")} onpointerdown={startDrag} onpointermove={moveDrag} onpointerup={() => endDrag()} onpointercancel={() => endDrag(true)} onlostpointercapture={() => endDrag(true)} onclick={openMenu}><Icon name="dotsThreeOutlineVertical" size={16} /></button>{/if}
     {#if drop}<div class="block-drop-indicator" style={`top:${drop.top}px;${inline ? `position:fixed;left:${root.getBoundingClientRect().left}px;width:${root.getBoundingClientRect().width}px;right:auto` : ''}`}></div>{/if}
-    <div bind:this={slashMenu} class="block-slash" id={`${id}-slash`} popover="manual" style={slashPosition} role="listbox" aria-label="Insert block" onkeydown={slashKeydown}>
+    <div bind:this={slashMenu} class="block-slash" id={`${id}-slash`} popover="manual" style={slashPosition} role="listbox" aria-label={$t("richtext.insertBlock")} onkeydown={slashKeydown}>
       {#if slash !== null}
-        <p class="hint">Choose a block</p>
-        {#if adding}<input type="search" role="combobox" aria-expanded="true" aria-controls={`${id}-slash`} aria-activedescendant={choices.length ? `${id}-slash-${slashIndex}` : undefined} aria-label="Find a block" placeholder="Find a block…" bind:value={slash} oninput={() => { slashIndex = 0; }} />{/if}
+        <p class="hint">{$t("richtext.chooseBlock")}</p>
+        {#if adding}<input type="search" role="combobox" aria-expanded="true" aria-controls={`${id}-slash`} aria-activedescendant={choices.length ? `${id}-slash-${slashIndex}` : undefined} aria-label={$t("richtext.findBlock")} placeholder={$t("richtext.findBlockPlaceholder")} bind:value={slash} oninput={() => { slashIndex = 0; }} />{/if}
         {#each choices as block, index}<button id={`${id}-slash-${index}`} type="button" role="option" aria-selected={index === slashIndex} onfocus={() => { slashIndex = index; }} onpointerdown={event => event.preventDefault()} onclick={() => changeBlock(block.value, true)}>{block.label}</button>{/each}
-        {#if !choices.length}<p role="status">No matching blocks.</p>{/if}
+        {#if !choices.length}<p role="status">{$t("richtext.noMatchingBlocks")}</p>{/if}
       {/if}
     </div>
   </div>
-  <div class="block-menu block-table-menu" id={`${id}-table`} bind:this={tableMenu} popover="auto" style={menuPosition} role="group" aria-label="Table">
-    {#if blockType === "table"}{@render tableControls()}{:else}<button type="button" onclick={() => { slashKey = activeKey; adding = true; changeBlock("table", true); }}>Add table</button>{/if}
+  <div class="block-menu block-table-menu" id={`${id}-table`} bind:this={tableMenu} popover="auto" style={menuPosition} role="group" aria-label={$t("richtext.table")}>
+    {#if blockType === "table"}{@render tableControls()}{:else}<button type="button" onclick={() => { slashKey = activeKey; adding = true; changeBlock("table", true); }}>{$t("richtext.addTable")}</button>{/if}
   </div>
-  <div class="block-menu" id={`${id}-actions`} bind:this={menu} popover="auto" style={menuPosition} role="group" aria-label={inline ? "More actions" : "Block options"}>
+  <div class="block-menu" id={`${id}-actions`} bind:this={menu} popover="auto" style={menuPosition} role="group" aria-label={inline ? $t("richtext.moreActions") : $t("richtext.blockOptions")}>
     {#if inline}
-      <button type="button" class="block-history" disabled={!canUndo} onclick={() => { editor.dispatchCommand(L.UNDO_COMMAND, undefined); closeMenu(); editor.focus(); }}>Undo</button>
-      <button type="button" class="block-history" disabled={!canRedo} onclick={() => { editor.dispatchCommand(L.REDO_COMMAND, undefined); closeMenu(); editor.focus(); }}>Redo</button>
-      <button type="button" onclick={() => { markdownView = true; closeMenu(); }}>View as Markdown</button>
+      <button type="button" class="block-history" disabled={!canUndo} onclick={() => { editor.dispatchCommand(L.UNDO_COMMAND, undefined); closeMenu(); editor.focus(); }}>{$t("richtext.undo")}</button>
+      <button type="button" class="block-history" disabled={!canRedo} onclick={() => { editor.dispatchCommand(L.REDO_COMMAND, undefined); closeMenu(); editor.focus(); }}>{$t("richtext.redo")}</button>
+      <button type="button" onclick={() => { markdownView = true; closeMenu(); }}>{$t("richtext.viewAsMarkdown")}</button>
     {/if}
-    <button type="button" onclick={() => blockAction("duplicate")}>Duplicate block</button>
-    <button type="button" onclick={() => blockAction("delete")}>Delete block</button>
-    <button type="button" onclick={() => blockAction("up")}>Move up</button>
-    <button type="button" onclick={() => blockAction("down")}>Move down</button>
-    {#if !inline}<Select ariaLabel="Convert block type" value={blockType} options={textBlocks} onchange={next => changeBlock(String(next))} />{/if}
+    <button type="button" onclick={() => blockAction("duplicate")}>{$t("richtext.duplicateBlock")}</button>
+    <button type="button" onclick={() => blockAction("delete")}>{$t("richtext.deleteBlock")}</button>
+    <button type="button" onclick={() => blockAction("up")}>{$t("richtext.moveUp")}</button>
+    <button type="button" onclick={() => blockAction("down")}>{$t("richtext.moveDown")}</button>
+    {#if !inline}<Select ariaLabel={$t("richtext.convertBlockType")} value={blockType} options={textBlocks} onchange={next => changeBlock(String(next))} />{/if}
+  </div>
+  <div class="block-menu extension-group-menu" id={`${id}-extension-group`} data-rigel-group-menu={extensionGroup || undefined} bind:this={extensionMenu} popover="auto" style={extensionPosition} role="menu" tabindex="-1" aria-label={activeExtensionGroup?.label} ontoggle={event => { if (!event.currentTarget.matches(':popover-open')) extensionGroup = ""; }} onkeydown={event => formatKeydown(event, extensionMenu, extensionTrigger)}>
+    {#each activeExtensionGroup?.commands ?? [] as command}
+      <span data-rigel-command={command.name} use:extensionMenuItem>
+        <svelte:boundary onerror={cause => { extensionError = cause instanceof Error ? cause.message : String(cause); }}>
+          {#if command.button}
+            {@const Button = command.button}
+            <Button label={command.label} disabled={extensionBusy || !!error} onclick={() => { closeMenu(); void runExtension(command); }} />
+          {:else}
+            <button type="button" role="menuitem" disabled={extensionBusy || !!error} onpointerdown={event => event.preventDefault()} onclick={() => { closeMenu(); void runExtension(command); }}>{command.label}</button>
+          {/if}
+          {#snippet failed()}<span role="status">{$t("richtext.loadArticleError")}</span>{/snippet}
+        </svelte:boundary>
+      </span>
+    {/each}
   </div>
-  <div class="block-menu block-format-menu" id={`${id}-formats`} bind:this={formatMenu} popover="auto" style={menuPosition} role="menu" tabindex="-1" aria-label="More formatting" ontoggle={event => { formatsOpen = event.currentTarget.matches(':popover-open'); }} onkeydown={formatKeydown}>
+  <div class="block-menu block-format-menu" id={`${id}-formats`} bind:this={formatMenu} popover="auto" style={menuPosition} role="menu" tabindex="-1" aria-label={$t("richtext.moreFormatting")} ontoggle={event => { formatsOpen = event.currentTarget.matches(':popover-open'); }} onkeydown={event => formatKeydown(event)}>
     {#each marks.slice(2) as mark}
-      <button type="button" role="menuitemcheckbox" aria-label={mark.label} aria-checked={activeMarks.includes(mark.type)} onpointerdown={event => event.preventDefault()} onclick={() => format(mark.type)}><Icon name={mark.icon} size={16} /><span>{mark.label}</span>{#if activeMarks.includes(mark.type)}<Icon name="check" size={16} />{/if}</button>
+      <button type="button" role="menuitemcheckbox" aria-label={$t(mark.label)} aria-checked={activeMarks.includes(mark.type)} onpointerdown={event => event.preventDefault()} onclick={() => format(mark.type)}><Icon name={mark.icon} size={16} /><span>{$t(mark.label)}</span>{#if activeMarks.includes(mark.type)}<Icon name="check" size={16} />{/if}</button>
     {/each}
   </div>
 </div>