tosijs-styled-editor 0.4.3 → 0.4.4

package/CHANGELOG.md

@@ -0,0 +1,275 @@
+# Changelog
+
+All notable changes to this project are documented here.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.4.4] - 2026-09-16
+
+First release since 0.4.3 to reach npm. 0.4.4 and 0.4.5 were versioned in the
+repo during development and **never published**, so this is numbered 0.4.4:
+semver describes what consumers observe between releases, and consumers
+observed none of it.
+
+Everything below through the 0.2.0 heading shipped across 0.4.2–0.4.4. The
+earlier 0.4.x releases went out without changelog sections of their own, so
+they are collected here rather than reconstructed inaccurately.
+
+### Security
+
+- **Pasted and dropped HTML is now sanitized** before it enters the document.
+  The editor replaced `contentEditable` but not the sanitization the browser
+  was doing on its behalf: clipboard and drop HTML went in through `innerHTML`
+  verbatim, so `<img onerror>`, `<svg onload>`, `javascript:` URLs and
+  `<script>` reached the live document — and from there `value`,
+  `internals.setFormValue` and every undo snapshot, meaning a host storing
+  `value` stored the payload. Handlers, executing elements and unsafe URL
+  schemes are now stripped at the single shared paste/drop choke point.
+  Ordinary formatting and unregistered custom elements are preserved.
+  `editor.sanitize` is a swappable hook if you would rather supply your own
+  (DOMPurify drops in; see the README).
+  *This path was unreachable in 0.4.2–0.4.3 only because `insertionPoint()` was
+  broken; fixing that is what made it live again.*
+- **Ctrl/Cmd-clicking a link checks the URL scheme** and always opens a new
+  context. `javascript:` executes in the embedding page's origin and `noopener`
+  does not prevent it; `_self`/`_top` are resolved before `noopener` is
+  consulted, so a document-supplied `target` could run it same-origin.
+  `setLink` validates the scheme too.
+- **Commands built from runtime values no longer go through the string form.**
+  `executeCommand` splits on `;`, and a data URI contains `;` by spec — so
+  every dropped image produced `<img src="data:image/png">` plus a bogus second
+  command, and a crafted filename could inject one. `doCommandWith(name, ...args)`
+  passes arguments without parsing.
+
+### Fixed
+
+- **Mobile browsers no longer zoom when you select text.** Two independent
+  causes: the caret is a real `<input>` (that is what raises the mobile
+  keyboard) and inherited the UA default form-control font size of 11px, and
+  iOS Safari zooms the page on focus below 16px; and double-tap selects a word
+  here, which a touch browser reads as zoom. Fixed by sizing the caret at 16px
+  and setting `touch-action: manipulation` on the document, which keeps panning
+  and pinch-zoom. Deliberately NOT fixed with `user-scalable=no`, which would
+  fail WCAG 1.4.4.
+- **The caret no longer strands itself when the document scrolls.** The overlay
+  is positioned in viewport coordinates but only repainted when the selection
+  bounds changed, so scrolling left it where the text used to be. Scroll, window
+  resize and a `ResizeObserver` on the document now repaint it; measured drift is
+  0 at every scroll offset, and it hides correctly once its line scrolls out of
+  view.
+- **Commands that insert at the caret worked again.** `insertionPoint()` selected
+  `input.caret`, which has matched nothing since the bound markers stopped being
+  `<input>` elements — so `insertFootnote`, `insertTable`, `insertImage` and
+  `setLink` all bailed out silently. Its unit test passed throughout because it
+  built the `<input>` itself and asserted the selector found it; the test now
+  uses the real `createBounds()`.
+
+### Changed
+
+- Both `setTimeout` calls replaced with the signals they were approximating: a
+  `ResizeObserver` tracks the touch-affordance padding transition continuously
+  instead of waiting a guessed 160ms (and no longer leaves the affordances
+  invisible if the transition never runs), and the touch menu's dismiss handler
+  ignores the event that opened it by identity instead of deferring its own
+  subscription.
+- The drop-in `dist/index.js` build is minified: 83.5kB → 70.8kB gzipped.
+
+
+### Added
+
+- **Drag and drop editing.** Selected text is a real draggable object, offering
+  `text/html` and `text/plain` so the receiver picks — which means dragging works
+  between windows, between browsers, and to and from the desktop. Move within
+  the editor, Alt to copy, and leaving the editor is always a copy. Dropped image
+  files come in as data URIs; dropped HTML runs through the same `pastemode`
+  path as a paste.
+
+- **Links**: `setLink <url> [target]` and `removeLink`. Defaults to
+  `target="_blank"` with `rel="noopener"`. Clicking a link in the editor places
+  the caret; Ctrl/Cmd-click follows it.
+- **Images**: `insertImage <url> [alt…]`. An `<img>` is already a leaf node, so
+  selection and deletion treat it as one thing with no special casing.
+- **Footnotes**: `insertFootnote [text…]` and `renumberFootnotes`. Numbers are
+  derived from document order rather than stored, so inserting in the middle
+  renumbers the rest and reorders the list. Note that renumbering happens at
+  INSERTION time only — deleting a reference with Backspace currently leaves its
+  entry orphaned in the list and does not renumber the survivors. Tracked in
+  `TODO.md`; `EXTENSIBILITY.md` covers why the fix is a lifecycle change rather
+  than another call to `renumberFootnotes`.
+- An **Insert** menu carrying all three.
+
+- **Localization**, following tosijs-ui's conventions rather than a private
+  scheme: `localized` on the element translates the built-in widgets and adds a
+  flag-only language picker. Toolbar buttons carry `data-tosi-localized` (a JSON
+  attribute-to-key map, re-applied on locale change), menus set `localized`, and
+  menu labels are `<tosi-localized>`, so custom widgets get the same treatment.
+- `localized-strings.tsv` — a sample table in English and Suomi covering all 51
+  UI strings. Adding a language is adding a column. Column 0 is both the lookup
+  key and the English text, so missing cells fall back to English and a
+  half-translated column is safe to ship.
+- README is pinned to the top of the doc-site nav.
+- A Right-to-Left doc page with live examples: RTL blocks in Arabic and Hebrew,
+  LTR-with-embedded-RTL, and RTL blocks with embedded LTR runs (inline code,
+  URLs, version numbers) — the cases where visual and logical order disagree and
+  a DOM-only selection has to earn its keep.
+- Menu dropdowns are compacted (30px rows, 16px horizontal padding) and scoped
+  to this editor's own menus.
+
+- `setList ul | ol | none` — bulleted and numbered list formatting, exposed as
+  toolbar buttons and Style menu entries. Adjacent selected blocks become one
+  list, a converted block merges into an adjacent list of the same type (so
+  `<ol>` numbering continues), and re-applying the current type toggles it off.
+- Live behaviour tests that run in a real browser, covering the click
+  positioning that happy-dom cannot see.
+- `llms.txt`, a sitemap, and prerendered doc pages, generated by the doc system.
+- `.haltija.json` pinning agent browser commands to this project's dev origin.
+
+### Fixed
+
+- **The caret no longer reshapes the text it sits in.** It was an `<input>`
+  between characters, and a replaced element breaks the shaping run: measured on
+  Arabic, a neighbouring glyph's advance moved 6.2 → 6.7 even though the caret's
+  box was already width-neutral, and absolute positioning did not rescue it. The
+  in-text anchors are now plain spans — bit-identical to no markup at all — and
+  the focusable caret is positioned over the text instead of inside it. Placing
+  the caret in an Arabic paragraph now leaves its width unchanged at 565.7px.
+  A collapsed selection shows an ordinary caret; an expanded one keeps its two
+  edges distinguishable.
+
+- **Arabic text jittered when you moused over it.** Not a shaping problem, as it
+  appeared: spanification preserves shaping, ligatures and per-glyph positions
+  exactly (measured). The cause was wrapping each SPACE in its own span, which
+  changes which spaces CSS collapses — the same number collapse, but not the
+  same ones, so words merge and gaps open mid-word. Whitespace now stays a text
+  node, which reproduces the original layout space for space.
+
+- **Live examples now fill their preview instead of taking a fixed height.**
+  `tosi-example` is `height: var(--tosi-example-height)` (320px) and becomes
+  `100vh` when maximized, so the editor's hardcoded 340px both overflowed the
+  normal case — the EXAMPLE scrolled rather than the document — and ignored the
+  space when maximized. The sizing and the preview's padding reset now live in
+  the site config's `headExtra`, so every doc page gets them, including the RTL
+  page which had no CSS block of its own.
+
+- **The selection was unreadable in dark mode.** `.selected` was a hardcoded
+  `rgba(0,0,255,0.3)` and `.selected-block` a hardcoded `#ddf` — a pale blue
+  that light text disappears into — and the caret/bounds were `background: black`,
+  invisible on a dark page. All three now derive from `--editor-ink` mixed into
+  `--editor-surface` (and `currentColor` for the bounds), so they tint whichever
+  way the page is themed. The band is lifted toward white BEFORE the ink is
+  mixed in — nearly a no-op on an already-white page, but it raises a dark one
+  clear of the background, which a plain ink-into-surface mix cannot do because
+  the surface dominates. Dark is deliberately given MORE measured separation
+  than light, because light-on-dark halates and reads as less contrast at the
+  same numbers. Measured light 0.75 against a 0.99 page (separation 0.24), dark
+  0.44 against 0.11 (separation 0.33).
+
+- **Emoji were torn in half.** `spanify` split text with `split('')`, which
+  splits by UTF-16 code UNIT, so an emoji's surrogate pair became two lone
+  surrogates rendering as `?`. Splitting is now by grapheme cluster via
+  `Intl.Segmenter`, which also keeps flags (two regional indicators), skin-tone
+  modifiers, ZWJ sequences and combining marks whole — every one of those is one
+  thing a user clicks on or deletes.
+- **Dark mode: the document was black text on a near-black page.** The surface
+  followed the page theme but `color` was the system `CanvasText`, which does
+  not. Text and surface are now a paired `--editor-text` / `--editor-surface`,
+  and a consumer that themes one must theme both.
+- Added **Cut** to the touch selection menu, which had Copy and Paste but no Cut.
+
+- **The caret sat on the wrong side of the line when typing LTR into an RTL
+  block** (and vice versa). The caret is an element, and bidi treats an empty
+  inline as a NEUTRAL, so it resolved against the block's base direction instead
+  of the run being typed. Typing across a direction boundary now wraps the run
+  and the caret in a `<span dir>` isolate, extending one isolate rather than
+  creating one per keystroke. Neutral characters take whichever run they land in.
+
+- **Typing over a selection deleted it and inserted nothing.** A regression from
+  the double-click fix: `resetBounds()` derives bounds from `.selected`, which
+  lands the caret INSIDE the last selected character, and `deleteSelection()`
+  then removed the caret along with the selection — leaving no insertion point,
+  so every keystroke was silently swallowed. The caret is now moved out of the
+  way before the selected chains are deleted.
+
+- Left-to-right runs inside right-to-left paragraphs — `<code>`, `<kbd>`,
+  `<samp>` — inherited the paragraph's base direction, so a URL's slashes or a
+  trailing period resolved to the wrong end. They now get their own
+  `direction: ltr; unicode-bidi: isolate`, which the new RTL page surfaced.
+
+- Double-clicking left the caret blinking where the click landed instead of at
+  the end of the selected word: word and block gestures expanded the marked
+  range without moving the `.sel-start`/`.sel-end` elements.
+- Clicking in the dead space to the right of a line did nothing, and
+  double-clicking there selected a word around stale bounds. Click position now
+  resolves to the nearest character on the clicked line.
+- `editable.commands` was never consulted — `executeCommand` resolved names
+  against the module-level registry, so the documented way to add a custom
+  command had no effect. The registry now travels on `EditableContext`.
+- README and the component doc comment advertised `<tosi-editable>`, which was
+  never the registered tag. It is `<tosijs-styled-editor>`.
+
+### Changed
+
+- The Highlight button now uses Lucide's `highlighter` icon, registered through
+  `defineIcons`. The previous `penTool` read as a fountain pen — a different
+  tool. Stored following tosijs-ui's own convention: no `xmlns`, `width`,
+  `height`, `fill`, `stroke` or `stroke-*`, since the host supplies all of that
+  from `--tosi-icon-*` and a hardwired stroke would ignore the current colour.
+
+- **Renamed to one name everywhere: `tosijs-styled-editor`.** The element is now
+  `<tosijs-styled-editor>` (was `<tosi-styled-editor>`), the class is
+  `TosijsStyledEditor`, the creator is `tosijsStyledEditor()`, and the source is
+  `src/tosijs-styled-editor.ts`. Only the repo directory stays `tosijs-editor`.
+  Breaking, and free to take now because the package is unpublished.
+- Doc pages have distinct titles — "A Rich Text Editor Component" (README) and
+  "Editor Component" — so the site nav no longer shows two near-identical entries.
+- Site icon, header mark and social image now use `static/tosijs-editor.svg`.
+- Chrome restyled around a pen-ink-blue accent (`#27488c`), shared by the
+  component and the doc site. The menubar, toolbar and document now read as
+  three distinct surfaces, mixed from a single `--editor-ink` custom property so
+  a consumer can re-theme the whole thing by setting one value. Toolbar buttons
+  are compact 26px squares, styled by the component rather than left to each
+  consumer to re-invent. Those styles ship as `lightStyleSpec`, not
+  `::slotted()`: slotted content is light DOM, so the host page's own `button`
+  rules win the cascade — which had left the buttons as white chips on the
+  tinted bars.
+
+- **Build**: replaced the bespoke `dev.ts` with `bin/site.ts`, a thin wrapper
+  over tosijs-ui's doc system (`buildSite`/`devServer`). The full build is
+  `bun run make` — there is deliberately no `build` script, because `bun build`
+  is a Bun builtin and the two would differ.
+- Bundling moved out of the long-lived watch process into child processes;
+  Bun's bundler never returns its native arena (oven-sh/bun#34053).
+- `docs/` is now the generated Pages web root and is committed.
+- Peer floors raised to `tosijs ^1.10.1` / `tosijs-ui ^1.13.0`.
+- Migrated off `elementCreator({ tag })` and `static styleSpec`, both deprecated
+  in the upgrade, to `static preferredTagName` and `static shadowStyleSpec`.
+
+### Security
+
+- `happy-dom` → 20.14.0 (GHSA-w4gp-fjgq-3q4g, GHSA-6q6h-j7hj-3r64) and a minimal
+  `ws` override → `^8.21.0` (GHSA-96hv-2xvq-fx4p), both surfaced by the build's
+  dependency audit gate.
+- `tls/` is gitignored as an allowlist so a dev TLS private key cannot be staged.
+
+### Removed
+
+- The legacy jQuery implementation (`edx-*.js`, `lib/jquery-2.1.4.js`, and the
+  orphaned HTML pages) — 336K that nothing in the build referenced. Recover from
+  git history if ever needed: `git show 298bf16 -- edx-editable.js`.
+
+## [0.2.0]
+
+### Added
+
+- Touch selection affordances and context menu; component renamed to
+  `<tosijs-styled-editor>`.
+
+## [0.1.0]
+
+### Added
+
+- Initial rewrite as a tosijs web component: custom selection via spanification,
+  command-based editing, grid tables, and toolbar/menubar factories.

package/README.md

@@ -27,7 +27,11 @@ A pure web-component. What it does **not** use:
 
 - No `document.execCommand`
 - No `contentEditable`
-- No horrible browser selection and Range APIs
+- No `getSelection`, no browser selection model, no `execCommand`-era APIs
+
+Range is used, but only as a **measuring tape** — `getBoundingClientRect()` to
+ask the layout engine where a character is. It is never a selection model, and
+nothing is handed back to the browser to edit.
 
 What you get instead:
 
@@ -110,11 +114,62 @@ for (const widget of defaultToolbar()) {
 The editor uses three layers:
 
 1. **DOM utilities** (`dom-utils.ts`) — leaf-node traversal; nearly all operations work with leaf nodes
-2. **Selection** (`selection.ts`) — custom selection via "spanification" (wrapping characters in `<span>` elements to determine exact positions without browser APIs)
+2. **Selection** (`selection.ts`) — a custom selection model. Character positions are found by MEASURING with a Range, which does not touch the document; wrapping characters in spans to measure them changes the thing being measured (it breaks shaping, so cursive scripts come apart and lines re-wrap)
 3. **Commands** (`commands.ts`) — extensible command system for formatting and editing
 
 The caret is an `<input>` element, so mobile browsers show their keyboard automatically.
 
+## Security: what is sanitized, and what is not
+
+Replacing `contentEditable` also means replacing the sanitization the browser
+was doing on your behalf. As of 0.4.4:
+
+**Sanitized** — content arriving from outside the document, which is the path an
+attacker controls:
+
+- **paste** and **drop** (both go through one shared choke point)
+- inline event handlers (`onerror`, `onload`, …) are removed
+- `script`, `iframe`, `object`, `embed`, `link`, `meta`, `base`, `style`,
+  `form` and the SVG animation elements are removed — in **any** namespace, so
+  `<svg><script>` and `<svg><style>` are caught too
+- `href`/`src`/`xlink:href` are scheme-checked: `http(s)`, `mailto`, `tel` and
+  relative URLs are kept, `javascript:` is dropped, and `data:` is allowed only
+  for raster images (never for a link, never `data:image/svg+xml`)
+- ordinary formatting and **unregistered custom elements survive** — plugin
+  markup is content, not a threat
+
+**NOT sanitized** — content you supply, which is inside your own trust boundary:
+
+- `editor.value = html`
+- initial light-DOM content
+
+**Using a different sanitizer.** `editor.sanitize` is the hook — it receives a
+detached element and mutates it:
+
+```js
+editor.sanitize = (root) => {
+  DOMPurify.sanitize(root, {
+    IN_PLACE: true,
+    FORBID_TAGS: ['style'],
+    CUSTOM_ELEMENT_HANDLING: {
+      tagNameCheck: /^[a-z][a-z0-9]*-[a-z0-9-]*$/,
+      attributeNameCheck: /^data-|^slot$|^dir$/,
+    },
+  })
+}
+```
+
+It takes an element rather than an HTML string on purpose: a string signature
+would force a serialize-and-reparse round trip, and that round trip is where
+mutation XSS lives. Note the `CUSTOM_ELEMENT_HANDLING` block — DOMPurify
+unwraps unknown custom elements by default, which would discard plugin markup
+the built-in sanitizer preserves.
+
+**If you are upgrading from 0.4.3 or earlier, read this:** documents your users
+created before 0.4.4 may already contain a payload that was pasted in, and the
+component cannot fix that for you — setting `value` does not filter. Sanitize
+your stored corpus as part of the upgrade.
+
 ## Keyboard Behavior
 
 ### General editing
@@ -216,10 +271,10 @@ setBlocks line-height 2.5
 
 ### Drag and drop
 
-Selected text becomes a real draggable object — spanification means the
-selection is made of elements, which is exactly what HTML5 drag and drop wants,
-so dragging works between windows, between browsers, and to and from the
-desktop with no extra machinery.
+Selected text becomes a real draggable object — the selection is marked on
+elements, which is exactly what HTML5 drag and drop wants, so dragging works
+between windows, between browsers, and to and from the desktop with no extra
+machinery.
 
 Every drag offers **both representations**, and the receiver picks:
 

package/dist/commands.d.ts

@@ -21,7 +21,7 @@ export interface EditableContext {
     findAll(selector: string): Element[];
     selectedLeafNodes(): Node[];
     selectedBlocks(): Element[];
-    insertionPoint(): HTMLInputElement | null;
+    insertionPoint(): HTMLElement | null;
     block(node: Node): Element | null;
     normalize(): void;
     focus(): void;
@@ -44,4 +44,14 @@ export declare const commands: Record<string, Command>;
  * Supports chained commands separated by semicolons.
  * Example: "setText font-weight bold; setBlockType h2"
  */
+/**
+ * Run a single command with already-separated arguments.
+ *
+ * The string form splits on `;` and whitespace, so any runtime value
+ * interpolated into it can inject a second command — and a data URI contains
+ * `;` BY SPEC (`data:image/png;base64,…`), which silently broke every dropped
+ * image. Call sites that build a command from a URL, a filename or anything
+ * else the user did not type must use this form instead.
+ */
+export declare function runCommand(ctx: EditableContext, name: string, ...args: string[]): void;
 export declare function executeCommand(ctx: EditableContext, commandString: string): void;

package/dist/dom-utils.d.ts

@@ -83,3 +83,27 @@ export declare function caretGeometryAt(marker: Element, root: Element): {
     top: number;
     height: number;
 } | null;
+/**
+ * Strip executable content from a subtree, IN PLACE.
+ *
+ * The editor replaced `contentEditable` but not the sanitization the browser
+ * was doing on its behalf: pasted and dropped HTML is written into the live
+ * document, and from there into `value`, `internals.setFormValue` and every
+ * undo snapshot — so an unsanitized payload is stored, re-served, and re-fired
+ * on undo. Must run BEFORE any node enters the document.
+ *
+ * This is deliberately a denylist for elements and an allowlist for URL
+ * schemes: unknown ELEMENTS are content (including a plugin's custom elements,
+ * which must survive — see EXTENSIBILITY.md), whereas unknown SCHEMES are not.
+ */
+export declare function sanitizeInPlace(root: Element | DocumentFragment): void;
+/**
+ * Is this URL safe to NAVIGATE to, or to write into an href?
+ *
+ * Stricter than `isSafeUrl`: that one allows raster `data:image/*` because an
+ * `<img src>` may legitimately carry one, while a link must never — so this
+ * rejects every `data:` URL. Both must normalize identically, or the stricter
+ * check is the one that gets bypassed: `da&#9;ta:image/png;…` passed here while
+ * `data:image/png;…` was correctly rejected.
+ */
+export declare function isSafeNavigationUrl(value: string): boolean;