drab 6.5.1 → 7.0.1

package/dist/editor/index.js

@@ -1,4 +1,4 @@
-import { Base } from "../base/index.js";
+import { Content, Lifecycle, Trigger, } from "../base/index.js";
 /**
  * Enhances the `textarea` element with controls to add content and keyboard shortcuts. Compared to other WYSIWYG editors, the `text` value is just a `string`, so you can easily store it in a database or manipulate it without learning a separate API.
  *
@@ -36,14 +36,14 @@ import { Base } from "../base/index.js";
  * Add a `ctrl`/`meta` keyboard shortcut for the content based on the `data-key` attribute.
  *
  */
-export class Editor extends Base {
+export class Editor extends Lifecycle(Trigger(Content())) {
     /** Array of `keyPair` characters that have been opened. */
     #openChars = [];
     /** Keys that will reset the type over for keyPairs */
     #resetKeys = new Set(["ArrowUp", "ArrowDown", "Delete"]);
     #inputEvent = new Event("input", { bubbles: true, cancelable: true });
     /** Characters that will be automatically closed when typed. */
-    keyPairs = {
+    #keyPairs = {
         "(": ")",
         "{": "}",
         "[": "]",
@@ -56,55 +56,55 @@ export class Editor extends Base {
         // add any `type: "wrap"` values from `contentElements` to `keyPairs`
         for (const element of this.#contentElements) {
             if (element.type === "wrap")
-                this.keyPairs[element.value] = element.value;
+                this.#keyPairs[element.value] = element.value;
         }
     }
     /** The `content`, expects an `HTMLTextAreaElement`. */
-    get textArea() {
-        return this.getContent(HTMLTextAreaElement);
+    get #textArea() {
+        return this.content(HTMLTextAreaElement);
     }
     /** The current `value` of the `textarea`. */
-    get text() {
-        return this.textArea.value;
+    get #text() {
+        return this.#textArea.value;
     }
-    set text(value) {
-        this.textArea.value = value;
-        this.textArea.dispatchEvent(this.#inputEvent);
+    set #text(value) {
+        this.#textArea.value = value;
+        this.#textArea.dispatchEvent(this.#inputEvent);
     }
     /** Array of `ContentElement`s derived from each `trigger`'s data attributes. */
     get #contentElements() {
         const contentElements = [];
-        for (const trigger of this.getTrigger()) {
+        for (const trigger of this.triggers()) {
             contentElements.push(trigger.dataset);
         }
         return contentElements;
     }
     /** Gets the end position of the selection */
     get #selEnd() {
-        return this.textArea.selectionEnd;
+        return this.#textArea.selectionEnd;
     }
     /** Gets the start position of the selection. */
     get #selStart() {
-        return this.textArea.selectionStart;
+        return this.#textArea.selectionStart;
     }
     /**
      * @param str string to insert into `text`
      * @param index where to insert the string
      */
     #insertStr(str, index) {
-        this.text = this.text.slice(0, index) + str + this.text.slice(index);
+        this.#text = this.#text.slice(0, index) + str + this.#text.slice(index);
     }
     /**
      * @param start Starting index for removal.
      * @param end Optional ending index - defaults to start + 1 to remove 1 character.
      */
     #removeStr(start, end = start + 1) {
-        this.text = this.text.slice(0, start) + this.text.slice(end);
+        this.#text = this.#text.slice(0, start) + this.#text.slice(end);
     }
     /** Sets the current cursor selection in the `textarea` */
     #setSelection(start, end = start) {
-        this.textArea.setSelectionRange(start, end);
-        this.textArea.focus();
+        this.#textArea.setSelectionRange(start, end);
+        this.#textArea.focus();
     }
     /**
      * Inserts text and sets selection based on the `ContentElement` selected.
@@ -128,7 +128,7 @@ export class Editor extends Base {
         else if (type === "wrap") {
             const end = this.#selEnd + value.length;
             this.#insertStr(value, start);
-            this.#insertStr(this.keyPairs[value], end);
+            this.#insertStr(this.#keyPairs[value], end);
             this.#setSelection(start + value.length, end);
             // if single char, add to opened
             if (value.length === 1)
@@ -144,7 +144,7 @@ export class Editor extends Base {
             }
             // add the string to the beginning of the line
             lines[lineNumber] = value + lines[lineNumber];
-            this.text = lines.join("\n");
+            this.#text = lines.join("\n");
             this.#setSelection(start + value.length);
         }
     }
@@ -175,7 +175,7 @@ export class Editor extends Base {
      * @returns Metadata describing the current position of the selection.
      */
     #lineMeta() {
-        const lines = this.text.split("\n");
+        const lines = this.#text.split("\n");
         let charCount = 0;
         for (let lineNumber = 0; lineNumber < lines.length; lineNumber++) {
             const line = lines[lineNumber];
@@ -235,21 +235,21 @@ export class Editor extends Base {
             }
         }
         const start = this.#selStart;
-        this.text = lines.join("\n");
+        this.#text = lines.join("\n");
         this.#setSelection(start);
     }
     mount() {
-        this.textArea.addEventListener("keydown", (e) => {
-            const nextChar = this.text[this.#selEnd] ?? "";
+        this.#textArea.addEventListener("keydown", (e) => {
+            const nextChar = this.#text[this.#selEnd] ?? "";
             const notHighlighted = this.#selStart === this.#selEnd;
             if (this.#resetKeys.has(e.key)) {
                 this.#openChars = [];
             }
             else if (e.key === "Backspace") {
-                const prevChar = this.text[this.#selStart - 1];
+                const prevChar = this.#text[this.#selStart - 1];
                 if (prevChar &&
-                    prevChar in this.keyPairs &&
-                    nextChar === this.keyPairs[prevChar]) {
+                    prevChar in this.#keyPairs &&
+                    nextChar === this.#keyPairs[prevChar]) {
                     // remove both characters if the next one is the match of the prev
                     e.preventDefault();
                     const start = this.#selStart - 1;
@@ -268,7 +268,7 @@ export class Editor extends Base {
                 }
             }
             else if (e.key === "Tab") {
-                const blocks = this.text.split("```");
+                const blocks = this.#text.split("```");
                 let totalChars = 0;
                 for (const [i, block] of blocks.entries()) {
                     totalChars += block.length + 3;
@@ -328,7 +328,7 @@ export class Editor extends Base {
                     if (e.key === "x") {
                         const newPos = this.#selStart - columnNumber;
                         lines.splice(lineNumber, 1);
-                        this.text = lines.join("\n");
+                        this.#text = lines.join("\n");
                         this.#setSelection(newPos, newPos);
                     }
                 }
@@ -339,30 +339,30 @@ export class Editor extends Base {
             else if (this.#openChars.length &&
                 notHighlighted &&
                 (nextChar === e.key || e.key === "ArrowRight") &&
-                Object.values(this.keyPairs).includes(nextChar)) {
+                Object.values(this.#keyPairs).includes(nextChar)) {
                 // type over the next character instead of inserting
                 e.preventDefault();
                 this.#setSelection(this.#selStart + 1, this.#selEnd + 1);
                 this.#openChars.pop();
             }
-            else if (e.key in this.keyPairs) {
+            else if (e.key in this.#keyPairs) {
                 e.preventDefault();
                 this.#addContent({ type: "wrap", value: e.key });
             }
         });
         // trims the selection if there is an extra space around it
-        this.textArea.addEventListener("dblclick", () => {
+        this.#textArea.addEventListener("dblclick", () => {
             if (this.#selStart !== this.#selEnd) {
-                if (this.text[this.#selStart] === " ") {
+                if (this.#text[this.#selStart] === " ") {
                     this.#setSelection(this.#selStart + 1, this.#selEnd);
                 }
-                if (this.text[this.#selEnd - 1] === " ") {
+                if (this.#text[this.#selEnd - 1] === " ") {
                     this.#setSelection(this.#selStart, this.#selEnd - 1);
                 }
             }
         });
         // reset #openChars on click since the cursor has changed position
-        this.textArea.addEventListener("click", () => (this.#openChars = []));
-        this.triggerListener((e) => this.#addContent(e.currentTarget.dataset));
+        this.#textArea.addEventListener("click", () => (this.#openChars = []));
+        this.listener((e) => this.#addContent(e.currentTarget.dataset));
     }
 }