@quillmark/svelte 0.25.0 → 0.26.1

package/dist/core/codec/field.js

@@ -36,6 +36,7 @@ import { linkPastePlugin } from './link-paste.js';
 import { linePastePlugin } from './line-paste.js';
 import { listPastePlugin } from './list-paste.js';
 import { markdownPastePlugin } from './markdown-paste.js';
+import { wordPastePlugin } from './word-paste.js';
 import { nestingPlugin } from './nesting.js';
 import { undoStepPlugin } from './undo.js';
 import { tablePastePlugin } from './table-paste.js';
@@ -572,7 +573,7 @@ export function proseLeafPlugins(schema, opts) {
     // Each answers to something only the block schema holds: any other leaf is
     // textblocks alone, with no island and no gap to put a cursor in.
     if (isBlockSchema(schema))
-        list.push(gapCursor(), pastAtomPlugin(), islandPastePlugin(), tablePastePlugin(), tableCopyPlugin(), markdownPastePlugin(), listPastePlugin(), taskPlugin(), nestingPlugin());
+        list.push(gapCursor(), pastAtomPlugin(), islandPastePlugin(), tablePastePlugin(), tableCopyPlugin(), markdownPastePlugin(), wordPastePlugin(), listPastePlugin(), taskPlugin(), nestingPlugin());
     if (schema === plainSchema)
         list.push(plainClipboardPlugin());
     if (isInlineSchema(schema))

package/dist/core/codec/list-toggle.js

@@ -10,10 +10,11 @@
 // Otherwise each line becomes the kind: a run of plain lines is wrapped, one item a
 // line, and a run of continuation lines the same way where it stands, the first items
 // of a sub-list under their item, as `- ` or `1. ` at a continuation's head opens one
-// (`blocks.ts` §`openingAnItem`); a list of the other kind is retyped whole, a list
-// being one kind (`blocks.ts` §`listAtItem`); a line already in the kind stays. What it
-// wraps or retypes joins the lists of its kind it leaves touching (`touching.ts`), so
-// the lines of one selection count as one list.
+// (`blocks.ts` §`openingAnItem`); the selected items of a list of the other kind split
+// out of it as a list of the kind, a list being one kind (`blocks.ts` §`listAtItem`),
+// its tail counting from 1 as `unlist` leaves one; a line already in the kind stays.
+// What it wraps or retypes joins the lists of its kind it leaves touching
+// (`touching.ts`), so the lines of one selection count as one list.
 import { Fragment, NodeRange, Slice } from 'prosemirror-model';
 import { wrapRangeInList } from 'prosemirror-schema-list';
 import { ReplaceAroundStep } from 'prosemirror-transform';
@@ -108,20 +109,41 @@ function unlist(tr, type, itemType) {
             tr.setNodeMarkup(tail, null, { ...rest.attrs, start: 1 });
     }
 }
+/** Items `first` to `last` of the list at `pos` split out as a list of their own,
+ *  the tail after them counting from 1. Returns where that list stands. */
+function splitOut(tr, pos, first, last) {
+    const list = tr.doc.nodeAt(pos);
+    const $inside = tr.doc.resolve(pos + 1);
+    if (last + 1 < list.childCount) {
+        tr.split($inside.posAtIndex(last + 1));
+        const tail = tr.doc.resolve(pos + 1).posAtIndex(last + 1) + 1;
+        if (list.attrs.start != null && list.attrs.start !== 1)
+            tr.setNodeMarkup(tail, null, { ...list.attrs, start: 1 });
+    }
+    if (first === 0)
+        return pos;
+    tr.split($inside.posAtIndex(first));
+    return $inside.posAtIndex(first) + 1;
+}
 /** Make every line the kind, and join what that leaves touching. */
 function relist(tr, lines, type, paragraph) {
     const changed = [];
     const runs = [];
+    const others = new Map();
     for (const line of lines) {
         const { $at, item } = line;
         if (line.covered)
             continue;
         if (line.opens) {
+            if ($at.node(item - 1).type === type)
+                continue;
             const pos = $at.before(item - 1);
-            if ($at.node(item - 1).type !== type && !changed.some((c) => c.pos === pos)) {
-                tr.setNodeMarkup(pos, type, type.name === 'ordered_list' ? { start: 1 } : null);
-                changed.push({ pos, step: tr.steps.length });
-            }
+            const index = $at.index(item - 1);
+            const span = others.get(pos);
+            if (span)
+                span.last = index;
+            else
+                others.set(pos, { first: index, last: index });
             continue;
         }
         const end = line.pos + $at.parent.nodeSize;
@@ -138,6 +160,11 @@ function relist(tr, lines, type, paragraph) {
             return false;
         changed.push({ pos: run.from, step: tr.steps.length });
     }
+    for (const [pos, span] of [...others].reverse()) {
+        const at = splitOut(tr, tr.mapping.map(pos), span.first, span.last);
+        tr.setNodeMarkup(at, type, type.name === 'ordered_list' ? { start: 1 } : null);
+        changed.push({ pos: at, step: tr.steps.length });
+    }
     const seams = [];
     for (const { pos, step } of changed) {
         const at = tr.mapping.slice(step).map(pos);

package/dist/core/codec/word-paste.d.ts

@@ -0,0 +1,5 @@
+import { Plugin } from 'prosemirror-state';
+/** `html` with every run of Word list paragraphs made a list; `html` itself where there
+ *  are none. */
+export declare function wordLists(html: string): string;
+export declare function wordPastePlugin(): Plugin;

package/dist/core/codec/word-paste.js

@@ -0,0 +1,87 @@
+// A list copied out of Word or Outlook lands as a list. Desktop Word writes no `<ol>` or
+// `<li>`: each item is a paragraph styled `mso-list:l0 level2 lfo1`, its marker drawn by a
+// `mso-list:Ignore` span ahead of the text. Each run of those paragraphs is rebuilt here as
+// the nested lists it draws, the marker span dropped, so the paste rules after this one
+// (`list-paste.ts`) see a list as any other source writes one.
+import { Plugin } from 'prosemirror-state';
+/** A Word list paragraph's style: the list it is in, and its level from 1. */
+const MSO_LIST = /mso-list:\s*(l\d+)\s+level(\d+)\s+(lfo\d+)/i;
+/** A numbered marker: digits, or letters, closed by `.` or `)`, or in parentheses, and a
+ *  legal outline's `1.2.` whose last part is the item's own. Every other marker is a
+ *  bullet, Word's `·`, `o` and `§` among them. */
+const ORDINAL = /^\(?(?:\d+\.)*(\d+|[a-z]+)[.)]$/i;
+/** The marker text of a list paragraph, its span taken out. */
+function takeMarker(p) {
+    const span = [...p.querySelectorAll('span')].find((s) => /mso-list:\s*Ignore/i.test(s.getAttribute('style') ?? ''));
+    if (!span)
+        return '';
+    const marker = (span.textContent ?? '').replace(/\s+/g, '');
+    span.remove();
+    return marker;
+}
+/** `run`'s paragraphs as nested lists, one level of the stack a level of Word's. */
+function rebuild(doc, run) {
+    const stack = [];
+    let root = null;
+    for (const { p, level } of run) {
+        const marker = takeMarker(p);
+        while (stack.length && stack[stack.length - 1].level > level)
+            stack.pop();
+        const top = stack[stack.length - 1];
+        if (!top || top.level < level) {
+            const ordinal = ORDINAL.exec(marker);
+            const list = doc.createElement(ordinal ? 'ol' : 'ul');
+            if (ordinal && /^\d+$/.test(ordinal[1]) && ordinal[1] !== '1')
+                list.setAttribute('start', ordinal[1]);
+            if (top)
+                top.list.lastElementChild.append(list);
+            else
+                root = list;
+            stack.push({ level, list });
+        }
+        const item = doc.createElement('li');
+        p.removeAttribute('style');
+        p.removeAttribute('class');
+        item.append(p);
+        stack[stack.length - 1].list.append(item);
+    }
+    return root;
+}
+/** `html` with every run of Word list paragraphs made a list; `html` itself where there
+ *  are none. */
+export function wordLists(html) {
+    if (!/mso-list/i.test(html))
+        return html;
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    const runs = [];
+    let id = null;
+    for (const p of doc.body.querySelectorAll('p')) {
+        const match = MSO_LIST.exec(p.getAttribute('style') ?? '');
+        if (!match)
+            continue;
+        const prev = runs[runs.length - 1]?.at(-1)?.p;
+        let sibling = p.previousSibling;
+        while (sibling &&
+            sibling.nodeType !== 1 &&
+            !(sibling.nodeType === 3 && sibling.textContent.trim()))
+            sibling = sibling.previousSibling;
+        const list = match[1] + match[3];
+        const entry = { p, level: Number(match[2]) };
+        if (prev && sibling === prev && list === id)
+            runs[runs.length - 1].push(entry);
+        else
+            runs.push([entry]);
+        id = list;
+    }
+    if (!runs.length)
+        return html;
+    for (const run of runs) {
+        const anchor = doc.createComment('');
+        run[0].p.before(anchor);
+        anchor.replaceWith(rebuild(doc, run));
+    }
+    return doc.body.innerHTML;
+}
+export function wordPastePlugin() {
+    return new Plugin({ props: { transformPastedHTML: (html) => wordLists(html) } });
+}

package/dist/preview/viewport.js

@@ -13,6 +13,9 @@ const WHEEL_RATE = [0.0025, 0.08, 0.25];
  *  rate that inverts the pinch's encoding. */
 const PINCH_DELTA = 50;
 const PINCH_RATE = 0.01;
+/** How far, as a log of the spread's ratio, two fingers part or close before a touch
+ *  pinch zooms rather than only pans. */
+const PINCH_SLOP = 0.04;
 const px = (value) => parseFloat(value) || 0;
 export function createViewport(container, slots, setScale, resetLabel) {
     let zoom;
@@ -154,14 +157,13 @@ export function createViewport(container, slots, setScale, resetLabel) {
         const factor = Math.exp(-e.deltaY * (pinched ? PINCH_RATE : WHEEL_RATE[e.deltaMode]));
         glideTo((g) => g.raw * factor, e.clientX, e.clientY);
     }
-    // The keys reach the pane under the pointer as well as the focused one: a click on a
-    // page lands its caret in the editor, taking the focus with it.
-    // The first pane to take a key claims it, so two previews never both step, and a key
-    // a host's own handler took is left to it.
+    // The keys are the focused pane's alone: elsewhere they are the browser's own zoom,
+    // the pointer over the pane notwithstanding. A key a host's own handler took is left
+    // to it.
     function onKeyDown(e) {
         if (!(e.ctrlKey || e.metaKey) || e.altKey || e.defaultPrevented || e.isComposing)
             return;
-        if (!pointer && !container.contains(document.activeElement))
+        if (!container.contains(document.activeElement))
             return;
         const dir = e.key === '=' || e.key === '+' ? 1 : e.key === '-' || e.key === '_' ? -1 : 0;
         if ((!dir && e.key !== '0') || !bounds())
@@ -169,30 +171,54 @@ export function createViewport(container, slots, setScale, resetLabel) {
         e.preventDefault();
         step((b) => (dir ? stepZoom(b.current, dir, b.floor) : undefined));
     }
-    // A two-finger pinch on a touch screen. The browser's own page zoom is held off by the
-    // desk's `touch-action` and by cancelling the move, which also stops the pan a second
-    // finger would otherwise start.
     let pinch;
-    const spread = (t) => Math.hypot(t[0].clientX - t[1].clientX, t[0].clientY - t[1].clientY);
-    function onTouchStart(e) {
-        if (e.touches.length !== 2)
-            return;
+    // The fingers on this pane, not one resting on the editor beside it.
+    const fingers = (e) => [...e.touches].filter((t) => t.target instanceof Node && container.contains(t.target));
+    const spread = ([a, b]) => Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+    const midpoint = ([a, b]) => ({
+        x: (a.clientX + b.clientX) / 2,
+        y: (a.clientY + b.clientY) / 2
+    });
+    function grip(at) {
+        const page = pageAt(at.y);
+        const r = page?.getBoundingClientRect();
+        if (!page || !r?.width || !r.height)
+            return undefined;
+        return { page, fx: (at.x - r.left) / r.width, fy: (at.y - r.top) / r.height };
+    }
+    // A finger landing or lifting starts the pinch over with the two that remain.
+    function onTouches(e) {
+        pinch = undefined;
+        const t = fingers(e);
         const b = bounds();
-        if (b)
-            pinch = { spread: spread(e.touches), raw: from(b).raw };
+        const held = t.length === 2 && b ? grip(midpoint(t)) : undefined;
+        if (held)
+            pinch = { spread: spread(t), raw: from(b).raw, zooming: false, ...held };
     }
     function onTouchMove(e) {
-        if (!pinch || e.touches.length !== 2)
+        const t = fingers(e);
+        if (!pinch || t.length !== 2)
             return;
         e.preventDefault();
-        const [a, b] = [e.touches[0], e.touches[1]];
-        const ratio = spread(e.touches) / pinch.spread;
-        const start = pinch.raw;
-        glideTo(() => start * ratio, (a.clientX + b.clientX) / 2, (a.clientY + b.clientY) / 2);
-    }
-    function onTouchEnd(e) {
-        if (e.touches.length < 2)
-            pinch = undefined;
+        const mid = midpoint(t);
+        const ratio = spread(t) / pinch.spread;
+        if (pinch.zooming) {
+            const start = pinch.raw;
+            glideTo(() => start * ratio, mid.x, mid.y);
+        }
+        else if (Math.abs(Math.log(ratio)) >= PINCH_SLOP) {
+            pinch.zooming = true;
+            pinch.spread = spread(t);
+        }
+        // A move the browser is already scrolling cannot be cancelled: its pan stands, and
+        // the pinch holds whatever is under the fingers now.
+        if (!e.cancelable) {
+            Object.assign(pinch, grip(mid));
+            return;
+        }
+        const r = pinch.page.getBoundingClientRect();
+        container.scrollLeft += r.left + pinch.fx * r.width - mid.x;
+        container.scrollTop += r.top + pinch.fy * r.height - mid.y;
     }
     // Safari's trackpad pinch. iOS sends these beside the touches, which are the ones read
     // there; either way the page zoom is cancelled.
@@ -231,10 +257,10 @@ export function createViewport(container, slots, setScale, resetLabel) {
     const listeners = [
         [container, 'wheel', onWheel, { passive: false }],
         [window, 'keydown', onKeyDown],
-        [container, 'touchstart', onTouchStart, { passive: true }],
+        [container, 'touchstart', onTouches, { passive: true }],
         [container, 'touchmove', onTouchMove, { passive: false }],
-        [container, 'touchend', onTouchEnd],
-        [container, 'touchcancel', onTouchEnd],
+        [container, 'touchend', onTouches],
+        [container, 'touchcancel', onTouches],
         [container, 'gesturestart', onGestureStart],
         [container, 'gesturechange', onGestureChange],
         [container, 'gestureend', onGestureEnd],

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@quillmark/svelte",
-	"version": "0.25.0",
+	"version": "0.26.1",
 	"description": "Editor, live-preview and source surfaces over a Quillmark WASM session.",
 	"repository": {
 		"type": "git",