markupeditor 0.9.52 → 0.9.54

package/dist/markup-editor.js

@@ -621,6 +621,40 @@ class MUError {
 
 }
 
+/**
+ * Return the slug for a heading's `text` the way GitHub makes it: lowercase, keep alphabetic
+ * characters, combining marks, decimal digits, connector punctuation (which includes `_`) and `-`,
+ * and replace blanks with `-`. The slug is cut to 40 characters, counting characters rather than
+ * UTF-16 units, just to avoid unwieldy IDs.
+ *
+ * @param {string} text     The text content of a heading
+ * @returns {string}        The slug, which is empty if nothing in `text` is kept
+ */
+function headingSlug(text) {
+    const slug = text.toLowerCase()
+        .replace(/[^\p{Alphabetic}\p{M}\p{Nd}\p{Pc} -]/gu, '')
+        .replaceAll(' ', '-');
+    return Array.from(slug).slice(0, 40).join('')
+}
+
+/**
+ * Return the slugs for the headings with the `texts` given in document order, numbering repeats
+ * the way GitHub does: the first heading with a slug gets it as-is, and later ones get `-1`, `-2`,
+ * and so on. Every heading counts, whether or not anything links to it.
+ *
+ * @param {string[]} texts  The text content of every heading, in document order
+ * @returns {string[]}      The slug for each of `texts`, in the same order
+ */
+function headingSlugs(texts) {
+    const seen = new Map();
+    return texts.map(text => {
+        const slug = headingSlug(text);
+        const count = seen.get(slug) ?? 0;
+        seen.set(slug, count + 1);
+        return count === 0 ? slug : slug + '-' + count.toString()
+    })
+}
+
 // ::- Persistent data structure representing an ordered mapping from
 // strings to values, with some convenient update methods.
 function OrderedMap(content) {
@@ -35485,18 +35519,31 @@ function _getMarkTypes() {
  */
 function getLinkAttributes() {
     const view = activeView();
-    const selection = view.state.selection;
-    const selectedNodes = [];
-    view.state.doc.nodesBetween(selection.from, selection.to, node => {
-        if (node.isText) selectedNodes.push(node);
-    });
-    const selectedNode = (selectedNodes.length === 1) && selectedNodes[0];
-    if (selectedNode) {
-        const linkMarks = selectedNode.marks.filter(mark => mark.type === schema.marks.link);
+    const link = linkRangeAt(view.state);
+    if (link) {
+        const text = view.state.doc.textBetween(link.from, link.to);
+        if (text) return {href: link.mark.attrs.href, link: text};
+    }    // A linked image carries the link mark on the image node, which has no text to report as the link.
+    const image = _selectedImageNode(view.state);
+    if (image) {
+        const linkMarks = image.marks.filter(mark => mark.type === schema.marks.link);
         if (linkMarks.length === 1) {
-            return {href: linkMarks[0].attrs.href, link: selectedNode.text};
+            return {href: linkMarks[0].attrs.href, link: image.attrs.alt ?? ''};
         }    }    return {};
 }
+function _selectedImageNode(state) {
+    const {from, to} = state.selection;
+    let image = null;
+    let count = 0;
+    state.doc.nodesBetween(from, to, node => {
+        if (node.type === state.schema.nodes.image) {
+            image = node;
+            count++;
+        }
+    });
+    return (count === 1) ? image : null
+}
+
 function _getImageAttributes() {
     const view = activeView();
     return getImageAttributes(view.state)
@@ -36129,6 +36176,9 @@ function testCodeLanguageTabInfo() {
  * Insert a link to url. When the selection is collapsed, the url is inserted
  * at the selection point as a link.
  *
+ * When the selection is in an existing link, or contains one, the href of the whole link is
+ * changed to url and its text is left alone.
+ *
  * When done, leave the link selected.
  *
  * @param {string}  url             The url/href to use for the link
@@ -36143,25 +36193,94 @@ function insertLinkCommand(url) {
     const commandAdapter = (state, dispatch, view) => {
         const selection = state.selection;
         const linkMark = state.schema.marks.link.create({ href: url });
-        if (selection.empty) {
+        const transaction = state.tr;
+        if (!addLinkMark(transaction, state, linkMark)) {
+            // A collapsed selection outside any link
             const textNode = state.schema.text(url).mark([linkMark]);
-            const transaction = state.tr.replaceSelectionWith(textNode, false);
+            transaction.replaceSelectionWith(textNode, false);
             const linkSelection = TextSelection.create(transaction.doc, selection.from, selection.from + textNode.nodeSize);
             transaction.setSelection(linkSelection);
-            dispatch(transaction);
-            stateChanged(view);
-        } else {
-            const toggle = toggleMark(linkMark.type, linkMark.attrs);
-            if (toggle) {
-                toggle(state, dispatch);
-                stateChanged(view);
-            }
         }
+        dispatch(transaction);
+        stateChanged(view);
         return true;
     };
     return commandAdapter;
 }
 
+/**
+ * Add `linkMark` to `transaction`, replacing the href of the link the selection is in if there is one.
+ *
+ * The selection can be anywhere within a link or contain the full link. A link that spans several
+ * text nodes, because part of it has other marks, is changed as a whole.
+ *
+ * @ignore
+ * @param {Transaction} transaction
+ * @param {EditorState} state           The state `transaction` was created from
+ * @param {Mark} linkMark
+ * @returns {boolean}                   False, with `transaction` unchanged, when the selection is collapsed and not in a link
+ */
+function addLinkMark(transaction, state, linkMark) {
+    const range = linkRangeAt(state);
+    if (range) {
+        transaction.addMark(range.from, range.to, linkMark);
+        const {from, to} = state.selection;
+        if (range.from !== from || range.to !== to) {
+            transaction.setSelection(TextSelection.create(transaction.doc, range.from, range.to));
+        }        return true;
+    }    if (state.selection.empty) return false;
+    state.selection.ranges.forEach(range => transaction.addMark(range.$from.pos, range.$to.pos, linkMark));
+    return true;
+}
+
+/**
+ * The extent of the link the selection is in, or null if it is not in one.
+ *
+ * Every inline node in the selection has to carry the same link, and a collapsed selection has to be inside the
+ * link, not at its edge.
+ *
+ * @ignore
+ * @param {EditorState} state
+ * @returns {{from: number, to: number, mark: Mark}|null}
+ */
+function linkRangeAt(state) {
+    const linkType = state.schema.marks.link;
+    const {from, to, $from, $to} = state.selection;
+    if (!$from.sameParent($to)) return null;
+    let target = null;
+    let uniform = true;
+    const check = node => {
+        const mark = linkType.isInSet(node.marks);
+        if (!mark || (target && !target.eq(mark))) uniform = false;
+        else target = mark;
+    };
+    if (state.selection.empty) {
+        // A collapsed selection is in a link when the same link is on both sides of it, including between its text nodes
+        if (!$from.nodeBefore || !$from.nodeAfter) return null;
+        check($from.nodeBefore);
+        check($from.nodeAfter);
+    } else {
+        state.doc.nodesBetween(from, to, node => {
+            if (!node.isInline) return true;
+            check(node);
+            return false;
+        });
+    }    if (!uniform || !target) return null;
+    // Widen to the contiguous children carrying the same link
+    const base = $from.start();
+    const spans = [];
+    $from.parent.forEach((child, offset) => {
+        spans.push({start: base + offset, end: base + offset + child.nodeSize, linked: !!target.isInSet(child.marks)});
+    });
+    const collapsed = state.selection.empty;
+    let first = spans.findIndex(span => collapsed ? span.end >= from : span.end > from);
+    let last = spans.findLastIndex(span => collapsed ? span.start <= to : span.start < to);
+    if (first < 0 || last < first) return null;
+    while (first > 0 && spans[first - 1].linked) first--;
+    while (last < spans.length - 1 && spans[last + 1].linked) last++;
+    return {from: spans[first].start, to: spans[last].end, mark: target};
+}
+
 /**
  * Insert a link to the header identified by hTag ('H1'-'H6') and index (its position among
  * headers with that tag), assigning the header a unique id if it doesn't already have one.
@@ -36184,27 +36303,16 @@ function insertInternalLinkCommand(hTag, index) {
         let id = idForHeader(node, state);
         // Same transaction as the mark insertion below, so both land as one undo step.
         let tr = state.tr.setNodeMarkup(pos, undefined, { ...node.attrs, id });
-        const selection = state.selection;
         const linkMark = state.schema.marks.link.create({ href: '#' + id });
-        if (selection.empty) {
+        if (!addLinkMark(tr, state, linkMark)) {
             // In case of an empty selection, insert the textContent of the header and then use
             // that to link-to the header
             const textNode = state.schema.text(node.textContent, [linkMark]);
             tr.replaceSelectionWith(textNode, false);
-            dispatch(tr);
-            stateChanged(view);
-            return true;
-        } else {
-            // Capture toggleMark's steps rather than let it dispatch, then replay them onto
-            // `tr` (setNodeMarkup doesn't shift positions, so they apply cleanly).
-            let captured = null;
-            toggleMark(linkMark.type, linkMark.attrs)(state, t => { captured = t; });
-            if (!captured) return false;
-            for (const step of captured.steps) tr.step(step);
-            dispatch(tr);
-            stateChanged(view);
-            return true;
         }
+        dispatch(tr);
+        stateChanged(view);
+        return true;
     };
     return commandAdapter;
 }
@@ -36228,12 +36336,10 @@ function idForInternalLinkCommand(hTag, index) {
 }
 
 /**
- * Return a unique identifier for the heading `node` by lowercasing its trimmed textContent
- * and replacing blanks with `-`, then appending a number until its unique if required.
- * If the heading `node` has an id, then just return it.
- * 
- * Since the `node.textContent` can be arbitrarily large, we limit the id to 40 characters 
- * just to avoid unwieldy IDs.
+ * Return a unique identifier for the heading `node`: its slug as `headingSlugs` numbers it by its
+ * position among all the headings in `state.doc`, as GitHub does. If another node already uses that
+ * id, append `-1`, `-2`, and so on until it is unique. If the heading `node` has an id, then just
+ * return it.
  * 
  * @ignore
  * @param {Node}        node    A ProseMirror Node that is of heading type
@@ -36242,15 +36348,20 @@ function idForInternalLinkCommand(hTag, index) {
  */
 function idForHeader(node, state) {
     if (node.attrs.id) return node.attrs.id
-    let id = node.textContent.toLowerCase().substring(0, 40);
-    id = id.replaceAll(' ', '-');
-    let {node: idNode} = nodeWithId(id, state);
+    const texts = [];
+    let position = -1;
+    state.doc.descendants(child => {
+        if (child.type !== state.schema.nodes.heading) return true
+        if (child === node) position = texts.length;
+        texts.push(child.textContent);
+        return false
+    });
+    const base = (position >= 0) ? headingSlugs(texts)[position] : headingSlug(node.textContent);
+    let id = base;
     let index = 0;
-    while (idNode) {
+    while (nodeWithId(id, state).node) {
         index++;
-        id = id + index.toString();
-        let {node} = nodeWithId(id, state);
-        idNode = node;
+        id = base + '-' + index.toString();
     }
     return id
 }
@@ -36289,20 +36400,25 @@ function headerMatching(hTag, index, state) {
 
 /**
  * Return a JSON-stringified array describing every non-empty header in the document, in document
- * order within each level. Each entry is `{hTag, index, text, id}`, where `hTag` and `index` identify
+ * order within each level. Each entry is `{hTag, index, text, id, slug}`, where `hTag` and `index` identify
  * the header the same way `insertInternalLink(hTag, index)` and `idForInternalLinkCommand(hTag, index)`
- * do, and `id` is the header's current id attribute (null if it hasn't been assigned one yet).
+ * do, `id` is the header's current id attribute (null if it hasn't been assigned one yet), and `slug`
+ * is the id a link to the header would give it, numbered by position among all the headers.
  *
  * An empty header is omitted -- it can't form a usable id, so there's nothing to link to -- but
  * `index` still reflects its true position among ALL headers at that level (empty ones included),
  * matching what `headerMatching` expects; it's only the reported entries that skip empty headers,
  * not the numbering.
  *
- * @returns {string}    JSON-stringified array of `{hTag, index, text, id}`
+ * @returns {string}    JSON-stringified array of `{hTag, index, text, id, slug}`
  */
 function getHeaders() {
     const view = activeView();
     const headersByLevel = headers(view.state);
+    // Slugs are numbered by position among all the headings in the document
+    const slugs = new Map();
+    const all = Object.values(headersByLevel).flat().sort((a, b) => a.pos - b.pos);
+    headingSlugs(all.map(h => h.node.textContent)).forEach((slug, i) => slugs.set(all[i].node, slug));
     let result = [];
     for (let level = 1; level < 7; level++) {
         let hNodes = headersByLevel[level];
@@ -36310,7 +36426,7 @@ function getHeaders() {
             hNodes.forEach((h, index) => {
                 const text = h.node.textContent;
                 if (text.trim().length === 0) return
-                result.push({hTag: 'H' + level.toString(), index: index, text: text, id: h.node.attrs.id ?? null});
+                result.push({hTag: 'H' + level.toString(), index: index, text: text, id: h.node.attrs.id ?? null, slug: slugs.get(h.node)});
             });
         }
     }
@@ -36384,29 +36500,14 @@ function deleteLinkCommand() {
 }
 
 function selectFullLink(view) {
-    const linkType = view.state.schema.marks.link;
-    const selection = view.state.selection;
-
-    // Make sure the selection is in a single text node with a linkType Mark
-    const nodePos = [];
-    view.state.doc.nodesBetween(selection.from, selection.to, (node, pos) => {
-        if (node.isText) {
-            nodePos.push({node: node, pos: pos});
-            return false;
-        }        return true;
-    });
-    if (nodePos.length !== 1) return;
-    const selectedNode = nodePos[0].node;
-    const selectedPos = nodePos[0].pos;
-    const linkMarks = selectedNode && selectedNode.marks.filter(mark => mark.type === linkType);
-    if (linkMarks.length !== 1) return;
-
-    // Select the entire text of selectedNode
-    const anchor = selectedPos;
-    const head = anchor + selectedNode.nodeSize;
-    const linkSelection = TextSelection.create(view.state.doc, anchor, head);
-    const transaction = view.state.tr.setSelection(linkSelection);
-    view.dispatch(transaction);
+    // A node selection (a linked image, for example) is left alone
+    if (view.state.selection instanceof NodeSelection) return;
+    const range = linkRangeAt(view.state);
+    if (!range) return;
+    const {from, to} = view.state.selection;
+    if (range.from === from && range.to === to) return;
+    const linkSelection = TextSelection.create(view.state.doc, range.from, range.to);
+    view.dispatch(view.state.tr.setSelection(linkSelection));
 }
 
 /********************************************************************************
@@ -43333,7 +43434,13 @@ class Searcher {
      * Create a new SearchQuery and highlight all the matches in the document.
      */
     _buildQuery() {
-        this._searchQuery = new SearchQuery({search: this._searchString, caseSensitive: this._caseSensitive});
+        // The search string has straight quotes and apostrophes. Match them against the straight and
+        // curly forms in the document text, without changing the document.
+        const pattern = this._searchString
+            .replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+            .replaceAll("'", "['‘’]")
+            .replaceAll('"', '["“”]');
+        this._searchQuery = new SearchQuery({search: pattern, regexp: true, caseSensitive: this._caseSensitive});
     }
 
 }
@@ -43589,6 +43696,8 @@ const MU = {
     getLocalImages,
     getHTML,
     getHeaders,
+    headingSlug,
+    headingSlugs,
     getHeight,
     getImageAttributes,
     getLinkAttributes,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markupeditor",
-  "version": "0.9.52",
+  "version": "0.9.54",
   "description": "A web component and API for WYSIWYG HTML editing.",
   "keywords": [
     "wysiwyg",