@quillmark/svelte 0.20.1 → 0.21.0

package/dist/core/codec/lists.js

@@ -1,6 +1,6 @@
 import { liftListItem, sinkListItem, splitListItem } from 'prosemirror-schema-list';
 import { EditorState, Selection, TextSelection } from 'prosemirror-state';
-import { chainCommands, joinTextblockBackward } from 'prosemirror-commands';
+import { chainCommands, joinTextblockBackward, joinTextblockForward } from 'prosemirror-commands';
 /** The caret's enclosing `list_item` when it sits at the very start of that item's
  * first block: the position both structural keys branch on. `null` otherwise
  * (mid-text, a non-first block of a multi-paragraph item, a non-empty selection),
@@ -72,41 +72,68 @@ function paragraphAboveList(itemType, paragraph) {
     };
 }
 /**
- * Backspace at the start of a list's first item → lift it: one level out for a
- * nested item, out of the list entirely (to a paragraph) at the top.
+ * Backspace at the start of an item → lift it: one level out for a nested item, out of
+ * the list to a paragraph at the top, whichever item it is. The first press takes off
+ * the item's own shape and joins nothing; the press after is the join
+ * ({@link joinOntoList}).
+ *
+ * Lifting a later item out splits its list, and an ordered list's items past the cut
+ * keep their numbers: the list after what the item held starts where they were, where a
+ * fresh `ordered_list` would count from 1 again.
  */
-function liftAtListStart(itemType) {
+function liftAtItemStart(itemType) {
     return (state, dispatch) => {
         const at = atItemStart(state, itemType);
-        if (!at || at.itemIndex !== 0)
+        if (!at)
             return false;
-        return liftListItem(itemType)(state, dispatch);
+        const list = state.doc.nodeAt(at.listPos);
+        const cut = list?.type.name === 'ordered_list' && !at.nested && at.itemIndex < list.childCount - 1;
+        const listEnd = at.listPos + (list?.nodeSize ?? 0);
+        return liftListItem(itemType)(state, dispatch &&
+            ((tr) => {
+                if (cut)
+                    renumberEndingAt(tr, tr.mapping.map(listEnd, -1), list.attrs.start + at.itemIndex + 1);
+                dispatch(tr);
+            }));
     };
 }
+/** Start the ordered list ending at `end` at `start`: the items a lift cut off, which
+ *  end where the whole list did, past whatever the lifted item held. */
+function renumberEndingAt(tr, end, start) {
+    const list = tr.doc.resolve(end).nodeBefore;
+    if (list?.type.name === 'ordered_list' && list.attrs.start !== start)
+        tr.setNodeMarkup(end - list.nodeSize, undefined, { ...list.attrs, start });
+}
 /**
- * Backspace at the start of any later item → join its text into the previous
- * item's last block, so the two items become one line.
- *
- * Not the base keymap's `joinBackward`, which merges the block and leaves
- * `list_item(paragraph, paragraph)`: the item's marker gone while its text stays
- * on its own line, which the reference quill typesets as an unnumbered
- * continuation paragraph.
+ * Backspace at the head of a block that stands right after a list → join its text into
+ * the list's last line, as two paragraphs join. The base keymap's answer there wraps the
+ * block into a fresh item instead, which undoes the lift that just took it out of the
+ * list ({@link liftAtItemStart}) and leaves the key toggling.
  *
- * Only between two blocks of one kind. A fence is not a line to put another line on,
- * and the join across that edge would retype one side's whole text as the other's
- * (`code.ts`, which refuses the same join between siblings); the base keymap's answer
- * stands here instead, merging the items with each block kept whole.
+ * Between a fence and prose the text does not join: a fence is not a line to put another
+ * line on, and the join would retype one side's whole text as the other's (`code.ts`,
+ * which refuses the same join between siblings). The block moves into the list's last
+ * item whole instead, a block of that item under its first.
  */
-function mergeIntoPreviousItem(itemType) {
+function joinOntoList(itemType) {
     return (state, dispatch, view) => {
-        const at = atItemStart(state, itemType);
-        if (!at || at.itemIndex === 0)
+        const { $from, empty } = state.selection;
+        if (!empty || !$from.parent.isTextblock || $from.parentOffset !== 0)
             return false;
-        const into = lastBlockIn(state.doc.nodeAt(at.listPos)?.child(at.itemIndex - 1));
-        if (!into || !!into.type.spec.code !== !!state.selection.$from.parent.type.spec.code) {
+        const before = state.doc.resolve($from.before()).nodeBefore;
+        if (before?.firstChild?.type !== itemType)
             return false;
+        const into = lastBlockIn(before);
+        if (!into)
+            return false;
+        if (!!into.type.spec.code === !!$from.parent.type.spec.code)
+            return joinTextblockBackward(state, dispatch, view);
+        if (dispatch) {
+            const at = $from.before() - 2;
+            const tr = state.tr.delete($from.before(), $from.after()).insert(at, $from.parent);
+            dispatch(tr.setSelection(TextSelection.create(tr.doc, at + 1)).scrollIntoView());
         }
-        return joinTextblockBackward(state, dispatch, view);
+        return true;
     };
 }
 /** Whether the caret sits inside a `list_item` at any depth: a quote's paragraph
@@ -128,6 +155,10 @@ function inItem($pos, itemType) {
  * The reflection carries the edit and not the caret, which stays where the key was
  * pressed: a lift moves the item below, and Delete does not follow it.
  *
+ * An empty item is the exception: its line is the whole of what Delete edits, so the
+ * item below moves up into it rather than being lifted, and the empty item is spent. A
+ * fence below takes no prose line (`joinOntoList`), so there the empty line goes alone.
+ *
  * Declining wherever the chain does is what keeps this to the list's own seams: a
  * boundary inside one item, and the list's outer edge, stay the base keymap's, where
  * the two keys already answer alike.
@@ -142,6 +173,15 @@ function backspaceBelow(itemType, press) {
         const below = Selection.near(state.doc.resolve($from.after()), 1);
         if (below.from <= $from.pos)
             return false;
+        if ($from.parent.content.size === 0) {
+            if (!!below.$from.parent.type.spec.code === !!$from.parent.type.spec.code)
+                return joinTextblockForward(state, dispatch);
+            if (dispatch) {
+                const tr = state.tr.deleteRange($from.before(), $from.after());
+                dispatch(tr.setSelection(Selection.near(tr.doc.resolve(tr.mapping.map(below.from)), 1)));
+            }
+            return true;
+        }
         const pressed = $from.pos;
         const keepCaret = (tr) => dispatch?.(tr.setSelection(TextSelection.create(tr.doc, tr.mapping.map(pressed))));
         return press(EditorState.create({ doc: state.doc, selection: below }), dispatch && keepCaret);
@@ -163,8 +203,8 @@ function backspaceBelow(itemType, press) {
  * `splitListItem`, then `liftListItem`. The middle link carries two behaviors of
  * its own: it splits a non-empty item, and on an empty item it either splits the
  * wrapping item (a nested empty item, so Enter lifts exactly one level) or bails
- * so the third link lifts a top-level empty item out to a paragraph. `Backspace`
- * forks on the item's index: the first item lifts, any later one merges. `Delete` is
+ * so the third link lifts a top-level empty item out to a paragraph. `Backspace` lifts
+ * an item at its start, and joins a block onto the list it stands after. `Delete` is
  * that same chain at the seam below rather than a second table of cases beside it, so
  * the two keys cannot come to differ over a seam this link reaches. An empty line is
  * not one: the block link takes it ahead of this chain (`blocks.ts`), the caret's own
@@ -175,7 +215,7 @@ export function listKeymap(schema) {
     const paragraph = schema.nodes.paragraph;
     if (!itemType || !paragraph)
         return {};
-    const backspace = chainCommands(liftAtListStart(itemType), mergeIntoPreviousItem(itemType));
+    const backspace = chainCommands(liftAtItemStart(itemType), joinOntoList(itemType));
     return {
         Tab: sinkListItem(itemType),
         'Shift-Tab': liftListItem(itemType),

package/dist/core/codec/prose.css

@@ -29,6 +29,14 @@ li.ProseMirror-selectednode::after {
 	border: var(--_qm-ring);
 	left: calc(var(--_qm-space-4) * -1);
 }
+/* A node selection is drawn while its leaf holds the focus, as a text selection is: a
+   ring left behind on a field the focus has moved off names a subject no key reaches. */
+.ProseMirror:not(:focus-within) .ProseMirror-selectednode {
+	outline: none;
+}
+.ProseMirror:not(:focus-within) li.ProseMirror-selectednode::after {
+	border: none;
+}
 
 /* The gap cursor (`prosemirror-gapcursor`, imported beside this file): a caret
    between two blocks, where the document holds no text position for an ordinary one.
@@ -227,9 +235,12 @@ li.ProseMirror-selectednode::after {
    empty line the caret holds. Only while the leaf has the focus: the decoration follows
    the selection, which an unfocused leaf keeps. Upright, being chrome about the key
    rather than an invitation in the document's voice, and never over a ghost, which is
-   the leaf's own word for the same empty line. */
+   the leaf's own word for the same empty line. It comes up once the caret has rested
+   there, a new empty line starting the wait over. */
 .ProseMirror-focused .qm-slash-hint:not(.qm-prose-placeholder)[data-slash-hint]::after {
 	content: attr(data-slash-hint);
+	animation: qm-slash-hint-in var(--_qm-reveal) both;
+	animation-delay: var(--_qm-hint-wait);
 	display: block;
 	margin-top: -1lh;
 	white-space: nowrap;
@@ -239,6 +250,12 @@ li.ProseMirror-selectednode::after {
 	pointer-events: none;
 }
 
+@keyframes qm-slash-hint-in {
+	from {
+		opacity: 0;
+	}
+}
+
 /* ── The table island ────────────────────────────────────────────────────────
 
    The one construct in this file with chrome in it. The rest of the stylesheet
@@ -313,19 +330,16 @@ li.ProseMirror-selectednode::after {
 .qm-table {
 	border-collapse: separate;
 	border-spacing: 0;
-	border: var(--_qm-border-width) solid var(--_qm-border);
-	border-radius: var(--_qm-radius-inner);
+	border: var(--_qm-border-width) solid var(--_qm-rule);
+	border-radius: var(--_qm-radius);
 }
-/* Two tiers of rule, because a table draws two different things. The frame and the
-   header's rule are structure and keep the full hairline; the lines between cells are
-   rhythm and drop to the faint rung, so the grid reads as one object with divisions
-   rather than as a stack of boxes. `separate` with zero spacing rather than
-   `collapse`: a collapsed border cannot be rounded, and the two tiers would fight
-   over which one wins an edge. */
+/* One rule at one strength, the frame's and every line between cells, so the grid
+   reads at the weight of the type it holds. `separate` with zero spacing rather than
+   `collapse`: a collapsed border cannot be rounded. */
 .qm-table-cell {
 	position: relative;
-	border-right: var(--_qm-border-width) solid var(--_qm-border-faint);
-	border-bottom: var(--_qm-border-width) solid var(--_qm-border-faint);
+	border-right: var(--_qm-border-width) solid var(--_qm-rule);
+	border-bottom: var(--_qm-border-width) solid var(--_qm-rule);
 	padding: var(--_qm-space) var(--_qm-space-2);
 	vertical-align: top;
 	font-weight: inherit;
@@ -339,13 +353,29 @@ li.ProseMirror-selectednode::after {
 }
 /* The header row is the one weight distinction the island draws: `header` is a
    separate field in the model rather than a flag on a row, so the surface says so.
-   It takes a tone with it, which is the same move a field makes: the well rung, a
-   band cut into the paper rather than a layer stacked on it, and a rung either way
-   rather than a shadow. The rest of a table's type is paper's. */
+   It takes a tone with it, the band rung, a step toward the ink at both poles. The
+   rest of a table's type is paper's. */
 .qm-table-header-row .qm-table-cell {
 	font-weight: var(--_qm-weight-strong);
-	background: var(--_qm-surface-well);
-	border-bottom: var(--_qm-border-width) solid var(--_qm-border);
+	background: var(--_qm-surface-band);
+}
+/* The corner cells take the frame's corner, inside its stroke, so a header's band or a
+   selection's wash keeps to the rounded edge rather than painting a square one over
+   it. The first row is the colgroup's next sibling's, whichever section holds it. */
+.qm-table > colgroup + * > tr:first-child > .qm-table-cell:first-child {
+	border-start-start-radius: calc(var(--_qm-radius) - var(--_qm-border-width));
+}
+.qm-table > colgroup + * > tr:first-child > .qm-table-cell:last-child {
+	border-start-end-radius: calc(var(--_qm-radius) - var(--_qm-border-width));
+}
+.qm-table
+	> :is(:last-child, thead:has(+ tbody:empty))
+	> tr:last-child
+	> .qm-table-cell:first-child {
+	border-end-start-radius: calc(var(--_qm-radius) - var(--_qm-border-width));
+}
+.qm-table > :is(:last-child, thead:has(+ tbody:empty)) > tr:last-child > .qm-table-cell:last-child {
+	border-end-end-radius: calc(var(--_qm-radius) - var(--_qm-border-width));
 }
 /* A cell holds a whole nested view. Its measure floor keeps an empty table from
    collapsing to a row of hairlines with nothing to aim at, and the caret is the
@@ -400,20 +430,16 @@ li.ProseMirror-selectednode::after {
 	color: var(--_qm-ink);
 	cursor: pointer;
 }
-/* The bar every one of them draws: a pill the length of what it acts on, a rhythm rung
-   thick where the target is the tap floor. Stated once, so a grip and an add bar cannot
-   drift into two shapes.
-
-   One tone, not a hover ladder: the control is drawn only while it is the one the
-   pointer is on or the one a gesture is about, so a resting tone under that would be a
-   rung nothing ever reaches. The selected grip's tint below is the one exception, and it
-   says which line the next command acts on rather than where the pointer is. */
+/* The pill every one of them draws, a rhythm rung thick where the target is the tap
+   floor. Stated once, so a grip and an add bar cannot drift into two shapes. The selected
+   grip's tint below says which line the next command acts on rather than where the
+   pointer is. */
 :is(.qm-table-grip-bar, .qm-table-add-bar) {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	border-radius: var(--_qm-radius-pill);
-	background: var(--_qm-border);
+	background: var(--_qm-surface-band);
 	transition:
 		background-color var(--_qm-duration-fast) var(--_qm-ease-reverse),
 		color var(--_qm-duration-fast) var(--_qm-ease-reverse);
@@ -424,32 +450,34 @@ li.ProseMirror-selectednode::after {
 	width: var(--_qm-space-3);
 	height: var(--_qm-space-3);
 }
-/* A grip runs along the line it names; an add bar runs across the axis it appends to.
-   So the two families map one `data-axis` onto opposite orientations, and orientation
-   is the one thing the rule above cannot share with them: a column's grip is as wide as
-   its column, and the bar that adds a column is as tall as the table. */
-.qm-table-grip[data-axis='column'] .qm-table-grip-bar,
+/* An add bar runs across the axis it appends to, the length of the table; a grip is a
+   short pill centred on the line it names, the tap floor long. */
 .qm-table-add[data-axis='row'] .qm-table-add-bar {
 	width: 100%;
 	height: var(--_qm-space-3);
 }
-.qm-table-grip[data-axis='row'] .qm-table-grip-bar,
 .qm-table-add[data-axis='column'] .qm-table-add-bar {
 	width: var(--_qm-space-3);
 	height: 100%;
 }
+.qm-table-grip[data-axis='column'] .qm-table-grip-bar {
+	width: var(--_qm-tap-min);
+	height: var(--_qm-space-3);
+}
+.qm-table-grip[data-axis='row'] .qm-table-grip-bar {
+	width: var(--_qm-space-3);
+	height: var(--_qm-tap-min);
+}
 
-/* One grip per line, and it is a bar rather than a glyph: what a grip acts on is the
-   row or column it sits against, and spanning that line says so better than an icon
-   could. The bar carries the grip's own marks — two rows of three, the shape a thing
-   you can pick up has everywhere else — so the control reads as draggable before it is
-   dragged.
+/* One grip per line. The pill carries the grip's own marks at the label ink — two rows
+   of three, the shape a thing you can pick up has everywhere else — so the control reads
+   as draggable before it is dragged.
 
-   The target is the band and the bar is drawn inside it: a grip spans its line on one
-   axis and the tap floor on the other, and the bar is drawn thinner inside that. A grip
-   sized to its own bar would be a target the thickness of the mark on it, on a control
-   the pointer has to find. */
+   The target is the band and the pill is drawn inside it: a grip spans its line on one
+   axis and the tap floor on the other. A grip sized to its own pill would be a target
+   the size of the mark on it, on a control the pointer has to find. */
 .qm-table-grip {
+	color: var(--_qm-ink-label);
 	/* The pointer owns this gesture, not the page's scroll: a grip drags. */
 	touch-action: none;
 }
@@ -490,8 +518,8 @@ li.ProseMirror-selectednode::after {
 /* The reveal is the control's own (CODEC §"The table island"): one comes up while the
    pointer is on that control, while it holds the focus, or while it is what a gesture is
    about — the selected line's grip, and the lifted one, which is drawn through a drag the
-   pointer has travelled off. The controls' boxes meet at no point, so what is drawn is
-   the one line the pointer has picked out.
+   pointer has travelled off. A cell under the pointer draws its row's and its column's
+   grips (`table-view.ts` §`onHover`), one pill on each axis and none anywhere else.
 
    Opacity rather than absence, so every control keeps its box and is hit-tested wherever
    it sits. A grip's reach is the pointer's alone and it holds no focus, so it carries no
@@ -504,7 +532,7 @@ li.ProseMirror-selectednode::after {
 	transition: opacity var(--_qm-duration-fast) var(--_qm-ease-reverse);
 }
 .qm-table-add:is(:hover, :focus-visible),
-.qm-table-grip:is(:hover, [aria-pressed='true'], .qm-table-lifted) {
+.qm-table-grip:is([data-near], :hover, [aria-pressed='true'], .qm-table-lifted) {
 	opacity: 1;
 }
 

package/dist/core/codec/schema.js

@@ -14,19 +14,64 @@
 // paste inside one body run the whole document through them (CODEC §"Markdown at the
 // edges"), so every attribute written here is read back here. Foreign HTML spells none
 // of this package's `data-qm-*` names, so what a paste takes off the web is unchanged;
-// the one rule here that widens that door on purpose is the fence's, a `<table>` being
-// the block leaf's clipboard parser's (`table-paste.ts`).
+// the rules here that widen that door on purpose are the fence's and a span's styled
+// marks, a `<table>` being the block leaf's clipboard parser's (`table-paste.ts`).
 import { Schema } from 'prosemirror-model';
 import { islandBlockSpec, islandInlineSpec } from './islands.js';
 import { rendersHref, storableUrl } from './urls.js';
+// ── Marks spelled as style ──────────────────────────────────────────────────
+// A word processor writes formatting as a span's inline style rather than as a tag:
+// Google Docs spells all four marks below that way, and wraps a whole copy in a `<b>`
+// stating a regular weight. Read off a `<span>` alone, since the same style on a cell or
+// a heading is that block's face rather than a run's. An underline inside a link is the
+// link's own: Docs underlines every one, and Chrome inlines the computed decoration on a
+// copy off any page.
+/** Whether `el`'s inline style states a bold weight. */
+const bold = (el) => /^(?:bold(?:er)?|[6-9]\d\d)$/.test(el.style.fontWeight);
+/** The text decoration `el` states, as a shorthand or a longhand. */
+const decoration = (el) => `${el.style.textDecoration} ${el.style.textDecorationLine}`;
+/** A mark a `<span>` carries where `styled` holds of it. Not consuming, so every mark a
+ *  span states matches, and so do the span's own rules after them. */
+const styledSpan = (styled) => ({
+    tag: 'span',
+    consuming: false,
+    getAttrs: (el) => styled(el) && null
+});
 // ── Marks (the block and inline schemas share them; plaintext declares none) ─
 const marks = {
     // Order matters: it fixes mark-set sort order and parse precedence. `link`
     // last so it wraps outermost.
-    strong: { parseDOM: [{ tag: 'strong' }, { tag: 'b' }], toDOM: () => ['strong', 0] },
-    em: { parseDOM: [{ tag: 'em' }, { tag: 'i' }], toDOM: () => ['em', 0] },
-    underline: { parseDOM: [{ tag: 'u' }], toDOM: () => ['u', 0] },
-    strike: { parseDOM: [{ tag: 's' }, { tag: 'del' }], toDOM: () => ['s', 0] },
+    strong: {
+        parseDOM: [
+            { tag: 'strong' },
+            { tag: 'b', getAttrs: (el) => (!el.style.fontWeight || bold(el)) && null },
+            styledSpan(bold)
+        ],
+        toDOM: () => ['strong', 0]
+    },
+    em: {
+        parseDOM: [
+            { tag: 'em' },
+            { tag: 'i' },
+            styledSpan((el) => /^(?:italic|oblique)\b/.test(el.style.fontStyle))
+        ],
+        toDOM: () => ['em', 0]
+    },
+    underline: {
+        parseDOM: [
+            { tag: 'u' },
+            styledSpan((el) => /\bunderline\b/.test(decoration(el)) && !el.closest('a'))
+        ],
+        toDOM: () => ['u', 0]
+    },
+    strike: {
+        parseDOM: [
+            { tag: 's' },
+            { tag: 'del' },
+            styledSpan((el) => /\bline-through\b/.test(decoration(el)))
+        ],
+        toDOM: () => ['s', 0]
+    },
     code: { parseDOM: [{ tag: 'code' }], toDOM: () => ['code', 0] },
     link: {
         attrs: { href: { default: '' } },
@@ -50,11 +95,10 @@ const marks = {
     }
 };
 // ── The fence's language ────────────────────────────────────────────────────
-// The one attribute no keystroke in the visual editor mints: the shorthand fires on
-// the third backtick, before a language could be typed, and a slash command is a name
-// (VISUAL_EDITOR §"Settled and open"). A paste is the gesture that does, and this is
-// what reads it — a fence copied off a highlighted page arrives carrying the language
-// that page stated, one copied inside the body keeps its own.
+// Minted by the fence shorthand, which fires on Enter with the language typed after the
+// backticks (`inputrules.ts`), and by a paste, which this reads: a fence copied off a
+// highlighted page arrives carrying the language that page stated, one copied inside
+// the body keeps its own.
 /** A `language-x` / `lang-x` token in a class list. */
 const LANG_CLASS = /(?:^|\s)lang(?:uage)?-(\S+)/;
 /** The language a `<pre>` states: `data-lang`, which is what `toDOM` writes, else the

package/dist/core/codec/table-view.d.ts

@@ -57,6 +57,11 @@ export interface TableViewDeps {
      *  which is PM's 5px default. */
     clearance: number | undefined;
 }
+/** The table island mounted at `pos` in `view`, which a caret can step into; `undefined`
+ *  for any other node, or where no view is mounted. */
+export declare function tableAt(view: EditorView, pos: number): {
+    enter(side: -1 | 1): void;
+} | undefined;
 /** The `island_block` node view: a table island's editing surface, and the literal
  *  placeholder for every other island type. */
 export declare function tableNodeView(deps: TableViewDeps): NodeViewConstructor;