@lesjoursfr/edith 0.1.0

package/src/core/history.js

@@ -0,0 +1,27 @@
+function History() {
+  this.buffer = [];
+}
+
+/**
+ * Add a new snapshot to the history.
+ * @param {string} doc the element to save
+ */
+History.prototype.push = function (doc) {
+  this.buffer.push(doc);
+  if (this.buffer.length > 20) {
+    this.buffer.shift();
+  }
+};
+
+/**
+ * Get the last saved element
+ * @returns {(string|null)} the last saved element or null
+ */
+History.prototype.pop = function () {
+  if (this.buffer.length === 0) {
+    return null;
+  }
+  return this.buffer.pop();
+};
+
+export { History };

package/src/core/mode.js

@@ -0,0 +1,4 @@
+export const EditorModes = Object.freeze({
+  Visual: 1,
+  Code: 2,
+});

package/src/core/range.js

@@ -0,0 +1,64 @@
+/**
+ * @typedef {Object} CurrentSelection
+ * @property {Selection} sel the current selection
+ * @property {(Range|undefined)} range the current range
+ */
+
+/**
+ * Get the current selection.
+ * @returns {CurrentSelection} the current selection
+ */
+export function getSelection() {
+  const sel = window.getSelection();
+
+  return { sel, range: sel.rangeCount ? sel.getRangeAt(0) : undefined };
+}
+
+/**
+ * Restore the given selection.
+ * @param {Selection} selection the selection to restore
+ */
+export function restoreSelection(selection) {
+  const sel = window.getSelection();
+  sel.removeAllRanges();
+  sel.addRange(selection.range);
+}
+
+/**
+ * Move the cursor inside the node.
+ * @param {Node} target the targeted node
+ */
+export function moveCursorInsideNode(target) {
+  const range = document.createRange();
+  const sel = window.getSelection();
+  range.setStart(target, 1);
+  range.collapse(true);
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+
+/**
+ * Move the cursor after the node.
+ * @param {Node} target the targeted node
+ */
+export function moveCursorAfterNode(target) {
+  const range = document.createRange();
+  const sel = window.getSelection();
+  range.setStartAfter(target);
+  range.collapse(true);
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+
+/**
+ * Select the node's content.
+ * @param {Node} target the targeted node
+ */
+export function selectNodeContents(target) {
+  const range = document.createRange();
+  const sel = window.getSelection();
+  range.selectNodeContents(target);
+  range.collapse(false);
+  sel.removeAllRanges();
+  sel.addRange(range);
+}

package/src/core/throttle.js

@@ -0,0 +1,158 @@
+/**
+ * Based on lodash version of throttle : https://github.com/lodash/lodash/blob/master/throttle.js
+ */
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked, or until the next browser frame is drawn. Provide `options` to indicate
+ * whether `func` should be invoked on the leading and/or trailing edge of the
+ * `wait` timeout. The `func` is invoked with the last arguments provided to the
+ * debounced function. Subsequent calls to the debounced function return the
+ * result of the last `func` invocation.
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until the next tick, similar to `setTimeout` with a timeout of `0`.
+ * @param {Function} func The function to debounce
+ * @param {number} wait The number of milliseconds to delay
+ * @param {Object} [options={}] The options object
+ * @param {boolean} [options.leading=false] Specify invoking on the leading edge of the timeout
+ * @param {boolean} [options.trailing=true] Specify invoking on the trailing edge of the timeout
+ * @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;
+  const leading = !!options.leading;
+  const maxing = "maxWait" in options;
+  const maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : undefined;
+  const trailing = "trailing" in options ? !!options.trailing : true;
+
+  function invokeFunc(time) {
+    const args = lastArgs;
+    const thisArg = lastThis;
+
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+
+  function startTimer(pendingFunc, wait) {
+    return setTimeout(pendingFunc, wait);
+  }
+
+  function leadingEdge(time) {
+    // 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;
+  }
+
+  function remainingWait(time) {
+    const timeSinceLastCall = time - lastCallTime;
+    const timeSinceLastInvoke = time - lastInvokeTime;
+    const timeWaiting = wait - timeSinceLastCall;
+
+    return maxing ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
+  }
+
+  function shouldInvoke(time) {
+    const timeSinceLastCall = time - lastCallTime;
+    const timeSinceLastInvoke = time - lastInvokeTime;
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (
+      lastCallTime === undefined ||
+      timeSinceLastCall >= wait ||
+      timeSinceLastCall < 0 ||
+      (maxing && timeSinceLastInvoke >= maxWait)
+    );
+  }
+
+  function timerExpired() {
+    const time = Date.now();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    // Restart the timer.
+    timerId = startTimer(timerExpired, remainingWait(time));
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined;
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+
+  function debounced(...args) {
+    const time = Date.now();
+    const isInvoking = shouldInvoke(time);
+
+    lastArgs = args;
+    lastThis = this;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        timerId = startTimer(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === undefined) {
+      timerId = startTimer(timerExpired, wait);
+    }
+    return result;
+  }
+
+  return debounced;
+}
+
+/**
+ * Creates a throttled function that only invokes `func` at most once per
+ * every `wait` milliseconds (or once per browser frame). Provide `options` to indicate
+ * whether `func` should be invoked on the leading and/or trailing edge of the
+ * `wait` timeout. The `func` is invoked with the last arguments provided to the
+ * throttled function. Subsequent calls to the throttled function return the
+ * result of the last `func` invocation.
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the throttled function
+ * is invoked more than once during the `wait` timeout.
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until the next tick, similar to `setTimeout` with a timeout of `0`.
+ * @param {Function} func The function to throttle
+ * @param {number} wait The number of milliseconds to throttle invocations to
+ * @param {Object} [options={}] The options object
+ * @param {boolean} [options.leading=true] Specify invoking on the leading edge of the timeout
+ * @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 = {}) {
+  const leading = "leading" in options ? !!options.leading : true;
+  const trailing = "trailing" in options ? !!options.trailing : true;
+
+  return debounce(func, wait, {
+    leading,
+    trailing,
+    maxWait: wait,
+  });
+}
+
+export { debounce, throttle };

package/src/css/main.scss

@@ -0,0 +1,282 @@
+@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;
+
+	.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/index.js

@@ -0,0 +1,86 @@
+import { EdithEditor } from "./ui/editor.js";
+import { EdithButton, EdithButtons } from "./ui/button.js";
+
+/*
+ * Represents an editor
+ * @constructor
+ * @param {HTMLElement} element - The <input> element to add the Wysiwyg to.
+ * @param {Object} options - Options for the editor.
+ */
+function Edith(element, options) {
+  // Render the editor in the element
+  this.element = element;
+  this.element.classList.add("edith");
+
+  // Create the toolbar
+  this.toolbar = document.createElement("div");
+  this.toolbar.setAttribute("class", "edith-toolbar");
+  this.element.append(this.toolbar);
+
+  // Create buttons
+  options.buttons = options.buttons || {};
+  options.toolbar = options.toolbar || [["style", ["bold", "italic", "underline", "strikethrough"]]];
+  for (const { 0: group, 1: buttons } of options.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 buttonId of buttons) {
+      // Render the button
+      const button = options.buttons[buttonId] || EdithButtons[buttonId];
+      btnGroup.append(button(this).render());
+    }
+  }
+
+  // Create the editor
+  this.editor = new EdithEditor(this, options);
+  this.element.append(this.editor.render());
+
+  // Create the modals
+  this.modals = document.createElement("div");
+  this.modals.setAttribute("class", "edith-modals");
+  this.element.append(this.modals);
+}
+
+Edith.prototype.on = function (type, listener, options) {
+  this.element.addEventListener(type, listener, options);
+};
+
+Edith.prototype.off = function (type, listener, options) {
+  this.element.removeEventListener(type, listener, options);
+};
+
+Edith.prototype.trigger = function (type, payload = null) {
+  this.element.dispatchEvent(new CustomEvent(type, { detail: payload }));
+};
+
+Edith.prototype.setContent = function (content) {
+  this.editor.setContent(content);
+};
+
+Edith.prototype.getContent = function () {
+  return this.editor.getContent();
+};
+
+Edith.prototype.destroy = function () {
+  // Delete the modals
+  this.modals.remove();
+  this.modals = undefined;
+
+  // Delete the editor
+  this.editor.destroy();
+  this.editor = undefined;
+
+  // Delete the toolbar
+  this.toolbar.remove();
+  this.toolbar = undefined;
+
+  // Clean the main element
+  this.element.classList.remove("edith");
+  this.element = undefined;
+};
+
+export { Edith, EdithButton };