@k2b/editor 0.0.0 → 0.1.1

package/src/markdown/theme.ts

@@ -0,0 +1,243 @@
+import { EditorView } from "@codemirror/view";
+import { tags as t } from "@lezer/highlight";
+import { type CreateThemeOptions, createTheme } from "@uiw/codemirror-themes";
+
+/**
+ * Layout / chrome styles — shared between rich and raw modes. Deliberately
+ * font-free so each mode can pick its own type system (rich = 16px sans
+ * with code-mark mono override, raw = 14px mono).
+ */
+const baseEditorCSS = EditorView.theme({
+  "&": {
+    overflow: "hidden",
+    flex: "1",
+    minHeight: "0",
+    height: "100%",
+  },
+  ".cm-line": {
+    cursor: "text",
+    maxWidth: "100%",
+    overflow: "visible",
+    padding: "0",
+  },
+  "&.cm-editor.cm-focused": { outline: "none" },
+  // The scroller, not the content, clips sideways: a Markdown table widget
+  // reaches past the text into the scroller's inline padding, so its lines and
+  // hover extend past the text as in the Book. The content keeps the text's
+  // edges, which CodeMirror draws selections from.
+  ".cm-scroller": {
+    overflow: "auto",
+    overflowX: "hidden",
+    maxWidth: "100%",
+    margin: "0 auto",
+  },
+  // The reading column of the app's stylesheet (`--editor-measure`), the
+  // same width as the Book's text. Each mode centers it in the free space.
+  ".cm-content": {
+    maxWidth: "min(100%, var(--editor-measure, 100%))",
+  },
+  ".cm-gutters": {
+    backgroundColor: "transparent",
+    border: "none",
+    marginRight: "12px",
+  },
+  // Gutter / line numbers always mono for tabular alignment, regardless
+  // of the rich/raw body font.
+  ".cm-gutterElement": {
+    color: "var(--color-gray-500)",
+    fontFamily: "var(--font-mono) !important",
+    fontSize: "12px",
+    paddingRight: "8px",
+  },
+  ".cm-lineNumbers .cm-gutterElement": {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingLeft: "8px",
+  },
+  ".cm-foldPlaceholder": { backgroundColor: "transparent", border: "none" },
+  ".cm-cursor": { borderLeftWidth: "2px" },
+  ".cm-cursor-primary": {
+    borderLeftWidth: "2px",
+    borderLeftColor: "oklch(62.3% 0.214 259.815)",
+  },
+});
+
+/**
+ * Rich-mode type: prose in Sans at the Book's size and line height, so a
+ * paragraph breaks into the same lines while writing and reading; code in Mono.
+ *
+ * `.cm-md-code` is applied per-range by `codeFontExtension` against the
+ * markdown syntax tree (FencedCode / InlineCode / CodeBlock nodes).
+ */
+const richFontCSS = EditorView.theme({
+  "&": { fontFamily: "var(--font-sans)", fontSize: "16px" },
+  ".cm-scroller": { lineHeight: "1.6" },
+  ".cm-line": { fontFamily: "var(--font-sans)" },
+  // The Book's code sizes (`.notebook-book-content pre` and inline `code`).
+  ".cm-md-code": { fontFamily: "var(--font-mono)", fontSize: "0.9em" },
+  ".cm-md-code.cm-md-code-block": { fontSize: "0.85em" },
+  ".cm-content": { marginInline: "auto" },
+  // CodeMirror wraps with `break-spaces`, where a space at the end of a line
+  // takes room and pushes the last word down. The Book lets it hang, so the
+  // editor does too and both break a paragraph at the same words. A run of
+  // spaces typed at a wrap point hangs past the column with the caret until
+  // the next word wraps; the text itself stays in place.
+  "&.cm-editor .cm-lineWrapping": { whiteSpace: "pre-wrap" },
+});
+
+/**
+ * Raw-mode type: full mono — raw mode is a literal source view, sans
+ * would obscure the markdown structure. The line numbers travel with the
+ * column, so numbers and text center together.
+ */
+const rawFontCSS = EditorView.theme({
+  "&": { fontFamily: "var(--font-mono)", fontSize: "14px" },
+  ".cm-line": { fontFamily: "var(--font-mono)" },
+  ".cm-gutters": { marginLeft: "auto" },
+  ".cm-content": { marginRight: "auto" },
+});
+
+/** The Book's text colors (`.notebook-book-shell`), so writing and reading look alike. */
+const lightText = "var(--color-zinc-950)";
+const darkText = "var(--color-zinc-100)";
+
+/**
+ * The heading scale of the Book (`.notebook-book-content` in the app's
+ * stylesheet). Headings, bold and italic keep the text color in both themes;
+ * only code is highlighted.
+ */
+const headingStyles: CreateThemeOptions["styles"] = [
+  { tag: t.heading1, fontSize: "1.875em", fontWeight: "650", lineHeight: "1.25" },
+  { tag: t.heading2, fontSize: "1.5em", fontWeight: "650", lineHeight: "1.3" },
+  { tag: t.heading3, fontSize: "1.25em", fontWeight: "650", lineHeight: "1.4" },
+  { tag: t.heading4, fontSize: "1.125em", fontWeight: "650" },
+  { tag: [t.heading5, t.heading6], fontSize: "1em", fontWeight: "650" },
+];
+
+const customLightStyle: CreateThemeOptions["styles"] = [
+  { tag: [t.standard(t.tagName), t.tagName], color: "#116329" },
+  { tag: [t.comment, t.bracket], color: "#6a737d" },
+  { tag: [t.className, t.propertyName], color: "#6f42c1" },
+  {
+    tag: [t.variableName, t.attributeName, t.number, t.operator],
+    color: "#005cc5",
+  },
+  {
+    tag: [t.keyword, t.typeName, t.typeOperator],
+    color: "#d73a49",
+  },
+  { tag: [t.string, t.regexp], color: "#032f62" },
+  { tag: [t.name, t.quote], color: "#22863a" },
+  { tag: [t.strong], fontWeight: "700" },
+  { tag: [t.emphasis], fontStyle: "italic" },
+  { tag: [t.deleted], color: "#b31d28", backgroundColor: "#ffeef0" },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: "#e36209" },
+  { tag: [t.url, t.escape, t.link], color: "#032f62" },
+  { tag: t.strikethrough, textDecoration: "line-through" },
+  { tag: t.invalid, color: "#cb2431" },
+  ...headingStyles,
+  { tag: t.meta, color: "var(--color-gray-400)" },
+];
+
+const customDarkStyle: CreateThemeOptions["styles"] = [
+  { tag: [t.standard(t.tagName), t.tagName], color: "#7ee787" },
+  { tag: [t.comment, t.bracket], color: "#8b949e" },
+  { tag: [t.className, t.propertyName], color: "#d2a8ff" },
+  {
+    tag: [t.variableName, t.attributeName, t.number, t.operator],
+    color: "#79c0ff",
+  },
+  {
+    tag: [t.keyword, t.typeName, t.typeOperator],
+    color: "#ff7b72",
+  },
+  { tag: [t.string, t.regexp], color: "#a5d6ff" },
+  { tag: [t.name, t.quote], color: "#7ee787" },
+  { tag: [t.strong], fontWeight: "700" },
+  { tag: [t.emphasis], fontStyle: "italic" },
+  { tag: [t.deleted], color: "#ffdcd7", backgroundColor: "#ffeef0" },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: "#ffab70" },
+  { tag: t.link, textDecoration: "underline" },
+  { tag: t.strikethrough, textDecoration: "line-through" },
+  { tag: t.invalid, color: "#f97583" },
+  ...headingStyles,
+  { tag: t.meta, color: "var(--color-gray-500)" },
+];
+
+export const customLightInit = (options?: Partial<CreateThemeOptions>) => {
+  const { theme = "light", settings = {}, styles = [] } = options ?? {};
+  return [
+    createTheme({
+      theme,
+      settings: {
+        background: "transparent",
+        foreground: lightText,
+        selection: "#BBDFFF",
+        selectionMatch: "#e4e4e7",
+        gutterBackground: "transparent",
+        gutterForeground: "#6e7781",
+        ...settings,
+      },
+      styles: [...customLightStyle, ...styles],
+    }),
+    baseEditorCSS,
+    richFontCSS,
+  ];
+};
+
+export const customDarkInit = (options?: Partial<CreateThemeOptions>) => {
+  const { theme = "dark", settings = {}, styles = [] } = options ?? {};
+  return [
+    createTheme({
+      theme,
+      settings: {
+        background: "transparent",
+        foreground: darkText,
+        caret: darkText,
+        selection: "#003d73",
+        selectionMatch: "#3f3f46",
+        gutterBackground: "transparent",
+        ...settings,
+      },
+      styles: [...customDarkStyle, ...styles],
+    }),
+    baseEditorCSS,
+    richFontCSS,
+  ];
+};
+
+/** Raw mode themes — editor CSS only, no syntax highlighting styles */
+export const rawLightInit = () => [
+  createTheme({
+    theme: "light",
+    settings: {
+      background: "transparent",
+      foreground: lightText,
+      selection: "#BBDFFF",
+      selectionMatch: "#e4e4e7",
+      gutterBackground: "transparent",
+      gutterForeground: "#6e7781",
+    },
+    styles: [],
+  }),
+  baseEditorCSS,
+  rawFontCSS,
+];
+
+export const rawDarkInit = () => [
+  createTheme({
+    theme: "dark",
+    settings: {
+      background: "transparent",
+      foreground: darkText,
+      caret: darkText,
+      selection: "#003d73",
+      selectionMatch: "#3f3f46",
+      gutterBackground: "transparent",
+    },
+    styles: [],
+  }),
+  baseEditorCSS,
+  rawFontCSS,
+];

package/src/markdown/urls.ts

@@ -0,0 +1,29 @@
+/** A source reference and the host's resolved destination. */
+export type MarkdownUrlKind = "image" | "link";
+export type MarkdownUrlOptions = {
+  /**
+   * Resolve application-owned schemes; ordinary URLs may be returned unchanged. For an image, the result may also be a
+   * `blob:` URL, such as one for an image the browser stores locally; links stay limited to safe protocols.
+   */
+  resolveUrl?: (kind: MarkdownUrlKind, ref: string) => string;
+  /** A reference link opened while keeping the editor selection. */
+  openLink?: (url: string, ref: string, label: string) => void;
+  /** An image opened by pointer or keyboard. */
+  openImage?: (image: HTMLImageElement, url: string, label: string) => void;
+  /** Show external image sources as links without fetching them. Defaults to false. */
+  foreignImagesAsLinks?: boolean;
+};
+
+const SAFE_URL_PROTOCOLS = new Set(["http:", "https:", "mailto:", "tel:"]);
+
+export const isSafeMarkdownUrl = (url: string): boolean => {
+  if (url.startsWith("//")) return false;
+  if (!/^[a-zA-Z][a-zA-Z\d+.-]*:/.test(url)) return true;
+  try {
+    return SAFE_URL_PROTOCOLS.has(new URL(url).protocol);
+  } catch {
+    return false;
+  }
+};
+
+export const extractAttachmentId = (url: string): string | null => /^attach:\/\/([0-9a-zA-Z]{6})$/.exec(url)?.[1] ?? null;

package/src/messages.ts

@@ -0,0 +1,45 @@
+import { i18n } from "@k2b/stdlib";
+
+export const editorMessages = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: {
+      formatting: "Formatting",
+      selection: "Selection",
+      insert: "Insert",
+      bold: "Bold",
+      italic: "Italic",
+      strikethrough: "Strikethrough",
+      code: "Inline code",
+      link: "Link",
+      heading1: "Heading 1",
+      heading2: "Heading 2",
+      heading3: "Heading 3",
+      bulletList: "Bulleted list",
+      numberedList: "Numbered list",
+      quote: "Quote",
+      codeBlock: "Code block",
+      table: "Table",
+      withShortcut: ({ label, keys }: { label: string; keys: string }) => `${label} (${keys})`,
+    },
+    de: {
+      formatting: "Formatierung",
+      selection: "Auswahl",
+      insert: "Einfügen",
+      bold: "Fett",
+      italic: "Kursiv",
+      strikethrough: "Durchgestrichen",
+      code: "Code im Text",
+      link: "Link",
+      heading1: "Überschrift 1",
+      heading2: "Überschrift 2",
+      heading3: "Überschrift 3",
+      bulletList: "Aufzählung",
+      numberedList: "Nummerierte Liste",
+      quote: "Zitat",
+      codeBlock: "Codeblock",
+      table: "Tabelle",
+      withShortcut: ({ label, keys }) => `${label} (${keys})`,
+    },
+  },
+});

package/src/slash-menu.ts

@@ -0,0 +1,220 @@
+import {
+  autocompletion,
+  type Completion,
+  type CompletionContext,
+  type CompletionResult,
+  type CompletionSource,
+  pickedCompletion,
+} from "@codemirror/autocomplete";
+import type { Extension } from "@codemirror/state";
+import { type EditorView, ViewPlugin } from "@codemirror/view";
+import { fuzzy } from "@k2b/stdlib";
+import type { EditorAction } from "./editor-state";
+
+/** One entry of the slash menu: an editor action reached by typing `/` and its name. */
+export type SlashAction = Omit<EditorAction, "run"> & {
+  /** What a person types after `/`: lowercase, no spaces. */
+  name: string;
+  /** One line after the label. */
+  description?: string;
+  /** Further names that match exactly, such as `img` for an image action. */
+  aliases?: string[];
+  /**
+   * A suffix after the name, such as `2x4` in `/table2x4`. Without it, only the bare name matches exactly; with it,
+   * `run` receives the match for a typed suffix and `undefined` for the bare name.
+   */
+  params?: RegExp;
+  /** `true` inserts at the caret; otherwise an action typed mid-line starts on a new line. */
+  inline?: boolean;
+  /** Runs after the typed `/name` left the document. */
+  run: (view: EditorView, params?: RegExpMatchArray) => void | Promise<void>;
+};
+
+export type SlashMenuOptions = {
+  actions: SlashAction[];
+  /**
+   * Further completion sources that share the popup, such as links or tags. CodeMirror shows one completion popup per
+   * editor, so every source the host wants lives in this list; a source that throws only drops its own options.
+   */
+  sources?: { name: string; source: CompletionSource }[];
+};
+
+/** `/name` after the line start or a space; group 1 is the space, group 2 the typed name and suffix. */
+const trigger = /(^|\s)\/(\w*)$/;
+/** stdlib's fuzzy scores run up to about 100; below this, accidental subsequence matches crowd the list. */
+const minimumScore = 25;
+
+type SlashCompletion = Completion & { slashAction: SlashAction; parsedParams?: RegExpMatchArray };
+
+const matchExact = (action: SlashAction, typed: string): { params?: RegExpMatchArray } | null => {
+  const lower = typed.toLowerCase();
+  const names = [action.name, ...(action.aliases ?? [])];
+  if (names.some((name) => name.toLowerCase() === lower)) return { params: undefined };
+  if (!action.params) return null;
+  for (const name of names) {
+    if (!lower.startsWith(name.toLowerCase())) continue;
+    const suffix = typed.slice(name.length);
+    const match = suffix ? action.params.exec(suffix) : null;
+    if (match) return { params: match };
+  }
+  return null;
+};
+
+// CodeMirror accepts pointer-picked options on mousedown. Opening another popover before mouseup lets that same
+// press light-dismiss it in WebKit, so actions picked with a pointer run after the release.
+const pointerRuns = new WeakMap<EditorView, (() => void)[]>();
+const pointerTiming = ViewPlugin.define((view) => {
+  let alive = true;
+  const press = (event: MouseEvent) => {
+    if (event.button === 0 && event.target instanceof Element && event.target.closest(".cm-tooltip-autocomplete"))
+      pointerRuns.set(view, []);
+  };
+  const release = () => {
+    const pending = pointerRuns.get(view);
+    pointerRuns.delete(view);
+    if (pending?.length)
+      queueMicrotask(() => {
+        if (alive) for (const run of pending) run();
+      });
+  };
+  view.dom.addEventListener("mousedown", press, true);
+  view.dom.ownerDocument.addEventListener("mouseup", release, true);
+  return {
+    destroy() {
+      alive = false;
+      pointerRuns.delete(view);
+      view.dom.removeEventListener("mousedown", press, true);
+      view.dom.ownerDocument.removeEventListener("mouseup", release, true);
+    },
+  };
+});
+
+const completion = (action: SlashAction, parsedParams?: RegExpMatchArray): SlashCompletion => ({
+  label: `/${action.name}`,
+  displayLabel: action.label,
+  detail: action.description,
+  slashAction: action,
+  parsedParams,
+  apply: (view, picked, from, to) => {
+    // A block action typed after text starts on a fresh line; the newline replaces the typed `/name`.
+    const line = view.state.doc.lineAt(from);
+    const midLine = line.text.slice(0, from - line.from).trim().length > 0;
+    view.dispatch({
+      changes: { from, to, insert: midLine && !action.inline ? "\n" : "" },
+      annotations: pickedCompletion.of(picked),
+      userEvent: "input.complete",
+    });
+    // Run after autocomplete updated: an action that opens a dialog inside the same update re-enters CodeMirror.
+    const run = () => void action.run(view, parsedParams);
+    const pending = pointerRuns.get(view);
+    if (pending) pending.push(run);
+    else queueMicrotask(run);
+  },
+});
+
+/** The slash source alone, for hosts that compose their own autocompletion. */
+export const slashCompletionSource = (actions: SlashAction[]) => {
+  const haystacks = new Map(actions.map((action) => [action, [action.name, action.label, ...(action.aliases ?? [])].join(" ")]));
+  return (context: CompletionContext): CompletionResult | null => {
+    const line = context.state.doc.lineAt(context.pos);
+    const match = trigger.exec(line.text.slice(0, context.pos - line.from));
+    if (!match) return null;
+    const typed = match[2] ?? "";
+    const from = line.from + match.index + (match[1] ?? "").length;
+    const enabled = actions.filter((action) => action.isEnabled?.(context.state) !== false);
+    const options: SlashCompletion[] = [];
+    if (!typed) for (const action of enabled) options.push(completion(action));
+    else {
+      // Exact names and parameter matches come first, then fuzzy matches by score.
+      const exact = new Set<SlashAction>();
+      for (const action of enabled) {
+        const found = matchExact(action, typed);
+        if (!found) continue;
+        options.push(completion(action, found.params));
+        exact.add(action);
+      }
+      for (const hit of fuzzy.filter(
+        typed,
+        enabled.filter((action) => !exact.has(action)),
+        { key: (action) => haystacks.get(action) ?? action.name },
+      ))
+        if (hit.score >= minimumScore) options.push(completion(hit.item));
+    }
+    return { from, to: context.pos, filter: false, options };
+  };
+};
+
+/** Default icons for completions of other sources without one. */
+const typeIcons: Record<string, string> = {
+  method: "ti-math-function",
+  function: "ti-math-function",
+  property: "ti-circle-dot",
+  namespace: "ti-category",
+  class: "ti-cube",
+  keyword: "ti-braces",
+  constant: "ti-pennant",
+  variable: "ti-variable",
+};
+const iconOf = (option: Completion) =>
+  (option as SlashCompletion).slashAction?.icon ??
+  (option as Completion & { completionIcon?: string }).completionIcon ??
+  (option.type ? typeIcons[option.type] : undefined) ??
+  "ti-command";
+
+const iconRenderer = {
+  position: 20,
+  render: (option: Completion): Node => {
+    const icon = document.createElement("i");
+    icon.className = `ti ${iconOf(option)} cm-slash-icon`;
+    icon.setAttribute("aria-hidden", "true");
+    return icon;
+  },
+};
+const detailRenderer = {
+  position: 70,
+  render: (option: Completion): Node => {
+    const detail = document.createElement("span");
+    if (!option.detail) return detail;
+    detail.className = "cm-completion-detail";
+    detail.textContent = option.detail;
+    return detail;
+  },
+};
+
+/** A source that throws returns nothing instead of ending the whole popup, and the error stays visible in the console. */
+const safe =
+  (name: string, source: CompletionSource): CompletionSource =>
+  (context) => {
+    try {
+      const result = source(context);
+      if (result instanceof Promise)
+        return result.catch((error: unknown) => {
+          console.error(`[autocomplete:${name}]`, error);
+          return null;
+        });
+      return result;
+    } catch (error) {
+      console.error(`[autocomplete:${name}]`, error);
+      return null;
+    }
+  };
+
+/**
+ * The slash menu as a CodeMirror extension: `/` at the line start or after a space opens the actions, typing filters
+ * them by exact name first and then fuzzily, ↑↓ ⏎ ⎋ work as in any completion popup. It owns the editor's one
+ * completion popup; pass further sources through `sources`.
+ */
+export const slashMenu = (options: SlashMenuOptions): Extension => [
+  pointerTiming,
+  autocompletion({
+    override: [
+      safe("slash", slashCompletionSource(options.actions)),
+      ...(options.sources ?? []).map((entry) => safe(entry.name, entry.source)),
+    ],
+    activateOnTyping: true,
+    selectOnOpen: true,
+    closeOnBlur: true,
+    icons: false,
+    addToOptions: [iconRenderer, detailRenderer],
+  }),
+];