@lesjoursfr/edith 0.1.0

package/src/ui/button.js

@@ -0,0 +1,197 @@
+import { createPopper } from "@popperjs/core";
+import { Events } from "../core/event.js";
+import { EditorModes } from "../core/mode.js";
+
+function onButtonClick(context, kind, event) {
+  switch (kind) {
+    case "bold":
+      context.editor.wrapInsideTag("b");
+      break;
+    case "italic":
+      context.editor.wrapInsideTag("i");
+      break;
+    case "underline":
+      context.editor.wrapInsideTag("u");
+      break;
+    case "strikethrough":
+      context.editor.wrapInsideTag("s");
+      break;
+    case "subscript":
+      context.editor.wrapInsideTag("sub");
+      break;
+    case "superscript":
+      context.editor.wrapInsideTag("sup");
+      break;
+    case "nbsp":
+      context.editor.replaceByHtml('<span class="edith-nbsp" contenteditable="false">¶</span>');
+      break;
+    case "clear":
+      context.editor.clearStyle();
+      break;
+    case "link":
+      context.editor.insertLink();
+      break;
+    case "codeview":
+      context.editor.toggleCodeView();
+      break;
+  }
+}
+
+function EdithButton(ctx, options) {
+  this.ctx = ctx;
+  this.icon = options.icon;
+  this.title = options.title;
+  this.onclick = options.onclick;
+  this.showOnCodeView = options.showOnCodeView === true;
+}
+
+EdithButton.prototype.click = function (event) {
+  event.preventDefault();
+  if (typeof this.onclick === "string") {
+    onButtonClick(this.ctx, this.onclick, event);
+  } else {
+    this.onclick(this.ctx, event);
+  }
+};
+
+EdithButton.prototype.showTooltip = function () {
+  if (this.popper !== undefined) {
+    return;
+  }
+
+  // Add the tooltip content to the DOM
+  this.popperEl = document.createElement("div");
+  this.popperEl.setAttribute("class", "edith-tooltip");
+  this.popperEl.textContent = this.title;
+  const arrowEl = document.createElement("div");
+  arrowEl.setAttribute("class", "arrow");
+  arrowEl.setAttribute("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],
+        },
+      },
+    ],
+  });
+};
+
+EdithButton.prototype.hideTooltip = function () {
+  if (this.popper === undefined) {
+    return;
+  }
+
+  // Destroy the tooltip
+  this.popper.destroy();
+  this.popper = undefined;
+
+  // Remove the tooltip content from the DOM
+  this.popperEl.remove();
+};
+
+EdithButton.prototype.onEditorModeChange = function (event) {
+  if (event.detail.mode === EditorModes.Code) {
+    this.el.setAttribute("disabled", "disabled");
+  } else {
+    this.el.removeAttribute("disabled");
+  }
+};
+
+EdithButton.prototype.render = function () {
+  // Create the button
+  this.el = document.createElement("button");
+  this.el.setAttribute("class", `edith-btn ${this.icon}`);
+  this.el.setAttribute("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;
+};
+
+const EdithButtons = {
+  bold: (context) =>
+    new EdithButton(context, {
+      icon: "fa-solid fa-bold",
+      title: "Gras",
+      onclick: "bold",
+    }),
+  italic: (context) =>
+    new EdithButton(context, {
+      icon: "fa-solid fa-italic",
+      title: "Italique",
+      onclick: "italic",
+    }),
+  underline: (context) =>
+    new EdithButton(context, {
+      icon: "fa-solid fa-underline",
+      title: "Souligner",
+      onclick: "underline",
+    }),
+  strikethrough: (context) =>
+    new EdithButton(context, {
+      icon: "fa-solid fa-strikethrough",
+      title: "Barrer",
+      onclick: "strikethrough",
+    }),
+  subscript: (context) =>
+    new EdithButton(context, {
+      icon: "fa-solid fa-subscript",
+      title: "Indice",
+      onclick: "subscript",
+    }),
+  superscript: (context) =>
+    new EdithButton(context, {
+      icon: "fa-solid fa-superscript",
+      title: "Exposant",
+      onclick: "superscript",
+    }),
+  nbsp: (context) =>
+    new EdithButton(context, {
+      icon: "edith-btn-nbsp",
+      title: "Ajouter une espace insécable",
+      onclick: "nbsp",
+    }),
+  clear: (context) =>
+    new EdithButton(context, {
+      icon: "fa-solid fa-eraser",
+      title: "Effacer la mise en forme",
+      onclick: "clear",
+    }),
+  link: (context) =>
+    new EdithButton(context, {
+      icon: "fa-solid fa-link",
+      title: "Lien",
+      onclick: "link",
+    }),
+  codeview: (context) =>
+    new EdithButton(context, {
+      icon: "fa-solid fa-code",
+      title: "Afficher le code HTML",
+      onclick: "codeview",
+      showOnCodeView: true,
+    }),
+};
+
+export { EdithButton, EdithButtons };

package/src/ui/editor.js

@@ -0,0 +1,348 @@
+import { EditorView, basicSetup } from "codemirror";
+import { html } from "@codemirror/lang-html";
+import { hasClass, hasTagName } from "../core/dom.js";
+import {
+  wrapInsideTag,
+  replaceSelectionByHtml,
+  wrapInsideLink,
+  clearSelectionStyle,
+  cleanPastedHtml,
+} from "../core/edit.js";
+import { Events } from "../core/event.js";
+import { History } from "../core/history.js";
+import { EditorModes } from "../core/mode.js";
+import { getSelection, restoreSelection } from "../core/range.js";
+import { throttle } from "../core/throttle.js";
+import { EdithModal, createInputModalField, createCheckboxModalField } from "./modal.js";
+
+function EdithEditor(ctx, options) {
+  this.ctx = ctx;
+  this.content = options.initialContent || "";
+  this.height = options.height || 80;
+  this.mode = EditorModes.Visual;
+  this.editors = {};
+  this.codeMirror = null;
+  this.history = new History();
+  this.throttledSnapshots = throttle(() => this.takeSnapshot(), 3000, { leading: false, trailing: true });
+
+  // Replace   by the string we use as a visual return
+  this.content = this.content.replace(/&nbsp;/g, '<span class="edith-nbsp" contenteditable="false">¶</span>');
+}
+
+EdithEditor.prototype.render = function () {
+  // Create a wrapper for the editor
+  const editorWrapper = document.createElement("div");
+  editorWrapper.setAttribute("class", "edith-editing-area");
+  editorWrapper.setAttribute("style", `height: ${this.height}px`);
+
+  // Create the visual editor
+  this.editors.visual = document.createElement("div");
+  this.editors.visual.setAttribute("class", "edith-visual");
+  this.editors.visual.setAttribute("contenteditable", "true");
+  this.editors.visual.innerHTML = this.content;
+  editorWrapper.append(this.editors.visual);
+
+  // Create the code editor
+  this.editors.code = document.createElement("div");
+  this.editors.code.setAttribute("class", "edith-code edith-hidden");
+  editorWrapper.append(this.editors.code);
+
+  // Bind events
+  const keyEventsListener = this.onKeyEvent.bind(this);
+  this.editors.visual.addEventListener("keydown", keyEventsListener);
+  this.editors.visual.addEventListener("keyup", keyEventsListener);
+  const pasteEventListener = this.onPasteEvent.bind(this);
+  this.editors.visual.addEventListener("paste", pasteEventListener);
+
+  // Return the wrapper
+  return editorWrapper;
+};
+
+EdithEditor.prototype.setContent = function (content) {
+  // Replace &nbsp; by the string we use as a visual return
+  content = content.replace(/&nbsp;/g, '<span class="edith-nbsp" contenteditable="false">¶</span>');
+
+  // Check the current mode
+  if (this.mode === EditorModes.Visual) {
+    // Update the visual editor content
+    this.editors.visual.innerHTML = content;
+  } else {
+    // Update the code editor content
+    this.codeMirror.dispatch({
+      changes: { from: 0, to: this.codeMirror.state.doc.length, insert: content },
+    });
+  }
+};
+
+EdithEditor.prototype.getContent = function () {
+  // Get the visual editor content or the code editor content
+  const code =
+    this.mode === EditorModes.Visual
+      ? this.editors.visual.innerHTML
+      : this.codeMirror.state.doc
+          .toJSON()
+          .map((line) => line.trim())
+          .join("\n");
+
+  // Check if there is something in the editor
+  if (code === "<p><br></p>") {
+    return "";
+  }
+
+  // Return clean code
+  return code
+    .replace(/\u200B/gi, "")
+    .replace(/<\/p>\s*<p>/gi, "<br>")
+    .replace(/(<p>|<\/p>)/gi, "")
+    .replace(/<span[^>]+class="edith-nbsp"[^>]*>[^<]*<\/span>/gi, "&nbsp;")
+    .replace(/(?:<br\s?\/?>)+$/gi, "");
+};
+
+EdithEditor.prototype.takeSnapshot = function () {
+  this.history.push(this.editors.visual.innerHTML);
+};
+
+EdithEditor.prototype.restoreSnapshot = function () {
+  this.editors.visual.innerHTML = this.history.pop();
+};
+
+EdithEditor.prototype.wrapInsideTag = function (tag) {
+  wrapInsideTag(tag);
+  this.takeSnapshot();
+};
+
+EdithEditor.prototype.replaceByHtml = function (html) {
+  replaceSelectionByHtml(html);
+  this.takeSnapshot();
+};
+
+EdithEditor.prototype.clearStyle = function () {
+  clearSelectionStyle();
+  this.takeSnapshot();
+};
+
+EdithEditor.prototype.insertLink = function () {
+  // Get the caret position
+  const { sel, range } = getSelection();
+
+  // Check if the user has selected something
+  if (range === undefined) return false;
+
+  // Show the modal
+  const modal = new EdithModal(this.ctx, {
+    title: "Insérer un lien",
+    fields: [
+      createInputModalField("Texte à afficher", "text", range.toString()),
+      createInputModalField("URL du lien", "href"),
+      createCheckboxModalField("Ouvrir dans une nouvelle fenêtre", "openInNewTab", true),
+    ],
+    callback: (data) => {
+      // Check if we have something
+      if (data === null) {
+        // Nothing to do
+        return;
+      }
+
+      // Restore the selection
+      restoreSelection({ sel, range });
+
+      // Insert a link
+      wrapInsideLink(data.text, data.href, data.openInNewTab);
+    },
+  });
+  modal.show();
+};
+
+EdithEditor.prototype.toggleCodeView = function () {
+  // Check the current mode
+  if (this.mode === EditorModes.Visual) {
+    // Switch mode
+    this.mode = EditorModes.Code;
+
+    // Hide the visual editor
+    this.editors.visual.classList.add("edith-hidden");
+
+    // Display the code editor
+    this.editors.code.classList.remove("edith-hidden");
+    const codeMirrorEl = document.createElement("div");
+    this.editors.code.append(codeMirrorEl);
+    this.codeMirror = new EditorView({
+      doc: this.editors.visual.innerHTML,
+      extensions: [basicSetup, EditorView.lineWrapping, html({ matchClosingTags: true, autoCloseTags: true })],
+      parent: codeMirrorEl,
+    });
+  } else {
+    // Switch mode
+    this.mode = EditorModes.Visual;
+
+    // Hide the code editor
+    this.editors.code.classList.add("edith-hidden");
+
+    // Display the visual editor
+    this.editors.visual.classList.remove("edith-hidden");
+    this.editors.visual.innerHTML = this.codeMirror.state.doc
+      .toJSON()
+      .map((line) => line.trim())
+      .join("\n");
+    this.codeMirror.destroy();
+    this.codeMirror = null;
+    this.editors.code.innerHTML = "";
+  }
+
+  // Trigger an event with the new mode
+  this.ctx.trigger(Events.modeChanged, { mode: this.mode });
+};
+
+EdithEditor.prototype.onKeyEvent = function (e) {
+  // Check if a Meta key is pressed
+  const prevent = e.metaKey || e.ctrlKey ? this._processKeyEventWithMeta(e) : this._processKeyEvent(e);
+
+  // Check if we must stop the event here
+  if (prevent) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+};
+
+EdithEditor.prototype._processKeyEvent = function (e) {
+  // Check the key code
+  switch (e.keyCode) {
+    case 13: // Enter : 13
+      if (e.type === "keydown") {
+        this.replaceByHtml("<br />"); // Insert a line break
+      }
+      return true;
+  }
+
+  // Save the editor content
+  this.throttledSnapshots();
+
+  // Return false
+  return false;
+};
+
+EdithEditor.prototype._processKeyEventWithMeta = function (e) {
+  // Check the key code
+  switch (e.keyCode) {
+    case 13: // Enter : 13
+      if (e.type === "keydown") {
+        this.replaceByHtml("<br />"); // Insert a line break
+      }
+      return true;
+
+    case 32: // Space : 32
+      if (e.type === "keydown") {
+        this.replaceByHtml('<span class="edith-nbsp" contenteditable="false">¶</span>'); // Insert a non-breaking space
+      }
+      return true;
+
+    case 66: // b : 66
+      if (e.type === "keydown") {
+        this.wrapInsideTag("b"); // Toggle bold
+      }
+      return true;
+
+    case 73: // i : 73
+      if (e.type === "keydown") {
+        this.wrapInsideTag("i"); // Toggle italic
+      }
+      return true;
+
+    case 85: // u : 85
+      if (e.type === "keydown") {
+        this.wrapInsideTag("u"); // Toggle underline
+      }
+      return true;
+
+    case 83: // s : 83
+      if (e.type === "keydown") {
+        this.wrapInsideTag("s"); // Toggle strikethrough
+      }
+      return true;
+
+    case 90: // z : 90
+      if (e.type === "keydown") {
+        this.restoreSnapshot(); // Undo
+      }
+      return true;
+  }
+
+  // Return false
+  return false;
+};
+
+EdithEditor.prototype.onPasteEvent = function (e) {
+  // Prevent default
+  e.preventDefault();
+  e.stopPropagation();
+
+  // Get the caret position
+  const { sel, range } = getSelection();
+
+  // Check if the user has selected something
+  if (range === undefined) return false;
+
+  // Create the fragment to insert
+  const frag = document.createDocumentFragment();
+
+  // Check if we try to paste HTML content
+  if (!e.clipboardData.types.includes("text/html")) {
+    // Get the content as a plain text & split it by lines
+    const lines = e.clipboardData.getData("text/plain").split(/[\r\n]+/g);
+
+    // Add the content as text nodes with a <br> node between each line
+    for (let i = 0; i < lines.length - 1; i++) {
+      if (frag.length !== 0) {
+        frag.append(document.createElement("br"));
+      }
+      frag.append(document.createTextNode(lines[i]));
+    }
+  } else {
+    // Detect style blocs in parents
+    let dest = sel.anchorNode;
+    const style = { B: false, I: false, U: false, S: false, Q: false };
+    while (!hasClass(dest.parentNode, "edith-visual")) {
+      // Get the parent
+      dest = dest.parentNode;
+
+      // Check if it's a style tag
+      if (hasTagName(dest, ["b", "i", "u", "s", "q"])) {
+        // Update the style
+        style[dest.tagName] = true;
+      }
+    }
+
+    // We have HTML content
+    let html = e.clipboardData.getData("text/html").replace(/[\r\n]+/g, " ");
+
+    // Wrap the HTML content into <html><body></body></html>
+    if (!/^<html>\s*<body>/.test(html)) {
+      html = "<html><body>" + html + "</body></html>";
+    }
+
+    // Clean the content
+    const contents = cleanPastedHtml(html, style);
+
+    // Add the content to the frgament
+    frag.append(...contents.childNodes);
+  }
+
+  // Replace the current selection by the pasted content
+  sel.deleteFromDocument();
+  range.insertNode(frag);
+};
+
+EdithEditor.prototype.destroy = function () {
+  // Check the current mode
+  if (this.mode === EditorModes.Visual) {
+    // Remove the visual editor
+    this.editors.visual.remove();
+  } else {
+    // Remove the code editor
+    this.codeMirror.destroy();
+    this.codeMirror = null;
+    this.editors.code.remove();
+  }
+};
+
+export { EdithEditor };

package/src/ui/modal.js

@@ -0,0 +1,151 @@
+const EdithModalFieldType = Object.freeze({
+  input: 1,
+  checkbox: 2,
+});
+
+function EdithModal(ctx, options) {
+  this.ctx = ctx;
+  this.title = options.title;
+  this.fields = options.fields || [];
+  this.callback = options.callback;
+}
+
+EdithModal.prototype.cancel = function (event) {
+  event.preventDefault();
+
+  // Call the callback with a null value
+  this.callback(null);
+
+  // Close the modal
+  this.close();
+};
+
+EdithModal.prototype.submit = function (event) {
+  event.preventDefault();
+
+  // Call the callback with the input & checkboxes values
+  const payload = {};
+  for (const el of this.el.querySelectorAll("input")) {
+    payload[el.getAttribute("name")] = el.getAttribute("type") === "checkbox" ? el.checked : el.value;
+  }
+  this.callback(payload);
+
+  // Close the modal
+  this.close();
+};
+
+EdithModal.prototype.close = function () {
+  // Remove the element from the dom
+  this.el.remove();
+};
+
+EdithModal.prototype.show = function () {
+  // Create the modal
+  this.el = document.createElement("div");
+  this.el.setAttribute("class", "edith-modal");
+
+  // Create the header
+  const header = document.createElement("div");
+  header.setAttribute("class", "edith-modal-header");
+  const title = document.createElement("span");
+  title.setAttribute("class", "edith-modal-title");
+  title.textContent = this.title;
+  header.append(title);
+
+  // Create the content
+  const content = document.createElement("div");
+  content.setAttribute("class", "edith-modal-content");
+  for (const field of this.fields) {
+    switch (field.fieldType) {
+      case EdithModalFieldType.input:
+        content.append(renderInputModalField(field));
+        break;
+      case EdithModalFieldType.checkbox:
+        content.append(renderCheckboxModalField(field));
+        break;
+      default:
+        throw new Error(`Unknown fieldType ${field.fieldType}`);
+    }
+  }
+
+  // Create the footer
+  const footer = document.createElement("div");
+  footer.setAttribute("class", "edith-modal-footer");
+  const cancel = document.createElement("button");
+  cancel.setAttribute("class", "edith-modal-cancel");
+  cancel.setAttribute("type", "button");
+  cancel.textContent = "Annuler";
+  footer.append(cancel);
+  const submit = document.createElement("button");
+  submit.setAttribute("class", "edith-modal-submit");
+  submit.setAttribute("type", "button");
+  submit.textContent = "Valider";
+  footer.append(submit);
+
+  // Append everything
+  this.el.append(header);
+  this.el.append(content);
+  this.el.append(footer);
+
+  // Add the modal to the editor
+  this.ctx.modals.append(this.el);
+
+  // Bind events
+  cancel.onclick = this.cancel.bind(this);
+  submit.onclick = this.submit.bind(this);
+
+  // Return the modal
+  return this.el;
+};
+
+function createInputModalField(label, name, initialValue = null) {
+  return {
+    fieldType: EdithModalFieldType.input,
+    label,
+    name,
+    initialValue,
+  };
+}
+
+function renderInputModalField(field) {
+  const el = document.createElement("div");
+  el.setAttribute("class", "edith-modal-input");
+  const label = document.createElement("label");
+  label.textContent = field.label;
+  const input = document.createElement("input");
+  input.setAttribute("name", field.name);
+  input.setAttribute("type", "text");
+  if (field.initialValue !== null) {
+    input.value = field.initialValue;
+  }
+  el.append(label);
+  el.append(input);
+  return el;
+}
+
+function createCheckboxModalField(label, name, initialState = false) {
+  return {
+    fieldType: EdithModalFieldType.checkbox,
+    label,
+    name,
+    initialState,
+  };
+}
+
+function renderCheckboxModalField(field) {
+  const el = document.createElement("div");
+  el.setAttribute("class", "edith-modal-checkbox");
+  const label = document.createElement("label");
+  label.textContent = field.label;
+  const input = document.createElement("input");
+  input.setAttribute("name", field.name);
+  input.setAttribute("type", "checkbox");
+  if (field.initialState) {
+    input.checked = true;
+  }
+  label.prepend(input);
+  el.append(label);
+  return el;
+}
+
+export { EdithModal, createInputModalField, createCheckboxModalField };