@k2b/editor 0.0.0 → 0.1.0

package/README.md

@@ -1 +1,32 @@
-# @k2b/editor\n\nPlaceholder. Real versions come from https://github.com/k2b-dev/cloud.
+# @k2b/editor
+
+Configurable Markdown editor for SolidJS. An editor, a toolbar, a bubble menu,
+and a slash menu share one editor state; applications place them where they
+want and describe their actions as data.
+
+```tsx
+import { Editor, Toolbar, createEditor, markdownActions } from "@k2b/editor";
+
+const editor = createEditor();
+const actions = markdownActions(editor, "en");
+
+<Toolbar editor={editor} groups={[{ items: [actions.bold, actions.italic] }]} />
+<Editor editor={editor} label="Note" maxLength={100_000} toolbar={false} />
+```
+
+Optional CodeMirror extensions and source parsers are exported from
+`@k2b/editor/markdown`. Hosts supply directive ranges, URL resolution and
+opening callbacks, and Mermaid configuration. Import `@k2b/editor/styles.css`
+in the host's Tailwind stylesheet; the themes use `--editor-measure`
+for the reading column.
+
+The package builds on `@k2b/ui`'s text editor and does not depend on Cloud.
+It ships TypeScript and Solid JSX source; bundle it with a Solid compiler, as
+for `@k2b/ui` islands.
+
+Documentation: <https://github.com/k2b-dev/cloud/blob/main/docs-site/docs/en/frontend/editor.md>
+
+License: AGPL-3.0-or-later.
+
+Source parsers also have direct `@k2b/editor/markdown/lib/*` entry points,
+so server and CLI consumers can load them without the editor widgets.

package/package.json

@@ -1,8 +1,120 @@
 {
   "name": "@k2b/editor",
-  "version": "0.0.0",
-  "description": "Placeholder. Releases are published by the k2b-dev/cloud release workflow.",
+  "version": "0.1.0",
+  "description": "Configurable Markdown editor for SolidJS: editor, toolbar, bubble menu, and slash menu on one shared state.",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./markdown": "./src/markdown/index.ts",
+    "./styles.css": "./src/styles.css",
+    "./markdown/lib/*": "./src/markdown/lib/*.ts",
+    "./markdown/urls": "./src/markdown/urls.ts",
+    "./markdown/mermaid-render": "./src/markdown/mermaid-render.ts",
+    "./markdown/mermaid-viewport": "./src/markdown/mermaid-viewport.tsx",
+    "./markdown/inline-syntax": "./src/markdown/_lib/inline-syntax.ts",
+    "./markdown/math-syntax": "./src/markdown/_lib/math-syntax.ts",
+    "./markdown/fade-scroll-margins": "./src/markdown/fade-scroll-margins.ts",
+    "./collab": "./src/collab/index.ts",
+    "./formula": "./src/formula.ts",
+    "./charts": "./src/charts.ts",
+    "./markdown/pretty-table": "./src/markdown/pretty-table.ts",
+    "./markdown/pretty-table-messages": "./src/markdown/pretty-table-messages.ts",
+    "./markdown/chart-copy": "./src/markdown/chart-copy.ts",
+    "./markdown/notebook-charts": "./src/markdown/notebook-charts.tsx"
+  },
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.json --noEmit --pretty false"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.10",
+    "y-codemirror.next": "^0.3.6",
+    "y-protocols": "^1.0.7",
+    "yjs": "^13.6.33",
+    "zod": "^4.3.4"
+  },
+  "peerDependenciesMeta": {
+    "y-codemirror.next": {
+      "optional": true
+    },
+    "y-protocols": {
+      "optional": true
+    },
+    "yjs": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@codemirror/autocomplete": "6.20.3",
+    "@codemirror/commands": "6.10.4",
+    "@codemirror/lang-cpp": "6.0.3",
+    "@codemirror/lang-css": "6.3.1",
+    "@codemirror/lang-go": "6.0.1",
+    "@codemirror/lang-html": "6.4.12",
+    "@codemirror/lang-java": "6.0.2",
+    "@codemirror/lang-javascript": "6.2.5",
+    "@codemirror/lang-json": "6.0.2",
+    "@codemirror/lang-markdown": "6.5.2",
+    "@codemirror/lang-php": "6.0.2",
+    "@codemirror/lang-python": "6.2.1",
+    "@codemirror/lang-rust": "6.0.2",
+    "@codemirror/lang-sql": "6.10.0",
+    "@codemirror/lang-xml": "6.1.0",
+    "@codemirror/lang-yaml": "6.1.3",
+    "@codemirror/language": "6.12.4",
+    "@codemirror/lint": "6.9.7",
+    "@codemirror/search": "6.7.2",
+    "@codemirror/state": "6.7.1",
+    "@codemirror/view": "6.43.7",
+    "@k2b/stdlib": "0.30.0",
+    "@k2b/ui": "0.37.0",
+    "@lezer/common": "1.5.3",
+    "@lezer/highlight": "1.2.4",
+    "@lezer/markdown": "1.7.2",
+    "@uiw/codemirror-themes": "4.25.12",
+    "katex": "0.18.9",
+    "marked": "18.0.14",
+    "mermaid": "12.0.0"
+  },
+  "devDependencies": {
+    "@types/bun": "1.4.2",
+    "solid-js": "1.9.17",
+    "typescript": "7.0.2",
+    "playwright": "1.64.1",
+    "bun-plugin-tailwind": "0.1.2",
+    "zod": "4.6.5",
+    "y-codemirror.next": "0.3.6",
+    "y-protocols": "1.0.7",
+    "yjs": "13.6.33"
+  },
   "license": "AGPL-3.0-or-later",
-  "repository": { "type": "git", "url": "git+https://github.com/k2b-dev/cloud.git", "directory": "packages/editor" },
-  "publishConfig": { "access": "public" }
+  "author": "Valentin Kolb",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/k2b-dev/cloud.git",
+    "directory": "packages/editor"
+  },
+  "homepage": "https://github.com/k2b-dev/cloud/tree/main/packages/editor",
+  "bugs": "https://github.com/k2b-dev/cloud/issues",
+  "keywords": [
+    "solid",
+    "solidjs",
+    "editor",
+    "markdown",
+    "codemirror",
+    "toolbar"
+  ],
+  "files": [
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/**/*.fixture.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/src/BubbleMenu.tsx

@@ -0,0 +1,126 @@
+import { Prec } from "@codemirror/state";
+import { EditorView, keymap } from "@codemirror/view";
+import { SelectionToolbar, Toolbar, useLocale } from "@k2b/ui";
+import { createSignal, For, type JSX, Show } from "solid-js";
+import type { EditorAction, EditorHandle } from "./editor-state";
+import { editorMessages } from "./messages";
+import { ToolbarButton } from "./Toolbar";
+
+export type BubbleMenuProps = {
+  editor: EditorHandle;
+  /** Groups of actions, separated by a line. */
+  groups: EditorAction[][];
+  /** Accessible name; defaults to "Selection". */
+  label?: string;
+  /** Extra controls after the actions, such as "Comment". */
+  children?: JSX.Element;
+  /** The area the menu stays in, such as the editor's scroll area under a toolbar. */
+  boundary?: () => HTMLElement | null | undefined;
+  /** Show the menu also in a read-only editor, for hosts whose children work there. Defaults to `false`. */
+  readOnly?: boolean;
+  class?: string;
+};
+
+/** The first line of a selection in viewport coordinates; the menu centers over it. */
+const selectionBox = (view: EditorView, from: number, to: number) => {
+  const start = view.coordsAtPos(from, 1);
+  const end = view.coordsAtPos(to, -1);
+  if (!start || !end) return null;
+  const sameLine = Math.abs(start.top - end.top) < 4;
+  const right = sameLine ? end.right : view.contentDOM.getBoundingClientRect().right;
+  return new DOMRect(start.left, start.top, Math.max(1, right - start.left), (sameLine ? end.bottom : start.bottom) - start.top);
+};
+
+/**
+ * A compact menu that floats at selected text. It opens when a selection settles, not while a pointer still drags
+ * it, and closes on Escape, a collapsed selection, or when the editor loses focus. On touch it sits below the
+ * selection, where the system's own selection menu does not cover it.
+ */
+export function BubbleMenu(props: BubbleMenuProps) {
+  const locale = useLocale();
+  const t = () => editorMessages.resolve([locale()]).t;
+  const [dragging, setDragging] = createSignal(false);
+  const [dismissed, setDismissed] = createSignal<unknown>();
+  const [geometry, setGeometry] = createSignal(0);
+  // Focus that moves from the text into the menu, such as Tab to a button or a host input, keeps it open.
+  const [menuFocused, setMenuFocused] = createSignal(false);
+  const dismiss = () => {
+    setDismissed(props.editor.state()?.selection);
+    props.editor.view()?.focus();
+  };
+
+  props.editor.use([
+    EditorView.domEventHandlers({
+      pointerdown: () => {
+        setDragging(true);
+        const release = () => {
+          setDragging(false);
+          document.removeEventListener("pointerup", release, true);
+          document.removeEventListener("pointercancel", release, true);
+        };
+        document.addEventListener("pointerup", release, true);
+        document.addEventListener("pointercancel", release, true);
+        return false;
+      },
+    }),
+    EditorView.updateListener.of((update) => {
+      if (update.geometryChanged || update.viewportChanged) setGeometry((value) => value + 1);
+    }),
+    // Escape in the text closes an open menu first; with no menu, the key keeps its other meanings.
+    Prec.high(
+      keymap.of([
+        {
+          key: "Escape",
+          run: () => {
+            if (!anchor()) return false;
+            dismiss();
+            return true;
+          },
+        },
+      ]),
+    ),
+  ]);
+
+  const anchor = () => {
+    geometry();
+    const view = props.editor.view();
+    const state = props.editor.state();
+    if (!view || !state || dragging() || !(props.editor.focused() || menuFocused())) return null;
+    if (state.readOnly && !props.readOnly) return null;
+    const range = state.selection.main;
+    if (range.empty || dismissed() === state.selection) return null;
+    return selectionBox(view, range.from, range.to);
+  };
+  const coarse = () => typeof window !== "undefined" && window.matchMedia("(pointer: coarse)").matches;
+
+  return (
+    <SelectionToolbar
+      label={props.label ?? t().selection}
+      anchor={anchor}
+      placement={coarse() ? "below" : "above"}
+      boundary={props.boundary}
+      class={props.class}
+      onEscape={dismiss}
+    >
+      <div
+        style={{ display: "contents" }}
+        onFocusIn={() => setMenuFocused(true)}
+        onFocusOut={(event) => {
+          if (!(event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget))) setMenuFocused(false);
+        }}
+      >
+        <For each={props.groups}>
+          {(group, index) => (
+            <>
+              <Show when={index() > 0}>
+                <Toolbar.Separator />
+              </Show>
+              <For each={group}>{(action) => <ToolbarButton editor={props.editor} action={action} size="sm" />}</For>
+            </>
+          )}
+        </For>
+        {props.children}
+      </div>
+    </SelectionToolbar>
+  );
+}

package/src/Editor.tsx

@@ -0,0 +1,32 @@
+import type { EditorView } from "@codemirror/view";
+import { TextEditor, type TextEditorProps } from "@k2b/ui/text-editor";
+import { onCleanup, splitProps } from "solid-js";
+import type { EditorHandle } from "./editor-state";
+
+export type EditorProps = TextEditorProps & {
+  /** Shared state from `createEditor()`; toolbars and menus placed elsewhere read and change the same editor. */
+  editor: EditorHandle;
+};
+
+/**
+ * The editing surface. It mounts `@k2b/ui`'s `TextEditor` with the handle's extensions, so every place added through
+ * `editor.use` reaches the view. All `TextEditor` props pass through unchanged.
+ */
+export function Editor(props: EditorProps) {
+  const [local, rest] = splitProps(props, ["editor", "extensions", "onReady"]);
+  let mounted: EditorView | undefined;
+  onCleanup(() => {
+    if (mounted) local.editor.detach(mounted);
+  });
+  return (
+    <TextEditor
+      {...rest}
+      extensions={[local.editor.extension(), local.extensions ?? []]}
+      onReady={(controller, controls) => {
+        mounted = controller.view;
+        local.editor.attach(controller.view, { controller, controls });
+        local.onReady?.(controller, controls);
+      }}
+    />
+  );
+}

package/src/SlashMenu.tsx

@@ -0,0 +1,13 @@
+import type { EditorHandle } from "./editor-state";
+import { type SlashMenuOptions, slashMenu } from "./slash-menu";
+
+export type SlashMenuProps = SlashMenuOptions & { editor: EditorHandle };
+
+/**
+ * The slash menu as a place of the shared editor. It renders at the caret, so it has no markup of its own here; the
+ * actions and sources it reads are tracked, and a new list reconfigures only this menu.
+ */
+export function SlashMenu(props: SlashMenuProps) {
+  props.editor.use(() => slashMenu({ actions: props.actions, sources: props.sources }));
+  return null;
+}

package/src/Toolbar.tsx

@@ -0,0 +1,205 @@
+import { EditorView } from "@codemirror/view";
+import { Dropdown, type DropdownPosition, IconButton, Tooltip, Toolbar as UiToolbar, useLocale } from "@k2b/ui";
+import { createSignal, For, type JSX, onCleanup, onMount, Show } from "solid-js";
+import { ariaShortcut, shortcutLabel } from "./actions";
+import type { EditorAction, EditorHandle } from "./editor-state";
+import { editorMessages } from "./messages";
+
+/** A menu of actions behind one icon trigger, such as "More". */
+export type ToolbarMenu = {
+  kind: "menu";
+  id: string;
+  icon: string;
+  label: string;
+  sections: { label?: string; actions: EditorAction[] }[];
+  position?: DropdownPosition;
+  width?: string;
+};
+/** Host-rendered control that needs more than an action, such as a style picker; it reads the same handle. */
+export type ToolbarCustom = { kind: "custom"; id: string; render: () => JSX.Element };
+export type ToolbarItem = EditorAction | ToolbarMenu | ToolbarCustom;
+export type ToolbarGroup = {
+  label?: string;
+  class?: string;
+  /** Class of the separator after this group; the last group has none. */
+  separatorClass?: string;
+  items: ToolbarItem[];
+};
+
+export type ToolbarProps = {
+  editor: EditorHandle;
+  groups: ToolbarGroup[];
+  /** Accessible name of the action row; defaults to "Formatting". */
+  label?: string;
+  /** Controls before and after the action row, such as navigation or a sync status. */
+  start?: JSX.Element;
+  end?: JSX.Element;
+  class?: string;
+  /** Class of the scrolling action row inside. */
+  toolsClass?: string;
+  /**
+   * On touch screens with an open keyboard, lift the toolbar to the keyboard's top edge while the editor has focus,
+   * and give up the same height in the page above it, so the caret line stays visible.
+   */
+  liftAboveKeyboard?: boolean;
+};
+
+const isMenu = (item: ToolbarItem): item is ToolbarMenu => "kind" in item && item.kind === "menu";
+const isCustom = (item: ToolbarItem): item is ToolbarCustom => "kind" in item && item.kind === "custom";
+
+/** One icon button for an action, with its shortcut in the tooltip and the pressed and disabled state of the editor. */
+export function ToolbarButton(props: { editor: EditorHandle; action: EditorAction; size?: "xs" | "sm" }) {
+  const locale = useLocale();
+  const t = () => editorMessages.resolve([locale()]).t;
+  const enabled = () => props.editor.isEnabled(props.action);
+  return (
+    <Tooltip.Anchor
+      content={
+        props.action.shortcut
+          ? t().withShortcut({ label: props.action.label, keys: shortcutLabel(props.action.shortcut, locale()) })
+          : props.action.label
+      }
+    >
+      <IconButton
+        label={props.action.label}
+        tooltip={false}
+        size={props.size ?? "xs"}
+        aria-pressed={props.action.isActive ? (props.editor.isActive(props.action) ? "true" : "false") : undefined}
+        aria-disabled={enabled() ? undefined : "true"}
+        aria-keyshortcuts={props.action.shortcut ? ariaShortcut(props.action.shortcut) : undefined}
+        onClick={() => void props.editor.run(props.action)}
+        class="text-dimmed"
+      >
+        <i class={`ti ${props.action.icon} text-sm`} aria-hidden="true" />
+      </IconButton>
+    </Tooltip.Anchor>
+  );
+}
+
+function ToolbarMenuButton(props: { editor: EditorHandle; menu: ToolbarMenu; coarse: boolean }) {
+  const locale = useLocale();
+  // On touch screens a controlled menu opens on a tap without taking focus, so the note keeps focus and the keyboard.
+  const [open, setOpen] = createSignal(false);
+  return (
+    <Dropdown.Root
+      open={props.coarse ? open() : undefined}
+      onOpenChange={setOpen}
+      position={props.menu.position ?? "top-right"}
+      width={props.menu.width}
+      items={props.menu.sections.map((section) => ({
+        sectionLabel: section.label,
+        items: section.actions.map((action) => ({
+          icon: `ti ${action.icon}`,
+          label: action.label,
+          description: action.shortcut ? shortcutLabel(action.shortcut, locale()) : undefined,
+          disabled: !props.editor.isEnabled(action),
+          action: () => void props.editor.run(action),
+        })),
+      }))}
+    >
+      <Dropdown.Trigger iconOnly label={props.menu.label} size="xs" class="text-dimmed" tooltip={props.menu.label}>
+        <i class={`ti ${props.menu.icon} text-sm`} aria-hidden="true" />
+      </Dropdown.Trigger>
+    </Dropdown.Root>
+  );
+}
+
+/**
+ * A formatting toolbar for the shared editor, placed wherever the host wants it. Pressing a control keeps focus and
+ * selection in the editor; every action stays apart from the surrounding typing in the undo history.
+ */
+export function Toolbar(props: ToolbarProps) {
+  const locale = useLocale();
+  const t = () => editorMessages.resolve([locale()]).t;
+  const [coarse, setCoarse] = createSignal(false);
+  const [lift, setLift] = createSignal(0);
+  let root!: HTMLDivElement;
+
+  onMount(() => {
+    const pointer = window.matchMedia("(pointer: coarse)");
+    setCoarse(pointer.matches);
+    const viewport = window.visualViewport;
+    let disposed = false;
+    // A phone keyboard covers the bottom of the page and shrinks only the visual viewport. Fine pointers never lift.
+    // Coarse pointers lift only after losing at least 15% of the page height, so the shortcuts bar of a hardware
+    // keyboard does not lift it. While zoomed, the toolbar stays in flow.
+    const measure = () => {
+      if (disposed || !viewport || !props.liftAboveKeyboard) return;
+      const view = props.editor.view();
+      const focused =
+        !!view && (view.hasFocus || view.contentDOM.contains(document.activeElement) || root.contains(document.activeElement));
+      const inFlowBottom = root.getBoundingClientRect().bottom + lift();
+      const pageHeight = document.documentElement.clientHeight;
+      const keyboardOpen = viewport.scale === 1 && pageHeight - viewport.height > pageHeight * 0.15;
+      const next = pointer.matches && focused && keyboardOpen ? Math.max(0, inFlowBottom - viewport.offsetTop - viewport.height) : 0;
+      const previous = lift();
+      if (Math.abs(next - previous) < 0.5) return;
+      setLift(next);
+      // A shorter page may hide the caret line; CodeMirror brings it back after it measured the new height.
+      if (view && next > previous) view.dispatch({ effects: EditorView.scrollIntoView(view.state.selection.main.head) });
+    };
+    const pointerChanged = () => {
+      setCoarse(pointer.matches);
+      measure();
+    };
+    // Picking an item returns focus to the trigger and then the editor within one task. Measuring between drops the lift.
+    const afterFocus = () => queueMicrotask(measure);
+    pointer.addEventListener("change", pointerChanged);
+    viewport?.addEventListener("resize", measure);
+    viewport?.addEventListener("scroll", measure);
+    window.addEventListener("resize", measure);
+    window.addEventListener("scroll", measure);
+    document.addEventListener("focusin", afterFocus);
+    document.addEventListener("focusout", afterFocus);
+    onCleanup(() => {
+      disposed = true;
+      pointer.removeEventListener("change", pointerChanged);
+      viewport?.removeEventListener("resize", measure);
+      viewport?.removeEventListener("scroll", measure);
+      window.removeEventListener("resize", measure);
+      window.removeEventListener("scroll", measure);
+      document.removeEventListener("focusin", afterFocus);
+      document.removeEventListener("focusout", afterFocus);
+    });
+    // A toolbar mounted with the keyboard already open lifts at once.
+    measure();
+  });
+
+  return (
+    // Pointer presses on any control, menu items included, keep focus and selection in the editor. A native listener,
+    // because the menus are popovers inside this element and must not depend on delegation reaching them.
+    <div
+      ref={root}
+      class={props.class ?? "k2b-editor-toolbar flex min-w-0 items-center gap-2 text-dimmed"}
+      style={{ "margin-bottom": lift() ? `${lift()}px` : undefined }}
+      on:mousedown={(event) => event.preventDefault()}
+    >
+      {props.start}
+      <UiToolbar label={props.label ?? t().formatting} class={props.toolsClass ?? "no-scrollbar min-w-0 flex-1 overflow-x-auto"}>
+        <For each={props.groups}>
+          {(group, index) => (
+            <>
+              <UiToolbar.Group label={group.label} class={group.class ?? "shrink-0"}>
+                <For each={group.items}>
+                  {(item) =>
+                    isCustom(item) ? (
+                      item.render()
+                    ) : isMenu(item) ? (
+                      <ToolbarMenuButton editor={props.editor} menu={item} coarse={coarse()} />
+                    ) : (
+                      <ToolbarButton editor={props.editor} action={item} />
+                    )
+                  }
+                </For>
+              </UiToolbar.Group>
+              <Show when={index() < props.groups.length - 1}>
+                <UiToolbar.Separator class={group.separatorClass} />
+              </Show>
+            </>
+          )}
+        </For>
+      </UiToolbar>
+      {props.end}
+    </div>
+  );
+}

package/src/actions.ts

@@ -0,0 +1,102 @@
+import { syntaxTree } from "@codemirror/language";
+import type { EditorState } from "@codemirror/state";
+import type { EditorView } from "@codemirror/view";
+import { formatShortcut, keyboardPlatform } from "@k2b/ui";
+import { type InlineFormat, textEditorCommands } from "@k2b/ui/text-editor";
+import type { EditorAction, EditorHandle } from "./editor-state";
+import { editorMessages } from "./messages";
+
+/** Apple keyboards name the platform modifier Command; everyone else uses Control. */
+export const isApple = () => keyboardPlatform() === "apple";
+
+/** A CodeMirror key spec such as `Mod-Shift-z`, written with the shared key names (`⇧⌘Z`, `Ctrl+Shift+Z`). */
+export const shortcutLabel = (keys: string, locale?: string) => {
+  const minus = keys === "-" || keys.endsWith("--");
+  const parts = (minus ? keys.slice(0, -1) : keys).split("-");
+  if (minus) parts.pop();
+  const key = minus ? "-" : parts.pop();
+  return formatShortcut([...parts, key ?? ""].join("+"), { locale }).label;
+};
+
+/** The same keys in `aria-keyshortcuts` syntax, such as `Meta+Shift+2`. */
+export const ariaShortcut = (keys: string) =>
+  keys
+    .split("-")
+    .map((part) =>
+      part === "Mod" ? (isApple() ? "Meta" : "Control") : part === "Ctrl" ? "Control" : part.length === 1 ? part.toUpperCase() : part,
+    )
+    .join("+");
+
+/** Whether the selection head sits inside a syntax node with one of these names. */
+const inside = (state: EditorState, names: string[]) => {
+  for (
+    let node: ReturnType<typeof syntaxTree>["topNode"] | null = syntaxTree(state).resolveInner(state.selection.main.head, -1);
+    node;
+    node = node.parent
+  )
+    if (names.includes(node.name)) return true;
+  return false;
+};
+const lineStarts = (pattern: RegExp) => (state: EditorState) => pattern.test(state.doc.lineAt(state.selection.main.head).text);
+
+/**
+ * Markdown actions on `@k2b/ui`'s text editor commands, labelled in the locale. Hosts pick and order them per place
+ * and add their own; ids stay stable across locales. In a focused table cell, inline formats apply to the cell and
+ * block formats are off, because they would split the table row.
+ */
+export const markdownActions = (editor: EditorHandle, locale?: string) => {
+  const { t } = editorMessages.resolve(locale ? [locale] : []);
+  const inCell = () => !!editor.controls()?.tableActive();
+  const action = (
+    id: string,
+    icon: string,
+    label: string,
+    run: (view: EditorView) => boolean,
+    extra: Partial<EditorAction> & { cell?: InlineFormat } = {},
+  ): EditorAction => {
+    const { cell, ...rest } = extra;
+    return {
+      id,
+      icon,
+      label,
+      run: (view) => {
+        if (!cell || !editor.controls()?.formatCell(cell)) run(view);
+      },
+      isEnabled: cell ? undefined : () => !inCell(),
+      ...rest,
+    };
+  };
+  return {
+    bold: action("bold", "ti-bold", t.bold, textEditorCommands.bold, {
+      cell: "bold",
+      shortcut: "Mod-b",
+      isActive: (s) => inside(s, ["StrongEmphasis"]),
+    }),
+    italic: action("italic", "ti-italic", t.italic, textEditorCommands.italic, {
+      cell: "italic",
+      shortcut: "Mod-i",
+      isActive: (s) => inside(s, ["Emphasis"]),
+    }),
+    strikethrough: action("strikethrough", "ti-strikethrough", t.strikethrough, textEditorCommands.strike, {
+      cell: "strike",
+      shortcut: "Mod-Shift-x",
+      isActive: (s) => inside(s, ["Strikethrough"]),
+    }),
+    code: action("code", "ti-code", t.code, textEditorCommands.code, { cell: "code", isActive: (s) => inside(s, ["InlineCode"]) }),
+    link: action("link", "ti-link", t.link, textEditorCommands.link, {
+      cell: "link",
+      shortcut: "Mod-k",
+      isActive: (s) => inside(s, ["Link"]),
+    }),
+    heading1: action("heading1", "ti-h-1", t.heading1, textEditorCommands.heading1, { isActive: lineStarts(/^# /) }),
+    heading2: action("heading2", "ti-h-2", t.heading2, textEditorCommands.heading2, { isActive: lineStarts(/^## /) }),
+    heading3: action("heading3", "ti-h-3", t.heading3, textEditorCommands.heading3, { isActive: lineStarts(/^### /) }),
+    bulletList: action("bulletList", "ti-list", t.bulletList, textEditorCommands.bulletList, { isActive: lineStarts(/^\s*[-*] /) }),
+    numberedList: action("numberedList", "ti-list-numbers", t.numberedList, textEditorCommands.orderedList, {
+      isActive: lineStarts(/^\s*\d+\. /),
+    }),
+    quote: action("quote", "ti-quote", t.quote, textEditorCommands.quote, { isActive: lineStarts(/^> ?/) }),
+    codeBlock: action("codeBlock", "ti-code-plus", t.codeBlock, textEditorCommands.codeBlock),
+    table: action("table", "ti-table", t.table, textEditorCommands.table),
+  };
+};