drab 6.1.2 → 6.2.0

package/dist/base/index.d.ts

@@ -54,13 +54,17 @@ export declare class Base extends HTMLElement {
      */
     swapContent(revert?: number | false): void;
     /**
-     * Wrapper around `document.body.addEventListener` that ensures when the
-     * element is removed from the DOM, these event listeners are cleaned up.
-     * @param type
-     * @param listener
-     * @param options
+     * Wrapper around `addEventListener` that ensures when the element is
+     * removed from the DOM, these event listeners are cleaned up.
+     *
+     * @param type Event listener type - ex: `"keydown"`
+     * @param listener Listener to add to the target.
+     * @param target Event target to add the listener to - defaults to `document.body`.
+     * @param options Other options sans `signal`.
      */
-    safeListener<K extends keyof DocumentEventMap, T extends HTMLElement | Window | Document = HTMLElement>(type: K, listener: (this: T, ev: DocumentEventMap[K]) => any, element?: T, options?: AddEventListenerOptions): void;
+    safeListener<T extends keyof HTMLElementEventMap>(type: T, listener: (this: HTMLElement, event: HTMLElementEventMap[T]) => any, element?: HTMLElement, options?: AddEventListenerOptions): void;
+    safeListener<T extends keyof DocumentEventMap>(type: T, listener: (this: Document, event: DocumentEventMap[T]) => any, document: Document, options?: AddEventListenerOptions): void;
+    safeListener<T extends keyof WindowEventMap>(type: T, listener: (this: Window, event: WindowEventMap[T]) => any, window: Window, options?: AddEventListenerOptions): void;
     /**
      * @param listener Listener to attach to all of the `trigger` elements.
      */

package/dist/base/index.js

@@ -73,7 +73,7 @@ export class Base extends HTMLElement {
         const swap = this.querySelector(this.getAttribute("swap") ?? "[data-swap]");
         if (swap) {
             /** A copy of the content currently in `this.getContent()`. */
-            const currentContent = Array.from(this.getContent().childNodes);
+            const currentContent = this.getContent().childNodes;
             /**
              * The contents of the swap element, set based on whether the
              * swap is a `template` or not.
@@ -99,17 +99,9 @@ export class Base extends HTMLElement {
             }
         }
     }
-    /**
-     * Wrapper around `document.body.addEventListener` that ensures when the
-     * element is removed from the DOM, these event listeners are cleaned up.
-     * @param type
-     * @param listener
-     * @param options
-     */
-    safeListener(type, listener, element = document.body, options = {}) {
+    safeListener(type, listener, target = document.body, options = {}) {
         options.signal = this.#listenerController.signal;
-        //@ts-ignore - inferred listener type not working...?
-        element.addEventListener(type, listener, options);
+        target.addEventListener(type, listener, options);
     }
     /**
      * @param listener Listener to attach to all of the `trigger` elements.

package/dist/editor/index.d.ts

@@ -42,15 +42,13 @@ export type ContentElement = {
  * - 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).
+ * - `tab` key will indent or dedent (+shift) instead of focus change 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 declare class Editor extends Base {
     #private;
     /** Characters that will be automatically closed when typed. */
-    keyPairs: {
-        [key: string]: string;
-    };
+    keyPairs: Record<string, string>;
     constructor();
     /** The `content`, expects an `HTMLTextAreaElement`. */
     get textArea(): HTMLTextAreaElement;

package/dist/editor/index.js

@@ -25,7 +25,7 @@ import { Base } from "../base/index.js";
  * - 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).
+ * - `tab` key will indent or dedent (+shift) instead of focus change 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 {
@@ -33,6 +33,7 @@ export class Editor extends Base {
     #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 = {
         "(": ")",
@@ -60,6 +61,7 @@ export class Editor extends Base {
     }
     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() {
@@ -217,7 +219,7 @@ export class Editor extends Base {
                     else {
                         newNum = num + 1;
                     }
-                    lines[lineNumber] = String(newNum) + line.slice(String(num).length);
+                    lines[lineNumber] = newNum + line.slice(String(num).length);
                 }
                 else {
                     break;
@@ -263,16 +265,26 @@ export class Editor extends Base {
                 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
+                            // caret is inside of a codeblock
                             e.preventDefault();
-                            this.#addContent({ type: "inline", value: "\t" });
+                            if (e.shiftKey) {
+                                const { line, columnNumber } = this.#lineMeta();
+                                if (line.startsWith("\t")) {
+                                    // dedent
+                                    const start = this.#selStart;
+                                    this.#removeStr(start - columnNumber);
+                                    this.#setSelection(start - 1);
+                                }
+                            }
+                            else {
+                                // indent
+                                this.#addContent({ type: "inline", value: "\t" });
+                            }
                         }
                         break;
                     }
                 }
-                // TODO add shift tab backwards
             }
             else if (e.key === "Enter" && notHighlighted) {
                 // autocomplete start of next line if block or number
@@ -328,7 +340,6 @@ export class Editor extends Base {
             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
@@ -344,8 +355,6 @@ export class Editor extends Base {
         });
         // 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(trigger.dataset));
-        }
+        this.triggerListener((e) => this.#addContent(e.target.dataset));
     }
 }

package/package.json

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