@lesjoursfr/edith 2.1.2 → 2.1.3

package/dist/core/throttle.js

@@ -0,0 +1,139 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Based on lodash version of throttle : https://github.com/lodash/lodash/blob/master/throttle.js
+ */
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked, or until the next browser frame is drawn. Provide `options` to indicate
+ * whether `func` should be invoked on the leading and/or trailing edge of the
+ * `wait` timeout. The `func` is invoked with the last arguments provided to the
+ * debounced function. Subsequent calls to the debounced function return the
+ * result of the last `func` invocation.
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until the next tick, similar to `setTimeout` with a timeout of `0`.
+ * @param {Function} func The function to debounce
+ * @param {number} wait The number of milliseconds to delay
+ * @param {Object} [options={}] The options object
+ * @param {boolean} [options.leading=false] Specify invoking on the leading edge of the timeout
+ * @param {boolean} [options.trailing=true] Specify invoking on the trailing edge of the timeout
+ * @param {number} [options.maxWait] The maximum time `func` is allowed to be delayed before it's invoked
+ * @returns {Function} Returns the new debounced function
+ */
+function debounce(func, wait, options = {}) {
+    let lastArgs, lastThis, result, timerId, lastCallTime;
+    let lastInvokeTime = 0;
+    const leading = !!options.leading;
+    const maxing = "maxWait" in options;
+    const maxWait = maxing ? Math.max(options.maxWait || 0, wait) : undefined;
+    const trailing = "trailing" in options ? !!options.trailing : true;
+    function invokeFunc(time) {
+        const args = lastArgs;
+        const thisArg = lastThis;
+        lastArgs = lastThis = undefined;
+        lastInvokeTime = time;
+        result = func.apply(thisArg, args);
+        return result;
+    }
+    function startTimer(pendingFunc, wait) {
+        return setTimeout(pendingFunc, wait);
+    }
+    function leadingEdge(time) {
+        // Reset any `maxWait` timer.
+        lastInvokeTime = time;
+        // Start the timer for the trailing edge.
+        timerId = startTimer(timerExpired, wait);
+        // Invoke the leading edge.
+        return leading ? invokeFunc(time) : result;
+    }
+    function remainingWait(time) {
+        const timeSinceLastCall = time - lastCallTime;
+        const timeSinceLastInvoke = time - lastInvokeTime;
+        const timeWaiting = wait - timeSinceLastCall;
+        return maxing ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
+    }
+    function shouldInvoke(time) {
+        const timeSinceLastCall = time - lastCallTime;
+        const timeSinceLastInvoke = time - lastInvokeTime;
+        // Either this is the first call, activity has stopped and we're at the
+        // trailing edge, the system time has gone backwards and we're treating
+        // it as the trailing edge, or we've hit the `maxWait` limit.
+        return (lastCallTime === undefined ||
+            timeSinceLastCall >= wait ||
+            timeSinceLastCall < 0 ||
+            (maxing && timeSinceLastInvoke >= maxWait));
+    }
+    function timerExpired() {
+        const time = Date.now();
+        if (shouldInvoke(time)) {
+            return trailingEdge(time);
+        }
+        // Restart the timer.
+        timerId = startTimer(timerExpired, remainingWait(time));
+    }
+    function trailingEdge(time) {
+        timerId = undefined;
+        // Only invoke if we have `lastArgs` which means `func` has been
+        // debounced at least once.
+        if (trailing && lastArgs) {
+            return invokeFunc(time);
+        }
+        lastArgs = lastThis = undefined;
+        return result;
+    }
+    function debounced(...args) {
+        const time = Date.now();
+        const isInvoking = shouldInvoke(time);
+        lastArgs = args;
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        lastThis = this;
+        lastCallTime = time;
+        if (isInvoking) {
+            if (timerId === undefined) {
+                return leadingEdge(lastCallTime);
+            }
+            if (maxing) {
+                // Handle invocations in a tight loop.
+                timerId = startTimer(timerExpired, wait);
+                return invokeFunc(lastCallTime);
+            }
+        }
+        if (timerId === undefined) {
+            timerId = startTimer(timerExpired, wait);
+        }
+        return result;
+    }
+    return debounced;
+}
+/**
+ * Creates a throttled function that only invokes `func` at most once per
+ * every `wait` milliseconds (or once per browser frame). Provide `options` to indicate
+ * whether `func` should be invoked on the leading and/or trailing edge of the
+ * `wait` timeout. The `func` is invoked with the last arguments provided to the
+ * throttled function. Subsequent calls to the throttled function return the
+ * result of the last `func` invocation.
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the throttled function
+ * is invoked more than once during the `wait` timeout.
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until the next tick, similar to `setTimeout` with a timeout of `0`.
+ * @param {Function} func The function to throttle
+ * @param {number} wait The number of milliseconds to throttle invocations to
+ * @param {Object} [options={}] The options object
+ * @param {boolean} [options.leading=true] Specify invoking on the leading edge of the timeout
+ * @param {boolean} [options.trailing=true] Specify invoking on the trailing edge of the timeout
+ * @returns {Function} Returns the new throttled function
+ */
+function throttle(func, wait, options = {}) {
+    const leading = "leading" in options ? !!options.leading : true;
+    const trailing = "trailing" in options ? !!options.trailing : true;
+    return debounce(func, wait, {
+        leading,
+        trailing,
+        maxWait: wait,
+    });
+}
+export { debounce, throttle };

package/dist/css/edith.scss

@@ -0,0 +1,283 @@
+@use "sass:color";
+
+$color-toolbar: #212529;
+$color-toolbar-border: #212529;
+$color-button: #e9ecef;
+$color-button-border: #ced4da;
+$color-button-text: #212529;
+$color-tooltip: #000;
+$color-tooltip-text: #fff;
+$color-editor: #fff;
+$color-editor-text: #212529;
+$color-modal: #fff;
+$color-modal-border: #ced4da;
+$color-modal-title: #000;
+$color-modal-text: #212529;
+$color-input-border: #bfbfbf;
+$color-checkbox-background: #0d6efd;
+$color-checkbox-border: #bfbfbf;
+$color-modal-cancel-background: #fff;
+$color-modal-cancel-color: #212529;
+$color-modal-cancel-border: #212529;
+$color-modal-submit-background: #0d6efd;
+$color-modal-submit-color: #fff;
+$color-modal-submit-border: #0d6efd;
+
+.edith {
+	background-color: $color-toolbar;
+	border: 1px solid $color-toolbar-border;
+	border-radius: 0.25rem;
+	padding: 5px;
+}
+
+.edith-toolbar {
+	background-color: $color-toolbar;
+}
+
+.edith-btn {
+	background-color: $color-button;
+	border: 1px solid $color-button-border;
+	border-radius: 0.25rem;
+	color: $color-button-text;
+	cursor: pointer;
+	display: inline-block;
+	font-size: 1rem;
+	font-weight: 900;
+	line-height: 1.5;
+	padding: 0.375rem 0.75rem;
+	text-align: center;
+	text-decoration: none;
+	user-select: none;
+	vertical-align: middle;
+
+	&:disabled {
+		color: color.scale($color-button-text, $lightness: 70%);
+		cursor: not-allowed;
+	}
+}
+
+.edith-btn-group {
+	display: inline-flex;
+	position: relative;
+	vertical-align: middle;
+
+	&:not(:first-child) {
+		margin-left: 10px;
+	}
+
+	:not(:first-child) {
+		margin-left: -1px;
+	}
+
+	.edith-btn:not(:last-child) {
+		border-bottom-right-radius: 0;
+		border-top-right-radius: 0;
+	}
+
+	.edith-btn:not(:first-child) {
+		border-bottom-left-radius: 0;
+		border-top-left-radius: 0;
+	}
+}
+
+.edith-btn-nbsp {
+	&::before {
+		content: "\0020";
+		display: block;
+		height: 16px;
+		width: 12px;
+	}
+}
+
+.edith-tooltip {
+	background: $color-tooltip;
+	border-radius: 4px;
+	color: $color-tooltip-text;
+	font-size: 13px;
+	font-weight: bold;
+	padding: 4px 8px;
+	z-index: 10;
+
+	.arrow,
+	.arrow::before {
+		background: inherit;
+		height: 8px;
+		position: absolute;
+		width: 8px;
+	}
+
+	.arrow {
+		visibility: hidden;
+	}
+
+	.arrow::before {
+		content: "";
+		transform: rotate(45deg);
+		visibility: visible;
+	}
+
+	&[data-popper-placement^="top"] > .arrow {
+		bottom: -4px;
+	}
+
+	&[data-popper-placement^="bottom"] > .arrow {
+		top: -4px;
+	}
+
+	&[data-popper-placement^="left"] > .arrow {
+		right: -4px;
+	}
+
+	&[data-popper-placement^="right"] > .arrow {
+		left: -4px;
+	}
+}
+
+.edith-editing-area {
+	background-color: $color-editor;
+	border-radius: 0.25rem;
+	margin-top: 5px;
+	padding: 5px;
+}
+
+.edith-visual,
+.edith-code {
+	height: 100%;
+	outline: none;
+	overflow: auto;
+}
+
+.edith-hidden {
+	display: none;
+}
+
+.edith-visual {
+	color: $color-editor-text;
+
+	.edith-nbsp {
+		color: color.scale($color-button-text, $lightness: 70%);
+	}
+}
+
+.edith-modal {
+	background: $color-modal;
+	border: 2px solid $color-modal-border;
+	border-radius: 10px;
+	left: calc(50% - 200px);
+	position: fixed;
+	top: 20%;
+	width: 400px;
+	z-index: 10;
+
+	.edith-modal-header {
+		border-bottom: 1px solid $color-modal-border;
+		color: $color-modal-title;
+		font-size: 20px;
+		font-weight: 700;
+		line-height: 1.4;
+		padding: 5px 10px;
+	}
+
+	.edith-modal-content {
+		color: $color-modal-text;
+		margin: 10px;
+	}
+
+	.edith-modal-input {
+		display: flex;
+		flex-wrap: wrap;
+		margin: 10px 0;
+
+		label,
+		input {
+			width: 100%;
+		}
+
+		input {
+			appearance: none;
+			background-clip: padding-box;
+			background-color: $color-modal;
+			border: 1px solid $color-checkbox-border;
+			border-radius: 0.25rem;
+			font-size: 1rem;
+			font-weight: 400;
+			line-height: 1.5;
+			outline: 0;
+			padding: 0.375rem 0.75rem;
+			width: 100%;
+		}
+
+		label {
+			font-size: 16px;
+			font-weight: 700;
+			margin-bottom: 5px;
+		}
+	}
+
+	.edith-modal-checkbox {
+		margin: 10px 0;
+
+		label {
+			display: flex;
+		}
+
+		input {
+			appearance: none;
+			background-color: $color-modal;
+			background-position: 50%;
+			background-repeat: no-repeat;
+			background-size: contain;
+			border: 1px solid $color-checkbox-border;
+			border-radius: 0.25em;
+			height: 1em;
+			margin-top: 0.25em;
+			vertical-align: top;
+			width: 1em;
+
+			&:checked {
+				background-color: $color-checkbox-background;
+				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");
+				border-color: $color-checkbox-background;
+			}
+		}
+	}
+
+	.edith-modal-footer {
+		border-top: 1px solid $color-modal-border;
+		display: flex;
+		justify-content: flex-end;
+		padding: 5px 10px;
+
+		:not(:last-child) {
+			margin-right: 10px;
+		}
+	}
+
+	.edith-modal-cancel,
+	.edith-modal-submit {
+		border: 1px solid transparent;
+		border-radius: 0.25rem;
+		cursor: pointer;
+		display: inline-block;
+		font-size: 1rem;
+		font-weight: 400;
+		line-height: 1.5;
+		padding: 0.375rem 0.75rem;
+		text-align: center;
+		text-decoration: none;
+		user-select: none;
+		vertical-align: middle;
+	}
+
+	.edith-modal-cancel {
+		background-color: $color-modal-cancel-background;
+		border-color: $color-modal-cancel-border;
+		color: $color-modal-cancel-color;
+	}
+
+	.edith-modal-submit {
+		background-color: $color-modal-submit-background;
+		border-color: $color-modal-submit-border;
+		color: $color-modal-submit-color;
+	}
+}

package/dist/edith-options.d.ts

@@ -0,0 +1,17 @@
+import { Edith } from "./edith.js";
+import { EdithButton } from "./ui/index.js";
+export type EdithToolbarOption = [string, string[]][];
+export type EdithButtonsOption = {
+    [keyof: string]: (context: Edith) => EdithButton;
+};
+export type EdithOptions = {
+    height: number;
+    resizable: boolean;
+    toolbar: EdithToolbarOption;
+    buttons: EdithButtonsOption;
+    initialContent: string;
+};
+/**
+ * Edith default options
+ */
+export declare const DefaultOptions: EdithOptions;

package/dist/edith-options.js

@@ -0,0 +1,56 @@
+/**
+ * Edith default options
+ */
+export const DefaultOptions = {
+    /**
+     * The editor's height
+     *
+     * @type {number}
+     * @default 80
+     */
+    height: 80,
+    /**
+     * Control if the editor can be resized by the user
+     *
+     * @type {boolean}
+     * @default false
+     */
+    resizable: false,
+    /**
+     *
+     * An array that define which button is shown in the toolbar and how they are grouped.
+     *
+     * @type {EdithToolbarOption}
+     * @example
+     *   toolbar: [
+     *     ["style", ["bold", "italic", "underline", "strikethrough"]],
+     *     ["extra", ["subscript", "superscript"]]
+     *   ]
+     */
+    toolbar: [["style", ["bold", "italic", "underline", "strikethrough"]]],
+    /**
+     *
+     * Associative object with the button name and builder to create it.
+     *
+     * @type {EdithButtonsOption}
+     * @example
+     *   buttons: {
+     *     bold: (context: Edith) =>
+     *       new EdithButton(context, {
+     *         icon: "fa-solid fa-bold",
+     *         title: "Gras",
+     *         onclick: (ctx: Edith, event: Event) => {
+     *           ctx.editor.wrapInsideTag("b");
+     *         },
+     *       }),
+     *   }
+     */
+    buttons: {},
+    /**
+     * The editor's initial content
+     *
+     * @type {string}
+     * @default ""
+     */
+    initialContent: "",
+};

package/dist/edith.d.ts

@@ -0,0 +1,30 @@
+import { Events } from "./core/index.js";
+import { EdithOptions } from "./edith-options.js";
+import { EdithButton, EdithEditor } from "./ui/index.js";
+declare global {
+    interface HTMLElement {
+        edith?: Edith;
+    }
+}
+export { EdithButton };
+export declare class Edith {
+    private readonly element;
+    readonly toolbar: HTMLDivElement;
+    readonly editor: EdithEditor;
+    readonly modals: HTMLDivElement;
+    /**
+     * Create a new editor
+     * @constructor
+     * @param {HTMLElement} element - The <input> element to add the Wysiwyg to.
+     * @param {Object} options - Options for the editor.
+     */
+    constructor(element: HTMLElement, options: Partial<EdithOptions>);
+    on(type: string, listener: EventListenerOrEventListenerObject): void;
+    off(type: string, listener: EventListenerOrEventListenerObject): void;
+    trigger(type: Events, payload?: {
+        [key: string]: unknown;
+    }): void;
+    setContent(content: string): void;
+    getContent(): string;
+    destroy(): void;
+}

package/dist/edith.js

@@ -0,0 +1,76 @@
+import { Events, addClass, createNodeWith, off, on, removeClass, trigger } from "./core/index.js";
+import { DefaultOptions } from "./edith-options.js";
+import { EdithButton, EdithButtons, EdithEditor } from "./ui/index.js";
+export { EdithButton };
+export class Edith {
+    element;
+    toolbar;
+    editor;
+    modals;
+    /**
+     * Create a new editor
+     * @constructor
+     * @param {HTMLElement} element - The <input> element to add the Wysiwyg to.
+     * @param {Object} options - Options for the editor.
+     */
+    constructor(element, options) {
+        // Render the editor in the element
+        this.element = element;
+        addClass(this.element, "edith");
+        // Create the toolbar
+        this.toolbar = createNodeWith("div", { attributes: { class: "edith-toolbar" } });
+        this.element.append(this.toolbar);
+        // Create buttons
+        const buttons = options.buttons ?? DefaultOptions.buttons;
+        const toolbar = options.toolbar ?? DefaultOptions.toolbar;
+        for (const { 0: group, 1: btns } of toolbar) {
+            // Create the button group
+            const btnGroup = document.createElement("div");
+            btnGroup.setAttribute("id", group);
+            btnGroup.setAttribute("class", "edith-btn-group");
+            this.toolbar.append(btnGroup);
+            // Add buttons
+            for (const btnId of btns) {
+                // Render the button
+                const buttonBuilder = buttons[btnId] ?? EdithButtons[btnId];
+                btnGroup.append(buttonBuilder(this).render());
+            }
+        }
+        // Create the editor
+        this.editor = new EdithEditor(this, {
+            initialContent: options.initialContent ?? DefaultOptions.initialContent,
+            height: options.height ?? DefaultOptions.height,
+            resizable: options.resizable ?? DefaultOptions.resizable,
+        });
+        this.element.append(this.editor.render());
+        // Create the modals
+        this.modals = createNodeWith("div", { attributes: { class: "edith-modals" } });
+        this.element.append(this.modals);
+        // Add the Edith instance to the DOM
+        this.element.edith = this;
+        // Trigger the initialized event once its initialized
+        this.trigger(Events.initialized);
+    }
+    on(type, listener) {
+        on(this.element, type, listener);
+    }
+    off(type, listener) {
+        off(this.element, type, listener);
+    }
+    trigger(type, payload) {
+        trigger(this.element, type, payload);
+    }
+    setContent(content) {
+        this.editor.setContent(content);
+    }
+    getContent() {
+        return this.editor.getContent();
+    }
+    destroy() {
+        removeClass(this.element, "edith");
+        this.modals.remove();
+        this.editor.destroy();
+        this.toolbar.remove();
+        this.element.remove();
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./edith.js";

package/dist/index.js

@@ -0,0 +1 @@
+export * from "./edith.js";

package/dist/ui/button.d.ts

@@ -0,0 +1,25 @@
+import { EdithButtonsOption } from "../edith-options.js";
+import { Edith } from "../edith.js";
+export type EdithButtonCallback = (ctx: Edith, event: Event) => void;
+export declare class EdithButton {
+    private el;
+    private ctx;
+    private icon;
+    private title;
+    private onclick;
+    private showOnCodeView;
+    private popperEl;
+    private popper;
+    constructor(ctx: Edith, options: {
+        icon: string;
+        title: string;
+        onclick: EdithButtonCallback;
+        showOnCodeView?: boolean;
+    });
+    click(event: Event): void;
+    showTooltip(): void;
+    hideTooltip(): void;
+    onEditorModeChange(event: CustomEvent): void;
+    render(): HTMLButtonElement;
+}
+export declare const EdithButtons: Readonly<EdithButtonsOption>;