@rathkit/rte-core 0.1.0-alpha.3 → 0.1.0-alpha.5

package/dist/standard/index.d.ts

@@ -1,9 +1,10 @@
 import { type AutoformatOptions } from "../autoformat/plugin.ts";
 import { Editor, type EditorOptions } from "../dom/view.ts";
-import { type ImagesOptions } from "../images/plugin.ts";
+import { type FootnotesOptions } from "../footnotes/plugin.ts";
+import { type ImagesOptions } from "../images/index.ts";
 import { type ListsOptions } from "../lists/plugin.ts";
 import type { Plugin } from "../plugin.ts";
-import { type TablesOptions } from "../tables/plugin.ts";
+import { type TablesOptions } from "../tables/index.ts";
 /** Which standard plugins to use, and how. */
 export interface StandardPluginOptions extends ImagesOptions {
     /** Options for lists, or `false` to leave lists out. */
@@ -14,6 +15,8 @@ export interface StandardPluginOptions extends ImagesOptions {
     readonly find?: false;
     /** Options for tables, or `false` to leave tables out. */
     readonly tables?: TablesOptions | false;
+    /** Options for footnotes, or `false` to leave them out. */
+    readonly footnotes?: FootnotesOptions | false;
     /** More plugins, added after the standard ones. */
     readonly plugins?: readonly Plugin[];
 }
@@ -22,4 +25,3 @@ export interface StandardOptions extends Omit<EditorOptions, "plugins">, Standar
 /** The standard plugins, for hosts that build their own editor but want the usual parts. */
 export declare function standardPlugins(options?: StandardPluginOptions): Plugin[];
 export declare function createEditor(options: StandardOptions): Editor;
-export { Editor, type EditorOptions };

package/dist/standard/index.js

@@ -1,10 +1,11 @@
 import { autoformat } from "../autoformat/plugin.js";
 import { Editor } from "../dom/view.js";
 import { find } from "../find/plugin.js";
-import { images } from "../images/plugin.js";
+import { footnotes } from "../footnotes/plugin.js";
+import { images } from "../images/index.js";
 import { lists } from "../lists/plugin.js";
 import { svg } from "../svg/plugin.js";
-import { tables } from "../tables/plugin.js";
+import { tables } from "../tables/index.js";
 import { word } from "../word/plugin.js";
 export function standardPlugins(options = {}) {
     const { uploadImage, maxInlineImageBytes, maxImageFileBytes, onImageRejected } = options;
@@ -13,6 +14,7 @@ export function standardPlugins(options = {}) {
         ...(options.tables === false ? [] : [tables(options.tables)]),
         ...(options.find === false ? [] : [find()]),
         ...(options.autoformat === false ? [] : [autoformat(options.autoformat)]),
+        ...(options.footnotes === false ? [] : [footnotes(options.footnotes)]),
         word(),
         svg(),
         images({
@@ -25,8 +27,7 @@ export function standardPlugins(options = {}) {
     ];
 }
 export function createEditor(options) {
-    const { lists: _lists, tables: _tables, find: _find, autoformat: _autoformat, plugins: _plugins, uploadImage: _u, maxInlineImageBytes: _m, maxImageFileBytes: _f, onImageRejected: _r, ...editorOptions } = options;
-    void [_lists, _tables, _find, _autoformat, _plugins, _u, _m, _f, _r];
+    const { lists: _lists, tables: _tables, find: _find, autoformat: _autoformat, footnotes: _footnotes, plugins: _plugins, uploadImage: _u, maxInlineImageBytes: _m, maxImageFileBytes: _f, onImageRejected: _r, ...editorOptions } = options;
+    void [_lists, _tables, _find, _autoformat, _footnotes, _plugins, _u, _m, _f, _r];
     return new Editor({ ...editorOptions, plugins: standardPlugins(options) });
 }
-export { Editor };

package/dist/stats.js

@@ -4,7 +4,7 @@ import { selectedText } from "./edit.js";
 const WORD = /[\p{L}\p{M}\p{N}]+(?:['’\-‑][\p{L}\p{M}\p{N}]+)*/gu;
 export function countText(text) {
     const clean = text.replace(//g, "").replace(/\n/g, " ");
-    return { words: (clean.match(WORD) ?? []).length, characters: [...clean.replace(/\s+$/g, "").replace(/^\s+/g, "")].length };
+    return { words: (clean.match(WORD) ?? []).length, characters: [...clean.trim()].length };
 }
 export function countDocument(doc) {
     let words = 0;

package/dist/svg/svg.js

@@ -44,7 +44,15 @@ const decodeXml = (value) => value.replace(ENTITY, (_, dec, hex, name) => {
 function parseXml(source, limits) {
     if (/<!ENTITY|<!ATTLIST|<!NOTATION/i.test(source) || /<!\[CDATA\[/i.test(source))
         return undefined;
-    const stripped = source.replace(/^/, "").replace(/<\?xml[^>]*\?>/i, "").replace(/<!DOCTYPE[^>[]*(?:\[[^\]]*\])?[^>]*>/gi, "").replace(/<!--[\s\S]*?-->/g, "");
+    let stripped = source.replace(/^/, "").replace(/<\?xml[^>]*\?>/i, "").replace(/<!DOCTYPE[^>[]*(?:\[[^\]]*\])?[^>]*>/gi, "");
+    for (let pass = 0; pass < 4; pass++) {
+        const next = stripped.replace(/<!--[\s\S]*?-->/g, "");
+        if (next === stripped)
+            break;
+        stripped = next;
+    }
+    if (stripped.includes("<!--"))
+        return undefined;
     const stack = [];
     let root;
     let count = 0;

package/dist/{dom/tableview.d.ts → tables/cells.d.ts}

@@ -1,16 +1,17 @@
-import type { Engine } from "../engine.ts";
+import type { ViewHost } from "../plugin.ts";
 /** The attribute on a cell that a selection covers, for styling. */
-export declare const SELECTED_CELL = "data-rk-cell-selected";
+export declare const SELECTED_CELL = "data-rte-cell-selected";
 /**
  * Marks the cells of the rectangle a selection runs across (when it starts and ends in different cells of one table). The marks are
  * attributes on the drawn cells, not part of the model, and they are put on again after every change.
  */
 export declare class CellMarks {
+    private readonly host;
+    private marked;
     private readonly root;
     private readonly engine;
-    private readonly quiet;
-    private marked;
-    constructor(root: HTMLElement, engine: Engine, quiet: () => void);
+    constructor(host: ViewHost);
+    private quiet;
     update(): void;
 }
 /**
@@ -19,4 +20,4 @@ export declare class CellMarks {
  * The bottom edge of a row works the same way through `table.rowHeight`.
  * Returns what takes it away again.
  */
-export declare function installColumnResize(root: HTMLElement, engine: Engine, listen: (target: EventTarget, type: string, handler: (event: Event) => void) => void, quiet: () => void): void;
+export declare function installColumnResize(host: ViewHost): void;

package/dist/{dom/tableview.js → tables/cells.js}

@@ -1,20 +1,20 @@
 import { pathKey } from "../path.js";
 import { inRow, locateCell, selectedCells } from "../tablegrid.js";
-import { posFromDom } from "./render.js";
-export const SELECTED_CELL = "data-rk-cell-selected";
+export const SELECTED_CELL = "data-rte-cell-selected";
 const GRAB = 5;
 const MIN_WIDTH = 24;
 const MIN_HEIGHT = 16;
 export class CellMarks {
+    host;
+    marked = [];
     root;
     engine;
-    quiet;
-    marked = [];
-    constructor(root, engine, quiet) {
-        this.root = root;
-        this.engine = engine;
-        this.quiet = quiet;
+    constructor(host) {
+        this.host = host;
+        this.root = host.element;
+        this.engine = host.engine;
     }
+    quiet() { this.host.quiet(); }
     update() {
         const sel = this.engine.selection;
         const found = pathKey(sel.anchor.path) === pathKey(sel.focus.path) ? undefined : selectedCells(this.engine.document, sel);
@@ -56,11 +56,15 @@ function rowEdgeAt(root, event) {
     const box = row.getBoundingClientRect();
     return event.clientY >= box.bottom - GRAB && event.clientY <= box.bottom + GRAB ? cell : null;
 }
-export function installColumnResize(root, engine, listen, quiet) {
+export function installColumnResize(host) {
+    const root = host.element;
+    const engine = host.engine;
+    const quiet = () => host.quiet();
+    const listen = (target, type, handler) => host.listen(target, type, handler);
     const available = () => !engine.readOnly && engine.commands.list().some((c) => c.name === "table.columnWidth");
     const cellPath = (cell) => {
         const inside = cell.querySelector("[data-rte]");
-        return inside ? posFromDom(root, inside, 0)?.path : undefined;
+        return inside ? host.posFromDom(inside, 0)?.path : undefined;
     };
     const rowAvailable = () => !engine.readOnly && engine.commands.list().some((c) => c.name === "table.rowHeight");
     let rowDrag;
@@ -92,7 +96,7 @@ export function installColumnResize(root, engine, listen, quiet) {
             const rowBox = row.getBoundingClientRect();
             const rowTable = rowCell.closest("table")?.getBoundingClientRect() ?? rowBox;
             const rowLine = document.createElement("div");
-            rowLine.setAttribute("data-rk-resize-line", "");
+            rowLine.setAttribute("data-rte-resize-line", "");
             rowLine.style.cssText = `position:fixed;z-index:2147483647;pointer-events:none;height:2px;background:#17408b;top:${rowBox.bottom - 1}px;left:${rowTable.left}px;width:${rowTable.width}px`;
             document.body.appendChild(rowLine);
             rowDrag = { path: rowPath, startY: event.clientY, startHeight: rowBox.height, top: rowBox.top, line: rowLine, height: rowBox.height };
@@ -102,7 +106,7 @@ export function installColumnResize(root, engine, listen, quiet) {
         const box = cell.getBoundingClientRect();
         const table = cell.closest("table")?.getBoundingClientRect() ?? box;
         const line = document.createElement("div");
-        line.setAttribute("data-rk-resize-line", "");
+        line.setAttribute("data-rte-resize-line", "");
         line.style.cssText = `position:fixed;z-index:2147483647;pointer-events:none;width:2px;background:#17408b;left:${box.right - 1}px;top:${table.top}px;height:${table.height}px`;
         document.body.appendChild(line);
         drag = { cell, path, startX: event.clientX, startWidth: box.width, line, width: box.width };

package/dist/{dom/tablegrips.d.ts → tables/grips.d.ts}

@@ -1,7 +1,6 @@
-import type { Engine } from "../engine.ts";
+import type { ViewHost } from "../plugin.ts";
 export declare class TableGrips {
-    private readonly root;
-    private readonly engine;
+    private readonly host;
     private readonly grips;
     private guide;
     private readonly stops;
@@ -9,7 +8,9 @@ export declare class TableGrips {
     private table;
     private path;
     private touch;
-    constructor(root: HTMLElement, engine: Engine);
+    private readonly root;
+    private readonly engine;
+    constructor(host: ViewHost);
     private available;
     /** The drawn cell the caret is in, and its table, when the table is at the top level. Found from the page, so it costs nothing in a big table. */
     private find;

package/dist/{dom/tablegrips.js → tables/grips.js}

@@ -1,11 +1,9 @@
 import { getBlock } from "../path.js";
 import { inRow, locateCell, toGrid } from "../tablegrid.js";
-import { domFromPos } from "./render.js";
 const SIZE = 22;
 const COLOR = "#17408b";
 export class TableGrips {
-    root;
-    engine;
+    host;
     grips = new Map();
     guide;
     stops = [];
@@ -13,9 +11,12 @@ export class TableGrips {
     table;
     path = [];
     touch = false;
-    constructor(root, engine) {
-        this.root = root;
-        this.engine = engine;
+    root;
+    engine;
+    constructor(host) {
+        this.host = host;
+        this.root = host.element;
+        this.engine = host.engine;
         const reposition = () => this.place();
         window.addEventListener("scroll", reposition, true);
         window.addEventListener("resize", reposition);
@@ -40,7 +41,7 @@ export class TableGrips {
         const top = this.root.children[path[0]];
         if (!(top instanceof HTMLElement) || top.tagName !== "TABLE")
             return undefined;
-        const at = domFromPos(this.root, this.engine.selection.focus);
+        const at = this.host.domFromPos(this.engine.selection.focus);
         const from = at ? (at.node instanceof Element ? at.node : at.node.parentElement) : null;
         const cell = from?.closest("td, th");
         return cell instanceof HTMLElement && cell.closest("table") === top ? { cell, table: top, path } : undefined;
@@ -81,7 +82,7 @@ export class TableGrips {
     }
     make(kind) {
         const el = document.createElement("div");
-        el.setAttribute("data-rk-grip", kind);
+        el.setAttribute("data-rte-grip", kind);
         el.setAttribute("role", "presentation");
         const cursor = kind === "row" ? "ns-resize" : kind === "column" ? "ew-resize" : kind === "width" ? "col-resize" : "row-resize";
         el.style.cssText = `position:fixed;z-index:2147483646;width:${SIZE}px;height:${SIZE}px;box-sizing:border-box;background:${COLOR};border:2px solid #fff;border-radius:${kind === "row" || kind === "column" ? "4px" : "50%"};cursor:${cursor};touch-action:none;opacity:0.9`;
@@ -119,7 +120,7 @@ export class TableGrips {
         const t = table.getBoundingClientRect();
         const horizontal = kind === "column" || kind === "width";
         const line = document.createElement("div");
-        line.setAttribute("data-rk-resize-line", "");
+        line.setAttribute("data-rte-resize-line", "");
         line.style.cssText = `position:fixed;z-index:2147483645;pointer-events:none;background:${COLOR};${horizontal ? `width:2px;top:${t.top}px;height:${t.height}px` : `height:2px;left:${t.left}px;width:${t.width}px`}`;
         document.body.appendChild(line);
         this.guide = line;

package/dist/tables/index.d.ts

@@ -1,2 +1,6 @@
-export { tables, type TablesOptions } from "./plugin.ts";
+import { type TablesOptions } from "./plugin.ts";
+import type { Plugin } from "../plugin.ts";
+export type { TablesOptions };
+/** The tables plugin, with the part that draws table handles in a browser. (`./plugin.ts` is the same without it.) */
+export declare const tables: (options?: TablesOptions) => Plugin;
 export { BORDER_PRESETS, borderPreset, cellBackground, cellBorderPreset, rowHeight, setCellBackground, setCellBorder, setRowHeight, columnWidth, setColumnWidth, canMerge, canSplit, deleteColumn, deleteRow, deleteTable, hasHeaderRow, inTable, insertColumn, insertRow, insertTable, makeTable, mergeCells, moveToCell, splitCell, toggleHeaderRow, type InsertTableOptions } from "./tables.ts";

package/dist/tables/index.js

@@ -1,2 +1,4 @@
-export { tables } from "./plugin.js";
+import { tables as engineOnly } from "./plugin.js";
+import { tablesView } from "./view.js";
+export const tables = (options) => ({ ...engineOnly(options), view: tablesView });
 export { BORDER_PRESETS, borderPreset, cellBackground, cellBorderPreset, rowHeight, setCellBackground, setCellBorder, setRowHeight, columnWidth, setColumnWidth, canMerge, canSplit, deleteColumn, deleteRow, deleteTable, hasHeaderRow, inTable, insertColumn, insertRow, insertTable, makeTable, mergeCells, moveToCell, splitCell, toggleHeaderRow } from "./tables.js";

package/dist/tables/view.d.ts

@@ -0,0 +1,2 @@
+import type { ViewExtension } from "../plugin.ts";
+export declare const tablesView: ViewExtension;

package/dist/tables/view.js

@@ -0,0 +1,15 @@
+import { CellMarks, installColumnResize } from "./cells.js";
+import { TableGrips } from "./grips.js";
+export const tablesView = (host) => {
+    const marks = new CellMarks(host);
+    const grips = new TableGrips(host);
+    installColumnResize(host);
+    const stop = host.onChange((change) => {
+        if (change.docChanged || change.selectionChanged)
+            marks.update();
+        grips.update();
+    });
+    marks.update();
+    grips.update();
+    return () => { stop(); grips.destroy(); };
+};

package/dist/warning.d.ts

@@ -0,0 +1,16 @@
+/** Why a warning was made. The codes are stable: a host can switch on them. */
+export declare const WARNING_CODES: readonly ["plugin-failed", "plugin-rejected", "plugin-message", "key-conflict", "content-too-long", "content-unreadable", "copy-failed", "upload-failed", "bad-option", "missing-label", "late-options", "listener-failed"];
+/** One of the codes in `WARNING_CODES`. */
+export type WarningCode = (typeof WARNING_CODES)[number];
+/** A problem the editor carried on from, reported to `onWarning`. Never thrown. */
+export interface Warning {
+    readonly code: WarningCode;
+    /** For a person: what happened and what was done about it. */
+    readonly message: string;
+    /** The plugin it concerns, when there is one. */
+    readonly plugin?: string;
+    /** The error that was caught, when one was. */
+    readonly error?: unknown;
+}
+/** What an error says, whatever was thrown. */
+export declare const describeError: (error: unknown) => string;

package/dist/warning.js

@@ -0,0 +1,5 @@
+export const WARNING_CODES = [
+    "plugin-failed", "plugin-rejected", "plugin-message", "key-conflict", "content-too-long", "content-unreadable",
+    "copy-failed", "upload-failed", "bad-option", "missing-label", "late-options", "listener-failed",
+];
+export const describeError = (error) => (error instanceof Error ? error.message : String(error));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rathkit/rte-core",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.5",
   "description": "Document model, transforms, commands, view layer and plugin API for Rathkit RTE.",
   "keywords": [
     "rich-text",
@@ -64,6 +64,14 @@
       "types": "./dist/find/index.d.ts",
       "default": "./dist/find/index.js"
     },
+    "./footnotes": {
+      "types": "./dist/footnotes/index.d.ts",
+      "default": "./dist/footnotes/index.js"
+    },
+    "./markdown": {
+      "types": "./dist/markdown/index.d.ts",
+      "default": "./dist/markdown/index.js"
+    },
     "./word": {
       "types": "./dist/word/index.d.ts",
       "default": "./dist/word/index.js"
@@ -92,6 +100,8 @@
       "tables",
       "find",
       "autoformat",
+      "markdown",
+      "footnotes",
       "word",
       "svg",
       "images"
@@ -128,6 +138,18 @@
         "gzipKB": 15,
         "plugin": true
       },
+      {
+        "name": "footnotes plugin",
+        "entry": "dist/footnotes/index.js",
+        "gzipKB": 15,
+        "plugin": true
+      },
+      {
+        "name": "markdown plugin",
+        "entry": "dist/markdown/index.js",
+        "gzipKB": 15,
+        "plugin": true
+      },
       {
         "name": "find plugin",
         "entry": "dist/find/index.js",