@lesjoursfr/edith 2.1.0 → 2.1.2

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 (i !== 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 };

package/src/ui/modal.js

@@ -1,151 +0,0 @@
-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 };