@reviewflow/ui 0.0.0-stage → 6.21.0

package/src/editor/emojiCompletion.ts

@@ -0,0 +1,110 @@
+import type {
+  Completion,
+  CompletionContext,
+  CompletionResult,
+} from "@codemirror/autocomplete";
+import { autocompletion } from "@codemirror/autocomplete";
+import { syntaxTree } from "@codemirror/language";
+import type { Extension } from "@codemirror/state";
+import type { SyntaxNode } from "@lezer/common";
+import type { Gemoji } from "gemoji";
+import { gemoji } from "gemoji";
+
+const typedShortcode = /:[\w+-]+/;
+
+/** A `:` after one of these is a time, a ratio or a key, not a shortcode. */
+const glued = /[\w:]/;
+
+/** GitHub renders no emoji inside these. */
+const codeNodes = new Set([
+  "CodeBlock",
+  "CodeText",
+  "FencedCode",
+  "InlineCode",
+]);
+
+const maxOptions = 30;
+
+const isInCode = (context: CompletionContext): boolean => {
+  let node: SyntaxNode | null = syntaxTree(context.state).resolveInner(
+    context.pos,
+    -1,
+  );
+  while (node !== null) {
+    if (codeNodes.has(node.name)) return true;
+    node = node.parent;
+  }
+  return false;
+};
+
+interface Match {
+  entry: Gemoji;
+  name: string;
+  /** lower is better: exact name, name prefix, tag prefix, name substring */
+  rank: number;
+  order: number;
+}
+
+const matchEntry = (
+  entry: Gemoji,
+  query: string,
+  order: number,
+): Match | null => {
+  const exact = entry.names.find((name) => name === query);
+  if (exact !== undefined) return { entry, name: exact, rank: 0, order };
+  const prefixed = entry.names.find((name) => name.startsWith(query));
+  if (prefixed !== undefined) return { entry, name: prefixed, rank: 1, order };
+  const [primary = ""] = entry.names;
+  if (entry.tags.some((tag) => tag.startsWith(query))) {
+    return { entry, name: primary, rank: 2, order };
+  }
+  if (query.length < 2) return null;
+  const containing = entry.names.find((name) => name.includes(query));
+  if (containing !== undefined) {
+    return { entry, name: containing, rank: 3, order };
+  }
+  return null;
+};
+
+/** The emoji a typed `:query` names, best first, as GitHub's own box offers them. */
+export const emojiMatches = (
+  query: string,
+): { emoji: string; name: string }[] =>
+  gemoji
+    .map((entry, order) => matchEntry(entry, query.toLowerCase(), order))
+    .filter((match) => match !== null)
+    .toSorted(
+      (a, b) =>
+        a.rank - b.rank || a.name.length - b.name.length || a.order - b.order,
+    )
+    .slice(0, maxOptions)
+    .map(({ entry, name }) => ({ emoji: entry.emoji, name }));
+
+/**
+ * Completes a `:shortcode:` as GitHub's comment box does, inserting the
+ * shortcode rather than the character: the source stays what GitHub's own
+ * editor would have written, and both render the same.
+ */
+export const emojiCompletionSource = (
+  context: CompletionContext,
+): CompletionResult | null => {
+  const typed = context.matchBefore(typedShortcode);
+  if (typed === null) return null;
+  const before =
+    typed.from === 0 ? "" : context.state.sliceDoc(typed.from - 1, typed.from);
+  if (glued.test(before) || isInCode(context)) return null;
+
+  const options: Completion[] = emojiMatches(typed.text.slice(1)).map(
+    ({ emoji, name }) => ({
+      label: `:${name}:`,
+      displayLabel: `${emoji}  :${name}:`,
+    }),
+  );
+  if (options.length === 0) return null;
+  return { from: typed.from, options, filter: false };
+};
+
+export const emojiCompletion: Extension = autocompletion({
+  override: [emojiCompletionSource],
+  icons: false,
+});

package/src/editor/extensions.ts

@@ -0,0 +1,149 @@
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { css } from "@codemirror/lang-css";
+import { html } from "@codemirror/lang-html";
+import { javascript } from "@codemirror/lang-javascript";
+import { json } from "@codemirror/lang-json";
+import {
+  commonmarkLanguage,
+  markdown,
+  markdownKeymap,
+} from "@codemirror/lang-markdown";
+import { yaml } from "@codemirror/lang-yaml";
+import { LanguageDescription } from "@codemirror/language";
+import {
+  highlightSelectionMatches,
+  search,
+  searchKeymap,
+} from "@codemirror/search";
+import type { Extension } from "@codemirror/state";
+import { Annotation, EditorState, Prec } from "@codemirror/state";
+import { EditorView, drawSelection, keymap } from "@codemirror/view";
+import { GFM } from "@lezer/markdown";
+import { codeHighlighting } from "./codeHighlight.ts";
+import { formattingKeymap } from "./commands.ts";
+import { markdownDecorations } from "./decorations.ts";
+import { emojiCompletion } from "./emojiCompletion.ts";
+import { frontmatter } from "./frontmatter.ts";
+
+/**
+ * Bundled statically: `lang-markdown` already depends on `lang-html`, which
+ * brings `lang-javascript` and `lang-css`, so only json and yaml add weight.
+ */
+const codeLanguages = [
+  LanguageDescription.of({
+    name: "typescript",
+    alias: ["ts"],
+    support: javascript({ typescript: true }),
+  }),
+  LanguageDescription.of({
+    name: "tsx",
+    support: javascript({ typescript: true, jsx: true }),
+  }),
+  LanguageDescription.of({
+    name: "javascript",
+    alias: ["js", "mjs", "cjs"],
+    support: javascript(),
+  }),
+  LanguageDescription.of({ name: "jsx", support: javascript({ jsx: true }) }),
+  LanguageDescription.of({ name: "json", support: json() }),
+  LanguageDescription.of({ name: "html", support: html() }),
+  LanguageDescription.of({ name: "css", support: css() }),
+  LanguageDescription.of({ name: "yaml", alias: ["yml"], support: yaml() }),
+];
+
+/**
+ * The markdown language with GFM and frontmatter. GFM has to go through
+ * `markdown()`'s `extensions` option: configuring the raw parser with it is a
+ * silent no-op. HTML tag completion, which `lang-html` would bring, is off —
+ * this is a prose editor.
+ */
+export const markdownLanguage = (): Extension =>
+  markdown({
+    base: commonmarkLanguage,
+    extensions: [GFM, frontmatter],
+    codeLanguages,
+    completeHTMLTags: false,
+    addKeymap: false,
+  });
+
+/**
+ * Marks a change that came from the caller's `value` rather than from typing,
+ * so it is not reported back through `onChange`.
+ */
+export const externalUpdate = Annotation.define<boolean>();
+
+/**
+ * The single change turning `current` into `next`: the common prefix and
+ * suffix are kept, so the selection and the undo history outside the changed
+ * span survive. A character diff would find a smaller edit and take minutes on
+ * a large replacement.
+ */
+export const changeBetween = (
+  current: string,
+  next: string,
+): { from: number; to: number; insert: string } | null => {
+  if (current === next) return null;
+  const limit = Math.min(current.length, next.length);
+  let prefix = 0;
+  while (prefix < limit && current[prefix] === next[prefix]) prefix += 1;
+  let suffix = 0;
+  while (
+    suffix < limit - prefix &&
+    current[current.length - 1 - suffix] === next[next.length - 1 - suffix]
+  ) {
+    suffix += 1;
+  }
+  return {
+    from: prefix,
+    to: current.length - suffix,
+    insert: next.slice(prefix, next.length - suffix),
+  };
+};
+
+interface MarkdownEditorExtensionsOptions {
+  readOnly: boolean;
+  /** `:shortcode:` completion, for a body GitHub renders */
+  emoji: boolean;
+  onChange: (value: string) => void;
+}
+
+/**
+ * Everything the editor is, chosen once at mount: read-only is not toggled on
+ * a live view, the caller remounts instead.
+ */
+export const markdownEditorExtensions = ({
+  readOnly,
+  emoji,
+  onChange,
+}: MarkdownEditorExtensionsOptions): Extension[] => [
+  markdownLanguage(),
+  codeHighlighting,
+  markdownDecorations,
+  EditorView.lineWrapping,
+  drawSelection(),
+  highlightSelectionMatches(),
+  search({ top: true }),
+  EditorState.readOnly.of(readOnly),
+  EditorView.editable.of(!readOnly),
+  ...(readOnly
+    ? [keymap.of([...searchKeymap, ...defaultKeymap])]
+    : [
+        history(),
+        ...(emoji ? [emojiCompletion] : []),
+        Prec.high(keymap.of(formattingKeymap)),
+        keymap.of([
+          ...markdownKeymap,
+          ...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/frontmatter.ts

@@ -0,0 +1,76 @@
+import { yamlLanguage } from "@codemirror/lang-yaml";
+import { parseMixed } from "@lezer/common";
+import type {
+  BlockContext,
+  Element,
+  Line,
+  MarkdownConfig,
+} from "@lezer/markdown";
+
+/**
+ * A leading `---` … `---` block, parsed as yaml. **Every template starts with
+ * one.** Without this, the opening `---` is a horizontal rule, the yaml below
+ * it becomes the title of a setext heading closed by the second `---`, and the
+ * whole block renders as one H2.
+ *
+ * Strict on purpose: at position 0 only, three dashes exactly, and the line
+ * after the opening fence must not be blank. A block parser cannot look further
+ * ahead than one line nor give a line back, so a block missing its closing
+ * fence runs to the end of the document; the blank-line rule keeps a document
+ * that opens on a horizontal rule from being swallowed that way.
+ *
+ * Ported from vscode-extension-markdown-beautiful-editor
+ * (`src/webview/cm/lang/frontmatter.ts`).
+ */
+const isFence = (text: string): boolean => /^---[ \t]*$/u.test(text);
+
+const parseFrontmatter = (cx: BlockContext, line: Line): boolean => {
+  if (
+    cx.lineStart !== 0 ||
+    line.pos !== 0 ||
+    !isFence(line.text) ||
+    cx.peekLine().trim() === ""
+  ) {
+    return false;
+  }
+
+  const from = cx.lineStart;
+  const openMark = cx.elt("FrontmatterMark", from, from + line.text.length);
+  const contentFrom = from + line.text.length + 1;
+  let contentTo = contentFrom;
+  let closeMark: Element | null = null;
+  let to = from + line.text.length;
+
+  while (cx.nextLine()) {
+    const lineEnd = cx.lineStart + line.text.length;
+    to = lineEnd;
+    if (isFence(line.text)) {
+      closeMark = cx.elt("FrontmatterMark", cx.lineStart, lineEnd);
+      cx.nextLine();
+      break;
+    }
+    contentTo = lineEnd;
+  }
+
+  const children = [openMark];
+  if (contentTo > contentFrom) {
+    children.push(cx.elt("FrontmatterContent", contentFrom, contentTo));
+  }
+  if (closeMark !== null) children.push(closeMark);
+  cx.addElement(cx.elt("Frontmatter", from, to, children));
+  return true;
+};
+
+export const frontmatter: MarkdownConfig = {
+  defineNodes: [
+    { name: "Frontmatter", block: true },
+    "FrontmatterMark",
+    "FrontmatterContent",
+  ],
+  parseBlock: [
+    { name: "Frontmatter", before: "HorizontalRule", parse: parseFrontmatter },
+  ],
+  wrap: parseMixed((node) =>
+    node.name === "FrontmatterContent" ? { parser: yamlLanguage.parser } : null,
+  ),
+};

package/src/editor/inlineFormat.ts

@@ -0,0 +1,114 @@
+/**
+ * Toggling bold, italic, code, strikethrough or a link over a selection inside
+ * one line, as a pure string transform: the editor turns its selection into
+ * offsets and applies the returned splice. Ported from
+ * vscode-extension-markdown-beautiful-editor (`src/shared/inlineFormat.ts`).
+ */
+export type InlineFormat =
+  | "bold"
+  | "code"
+  | "italic"
+  | "link"
+  | "strikethrough";
+
+const markers: Record<Exclude<InlineFormat, "link">, string> = {
+  bold: "**",
+  italic: "*",
+  code: "`",
+  strikethrough: "~~",
+};
+
+/** how many of the marker's character sit right before `at` */
+const runBefore = (text: string, at: number, marker: string): number => {
+  const char = marker.charAt(0);
+  let index = at;
+  while (index > 0 && text.charAt(index - 1) === char) index--;
+  return at - index;
+};
+
+const runAfter = (text: string, at: number, marker: string): number => {
+  const char = marker.charAt(0);
+  let index = at;
+  while (index < text.length && text.charAt(index) === char) index++;
+  return index - at;
+};
+
+/**
+ * Whether a run of `*`, `~` or `` ` `` on both sides of the text applies the
+ * format: `**` is bold and not italic, `***` both; a code span is delimited by
+ * one backtick, which a run of two does not close.
+ */
+const isFormatted = (format: Exclude<InlineFormat, "link">, run: number) => {
+  if (format === "italic") return run === 1 || run === 3;
+  if (format === "code") return run === 1;
+  return run >= 2;
+};
+
+const inlineLinkPattern = /^\[(?<label>[^\]]+)\]\([^)]+\)$/u;
+
+export interface InlineFormatChangeInput {
+  /** the whole line the selection is in */
+  text: string;
+  from: number;
+  to: number;
+  format: InlineFormat;
+}
+
+export interface InlineFormatChange {
+  /** spliced over `[from, to)`, which can be wider than the selection when markers just outside it are consumed */
+  insert: string;
+  from: number;
+  to: number;
+  /** where the cursor lands, in the resulting line */
+  selection: number;
+}
+
+/**
+ * - `link` unwraps a selection that is exactly `[label](dest)`, and wraps
+ *   anything else as `[selection](url)`.
+ * - The others remove markers sitting just outside the selection, or wrapping
+ *   it from inside, and wrap it otherwise.
+ *
+ * Null for an empty selection: there is nothing to toggle.
+ */
+export const inlineFormatChange = ({
+  text,
+  from,
+  to,
+  format,
+}: InlineFormatChangeInput): InlineFormatChange | null => {
+  const selected = text.slice(from, to);
+  if (selected === "") return null;
+
+  if (format === "link") {
+    const label = inlineLinkPattern.exec(selected)?.groups?.label;
+    const insert = label ?? `[${selected}](url)`;
+    return { insert, from, to, selection: from + insert.length };
+  }
+
+  const marker = markers[format];
+  const outside = Math.min(
+    runBefore(text, from, marker),
+    runAfter(text, to, marker),
+  );
+  if (isFormatted(format, outside)) {
+    return {
+      insert: selected,
+      from: from - marker.length,
+      to: to + marker.length,
+      selection: from - marker.length + selected.length,
+    };
+  }
+
+  const inside = Math.min(
+    runAfter(selected, 0, marker),
+    runBefore(selected, selected.length, marker),
+  );
+  if (isFormatted(format, inside) && selected.length > inside * 2) {
+    const inner = selected.slice(marker.length, -marker.length);
+    return { insert: inner, from, to, selection: from + inner.length };
+  }
+
+  const wrapped = `${marker}${selected}${marker}`;
+  return { insert: wrapped, from, to, selection: from + wrapped.length };
+};

package/src/editor/lineTypes.ts

@@ -0,0 +1,55 @@
+/**
+ * Turning a line into a heading, a list item, a quote or a fence, as a pure
+ * string transform: strip whatever prefix the line has, then apply the new
+ * one. Ported from vscode-extension-markdown-beautiful-editor
+ * (`src/shared/lineTypes.ts`).
+ */
+export type LineType =
+  | "code"
+  | "h1"
+  | "h2"
+  | "h3"
+  | "ol"
+  | "paragraph"
+  | "quote"
+  | "task"
+  | "ul";
+
+/**
+ * Most specific first. These consume the separator space too, so what is left
+ * is the bare content.
+ */
+export const stripLinePrefix = (line: string): string =>
+  line
+    .replace(/^(?:-{3,}|\*{3,}|_{3,})\s*$/u, "")
+    .replace(/^#{1,6}\s/u, "")
+    .replace(/^[-*+]\s\[[ x]\]\s/iu, "")
+    .replace(/^[-*+]\s/u, "")
+    .replace(/^\d+\.\s/u, "")
+    .replace(/^>+\s?/u, "")
+    .replace(/^```\w*\s*/u, "");
+
+export const applyLinePrefix = (content: string, type: LineType): string => {
+  switch (type) {
+    case "paragraph":
+      return content;
+    case "h1":
+      return `# ${content}`;
+    case "h2":
+      return `## ${content}`;
+    case "h3":
+      return `### ${content}`;
+    case "ul":
+      return `- ${content}`;
+    case "ol":
+      return `1. ${content}`;
+    case "task":
+      return `- [ ] ${content}`;
+    case "quote":
+      return `> ${content}`;
+    case "code":
+      return `\`\`\`\n${content}\n\`\`\``;
+    default:
+      return content;
+  }
+};