@reviewflow/ui 0.0.0-stage → 6.21.0

package/src/editor/alerts.ts

@@ -0,0 +1,105 @@
+import type { EditorState } from "@codemirror/state";
+import type { SyntaxNodeRef } from "@lezer/common";
+
+/**
+ * GitHub alerts (`> [!NOTE]` … `> [!CAUTION]`) are ordinary blockquotes to
+ * CommonMark, so they are read off a `Blockquote` node's first line rather than
+ * parsed by a block parser of their own, which would have to reimplement
+ * blockquote continuation and nesting. Ported from
+ * vscode-extension-markdown-beautiful-editor (`src/shared/alerts.ts`,
+ * `src/webview/cm/decorations/alerts.ts`).
+ */
+export type AlertType = "caution" | "important" | "note" | "tip" | "warning";
+
+const alertHeaderPattern =
+  /^>\s*\[!(?<type>NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*$/iu;
+
+export const parseAlertHeader = (line: string): AlertType | null => {
+  const type = alertHeaderPattern.exec(line)?.groups?.type;
+  return type === undefined ? null : (type.toLowerCase() as AlertType);
+};
+
+/**
+ * The classes for one line of an alert block. The header and the last line
+ * carry boundary classes, so the corners are rounded without a wrapper
+ * element: a line decoration has none to give.
+ */
+const alertLineClasses = (
+  type: AlertType,
+  index: number,
+  total: number,
+): string[] => {
+  const isLast = index === total - 1;
+  const classes =
+    index === 0
+      ? ["md-alert", `md-alert-${type}`, "alert-first"]
+      : ["md-alert-content", `md-alert-${type}`];
+  if (isLast) classes.push("alert-last");
+  if (isLast && index === 0) classes.push("alert-single");
+  return classes;
+};
+
+export interface AlertLine {
+  /** the line's start position */
+  from: number;
+  classes: string[];
+}
+
+export const alertLinesOfBlockquote = (
+  state: EditorState,
+  blockquote: SyntaxNodeRef,
+): AlertLine[] => {
+  const firstLine = state.doc.lineAt(blockquote.from);
+  const type = parseAlertHeader(firstLine.text);
+  if (type === null) return [];
+
+  const lastLine = state.doc.lineAt(
+    Math.max(blockquote.from, blockquote.to - 1),
+  );
+  const total = lastLine.number - firstLine.number + 1;
+
+  return Array.from({ length: total }, (_, index) => ({
+    from: state.doc.line(firstLine.number + index).from,
+    classes: alertLineClasses(type, index, total),
+  }));
+};
+
+export interface AlertHeaderMark {
+  from: number;
+  to: number;
+  className: "md-alert-type" | "md-syntax";
+}
+
+/**
+ * The `NOTE` label and its `[!` / `]` delimiters, in document positions. The
+ * leading `>` is a `QuoteMark` and is muted by the node map already.
+ */
+export const alertHeaderMarks = (
+  state: EditorState,
+  blockquote: SyntaxNodeRef,
+): AlertHeaderMark[] => {
+  const line = state.doc.lineAt(blockquote.from);
+  if (parseAlertHeader(line.text) === null) return [];
+
+  const open = line.text.indexOf("[!");
+  const close = line.text.indexOf("]", open);
+  if (open === -1 || close === -1) return [];
+
+  return [
+    {
+      from: line.from + open,
+      to: line.from + open + 2,
+      className: "md-syntax",
+    },
+    {
+      from: line.from + open + 2,
+      to: line.from + close,
+      className: "md-alert-type",
+    },
+    {
+      from: line.from + close,
+      to: line.from + close + 1,
+      className: "md-syntax",
+    },
+  ];
+};

package/src/editor/code-editor.native.tsx

@@ -0,0 +1,25 @@
+import { TextArea } from "alouette";
+import type { ReactNode } from "react";
+import type { CodeEditorProps } from "./code-editor.tsx";
+
+const noop = (): void => undefined;
+
+/** What metro picks on a native platform: CodeMirror needs a DOM, so a plain `TextArea`. */
+export function CodeEditor({
+  value,
+  onChange,
+  readOnly = false,
+  "aria-label": ariaLabel,
+  autoFocus = false,
+}: CodeEditorProps): ReactNode {
+  return (
+    <TextArea
+      aria-label={ariaLabel}
+      // oxlint-disable-next-line jsx-a11y/no-autofocus -- forwarded from the caller, as on web
+      autoFocus={autoFocus}
+      disabled={readOnly}
+      value={value}
+      onChangeText={onChange ?? noop}
+    />
+  );
+}

package/src/editor/code-editor.tsx

@@ -0,0 +1,112 @@
+import { EditorView } from "@codemirror/view";
+import { View } from "alouette";
+import type { ReactNode } from "react";
+import { useEffect, useEffectEvent, useRef } from "react";
+import type { CodeLanguage } from "./codeEditorExtensions.ts";
+import { codeEditorExtensions } from "./codeEditorExtensions.ts";
+import { changeBetween, externalUpdate } from "./extensions.ts";
+import "./markdown-editor.css";
+
+export interface CodeEditorProps {
+  value: string;
+  /** omitted for a read-only editor */
+  onChange?: (value: string) => void;
+  language: CodeLanguage;
+  readOnly?: boolean;
+  "aria-label": string;
+  /** on the column holding the editor, which stretches to fill it */
+  className?: string;
+  /** read at mount, like `readOnly` */
+  autoFocus?: boolean;
+  /**
+   * An offset in `value` to put the cursor at, and to focus. Applied when the
+   * number changes (and at mount), never on a keystroke; `null` leaves the
+   * selection alone.
+   */
+  cursor?: number | null;
+}
+
+/**
+ * Plain code (json or markdown, shown as it is) in CodeMirror, on the markdown
+ * editor's base and theme. **Web only**, mounted into a raw `div` for the
+ * reason `MarkdownEditor` gives; `code-editor.native.tsx` is the native
+ * fallback. `readOnly` and `language` are read at mount: remount by key to
+ * change them. A `value` that changes under a mounted editor is applied as one
+ * change and not reported back through `onChange`.
+ */
+export function CodeEditor({
+  value,
+  onChange,
+  language,
+  readOnly = false,
+  "aria-label": ariaLabel,
+  className,
+  autoFocus = false,
+  cursor = null,
+}: CodeEditorProps): ReactNode {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const emitChange = useEffectEvent((next: string) => onChange?.(next));
+  const readValue = useEffectEvent(() => value);
+  const autoFocusRef = useRef(autoFocus);
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (host === null) return undefined;
+    const view = new EditorView({
+      parent: host,
+      // see MarkdownEditor: the selection lives in the host's own tree
+      root: host.getRootNode() as Document | ShadowRoot,
+      doc: readValue(),
+      extensions: [
+        codeEditorExtensions({
+          language,
+          readOnly,
+          onChange: (next) => {
+            emitChange(next);
+          },
+        }),
+        EditorView.contentAttributes.of({ "aria-label": ariaLabel }),
+      ],
+    });
+    viewRef.current = view;
+    if (autoFocusRef.current) view.focus();
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+  }, [language, readOnly, ariaLabel]);
+
+  useEffect(() => {
+    const view = viewRef.current;
+    if (view === null) return;
+    const changes = changeBetween(view.state.doc.toString(), value);
+    if (changes === null) return;
+    view.dispatch({ changes, annotations: externalUpdate.of(true) });
+  }, [value]);
+
+  const readCursor = useEffectEvent(() => cursor);
+  useEffect(() => {
+    const view = viewRef.current;
+    const offset = readCursor();
+    if (view === null || offset === null) return;
+    view.dispatch({
+      selection: { anchor: Math.min(offset, view.state.doc.length) },
+      scrollIntoView: true,
+    });
+    view.focus();
+  }, [cursor, language, readOnly, ariaLabel]);
+
+  return (
+    <View className={className}>
+      <div
+        ref={hostRef}
+        className={
+          readOnly
+            ? "markdown-editor markdown-editor-code markdown-editor-readonly"
+            : "markdown-editor markdown-editor-code"
+        }
+      />
+    </View>
+  );
+}

package/src/editor/codeEditorExtensions.ts

@@ -0,0 +1,65 @@
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { json } from "@codemirror/lang-json";
+import { bracketMatching, indentOnInput } from "@codemirror/language";
+import {
+  highlightSelectionMatches,
+  search,
+  searchKeymap,
+} from "@codemirror/search";
+import type { Extension } from "@codemirror/state";
+import { EditorState } from "@codemirror/state";
+import { EditorView, drawSelection, keymap } from "@codemirror/view";
+import { codeHighlighting } from "./codeHighlight.ts";
+import { externalUpdate, markdownLanguage } from "./extensions.ts";
+
+export type CodeLanguage = "json" | "markdown";
+
+interface CodeEditorExtensionsOptions {
+  language: CodeLanguage;
+  readOnly: boolean;
+  onChange: (value: string) => void;
+}
+
+/**
+ * Plain code on the markdown editor's base: the same highlighting classes and
+ * the same frame (`markdown-editor.css`), but no styling of the text in place —
+ * the text is shown as it is. Chosen once at mount, like the markdown editor's:
+ * a caller switching `language` or `readOnly` remounts by key.
+ */
+export const codeEditorExtensions = ({
+  language,
+  readOnly,
+  onChange,
+}: CodeEditorExtensionsOptions): Extension[] => [
+  language === "json" ? json() : markdownLanguage(),
+  codeHighlighting,
+  EditorView.lineWrapping,
+  drawSelection(),
+  bracketMatching(),
+  highlightSelectionMatches(),
+  search({ top: true }),
+  EditorState.readOnly.of(readOnly),
+  EditorView.editable.of(!readOnly),
+  ...(readOnly
+    ? [keymap.of([...searchKeymap, ...defaultKeymap])]
+    : [
+        history(),
+        indentOnInput(),
+        ...(language === "json" ? [closeBrackets()] : []),
+        keymap.of([
+          ...closeBracketsKeymap,
+          ...searchKeymap,
+          ...historyKeymap,
+          ...defaultKeymap,
+        ]),
+        EditorView.updateListener.of((update) => {
+          const typed = update.transactions.some(
+            (transaction) =>
+              transaction.docChanged &&
+              transaction.annotation(externalUpdate) !== true,
+          );
+          if (typed) onChange(update.state.doc.toString());
+        }),
+      ]),
+];

package/src/editor/codeHighlight.ts

@@ -0,0 +1,71 @@
+import { cssLanguage } from "@codemirror/lang-css";
+import { htmlLanguage } from "@codemirror/lang-html";
+import { javascriptLanguage } from "@codemirror/lang-javascript";
+import { jsonLanguage } from "@codemirror/lang-json";
+import { yamlLanguage } from "@codemirror/lang-yaml";
+import type { TagStyle } from "@codemirror/language";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import type { Extension } from "@codemirror/state";
+import { tags } from "@lezer/highlight";
+
+/**
+ * Token classes for the code inside a fence and for the frontmatter's yaml.
+ * **Every style is scoped to a nested language**: `@lezer/markdown` tags its
+ * own nodes too (`heading1`, `strong`), and an unscoped style would paint prose
+ * a second time over the `md-*` classes. Classes, not colours: the palette is
+ * in `markdown-editor.css`, switched with the theme.
+ *
+ * Coarse on purpose — a parent tag catches its children, so a language emitting
+ * a tag nobody listed still lands somewhere sensible. Ported from
+ * vscode-extension-markdown-beautiful-editor (`src/webview/cm/codeHighlight.ts`).
+ */
+const codeTokenStyles: TagStyle[] = [
+  { tag: tags.comment, class: "tok-comment" },
+  { tag: tags.keyword, class: "tok-keyword" },
+  { tag: tags.string, class: "tok-string" },
+  {
+    tag: [
+      tags.number,
+      tags.bool,
+      tags.null,
+      tags.atom,
+      tags.unit,
+      tags.color,
+      tags.url,
+      tags.regexp,
+      tags.escape,
+    ],
+    class: "tok-constant",
+  },
+  { tag: tags.propertyName, class: "tok-property" },
+  {
+    tag: [tags.typeName, tags.className, tags.namespace, tags.labelName],
+    class: "tok-type",
+  },
+  {
+    tag: [
+      tags.function(tags.variableName),
+      tags.function(tags.propertyName),
+      tags.macroName,
+    ],
+    class: "tok-function",
+  },
+  { tag: tags.operator, class: "tok-operator" },
+  { tag: tags.invalid, class: "tok-invalid" },
+];
+
+const scopedLanguages = [
+  cssLanguage,
+  htmlLanguage,
+  javascriptLanguage,
+  jsonLanguage,
+  yamlLanguage,
+];
+
+export const codeHighlighters = scopedLanguages.map((language) =>
+  HighlightStyle.define(codeTokenStyles, { scope: language }),
+);
+
+export const codeHighlighting: Extension = codeHighlighters.map((highlighter) =>
+  syntaxHighlighting(highlighter),
+);

package/src/editor/commands.ts

@@ -0,0 +1,175 @@
+import { syntaxTree } from "@codemirror/language";
+import type {
+  EditorState,
+  SelectionRange,
+  StateCommand,
+} from "@codemirror/state";
+import { EditorSelection } from "@codemirror/state";
+import type { KeyBinding } from "@codemirror/view";
+import type { SyntaxNode } from "@lezer/common";
+import type { InlineFormat, InlineFormatChange } from "./inlineFormat.ts";
+import { inlineFormatChange } from "./inlineFormat.ts";
+import type { LineType } from "./lineTypes.ts";
+import { applyLinePrefix, stripLinePrefix } from "./lineTypes.ts";
+
+/**
+ * The toolbar's and the shortcuts' commands: the pure transforms of
+ * `inlineFormat.ts` and `lineTypes.ts` applied to every selection range. Ported
+ * from vscode-extension-markdown-beautiful-editor (`src/webview/cm/commands/`).
+ */
+const formatOfNode: Readonly<Record<string, InlineFormat>> = {
+  StrongEmphasis: "bold",
+  Emphasis: "italic",
+  InlineCode: "code",
+  Strikethrough: "strikethrough",
+  Link: "link",
+};
+
+/**
+ * The construct of `format` enclosing `position`, delimiters included: with no
+ * selection, a toggle acts on the whole `**bold**` the cursor is in.
+ */
+export const enclosingFormatRange = (
+  state: EditorState,
+  position: number,
+  format: InlineFormat,
+): { from: number; to: number } | null => {
+  for (
+    let node: SyntaxNode | null = syntaxTree(state).resolveInner(position, -1);
+    node;
+    node = node.parent
+  ) {
+    if (formatOfNode[node.name] === format) {
+      return { from: node.from, to: node.to };
+    }
+  }
+  return null;
+};
+
+/**
+ * After a wrap the selected text sits verbatim inside the insert, so the same
+ * text stays selected; after an unwrap the whole insert is what remains.
+ */
+const selectionOverSameText = (
+  lineFrom: number,
+  selected: string,
+  change: InlineFormatChange,
+): SelectionRange => {
+  const insertFrom = lineFrom + change.from;
+  const index =
+    change.insert.length > selected.length
+      ? change.insert.indexOf(selected)
+      : -1;
+  return index === -1
+    ? EditorSelection.range(insertFrom, insertFrom + change.insert.length)
+    : EditorSelection.range(
+        insertFrom + index,
+        insertFrom + index + selected.length,
+      );
+};
+
+interface RangeToggle {
+  changes: { from: number; to: number; insert: string };
+  range: SelectionRange;
+}
+
+const rangeToggle = (
+  state: EditorState,
+  range: SelectionRange,
+  format: InlineFormat,
+): RangeToggle | null => {
+  const target = range.empty
+    ? enclosingFormatRange(state, range.head, format)
+    : { from: range.from, to: range.to };
+  if (target === null) return null;
+
+  const line = state.doc.lineAt(target.from);
+  if (state.doc.lineAt(target.to).number !== line.number) return null;
+
+  const change = inlineFormatChange({
+    text: line.text,
+    from: target.from - line.from,
+    to: target.to - line.from,
+    format,
+  });
+  if (change === null) return null;
+
+  return {
+    changes: {
+      from: line.from + change.from,
+      to: line.from + change.to,
+      insert: change.insert,
+    },
+    range: range.empty
+      ? EditorSelection.cursor(line.from + change.selection)
+      : selectionOverSameText(
+          line.from,
+          state.doc.sliceString(target.from, target.to),
+          change,
+        ),
+  };
+};
+
+const overlaps = (
+  a: { from: number; to: number },
+  b: { from: number; to: number },
+): boolean => a.from < b.to && b.from < a.to;
+
+export const toggleInlineFormat =
+  (format: InlineFormat): StateCommand =>
+  ({ state, dispatch }) => {
+    // two cursors in one construct resolve to the same range and would each
+    // rewrite it, doubling the markers: the first one wins
+    const applied: { from: number; to: number }[] = [];
+    const transaction = state.changeByRange((range) => {
+      const toggle = rangeToggle(state, range, format);
+      if (
+        toggle === null ||
+        applied.some((span) => overlaps(span, toggle.changes))
+      ) {
+        return { range };
+      }
+      applied.push(toggle.changes);
+      return toggle;
+    });
+
+    if (applied.length === 0) return false;
+    dispatch(state.update(transaction, { scrollIntoView: true }));
+    return true;
+  };
+
+/** the line each cursor's head is on, rewritten once even under two cursors */
+export const setLineType =
+  (type: LineType): StateCommand =>
+  ({ state, dispatch }) => {
+    const rewritten = new Set<number>();
+    const transaction = state.changeByRange((range) => {
+      const line = state.doc.lineAt(range.head);
+      if (rewritten.has(line.from)) {
+        return { range: EditorSelection.cursor(line.from) };
+      }
+      const insert = applyLinePrefix(stripLinePrefix(line.text), type);
+      if (insert === line.text) return { range };
+      rewritten.add(line.from);
+      return {
+        changes: { from: line.from, to: line.to, insert },
+        range: EditorSelection.cursor(line.from),
+      };
+    });
+
+    if (rewritten.size === 0) return false;
+    dispatch(state.update(transaction, { scrollIntoView: true }));
+    return true;
+  };
+
+/**
+ * Mod-i is `selectParentSyntax` in the default keymap, so this keymap is
+ * installed above it (see `extensions.ts`).
+ */
+export const formattingKeymap: KeyBinding[] = [
+  { key: "Mod-b", run: toggleInlineFormat("bold") },
+  { key: "Mod-i", run: toggleInlineFormat("italic") },
+  { key: "Mod-e", run: toggleInlineFormat("code") },
+  { key: "Mod-k", run: toggleInlineFormat("link") },
+  { key: "Mod-Shift-x", run: toggleInlineFormat("strikethrough") },
+];