drab 6.1.0 → 6.1.1

package/dist/editor/index.d.ts

@@ -47,7 +47,7 @@ export type ContentElement = {
  */
 export declare class Editor extends Base {
     #private;
-    /** The characters that will be automatically closed when typed. */
+    /** Characters that will be automatically closed when typed. */
     keyPairs: {
         [key: string]: string;
     };

package/dist/editor/index.js

@@ -29,9 +29,11 @@ import { Base } from "../base/index.js";
  * - When text is highlighted and a `wrap` character `keyPair` is typed, the highlighted text will be wrapped with the character instead of removing it. For example, if a word is highlighted and the `"` character is typed, the work will be surrounded by `"`s.
  */
 export class Editor extends Base {
-    /** Array of keyPair characters that have been opened. */
+    /** Array of `keyPair` characters that have been opened. */
     #openChars = [];
-    /** The characters that will be automatically closed when typed. */
+    /** Keys that will reset the type over for keyPairs */
+    #resetKeys = new Set(["ArrowUp", "ArrowDown", "Delete"]);
+    /** Characters that will be automatically closed when typed. */
     keyPairs = {
         "(": ")",
         "{": "}",
@@ -44,9 +46,8 @@ export class Editor extends Base {
         super();
         // add any `type: "wrap"` values from `contentElements` to `keyPairs`
         for (const element of this.#contentElements) {
-            if (element.type === "wrap") {
+            if (element.type === "wrap")
                 this.keyPairs[element.value] = element.value;
-            }
         }
     }
     /** The `content`, expects an `HTMLTextAreaElement`. */
@@ -60,221 +61,150 @@ export class Editor extends Base {
     set text(value) {
         this.textArea.value = value;
     }
-    /** An array of `ContentElement`s derived from each `trigger`'s data attributes. */
+    /** Array of `ContentElement`s derived from each `trigger`'s data attributes. */
     get #contentElements() {
         const contentElements = [];
         for (const trigger of this.getTrigger()) {
-            contentElements.push(this.#getContentElement(trigger));
+            contentElements.push(trigger.dataset);
         }
         return contentElements;
     }
-    /**
-     * - splits the content by "```" and finds the current index
-     * of the selectionStart
-     *
-     * @returns current codeblock (index) of selectionStart
-     */
-    get #currentBlock() {
-        const blocks = this.text.split("```");
-        let totalChars = 0;
-        for (const [i, block] of blocks.entries()) {
-            totalChars += block.length + 3;
-            if (this.#selectionStart < totalChars) {
-                return i;
-            }
-        }
-        return 0;
-    }
     /** Gets the end position of the selection */
-    get #selectionEnd() {
+    get #selEnd() {
         return this.textArea.selectionEnd;
     }
     /** Gets the start position of the selection. */
-    get #selectionStart() {
+    get #selStart() {
         return this.textArea.selectionStart;
     }
-    /** Sets the current cursor selection in the `textarea` */
-    #setSelectionRange(start, end) {
-        this.textArea.setSelectionRange(start, end);
+    /**
+     * @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);
     }
     /**
-     * @param trigger The trigger html element.
-     * @returns The ContentElement based on the `trigger`'s attributes.
+     * @param start Starting index for removal.
+     * @param end Optional ending index - defaults to start + 1 to remove 1 character.
      */
-    #getContentElement(trigger) {
-        const type = trigger.dataset.type;
-        const value = trigger.dataset.value;
-        const key = trigger.dataset.key ?? undefined;
-        return { type, value, key };
+    #removeStr(start, end = start + 1) {
+        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();
     }
     /**
-     * - Inserts text into the `textarea` based on the `display` property of
-     * the `ContentElement`.
+     * Inserts text and sets selection based on the `ContentElement` selected.
      *
-     * @param el the content element
-     * @param selectionStart current start position the selection
-     * @param selectionEnd current end position of the selection
+     * @param content
      */
-    async #insertText(el, selectionStart, selectionEnd) {
-        if (el.type === "inline") {
+    #addContent({ value, type }) {
+        let start = this.#selStart;
+        if (type === "inline") {
             // insert at current position
-            this.text = `${this.text.slice(0, selectionEnd)}${el.value}${this.text.slice(selectionEnd)}`;
+            this.#insertStr(value, start);
+            const match = /[a-z]+/i.exec(value);
+            if (match?.index != null) {
+                start += match.index;
+                this.#setSelection(start, start + match[0].length);
+            }
+            else {
+                this.#setSelection(start + value.length);
+            }
         }
-        else if (el.type === "wrap") {
-            this.text = insertChar(this.text, el.value, selectionStart);
-            this.text = insertChar(this.text, this.keyPairs[el.value], selectionEnd + el.value.length);
+        else if (type === "wrap") {
+            const end = this.#selEnd + value.length;
+            this.#insertStr(value, start);
+            this.#insertStr(this.keyPairs[value], end);
+            this.#setSelection(start + value.length, end);
             // if single char, add to opened
-            if (el.value.length < 2)
-                this.#openChars.push(el.value);
+            if (value.length === 1)
+                this.#openChars.push(value);
         }
-        else if (el.type === "block") {
-            const { lines, lineNumber } = this.#getLineInfo();
-            const firstChar = el.value.at(0);
-            // add the string to the beginning of the line
+        else {
+            // "block"
+            const { lines, lineNumber } = this.#lineMeta();
+            // avoids `# # # `, instead adds trimmed => `### `
+            const firstChar = value[0];
             if (firstChar && lines[lineNumber]?.startsWith(firstChar)) {
-                // avoids `# # # `, instead adds trimmed => `### `
-                lines[lineNumber] = el.value.trim() + lines[lineNumber];
-            }
-            else {
-                lines[lineNumber] = el.value + lines[lineNumber];
+                value = value.trim();
             }
+            // add the string to the beginning of the line
+            lines[lineNumber] = value + lines[lineNumber];
             this.text = lines.join("\n");
+            this.#setSelection(start + value.length);
         }
     }
     /**
-     * - Sets the caret position after text is inserted based on
-     * the length of the text.
-     * - Highlights text if the content contains any letters.
+     * Checks if there is a block element at the beginning of the string.
      *
-     * @param text
-     * @param selectionStart current start position the selection
-     * @param selectionEnd current end position of the selection
+     * @param line
+     * @returns Whatever is found, otherwise null
      */
-    async #setCaretPosition(text, selectionStart, selectionEnd) {
-        let startPos = 0;
-        let endPos = 0;
-        if (/[a-z]/i.test(text)) {
-            // if string contains letters, highlight the first word
-            for (let i = selectionEnd; i < this.text.length; i++) {
-                if (this.text[i]?.match(/[a-z]/i)) {
-                    if (!startPos) {
-                        startPos = i;
-                    }
-                    else {
-                        endPos = i + 1;
-                    }
-                }
-                else if (startPos) {
-                    break;
-                }
-            }
-        }
-        else {
-            // leave the cursor in place
-            startPos = selectionStart + text.length;
-            endPos = selectionEnd + text.length;
+    #startsWithBlock(line) {
+        for (const blockString of this.#contentElements
+            .filter((el) => el.type === "block")
+            .map((el) => el.value)) {
+            if (line.startsWith(blockString.trim()))
+                return blockString;
         }
-        this.#setSelectionRange(startPos, endPos);
-        this.textArea.focus();
-    }
-    /**
-     * - Inserts the text and then sets the caret position
-     * based on the `ContentElement` selected.
-     *
-     * @param el selected content element
-     */
-    async #addContent(el) {
-        const selectionEnd = this.#selectionEnd;
-        const selectionStart = this.#selectionStart;
-        await this.#insertText(el, selectionStart, selectionEnd);
-        this.#setCaretPosition(el.value, selectionStart, selectionEnd);
+        return null;
     }
     /**
-     * - checks if there is a block element or a number
-     * at the beginning of the string
-     *
-     * @param str
-     * @returns what is found, or the empty string
+     * @param line
+     * @returns The number, if the line starts with a number and a period.
      */
-    #getRepeat(str) {
-        if (str) {
-            const blockStrings = [];
-            this.#contentElements.forEach((el) => {
-                if (el.type === "block")
-                    blockStrings.push(el.value);
-            });
-            for (let i = 0; i < blockStrings.length; i++) {
-                const repeatString = blockStrings[i];
-                if (repeatString && str.startsWith(repeatString)) {
-                    return repeatString;
-                }
-            }
-            const repeatNum = startsWithNumberAndPeriod(str);
-            if (repeatNum)
-                return `${repeatNum}. `;
-        }
-        return "";
+    #startsWithNumberAndPeriod(line) {
+        const match = line.match(/^(\d+)\./);
+        return match ? Number(match[1]) : null;
     }
     /**
-     * @returns lines as an array, current line number, current column number
-     *
-     * @example
-     *
-     * ```js
-     * const { lines, lineNumber, columnNumber } = getLineInfo();
-     * ```
+     * @returns Metadata describing the current position of the selection.
      */
-    #getLineInfo() {
+    #lineMeta() {
         const lines = this.text.split("\n");
-        let characterCount = 0;
-        for (let i = 0; i < lines.length; i++) {
-            const lineLength = lines.at(i)?.length ?? 0;
-            // for each line
-            characterCount++; // account for removed "\n" due to .split()
-            characterCount += lineLength;
+        let charCount = 0;
+        for (let lineNumber = 0; lineNumber < lines.length; lineNumber++) {
+            const line = lines[lineNumber];
+            const len = line.length + 1; // account for removed "\n" due to .split()
+            charCount += len;
             // find the line that the cursor is on
-            if (characterCount > this.#selectionEnd) {
+            if (charCount > this.#selEnd) {
                 return {
+                    line,
                     lines,
-                    lineNumber: i,
-                    columnNumber: this.#selectionEnd - (characterCount - lineLength - 1),
+                    lineNumber,
+                    columnNumber: this.#selEnd - (charCount - len),
                 };
             }
         }
-        return { lines, lineNumber: 0, columnNumber: 0 };
+        return { line: lines[0], lines, lineNumber: 0, columnNumber: 0 };
     }
     /**
-     * - Increments/decrements the start of following lines if they are numbers
+     * Increments/decrements the start of following lines if they are numbers.
      *
-     * Prevents this:
+     * @param decrement if following lines should be decremented instead of incremented
      *
-     * ```
-     * 1. presses enter here when two items in list
-     * 2.
-     * 2.
-     * ```
+     * @example
      *
-     * Instead:
+     * ```md
+     * Prevents this, instead fixes the following lines.
      *
-     * ```
-     * 1.
+     * 1. presses enter here when two items in list
      * 2.
-     * 3.
+     * 2. (repeat of 2)
      * ```
-     *
-     * @param currentLineNumber
-     * @param decrement if following lines should be decremented instead of incremented
      */
-    #correctFollowing(currentLineNumber, decrement = false) {
-        const { lines } = this.#getLineInfo();
-        for (let i = currentLineNumber + 1; i < lines.length; i++) {
-            const line = lines[i];
+    #correctFollowing(decrement = false) {
+        let { lines, lineNumber } = this.#lineMeta();
+        for (; ++lineNumber < lines.length;) {
+            let line = lines[lineNumber];
             if (line) {
-                const num = startsWithNumberAndPeriod(line);
-                if (!num) {
-                    break;
-                }
-                else {
+                const num = this.#startsWithNumberAndPeriod(line);
+                if (num) {
                     let newNum;
                     if (decrement) {
                         if (num > 1) {
@@ -287,194 +217,135 @@ export class Editor extends Base {
                     else {
                         newNum = num + 1;
                     }
-                    lines[i] = line.slice(String(num).length); // remove number from start
-                    lines[i] = String(newNum) + lines[i];
+                    lines[lineNumber] = String(newNum) + line.slice(String(num).length);
+                }
+                else {
+                    break;
                 }
             }
         }
+        const start = this.#selStart;
         this.text = lines.join("\n");
+        this.#setSelection(start);
     }
     mount() {
-        this.textArea.addEventListener("keydown", async (e) => {
-            // these keys will reset the type over for characters like "
-            const resetKeys = ["ArrowUp", "ArrowDown", "Delete"];
-            const nextChar = this.text[this.#selectionEnd] ?? "";
-            if (resetKeys.includes(e.key)) {
-                // reset
+        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.#selectionStart - 1];
+                const prevChar = this.text[this.#selStart - 1];
                 if (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.#selectionStart - 1;
-                    const end = this.#selectionEnd - 1;
-                    this.text = removeChar(this.text, start);
-                    this.text = removeChar(this.text, end);
-                    setTimeout(() => {
-                        this.#setSelectionRange(start, end);
-                    }, 0);
+                    const start = this.#selStart - 1;
+                    const end = this.#selEnd - 1;
+                    this.#removeStr(start);
+                    this.#removeStr(end);
+                    this.#setSelection(start, end);
                     this.#openChars.pop();
                 }
-                if (prevChar === "\n" && this.#selectionStart === this.#selectionEnd) {
-                    // see `correctFollowing`
+                else if (prevChar === "\n" && this.#selStart === this.#selEnd) {
                     e.preventDefault();
-                    const newPos = this.#selectionStart - 1;
-                    const { lineNumber } = this.#getLineInfo();
-                    this.#correctFollowing(lineNumber, true);
-                    this.text = removeChar(this.text, newPos);
-                    setTimeout(async () => {
-                        this.#setSelectionRange(newPos, newPos);
-                    }, 0);
+                    const newPos = this.#selStart - 1;
+                    this.#correctFollowing(true);
+                    this.#removeStr(newPos);
+                    this.#setSelection(newPos, newPos);
                 }
             }
             else if (e.key === "Tab") {
-                if (this.#currentBlock % 2 !== 0) {
-                    // if caret is inside of a codeblock, indent
-                    e.preventDefault();
-                    await this.#addContent({
-                        type: "inline",
-                        value: "\t",
-                    });
+                const blocks = this.text.split("```");
+                let totalChars = 0;
+                for (const [i, block] of blocks.entries()) {
+                    totalChars += block.length + 3;
+                    if (totalChars > this.#selStart) {
+                        // found
+                        if (i % 2) {
+                            // if caret is inside of a codeblock, indent
+                            e.preventDefault();
+                            this.#addContent({ type: "inline", value: "\t" });
+                        }
+                        break;
+                    }
                 }
+                // TODO add shift tab backwards
             }
-            else if (e.key === "Enter") {
+            else if (e.key === "Enter" && notHighlighted) {
                 // autocomplete start of next line if block or number
-                const { lines, lineNumber, columnNumber } = this.#getLineInfo();
-                const currentLine = lines.at(lineNumber);
-                let repeat = this.#getRepeat(currentLine);
-                const original = repeat;
-                const num = startsWithNumberAndPeriod(repeat);
-                // line starts with number and period? - increment
-                if (num)
-                    repeat = `${num + 1}. `;
-                if (repeat && original.length < columnNumber) {
-                    e.preventDefault();
+                const { line, columnNumber } = this.#lineMeta();
+                let repeat = this.#startsWithBlock(line);
+                if (!repeat) {
+                    const num = this.#startsWithNumberAndPeriod(line);
                     if (num)
-                        this.#correctFollowing(lineNumber);
-                    await this.#addContent({
-                        type: "inline",
-                        value: `\n${repeat}`,
-                    });
+                        repeat = `${num + 1}. `;
                 }
-                else if (repeat && original.length === columnNumber) {
-                    // remove if the repeat and caret at the end of the original
+                if (repeat) {
                     e.preventDefault();
-                    // have to set a placeholder since `this.#selectionEnd` will change
-                    // as characters are being removed
-                    const originalSelectionEnd = this.#selectionEnd;
-                    // go back the the length of the original
-                    const newPos = originalSelectionEnd - original.length;
-                    // for each character in the original
-                    for (let i = 0; i < original.length; i++) {
-                        this.text = removeChar(this.text, originalSelectionEnd - (i + 1));
+                    if (repeat.length < columnNumber) {
+                        // repeat same on next line
+                        this.#addContent({ type: "inline", value: "\n" + repeat });
+                        this.#correctFollowing();
                     }
-                    setTimeout(async () => {
-                        this.#setSelectionRange(newPos, newPos);
-                        this.textArea.focus();
-                        await this.#addContent({
-                            type: "inline",
-                            value: `\n`,
-                        });
-                    }, 0);
-                }
-            }
-            else {
-                const nextCharIsClosing = Object.values(this.keyPairs).includes(nextChar);
-                const highlighted = this.#selectionStart !== this.#selectionEnd;
-                if (e.ctrlKey || e.metaKey) {
-                    if (this.#selectionStart === this.#selectionEnd) {
-                        // no selection
-                        if (e.key === "c" || e.key === "x") {
-                            // copy or cut entire line
-                            e.preventDefault();
-                            const { lines, lineNumber, columnNumber } = this.#getLineInfo();
-                            await navigator.clipboard.writeText(`${lineNumber === 0 && e.key === "x" ? "" : "\n"}${lines[lineNumber]}`);
-                            if (e.key === "x") {
-                                const newPos = this.#selectionStart - columnNumber;
-                                lines.splice(lineNumber, 1);
-                                this.text = lines.join("\n");
-                                setTimeout(() => {
-                                    this.#setSelectionRange(newPos, newPos);
-                                }, 0);
-                            }
-                        }
+                    else {
+                        // remove repeat from current line
+                        const end = this.#selEnd;
+                        const newPos = end - repeat.length;
+                        this.#removeStr(newPos, end);
+                        this.#setSelection(newPos);
                     }
                 }
-                if ((e.ctrlKey || e.metaKey) && e.key) {
-                    // keyboard shortcut
-                    const matchedEl = this.#contentElements.find((el) => el.key === e.key);
-                    if (matchedEl)
-                        this.#addContent(matchedEl);
-                }
-                else if (nextCharIsClosing &&
-                    (nextChar === e.key || e.key === "ArrowRight") &&
-                    this.#openChars.length &&
-                    !highlighted) {
-                    // type over the next character instead of inserting
-                    e.preventDefault();
-                    this.#setSelectionRange(this.#selectionStart + 1, this.#selectionEnd + 1);
-                    this.#openChars.pop();
-                }
-                else if (e.key in this.keyPairs) {
+            }
+            else if ((e.ctrlKey || e.metaKey) && e.key) {
+                if (notHighlighted && (e.key === "c" || e.key === "x")) {
+                    // copy or cut entire line
                     e.preventDefault();
-                    await this.#addContent({
-                        type: "wrap",
-                        value: e.key,
-                    });
-                    this.#openChars.push(e.key);
+                    const { line, lines, lineNumber, columnNumber } = this.#lineMeta();
+                    navigator.clipboard.writeText(line);
+                    if (e.key === "x") {
+                        const newPos = this.#selStart - columnNumber;
+                        lines.splice(lineNumber, 1);
+                        this.text = lines.join("\n");
+                        this.#setSelection(newPos, newPos);
+                    }
                 }
+                const shortcut = this.#contentElements.find((el) => el.key === e.key);
+                if (shortcut)
+                    this.#addContent(shortcut);
+            }
+            else if (this.#openChars.length &&
+                notHighlighted &&
+                (nextChar === e.key || e.key === "ArrowRight") &&
+                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) {
+                e.preventDefault();
+                this.#addContent({ type: "wrap", value: e.key });
+                this.#openChars.push(e.key);
             }
         });
         // trims the selection if there is an extra space around it
         this.textArea.addEventListener("dblclick", () => {
-            if (this.#selectionStart !== this.#selectionEnd) {
-                if (this.text[this.#selectionStart] === " ") {
-                    this.#setSelectionRange(this.#selectionStart + 1, this.#selectionEnd);
+            if (this.#selStart !== this.#selEnd) {
+                if (this.text[this.#selStart] === " ") {
+                    this.#setSelection(this.#selStart + 1, this.#selEnd);
                 }
-                if (this.text[this.#selectionEnd - 1] === " ") {
-                    this.#setSelectionRange(this.#selectionStart, this.#selectionEnd - 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 = []));
         for (const trigger of this.getTrigger()) {
-            trigger.addEventListener(this.event, () => {
-                this.#addContent(this.#getContentElement(trigger));
-            });
+            trigger.addEventListener(this.event, () => this.#addContent(trigger.dataset));
         }
     }
 }
-/**
- * @param str
- * @returns the number, if the string starts with a number and a period
- */
-const startsWithNumberAndPeriod = (str) => {
-    const result = str.match(/^(\d+)\./);
-    return result ? Number(result[1]) : null;
-};
-/**
- * - insert character into string at index
- *
- * @param str string to insert into
- * @param char characters to insert into `str`
- * @param index where to insert the characters
- * @returns the new string
- */
-const insertChar = (str, char, index) => {
-    return str.slice(0, index) + char + str.slice(index);
-};
-/**
- * - remove char from string at index
- *
- * @param str string to remove the character from
- * @param index index of character to remove
- * @returns the new string
- */
-const removeChar = (str, index) => {
-    return str.slice(0, index) + str.slice(index + 1);
-};

package/dist/intersect/index.js

@@ -54,9 +54,7 @@ export class Intersect extends Base {
                     }
                 }
             }
-        }, {
-            threshold: this.#threshold,
-        });
+        }, { threshold: this.#threshold });
         for (const trigger of this.getTrigger()) {
             observer.observe(trigger);
         }

package/dist/prefetch/index.js

@@ -61,12 +61,7 @@ export class Prefetch extends Base {
                     // Currently, adding `prefetch` is required to fallback if `prerender` fails.
                     // Possibly will be automatic in the future, in which case it can be removed.
                     // https://github.com/WICG/nav-speculation/issues/162#issuecomment-1977818473
-                    prefetch: [
-                        {
-                            source: "list",
-                            urls: [url],
-                        },
-                    ],
+                    prefetch: [{ source: "list", urls: [url] }],
                 };
                 if (prerender) {
                     rules.prerender = rules.prefetch;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "drab",
 	"description": "Interactivity for You",
-	"version": "6.1.0",
+	"version": "6.1.1",
 	"homepage": "https://drab.robino.dev",
 	"license": "MIT",
 	"author": {