@lesjoursfr/edith 2.1.2 → 2.1.4

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,77 @@
+import { addClass, createNodeWith, off, on, removeClass, trigger } from "@lesjoursfr/browser-tools";
+import { Events } 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>;

package/dist/ui/button.js

@@ -0,0 +1,166 @@
+import { createNodeWith } from "@lesjoursfr/browser-tools";
+import { createPopper } from "@popperjs/core";
+import { EditorModes, Events } from "../core/index.js";
+export class EdithButton {
+    el;
+    ctx;
+    icon;
+    title;
+    onclick;
+    showOnCodeView;
+    popperEl;
+    popper;
+    constructor(ctx, options) {
+        this.ctx = ctx;
+        this.icon = options.icon;
+        this.title = options.title;
+        this.onclick = options.onclick;
+        this.showOnCodeView = options.showOnCodeView === true;
+    }
+    click(event) {
+        // Prevent default
+        event.preventDefault();
+        // Call the callback
+        this.onclick(this.ctx, event);
+    }
+    showTooltip() {
+        if (this.popper !== undefined) {
+            return;
+        }
+        // Add the tooltip content to the DOM
+        this.popperEl = createNodeWith("div", {
+            textContent: this.title,
+            attributes: { class: "edith-tooltip" },
+        });
+        const arrowEl = createNodeWith("div", {
+            attributes: { class: "arrow", "data-popper-arrow": "" },
+        });
+        this.popperEl.append(arrowEl);
+        this.ctx.toolbar.append(this.popperEl);
+        // Create the tooltip
+        this.popper = createPopper(this.el, this.popperEl, {
+            placement: "bottom",
+            modifiers: [
+                {
+                    name: "arrow",
+                    options: {
+                        padding: 5, // 5px from the edges of the popper
+                    },
+                },
+                {
+                    name: "offset",
+                    options: {
+                        offset: [0, 8],
+                    },
+                },
+            ],
+        });
+    }
+    hideTooltip() {
+        if (this.popper === undefined) {
+            return;
+        }
+        // Destroy the tooltip
+        this.popper.destroy();
+        this.popper = undefined;
+        // Remove the tooltip content from the DOM
+        this.popperEl?.remove();
+    }
+    onEditorModeChange(event) {
+        if (event.detail.mode === EditorModes.Code) {
+            this.el.setAttribute("disabled", "disabled");
+        }
+        else {
+            this.el.removeAttribute("disabled");
+        }
+    }
+    render() {
+        // Create the button
+        this.el = createNodeWith("button", {
+            attributes: { class: `edith-btn ${this.icon}`, type: "button" },
+        });
+        // Bind events
+        this.el.onclick = this.click.bind(this);
+        this.el.onmouseenter = this.showTooltip.bind(this);
+        this.el.onmouseleave = this.hideTooltip.bind(this);
+        // Check if we have to disable the button on the code view
+        if (this.showOnCodeView !== true) {
+            this.ctx.on(Events.modeChanged, this.onEditorModeChange.bind(this));
+        }
+        // Return the button
+        return this.el;
+    }
+}
+export const EdithButtons = Object.freeze({
+    bold: (context) => new EdithButton(context, {
+        icon: "fa-solid fa-bold",
+        title: "Gras",
+        onclick: (ctx) => {
+            ctx.editor.wrapInsideTag("b");
+        },
+    }),
+    italic: (context) => new EdithButton(context, {
+        icon: "fa-solid fa-italic",
+        title: "Italique",
+        onclick: (ctx) => {
+            ctx.editor.wrapInsideTag("i");
+        },
+    }),
+    underline: (context) => new EdithButton(context, {
+        icon: "fa-solid fa-underline",
+        title: "Souligner",
+        onclick: (ctx) => {
+            ctx.editor.wrapInsideTag("u");
+        },
+    }),
+    strikethrough: (context) => new EdithButton(context, {
+        icon: "fa-solid fa-strikethrough",
+        title: "Barrer",
+        onclick: (ctx) => {
+            ctx.editor.wrapInsideTag("s");
+        },
+    }),
+    subscript: (context) => new EdithButton(context, {
+        icon: "fa-solid fa-subscript",
+        title: "Indice",
+        onclick: (ctx) => {
+            ctx.editor.wrapInsideTag("sub");
+        },
+    }),
+    superscript: (context) => new EdithButton(context, {
+        icon: "fa-solid fa-superscript",
+        title: "Exposant",
+        onclick: (ctx) => {
+            ctx.editor.wrapInsideTag("sup");
+        },
+    }),
+    nbsp: (context) => new EdithButton(context, {
+        icon: "edith-btn-nbsp",
+        title: "Ajouter une espace insécable",
+        onclick: (ctx) => {
+            ctx.editor.replaceByHtml('<span class="edith-nbsp" contenteditable="false">¶</span>');
+        },
+    }),
+    clear: (context) => new EdithButton(context, {
+        icon: "fa-solid fa-eraser",
+        title: "Effacer la mise en forme",
+        onclick: (ctx) => {
+            ctx.editor.clearStyle();
+        },
+    }),
+    link: (context) => new EdithButton(context, {
+        icon: "fa-solid fa-link",
+        title: "Lien",
+        onclick: (ctx) => {
+            ctx.editor.insertLink();
+        },
+    }),
+    codeview: (context) => new EdithButton(context, {
+        icon: "fa-solid fa-code",
+        title: "Afficher le code HTML",
+        onclick: (ctx) => {
+            ctx.editor.toggleCodeView();
+        },
+        showOnCodeView: true,
+    }),
+});

package/dist/ui/editor.d.ts

@@ -0,0 +1,37 @@
+import { throttle } from "@lesjoursfr/browser-tools";
+import { Edith } from "../edith.js";
+export declare class EdithEditor {
+    private el;
+    private ctx;
+    private content;
+    private height;
+    private resizable;
+    private mode;
+    private visualEditor;
+    private codeEditor;
+    private codeMirror;
+    private history;
+    throttledSnapshots: ReturnType<typeof throttle>;
+    constructor(ctx: Edith, options: {
+        initialContent: string;
+        height: number;
+        resizable: boolean;
+    });
+    render(): HTMLDivElement;
+    getVisualEditorElement(): HTMLElement;
+    getCodeEditorElement(): HTMLElement;
+    setContent(content: string): void;
+    getContent(): string;
+    takeSnapshot(): void;
+    restoreSnapshot(): void;
+    wrapInsideTag<K extends keyof HTMLElementTagNameMap>(tag: K): void;
+    replaceByHtml(html: string): void;
+    clearStyle(): void;
+    insertLink(): void;
+    toggleCodeView(): void;
+    onKeyEvent(e: KeyboardEvent): void;
+    private _processKeyEvent;
+    private _processKeyEventWithMeta;
+    onPasteEvent(e: ClipboardEvent): void;
+    destroy(): void;
+}