stilo-editor 0.1.0 → 0.2.1

package/README.md

@@ -1,95 +1,44 @@
-<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>
 
-Open-source HTML5 WYSIWYG editor built on [ProseMirror](https://prosemirror.net).
-Clean HTML in and out, headless core, no paid tiers.
+<h3 align="center">A complete rich text editor. Everything included, ready in minutes.</h3>
 
-> [!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.
+<p align="center">
+  Free and open source (MIT) · clean HTML in and out · built on ProseMirror
+</p>
 
-## Why Stilo
+<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="https://github.com/kojak8791/stilo-editor/actions/workflows/ci.yml"><img src="https://github.com/kojak8791/stilo-editor/actions/workflows/ci.yml/badge.svg" alt="CI status"></a>
+  <img src="https://img.shields.io/npm/types/stilo-editor" alt="TypeScript types included">
+  <a href="LICENSE"><img src="https://img.shields.io/npm/l/stilo-editor" alt="MIT license"></a>
+</p>
+
+<p align="center">
+  <a href="https://kojak8791.github.io/stilo-editor/"><strong>Live demo</strong></a> ·
+  <a href="docs/API.md"><strong>API</strong></a> ·
+  <a href="docs/FEATURES.md"><strong>All features</strong></a>
+</p>
+
+<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>
 
-- **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.
-- **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
-  a separate, replaceable module.
-- **Extensible by design.** Every feature is an extension with the same shape.
-- **Framework-agnostic.** Vanilla TypeScript first; React/Vue wrappers later as thin layers.
-
-## Large documents
-
-Stilo is made for long documents: contracts, manuals, books, reports. Typing feels immediate in
-a document of 10,000 paragraphs — about 400,000 words, longer than most novels — and the editor
-stays usable at five times that size, without pagination tricks and without splitting the
-content. Formatting, search and selection keep up with the size of the text.
-
-This is measured, not promised. A benchmark drives the editor in a real browser on generated
-documents and times everything from loading and exporting the HTML down to the milliseconds
-between a key press and the character on screen; every change is checked against performance
-budgets. What it means in practice, the numbers and the limits:
-[Performance](docs/PERFORMANCE.md).
-
-## Features
-
-What the editor does today, with `defaultExtensions` and the default toolbar. On macOS, use
-<kbd>⌘</kbd> for <kbd>Ctrl</kbd> and <kbd>Option</kbd> for <kbd>Alt</kbd>. The *Markdown*
-column is what you type to get the format as you write.
-
-| Feature | Keyboard | Markdown | Notes |
-|---|---|---|---|
-| **Text** | | | |
-| Bold | <kbd>Ctrl</kbd>+<kbd>B</kbd> | `**text**` | |
-| Italic | <kbd>Ctrl</kbd>+<kbd>I</kbd> | `*text*` `_text_` | |
-| Underline | <kbd>Ctrl</kbd>+<kbd>U</kbd> | | |
-| Strikethrough | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>S</kbd> | `~~text~~` | |
-| 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> | | |
-| 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 |
-| **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> | `> ` | |
-| Horizontal line | | `---` | |
-| Line break | <kbd>Shift</kbd>+<kbd>Enter</kbd> | | New line in the same paragraph |
-| 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 |
-| Indent / outdent item | <kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd> | | |
-| **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 |
-
-**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
-follows the WAI-ARIA *Toolbar* pattern: <kbd>Alt</kbd>+<kbd>F10</kbd> moves the focus from the
-text to the toolbar, the arrow keys move between buttons, <kbd>Esc</kbd> goes back to the text.
-Every popover works with the keyboard alone and <kbd>Esc</kbd> closes it.
-
-## Usage
+## Quick start
 
 ```sh
 npm install stilo-editor
 ```
 
+```html
+<div id="toolbar"></div>
+<div id="editor"></div>
+```
+
 ```ts
 import 'stilo-editor/style.css';
 import { Editor, defaultExtensions } from 'stilo-editor';
@@ -106,68 +55,66 @@ createToolbar(editor, { container: document.querySelector<HTMLElement>('#toolbar
 editor.getHTML(); // '<p>Hello <strong>world</strong></p>'
 ```
 
-Options, commands, events, extensions and the toolbar: **[API reference](docs/API.md)**.
-Without the default toolbar, import `stilo-editor/content.css` instead of `style.css` and build
-your own controls on the same API.
+✅ That is the whole setup.
+
+### Want your own UI?
+
+Skip the toolbar: the core is headless.
+
+```ts
+import 'stilo-editor/content.css';
+import { Editor, defaultExtensions } from 'stilo-editor';
+
+const editor = new Editor({
+  element: document.querySelector<HTMLElement>('#editor')!,
+  extensions: [defaultExtensions()],
+});
 
-## Support
+document.querySelector('#bold')!.addEventListener('click', () => editor.commands.toggleBold());
+document.querySelector('#undo')!.addEventListener('click', () => editor.commands.undo());
+```
 
-- **Bugs and feature requests:** open an
-  [issue](https://github.com/kojak8791/stilo-editor/issues/new/choose); the forms ask for what
-  is needed to reproduce a bug (steps, Stilo version, browser).
-- **Questions:** open an issue too, with a short title that says what you are trying to do.
-- **Security vulnerabilities:** never in a public issue; report them privately as described in
-  [SECURITY.md](SECURITY.md).
+Commands, button states and events: [API reference](docs/API.md).
 
-Contributions are welcome: start from [CONTRIBUTING.md](CONTRIBUTING.md).
+## What's included
 
-## Roadmap
+- **Text:** bold, italic, underline, strikethrough, code, sub/superscript, fonts, sizes,
+  colors, highlight, text case
+- **Blocks:** headings, quotes, code blocks, alignment, line spacing, move up/down
+- **Lists:** bulleted, numbered, checklists
+- **Tables:** insert, merge and split, row and column handles, resizable columns
+- **Images:** paste and resize
+- **Tools:** links, find and replace, special characters and emoji, word count
 
-| Milestone | Content | Status |
-|---|---|---|
-| M0 — Foundations | Docs, scaffolding, core contracts, HTML pipeline, test helpers, `Bold` reference extension | Done |
-| M1 — MVP | Core editing, history, basic marks and blocks, lists, paste cleanup, default toolbar, demo, benchmarks | Done |
-| M2 — v1.0 | Preview releases `0.x` on npm, then tables, images, fonts and colors, productivity tools up to `1.0.0` | In progress |
-| M3 — Later | Real-time collaboration (Yjs), framework wrappers, embeds | Planned |
+Markdown shortcuts as you type, a keyboard shortcut for everything, a toolbar you can drive
+from the keyboard alone. Every feature, shortcut and option: [All features](docs/FEATURES.md).
 
-Full feature list and priorities in [docs/SPEC.md](docs/SPEC.md).
+## Why Stilo
 
-## How it is built
+- **Clean, safe HTML.** HTML in, semantic HTML out, through a strict allowlist of tags,
+  attributes and styles.
+- **Paste from Word and Google Docs.** Real lists, kept tables, no stray fonts and colors.
+- **Big documents welcome.** Typing stays instant at 10,000 paragraphs
+  ([numbers](docs/PERFORMANCE.md)).
+- **Tested in Chromium, Firefox and WebKit**, with TypeScript types included.
+- **Nothing behind a paywall.** Tables, paste from Word, find and replace: all in the free,
+  MIT-licensed package.
 
-Stilo is designed and owned by Alessio Coggiola and developed with AI assistance
-([Claude](https://claude.com/claude-code)). Every decision is written down before the code
-([docs/](docs/), [ADRs](docs/decisions/)), every change goes through the quality gate
-(typecheck, lint, about 950 unit tests including XSS vectors) and is tried in the demo before
-it is merged, and performance is measured against explicit budgets (`npm run bench`).
+## Status
 
-| Document | Content |
-|---|---|
-| [API.md](docs/API.md) | API reference for applications |
-| [VISION.md](docs/VISION.md) | Why and what |
-| [SPEC.md](docs/SPEC.md) | Features, non-functional requirements, roadmap |
-| [ARCHITECTURE.md](docs/ARCHITECTURE.md) | Stack, file layout, extension API, HTML contract |
-| [UI.md](docs/UI.md) | Design of the default UI |
-| [PERFORMANCE.md](docs/PERFORMANCE.md) | Performance in practice, how it is measured, limits |
-| [BACKLOG.md](docs/BACKLOG.md) | Tasks done and planned |
-| [AGENTS.md](AGENTS.md) | Rules for contributors and coding agents |
-| [CONTRIBUTING.md](CONTRIBUTING.md) | How to report bugs and propose changes |
-| [SECURITY.md](SECURITY.md) | How to report a vulnerability |
+`0.x` preview: it works, but APIs may change in minor versions until `1.0.0`.
+Read the [changelog](CHANGELOG.md) before updating.
+Next: framework wrappers, real-time collaboration ([roadmap](docs/SPEC.md)).
 
-## Development
+## Contributing
 
-Requires Node.js 22 or later.
+Bugs, ideas and questions: [issues](https://github.com/kojak8791/stilo-editor/issues/new/choose).
+Code: [CONTRIBUTING.md](CONTRIBUTING.md). Vulnerabilities: [SECURITY.md](SECURITY.md).
 
-```sh
-npm install
-npm run check   # typecheck + lint + unit tests
-npm run dev     # demo page
-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)
-```
+Designed by Alessio Coggiola and built with [Claude](https://claude.com/claude-code), from a
+written [architecture](docs/ARCHITECTURE.md) and [decision records](docs/decisions/).
 
 ## License
 
-[MIT](LICENSE) © 2026 Alessio Coggiola
-
-The logo wordmark is drawn from [IBM Plex](https://github.com/IBM/plex), licensed under the
-[SIL Open Font License 1.1](https://openfontlicense.org).
+[MIT](LICENSE) © 2026 Alessio Coggiola. Logo wordmark from
+[IBM Plex](https://github.com/IBM/plex) ([OFL 1.1](https://openfontlicense.org)).

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;