drab 5.0.1 → 5.1.0

package/editor/index.iife.js

@@ -1,9 +1,9 @@
-"use strict";(()=>{var c=class extends HTMLElement{#n=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let s=this.querySelector(this.getAttribute("content")??"[data-content]");if(s instanceof t)return s;throw new Error("Content not found")}swapContent(t=!0,s=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let e=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...e),s)}}safeListener(t,s,n=document.body,e={}){e.signal=this.#n.signal,n.addEventListener(t,s,e)}triggerListener(t,s=this.event){for(let n of this.getTrigger())n.addEventListener(s,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#n.abort()}};var d=class extends c{#n=[];keyPairs={"(":")","{":"}","[":"]","<":">",'"':'"',"`":"`"};constructor(){super();for(let t of this.#o)t.type==="wrap"&&(this.keyPairs[t.value]=t.value)}get textArea(){return this.getContent(HTMLTextAreaElement)}get text(){return this.textArea.value}set text(t){this.textArea.value=t}get#o(){let t=[];for(let s of this.getTrigger())t.push(this.#l(s));return t}get#h(){let t=this.text.split("```"),s=0;for(let[n,e]of t.entries())if(s+=e.length+3,this.#e<s)return n;return 0}get#t(){return this.textArea.selectionEnd}get#e(){return this.textArea.selectionStart}#s(t,s){this.textArea.setSelectionRange(t,s)}#l(t){let s=t.dataset.type,n=t.dataset.value,e=t.dataset.key??void 0;return{type:s,value:n,key:e}}async#c(t,s,n){if(t.type==="inline")this.text=`${this.text.slice(0,n)}${t.value}${this.text.slice(n)}`;else if(t.type==="wrap")this.text=v(this.text,t.value,s),this.text=v(this.text,this.keyPairs[t.value],n+t.value.length),t.value.length<2&&this.#n.push(t.value);else if(t.type==="block"){let{lines:e,lineNumber:i}=this.#r(),r=t.value.at(0);r&&e[i]?.startsWith(r)?e[i]=t.value.trim()+e[i]:e[i]=t.value+e[i],this.text=e.join(`
-`)}}async#u(t,s,n){let e=0,i=0;if(/[a-z]/i.test(t)){for(let r=n;r<this.text.length;r++)if(this.text[r]?.match(/[a-z]/i))e?i=r+1:e=r;else if(e)break}else e=s+t.length,i=n+t.length;this.#s(e,i),this.textArea.focus()}async#i(t){let s=this.#t,n=this.#e;await this.#c(t,n,s),this.#u(t.value,n,s)}#g(t){if(t){let s=[];this.#o.forEach(e=>{e.type==="block"&&s.push(e.value)});for(let e=0;e<s.length;e++){let i=s[e];if(i&&t.startsWith(i))return i}let n=m(t);if(n)return`${n}. `}return""}#r(){let t=this.text.split(`
+"use strict";(()=>{var c=class extends HTMLElement{#n=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let s=this.querySelector(this.getAttribute("content")??"[data-content]");if(s instanceof t)return s;throw new Error("Content not found")}swapContent(t=!0,s=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let e=Array.from(this.getContent().childNodes),i=[];n instanceof HTMLTemplateElement?(i.push(n.content.cloneNode(!0)),n.content.replaceChildren(...e)):(i.push(...n.childNodes),n.replaceChildren(...e)),this.getContent().replaceChildren(...i),t&&setTimeout(()=>this.swapContent(!1),s)}}safeListener(t,s,n=document.body,e={}){e.signal=this.#n.signal,n.addEventListener(t,s,e)}triggerListener(t,s=this.event){for(let n of this.getTrigger())n.addEventListener(s,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#n.abort()}};var d=class extends c{#n=[];keyPairs={"(":")","{":"}","[":"]","<":">",'"':'"',"`":"`"};constructor(){super();for(let t of this.#o)t.type==="wrap"&&(this.keyPairs[t.value]=t.value)}get textArea(){return this.getContent(HTMLTextAreaElement)}get text(){return this.textArea.value}set text(t){this.textArea.value=t}get#o(){let t=[];for(let s of this.getTrigger())t.push(this.#l(s));return t}get#h(){let t=this.text.split("```"),s=0;for(let[n,e]of t.entries())if(s+=e.length+3,this.#e<s)return n;return 0}get#t(){return this.textArea.selectionEnd}get#e(){return this.textArea.selectionStart}#s(t,s){this.textArea.setSelectionRange(t,s)}#l(t){let s=t.dataset.type,n=t.dataset.value,e=t.dataset.key??void 0;return{type:s,value:n,key:e}}async#c(t,s,n){if(t.type==="inline")this.text=`${this.text.slice(0,n)}${t.value}${this.text.slice(n)}`;else if(t.type==="wrap")this.text=v(this.text,t.value,s),this.text=v(this.text,this.keyPairs[t.value],n+t.value.length),t.value.length<2&&this.#n.push(t.value);else if(t.type==="block"){let{lines:e,lineNumber:i}=this.#r(),r=t.value.at(0);r&&e[i]?.startsWith(r)?e[i]=t.value.trim()+e[i]:e[i]=t.value+e[i],this.text=e.join(`
+`)}}async#u(t,s,n){let e=0,i=0;if(/[a-z]/i.test(t)){for(let r=n;r<this.text.length;r++)if(this.text[r]?.match(/[a-z]/i))e?i=r+1:e=r;else if(e)break}else e=s+t.length,i=n+t.length;this.#s(e,i),this.textArea.focus()}async#i(t){let s=this.#t,n=this.#e;await this.#c(t,n,s),this.#u(t.value,n,s)}#f(t){if(t){let s=[];this.#o.forEach(e=>{e.type==="block"&&s.push(e.value)});for(let e=0;e<s.length;e++){let i=s[e];if(i&&t.startsWith(i))return i}let n=m(t);if(n)return`${n}. `}return""}#r(){let t=this.text.split(`
 `),s=0;for(let n=0;n<t.length;n++){let e=t.at(n)?.length??0;if(s++,s+=e,s>this.#t)return{lines:t,lineNumber:n,columnNumber:this.#t-(s-e-1)}}return{lines:t,lineNumber:0,columnNumber:0}}#a(t,s=!1){let{lines:n}=this.#r();for(let e=t+1;e<n.length;e++){let i=n[e];if(i){let r=m(i);if(r){let o;if(s)if(r>1)o=r-1;else break;else o=r+1;n[e]=i.slice(String(r).length),n[e]=String(o)+n[e]}else break}}this.text=n.join(`
 `)}mount(){this.textArea.addEventListener("keydown",async t=>{let s=["ArrowUp","ArrowDown","Delete"],n=this.text[this.#t]??"";if(s.includes(t.key))this.#n=[];else if(t.key==="Backspace"){let e=this.text[this.#e-1];if(e&&e in this.keyPairs&&n===this.keyPairs[e]){t.preventDefault();let i=this.#e-1,r=this.#t-1;this.text=u(this.text,i),this.text=u(this.text,r),setTimeout(()=>{this.#s(i,r)},0),this.#n.pop()}if(e===`
-`&&this.#e===this.#t){t.preventDefault();let i=this.#e-1,{lineNumber:r}=this.#r();this.#a(r,!0),this.text=u(this.text,i),setTimeout(async()=>{this.#s(i,i)},0)}}else if(t.key==="Tab")this.#h%2!==0&&(t.preventDefault(),await this.#i({type:"inline",value:"	"}));else if(t.key==="Enter"){let{lines:e,lineNumber:i,columnNumber:r}=this.#r(),o=e.at(i),a=this.#g(o),h=a,g=m(a);if(g&&(a=`${g+1}. `),a&&h.length<r)t.preventDefault(),g&&this.#a(i),await this.#i({type:"inline",value:`
-${a}`});else if(a&&h.length===r){t.preventDefault();let p=this.#t,y=p-h.length;for(let f=0;f<h.length;f++)this.text=u(this.text,p-(f+1));setTimeout(async()=>{this.#s(y,y),this.textArea.focus(),await this.#i({type:"inline",value:`
+`&&this.#e===this.#t){t.preventDefault();let i=this.#e-1,{lineNumber:r}=this.#r();this.#a(r,!0),this.text=u(this.text,i),setTimeout(async()=>{this.#s(i,i)},0)}}else if(t.key==="Tab")this.#h%2!==0&&(t.preventDefault(),await this.#i({type:"inline",value:"	"}));else if(t.key==="Enter"){let{lines:e,lineNumber:i,columnNumber:r}=this.#r(),o=e.at(i),a=this.#f(o),h=a,f=m(a);if(f&&(a=`${f+1}. `),a&&h.length<r)t.preventDefault(),f&&this.#a(i),await this.#i({type:"inline",value:`
+${a}`});else if(a&&h.length===r){t.preventDefault();let p=this.#t,y=p-h.length;for(let g=0;g<h.length;g++)this.text=u(this.text,p-(g+1));setTimeout(async()=>{this.#s(y,y),this.textArea.focus(),await this.#i({type:"inline",value:`
 `})},0)}}else{let e=Object.values(this.keyPairs).includes(n),i=this.#e!==this.#t;if((t.ctrlKey||t.metaKey)&&this.#e===this.#t&&(t.key==="c"||t.key==="x")){t.preventDefault();let{lines:r,lineNumber:o,columnNumber:a}=this.#r();if(await navigator.clipboard.writeText(`${o===0&&t.key==="x"?"":`
 `}${r[o]}`),t.key==="x"){let h=this.#e-a;r.splice(o,1),this.text=r.join(`
 `),setTimeout(()=>{this.#s(h,h)},0)}}if((t.ctrlKey||t.metaKey)&&t.key){let r=this.#o.find(o=>o.key===t.key);r&&this.#i(r)}else e&&(n===t.key||t.key==="ArrowRight")&&this.#n.length&&!i?(t.preventDefault(),this.#s(this.#e+1,this.#t+1),this.#n.pop()):t.key in this.keyPairs&&(t.preventDefault(),await this.#i({type:"wrap",value:t.key}),this.#n.push(t.key))}}),this.textArea.addEventListener("dblclick",()=>{this.#e!==this.#t&&(this.text[this.#e]===" "&&this.#s(this.#e+1,this.#t),this.text[this.#t-1]===" "&&this.#s(this.#e,this.#t-1))}),this.textArea.addEventListener("click",()=>this.#n=[]);for(let t of this.getTrigger())t.addEventListener(this.event,()=>{this.#i(this.#l(t))})}},m=l=>{let t=l.match(/^(\d+)\./);return t?Number(t[1]):null},v=(l,t,s)=>l.slice(0,s)+t+l.slice(s),u=(l,t)=>l.slice(0,t)+l.slice(t+1);})();

package/editor/index.js

@@ -1 +1,480 @@
-import{a}from"../chunk-GPET75FT.js";import"../chunk-MXKU7AKV.js";export{a as Editor};
+import { Base } 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.
+ *
+ * `data-value`
+ *
+ * Set the value of the text to be inserted using the `data-value` attribute on the `trigger`.
+ *
+ * `data-type`
+ *
+ * Set the `data-type` attribute of the `trigger` to specify how the content should be inserted into the `textarea`.
+ *
+ * - `block` will be inserted at the beginning of the selected line.
+ * - `wrap` will be inserted before and after the current selection.
+ * - `inline` will be inserted at the current selection.
+ *
+ * `data-key`
+ *
+ * Add a `ctrl`/`meta` keyboard shortcut for the content based on the `data-key` attribute.
+ *
+ * Other features:
+ *
+ * - Automatically adds closing characters for `keyPairs`. For example, when typing `(`, `)` will be inserted and typed over when reached. All content with `data-type="wrap"` is also added to `keyPairs`.
+ * - Highlights the first word of the text inserted if it contains letters.
+ * - Automatically increments/decrements ordered lists.
+ * - Adds the starting character to the next line for `block` content.
+ * - On double click, highlight is corrected to only highlight the current word without space around it.
+ * - `tab` key will indent and not change focus if the selection is within a code block (three backticks).
+ * - 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. */
+    #openChars = [];
+    /** The characters that will be automatically closed when typed. */
+    keyPairs = {
+        "(": ")",
+        "{": "}",
+        "[": "]",
+        "<": ">",
+        '"': '"',
+        "`": "`",
+    };
+    constructor() {
+        super();
+        // 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;
+            }
+        }
+    }
+    /** The `content`, expects an `HTMLTextAreaElement`. */
+    get textArea() {
+        return this.getContent(HTMLTextAreaElement);
+    }
+    /** The current `value` of the `textarea`. */
+    get text() {
+        return this.textArea.value;
+    }
+    set text(value) {
+        this.textArea.value = value;
+    }
+    /** An 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));
+        }
+        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() {
+        return this.textArea.selectionEnd;
+    }
+    /** Gets the start position of the selection. */
+    get #selectionStart() {
+        return this.textArea.selectionStart;
+    }
+    /** Sets the current cursor selection in the `textarea` */
+    #setSelectionRange(start, end) {
+        this.textArea.setSelectionRange(start, end);
+    }
+    /**
+     * @param trigger The trigger html element.
+     * @returns The ContentElement based on the `trigger`'s attributes.
+     */
+    #getContentElement(trigger) {
+        const type = trigger.dataset.type;
+        const value = trigger.dataset.value;
+        const key = trigger.dataset.key ?? undefined;
+        return { type, value, key };
+    }
+    /**
+     * - Inserts text into the `textarea` based on the `display` property of
+     * the `ContentElement`.
+     *
+     * @param el the content element
+     * @param selectionStart current start position the selection
+     * @param selectionEnd current end position of the selection
+     */
+    async #insertText(el, selectionStart, selectionEnd) {
+        if (el.type === "inline") {
+            // insert at current position
+            this.text = `${this.text.slice(0, selectionEnd)}${el.value}${this.text.slice(selectionEnd)}`;
+        }
+        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);
+            // if single char, add to opened
+            if (el.value.length < 2)
+                this.#openChars.push(el.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
+            if (firstChar && lines[lineNumber]?.startsWith(firstChar)) {
+                // avoids `# # # `, instead adds trimmed => `### `
+                lines[lineNumber] = el.value.trim() + lines[lineNumber];
+            }
+            else {
+                lines[lineNumber] = el.value + lines[lineNumber];
+            }
+            this.text = lines.join("\n");
+        }
+    }
+    /**
+     * - Sets the caret position after text is inserted based on
+     * the length of the text.
+     * - Highlights text if the content contains any letters.
+     *
+     * @param text
+     * @param selectionStart current start position the selection
+     * @param selectionEnd current end position of the selection
+     */
+    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;
+        }
+        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);
+    }
+    /**
+     * - 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
+     */
+    #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 "";
+    }
+    /**
+     * @returns lines as an array, current line number, current column number
+     *
+     * @example
+     *
+     * ```js
+     * const { lines, lineNumber, columnNumber } = getLineInfo();
+     * ```
+     */
+    #getLineInfo() {
+        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;
+            // find the line that the cursor is on
+            if (characterCount > this.#selectionEnd) {
+                return {
+                    lines,
+                    lineNumber: i,
+                    columnNumber: this.#selectionEnd - (characterCount - lineLength - 1),
+                };
+            }
+        }
+        return { lines, lineNumber: 0, columnNumber: 0 };
+    }
+    /**
+     * - Increments/decrements the start of following lines if they are numbers
+     *
+     * Prevents this:
+     *
+     * ```
+     * 1. presses enter here when two items in list
+     * 2.
+     * 2.
+     * ```
+     *
+     * Instead:
+     *
+     * ```
+     * 1.
+     * 2.
+     * 3.
+     * ```
+     *
+     * @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];
+            if (line) {
+                const num = startsWithNumberAndPeriod(line);
+                if (!num) {
+                    break;
+                }
+                else {
+                    let newNum;
+                    if (decrement) {
+                        if (num > 1) {
+                            newNum = num - 1;
+                        }
+                        else {
+                            break;
+                        }
+                    }
+                    else {
+                        newNum = num + 1;
+                    }
+                    lines[i] = line.slice(String(num).length); // remove number from start
+                    lines[i] = String(newNum) + lines[i];
+                }
+            }
+        }
+        this.text = lines.join("\n");
+    }
+    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.#openChars = [];
+            }
+            else if (e.key === "Backspace") {
+                const prevChar = this.text[this.#selectionStart - 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);
+                    this.#openChars.pop();
+                }
+                if (prevChar === "\n" && this.#selectionStart === this.#selectionEnd) {
+                    // see `correctFollowing`
+                    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);
+                }
+            }
+            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",
+                    });
+                }
+            }
+            else if (e.key === "Enter") {
+                // 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();
+                    if (num)
+                        this.#correctFollowing(lineNumber);
+                    await this.#addContent({
+                        type: "inline",
+                        value: `\n${repeat}`,
+                    });
+                }
+                else if (repeat && original.length === columnNumber) {
+                    // remove if the repeat and caret at the end of the original
+                    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));
+                    }
+                    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);
+                            }
+                        }
+                    }
+                }
+                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) {
+                    e.preventDefault();
+                    await 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.text[this.#selectionEnd - 1] === " ") {
+                    this.#setSelectionRange(this.#selectionStart, this.#selectionEnd - 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));
+            });
+        }
+    }
+}
+/**
+ * @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/fullscreen/define.d.ts

@@ -1,2 +1 @@
-
-export {  }
+export {};

package/fullscreen/define.iife.js

@@ -1 +1 @@
-"use strict";(()=>{var s=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let t=this.querySelector(this.getAttribute("content")??"[data-content]");if(t instanceof e)return t;throw new Error("Content not found")}swapContent(e=!0,t=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let r=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),e&&setTimeout(()=>this.getContent().replaceChildren(...r),t)}}safeListener(e,t,n=document.body,r={}){r.signal=this.#e.signal,n.addEventListener(e,t,r)}triggerListener(e,t=this.event){for(let n of this.getTrigger())n.addEventListener(t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var i=class extends s{constructor(){super()}isFullscreen(){return document.fullscreenElement!==null}fullscreenSupported(){return!!document.documentElement.requestFullscreen}toggle(){if(this.isFullscreen())document.exitFullscreen();else try{this.getContent(HTMLElement).requestFullscreen()}catch{document.documentElement.requestFullscreen()}}mount(){this.triggerListener(()=>this.toggle());for(let e of this.getTrigger())!this.fullscreenSupported()&&"disabled"in e&&(e.disabled=!0)}};customElements.define("drab-fullscreen",i);})();
+"use strict";(()=>{var s=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof e)return n;throw new Error("Content not found")}swapContent(e=!0,n=800){let t=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(t){let r=Array.from(this.getContent().childNodes),i=[];t instanceof HTMLTemplateElement?(i.push(t.content.cloneNode(!0)),t.content.replaceChildren(...r)):(i.push(...t.childNodes),t.replaceChildren(...r)),this.getContent().replaceChildren(...i),e&&setTimeout(()=>this.swapContent(!1),n)}}safeListener(e,n,t=document.body,r={}){r.signal=this.#e.signal,t.addEventListener(e,n,r)}triggerListener(e,n=this.event){for(let t of this.getTrigger())t.addEventListener(n,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};var o=class extends s{constructor(){super()}isFullscreen(){return document.fullscreenElement!==null}fullscreenSupported(){return!!document.documentElement.requestFullscreen}toggle(){if(this.isFullscreen())document.exitFullscreen();else try{this.getContent(HTMLElement).requestFullscreen()}catch{document.documentElement.requestFullscreen()}}mount(){this.triggerListener(()=>this.toggle());for(let e of this.getTrigger())!this.fullscreenSupported()&&"disabled"in e&&(e.disabled=!0)}};customElements.define("drab-fullscreen",o);})();

package/fullscreen/define.js

@@ -1 +1,2 @@
-import{a as e}from"../chunk-5JV4T7GM.js";import"../chunk-MXKU7AKV.js";customElements.define("drab-fullscreen",e);
+import { Fullscreen } from "./index.js";
+customElements.define("drab-fullscreen", Fullscreen);

package/fullscreen/index.d.ts

@@ -1,13 +1,12 @@
-import { Base } from '../base/index.js';
-import { A as Attributes } from '../index-J5TqSvEl.js';
-
-type FullscreenAttributes = Attributes<Fullscreen>;
+import { Base } from "../base/index.js";
+import type { Attributes } from "../types/index.js";
+export type FullscreenAttributes = Attributes<Fullscreen>;
 /**
  * Toggles the `documentElement` or `content` element to fullscreen mode.
  *
  * Disables the `trigger` if fullscreen is not supported.
  */
-declare class Fullscreen extends Base {
+export declare class Fullscreen extends Base {
     constructor();
     /**
      * @returns `true` if fullscreen is currently enabled.
@@ -21,5 +20,3 @@ declare class Fullscreen extends Base {
     toggle(): void;
     mount(): void;
 }
-
-export { Fullscreen, type FullscreenAttributes };

package/fullscreen/index.iife.js

@@ -1 +1 @@
-"use strict";(()=>{var s=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let t=this.querySelector(this.getAttribute("content")??"[data-content]");if(t instanceof e)return t;throw new Error("Content not found")}swapContent(e=!0,t=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let r=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),e&&setTimeout(()=>this.getContent().replaceChildren(...r),t)}}safeListener(e,t,n=document.body,r={}){r.signal=this.#e.signal,n.addEventListener(e,t,r)}triggerListener(e,t=this.event){for(let n of this.getTrigger())n.addEventListener(t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var i=class extends s{constructor(){super()}isFullscreen(){return document.fullscreenElement!==null}fullscreenSupported(){return!!document.documentElement.requestFullscreen}toggle(){if(this.isFullscreen())document.exitFullscreen();else try{this.getContent(HTMLElement).requestFullscreen()}catch{document.documentElement.requestFullscreen()}}mount(){this.triggerListener(()=>this.toggle());for(let e of this.getTrigger())!this.fullscreenSupported()&&"disabled"in e&&(e.disabled=!0)}};})();
+"use strict";(()=>{var s=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof e)return n;throw new Error("Content not found")}swapContent(e=!0,n=800){let t=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(t){let r=Array.from(this.getContent().childNodes),o=[];t instanceof HTMLTemplateElement?(o.push(t.content.cloneNode(!0)),t.content.replaceChildren(...r)):(o.push(...t.childNodes),t.replaceChildren(...r)),this.getContent().replaceChildren(...o),e&&setTimeout(()=>this.swapContent(!1),n)}}safeListener(e,n,t=document.body,r={}){r.signal=this.#e.signal,t.addEventListener(e,n,r)}triggerListener(e,n=this.event){for(let t of this.getTrigger())t.addEventListener(n,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};var i=class extends s{constructor(){super()}isFullscreen(){return document.fullscreenElement!==null}fullscreenSupported(){return!!document.documentElement.requestFullscreen}toggle(){if(this.isFullscreen())document.exitFullscreen();else try{this.getContent(HTMLElement).requestFullscreen()}catch{document.documentElement.requestFullscreen()}}mount(){this.triggerListener(()=>this.toggle());for(let e of this.getTrigger())!this.fullscreenSupported()&&"disabled"in e&&(e.disabled=!0)}};})();

package/fullscreen/index.js

@@ -1 +1,46 @@
-import{a}from"../chunk-5JV4T7GM.js";import"../chunk-MXKU7AKV.js";export{a as Fullscreen};
+import { Base } from "../base/index.js";
+/**
+ * Toggles the `documentElement` or `content` element to fullscreen mode.
+ *
+ * Disables the `trigger` if fullscreen is not supported.
+ */
+export class Fullscreen extends Base {
+    constructor() {
+        super();
+    }
+    /**
+     * @returns `true` if fullscreen is currently enabled.
+     */
+    isFullscreen() {
+        return document.fullscreenElement !== null;
+    }
+    /**
+     * @returns `true` if fullscreen is supported.
+     */
+    fullscreenSupported() {
+        // BREAKING TODO: make private like in WakeLock
+        return Boolean(document.documentElement.requestFullscreen);
+    }
+    /** Enables or disables fullscreen mode based on the current state. */
+    toggle() {
+        if (this.isFullscreen()) {
+            document.exitFullscreen();
+        }
+        else {
+            try {
+                this.getContent(HTMLElement).requestFullscreen();
+            }
+            catch {
+                document.documentElement.requestFullscreen();
+            }
+        }
+    }
+    mount() {
+        this.triggerListener(() => this.toggle());
+        for (const trigger of this.getTrigger()) {
+            if (!this.fullscreenSupported() && "disabled" in trigger) {
+                trigger.disabled = true;
+            }
+        }
+    }
+}

package/index.d.ts

@@ -1,15 +1,15 @@
-export { Base } from './base/index.js';
-export { Animate, AnimateAttributes } from './animate/index.js';
-export { Breakpoint, BreakpointAttributes } from './breakpoint/index.js';
-export { ContextMenu, ContextMenuAttributes } from './contextmenu/index.js';
-export { Copy, CopyAttributes } from './copy/index.js';
-export { Details, DetailsAttributes } from './details/index.js';
-export { Dialog, DialogAttributes } from './dialog/index.js';
-export { Editor, EditorAttributes } from './editor/index.js';
-export { Fullscreen, FullscreenAttributes } from './fullscreen/index.js';
-export { Popover, PopoverAttributes } from './popover/index.js';
-export { Share, ShareAttributes } from './share/index.js';
-export { TableSort, TableSortAttributes } from './tablesort/index.js';
-export { YouTube, YouTubeAttributes } from './youtube/index.js';
-import './index-J5TqSvEl.js';
-import './index-0rvQCq2U.js';
+import { Base } from "./base/index.js";
+import { Animate, type AnimateAttributes } from "./animate/index.js";
+import { Breakpoint, type BreakpointAttributes } from "./breakpoint/index.js";
+import { ContextMenu, type ContextMenuAttributes } from "./contextmenu/index.js";
+import { Copy, type CopyAttributes } from "./copy/index.js";
+import { Details, type DetailsAttributes } from "./details/index.js";
+import { Dialog, type DialogAttributes } from "./dialog/index.js";
+import { Editor, type EditorAttributes } from "./editor/index.js";
+import { Fullscreen, type FullscreenAttributes } from "./fullscreen/index.js";
+import { Popover, type PopoverAttributes } from "./popover/index.js";
+import { Share, type ShareAttributes } from "./share/index.js";
+import { TableSort, type TableSortAttributes } from "./tablesort/index.js";
+import { WakeLock, type WakeLockAttributes } from "./wakelock/index.js";
+import { YouTube, type YouTubeAttributes } from "./youtube/index.js";
+export { Base, Animate, AnimateAttributes, Breakpoint, BreakpointAttributes, ContextMenu, ContextMenuAttributes, Copy, CopyAttributes, Details, DetailsAttributes, Dialog, DialogAttributes, Editor, EditorAttributes, Fullscreen, FullscreenAttributes, Popover, PopoverAttributes, Share, ShareAttributes, TableSort, TableSortAttributes, WakeLock, WakeLockAttributes, YouTube, YouTubeAttributes, };