@reviewflow/ui 0.0.0-stage → 6.21.0

package/src/editor/markdown-editor.tsx

@@ -0,0 +1,295 @@
+import type { StateCommand } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import type { SVGIconElement } from "alouette";
+import {
+  AccentScope,
+  IconButton,
+  ScopedTheme,
+  Separator,
+  Tooltip,
+  View,
+  useCurrentTheme,
+} from "alouette";
+import { CodeRegularIcon } from "alouette-icons/phosphor-icons/Code";
+import { CodeBlockRegularIcon } from "alouette-icons/phosphor-icons/CodeBlock";
+import { LinkSimpleRegularIcon } from "alouette-icons/phosphor-icons/LinkSimple";
+import { ListBulletsRegularIcon } from "alouette-icons/phosphor-icons/ListBullets";
+import { ListChecksRegularIcon } from "alouette-icons/phosphor-icons/ListChecks";
+import { ListNumbersRegularIcon } from "alouette-icons/phosphor-icons/ListNumbers";
+import { QuotesRegularIcon } from "alouette-icons/phosphor-icons/Quotes";
+import { TextBRegularIcon } from "alouette-icons/phosphor-icons/TextB";
+import { TextHOneRegularIcon } from "alouette-icons/phosphor-icons/TextHOne";
+import { TextHThreeRegularIcon } from "alouette-icons/phosphor-icons/TextHThree";
+import { TextHTwoRegularIcon } from "alouette-icons/phosphor-icons/TextHTwo";
+import { TextItalicRegularIcon } from "alouette-icons/phosphor-icons/TextItalic";
+import { TextStrikethroughRegularIcon } from "alouette-icons/phosphor-icons/TextStrikethrough";
+import type { ReactNode } from "react";
+import { useEffect, useEffectEvent, useRef } from "react";
+import { setLineType, toggleInlineFormat } from "./commands.ts";
+import {
+  changeBetween,
+  externalUpdate,
+  markdownEditorExtensions,
+} from "./extensions.ts";
+import "./markdown-editor.css";
+
+interface FormatButtonProps {
+  icon: SVGIconElement;
+  label: string;
+  command: StateCommand;
+  viewRef: { current: EditorView | null };
+}
+
+/** runs on the editor's own selection, then gives the focus back to it */
+function FormatButton({
+  icon,
+  label,
+  command,
+  viewRef,
+}: FormatButtonProps): ReactNode {
+  return (
+    <Tooltip
+      content={label}
+      render={(triggerProps) => (
+        <IconButton
+          {...triggerProps}
+          icon={icon}
+          aria-label={label}
+          variant="soft"
+          size="sm"
+          onPress={() => {
+            const view = viewRef.current;
+            if (view === null) return;
+            command(view);
+            view.focus();
+          }}
+        />
+      )}
+    />
+  );
+}
+
+function FormatToolbar({
+  viewRef,
+}: {
+  viewRef: { current: EditorView | null };
+}): ReactNode {
+  return (
+    <View
+      role="toolbar"
+      aria-label="Formatting"
+      className="flex-row flex-wrap items-center gap-xxs"
+    >
+      <FormatButton
+        icon={<TextHOneRegularIcon />}
+        label="Heading 1"
+        command={setLineType("h1")}
+        viewRef={viewRef}
+      />
+      <FormatButton
+        icon={<TextHTwoRegularIcon />}
+        label="Heading 2"
+        command={setLineType("h2")}
+        viewRef={viewRef}
+      />
+      <FormatButton
+        icon={<TextHThreeRegularIcon />}
+        label="Heading 3"
+        command={setLineType("h3")}
+        viewRef={viewRef}
+      />
+      <FormatButton
+        icon={<ListBulletsRegularIcon />}
+        label="Bullet list"
+        command={setLineType("ul")}
+        viewRef={viewRef}
+      />
+      <FormatButton
+        icon={<ListNumbersRegularIcon />}
+        label="Numbered list"
+        command={setLineType("ol")}
+        viewRef={viewRef}
+      />
+      <FormatButton
+        icon={<ListChecksRegularIcon />}
+        label="Task list"
+        command={setLineType("task")}
+        viewRef={viewRef}
+      />
+      <FormatButton
+        icon={<QuotesRegularIcon />}
+        label="Quote"
+        command={setLineType("quote")}
+        viewRef={viewRef}
+      />
+      <FormatButton
+        icon={<CodeBlockRegularIcon />}
+        label="Code block"
+        command={setLineType("code")}
+        viewRef={viewRef}
+      />
+      <Separator vertical className="h-[20px]" />
+      <FormatButton
+        icon={<TextBRegularIcon />}
+        label="Bold (⌘B)"
+        command={toggleInlineFormat("bold")}
+        viewRef={viewRef}
+      />
+      <FormatButton
+        icon={<TextItalicRegularIcon />}
+        label="Italic (⌘I)"
+        command={toggleInlineFormat("italic")}
+        viewRef={viewRef}
+      />
+      <FormatButton
+        icon={<TextStrikethroughRegularIcon />}
+        label="Strikethrough (⌘⇧X)"
+        command={toggleInlineFormat("strikethrough")}
+        viewRef={viewRef}
+      />
+      <FormatButton
+        icon={<CodeRegularIcon />}
+        label="Inline code (⌘E)"
+        command={toggleInlineFormat("code")}
+        viewRef={viewRef}
+      />
+      <FormatButton
+        icon={<LinkSimpleRegularIcon />}
+        label="Link (⌘K)"
+        command={toggleInlineFormat("link")}
+        viewRef={viewRef}
+      />
+    </View>
+  );
+}
+
+export interface MarkdownEditorFieldProps {
+  value: string;
+  /** omitted for a read-only editor */
+  onChange?: (value: string) => void;
+  readOnly?: boolean;
+  "aria-label": string;
+  /** on the column holding the toolbar and the editor, which stretches to fill it */
+  className?: string;
+  /** a few lines high when empty, for a comment rather than a file */
+  compact?: boolean;
+  /** completes GitHub's `:shortcode:` emoji */
+  emoji?: boolean;
+  /** read at mount, like `readOnly` */
+  autoFocus?: boolean;
+}
+
+interface LinkInkScopeProps {
+  children: ReactNode;
+}
+
+/**
+ * Links are inked in the info accent, like the rendered markdown. The info
+ * theme also retints the surface, borders and selection, so it is applied only
+ * long enough to capture its `--color-accent` into `--md-link`, then the
+ * current theme is restored around the editor.
+ */
+function LinkInkScope({ children }: LinkInkScopeProps): ReactNode {
+  const theme = useCurrentTheme();
+  return (
+    <AccentScope accent="info">
+      <div className="markdown-editor-link-ink">
+        <ScopedTheme theme={theme}>{children}</ScopedTheme>
+      </div>
+    </AccentScope>
+  );
+}
+
+/**
+ * A markdown file edited as the text it is: CodeMirror with the markdown styled
+ * in place and every marker left visible, ported from
+ * vscode-extension-markdown-beautiful-editor. Nothing
+ * is parsed into a tree and serialized back, so a save is byte for byte what
+ * was typed — the property a file under git, or a template the daemon parses,
+ * needs from an editor.
+ *
+ * **Web only.** CodeMirror owns a DOM subtree, which react-native-web cannot
+ * express, so it is mounted into a raw `div`; a native build would need a
+ * WebView around it. `markdown-editor.native.tsx` is what metro picks on a
+ * native platform: a plain `TextArea` with the same props, so the package still
+ * bundles there.
+ *
+ * `readOnly` is read at mount: a caller switching it remounts by key. A `value`
+ * that changes under a mounted editor is applied as one change rather than a
+ * remount, so the selection outside it survives, and is not reported back
+ * through `onChange`.
+ */
+export function MarkdownEditor({
+  value,
+  onChange,
+  readOnly = false,
+  "aria-label": ariaLabel,
+  className,
+  compact = false,
+  emoji = false,
+  autoFocus = false,
+}: MarkdownEditorFieldProps): ReactNode {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const emitChange = useEffectEvent((next: string) => onChange?.(next));
+  // a remount for `readOnly` starts from the value of that render, not the first
+  const readValue = useEffectEvent(() => value);
+  const autoFocusRef = useRef(autoFocus);
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (host === null) return undefined;
+
+    const view = new EditorView({
+      parent: host,
+      // CodeMirror resolves its root through `assignedSlot`, so an editor slotted
+      // into a shadow root (a diff annotation) would read its selection from that
+      // shadow root, which does not see light DOM nodes: the cursor jumps and
+      // select-all is undone. The host's own tree is where the selection lives.
+      root: host.getRootNode() as Document | ShadowRoot,
+      doc: readValue(),
+      extensions: [
+        markdownEditorExtensions({
+          readOnly,
+          emoji,
+          onChange: (next) => {
+            emitChange(next);
+          },
+        }),
+        EditorView.contentAttributes.of({ "aria-label": ariaLabel }),
+      ],
+    });
+    viewRef.current = view;
+    if (autoFocusRef.current) view.focus();
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+  }, [readOnly, ariaLabel, emoji]);
+
+  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]);
+
+  return (
+    <View
+      className={className === undefined ? "gap-xs" : `gap-xs ${className}`}
+    >
+      {readOnly ? null : <FormatToolbar viewRef={viewRef} />}
+      <LinkInkScope>
+        <div
+          ref={hostRef}
+          className={(() => {
+            if (readOnly) return "markdown-editor markdown-editor-readonly";
+            if (compact) return "markdown-editor markdown-editor-compact";
+            return "markdown-editor";
+          })()}
+        />
+      </LinkInkScope>
+    </View>
+  );
+}

package/src/editor/nodeClasses.ts

@@ -0,0 +1,69 @@
+/**
+ * Lezer node name → `md-*` class, as data: a construct is styled by adding a
+ * row here, not a branch to the walk in `decorations.ts`.
+ *
+ * - `mark`: over the node's whole range, at the lowest precedence, so it is the
+ *   outer element of every overlay (search match, selection).
+ * - `syntax`: over a delimiter leaf (`**`, `#`, `>`), at the highest
+ *   precedence, so it renders *inside* the construct's mark and can be muted
+ *   there.
+ * - `line`: on every line the node touches. Anything needing a block box — a
+ *   background, a border, padding — is a line class, because a mark is split
+ *   at line boundaries.
+ *
+ * The nodes whose class depends on context (`Task`, `TableCell`,
+ * `TableDelimiter`, `LinkLabel`, `LinkTitle`) are absent on purpose and handled
+ * in `decorations.ts`. Ported from vscode-extension-markdown-beautiful-editor
+ * (`src/shared/nodeClassMap.ts`), without math, footnotes and definition lists,
+ * whose grammars are not installed here.
+ */
+export type NodeDecorationLayer = "line" | "mark" | "syntax";
+
+export interface NodeClassEntry {
+  layer: NodeDecorationLayer;
+  className: string;
+}
+
+const nodeClasses: Readonly<Record<string, NodeClassEntry>> = {
+  StrongEmphasis: { layer: "mark", className: "md-bold" },
+  Emphasis: { layer: "mark", className: "md-italic" },
+  InlineCode: { layer: "mark", className: "md-code" },
+  Escape: { layer: "mark", className: "md-escaped" },
+  Strikethrough: { layer: "mark", className: "md-strike" },
+  Autolink: { layer: "mark", className: "md-autolink" },
+  Link: { layer: "mark", className: "md-link" },
+  Image: { layer: "mark", className: "md-image" },
+  LinkReference: { layer: "mark", className: "md-link-def" },
+  ListItem: { layer: "mark", className: "md-list" },
+  Table: { layer: "mark", className: "md-table" },
+  CodeInfo: { layer: "mark", className: "md-code-info" },
+
+  ATXHeading1: { layer: "line", className: "md-heading md-h1" },
+  ATXHeading2: { layer: "line", className: "md-heading md-h2" },
+  ATXHeading3: { layer: "line", className: "md-heading md-h3" },
+  ATXHeading4: { layer: "line", className: "md-heading md-h4" },
+  ATXHeading5: { layer: "line", className: "md-heading md-h5" },
+  ATXHeading6: { layer: "line", className: "md-heading md-h6" },
+  // the title line only: `decorations.ts` gives the `===`/`---` underline its
+  // own class, so it keeps normal metrics rather than a heading-sized box
+  SetextHeading1: { layer: "line", className: "md-heading md-h1" },
+  SetextHeading2: { layer: "line", className: "md-heading md-h2" },
+  Blockquote: { layer: "line", className: "md-blockquote" },
+  HorizontalRule: { layer: "line", className: "md-hr" },
+  FencedCode: { layer: "line", className: "md-code-block" },
+  Frontmatter: { layer: "line", className: "md-frontmatter" },
+
+  EmphasisMark: { layer: "syntax", className: "md-syntax" },
+  CodeMark: { layer: "syntax", className: "md-syntax" },
+  HeaderMark: { layer: "syntax", className: "md-syntax" },
+  StrikethroughMark: { layer: "syntax", className: "md-syntax" },
+  TaskMarker: { layer: "syntax", className: "md-syntax" },
+  ListMark: { layer: "syntax", className: "md-syntax" },
+  LinkMark: { layer: "syntax", className: "md-syntax" },
+  QuoteMark: { layer: "syntax", className: "md-syntax" },
+  FrontmatterMark: { layer: "syntax", className: "md-syntax" },
+  URL: { layer: "syntax", className: "md-url" },
+};
+
+export const nodeClassEntry = (nodeName: string): NodeClassEntry | undefined =>
+  nodeClasses[nodeName];

package/src/index.ts

@@ -0,0 +1,75 @@
+export type {
+  PullRequestDataSource,
+  PullRequestDiffRange,
+  PullRequestDiffRefusal,
+  PullRequestDiffState,
+  PullRequestDiffsState,
+  PullRequestImpactsState,
+  PullRequestReadingOrderState,
+  PullRequestReadState,
+  PullRequestShas,
+  RepositoryAttachment,
+} from "./dataSource.ts";
+export {
+  PullRequestDataSourceProvider,
+  usePullRequestDataSource,
+} from "./dataSource.ts";
+export type { MarkdownEditorProps, PullRequestSlots } from "./slots.tsx";
+export { PullRequestSlotsProvider, usePullRequestSlots } from "./slots.tsx";
+export type { PullRequestScreenProps } from "./components/pull-request-screen.tsx";
+export { PullRequestScreen } from "./components/pull-request-screen.tsx";
+export type { PullRequestTab } from "./components/pull-request-panel.tsx";
+export {
+  PullRequestPanel,
+  isPullRequestTab,
+} from "./components/pull-request-panel.tsx";
+export { PullRequestTimeline } from "./components/pull-request-timeline.tsx";
+export { PullRequestFiles } from "./components/pull-request-files.tsx";
+export { PullRequestReview } from "./components/pull-request-review.tsx";
+export { PullRequestCommits } from "./components/pull-request-commits.tsx";
+export { DiffRefused } from "./components/pull-request-diff-view.tsx";
+export { MarkdownText } from "./components/markdown-text.tsx";
+export {
+  DiffSettingsProvider,
+  isDiffFileOrder,
+} from "./components/branch-diff/use-diff-settings.tsx";
+export type { DiffFileOrder } from "./components/branch-diff/use-diff-settings.tsx";
+export type { DiffTheme } from "./components/branch-diff/diff-themes.ts";
+export {
+  diffThemeNames,
+  diffThemeOptions,
+  diffThemes,
+} from "./components/branch-diff/diff-themes.ts";
+// DiffWorkerPool is the `@reviewflow/ui/diff-worker-pool` subpath, not exported here: its web
+// variant pulls @pierre/diffs and shiki, which this index would put in every importer's main
+// bundle. A lazily loaded diff viewer imports the subpath.
+export type { CollapsedFiles } from "./components/branch-diff/use-collapsed-files.ts";
+export { useCollapsedFiles } from "./components/branch-diff/use-collapsed-files.ts";
+export { WhitespaceButton } from "./components/branch-diff/whitespace-button.tsx";
+export { CopyableCodeBlock } from "./components/copyable-code-block.tsx";
+export { PullRequestReviewDraftProvider } from "./services/PullRequestReviewDraftProvider.tsx";
+export type { DraftStore } from "./services/PullRequestDraftsProvider.tsx";
+export { PullRequestDraftsProvider } from "./services/PullRequestDraftsProvider.tsx";
+export type {
+  DraftStorage,
+  ExpiringDraftStoreOptions,
+} from "./services/expiringDraftStore.ts";
+export { createExpiringDraftStore } from "./services/expiringDraftStore.ts";
+export { PullRequestSuggestionBatchProvider } from "./services/PullRequestSuggestionBatchProvider.tsx";
+export { emojify } from "./services/emojify.ts";
+export { errorToMessage } from "./services/errorToMessage.ts";
+export { isViewerAuthor } from "./services/isViewerAuthor.ts";
+export type { PrStatus } from "./prStatus.ts";
+export { prStatus, prStatusAccents, prStatusLabels } from "./prStatus.ts";
+export * from "./board/index.ts";
+export { MarkdownEditor } from "./editor/markdown-editor.tsx";
+export type { MarkdownEditorFieldProps } from "./editor/markdown-editor.tsx";
+export { CodeEditor } from "./editor/code-editor.tsx";
+export type { CodeEditorProps } from "./editor/code-editor.tsx";
+export type { CodeLanguage } from "./editor/codeEditorExtensions.ts";
+export { EditableFile } from "./editor/editable-file.tsx";
+export type {
+  EditableFileProps,
+  EditableFileSaveResult,
+} from "./editor/editable-file.tsx";
+export { RepositoryAttachmentBanner } from "./components/repository-attachment-banner.tsx";

package/src/markdown-github/flatten.ts

@@ -0,0 +1,49 @@
+import type { GhBlockNode } from "./pair-html.ts";
+
+/** The text of a run, as a link label or a `<pre>`'s source. */
+export function textOf(nodes: GhBlockNode[]): string {
+  return nodes
+    .map((node): string => {
+      if (node.type === "text" || node.type === "inlineCode") return node.value;
+      if (node.type === "image") return node.alt;
+      if (node.type === "break") return "\n";
+      if (node.type === "element") {
+        if (node.tag === "br") return "\n";
+        if (node.tag === "img") return node.attrs.alt ?? "";
+      }
+      return "children" in node ? textOf(node.children) : "";
+    })
+    .join("");
+}
+
+export interface GhImage {
+  src: string;
+  alt: string;
+}
+
+/** Every image in a run, through links and `<picture>`. */
+export const collectImages = (nodes: GhBlockNode[]): GhImage[] =>
+  nodes.flatMap((node): GhImage[] => {
+    if (node.type === "image") return [{ src: node.src, alt: node.alt }];
+    if (node.type === "element" && node.tag === "img") {
+      const src = node.attrs.src;
+      return src ? [{ src, alt: node.attrs.alt ?? "" }] : [];
+    }
+    if ("children" in node) return collectImages(node.children);
+    return [];
+  });
+
+const isImageOnly = (node: GhBlockNode): boolean => {
+  if (node.type === "image" || node.type === "break") return true;
+  if (node.type === "text") return node.value.trim() === "";
+  if (node.type === "link") return node.children.every(isImageOnly);
+  if (node.type === "element") {
+    if (["br", "img", "picture"].includes(node.tag)) return true;
+    return node.tag === "a" && node.children.every(isImageOnly);
+  }
+  return false;
+};
+
+/** A run of badges and pictures: laid out as a row rather than as text. */
+export const isImageRun = (nodes: GhBlockNode[]): boolean =>
+  collectImages(nodes).length > 0 && nodes.every(isImageOnly);

package/src/markdown-github/html-tokens.ts

@@ -0,0 +1,93 @@
+import { Parser } from "htmlparser2";
+
+export type HtmlToken =
+  | { kind: "close"; tag: string }
+  | { kind: "open"; tag: string; attrs: Record<string, string> }
+  | { kind: "text"; value: string };
+
+/**
+ * The tags and text of one raw `html` / `inlineHtml` value, in order. Comments
+ * are dropped.
+ *
+ * The parser's implied closes at the end of its input are discarded: a value
+ * holding only `<details>` is not a complete element, its `</details>` is in a
+ * later sibling, so closing it here would cut the pairing short. Void elements
+ * and the parser's own mid-stream rules (`<li>` after `<li>`) do close.
+ *
+ * The parser ignores a close tag it has no open tag for, and a value holding
+ * only `</details>` has none: `openTags`, the caller's currently open tags
+ * outermost first, are replayed into the parser first so it can match them.
+ */
+export const tokenizeHtml = (
+  value: string,
+  openTags: string[] = [],
+): HtmlToken[] => {
+  const tokens: HtmlToken[] = [];
+  let ended = false;
+  let replaying = true;
+
+  const parser = new Parser({
+    onopentag(tag, attrs) {
+      if (!ended && !replaying) tokens.push({ kind: "open", tag, attrs });
+    },
+    onclosetag(tag) {
+      if (!ended && !replaying) tokens.push({ kind: "close", tag });
+    },
+    ontext(text) {
+      if (replaying) return;
+      const last = tokens.at(-1);
+      if (last?.kind === "text") last.value += text;
+      else tokens.push({ kind: "text", value: text });
+    },
+  });
+
+  openTags.forEach((tag) => {
+    parser.write(`<${tag}>`);
+  });
+  replaying = false;
+  parser.write(value);
+  ended = true;
+  parser.end();
+
+  return tokens;
+};
+
+/**
+ * The markdown parser leaves `&amp;` and `&#x1F600;` as typed, which is not
+ * what GitHub shows. The text goes through the html parser with its `<`
+ * escaped, so only entities are decoded and no tag is ever read out of it.
+ */
+export const decodeEntities = (value: string): string =>
+  value.includes("&")
+    ? tokenizeHtml(value.replaceAll("<", "&lt;"))
+        .map((token) => (token.kind === "text" ? token.value : ""))
+        .join("")
+    : value;
+
+/**
+ * What follows the complete HTML comments a value starts with, or null when it
+ * does not start with one or nothing follows. CommonMark makes a line starting
+ * with `<!--` an html block that runs to the end of the line, so the markdown
+ * after a comment (`- [ ] <!-- id -->[a link](url)`) reaches here unparsed,
+ * where GitHub reads it as the rest of the paragraph.
+ */
+export const textAfterLeadingComments = (value: string): string | null => {
+  let end = 0;
+  let leading = true;
+
+  const parser = new Parser({
+    oncomment() {
+      if (!leading) return;
+      if (value.slice(end, parser.startIndex).trim() === "") {
+        end = parser.endIndex + 1;
+      } else {
+        leading = false;
+      }
+    },
+  });
+  parser.write(value);
+  parser.end();
+
+  const rest = value.slice(end);
+  return end > 0 && rest.trim() !== "" ? rest : null;
+};