@rtif-sdk/web 1.0.0

package/dist/presets.d.ts

@@ -0,0 +1,95 @@
+/**
+ * Plugin presets for the RTIF web editor.
+ *
+ * Each preset is a factory function that returns an array of instantiated
+ * plugins ready to be registered via `engine.use()`. Presets are ordered
+ * from lightest (plain text) to heaviest (all features).
+ *
+ * @packageDocumentation
+ */
+import type { Plugin } from '@rtif-sdk/engine';
+/**
+ * Plain text preset — no plugins.
+ *
+ * Use this for editors that need only unformatted text input with no
+ * inline marks, block types, or other extensions.
+ *
+ * @returns An empty plugin array
+ *
+ * @example
+ * ```ts
+ * import { PRESET_PLAINTEXT } from '@rtif-sdk/web';
+ * import { createEngine } from '@rtif-sdk/engine';
+ *
+ * const engine = createEngine(initialDoc);
+ * for (const plugin of PRESET_PLAINTEXT) {
+ *   engine.use(plugin);
+ * }
+ * ```
+ */
+export declare const PRESET_PLAINTEXT: ReadonlyArray<Plugin>;
+/**
+ * Basic preset — essential inline formatting.
+ *
+ * Includes bold, italic, underline, and link plugins. Suitable for
+ * simple rich text fields (comments, chat messages, short-form content).
+ *
+ * @returns An array of basic formatting plugins
+ *
+ * @example
+ * ```ts
+ * import { PRESET_BASIC } from '@rtif-sdk/web';
+ * import { createEngine } from '@rtif-sdk/engine';
+ *
+ * const engine = createEngine(initialDoc);
+ * for (const plugin of PRESET_BASIC) {
+ *   engine.use(plugin);
+ * }
+ * ```
+ */
+export declare const PRESET_BASIC: ReadonlyArray<Plugin>;
+/**
+ * Standard preset — common rich text editing features.
+ *
+ * Includes everything in {@link PRESET_BASIC}, plus strikethrough,
+ * inline code, headings, lists, blockquotes, code blocks, and
+ * horizontal rules. Suitable for blog posts, documentation, and
+ * general-purpose content editing.
+ *
+ * @returns An array of standard editing plugins
+ *
+ * @example
+ * ```ts
+ * import { PRESET_STANDARD } from '@rtif-sdk/web';
+ * import { createEngine } from '@rtif-sdk/engine';
+ *
+ * const engine = createEngine(initialDoc);
+ * for (const plugin of PRESET_STANDARD) {
+ *   engine.use(plugin);
+ * }
+ * ```
+ */
+export declare const PRESET_STANDARD: ReadonlyArray<Plugin>;
+/**
+ * Full preset — all available plugins.
+ *
+ * Includes everything in {@link PRESET_STANDARD}, plus text color,
+ * font size, font family, alignment, indentation, callouts, images,
+ * and embeds. Suitable for full-featured document editors and CMS
+ * authoring tools.
+ *
+ * @returns An array of all available plugins
+ *
+ * @example
+ * ```ts
+ * import { PRESET_FULL } from '@rtif-sdk/web';
+ * import { createEngine } from '@rtif-sdk/engine';
+ *
+ * const engine = createEngine(initialDoc);
+ * for (const plugin of PRESET_FULL) {
+ *   engine.use(plugin);
+ * }
+ * ```
+ */
+export declare const PRESET_FULL: ReadonlyArray<Plugin>;
+//# sourceMappingURL=presets.d.ts.map

package/dist/presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../src/presets.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAsB/C;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,gBAAgB,EAAE,aAAa,CAAC,MAAM,CAAM,CAAC;AAE1D;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY,EAAE,aAAa,CAAC,MAAM,CAK9C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,EAAE,aAAa,CAAC,MAAM,CAiBjD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,WAAW,EAAE,aAAa,CAAC,MAAM,CA+B7C,CAAC"}

package/dist/presets.js

@@ -0,0 +1,159 @@
+/**
+ * Plugin presets for the RTIF web editor.
+ *
+ * Each preset is a factory function that returns an array of instantiated
+ * plugins ready to be registered via `engine.use()`. Presets are ordered
+ * from lightest (plain text) to heaviest (all features).
+ *
+ * @packageDocumentation
+ */
+import { boldPlugin } from './plugins/bold-plugin.js';
+import { italicPlugin } from './plugins/italic-plugin.js';
+import { underlinePlugin } from './plugins/underline-plugin.js';
+import { linkPlugin } from './plugins/link-plugin.js';
+import { strikethroughPlugin } from './plugins/strikethrough-plugin.js';
+import { codePlugin } from './plugins/code-plugin.js';
+import { headingPlugin } from './plugins/heading-plugin.js';
+import { listPlugin } from './plugins/list-plugin.js';
+import { blockquotePlugin } from './plugins/blockquote-plugin.js';
+import { codeBlockPlugin } from './plugins/code-block-plugin.js';
+import { hrPlugin } from './plugins/hr-plugin.js';
+import { textColorPlugin } from './plugins/text-color-plugin.js';
+import { fontSizePlugin } from './plugins/font-size-plugin.js';
+import { fontFamilyPlugin } from './plugins/font-family-plugin.js';
+import { alignmentPlugin } from './plugins/alignment-plugin.js';
+import { indentPlugin } from './plugins/indent-plugin.js';
+import { calloutPlugin } from './plugins/callout-plugin.js';
+import { imagePlugin } from './plugins/image-plugin.js';
+import { embedPlugin } from './plugins/embed-plugin.js';
+/**
+ * Plain text preset — no plugins.
+ *
+ * Use this for editors that need only unformatted text input with no
+ * inline marks, block types, or other extensions.
+ *
+ * @returns An empty plugin array
+ *
+ * @example
+ * ```ts
+ * import { PRESET_PLAINTEXT } from '@rtif-sdk/web';
+ * import { createEngine } from '@rtif-sdk/engine';
+ *
+ * const engine = createEngine(initialDoc);
+ * for (const plugin of PRESET_PLAINTEXT) {
+ *   engine.use(plugin);
+ * }
+ * ```
+ */
+export const PRESET_PLAINTEXT = [];
+/**
+ * Basic preset — essential inline formatting.
+ *
+ * Includes bold, italic, underline, and link plugins. Suitable for
+ * simple rich text fields (comments, chat messages, short-form content).
+ *
+ * @returns An array of basic formatting plugins
+ *
+ * @example
+ * ```ts
+ * import { PRESET_BASIC } from '@rtif-sdk/web';
+ * import { createEngine } from '@rtif-sdk/engine';
+ *
+ * const engine = createEngine(initialDoc);
+ * for (const plugin of PRESET_BASIC) {
+ *   engine.use(plugin);
+ * }
+ * ```
+ */
+export const PRESET_BASIC = [
+    boldPlugin(),
+    italicPlugin(),
+    underlinePlugin(),
+    linkPlugin(),
+];
+/**
+ * Standard preset — common rich text editing features.
+ *
+ * Includes everything in {@link PRESET_BASIC}, plus strikethrough,
+ * inline code, headings, lists, blockquotes, code blocks, and
+ * horizontal rules. Suitable for blog posts, documentation, and
+ * general-purpose content editing.
+ *
+ * @returns An array of standard editing plugins
+ *
+ * @example
+ * ```ts
+ * import { PRESET_STANDARD } from '@rtif-sdk/web';
+ * import { createEngine } from '@rtif-sdk/engine';
+ *
+ * const engine = createEngine(initialDoc);
+ * for (const plugin of PRESET_STANDARD) {
+ *   engine.use(plugin);
+ * }
+ * ```
+ */
+export const PRESET_STANDARD = [
+    // Inline marks (from BASIC)
+    boldPlugin(),
+    italicPlugin(),
+    underlinePlugin(),
+    linkPlugin(),
+    // Additional inline marks
+    strikethroughPlugin(),
+    codePlugin(),
+    // Block types
+    headingPlugin(),
+    listPlugin(),
+    blockquotePlugin(),
+    codeBlockPlugin(),
+    hrPlugin(),
+];
+/**
+ * Full preset — all available plugins.
+ *
+ * Includes everything in {@link PRESET_STANDARD}, plus text color,
+ * font size, font family, alignment, indentation, callouts, images,
+ * and embeds. Suitable for full-featured document editors and CMS
+ * authoring tools.
+ *
+ * @returns An array of all available plugins
+ *
+ * @example
+ * ```ts
+ * import { PRESET_FULL } from '@rtif-sdk/web';
+ * import { createEngine } from '@rtif-sdk/engine';
+ *
+ * const engine = createEngine(initialDoc);
+ * for (const plugin of PRESET_FULL) {
+ *   engine.use(plugin);
+ * }
+ * ```
+ */
+export const PRESET_FULL = [
+    // Inline marks (from BASIC)
+    boldPlugin(),
+    italicPlugin(),
+    underlinePlugin(),
+    linkPlugin(),
+    // Additional inline marks (from STANDARD)
+    strikethroughPlugin(),
+    codePlugin(),
+    // Block types (from STANDARD)
+    headingPlugin(),
+    listPlugin(),
+    blockquotePlugin(),
+    codeBlockPlugin(),
+    hrPlugin(),
+    // Parameterized text styling
+    textColorPlugin(),
+    fontSizePlugin(),
+    fontFamilyPlugin(),
+    // Paragraph formatting
+    alignmentPlugin(),
+    indentPlugin(),
+    // Advanced block types
+    calloutPlugin(),
+    imagePlugin(),
+    embedPlugin(),
+];
+//# sourceMappingURL=presets.js.map

package/dist/presets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presets.js","sourceRoot":"","sources":["../src/presets.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA0B,EAAE,CAAC;AAE1D;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,YAAY,GAA0B;IACjD,UAAU,EAAE;IACZ,YAAY,EAAE;IACd,eAAe,EAAE;IACjB,UAAU,EAAE;CACb,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,eAAe,GAA0B;IACpD,4BAA4B;IAC5B,UAAU,EAAE;IACZ,YAAY,EAAE;IACd,eAAe,EAAE;IACjB,UAAU,EAAE;IAEZ,0BAA0B;IAC1B,mBAAmB,EAAE;IACrB,UAAU,EAAE;IAEZ,cAAc;IACd,aAAa,EAAE;IACf,UAAU,EAAE;IACZ,gBAAgB,EAAE;IAClB,eAAe,EAAE;IACjB,QAAQ,EAAE;CACX,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,WAAW,GAA0B;IAChD,4BAA4B;IAC5B,UAAU,EAAE;IACZ,YAAY,EAAE;IACd,eAAe,EAAE;IACjB,UAAU,EAAE;IAEZ,0CAA0C;IAC1C,mBAAmB,EAAE;IACrB,UAAU,EAAE;IAEZ,8BAA8B;IAC9B,aAAa,EAAE;IACf,UAAU,EAAE;IACZ,gBAAgB,EAAE;IAClB,eAAe,EAAE;IACjB,QAAQ,EAAE;IAEV,6BAA6B;IAC7B,eAAe,EAAE;IACjB,cAAc,EAAE;IAChB,gBAAgB,EAAE;IAElB,uBAAuB;IACvB,eAAe,EAAE;IACjB,YAAY,EAAE;IAEd,uBAAuB;IACvB,aAAa,EAAE;IACf,WAAW,EAAE;IACb,WAAW,EAAE;CACd,CAAC"}

package/dist/renderer.d.ts

@@ -0,0 +1,125 @@
+import type { Document, Block, Span } from '@rtif-sdk/core';
+import type { MarkRendererRegistry } from './mark-renderer.js';
+import type { BlockRendererRegistry } from './block-renderer.js';
+/**
+ * Create a DOM element for an RTIF span.
+ *
+ * When a `markRenderers` registry is provided and the span has a mark with a
+ * registered {@link SpanReplacer}, the replacer's `createElement()` is called
+ * to produce a fully custom element. Otherwise, a default `<span>` is created
+ * with mark renderers applied.
+ *
+ * Non-empty spans contain a single Text node. Empty spans (text === '')
+ * contain a `<br>` element so the block has layout height in the browser.
+ *
+ * @param span - The RTIF span to render
+ * @param markRenderers - Optional registry of mark renderers for visual styling
+ * @returns An `HTMLElement` with `data-rtif-span` attribute and appropriate child node
+ *
+ * @example
+ * ```ts
+ * const el = createSpanElement({ text: 'hello' });
+ * // <span data-rtif-span>hello</span>
+ *
+ * const boldEl = createSpanElement(
+ *   { text: 'bold', marks: { bold: true } },
+ *   markRegistry,
+ * );
+ * // <span data-rtif-span class="rtif-bold">bold</span>
+ * ```
+ */
+export declare function createSpanElement(span: Span, markRenderers?: MarkRendererRegistry): HTMLElement;
+/**
+ * Create a DOM block element for an RTIF block.
+ *
+ * Each block renders as a `<div>` with `data-rtif-block` set to the block ID
+ * and `data-block-type` set to the block type. Child span elements are created
+ * for each span in the block.
+ *
+ * When a `blockRenderers` registry is provided, the renderer for the block's
+ * type is applied to the element (adding CSS classes, ARIA roles, etc.).
+ *
+ * @param block - The RTIF block to render
+ * @param markRenderers - Optional registry of mark renderers for visual styling
+ * @param blockRenderers - Optional registry of block renderers for block-type styling
+ * @returns A `<div data-rtif-block="{id}" data-block-type="{type}">` element
+ *
+ * @example
+ * ```ts
+ * const el = createBlockElement({
+ *   id: 'b1',
+ *   type: 'text',
+ *   spans: [{ text: 'Hello world' }],
+ * });
+ * // <div data-rtif-block="b1" data-block-type="text">
+ * //   <span data-rtif-span>Hello world</span>
+ * // </div>
+ * ```
+ */
+export declare function createBlockElement(block: Block, markRenderers?: MarkRendererRegistry, blockRenderers?: BlockRendererRegistry): HTMLDivElement;
+/**
+ * Find a block DOM element within a root by its RTIF block ID.
+ *
+ * @param root - The root element to search within
+ * @param blockId - The block ID to find (matches `data-rtif-block` attribute)
+ * @returns The matching element, or `null` if not found
+ *
+ * @example
+ * ```ts
+ * const blockEl = findBlockElement(root, 'b1');
+ * if (blockEl) {
+ *   console.log(blockEl.textContent);
+ * }
+ * ```
+ */
+export declare function findBlockElement(root: HTMLElement, blockId: string): HTMLElement | null;
+/**
+ * Perform a full initial render of an RTIF document into a root element.
+ *
+ * Clears all existing content in the root, then creates block and span
+ * elements for the entire document. Use this for the first render; use
+ * {@link reconcile} for subsequent updates.
+ *
+ * @param root - The root DOM element (typically `contenteditable`)
+ * @param doc - The RTIF document to render
+ * @param markRenderers - Optional registry of mark renderers for visual styling
+ * @param blockRenderers - Optional registry of block renderers for block-type styling
+ *
+ * @example
+ * ```ts
+ * const root = document.getElementById('editor')!;
+ * renderInitial(root, {
+ *   version: 1,
+ *   blocks: [{ id: 'b1', type: 'text', spans: [{ text: 'Hello' }] }],
+ * });
+ * ```
+ */
+export declare function renderInitial(root: HTMLElement, doc: Document, markRenderers?: MarkRendererRegistry, blockRenderers?: BlockRendererRegistry): void;
+/**
+ * Efficiently reconcile the DOM to match a new RTIF document state.
+ *
+ * Only touches blocks that have changed (detected by object reference
+ * comparison). Handles block additions, removals, reordering, and
+ * span-level content updates within changed blocks. When a block's type
+ * or attrs change (by reference), the entire block element is replaced
+ * to ensure block-renderer styling is re-applied cleanly.
+ *
+ * **Critical**: When `composingBlockId` is set (IME composition active),
+ * the block with that ID is skipped entirely to avoid disrupting the
+ * browser's native composition rendering.
+ *
+ * @param root - The root DOM element containing block elements
+ * @param prevDoc - The previous RTIF document state
+ * @param nextDoc - The new RTIF document state to reconcile toward
+ * @param composingBlockId - Block ID currently under IME composition, or `null`
+ * @param markRenderers - Optional registry of mark renderers for visual styling
+ * @param blockRenderers - Optional registry of block renderers for block-type styling
+ *
+ * @example
+ * ```ts
+ * // After an engine dispatch produces a new document:
+ * reconcile(root, prevDoc, nextDoc, composingBlockId, markRenderers, blockRenderers);
+ * ```
+ */
+export declare function reconcile(root: HTMLElement, prevDoc: Document, nextDoc: Document, composingBlockId: string | null, markRenderers?: MarkRendererRegistry, blockRenderers?: BlockRendererRegistry): void;
+//# sourceMappingURL=renderer.d.ts.map

package/dist/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAoCjE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,IAAI,EACV,aAAa,CAAC,EAAE,oBAAoB,GACnC,WAAW,CA6Bb;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,KAAK,EACZ,aAAa,CAAC,EAAE,oBAAoB,EACpC,cAAc,CAAC,EAAE,qBAAqB,GACrC,cAAc,CAgBhB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE,MAAM,GACd,WAAW,GAAG,IAAI,CAEpB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,WAAW,EACjB,GAAG,EAAE,QAAQ,EACb,aAAa,CAAC,EAAE,oBAAoB,EACpC,cAAc,CAAC,EAAE,qBAAqB,GACrC,IAAI,CASN;AA4HD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE,QAAQ,EACjB,OAAO,EAAE,QAAQ,EACjB,gBAAgB,EAAE,MAAM,GAAG,IAAI,EAC/B,aAAa,CAAC,EAAE,oBAAoB,EACpC,cAAc,CAAC,EAAE,qBAAqB,GACrC,IAAI,CA4GN"}