@aleph-alpha/chat-kit 5.13.0 → 6.1.0

package/src/components/base/CkMilkdownEditor/codeMirrorTheme.ts

@@ -0,0 +1,132 @@
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import type { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { tags as t } from '@lezer/highlight';
+
+/**
+ * Same monospace stack as `UiCodeBlock` in ui-library, so code in the editor
+ * and in the rendered message uses identical glyph metrics.
+ */
+export const CODE_FONT_FAMILY =
+  "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace";
+
+// Every colour is a CSS custom property so the light and dark palettes live in
+// `milkdown-theme.css` (`.ck-milkdown` / `html.dark .ck-milkdown`) and switch
+// with the rest of the design tokens — no JavaScript theme swap needed.
+const cssVar = (name: string): string => `var(--ck-cm-${name})`;
+
+/**
+ * Token → colour mapping approximating Shiki's `github-light` / `github-dark`
+ * themes, which `UiCodeBlock` uses, so highlighted code looks the same in the
+ * editor and in `CkMarkdownRenderer`.
+ */
+export const ckHighlightStyle = HighlightStyle.define([
+  {
+    tag: [
+      t.keyword,
+      t.modifier,
+      t.controlKeyword,
+      t.definitionKeyword,
+      t.moduleKeyword,
+      t.operatorKeyword,
+    ],
+    color: cssVar('keyword'),
+  },
+  {
+    tag: [t.string, t.special(t.string), t.regexp, t.escape, t.character],
+    color: cssVar('string'),
+  },
+  {
+    tag: [t.comment, t.lineComment, t.blockComment, t.docComment],
+    color: cssVar('comment'),
+  },
+  {
+    tag: [
+      t.function(t.variableName),
+      t.function(t.propertyName),
+      t.definition(t.function(t.variableName)),
+    ],
+    color: cssVar('function'),
+  },
+  {
+    tag: [
+      t.number,
+      t.bool,
+      t.null,
+      t.atom,
+      t.constant(t.name),
+      t.constant(t.variableName),
+      t.propertyName,
+      t.attributeName,
+      t.attributeValue,
+    ],
+    color: cssVar('constant'),
+  },
+  {
+    tag: [
+      t.typeName,
+      t.className,
+      t.namespace,
+      t.definition(t.variableName),
+      t.self,
+    ],
+    color: cssVar('entity'),
+  },
+  { tag: [t.tagName, t.angleBracket], color: cssVar('tag') },
+  {
+    tag: [t.variableName, t.operator, t.punctuation, t.bracket, t.separator],
+    color: cssVar('foreground'),
+  },
+  { tag: t.heading, fontWeight: 'bold' },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.link, textDecoration: 'underline' },
+  { tag: t.invalid, color: cssVar('error') },
+]);
+
+/**
+ * CodeMirror extension bundling the editor chrome (`UiCodeBlock`-like metrics:
+ * 14px mono text, 1.625 line height, 1rem padding, no gutter) with
+ * {@link ckHighlightStyle}. Pass it as the Crepe `CodeMirror` feature `theme`.
+ */
+export const ckCodeMirrorTheme: Extension = [
+  EditorView.theme({
+    '&': {
+      backgroundColor: cssVar('bg'),
+      color: cssVar('foreground'),
+    },
+    '.cm-scroller': {
+      fontFamily: CODE_FONT_FAMILY,
+      fontSize: '0.875rem',
+      lineHeight: '1.625',
+    },
+    '.cm-content': {
+      padding: '1rem',
+      caretColor: cssVar('foreground'),
+    },
+    '.cm-line': {
+      padding: '0',
+    },
+    '.cm-gutters': {
+      display: 'none',
+    },
+    '.cm-cursor, .cm-dropCursor': {
+      borderLeftColor: cssVar('foreground'),
+    },
+    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':
+      {
+        backgroundColor: cssVar('selection'),
+      },
+    '.cm-activeLine': {
+      backgroundColor: 'transparent',
+    },
+    '&.cm-focused': {
+      outline: 'none',
+    },
+    '.cm-matchingBracket, .cm-nonmatchingBracket': {
+      backgroundColor: 'transparent',
+      outline: `1px solid ${cssVar('comment')}`,
+    },
+  }),
+  syntaxHighlighting(ckHighlightStyle),
+];

package/src/components/base/CkMilkdownEditor/createCrepeEditor.ts

@@ -0,0 +1,192 @@
+import { Crepe, CrepeFeature, type CrepeConfig } from '@milkdown/crepe';
+import { editorViewCtx, editorViewOptionsCtx } from '@milkdown/kit/core';
+import { replaceAll } from '@milkdown/kit/utils';
+import {
+  defaultChatKitLabels,
+  type ChatKitLabels,
+} from '../../../handlers/useChatKitLabels';
+import type { CkMarkdownElementClasses } from '../CkMarkdownRenderer';
+import { ckCodeMirrorTheme } from './codeMirrorTheme';
+import { crepeIcons } from './crepeIcons';
+import { applyMarkdownClasses } from './markdownClassAttrs';
+
+// Crepe's per-feature stylesheets, imported individually. `reset.css` (part of
+// the bundled `theme/common/style.css`) is deliberately skipped: it styles
+// headings, paragraphs, code, links and quotes with two-class selectors that
+// would beat the utility classes `applyMarkdownClasses` puts on the nodes, and
+// it forces a 60px/120px document padding. `milkdown-theme.css` replaces it
+// and maps Crepe's `--crepe-*` variables to design tokens. It is imported last
+// so its rules win ties.
+import '@milkdown/crepe/theme/common/prosemirror.css';
+import '@milkdown/crepe/theme/common/cursor.css';
+import '@milkdown/crepe/theme/common/placeholder.css';
+import '@milkdown/crepe/theme/common/list-item.css';
+import '@milkdown/crepe/theme/common/link-tooltip.css';
+import '@milkdown/crepe/theme/common/toolbar.css';
+import '@milkdown/crepe/theme/common/code-mirror.css';
+import './milkdown-theme.css';
+
+export interface CreateCrepeEditorOptions {
+  /** Element the editor is mounted into. */
+  root: HTMLElement;
+  /** Initial markdown. */
+  defaultValue: string;
+  placeholder?: string;
+  ariaLabel?: string;
+  /** Start in read-only mode (applied before the view is created). */
+  readonly?: boolean;
+  /** Fully merged per-tag class map (defaults + consumer overrides). */
+  classes: CkMarkdownElementClasses;
+  labels: ChatKitLabels;
+  /** Called (debounced by Milkdown) with the serialised document on change. */
+  onMarkdownUpdated: (markdown: string) => void;
+}
+
+/** Imperative surface `CkMilkdownEditor` drives; keeps Milkdown types out of the SFC. */
+export interface CrepeEditorHandle {
+  crepe: Crepe;
+  /** Replace the whole document with new markdown. */
+  setMarkdown: (markdown: string) => void;
+  getMarkdown: () => string;
+  setReadonly: (readonly: boolean) => void;
+  focus: () => void;
+  destroy: () => void;
+}
+
+type LabelKey = keyof typeof defaultChatKitLabels;
+
+function pickLabel(labels: ChatKitLabels, key: LabelKey): string {
+  return labels[key] ?? defaultChatKitLabels[key];
+}
+
+const FEATURES: Partial<Record<CrepeFeature, boolean>> = {
+  [Crepe.Feature.Cursor]: true,
+  [Crepe.Feature.ListItem]: true,
+  [Crepe.Feature.LinkTooltip]: true,
+  [Crepe.Feature.Placeholder]: true,
+  [Crepe.Feature.Toolbar]: true,
+  [Crepe.Feature.CodeMirror]: true,
+  [Crepe.Feature.BlockEdit]: false,
+  [Crepe.Feature.ImageBlock]: false,
+  [Crepe.Feature.Table]: false,
+  [Crepe.Feature.Latex]: false,
+  [Crepe.Feature.TopBar]: false,
+  [Crepe.Feature.AI]: false,
+};
+
+function buildFeatureConfigs(
+  options: CreateCrepeEditorOptions,
+): NonNullable<CrepeConfig['featureConfigs']> {
+  const { labels } = options;
+  return {
+    [Crepe.Feature.Toolbar]: {
+      boldIcon: crepeIcons.bold,
+      italicIcon: crepeIcons.italic,
+      strikethroughIcon: crepeIcons.strikethrough,
+      codeIcon: crepeIcons.code,
+      linkIcon: crepeIcons.link,
+      boldLabel: pickLabel(labels, 'markdownEditorBold'),
+      italicLabel: pickLabel(labels, 'markdownEditorItalic'),
+      strikethroughLabel: pickLabel(labels, 'markdownEditorStrikethrough'),
+      codeLabel: pickLabel(labels, 'markdownEditorInlineCode'),
+      linkLabel: pickLabel(labels, 'markdownEditorLink'),
+    },
+    [Crepe.Feature.LinkTooltip]: {
+      linkIcon: crepeIcons.copy,
+      editButton: crepeIcons.pencil,
+      removeButton: crepeIcons.trash,
+      confirmButton: crepeIcons.check,
+      inputPlaceholder: pickLabel(labels, 'markdownEditorLinkPlaceholder'),
+    },
+    [Crepe.Feature.ListItem]: {
+      bulletIcon: crepeIcons.bullet,
+      checkBoxCheckedIcon: crepeIcons.squareCheck,
+      checkBoxUncheckedIcon: crepeIcons.square,
+    },
+    [Crepe.Feature.Placeholder]: {
+      text: options.placeholder ?? '',
+      mode: 'doc',
+    },
+    [Crepe.Feature.CodeMirror]: {
+      // Crepe's defaults provide the CodeMirror language list; only the theme
+      // and the chrome are replaced.
+      theme: ckCodeMirrorTheme,
+      copyIcon: crepeIcons.copy,
+      copyText: pickLabel(labels, 'markdownEditorCopyCode'),
+      expandIcon: crepeIcons.chevronDown,
+      searchIcon: crepeIcons.search,
+      clearSearchIcon: crepeIcons.close,
+      searchPlaceholder: pickLabel(labels, 'markdownEditorSearchLanguage'),
+      noResultText: pickLabel(labels, 'markdownEditorNoLanguageFound'),
+    },
+  };
+}
+
+/**
+ * Build, configure and create a Crepe editor styled like `CkMarkdownRenderer`.
+ * Loaded lazily by `CkMilkdownEditor` so Milkdown stays out of the main chunk.
+ */
+export async function createCrepeEditor(
+  options: CreateCrepeEditorOptions,
+): Promise<CrepeEditorHandle> {
+  const crepe = new Crepe({
+    root: options.root,
+    defaultValue: options.defaultValue,
+    features: FEATURES,
+    featureConfigs: buildFeatureConfigs(options),
+  });
+
+  crepe.editor.config((ctx) => {
+    applyMarkdownClasses(ctx, options.classes);
+
+    // Give the contenteditable an accessible role and name. Milkdown may set
+    // its own attributes (e.g. `class`), so merge rather than replace.
+    ctx.update(editorViewOptionsCtx, (prev) => ({
+      ...prev,
+      attributes: (state) => {
+        const base =
+          typeof prev.attributes === 'function'
+            ? prev.attributes(state)
+            : prev.attributes;
+        return {
+          ...(base ?? {}),
+          role: 'textbox',
+          'aria-multiline': 'true',
+          ...(options.ariaLabel ? { 'aria-label': options.ariaLabel } : {}),
+        };
+      },
+    }));
+  });
+
+  crepe.on((api) => {
+    api.markdownUpdated((_ctx, markdown) => {
+      options.onMarkdownUpdated(markdown);
+    });
+  });
+
+  // Before `create()` this only records the flag; Crepe reads it when it
+  // builds the view, so the first render is already non-editable.
+  crepe.setReadonly(options.readonly ?? false);
+
+  await crepe.create();
+
+  return {
+    crepe,
+    setMarkdown: (markdown) => {
+      crepe.editor.action(replaceAll(markdown));
+    },
+    getMarkdown: () => crepe.getMarkdown(),
+    setReadonly: (readonly) => {
+      crepe.setReadonly(readonly);
+    },
+    focus: () => {
+      crepe.editor.action((ctx) => {
+        ctx.get(editorViewCtx).focus();
+      });
+    },
+    destroy: () => {
+      // Teardown is best-effort; a rejection here has nothing to report to.
+      crepe.destroy().catch(() => undefined);
+    },
+  };
+}

package/src/components/base/CkMilkdownEditor/crepeIcons.ts

@@ -0,0 +1,77 @@
+/**
+ * Inline SVG strings for the Crepe feature configs (toolbar, link tooltip,
+ * list markers, code block tools). Crepe expects raw markup, not components,
+ * so these mirror the Lucide icons ui-library's `UiIcon` renders — same
+ * 24×24 grid, 2px round strokes — to keep the editor visually consistent.
+ *
+ * Each shape carries its own `fill`/`stroke` presentation attributes because
+ * Crepe's stylesheet sets `fill` on the `<svg>` element, which would otherwise
+ * inherit into the paths and blot out stroke-only icons.
+ */
+
+const STROKE_ATTRS =
+  'fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
+
+function strokeIcon(shapes: string[]): string {
+  return `<svg class="ck-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">${shapes
+    .map((shape) => shape.replace('/>', ` ${STROKE_ATTRS}/>`))
+    .join('')}</svg>`;
+}
+
+export const crepeIcons = {
+  bold: strokeIcon([
+    '<path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"/>',
+  ]),
+  italic: strokeIcon([
+    '<line x1="19" x2="10" y1="4" y2="4"/>',
+    '<line x1="14" x2="5" y1="20" y2="20"/>',
+    '<line x1="15" x2="9" y1="4" y2="20"/>',
+  ]),
+  strikethrough: strokeIcon([
+    '<path d="M16 4H9a3 3 0 0 0-2.83 4"/>',
+    '<path d="M14 12a4 4 0 0 1 0 8H6"/>',
+    '<line x1="4" x2="20" y1="12" y2="12"/>',
+  ]),
+  code: strokeIcon([
+    '<polyline points="16 18 22 12 16 6"/>',
+    '<polyline points="8 6 2 12 8 18"/>',
+  ]),
+  link: strokeIcon([
+    '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>',
+    '<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>',
+  ]),
+  pencil: strokeIcon([
+    '<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>',
+    '<path d="m15 5 4 4"/>',
+  ]),
+  trash: strokeIcon([
+    '<path d="M3 6h18"/>',
+    '<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>',
+    '<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>',
+    '<line x1="10" x2="10" y1="11" y2="17"/>',
+    '<line x1="14" x2="14" y1="11" y2="17"/>',
+  ]),
+  check: strokeIcon(['<path d="M20 6 9 17l-5-5"/>']),
+  copy: strokeIcon([
+    '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>',
+    '<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
+  ]),
+  close: strokeIcon(['<path d="M18 6 6 18"/>', '<path d="m6 6 12 12"/>']),
+  square: strokeIcon(['<rect width="18" height="18" x="3" y="3" rx="2"/>']),
+  squareCheck: strokeIcon([
+    '<rect width="18" height="18" x="3" y="3" rx="2"/>',
+    '<path d="m9 12 2 2 4-4"/>',
+  ]),
+  chevronDown: strokeIcon(['<path d="m6 9 6 6 6-6"/>']),
+  search: strokeIcon([
+    '<circle cx="11" cy="11" r="8"/>',
+    '<path d="m21 21-4.3-4.3"/>',
+  ]),
+  /**
+   * Bullet marker approximating the browser's `list-style: disc` that
+   * `CkMarkdownRenderer` gets from the `list-disc` utility: a filled dot in the
+   * text colour.
+   */
+  bullet:
+    '<svg class="ck-icon ck-icon--bullet" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>',
+} as const;

package/src/components/base/CkMilkdownEditor/index.ts

@@ -0,0 +1,2 @@
+export { default as CkMilkdownEditor } from './CkMilkdownEditor.vue';
+export type * from './types';

package/src/components/base/CkMilkdownEditor/markdownClassAttrs.ts

@@ -0,0 +1,64 @@
+import type { Ctx } from '@milkdown/kit/ctx';
+import {
+  blockquoteAttr,
+  bulletListAttr,
+  codeBlockAttr,
+  emphasisAttr,
+  headingAttr,
+  hrAttr,
+  imageAttr,
+  inlineCodeAttr,
+  linkAttr,
+  listItemAttr,
+  orderedListAttr,
+  paragraphAttr,
+  strongAttr,
+} from '@milkdown/kit/preset/commonmark';
+import { strikethroughAttr } from '@milkdown/kit/preset/gfm';
+import type { CkMarkdownElementClasses } from '../CkMarkdownRenderer';
+
+type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+/** Minimal shape of the Milkdown `ctx` this module needs; eases unit testing. */
+export type AttrCtx = Pick<Ctx, 'set'>;
+
+function toAttrs(className: string | undefined): Record<string, string> {
+  return className ? { class: className } : {};
+}
+
+/**
+ * Feed the per-tag class map that `CkMarkdownRenderer` uses into Milkdown's
+ * node/mark attribute hooks, so the editor emits the same class names on the
+ * same elements. Must run inside `editor.config()` before the editor is
+ * created.
+ *
+ * `li` and `pre` are Crepe node views (list item block, CodeMirror block); the
+ * hooks below still register for them so a non-Crepe render path keeps parity,
+ * but inside `CkMilkdownEditor` those two are styled by `milkdown-theme.css`.
+ */
+export function applyMarkdownClasses(
+  ctx: AttrCtx,
+  classes: CkMarkdownElementClasses,
+): void {
+  ctx.set(paragraphAttr.key, () => toAttrs(classes.p));
+  ctx.set(headingAttr.key, (node) => {
+    const tag = `h${node.attrs.level as number}` as HeadingTag;
+    return toAttrs(classes[tag]);
+  });
+  ctx.set(blockquoteAttr.key, () => toAttrs(classes.blockquote));
+  ctx.set(hrAttr.key, () => toAttrs(classes.hr));
+  ctx.set(imageAttr.key, () => toAttrs(classes.img));
+  ctx.set(bulletListAttr.key, () => toAttrs(classes.ul));
+  ctx.set(orderedListAttr.key, () => toAttrs(classes.ol));
+  ctx.set(listItemAttr.key, () => toAttrs(classes.li));
+  // The code block hook returns attributes for both generated elements.
+  ctx.set(codeBlockAttr.key, () => ({
+    pre: toAttrs(classes.pre),
+    code: toAttrs(classes.code),
+  }));
+  ctx.set(inlineCodeAttr.key, () => toAttrs(classes.code));
+  ctx.set(linkAttr.key, () => toAttrs(classes.a));
+  ctx.set(strongAttr.key, () => toAttrs(classes.strong));
+  ctx.set(emphasisAttr.key, () => toAttrs(classes.em));
+  ctx.set(strikethroughAttr.key, () => toAttrs(classes.del));
+}