tosijs-styled-editor 0.5.0 → 0.5.2

package/dist/module.js

@@ -205,10 +205,10 @@ function caretGeometryAt(marker, root) {
     return null;
   };
   const caretAt = (node, offset) => {
-    const range2 = document.createRange();
-    range2.setStart(node, offset);
-    range2.collapse(true);
-    const rect = range2.getBoundingClientRect();
+    const range = document.createRange();
+    range.setStart(node, offset);
+    range.collapse(true);
+    const rect = range.getBoundingClientRect();
     return rect.height ? { left: rect.left, top: rect.top, height: rect.height } : null;
   };
   const after = nextText(nextLeafNode(marker, root));
@@ -314,9 +314,9 @@ function wordBoundsAt(text, offset) {
   if (Segmenter) {
     const segmenter = new Segmenter(undefined, { granularity: "word" });
     for (const piece of segmenter.segment(text)) {
-      const end2 = piece.index + piece.segment.length;
-      if (offset >= piece.index && offset < end2) {
-        return { start: piece.index, end: end2 };
+      const end = piece.index + piece.segment.length;
+      if (offset >= piece.index && offset < end) {
+        return { start: piece.index, end };
       }
     }
     return { start: offset, end: offset };
@@ -1724,12 +1724,16 @@ function defineChanges() {
   if (!customElements.get(DEL_TAG))
     customElements.define(DEL_TAG, TosiDel);
 }
+function safeAttributeValue(value) {
+  return value.replace(/[<>]/g, "");
+}
 function mark(kind, text, author) {
   const el = document.createElement(kind === "insert" ? INS_TAG : DEL_TAG);
   el.setAttribute("data-change", changeId());
-  el.setAttribute("data-author", author.id);
-  if (author.name)
-    el.setAttribute("data-author-name", author.name);
+  el.setAttribute("data-author", safeAttributeValue(author.id));
+  if (author.name) {
+    el.setAttribute("data-author-name", safeAttributeValue(author.name));
+  }
   el.setAttribute("data-time", new Date().toISOString());
   el.textContent = text;
   return el;
@@ -1773,19 +1777,19 @@ function diffWords(before, after) {
   const a = tokenize(before);
   const b = tokenize(after);
   if (a.length > MAX_DIFF_TOKENS || b.length > MAX_DIFF_TOKENS) {
-    const ops2 = [];
+    const ops = [];
     if (before)
-      ops2.push({ op: "delete", text: before });
+      ops.push({ op: "delete", text: before });
     if (after)
-      ops2.push({ op: "insert", text: after });
-    return ops2;
+      ops.push({ op: "insert", text: after });
+    return ops;
   }
   const n = a.length;
   const m = b.length;
   const lcs = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
-  for (let i2 = n - 1;i2 >= 0; i2--) {
-    for (let j2 = m - 1;j2 >= 0; j2--) {
-      lcs[i2][j2] = a[i2] === b[j2] ? lcs[i2 + 1][j2 + 1] + 1 : Math.max(lcs[i2 + 1][j2], lcs[i2][j2 + 1]);
+  for (let i = n - 1;i >= 0; i--) {
+    for (let j = m - 1;j >= 0; j--) {
+      lcs[i][j] = a[i] === b[j] ? lcs[i + 1][j + 1] + 1 : Math.max(lcs[i + 1][j], lcs[i][j + 1]);
     }
   }
   const ops = [];
@@ -1919,10 +1923,10 @@ function markHits(hits) {
     const range = document.createRange();
     range.setStart(node, start);
     range.setEnd(node, Math.min(end, node.data.length));
-    const mark2 = document.createElement(MISSPELLING_TAG);
+    const mark = document.createElement(MISSPELLING_TAG);
     try {
-      range.surroundContents(mark2);
-      marked.push(mark2);
+      range.surroundContents(mark);
+      marked.push(mark);
     } catch {}
   }
   return marked.reverse();
@@ -2737,9 +2741,9 @@ class TosijsStyledEditor extends WebComponent {
     defineChanges();
     const ins = document.createElement(INS_TAG);
     ins.setAttribute("data-change", changeId());
-    ins.setAttribute("data-author", this.changeAuthor.id);
+    ins.setAttribute("data-author", safeAttributeValue(this.changeAuthor.id));
     if (this.changeAuthor.name) {
-      ins.setAttribute("data-author-name", this.changeAuthor.name);
+      ins.setAttribute("data-author-name", safeAttributeValue(this.changeAuthor.name));
     }
     ins.setAttribute("data-session", this.sessionId);
     ins.setAttribute("data-time", new Date().toISOString());
@@ -2783,9 +2787,9 @@ class TosijsStyledEditor extends WebComponent {
       }
       const del = document.createElement(DEL_TAG);
       del.setAttribute("data-change", id);
-      del.setAttribute("data-author", this.changeAuthor.id);
+      del.setAttribute("data-author", safeAttributeValue(this.changeAuthor.id));
       if (this.changeAuthor.name) {
-        del.setAttribute("data-author-name", this.changeAuthor.name);
+        del.setAttribute("data-author-name", safeAttributeValue(this.changeAuthor.name));
       }
       del.setAttribute("data-session", this.sessionId);
       del.setAttribute("data-time", new Date().toISOString());
@@ -3448,15 +3452,15 @@ class TosijsStyledEditor extends WebComponent {
   }
   groupByLine(spans) {
     const lineMap = new Map;
-    for (const span2 of spans) {
-      const rect = span2.getBoundingClientRect();
+    for (const span of spans) {
+      const rect = span.getBoundingClientRect();
       const top = Math.round(rect.top);
       let line = lineMap.get(top);
       if (!line) {
         line = [];
         lineMap.set(top, line);
       }
-      line.push(span2);
+      line.push(span);
     }
     const sortedKeys = Array.from(lineMap.keys()).sort((a, b) => a - b);
     return sortedKeys.map((k) => lineMap.get(k));
@@ -3464,27 +3468,27 @@ class TosijsStyledEditor extends WebComponent {
   closestCharOnLine(line, targetX) {
     let best = line[0];
     let bestDist = Infinity;
-    for (const span2 of line) {
-      const rect = span2.getBoundingClientRect();
+    for (const span of line) {
+      const rect = span.getBoundingClientRect();
       const mid = rect.left + rect.width / 2;
       const dist = Math.abs(mid - targetX);
       if (dist < bestDist) {
         bestDist = dist;
-        best = span2;
+        best = span;
       }
     }
     return best;
   }
-  positionAtSpanChar(span2, targetX, extendSelection, blockToDespanify) {
-    const rect = span2.getBoundingClientRect();
+  positionAtSpanChar(span, targetX, extendSelection, blockToDespanify) {
+    const rect = span.getBoundingClientRect();
     const start = this.selectable.find(".sel-start");
     const end = this.selectable.find(".sel-end");
     if (!start || !end)
       return;
     if (targetX < rect.left + rect.width / 2) {
-      span2.before(end);
+      span.before(end);
     } else {
-      span2.after(end);
+      span.after(end);
     }
     if (!extendSelection) {
       end.parentNode?.insertBefore(start, end);
@@ -3548,10 +3552,10 @@ class TosijsStyledEditor extends WebComponent {
         this.positionAtSpanChar(targetChar, targetX, extendSelection, siblingLi);
         return;
       }
-      const sibling2 = direction === "up" ? currentBlock.previousElementSibling : currentBlock.nextElementSibling;
-      if (!sibling2)
+      const sibling = direction === "up" ? currentBlock.previousElementSibling : currentBlock.nextElementSibling;
+      if (!sibling)
         return;
-      this.moveVerticalToBlock(sibling2, direction, targetX, extendSelection);
+      this.moveVerticalToBlock(sibling, direction, targetX, extendSelection);
       return;
     }
     const sibling = direction === "up" ? currentBlock.previousElementSibling : currentBlock.nextElementSibling;
@@ -3935,9 +3939,9 @@ class TosijsStyledEditor extends WebComponent {
       el.removeAttribute("draggable");
       el.removeAttribute("data-drag");
     }
-    for (const span2 of Array.from(scratch.querySelectorAll("span"))) {
-      if (span2.attributes.length === 0) {
-        span2.replaceWith(...Array.from(span2.childNodes));
+    for (const span of Array.from(scratch.querySelectorAll("span"))) {
+      if (span.attributes.length === 0) {
+        span.replaceWith(...Array.from(span.childNodes));
       }
     }
     scratch.normalize();
@@ -4261,17 +4265,17 @@ class TosijsStyledEditor extends WebComponent {
     if (!marks.length)
       return;
     const id = changeId();
-    for (const mark2 of Array.from(marks)) {
-      mark2.setAttribute("data-change", id);
-      mark2.setAttribute("data-author", this.changeAuthor.id);
+    for (const mark of Array.from(marks)) {
+      mark.setAttribute("data-change", id);
+      mark.setAttribute("data-author", safeAttributeValue(this.changeAuthor.id));
       if (this.changeAuthor.name) {
-        mark2.setAttribute("data-author-name", this.changeAuthor.name);
+        mark.setAttribute("data-author-name", safeAttributeValue(this.changeAuthor.name));
       } else {
-        mark2.removeAttribute("data-author-name");
+        mark.removeAttribute("data-author-name");
       }
-      mark2.setAttribute("data-session", this.sessionId);
-      mark2.setAttribute("data-time", new Date().toISOString());
-      mark2.removeAttribute("data-block-delete");
+      mark.setAttribute("data-session", this.sessionId);
+      mark.setAttribute("data-time", new Date().toISOString());
+      mark.removeAttribute("data-block-delete");
     }
   }
   handlePaste = (evt) => {
@@ -4730,7 +4734,7 @@ class TosijsStyledEditor extends WebComponent {
 defineFootnote();
 var tosijsStyledEditor = TosijsStyledEditor.elementCreator();
 // src/version.ts
-var version = "0.5.0";
+var version = "0.5.2";
 export {
   DEL_TAG,
   FOOTNOTE_TAG,
@@ -4806,6 +4810,7 @@ export {
   renumberFootnotes,
   rowOfCell,
   runCommand,
+  safeAttributeValue,
   sanitizeInPlace,
   setColumnWidths,
   siblingOrder,

package/dist/tosijs-styled-editor.d.ts

@@ -349,7 +349,7 @@ export declare class TosijsStyledEditor extends WebComponent<EditableParts> {
      * not covered.
      */
     sanitize: (root: Element) => void;
-    content: (HTMLSlotElement | HTMLDivElement)[];
+    content: (HTMLDivElement | HTMLSlotElement)[];
     formResetCallback(): void;
     connectedCallback(): void;
     /** Reflect whether a slot has assigned content onto the host, and keep it current */

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.5.0";
+export declare const version = "0.5.2";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tosijs-styled-editor",
-  "version": "0.5.0",
-  "description": "Rich text editor web component — no contentEditable, no browser selection APIs",
+  "version": "0.5.2",
+  "description": "Rich text editor web component \u2014 no contentEditable, no browser selection APIs",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tonioloewald/tosijs-editor.git"