stilo-editor 0.1.0 → 0.2.0

package/README.md

@@ -1,13 +1,27 @@
-<h1 align="center">
+<p align="center">
   <picture>
     <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/kojak8791/stilo-editor/main/assets/logo-dark.svg">
     <img src="https://raw.githubusercontent.com/kojak8791/stilo-editor/main/assets/logo.svg" alt="Stilo" width="300">
   </picture>
-</h1>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/stilo-editor"><img src="https://img.shields.io/npm/v/stilo-editor" alt="npm version"></a>
+  <a href="LICENSE"><img src="https://img.shields.io/npm/l/stilo-editor" alt="MIT license"></a>
+  <img src="https://img.shields.io/npm/types/stilo-editor" alt="TypeScript types included">
+</p>
 
 Open-source HTML5 WYSIWYG editor built on [ProseMirror](https://prosemirror.net).
 Clean HTML in and out, headless core, no paid tiers.
 
+<p align="center">
+  <img src="https://raw.githubusercontent.com/kojak8791/stilo-editor/main/assets/screenshot.png" alt="Stilo with the default toolbar: formatted text, a checklist, a table and the link popover open" width="800">
+</p>
+
+<h2 align="center">
+  <a href="https://kojak8791.github.io/stilo-editor/">See it in action: try the live demo →</a>
+</h2>
+
 > [!WARNING]
 > **Preview release.** Versions `0.x` are early previews: the editor works, but APIs may change
 > in any minor version until `1.0.0`. Read the release notes before updating.
@@ -15,10 +29,10 @@ Clean HTML in and out, headless core, no paid tiers.
 ## Why Stilo
 
 - **Built for very large documents.** Typing stays immediate in a document longer than most
-  novels (see [Large documents](#large-documents)). Measured in a real browser, checked against
-  budgets, not assumed.
-- **Entirely open source (MIT).** Aiming at the feature level of Tiptap or CKEditor 5, with no paid
-  tiers and no closed "pro" extensions.
+  novels (see [Large documents](https://github.com/kojak8791/stilo-editor#large-documents)).
+  Measured in a real browser, checked against budgets, not assumed.
+- **Entirely open source (MIT).** Aiming at the feature level of the established rich text
+  editors, with no paid tiers and no closed "pro" extensions.
 - **HTML is the public format.** Content goes in as HTML and comes out as clean, semantic,
   self-contained HTML, with a strict allowlist for tags, attributes and inline styles.
 - **Headless core, optional UI.** The core works without any UI; the default toolbar and menus are
@@ -55,28 +69,67 @@ column is what you type to get the format as you write.
 | Inline code | <kbd>Ctrl</kbd>+<kbd>E</kbd> | `` `text` `` | |
 | Subscript | <kbd>Ctrl</kbd>+<kbd>,</kbd> | | Subscript and superscript exclude each other |
 | Superscript | <kbd>Ctrl</kbd>+<kbd>.</kbd> | | |
+| Font family | | | Toolbar dropdown: generic families (sans serif, serif, monospace) and common fonts, each shown in its own font; a font that is not in the list (e.g. pasted from Word) is still shown |
+| Font size | | | − and + change the size by one point; the field between them shows the size, takes a typed one and opens a list. Unit pt by default (px or rem as an option) |
 | Text color | | | The button applies the last color; its arrow opens a palette, "No color" and a custom color |
 | Highlight | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>H</kbd> | `==text==` | Same button as text color; the shortcut applies the default highlight |
 | Clear formatting | <kbd>Ctrl</kbd>+<kbd>\\</kbd> | | Links stay |
+| Text case | | | A menu: UPPERCASE, lowercase, Title Case, Sentence case, tOGGLE cASE; the letters change, the formatting stays |
 | **Links** | | | |
 | Link | <kbd>Ctrl</kbd>+<kbd>K</kbd> | | A popover sets the URL and "open in new tab"; on a link, a small bubble offers open, edit and remove |
 | **Blocks** | | | |
 | Paragraph | <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>0</kbd> | | |
 | Headings 1–6 | <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>1</kbd>…<kbd>6</kbd> | `# ` … `###### ` | Also in the toolbar dropdown |
 | Quote | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>B</kbd> | `> ` | |
+| Code block | <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>C</kbd> | ```` ``` ```` + space, ```` ```js ```` + space for a language | Plain text in a monospace font, no formatting; the selected paragraphs become one block, a line each, and back. <kbd>Enter</kbd> on an empty last line, or <kbd>Ctrl</kbd>+<kbd>Enter</kbd>, leaves it. The language is written as `class="language-js"` for syntax highlighters |
 | Horizontal line | | `---` | |
 | Line break | <kbd>Shift</kbd>+<kbd>Enter</kbd> | | New line in the same paragraph |
+| Align left / center / right / justify | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>L</kbd> / <kbd>E</kbd> / <kbd>R</kbd> / <kbd>J</kbd> | | Paragraphs and headings; the toolbar button opens the four alignments; changing the block type (also with `# `) keeps the alignment |
+| Line spacing | | | Paragraphs and headings; the toolbar menu offers Default, 1, 1.15, 1.5 and 2; changing the block type keeps it |
 | Move block up / down | <kbd>Alt</kbd>+<kbd>↑</kbd> / <kbd>Alt</kbd>+<kbd>↓</kbd> | | The block or list item at the cursor, or all the selected ones; sub-items move along |
 | **Lists** | | | |
 | Bulleted list | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>8</kbd> | `- ` `* ` `+ ` | |
 | Numbered list | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>7</kbd> | `1. ` | Starts from the number you type |
+| Checklist | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>9</kbd> | `[ ] ` `[x] ` | Click a checkbox, or press <kbd>Ctrl</kbd>+<kbd>Enter</kbd> to check the selected items; checked items are struck through |
 | Indent / outdent item | <kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd> | | |
+| **Tables** | | | |
+| Insert a table | | | Toolbar grid up to 10 × 8, with or without a header row |
+| Rows, columns, cells | | | With the cursor in a table, the same button opens: insert or delete rows and columns, merge and split cells, header row and column, delete table |
+| Table handles | | | Handles on the row and column under the mouse select them and open their menu (insert, delete); a corner handle opens merge, split and delete table |
+| Move between cells | <kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd> | | <kbd>Tab</kbd> in the last cell adds a row |
+| Select cells | | | Drag across cells |
+| Resize a column | | | Drag the border of a column; the width is kept in the HTML |
+| **Images** | | | |
+| Paste an image | <kbd>Ctrl</kbd>+<kbd>V</kbd> | | A copied image or screenshot is embedded in the HTML (PNG, JPEG, GIF, WebP, up to 5 MB by default); an image copied from a web page keeps its address |
+| Resize an image | | | Select it and drag one of its side handles; the proportions stay |
 | **Insert** | | | |
 | Special characters and emoji | | | A popover with search, symbols and emoji; it stays open to insert several in a row |
 | **Editing** | | | |
 | Undo | <kbd>Ctrl</kbd>+<kbd>Z</kbd> | | <kbd>Backspace</kbd> right after a Markdown shortcut undoes it |
 | Redo | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> or <kbd>Ctrl</kbd>+<kbd>Y</kbd> | | |
-| Paste | <kbd>Ctrl</kbd>+<kbd>V</kbd> | | HTML is cleaned up; plain text lines become paragraphs |
+| Paste | <kbd>Ctrl</kbd>+<kbd>V</kbd> | | HTML is cleaned up; plain text lines become paragraphs. From Word and Google Docs the body font, size and color are dropped (text that differs keeps them) and Word lists become real lists; tables keep their column widths |
+| Paste as plain text | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd> | | Only the text, without formatting |
+| Find and replace | <kbd>Ctrl</kbd>+<kbd>F</kbd> | | A bar under the toolbar: match case, whole word, previous and next match, replace one or all; the matches are counted exactly and the first 1,000 are highlighted; <kbd>Enter</kbd> / <kbd>Shift</kbd>+<kbd>Enter</kbd> go to the next / previous match, <kbd>Esc</kbd> closes it |
+| Word and character count | | | Optional status bar under the editor; also `getWordCount()` in the API |
+
+<table>
+  <tr>
+    <td width="50%"><img src="https://raw.githubusercontent.com/kojak8791/stilo-editor/main/assets/screenshot-find.png" alt="The find bar under the toolbar: five matches of espresso highlighted, the current one in orange, and ristretto in the replace field" width="400"></td>
+    <td width="50%"><img src="https://raw.githubusercontent.com/kojak8791/stilo-editor/main/assets/screenshot-table.png" alt="A coffee menu table with a row selected by its handle and the row menu open: insert row above, insert row below, delete row" width="400"></td>
+  </tr>
+  <tr>
+    <td>Find and replace: match case, whole word, an exact count of the matches.</td>
+    <td>Tables: handles on rows and columns open their menu.</td>
+  </tr>
+  <tr>
+    <td width="50%"><img src="https://raw.githubusercontent.com/kojak8791/stilo-editor/main/assets/screenshot-fonts.png" alt="The font dropdown open on a Times New Roman text, each font drawn in its own font" width="400"></td>
+    <td width="50%"><img src="https://raw.githubusercontent.com/kojak8791/stilo-editor/main/assets/screenshot-color.png" alt="The text color palette open, with No color, the color grid and a custom color field" width="400"></td>
+  </tr>
+  <tr>
+    <td>Fonts and sizes: the toolbar shows the font and the size at the cursor.</td>
+    <td>Text color and highlight: a palette, the last color one click away, a custom color.</td>
+  </tr>
+</table>
 
 **Keyboard and accessibility.** Most shortcuts are the ones of Google Docs; the others follow
 the usual conventions of web editors, and every toolbar tooltip shows its shortcut. The toolbar
@@ -161,6 +214,7 @@ Requires Node.js 22 or later.
 npm install
 npm run check   # typecheck + lint + unit tests
 npm run dev     # demo page
+npm run site    # public site (published on GitHub Pages from main)
 npm run bench   # performance benchmarks (needs: npx playwright install chromium)
 npm run test:e2e # E2E tests in Chromium, Firefox and WebKit (needs: npx playwright install)
 ```

package/dist/content.css

@@ -96,6 +96,60 @@ li.ProseMirror-selectednode:after {
   display: block;
 }
 
+/*
+ * prosemirror-tables/style/tables.css. Copyright (C) 2015-2016 by Marijn Haverbeke and others,
+ * MIT license. Adapted: one `cursor` value, the colors from the Stilo custom properties.
+ */
+.ProseMirror .tableWrapper {
+  overflow-x: auto;
+}
+
+.ProseMirror table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+  overflow: hidden;
+}
+
+.ProseMirror td,
+.ProseMirror th {
+  vertical-align: top;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.ProseMirror td:not([data-colwidth]):not(.column-resize-dragging),
+.ProseMirror th:not([data-colwidth]):not(.column-resize-dragging) {
+  min-width: var(--default-cell-min-width);
+}
+
+.ProseMirror .column-resize-handle {
+  position: absolute;
+  right: -2px;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  z-index: 20;
+  background-color: var(--stilo-color-focus, #0969da);
+  pointer-events: none;
+}
+
+.ProseMirror.resize-cursor {
+  cursor: col-resize;
+}
+
+.ProseMirror .selectedCell:after {
+  z-index: 2;
+  position: absolute;
+  content: "";
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: var(--stilo-color-selected-cell, rgb(9 105 218 / 0.12));
+  pointer-events: none;
+}
+
 /* Stilo content defaults */
 
 /* Lists: list items hold paragraphs, which must not add their own margins. */
@@ -107,10 +161,81 @@ li.ProseMirror-selectednode:after {
 
 .stilo-content li > p,
 .stilo-content li > ul,
-.stilo-content li > ol {
+.stilo-content li > ol,
+.stilo-content .stilo-task-item__content > p,
+.stilo-content .stilo-task-item__content > ul,
+.stilo-content .stilo-task-item__content > ol {
   margin: 0;
 }
 
+/* Task lists: a checkbox in place of the bullet, done items struck through. In the editor the
+   item is a flex row: its <input> checkbox, then the content (ProseMirror needs a container that
+   holds only the content). Content shown elsewhere under the class stilo-content gets a box drawn
+   from data-checked instead. Either way the box is centered on the first line, not on the whole
+   item, which may hold more paragraphs and sub-lists. */
+.stilo-content ul[data-type="taskList"] {
+  list-style: none;
+}
+
+.stilo-content.ProseMirror ul[data-type="taskList"] {
+  padding-left: 0.25em;
+}
+
+.stilo-content.ProseMirror ul[data-type="taskList"] > li {
+  display: flex;
+  gap: 0.5em;
+}
+
+.stilo-task-item__content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Form controls have their own font: inherit it, so that em and lh are those of the text. */
+.stilo-task-item__checkbox {
+  flex: none;
+  width: 1em;
+  height: 1em;
+  margin: calc(0.5lh - 0.5em) 0 0;
+  font-size: inherit;
+  line-height: inherit;
+  accent-color: var(--stilo-color-focus, #0969da);
+  cursor: pointer;
+}
+
+.stilo-content:not(.ProseMirror) ul[data-type="taskList"] > li {
+  position: relative;
+}
+
+.stilo-content:not(.ProseMirror) ul[data-type="taskList"] > li::before {
+  content: "";
+  display: flex;
+  position: absolute;
+  top: calc(0.5lh - 0.5em);
+  left: -1.5em;
+  box-sizing: border-box;
+  width: 1em;
+  height: 1em;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--stilo-color-muted, #59636e);
+  border-radius: 0.2em;
+  color: #ffffff;
+}
+
+.stilo-content:not(.ProseMirror) ul[data-type="taskList"] > li[data-checked="true"]::before {
+  content: "\2713";
+  border-color: var(--stilo-color-focus, #0969da);
+  background: var(--stilo-color-focus, #0969da);
+}
+
+.stilo-content [data-checked="true"] > .stilo-task-item__content > p:first-child,
+.stilo-content:not(.ProseMirror) [data-checked="true"] > p:first-child,
+.stilo-content:not(.ProseMirror) [data-checked="true"]:not(:has(> p)) {
+  color: var(--stilo-color-muted, #59636e);
+  text-decoration: line-through;
+}
+
 .stilo-content blockquote {
   margin: 0.5em 0;
   padding-left: 1em;
@@ -132,6 +257,109 @@ li.ProseMirror-selectednode:after {
   font-size: 0.9em;
 }
 
+/* Code block: the <code> inside it drops the inline code box. */
+.stilo-content pre {
+  margin: 0.5em 0;
+  padding: 0.75em 1em;
+  border-radius: 0.375em;
+  background: var(--stilo-color-hover, #eef1f4);
+  font-family: ui-monospace, monospace;
+  font-size: 0.9em;
+  line-height: 1.5;
+}
+
+.stilo-content pre code {
+  padding: 0;
+  border-radius: 0;
+  background: none;
+  font-size: inherit;
+}
+
+/* Tables: a cell holds blocks, whose outer margins would pad the cell twice. */
+.stilo-content .tableWrapper {
+  margin: 1em 0;
+}
+
+.stilo-content td,
+.stilo-content th {
+  padding: 6px 8px;
+  border: 1px solid var(--stilo-color-border, #d1d9e0);
+}
+
+.stilo-content th {
+  background: var(--stilo-color-table-header, #f6f8fa);
+  font-weight: 600;
+  text-align: start;
+}
+
+.stilo-content td > :first-child,
+.stilo-content th > :first-child {
+  margin-top: 0;
+}
+
+/* The resize handle shown on hover is the last child of its cell: the block before it is the last
+   block, otherwise its margin would come back and the table grow under the mouse. */
+.stilo-content td > :last-child,
+.stilo-content th > :last-child,
+.stilo-content td > :has(+ .column-resize-handle:last-child),
+.stilo-content th > :has(+ .column-resize-handle:last-child) {
+  margin-bottom: 0;
+}
+
+/* Images: never wider than the content; with width and height they keep their ratio. */
+.stilo-content img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Image in the editor: two side handles, inside the image (a top-level block clips what
+   overflows it, see "Large documents" below), shown while the image is selected. Only a selected
+   image is positioned: a positioned element paints over the caret placed right after it. */
+.stilo-image {
+  display: inline-block;
+  max-width: 100%;
+}
+
+.stilo-image.ProseMirror-selectednode {
+  position: relative;
+}
+
+.stilo-image img {
+  display: block;
+}
+
+.stilo-image__handle {
+  display: none;
+  position: absolute;
+  top: 50%;
+  width: 6px;
+  height: min(48px, 50%);
+  min-height: 16px;
+  transform: translateY(-50%);
+  border: 1px solid #ffffff;
+  border-radius: 3px;
+  background: var(--stilo-color-text, #1f2328);
+  opacity: 0.7;
+  cursor: ew-resize;
+  touch-action: none;
+}
+
+.stilo-image__handle--left {
+  left: 6px;
+}
+
+.stilo-image__handle--right {
+  right: 6px;
+}
+
+.stilo-content[contenteditable="true"] .stilo-image.ProseMirror-selectednode .stilo-image__handle {
+  display: block;
+}
+
+.stilo-image__handle:hover {
+  opacity: 1;
+}
+
 /* Placeholder: shown only while the content is editable. */
 .stilo-content[contenteditable="true"] .stilo-placeholder::before {
   content: attr(data-placeholder);
@@ -159,3 +387,12 @@ li.ProseMirror-selectednode:after {
 .stilo-content blockquote > :last-child {
   margin-bottom: 0;
 }
+
+/* Find and replace (T-043): the matches and the selected one */
+.stilo-search-match {
+  background: var(--stilo-color-search-match, #fff1a8);
+}
+
+.stilo-search-match--current {
+  background: var(--stilo-color-search-current, #ffb347);
+}

package/dist/core/editor.d.ts

@@ -3,6 +3,12 @@ import { EditorState } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { type EventHandler } from './events';
 import type { CommandRunners, EditorEvents, EditorOptions, JSONContent, SetContentOptions } from './types';
+/**
+ * Transaction meta key of the empty transaction applied to every new `EditorState`: plugins can
+ * normalize the loaded document in `appendTransaction` (e.g. the `Table` extension fixes
+ * irregular tables), before the view shows it and without an undo step.
+ */
+export declare const LOAD_META = "stiloLoad";
 /**
  * The Stilo editor. See docs/ARCHITECTURE.md §5.
  *
@@ -33,13 +39,13 @@ export declare class Editor {
      * Creates the editor:
      *
      * 1. `ExtensionManager` from `options.extensions` → `schema`;
-     * 2. `createPlugins(this)`, then the core `createDropMovePlugin()`; command runners are built
+     * 2. `createPlugins(this, emit)`, then the core `createDropMovePlugin()`; command runners are built
      *    from the manager's commands;
      * 3. initial document from `parseHTML(schema, options.content ?? '')`;
      * 4. `EditorView` mounted inside `options.element`, with attributes `class="stilo-content"`,
      *    `role="textbox"`, `aria-multiline="true"`, `aria-label` (if given); `editable` from
-     *    options (default `true`); `transformPastedHTML` → `sanitizeToString`;
-     *    `clipboardSerializer` → `createClipboardSerializer`; transactions go
+     *    options (default `true`); `transformPastedHTML` → `cleanPastedHTML`, then
+     *    `sanitizeToString`; `clipboardSerializer` → `createClipboardSerializer`; transactions go
      *    through the editor's dispatch (see events in `EditorEvents`);
      * 5. `autofocus`: `true`/`'start'` → focus at start, `'end'` → focus at end.
      */
@@ -104,5 +110,11 @@ export declare class Editor {
     /** Builds `commands` from the extension commands; `can` runs without `dispatch`. */
     private createRunners;
     private setContent;
+    /**
+     * Removes the DOM selection when it lies inside the editor. Replacing many nodes while the
+     * browser tracks a selection in them is much slower (Chromium, 50,000 paragraphs: 42 s →
+     * 1.6 s); ProseMirror puts the selection back after the update when the editor has focus.
+     */
+    private clearDOMSelection;
     private dispatch;
 }

package/dist/core/extension-manager.d.ts

@@ -1,7 +1,7 @@
 import { Schema } from 'prosemirror-model';
 import type { Plugin } from 'prosemirror-state';
 import type { Editor } from './editor';
-import type { Extension } from './extension';
+import type { Extension, ExtensionContext } from './extension';
 import type { CommandFactory } from './types';
 /**
  * Schema order of the built-in marks, outermost first. It defines how marks nest in the HTML
@@ -43,7 +43,7 @@ export declare class ExtensionManager {
     get commands(): ReadonlyMap<string, CommandFactory>;
     /**
      * Called once by the editor. For each extension in order, with context
-     * `{ options, schema, editor }`: collects `commands` (duplicate name → `StiloError`),
+     * `{ options, schema, editor, emit }`: collects `commands` (duplicate name → `StiloError`),
      * `inputRules`, `keymap`, `plugins`. Returns, in this order:
      *
      * 1. one `inputRules({ rules })` plugin with all input rules;
@@ -53,5 +53,5 @@ export declare class ExtensionManager {
      * 4. all extension plugins, in extension order;
      * 5. `keymap(baseKeymap)` from prosemirror-commands.
      */
-    createPlugins(editor: Editor): Plugin[];
+    createPlugins(editor: Editor, emit: ExtensionContext<object>['emit']): Plugin[];
 }

package/dist/core/extension.d.ts

@@ -2,12 +2,17 @@ import type { InputRule } from 'prosemirror-inputrules';
 import type { MarkSpec, NodeSpec, Schema } from 'prosemirror-model';
 import type { Command, Plugin } from 'prosemirror-state';
 import type { Editor } from './editor';
-import type { CommandFactories } from './types';
+import type { CommandFactories, EditorEvents } from './types';
 /** Context passed to the runtime parts of an extension. */
 export interface ExtensionContext<Options> {
     options: Readonly<Options>;
     schema: Schema;
     editor: Editor;
+    /**
+     * Emits an editor event. An extension adds its own events to `EditorEvents` by module
+     * augmentation, as it does for `Commands`.
+     */
+    emit<E extends keyof EditorEvents>(event: E, payload: EditorEvents[E]): void;
 }
 /** Definition of an extension. See docs/ARCHITECTURE.md §6. */
 export interface ExtensionSpec<Options extends object = Record<string, never>> {

package/dist/core/helpers/block-style.d.ts

@@ -0,0 +1,25 @@
+import type { Attrs, DOMOutputSpec, Node, NodeType } from 'prosemirror-model';
+/** A text alignment (docs/SPEC.md F-308). `left` is the default and is stored as `null`. */
+export type TextAlignment = 'left' | 'center' | 'right' | 'justify';
+/** The `textAlign` and `lineHeight` attributes of a textblock spec, both `null` by default. */
+export declare function blockStyleAttrs(): {
+    textAlign: {
+        default: null;
+    };
+    lineHeight: {
+        default: null;
+    };
+};
+/**
+ * The style attributes of `node` that `type` also has, to keep them when a block becomes `type`
+ * (a centered paragraph stays centered as a heading).
+ */
+export declare function keptBlockStyles(type: NodeType, node: Node): Attrs;
+/**
+ * The style attributes of a parsed block: its `text-align` (`null` for left) and `line-height`.
+ * `null` when it has neither, so the block keeps the shared default attributes: one object per
+ * paragraph is a lot of memory in a large document.
+ */
+export declare function parseBlockStyle(element: HTMLElement): Attrs | null;
+/** The `toDOM` output of a textblock `tag` with its style attributes, if any. */
+export declare function blockStyleDOM(tag: string, node: Node): DOMOutputSpec;

package/dist/core/helpers/input-rules.d.ts

@@ -1,5 +1,5 @@
 import { InputRule } from 'prosemirror-inputrules';
-import type { Attrs, MarkType } from 'prosemirror-model';
+import type { Attrs, MarkType, NodeType } from 'prosemirror-model';
 /**
  * Creates an input rule that turns markdown-like syntax into a mark.
  *
@@ -19,3 +19,10 @@ import type { Attrs, MarkType } from 'prosemirror-model';
  * ```
  */
 export declare function markInputRule(regexp: RegExp, type: MarkType, attrs?: Attrs | null): InputRule;
+/**
+ * Like `textblockTypeInputRule` from prosemirror-inputrules (turns the textblock where `regexp`
+ * matches at its start into `type` with `attrs`, or with the attributes `attrs` returns for the
+ * match), but the block keeps the style attributes (`textAlign`, `lineHeight`) that `type` also
+ * has, as `setTextblockType` does.
+ */
+export declare function textblockTypeInputRule(regexp: RegExp, type: NodeType, attrs?: Attrs | null | ((match: RegExpMatchArray) => Attrs | null)): InputRule;

package/dist/core/helpers/lists.d.ts

@@ -1,12 +1,20 @@
 import type { Attrs, NodeType } from 'prosemirror-model';
-import type { Command } from 'prosemirror-state';
+import { type Command } from 'prosemirror-state';
 /**
  * Command: toggles a list of `listType` (whose items are `itemType`) at the selection. List
  * nodes are recognized by the `list` group in their spec. Looking at the nearest list around
  * the start of the selection:
  *
  * - a list of `listType`: the selected items are lifted out one level (`liftListItem`);
- * - a list of another type: that list becomes a `listType` list with `attrs`, items unchanged;
+ * - a list of another type: that list becomes a `listType` list with `attrs`, its items
+ *   `itemType` items (a task item loses its `checked` state);
  * - no list: the selected blocks are wrapped in a new list (`wrapInList`).
  */
 export declare function toggleList(listType: NodeType, itemType: NodeType, attrs?: Attrs | null): Command;
+/**
+ * Command for `Backspace` in lists whose items are `itemType`. At the start of the first
+ * textblock of an item, lifts the item (`liftListItem`). At the start of a textblock right after
+ * such a list, moves its content to the end of the list's last textblock and deletes it (an
+ * empty one just disappears); without this, ProseMirror wraps the textblock in a new item.
+ */
+export declare function backspaceInList(itemType: NodeType): Command;

package/dist/core/helpers/marks.d.ts

@@ -21,6 +21,20 @@ export declare function setMark(type: MarkType, attrs?: Attrs | null): Command;
  *   mark. The transaction scrolls into view.
  */
 export declare function unsetMark(type: MarkType): Command;
+/**
+ * Command: merges `attrs` into the mark of `type` on the selection, keeping its other
+ * attributes; a mark whose attributes all become `null` is removed. Lets one mark carry several
+ * independent attributes (`textStyle`: font family, size, color).
+ *
+ * - Setting (some value in `attrs` is not `null`): like {@link setMark}, applies to the stored
+ *   marks or to every selected text that accepts the mark; `false` when none does.
+ * - Clearing (every value is `null`): applies where the mark has one of these attributes;
+ *   `false` when none has.
+ *
+ * `attrs` can be a function of the position of each selected text (the cursor for an empty
+ * selection), for values that differ along the selection; `null` leaves that text alone.
+ */
+export declare function updateMarkAttrs(type: MarkType, attrs: Attrs | ((pos: number) => Attrs | null)): Command;
 /**
  * Command: {@link unsetMark} when the mark is active (see `isMarkActive`), otherwise
  * {@link setMark}. Unlike `toggleMark` from prosemirror-commands, a partially marked selection

package/dist/core/helpers/nodes.d.ts

@@ -12,3 +12,15 @@ export declare function insertBlockNode(tr: Transaction, node: Node): Transactio
  * block node) does not allow `type`.
  */
 export declare function insertBlock(type: NodeType, attrs?: Attrs | null): Command;
+/**
+ * Command: like `setBlockType` from prosemirror-commands (turns the selected textblocks into
+ * `type` with `attrs`), but a block keeps the style attributes (`textAlign`, `lineHeight`) that
+ * `type` also has, so a centered heading stays centered as a paragraph. `false` when no selected
+ * textblock changes.
+ */
+export declare function setTextblockType(type: NodeType, attrs?: Attrs): Command;
+/**
+ * Command: sets the attribute `name` to `value` on every selected textblock whose type has that
+ * attribute (`textAlign`, `lineHeight`). `false` when no selected textblock has it.
+ */
+export declare function setTextblockAttr(name: string, value: unknown): Command;

package/dist/core/helpers/word-count.d.ts

@@ -0,0 +1,14 @@
+import type { Editor } from '../editor';
+/** Words and characters of a document, from {@link getWordCount}. */
+export interface WordCount {
+    /** Runs of non-space characters with at least one letter or digit. */
+    words: number;
+    /** Characters of the text, spaces included, line and paragraph breaks excluded. */
+    characters: number;
+}
+/**
+ * Counts the words and characters of the document, docs/SPEC.md F-901. The first call reads the
+ * whole document, later calls only the changed top-level blocks: call it on demand or debounced,
+ * never on every transaction (ADR 0003).
+ */
+export declare function getWordCount(editor: Editor): WordCount;

package/dist/core/html/css.d.ts

@@ -3,7 +3,7 @@
  * See docs/ARCHITECTURE.md §7.3. Extensions never handle raw style strings themselves.
  */
 /** CSS properties allowed in the HTML output, in output order. */
-export declare const STYLE_PROPERTIES: readonly ['font-family', 'font-size', 'color', 'background-color', 'text-align'];
+export declare const STYLE_PROPERTIES: readonly ['font-family', 'font-size', 'color', 'background-color', 'text-align', 'line-height', 'width'];
 /** A property allowed in the HTML output. */
 export type StyleProperty = (typeof STYLE_PROPERTIES)[number];
 /**
@@ -27,6 +27,11 @@ export declare const UNSAFE_VALUE: RegExp;
  * - When a property appears twice, the last one wins.
  */
 export declare function parseStyle(style: string): Map<string, string>;
+/**
+ * Formats declarations (as returned by {@link parseStyle}) as `prop: value` joined with `; `.
+ * Returns `null` when there are none.
+ */
+export declare function formatStyle(declarations: ReadonlyMap<string, string>): string | null;
 /**
  * Normalizes a color value (input is trimmed and lowercased first):
  *
@@ -59,6 +64,16 @@ export declare function normalizeFontFamily(value: string): string | null;
  * `start` → `left`; anything else → `null`.
  */
 export declare function normalizeTextAlign(value: string): string | null;
+/**
+ * Normalizes `line-height` (trimmed): a number `^\d+(\.\d+)?$` or a percentage of it (`115%` →
+ * `1.15`), rounded to 2 decimals without trailing zeros; zero, `normal` and lengths → `null`.
+ */
+export declare function normalizeLineHeight(value: string): string | null;
+/**
+ * Normalizes a `width` (trimmed, lowercased): whole pixels, `^\d+(\.\d+)?px$` rounded
+ * (`120.4px` → `120px`); zero, other units and keywords → `null` (docs/decisions/0005).
+ */
+export declare function normalizeWidth(value: string): string | null;
 /**
  * Normalizes the value of an output property with the matching normalizer above.
  * Returns `null` if the value matches {@link UNSAFE_VALUE} or the normalizer returns `null`.

package/dist/core/html/paste/base-styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Removes the base style of a document pasted from a word processor: for each of
+ * {@link BASE_PROPERTIES}, the value that covers most of the pasted text (Arial, 11pt, black)
+ * is removed everywhere, so only the text that differs keeps its value. `font-size` is also
+ * removed inside headings, whose level gives the size.
+ */
+export declare function removeBaseStyles(body: HTMLElement): void;

package/dist/core/html/paste/google-docs.d.ts

@@ -0,0 +1,7 @@
+/** The element that wraps the HTML Google Docs puts on the clipboard. */
+export declare const GOOGLE_DOCS_WRAPPER = "[id^=\"docs-internal-guid-\"]";
+/**
+ * Cleans the HTML of Google Docs: an empty paragraph arrives as a `<br>` between the blocks of the
+ * wrapper and becomes an empty `<p>`.
+ */
+export declare function cleanGoogleDocs(wrapper: Element): void;