@lesjoursfr/edith 2.1.0 → 2.1.2

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/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";

package/src/ui/button.ts

@@ -0,0 +1,197 @@
+import { createPopper } from "@popperjs/core";
+import { EditorModes, Events, createNodeWith } from "../core/index.js";
+import { EdithButtonsOption } from "../edith-options.js";
+import { Edith } from "../edith.js";
+
+export type EdithButtonCallback = (ctx: Edith, event: Event) => void;
+
+export class EdithButton {
+  private el!: HTMLButtonElement;
+  private ctx: Edith;
+  private icon: string;
+  private title: string;
+  private onclick: EdithButtonCallback;
+  private showOnCodeView: boolean;
+  private popperEl: HTMLDivElement | undefined;
+  private popper: ReturnType<typeof createPopper> | undefined;
+
+  constructor(
+    ctx: Edith,
+    options: { icon: string; title: string; onclick: EdithButtonCallback; showOnCodeView?: boolean }
+  ) {
+    this.ctx = ctx;
+    this.icon = options.icon;
+    this.title = options.title;
+    this.onclick = options.onclick;
+    this.showOnCodeView = options.showOnCodeView === true;
+  }
+
+  public click(event: Event): void {
+    // Prevent default
+    event.preventDefault();
+
+    // Call the callback
+    this.onclick(this.ctx, event);
+  }
+
+  public showTooltip(): void {
+    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],
+          },
+        },
+      ],
+    });
+  }
+
+  public hideTooltip(): void {
+    if (this.popper === undefined) {
+      return;
+    }
+
+    // Destroy the tooltip
+    this.popper.destroy();
+    this.popper = undefined;
+
+    // Remove the tooltip content from the DOM
+    this.popperEl?.remove();
+  }
+
+  public onEditorModeChange(event: CustomEvent): void {
+    if (event.detail.mode === EditorModes.Code) {
+      this.el.setAttribute("disabled", "disabled");
+    } else {
+      this.el.removeAttribute("disabled");
+    }
+  }
+
+  public render(): HTMLButtonElement {
+    // 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) as EventListener);
+    }
+
+    // Return the button
+    return this.el;
+  }
+}
+
+export const EdithButtons = Object.freeze({
+  bold: (context: Edith) =>
+    new EdithButton(context, {
+      icon: "fa-solid fa-bold",
+      title: "Gras",
+      onclick: (ctx: Edith) => {
+        ctx.editor.wrapInsideTag("b");
+      },
+    }),
+  italic: (context: Edith) =>
+    new EdithButton(context, {
+      icon: "fa-solid fa-italic",
+      title: "Italique",
+      onclick: (ctx: Edith) => {
+        ctx.editor.wrapInsideTag("i");
+      },
+    }),
+  underline: (context: Edith) =>
+    new EdithButton(context, {
+      icon: "fa-solid fa-underline",
+      title: "Souligner",
+      onclick: (ctx: Edith) => {
+        ctx.editor.wrapInsideTag("u");
+      },
+    }),
+  strikethrough: (context: Edith) =>
+    new EdithButton(context, {
+      icon: "fa-solid fa-strikethrough",
+      title: "Barrer",
+      onclick: (ctx: Edith) => {
+        ctx.editor.wrapInsideTag("s");
+      },
+    }),
+  subscript: (context: Edith) =>
+    new EdithButton(context, {
+      icon: "fa-solid fa-subscript",
+      title: "Indice",
+      onclick: (ctx: Edith) => {
+        ctx.editor.wrapInsideTag("sub");
+      },
+    }),
+  superscript: (context: Edith) =>
+    new EdithButton(context, {
+      icon: "fa-solid fa-superscript",
+      title: "Exposant",
+      onclick: (ctx: Edith) => {
+        ctx.editor.wrapInsideTag("sup");
+      },
+    }),
+  nbsp: (context: Edith) =>
+    new EdithButton(context, {
+      icon: "edith-btn-nbsp",
+      title: "Ajouter une espace insécable",
+      onclick: (ctx: Edith) => {
+        ctx.editor.replaceByHtml('<span class="edith-nbsp" contenteditable="false">¶</span>');
+      },
+    }),
+  clear: (context: Edith) =>
+    new EdithButton(context, {
+      icon: "fa-solid fa-eraser",
+      title: "Effacer la mise en forme",
+      onclick: (ctx: Edith) => {
+        ctx.editor.clearStyle();
+      },
+    }),
+  link: (context: Edith) =>
+    new EdithButton(context, {
+      icon: "fa-solid fa-link",
+      title: "Lien",
+      onclick: (ctx: Edith) => {
+        ctx.editor.insertLink();
+      },
+    }),
+  codeview: (context: Edith) =>
+    new EdithButton(context, {
+      icon: "fa-solid fa-code",
+      title: "Afficher le code HTML",
+      onclick: (ctx: Edith) => {
+        ctx.editor.toggleCodeView();
+      },
+      showOnCodeView: true,
+    }),
+} as EdithButtonsOption);