@lesjoursfr/edith 2.1.0 → 2.1.3

package/src/core/{throttle.js → throttle.ts}

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Based on lodash version of throttle : https://github.com/lodash/lodash/blob/master/throttle.js
  */
@@ -22,48 +23,56 @@
  * @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;
+function debounce<F extends (...args: any) => any>(
+  func: F,
+  wait: number,
+  options: { leading?: boolean; trailing?: boolean; maxWait?: number } = {}
+): (...args: Parameters<F>) => ReturnType<F> {
+  let lastArgs: Parameters<F> | undefined,
+    lastThis: any | undefined,
+    result: ReturnType<F> | undefined,
+    timerId: ReturnType<typeof setTimeout> | undefined,
+    lastCallTime: number | undefined;
+
+  let lastInvokeTime: number = 0;
   const leading = !!options.leading;
   const maxing = "maxWait" in options;
-  const maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : undefined;
+  const maxWait = maxing ? Math.max(options.maxWait || 0, wait) : undefined;
   const trailing = "trailing" in options ? !!options.trailing : true;
 
-  function invokeFunc(time) {
+  function invokeFunc(time: number): ReturnType<F> {
     const args = lastArgs;
     const thisArg = lastThis;
 
     lastArgs = lastThis = undefined;
     lastInvokeTime = time;
-    result = func.apply(thisArg, args);
-    return result;
+    result = func.apply(thisArg!, args!);
+    return result!;
   }
 
-  function startTimer(pendingFunc, wait) {
+  function startTimer(pendingFunc: () => void, wait: number): ReturnType<typeof setTimeout> {
     return setTimeout(pendingFunc, wait);
   }
 
-  function leadingEdge(time) {
+  function leadingEdge(time: number): ReturnType<F> {
     // 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;
+    return leading ? invokeFunc(time) : result!;
   }
 
-  function remainingWait(time) {
-    const timeSinceLastCall = time - lastCallTime;
+  function remainingWait(time: number): number {
+    const timeSinceLastCall = time - lastCallTime!;
     const timeSinceLastInvoke = time - lastInvokeTime;
     const timeWaiting = wait - timeSinceLastCall;
 
-    return maxing ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
+    return maxing ? Math.min(timeWaiting, maxWait! - timeSinceLastInvoke) : timeWaiting;
   }
 
-  function shouldInvoke(time) {
-    const timeSinceLastCall = time - lastCallTime;
+  function shouldInvoke(time: number): boolean {
+    const timeSinceLastCall = time - lastCallTime!;
     const timeSinceLastInvoke = time - lastInvokeTime;
 
     // Either this is the first call, activity has stopped and we're at the
@@ -73,11 +82,11 @@ function debounce(func, wait, options = {}) {
       lastCallTime === undefined ||
       timeSinceLastCall >= wait ||
       timeSinceLastCall < 0 ||
-      (maxing && timeSinceLastInvoke >= maxWait)
+      (maxing && timeSinceLastInvoke >= maxWait!)
     );
   }
 
-  function timerExpired() {
+  function timerExpired(): ReturnType<F> | undefined {
     const time = Date.now();
     if (shouldInvoke(time)) {
       return trailingEdge(time);
@@ -86,7 +95,7 @@ function debounce(func, wait, options = {}) {
     timerId = startTimer(timerExpired, remainingWait(time));
   }
 
-  function trailingEdge(time) {
+  function trailingEdge(time: number): ReturnType<F> {
     timerId = undefined;
 
     // Only invoke if we have `lastArgs` which means `func` has been
@@ -95,14 +104,15 @@ function debounce(func, wait, options = {}) {
       return invokeFunc(time);
     }
     lastArgs = lastThis = undefined;
-    return result;
+    return result!;
   }
 
-  function debounced(...args) {
+  function debounced(this: any, ...args: Parameters<F>): ReturnType<F> {
     const time = Date.now();
     const isInvoking = shouldInvoke(time);
 
     lastArgs = args;
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     lastThis = this;
     lastCallTime = time;
 
@@ -119,7 +129,7 @@ function debounce(func, wait, options = {}) {
     if (timerId === undefined) {
       timerId = startTimer(timerExpired, wait);
     }
-    return result;
+    return result!;
   }
 
   return debounced;
@@ -144,7 +154,11 @@ function debounce(func, wait, options = {}) {
  * @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 = {}) {
+function throttle<F extends (...args: any) => any>(
+  func: F,
+  wait: number,
+  options: { leading?: boolean; trailing?: boolean } = {}
+): (...args: Parameters<F>) => ReturnType<F> {
   const leading = "leading" in options ? !!options.leading : true;
   const trailing = "trailing" in options ? !!options.trailing : true;
 

package/src/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/src/edith-options.ts

@@ -0,0 +1,75 @@
+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 const DefaultOptions: EdithOptions = {
+  /**
+   * 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/src/edith.ts

@@ -0,0 +1,98 @@
+import { Events, addClass, createNodeWith, off, on, removeClass, trigger } from "./core/index.js";
+import { DefaultOptions, EdithButtonsOption, EdithOptions, EdithToolbarOption } from "./edith-options.js";
+import { EdithButton, EdithButtons, EdithEditor } from "./ui/index.js";
+
+declare global {
+  interface HTMLElement {
+    edith?: Edith;
+  }
+}
+
+export { EdithButton };
+
+export class Edith {
+  private readonly element: HTMLElement;
+  public readonly toolbar: HTMLDivElement;
+  public readonly editor: EdithEditor;
+  public 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>) {
+    // 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: EdithButtonsOption = options.buttons ?? DefaultOptions.buttons;
+    const toolbar: EdithToolbarOption = 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);
+  }
+
+  public on(type: string, listener: EventListenerOrEventListenerObject): void {
+    on(this.element, type, listener);
+  }
+
+  public off(type: string, listener: EventListenerOrEventListenerObject): void {
+    off(this.element, type, listener);
+  }
+
+  public trigger(type: Events, payload?: { [key: string]: unknown }): void {
+    trigger(this.element, type, payload);
+  }
+
+  public setContent(content: string): void {
+    this.editor.setContent(content);
+  }
+
+  public getContent(): string {
+    return this.editor.getContent();
+  }
+
+  public destroy(): void {
+    removeClass(this.element, "edith");
+    this.modals.remove();
+    this.editor.destroy();
+    this.toolbar.remove();
+    this.element.remove();
+  }
+}

package/src/index.ts

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