@blue-patterns/richtext 0.0.0-stage → 0.7.18

package/dist/RichTextView.d.ts

@@ -0,0 +1,92 @@
+/**
+ * @file RichTextView.tsx
+ * @input Uses React, Lexical (lexical + @lexical/react, composed through
+ *   LexicalExtensionComposer), mergeProps from core utils, design tokens,
+ *   TableScrollRegionPlugin
+ * @output Exports RichTextView component and RichTextViewProps
+ * @position Read-only renderer for serialized Lexical editor state, exposed to
+ *   assistive technology as document content rather than a form field;
+ *   exported from @blue-patterns/richtext
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/richtext/src/RichTextEditor.test.tsx
+ * - /packages/richtext/src/index.ts
+ * - /apps/storybook/stories/RichTextEditor.stories.tsx
+ */
+import { type ReactNode } from 'react';
+import type { BaseProps } from '@blue-patterns/core';
+import type { RichTextMarkdownExtension } from './markdownExtensions.js';
+import type { CodeLanguage } from '@blue-patterns/core/CodeBlock';
+import type { Klass, LexicalNode } from 'lexical';
+export interface RichTextViewProps extends BaseProps {
+    /**
+     * Serialized editor state to render (a JSON string produced by
+     * `JSON.stringify(editorState.toJSON())`).
+     */
+    value: string;
+    /**
+     * Additional Lexical nodes to register beyond the default OSS set. Must match
+     * the nodes used to author `value` so custom node types deserialize.
+     */
+    nodes?: ReadonlyArray<Klass<LexicalNode>>;
+    /**
+     * Markdown plugins whose nodes this surface draws, each adopted with
+     * `createRichTextExtension` (spec:AST-064). A plugin node renders exactly as
+     * core `Markdown` renders it, and one whose plugin is not given here shows
+     * its source. Pass the extensions the content was converted with. Create
+     * them in a client module: they hold the plugins' functions, so they are not
+     * serializable props.
+     */
+    markdownExtensions?: ReadonlyArray<RichTextMarkdownExtension>;
+    /**
+     * CodeBlock language values a fence may name, each imported on its own,
+     * such as `graphql` from `@blue-patterns/core/CodeBlock/languages/graphql`,
+     * or made with `createCodeLanguage`. Pass the same list as `Markdown`'s
+     * `codeLanguages`, so reading and editing paint and label the same
+     * languages (spec:AST-061).
+     */
+    codeLanguages?: ReadonlyArray<CodeLanguage>;
+    /**
+     * Additional read-only plugins to render inside the composer (e.g. hover
+     * cards, decorators).
+     */
+    plugins?: ReactNode;
+    /** The Lexical composer namespace. @default 'astryx-view' */
+    namespace?: string;
+    /**
+     * Called when `value` cannot be parsed/rendered (e.g. malformed JSON, or
+     * state authored with node types not registered via `nodes`). A read-only
+     * view renders *persisted* content — exactly where stale or foreign-schema
+     * state shows up — so by default a parse failure renders `errorFallback`
+     * instead of throwing and taking down the host. Provide `onParseError` to log or
+     * report it.
+     */
+    onParseError?: (error: Error) => void;
+    /**
+     * What to render when `value` fails to parse/render. Defaults to `null`
+     * (renders nothing). Pass a node to show a placeholder/empty state.
+     * @default null
+     */
+    errorFallback?: ReactNode;
+}
+/**
+ * A read-only renderer for serialized Lexical content. Renders the same styled
+ * output as {@link RichTextEditor} without any editing affordances.
+ *
+ * The output is document content, not a form field: headings, lists and links
+ * keep their own roles for assistive technology, and the view takes no label.
+ * For a labelled, read-only field, use `<RichTextEditor isReadOnly />`. A
+ * table wider than the view scrolls inside a region named "Table" that takes a
+ * tab stop while it overflows, as core `Table` does.
+ *
+ * @example
+ * ```
+ * import {RichTextView} from '@blue-patterns/richtext';
+ * <RichTextView value={storedEditorStateJSON} />
+ * ```
+ */
+export declare function RichTextView({ value, nodes, markdownExtensions, codeLanguages, plugins, namespace, onParseError, errorFallback, xstyle, className, style, ...rest }: RichTextViewProps): import("react").JSX.Element;
+export declare namespace RichTextView {
+    var displayName: string;
+}
+//# sourceMappingURL=RichTextView.d.ts.map

package/dist/RichTextView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextView.d.ts","sourceRoot":"","sources":["../src/RichTextView.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAA8B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGlE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,qBAAqB,CAAC;AAmBnD,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,sBAAsB,CAAC;AACpE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,+BAA+B,CAAC;AAEhE,OAAO,KAAK,EAEV,KAAK,EACL,WAAW,EAEZ,MAAM,SAAS,CAAC;AAoDjB,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAC1C;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,aAAa,CAAC,yBAAyB,CAAC,CAAC;IAC9D;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IAC5C;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAyCD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,kBAAkB,EAClB,aAAa,EACb,OAAO,EACP,SAAyB,EACzB,YAAY,EACZ,aAAoB,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,iBAAiB,+BA8HnB;yBA3Ie,YAAY"}

package/dist/RichTextView.js

@@ -0,0 +1,267 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file RichTextView.tsx
+ * @input Uses React, Lexical (lexical + @lexical/react, composed through
+ *   LexicalExtensionComposer), mergeProps from core utils, design tokens,
+ *   TableScrollRegionPlugin
+ * @output Exports RichTextView component and RichTextViewProps
+ * @position Read-only renderer for serialized Lexical editor state, exposed to
+ *   assistive technology as document content rather than a form field;
+ *   exported from @blue-patterns/richtext
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/richtext/src/RichTextEditor.test.tsx
+ * - /packages/richtext/src/index.ts
+ * - /apps/storybook/stories/RichTextEditor.stories.tsx
+ */
+import { useEffect, useRef, useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { sharedEditorTheme } from "./editorTheme.js";
+import { mergeProps } from '@blue-patterns/core/utils';
+import '@blue-patterns/core/theme/tokens.stylex';
+import { colorVars, typeScaleVars, typographyVars } from '@blue-patterns/core/theme/tokens.stylex';
+import { LexicalExtensionComposer } from '@lexical/react/LexicalExtensionComposer';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
+import { TableScrollRegionPlugin } from "./internal/TableScrollRegionPlugin.js";
+import { TableColumnFloorPlugin } from "./internal/TableColumnFloorPlugin.js";
+import { CodeBlockHeaderPlugin } from "./internal/CodeBlockHeaderPlugin.js";
+import { CodeSyntaxPlugin } from "./internal/CodeSyntaxPlugin.js";
+import { MarkdownExtensionsPlugin } from "./internal/MarkdownExtensionsPlugin.js";
+import { TaskCheckboxPlugin } from "./internal/TaskCheckboxPlugin.js";
+import { defineExtension } from 'lexical';
+import { TextSemanticsExtension } from "./textSemantics.js";
+// The same node set as the editor, so anything it writes renders here.
+import { DEFAULT_NODES } from "./editorNodes.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = {
+  root: {
+    kzqmXN: "xh8yej3",
+    kVAEAm: "x1n2onr6",
+    kMv6JI: "x9ynric",
+    kGuDYH: "xjm74w1",
+    kLWn49: "xw6l6zx",
+    kMwMTN: "x1tgivj0",
+    $$css: true
+  }
+};
+
+/**
+ * Lexical's `ContentEditable` renders `role="textbox"` and widget-only ARIA
+ * (`aria-autocomplete`, `aria-readonly`) even when the editor is not editable.
+ * A view renders document content, not a form field, so all three are cleared:
+ *
+ * - A textbox is a widget, so an unnamed one fails axe
+ *   `aria-input-field-name` — and a view has no name to give, because it is
+ *   content rather than a labelled input.
+ * - The widget role exposes the rendered document to assistive technology
+ *   as a form field rather than as the content it is.
+ * - Widget-only ARIA is invalid without a widget role, so clearing only the
+ *   role would trade `aria-input-field-name` for `aria-allowed-attr`.
+ *
+ * `role` must be `null`, not `undefined`: Lexical substitutes its `textbox`
+ * default for `undefined`. The ARIA keys reach the element through Lexical's
+ * trailing prop spread, which is why `undefined` clears them. A proposed
+ * upstream fix (facebook/lexical#9270) would make these overrides no-ops.
+ *
+ * A caller who wants read-only form-field semantics instead wants
+ * `<RichTextEditor isReadOnly />`, which is a labelled field by construction.
+ */
+const VIEW_CONTENT_EDITABLE_PROPS = {
+  'aria-autocomplete': undefined,
+  'aria-readonly': undefined,
+  role: null
+};
+
+/** The view imports and exports no Markdown, so it uses no transformers. */
+const NO_TRANSFORMERS = [];
+/**
+ * Keeps the rendered content in sync with the `value` prop after mount.
+ *
+ * The editor's initial state is seeded once, when the composer mounts, so a
+ * plain `<RichTextView value={changingValue} />` would freeze at its first
+ * value — the content would never update when `value` changed. This plugin runs
+ * inside the composer context and re-applies `value` whenever it changes, so the
+ * read-only view stays reactive (e.g. previewing content edited elsewhere).
+ *
+ * The initial `value` is already applied via the extension's
+ * `$initialEditorState`, so we skip the first run to avoid a redundant re-parse
+ * on mount.
+ *
+ * This mirrors the canonical Lexical pattern for applying externally-sourced
+ * serialized state after mount: the Lexical Playground's ActionsPlugin does the
+ * same `editor.setEditorState(editor.parseEditorState(...))` from inside a
+ * plugin (see facebook/lexical
+ * packages/lexical-playground/src/plugins/ActionsPlugin/index.tsx). It is
+ * necessary because the composer builds the editor once and reads the initial
+ * state exactly once at that point, so a changed prop cannot re-seed the editor
+ * on its own. A read-only view has no history, so we skip the Playground's
+ * accompanying CLEAR_HISTORY_COMMAND.
+ *
+ * `parseEditorState` / `setEditorState` are methods on the editor instance, so
+ * this plugin needs no module-level Lexical imports of its own.
+ */
+function SyncValuePlugin({
+  value
+}) {
+  const [editor] = useLexicalComposerContext();
+  const isFirstRun = useRef(true);
+  useEffect(() => {
+    if (isFirstRun.current) {
+      isFirstRun.current = false;
+      return;
+    }
+    editor.setEditorState(editor.parseEditorState(value));
+  }, [editor, value]);
+  return null;
+}
+
+/**
+ * A read-only renderer for serialized Lexical content. Renders the same styled
+ * output as {@link RichTextEditor} without any editing affordances.
+ *
+ * The output is document content, not a form field: headings, lists and links
+ * keep their own roles for assistive technology, and the view takes no label.
+ * For a labelled, read-only field, use `<RichTextEditor isReadOnly />`. A
+ * table wider than the view scrolls inside a region named "Table" that takes a
+ * tab stop while it overflows, as core `Table` does.
+ *
+ * @example
+ * ```
+ * import {RichTextView} from '@blue-patterns/richtext';
+ * <RichTextView value={storedEditorStateJSON} />
+ * ```
+ */
+export function RichTextView({
+  value,
+  nodes,
+  markdownExtensions,
+  codeLanguages,
+  plugins,
+  namespace = 'astryx-view',
+  onParseError,
+  errorFallback = null,
+  xstyle,
+  className,
+  style,
+  ...rest
+}) {
+  const themeRef = useRef(null);
+  if (themeRef.current === null) {
+    themeRef.current = sharedEditorTheme();
+  }
+
+  // Built on first render (and again after an error, below) rather than per
+  // render: LexicalExtensionComposer re-creates the editor whenever the
+  // extension's identity changes, and `value` updates are applied in place by
+  // SyncValuePlugin instead.
+  const extensionRef = useRef(null);
+  const [hasError, setHasError] = useState(false);
+
+  // Reset the error state when the value changes so a corrected value recovers.
+  const lastValueRef = useRef(value);
+  if (lastValueRef.current !== value && hasError) {
+    lastValueRef.current = value;
+    setHasError(false);
+  } else {
+    lastValueRef.current = value;
+  }
+
+  // A parse failure is recorded during render (below, or from Lexical's
+  // `onError` while the composer builds the editor) but reported to the
+  // consumer only after commit. Updating this component's own state during
+  // render is allowed; running a consumer's callback is not — a callback that
+  // updates its own component would do so during another component's render,
+  // and StrictMode or a discarded concurrent render would repeat it or run it
+  // for output that never commits. This Effect synchronizes the consumer's
+  // `onParseError`, reporting each distinct failure exactly once.
+  const pendingErrorRef = useRef(null);
+  const reportedErrorRef = useRef(null);
+  useEffect(() => {
+    const error = pendingErrorRef.current;
+    if (error !== null && error !== reportedErrorRef.current) {
+      reportedErrorRef.current = error;
+      onParseError?.(error);
+    }
+  });
+  const handleError = error => {
+    pendingErrorRef.current = error;
+    setHasError(true);
+  };
+
+  // Validate `value` parses as JSON before handing it to Lexical. Malformed
+  // JSON would otherwise throw synchronously while the composer builds the
+  // editor and escape any error boundary, taking down the host on the render
+  // path.
+  if (!hasError) {
+    try {
+      JSON.parse(value);
+    } catch (err) {
+      handleError(err instanceof Error ? err : new Error(String(err)));
+    }
+  }
+  if (hasError) {
+    // The composer subtree is unmounted while the fallback renders. Drop the
+    // extension so that recovering from the error builds a fresh one, seeded
+    // with the corrected `value`.
+    extensionRef.current = null;
+    return /*#__PURE__*/_jsx("div", {
+      ...mergeProps(stylex.props(styles.root, xstyle), className, style),
+      ...rest,
+      children: errorFallback
+    });
+  }
+  if (extensionRef.current === null) {
+    extensionRef.current = defineExtension({
+      name: '@blue-patterns/richtext/RichTextView',
+      namespace,
+      theme: themeRef.current,
+      editable: false,
+      nodes: nodes ? [...DEFAULT_NODES, ...nodes] : [...DEFAULT_NODES],
+      // Struck text is a deletion.
+      dependencies: [TextSemanticsExtension],
+      $initialEditorState: value,
+      // A read-only view renders persisted content; a bad node/schema should not
+      // crash the host. Surface it via onParseError + fallback instead of re-throwing.
+      onError: handleError
+    });
+  }
+  return /*#__PURE__*/_jsx("div", {
+    ...mergeProps(stylex.props(styles.root, xstyle), className, style),
+    ...rest,
+    children: /*#__PURE__*/_jsxs(LexicalExtensionComposer, {
+      extension: extensionRef.current,
+      contentEditable: null,
+      children: [/*#__PURE__*/_jsx(SyncValuePlugin, {
+        value: value
+      }), /*#__PURE__*/_jsx(TablePlugin, {
+        hasCellMerge: false,
+        hasCellBackgroundColor: false,
+        hasTabHandler: false,
+        hasHorizontalScroll: true
+      }), /*#__PURE__*/_jsx(TableScrollRegionPlugin, {}), /*#__PURE__*/_jsx(TableColumnFloorPlugin, {}), /*#__PURE__*/_jsx(RichTextPlugin, {
+        contentEditable: /*#__PURE__*/_jsx(ContentEditable, {
+          ...VIEW_CONTENT_EDITABLE_PROPS
+        }),
+        placeholder: null,
+        ErrorBoundary: LexicalErrorBoundary
+      }), /*#__PURE__*/_jsx(CodeBlockHeaderPlugin, {
+        codeLanguages: codeLanguages
+      }), /*#__PURE__*/_jsx(CodeSyntaxPlugin, {
+        codeLanguages: codeLanguages
+      }), markdownExtensions != null && markdownExtensions.length > 0 ? /*#__PURE__*/_jsx(MarkdownExtensionsPlugin, {
+        extensions: markdownExtensions,
+        transformers: NO_TRANSFORMERS
+      }) : null, /*#__PURE__*/_jsx(TaskCheckboxPlugin, {
+        isReadOnly: true
+      }), plugins]
+    })
+  });
+}
+RichTextView.displayName = 'RichTextView';

package/dist/codeLanguages.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @file codeLanguages.ts
+ * @input CodeLanguage values from @blue-patterns/core/CodeBlock
+ * @output listedLanguage, which finds the listed value a fence word names, and
+ *   sameLanguages, which compares two lists entry by entry
+ * @position Shared by CodeSyntaxPlugin and CodeBlockHeaderPlugin, so RichText
+ *   resolves a fence as Markdown does (component:Markdown FR30)
+ */
+import type { CodeLanguage } from '@blue-patterns/core/CodeBlock';
+/** The listed value whose identifiers include `word`; a later entry wins. */
+export declare function listedLanguage(languages: ReadonlyArray<CodeLanguage> | undefined, word: string): CodeLanguage | undefined;
+/** Whether two lists name the same values in the same order. */
+export declare function sameLanguages(a: ReadonlyArray<CodeLanguage> | undefined, b: ReadonlyArray<CodeLanguage> | undefined): boolean;
+//# sourceMappingURL=codeLanguages.d.ts.map

package/dist/codeLanguages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeLanguages.d.ts","sourceRoot":"","sources":["../src/codeLanguages.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,+BAA+B,CAAC;AAEhE,6EAA6E;AAC7E,wBAAgB,cAAc,CAC5B,SAAS,EAAE,aAAa,CAAC,YAAY,CAAC,GAAG,SAAS,EAClD,IAAI,EAAE,MAAM,GACX,YAAY,GAAG,SAAS,CAU1B;AAED,gEAAgE;AAChE,wBAAgB,aAAa,CAC3B,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,GAAG,SAAS,EAC1C,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,GAAG,SAAS,GACzC,OAAO,CAQT"}

package/dist/codeLanguages.js

@@ -0,0 +1,34 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file codeLanguages.ts
+ * @input CodeLanguage values from @blue-patterns/core/CodeBlock
+ * @output listedLanguage, which finds the listed value a fence word names, and
+ *   sameLanguages, which compares two lists entry by entry
+ * @position Shared by CodeSyntaxPlugin and CodeBlockHeaderPlugin, so RichText
+ *   resolves a fence as Markdown does (component:Markdown FR30)
+ */
+
+/** The listed value whose identifiers include `word`; a later entry wins. */
+export function listedLanguage(languages, word) {
+  if (languages == null) {
+    return undefined;
+  }
+  for (let i = languages.length - 1; i >= 0; i--) {
+    if (languages[i].identifiers.includes(word)) {
+      return languages[i];
+    }
+  }
+  return undefined;
+}
+
+/** Whether two lists name the same values in the same order. */
+export function sameLanguages(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (a == null || b == null || a.length !== b.length) {
+    return false;
+  }
+  return a.every((language, i) => language === b[i]);
+}

package/dist/codeLineTokens.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @file codeLineTokens.ts
+ * @input Core CodeBlock's tokenizer (`tokenize`) and token line type.
+ * @output Exports CodeLineTokens, which keeps core CodeBlock's tokens for a
+ *   block of code line by line and re-tokenizes only the lines an edit can
+ *   change.
+ * @position Used by CodeSyntaxPlugin. Its tokens always equal what `tokenize`
+ *   returns for the whole code. An edit re-tokenizes only its own line, and
+ *   at most the line above it, for the built-in TypeScript, JavaScript,
+ *   Python, and shell grammars while every line passes `standsAlone`;
+ *   anything else re-tokenizes all of it. The checks follow those grammars'
+ *   patterns in core CodeBlock's tokenizer.ts, and codeLineTokens.test.ts
+ *   compares edits against a full `tokenize`, so a grammar change that
+ *   breaks them fails there.
+ */
+import { type CodeLanguage, type TokenLine } from '@blue-patterns/core/CodeBlock';
+/**
+ * Core CodeBlock's tokens for a block of code, kept line by line with
+ * line-relative offsets, exactly as `tokenize` returns them for the whole
+ * code.
+ */
+export declare class CodeLineTokens {
+    readonly language: string | CodeLanguage;
+    /** Where each line starts in the code. */
+    starts: number[];
+    /** Each line's tokens. */
+    tokens: TokenLine[];
+    private lines;
+    private readonly family;
+    /** Whether every line stands alone, so an edit re-tokenizes lines alone. */
+    private linesStandAlone;
+    constructor(text: string, language: string | CodeLanguage);
+    /** The code. */
+    get text(): string;
+    /** The line that holds `offset` in the code. */
+    lineAt(offset: number): number;
+    /**
+     * Replaces `removed` characters at `offset` in the code with `inserted`.
+     * Returns the lines it re-tokenized when the edit stays inside one line
+     * and every line still stands alone; otherwise it re-tokenizes all the
+     * code and returns null.
+     */
+    replace(offset: number, removed: number, inserted: string): number[] | null;
+    /**
+     * A line's tokens as `tokenize` finds them in the whole code. A function
+     * name is a name followed by `(` past any whitespace, line breaks
+     * included, so when the line ends in a name, the code up to the next
+     * visible character is tokenized with it.
+     */
+    private tokenizeLine;
+    private tokenizeAll;
+}
+//# sourceMappingURL=codeLineTokens.d.ts.map

package/dist/codeLineTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeLineTokens.d.ts","sourceRoot":"","sources":["../src/codeLineTokens.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,+BAA+B,CAAC;AAkFvC;;;;GAIG;AACH,qBAAa,cAAc;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY,CAAC;IACzC,0CAA0C;IAC1C,MAAM,EAAE,MAAM,EAAE,CAAM;IACtB,0BAA0B;IAC1B,MAAM,EAAE,SAAS,EAAE,CAAM;IACzB,OAAO,CAAC,KAAK,CAAgB;IAC7B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAgB;IACvC,4EAA4E;IAC5E,OAAO,CAAC,eAAe,CAAS;gBAEpB,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,YAAY;IAOzD,gBAAgB;IAChB,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,gDAAgD;IAChD,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAc9B;;;;;OAKG;IACH,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;IA+C3E;;;;;OAKG;IACH,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,WAAW;CAgBpB"}

package/dist/codeLineTokens.js

@@ -0,0 +1,188 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file codeLineTokens.ts
+ * @input Core CodeBlock's tokenizer (`tokenize`) and token line type.
+ * @output Exports CodeLineTokens, which keeps core CodeBlock's tokens for a
+ *   block of code line by line and re-tokenizes only the lines an edit can
+ *   change.
+ * @position Used by CodeSyntaxPlugin. Its tokens always equal what `tokenize`
+ *   returns for the whole code. An edit re-tokenizes only its own line, and
+ *   at most the line above it, for the built-in TypeScript, JavaScript,
+ *   Python, and shell grammars while every line passes `standsAlone`;
+ *   anything else re-tokenizes all of it. The checks follow those grammars'
+ *   patterns in core CodeBlock's tokenizer.ts, and codeLineTokens.test.ts
+ *   compares edits against a full `tokenize`, so a grammar change that
+ *   breaks them fails there.
+ */
+
+import { tokenize } from '@blue-patterns/core/CodeBlock';
+const FAMILIES = new Map([['typescript', 'javascript'], ['javascript', 'javascript'], ['tsx', 'javascript'], ['jsx', 'javascript'], ['ts', 'javascript'], ['js', 'javascript'], ['python', 'python'], ['py', 'python'], ['bash', 'shell'], ['sh', 'shell'], ['zsh', 'shell'], ['shell', 'shell']]);
+
+/** What can open a string or comment that runs on past its line. */
+const OPENERS = {
+  javascript: /['"`]|\/\*/,
+  python: /['"]/,
+  shell: /['"`]|\$\{|\$\(|<</
+};
+
+/** A line whose last visible character can end a function name. */
+const NAME_END = /[\w$]\s*$/;
+
+/**
+ * Whether the name that ends a line can change color with the code after
+ * it: its last visible character is a name character outside every string,
+ * comment, number, keyword, and constant, whose patterns come before
+ * function names.
+ */
+function endsInOpenName(text, tokens) {
+  const last = text.trimEnd().length - 1;
+  return NAME_END.test(text) && !tokens.some(token => token.start <= last && token.end > last && token.type !== 'function' && token.type !== 'type');
+}
+
+/** A line's first visible character, or '' when it has none. */
+function firstVisible(line) {
+  return /\S/.exec(line)?.[0] ?? '';
+}
+
+/**
+ * Whether a line's strings and comments all close on it. Their patterns
+ * match line breaks, so an opener left open can run on to a later line.
+ * Only a string or comment the tokenizer emitted shields an opener: one that
+ * another token swallowed, such as `/*` in the operator `+/*`, still counts
+ * as open. Python tries triple quotes first, so `"""` can pair with another
+ * line even where its quotes close as single strings on this one.
+ */
+function standsAlone(text, tokens, family) {
+  if (family === 'python' && /'''|"""/.test(text)) {
+    return false;
+  }
+  const opener = OPENERS[family];
+  let position = 0;
+  for (const token of tokens) {
+    if (token.end > text.length) {
+      return false;
+    }
+    if (token.type === 'string' || token.type === 'comment') {
+      if (opener.test(text.slice(position, token.start))) {
+        return false;
+      }
+      position = token.end;
+    }
+  }
+  return !opener.test(text.slice(position));
+}
+
+/**
+ * Core CodeBlock's tokens for a block of code, kept line by line with
+ * line-relative offsets, exactly as `tokenize` returns them for the whole
+ * code.
+ */
+export class CodeLineTokens {
+  /** Where each line starts in the code. */
+  starts = [];
+  /** Each line's tokens. */
+  tokens = [];
+  lines = [];
+  /** Whether every line stands alone, so an edit re-tokenizes lines alone. */
+  linesStandAlone = false;
+  constructor(text, language) {
+    this.language = language;
+    this.family = typeof language === 'string' ? FAMILIES.get(language) ?? null : null;
+    this.tokenizeAll(text);
+  }
+
+  /** The code. */
+  get text() {
+    return this.lines.join('\n');
+  }
+
+  /** The line that holds `offset` in the code. */
+  lineAt(offset) {
+    let low = 0;
+    let high = this.starts.length - 1;
+    while (low < high) {
+      const mid = low + high + 1 >>> 1;
+      if (this.starts[mid] <= offset) {
+        low = mid;
+      } else {
+        high = mid - 1;
+      }
+    }
+    return low;
+  }
+
+  /**
+   * Replaces `removed` characters at `offset` in the code with `inserted`.
+   * Returns the lines it re-tokenized when the edit stays inside one line
+   * and every line still stands alone; otherwise it re-tokenizes all the
+   * code and returns null.
+   */
+  replace(offset, removed, inserted) {
+    const line = this.lineAt(offset);
+    const before = this.lines[line];
+    const column = offset - this.starts[line];
+    if (this.family == null || !this.linesStandAlone || column + removed > before.length || inserted.includes('\n')) {
+      const text = this.text;
+      this.tokenizeAll(text.slice(0, offset) + inserted + text.slice(offset + removed));
+      return null;
+    }
+    const after = before.slice(0, column) + inserted + before.slice(column + removed);
+    this.lines[line] = after;
+    const tokens = this.tokenizeLine(line);
+    if (!standsAlone(after, tokens, this.family)) {
+      this.tokenizeAll(this.text);
+      return null;
+    }
+    this.tokens[line] = tokens;
+    for (let i = line + 1; i < this.starts.length; i++) {
+      this.starts[i] += inserted.length - removed;
+    }
+    const changed = [line];
+    // A name that ends an earlier line looks past blank lines for `(`, so a
+    // new first visible character here can change that name's color.
+    if (firstVisible(before) !== firstVisible(after)) {
+      let above = line - 1;
+      while (above >= 0 && firstVisible(this.lines[above]) === '') {
+        above--;
+      }
+      if (above >= 0 && endsInOpenName(this.lines[above], this.tokens[above] ?? [])) {
+        this.tokens[above] = this.tokenizeLine(above);
+        changed.unshift(above);
+      }
+    }
+    return changed;
+  }
+
+  /**
+   * A line's tokens as `tokenize` finds them in the whole code. A function
+   * name is a name followed by `(` past any whitespace, line breaks
+   * included, so when the line ends in a name, the code up to the next
+   * visible character is tokenized with it.
+   */
+  tokenizeLine(line) {
+    let text = this.lines[line];
+    if (NAME_END.test(text)) {
+      for (let next = line + 1; next < this.lines.length; next++) {
+        const visible = /\S/.exec(this.lines[next]);
+        text += '\n' + (visible == null ? this.lines[next] : this.lines[next].slice(0, visible.index + 1));
+        if (visible != null) {
+          break;
+        }
+      }
+    }
+    return tokenize(text, this.language)[0] ?? [];
+  }
+  tokenizeAll(text) {
+    this.lines = text.split('\n');
+    let start = 0;
+    this.starts = this.lines.map(line => {
+      const lineStart = start;
+      start += line.length + 1;
+      return lineStart;
+    });
+    this.tokens = tokenize(text, this.language);
+    const family = this.family;
+    this.linesStandAlone = family != null && this.lines.every((line, i) => standsAlone(line, this.tokens[i] ?? [], family));
+  }
+}

package/dist/editorNodes.d.ts

@@ -0,0 +1,8 @@
+import type { Klass, LexicalNode } from 'lexical';
+/**
+ * The default OSS node set registered with the editor: headings, quotes,
+ * lists, links, code, and tables. Extend via the `nodes` prop / option rather
+ * than editing this list.
+ */
+export declare const DEFAULT_NODES: ReadonlyArray<Klass<LexicalNode>>;
+//# sourceMappingURL=editorNodes.d.ts.map

package/dist/editorNodes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorNodes.d.ts","sourceRoot":"","sources":["../src/editorNodes.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAC,KAAK,EAAE,WAAW,EAAC,MAAM,SAAS,CAAC;AAGhD;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,CAgB3D,CAAC"}