@lesjoursfr/edith 2.0.2 → 2.1.2

package/src/ui/button.js

@@ -1,200 +0,0 @@
-import { createPopper } from "@popperjs/core";
-import { Events } from "../core/event.js";
-import { EditorModes } from "../core/mode.js";
-
-function onButtonClick(context, kind) {
-  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) {
-  // Prevent default
-  event.preventDefault();
-
-  // Check if the onclick attribute is a internal function ID or a custom function
-  if (typeof this.onclick === "string") {
-    onButtonClick(this.ctx, this.onclick);
-  } 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

@@ -1,392 +0,0 @@
-import { EditorView, basicSetup } from "codemirror";
-import { html } from "@codemirror/lang-html";
-import {
-  hasClass,
-  hasTagName,
-  createNodeWith,
-  isSelfClosing,
-  removeNodesRecursively,
-  unwrapNode,
-} 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, isSelectionInsideNode } 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.resizable = options.resizable || false;
-  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
-  this.editors.wrapper = document.createElement("div");
-  this.editors.wrapper.setAttribute("class", "edith-editing-area");
-  this.editors.wrapper.setAttribute(
-    "style",
-    this.resizable ? `min-height: ${this.height}px; resize: vertical` : `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.setAttribute(
-    "style",
-    this.resizable ? `min-height: ${this.height - 10}px` : `height: ${this.height - 10}px`
-  );
-  this.editors.visual.innerHTML = this.content;
-  this.editors.wrapper.append(this.editors.visual);
-
-  // Create the code editor
-  this.editors.code = document.createElement("div");
-  this.editors.code.setAttribute("class", "edith-code edith-hidden");
-  this.editors.wrapper.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 this.editors.wrapper;
-};
-
-EdithEditor.prototype.getVisualEditorElement = function () {
-  return this.editors.visual;
-};
-
-EdithEditor.prototype.getCodeEditorElement = function () {
-  return this.editors.code;
-};
-
-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 "";
-  }
-
-  // Remove empty tags
-  const placeholder = createNodeWith("div", { innerHTML: code });
-  removeNodesRecursively(
-    placeholder,
-    (el) => el.nodeType === Node.ELEMENT_NODE && !isSelfClosing(el.tagName) && el.textContent.length === 0
-  );
-
-  // Remove any style attribute
-  for (const el of placeholder.querySelectorAll("[style]")) {
-    el.removeAttribute("style");
-  }
-
-  // Unwrap span without attributes
-  for (const el of placeholder.querySelectorAll("span")) {
-    if (el.attributes.length === 0) {
-      unwrapNode(el);
-    }
-  }
-
-  // Return clean code
-  return placeholder.innerHTML
-    .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) {
-  if (isSelectionInsideNode(this.editors.visual)) {
-    wrapInsideTag(tag);
-    this.takeSnapshot();
-  }
-};
-
-EdithEditor.prototype.replaceByHtml = function (html) {
-  if (isSelectionInsideNode(this.editors.visual)) {
-    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; 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 (dest !== null && !hasClass(dest, "edith-visual")) {
-      // Check if it's a style tag
-      if (hasTagName(dest, ["b", "i", "u", "s", "q"])) {
-        // Update the style
-        style[dest.tagName] = true;
-      }
-
-      // Get the parent
-      dest = dest.parentNode;
-    }
-
-    // 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 () {
-  if (this.mode === EditorModes.Code) {
-    this.codeMirror.destroy();
-    this.codeMirror = null;
-  }
-
-  // Remove editors from the DOM
-  this.editors.wrapper.remove();
-  this.editors = {};
-};
-
-export { EdithEditor };