modern-text 1.9.0 → 1.9.1

package/dist/web-components/index.mjs

@@ -1,6 +1,6 @@
 import { diffChars } from 'diff';
 import { isCRLF, textContentToString, normalizeCRLF, normalizeTextContent, property } from 'modern-idoc';
-import { T as Text } from '../shared/modern-text.y0a7DPYV.mjs';
+import { T as Text } from '../shared/modern-text.B2pcGP3X.mjs';
 import 'modern-path2d';
 import 'modern-font';
 
@@ -49,51 +49,147 @@ function parseHTML(html) {
 }
 const SUPPORTS_POINTER_EVENTS = "PointerEvent" in globalThis;
 class TextEditor extends HTMLElement {
-  prevSelection = [0, 0];
-  composition = false;
+  _prevSelection = [0, 0];
+  _composition = false;
+  get composition() {
+    return this._composition;
+  }
+  static _defined = false;
   static register() {
-    customElements.define("text-editor", this);
+    if (!this._defined) {
+      this._defined = true;
+      customElements.define("text-editor", this);
+    }
   }
   _text = new Text();
   get text() {
     return this._text;
   }
-  set text(value) {
-    this._text = value;
-    this._text.on("update", () => this._update());
-    this.setTextInput(this.getPlaintext());
-    this.text.update();
-    this._update();
+  set text(newText) {
+    if (newText) {
+      this._text?.off("update", this._update);
+      newText.on("update", this._update);
+      this._text = newText;
+      this._setTextInput(this.getPlaintext());
+      this.text.update();
+      this._update();
+    }
   }
   _oldText = "";
-  $container;
-  $selection;
-  $textarea;
-  $cursor;
-  onUpdateProperty(key, _newValue, _oldValue, _declaration) {
+  _container;
+  _selection;
+  _textarea;
+  _cursor;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({ mode: "open" });
+    shadowRoot.appendChild(
+      parseHTML(`
+  <style>
+  :host {
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+
+  .container {
+    position: absolute;
+  }
+
+  textarea {
+    position: absolute;
+    opacity: 0;
+    caret-color: transparent;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    white-space: pre;
+    resize: none;
+  }
+
+  .selection {
+    position: absolute;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+  }
+
+  .selection > * {
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: rgba(var(--color, 0, 0, 0), 0.4);
+  }
+
+  .cursor {
+    position: absolute;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+  }
+
+  .cursor.blink {
+    animation: cursor-blink 1s steps(2, start) infinite;
+  }
+
+  @keyframes cursor-blink {
+    100% {
+      visibility: hidden;
+    }
+  }
+  </style>
+
+  <div class="container">
+    <textarea></textarea>
+    <div class="selection"></div>
+    <div class="cursor blink"></div>
+  </div>
+`)
+    );
+    this._container = shadowRoot.querySelector(".container");
+    this._selection = shadowRoot.querySelector(".selection");
+    this._textarea = shadowRoot.querySelector("textarea");
+    this._cursor = shadowRoot.querySelector(".cursor");
+    this._bindEventListeners();
+    this._update = this._update.bind(this);
+  }
+  connectedCallback() {
+    this._emit("init");
+  }
+  set(text) {
+    this.text = text;
+  }
+  onUpdateProperty(key, _newValue, _oldValue) {
     switch (key) {
       case "selection":
-        this.selectionMinMax = {
+        this._selectionMinMax = {
           min: Math.min(...this.selection),
           max: Math.max(...this.selection)
         };
         break;
-      case "selectionMinMax":
+      case "_selectionMinMax":
       case "chars":
-        this.updateSelectedChars();
-        this.updateCursorPosition();
+        this._updateSelectedChars();
+        this._updateCursorPosition();
         break;
-      case "showCursor":
-      case "cursorPosition":
-        this.renderCursor();
+      case "_showCursor":
+      case "_cursorPosition":
+        this._renderCursor();
         break;
-      case "selectedChars":
-        this.renderCursor();
-        this.renderSelectRange();
+      case "_selectedChars":
+        this._renderCursor();
+        this._renderSelectRange();
+        break;
+      case "left":
+      case "top":
+        this._update();
         break;
     }
   }
-  updateChars() {
+  _updateChars() {
     const paragraphs = [];
     this.text.paragraphs.forEach((p, paragraphIndex) => {
       p.fragments.forEach((f, fragmentIndex) => {
@@ -163,21 +259,21 @@ class TextEditor extends HTMLElement {
     if (chars[chars.length - 1]) {
       chars[chars.length - 1].isLast = true;
     }
-    this.chars = chars;
+    this._chars = chars;
   }
-  updateSelectedChars() {
-    this.selectedChars = this.chars.filter((_char, index) => {
-      return index >= this.selectionMinMax.min && index < this.selectionMinMax.max;
+  _updateSelectedChars() {
+    this._selectedChars = this._chars.filter((_char, index) => {
+      return index >= this._selectionMinMax.min && index < this._selectionMinMax.max;
     });
-    this.emit("selected", [
-      this.chars[this.selectionMinMax.min],
-      this.chars[this.selectionMinMax.max]
+    this._emit("selected", [
+      this._chars[this._selectionMinMax.min],
+      this._chars[this._selectionMinMax.max]
     ]);
   }
-  updateCursorPosition() {
+  _updateCursorPosition() {
     let left = 0;
     let top = 0;
-    const char = this.chars[this.selectionMinMax.min];
+    const char = this._chars[this._selectionMinMax.min];
     if (char?.isLastSelected) {
       if (this.text.isVertical) {
         top += char?.height ?? 0;
@@ -187,7 +283,7 @@ class TextEditor extends HTMLElement {
     }
     left += char?.left ?? 0;
     top += char?.top ?? 0;
-    this.cursorPosition = {
+    this._cursorPosition = {
       color: char?.color,
       left,
       top,
@@ -195,88 +291,14 @@ class TextEditor extends HTMLElement {
       width: char?.width ?? 0
     };
   }
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow({ mode: "open" });
-    shadowRoot.appendChild(
-      parseHTML(`
-  <style>
-  :host {
-    position: absolute;
-    width: 0;
-    height: 0;
-  }
-
-  .container {
-    position: absolute;
-  }
-
-  textarea {
-    position: absolute;
-    opacity: 0;
-    caret-color: transparent;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    border: 0;
-    white-space: pre;
-  }
-
-  .selection {
-    position: absolute;
-    left: 0;
-    top: 0;
-    pointer-events: none;
-  }
-
-  .selection > * {
-    position: absolute;
-    left: 0;
-    top: 0;
-    background: rgba(var(--color, 0, 0, 0), 0.4);
-  }
-
-  .cursor {
-    position: absolute;
-    left: 0;
-    top: 0;
-    pointer-events: none;
-  }
-
-  .cursor.blink {
-    animation: cursor-blink 1s steps(2, start) infinite;
-  }
-
-  @keyframes cursor-blink {
-    100% {
-      display: none;
-    }
-  }
-  </style>
-
-  <div class="container">
-    <textarea autofocus></textarea>
-    <div class="selection"></div>
-    <div class="cursor blink"></div>
-  </div>
-`)
-    );
-    this.$container = shadowRoot.querySelector(".container");
-    this.$selection = shadowRoot.querySelector(".selection");
-    this.$textarea = shadowRoot.querySelector("textarea");
-    this.$cursor = shadowRoot.querySelector(".cursor");
-    this.bindEventListeners();
-  }
   getPlaintext() {
     return textContentToString(
-      this.getNewContent(
+      this._getNewContent(
         this.text.content
       )
     );
   }
-  getNewContent(content, newString = textContentToString(content), oldString = newString) {
+  _getNewContent(content, newString = textContentToString(content), oldString = newString) {
     newString = normalizeCRLF(newString);
     newString = newString.replace(emojiRE, (emoji) => {
       if (Array.from(emoji).length > 1) {
@@ -344,41 +366,41 @@ class TextEditor extends HTMLElement {
     });
     return newContents;
   }
-  setTextInput(newText) {
-    this.$textarea.value = newText;
+  _setTextInput(newText) {
+    this._textarea.value = newText;
     this._oldText = newText;
   }
-  onInput() {
-    const newText = this.$textarea.value;
-    this.text.content = this.getNewContent(
+  _onInput() {
+    const newText = this._textarea.value;
+    this.text.content = this._getNewContent(
       this.text.content,
       newText,
       this._oldText
     );
     this._oldText = newText;
     this.text.update();
-    this.emit("update");
+    this._emit("update");
   }
   _timer;
-  onKeydown(e) {
+  _onKeydown(e) {
     e.stopPropagation();
     switch (e.key) {
       case "Escape":
-        return this.$textarea.blur();
+        return this._textarea.blur();
     }
-    this.updateSelectionByDom();
-    setTimeout(() => this.updateSelectionByDom(), 0);
-    setTimeout(() => this.updateSelectionByDom(), 100);
+    this._updateSelectionByDom();
+    setTimeout(() => this._updateSelectionByDom(), 0);
+    setTimeout(() => this._updateSelectionByDom(), 100);
   }
-  onFocus() {
-    this.showCursor = true;
+  _onFocus() {
+    this._showCursor = true;
   }
-  onBlur() {
-    this.showCursor = false;
+  _onBlur() {
+    this._showCursor = false;
   }
-  findNearest(options) {
+  _findNearest(options) {
     const { x, y, xWeight = 1, yWeight = 1 } = options;
-    const char = this.chars.reduce(
+    const char = this._chars.reduce(
       (prev, current, index) => {
         const diff = Math.abs(current.left + current.width / 2 - x) * xWeight + Math.abs(current.top + current.height / 2 - y) * yWeight;
         if (diff < prev.diff) {
@@ -405,120 +427,133 @@ class TextEditor extends HTMLElement {
     }
     return -1;
   }
-  updateSelectionByDom() {
-    if (this.composition) {
-      this.selection = this.prevSelection;
+  _updateSelectionByDom() {
+    if (this._composition) {
+      this.selection = this._prevSelection;
     } else {
       let count = 0;
       const _selection = [];
-      this.chars.forEach((char, index) => {
-        if (count <= this.$textarea.selectionStart) {
+      this._chars.forEach((char, index) => {
+        if (count <= this._textarea.selectionStart) {
           _selection[0] = index;
-        } else if (count <= this.$textarea.selectionEnd) {
+        } else if (count <= this._textarea.selectionEnd) {
           _selection[1] = index;
         }
         count += char.content.length;
       });
       const oldSelection = this.selection;
       this.selection = _selection;
-      this.prevSelection = oldSelection;
+      this._prevSelection = oldSelection;
     }
   }
-  updateDomSelection() {
+  _updateDomSelection() {
     let start = 0;
     let end = 0;
-    this.chars.forEach((char, index) => {
-      if (index < this.selectionMinMax.min) {
+    this._chars.forEach((char, index) => {
+      if (index < this._selectionMinMax.min) {
         start += char.content.length;
         end = start;
-      } else if (index < this.selectionMinMax.max) {
+      } else if (index < this._selectionMinMax.max) {
         end += char.content.length;
       }
     });
-    this.$textarea.selectionStart = start;
-    this.$textarea.selectionEnd = end;
+    this._textarea.selectionStart = start;
+    this._textarea.selectionEnd = end;
   }
   _update() {
-    this.updateChars();
+    this._updateChars();
     const host = this.shadowRoot.host;
+    host.style.left = `${this.left}px`;
+    host.style.top = `${this.top}px`;
     host.style.width = `${this.text.boundingBox.width}px`;
     host.style.height = `${this.text.boundingBox.height}px`;
-    this.$container.style.left = `${this.text.glyphBox.left}px`;
-    this.$container.style.top = `${this.text.glyphBox.top}px`;
-    this.$container.style.width = `${this.text.glyphBox.width}px`;
-    this.$container.style.height = `${this.text.glyphBox.height}px`;
-    this.$textarea.style.fontSize = `${this.text.computedStyle.fontSize}px`;
-    this.$textarea.style.writingMode = this.text.computedStyle.writingMode;
-    this.renderSelectRange();
-    this.renderCursor();
-  }
-  bindEventListeners() {
-    this.$textarea.addEventListener("compositionstart", () => this.composition = true);
-    this.$textarea.addEventListener("compositionend", () => this.composition = false);
-    this.$textarea.addEventListener("keydown", this.onKeydown.bind(this));
-    this.$textarea.addEventListener("input", this.onInput.bind(this));
-    this.$textarea.addEventListener("focus", this.onFocus.bind(this));
-    this.$textarea.addEventListener("blur", this.onBlur.bind(this));
+    this._container.style.left = `${this.text.glyphBox.left}px`;
+    this._container.style.top = `${this.text.glyphBox.top}px`;
+    this._container.style.width = `${this.text.glyphBox.width}px`;
+    this._container.style.height = `${this.text.glyphBox.height}px`;
+    this._textarea.style.fontSize = `${this.text.computedStyle.fontSize}px`;
+    this._textarea.style.writingMode = this.text.computedStyle.writingMode;
+    this._renderSelectRange();
+    this._renderCursor();
+  }
+  _bindEventListeners() {
+    this._textarea.addEventListener("compositionstart", () => this._composition = true);
+    this._textarea.addEventListener("compositionend", () => this._composition = false);
+    this._textarea.addEventListener("keydown", this._onKeydown.bind(this));
+    this._textarea.addEventListener("input", this._onInput.bind(this));
+    this._textarea.addEventListener("focus", this._onFocus.bind(this));
+    this._textarea.addEventListener("blur", this._onBlur.bind(this));
     if (SUPPORTS_POINTER_EVENTS) {
-      this.$textarea.addEventListener("pointerdown", this.start.bind(this));
+      this._textarea.addEventListener("pointerdown", this.pointerdown.bind(this));
     } else {
-      this.$textarea.addEventListener("mousedown", this.start.bind(this));
+      this._textarea.addEventListener("mousedown", this.pointerdown.bind(this));
     }
     ["keyup", "mouseup", "input", "paste", "cut"].forEach((key) => {
-      this.$textarea.addEventListener(key, () => {
-        this.updateSelectionByDom();
+      this._textarea.addEventListener(key, () => {
+        this._updateSelectionByDom();
       });
     });
   }
-  start(e) {
+  pointerdown(e) {
+    if (e && e.button !== 0) {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
     const host = this.shadowRoot.host;
     const rect = host.getBoundingClientRect();
     const originalWidth = host.offsetWidth;
     const originalHeight = host.offsetHeight;
     const scaleX = rect.width / originalWidth;
     const scaleY = rect.height / originalHeight;
-    const offsetX = (e.clientX - rect.left) / scaleX;
-    const offsetY = (e.clientY - rect.top) / scaleY;
-    if (!(offsetX > this.text.glyphBox.left && offsetX < this.text.glyphBox.left + this.text.glyphBox.width && offsetY > this.text.glyphBox.top && offsetY < this.text.glyphBox.top + this.text.glyphBox.height)) {
-      return false;
+    let offsetX = 0;
+    let offsetY = 0;
+    if (e) {
+      offsetX = (e.clientX - rect.left) / scaleX;
+      offsetY = (e.clientY - rect.top) / scaleY;
+      if (!(offsetX > this.text.glyphBox.left && offsetX < this.text.glyphBox.left + this.text.glyphBox.width && offsetY > this.text.glyphBox.top && offsetY < this.text.glyphBox.top + this.text.glyphBox.height)) {
+        return false;
+      }
+      e.preventDefault();
+      e.stopPropagation();
     }
-    e.preventDefault();
-    e.stopPropagation();
-    const index = this.findNearest({ x: offsetX, y: offsetY });
+    const index = this._findNearest({ x: offsetX, y: offsetY });
     this.selection = [index, index];
-    this.updateDomSelection();
-    const onMove = (e2) => {
-      const offsetX2 = (e2.clientX - rect.left) / scaleX;
-      const offsetY2 = (e2.clientY - rect.top) / scaleY;
-      this.selection = [
-        this.selection[0],
-        this.findNearest({ x: offsetX2, y: offsetY2 })
-      ];
-      this.updateDomSelection();
-    };
-    const onUp = () => {
+    this._updateDomSelection();
+    if (e && !["mouseup", "pointerup"].includes(e.type)) {
+      const onMove = (e2) => {
+        const offsetX2 = (e2.clientX - rect.left) / scaleX;
+        const offsetY2 = (e2.clientY - rect.top) / scaleY;
+        this.selection = [
+          this.selection[0],
+          this._findNearest({ x: offsetX2, y: offsetY2 })
+        ];
+        this._updateDomSelection();
+      };
+      const onUp = () => {
+        if (SUPPORTS_POINTER_EVENTS) {
+          document.removeEventListener("pointermove", onMove);
+          document.removeEventListener("pointerup", onUp);
+        } else {
+          document.removeEventListener("mousemove", onMove);
+          document.removeEventListener("mouseup", onUp);
+        }
+      };
       if (SUPPORTS_POINTER_EVENTS) {
-        document.removeEventListener("pointermove", onMove);
-        document.removeEventListener("pointerup", onUp);
+        document.addEventListener("pointermove", onMove);
+        document.addEventListener("pointerup", onUp);
       } else {
-        document.removeEventListener("mousemove", onMove);
-        document.removeEventListener("mouseup", onUp);
+        document.addEventListener("mousemove", onMove);
+        document.addEventListener("mouseup", onUp);
       }
-    };
-    if (SUPPORTS_POINTER_EVENTS) {
-      document.addEventListener("pointermove", onMove);
-      document.addEventListener("pointerup", onUp);
-    } else {
-      document.addEventListener("mousemove", onMove);
-      document.addEventListener("mouseup", onUp);
     }
-    this.$textarea.focus();
+    this._textarea.focus();
     return true;
   }
   attributeChangedCallback(name, _oldValue, newValue) {
     this[name] = newValue;
   }
-  emit(type, detail) {
+  _emit(type, detail) {
     return this.dispatchEvent(
       new CustomEvent(type, {
         bubbles: true,
@@ -528,11 +563,11 @@ class TextEditor extends HTMLElement {
       })
     );
   }
-  renderSelectRange() {
-    if (this.selection[0] !== this.prevSelection[0] || this.selection[1] !== this.prevSelection[1]) {
+  _renderSelectRange() {
+    if (this.selection[0] !== this._prevSelection[0] || this.selection[1] !== this._prevSelection[1]) {
       const isVertical = this.text.isVertical;
       const boxesGroupsMap = {};
-      this.selectedChars.forEach((char) => {
+      this._selectedChars.forEach((char) => {
         if (char.isLastSelected) {
           return;
         }
@@ -548,18 +583,19 @@ class TextEditor extends HTMLElement {
         });
       });
       const boxesGroups = Object.values(boxesGroupsMap);
-      const sourceLen = this.$selection.children.length;
+      const sourceLen = this._selection.children.length;
       const targetLen = boxesGroups.length;
       const len = Math.max(sourceLen, targetLen);
+      const deleted = [];
       for (let i = 0; i < len; i++) {
-        let element = this.$selection.children.item(i);
+        let element = this._selection.children.item(i);
         const boxes = boxesGroups[i];
         if (!boxes) {
-          element?.remove();
+          deleted.push(element);
           continue;
         } else if (!element) {
           element = document.createElement("div");
-          this.$selection.append(element);
+          this._selection.append(element);
         }
         const min = {
           x: Math.min(...boxes.map((v) => v.x)),
@@ -573,46 +609,51 @@ class TextEditor extends HTMLElement {
         element.style.height = `${max.y - min.y}px`;
         element.style.transform = `translate(${min.x}px, ${min.y}px)`;
       }
+      deleted.forEach((el) => el?.remove());
     }
   }
-  renderCursor() {
-    if (this.showCursor && this.cursorPosition && (this.selection[0] !== this.prevSelection[0] || this.selection[1] !== this.prevSelection[1])) {
-      if (this.selectedChars.length === 0) {
-        this.$cursor.style.visibility = "visible";
-        const cursorPosition = this.cursorPosition;
-        this.$cursor.style.backgroundColor = cursorPosition.color ?? "rgba(var(--color)";
-        this.$cursor.style.left = `${cursorPosition.left - this.text.glyphBox.left}px`;
-        this.$cursor.style.top = `${cursorPosition.top - this.text.glyphBox.top}px`;
-        this.$cursor.style.height = this.text.isVertical ? "1px" : `${cursorPosition.height}px`;
-        this.$cursor.style.width = this.text.isVertical ? `${cursorPosition.width}px` : "1px";
-      } else {
-        this.$cursor.style.visibility = "hidden";
-      }
-      this.$cursor.classList.remove("blink");
-      if (this._timer) {
-        clearTimeout(this._timer);
-      }
-      this._timer = setTimeout(() => this.$cursor.classList.add("blink"), 500);
+  _renderCursor() {
+    if (this._showCursor && this._cursorPosition && this._selectedChars.length === 0) {
+      const _cursorPosition = this._cursorPosition;
+      this._cursor.style.display = "block";
+      this._cursor.style.backgroundColor = _cursorPosition.color ?? "rgba(var(--color))";
+      this._cursor.style.left = `${_cursorPosition.left - this.text.glyphBox.left}px`;
+      this._cursor.style.top = `${_cursorPosition.top - this.text.glyphBox.top}px`;
+      this._cursor.style.height = this.text.isVertical ? "1px" : `${_cursorPosition.height}px`;
+      this._cursor.style.width = this.text.isVertical ? `${_cursorPosition.width}px` : "1px";
+    } else {
+      this._cursor.style.display = "none";
+    }
+    this._cursor.classList.remove("blink");
+    if (this._timer) {
+      clearTimeout(this._timer);
     }
+    this._timer = setTimeout(() => this._cursor.classList.add("blink"), 500);
   }
 }
+__decorateClass([
+  property({ fallback: 0 })
+], TextEditor.prototype, "left");
+__decorateClass([
+  property({ fallback: 0 })
+], TextEditor.prototype, "top");
 __decorateClass([
   property({ fallback: () => [0, 0] })
 ], TextEditor.prototype, "selection");
 __decorateClass([
-  property({ fallback: () => ({ min: 0, max: 0 }) })
-], TextEditor.prototype, "selectionMinMax");
+  property({ internal: true, fallback: () => ({ min: 0, max: 0 }) })
+], TextEditor.prototype, "_selectionMinMax");
 __decorateClass([
-  property({ fallback: () => [] })
-], TextEditor.prototype, "chars");
+  property({ internal: true, fallback: () => [] })
+], TextEditor.prototype, "_chars");
 __decorateClass([
-  property({ fallback: () => [] })
-], TextEditor.prototype, "selectedChars");
+  property({ internal: true, fallback: () => [] })
+], TextEditor.prototype, "_selectedChars");
 __decorateClass([
-  property()
-], TextEditor.prototype, "cursorPosition");
+  property({ internal: true })
+], TextEditor.prototype, "_cursorPosition");
 __decorateClass([
-  property({ fallback: false })
-], TextEditor.prototype, "showCursor");
+  property({ internal: true, fallback: false })
+], TextEditor.prototype, "_showCursor");
 
 export { TextEditor };