Deprecar el editor
This commit is contained in:
f
parent
ffa2c80bf1
commit
6467a265d3
|
|
@ -1,320 +1,7 @@
|
|||
import { storeContent, restoreContent, forgetContent } from "editor/storage";
|
||||
import {
|
||||
isDirectChild,
|
||||
moveChildren,
|
||||
safeGetSelection,
|
||||
safeGetRangeAt,
|
||||
setAuxiliaryToolbar,
|
||||
parentBlockNames,
|
||||
clearSelected,
|
||||
} from "editor/utils";
|
||||
import { types, getValidChildren, getType } from "editor/types";
|
||||
import { setupButtons as setupMarksButtons } from "editor/types/marks";
|
||||
import { setupButtons as setupBlocksButtons } from "editor/types/blocks";
|
||||
import { setupButtons as setupParentBlocksButtons } from "editor/types/parentBlocks";
|
||||
import { setupAuxiliaryToolbar as setupLinkAuxiliaryToolbar } from "editor/types/link";
|
||||
import {
|
||||
setupAuxiliaryToolbar as setupMultimediaAuxiliaryToolbar,
|
||||
setupButtons as setupMultimediaButtons,
|
||||
} from "editor/types/multimedia";
|
||||
import { setupAuxiliaryToolbar as setupMarkAuxiliaryToolbar } from "editor/types/mark";
|
||||
|
||||
/// @ts-ignore
|
||||
import SuttyEditor from "@suttyweb/editor";
|
||||
import "@suttyweb/editor/dist/style.css";
|
||||
|
||||
// Esta funcion corrije errores que pueden haber como:
|
||||
// * que un nodo que no tiene 'text' permitido no tenga children (se les
|
||||
// inserta un allowedChildren[0])
|
||||
// * TODO: que haya una imágen sin <figure> o que no esté como bloque (se ponen
|
||||
// después del bloque en el que están como bloque de por si)
|
||||
// * convierte <i> y <b> en <em> y <strong>
|
||||
// Lo hace para que siga la estructura del documento y que no se borren por
|
||||
// cleanContent luego.
|
||||
function fixContent(editor: Editor, node: Element = editor.contentEl): void {
|
||||
if (node.tagName === "SCRIPT" || node.tagName === "STYLE") {
|
||||
node.parentElement?.removeChild(node);
|
||||
return;
|
||||
}
|
||||
|
||||
if (node.tagName === "I") {
|
||||
const el = document.createElement("em");
|
||||
moveChildren(node, el, null);
|
||||
node.parentElement?.replaceChild(el, node);
|
||||
node = el;
|
||||
}
|
||||
if (node.tagName === "B") {
|
||||
const el = document.createElement("strong");
|
||||
moveChildren(node, el, null);
|
||||
node.parentElement?.replaceChild(el, node);
|
||||
node = el;
|
||||
}
|
||||
|
||||
if (node instanceof HTMLImageElement) {
|
||||
node.dataset.multimediaInner = "";
|
||||
const figureEl = types.multimedia.create(editor);
|
||||
|
||||
let targetEl = node.parentElement;
|
||||
if (!targetEl) throw new Error("No encontré lx objetivo");
|
||||
while (true) {
|
||||
const type = getType(targetEl);
|
||||
if (!type) throw new Error("lx objetivo tiene tipo");
|
||||
if (type.type.allowedChildren.includes("multimedia")) break;
|
||||
if (!targetEl.parentElement) throw new Error("No encontré lx objetivo");
|
||||
targetEl = targetEl.parentElement;
|
||||
}
|
||||
|
||||
let parentEl = [...targetEl.childNodes].find((el) => el.contains(node));
|
||||
if (!parentEl) throw new Error("no encontré lx pariente");
|
||||
targetEl.insertBefore(figureEl, parentEl);
|
||||
|
||||
const innerEl = figureEl.querySelector("[data-multimedia-inner]");
|
||||
if (!innerEl) throw new Error("Raro.");
|
||||
figureEl.replaceChild(node, innerEl);
|
||||
|
||||
node = figureEl;
|
||||
}
|
||||
|
||||
const _type = getType(node);
|
||||
if (!_type) return;
|
||||
|
||||
const { typeName, type } = _type;
|
||||
|
||||
if (type.allowedChildren !== "ignore-children") {
|
||||
const sel = safeGetSelection(editor);
|
||||
const range = sel && safeGetRangeAt(sel);
|
||||
|
||||
if (getValidChildren(node, type).length == 0) {
|
||||
if (typeof type.handleEmpty !== "string") {
|
||||
const el = type.handleEmpty.create(editor);
|
||||
// mover cosas que pueden haber
|
||||
// por ejemplo: cuando convertís a un <ul>, queda texto fuera del li que
|
||||
// creamos acá
|
||||
moveChildren(node, el, null);
|
||||
node.appendChild(el);
|
||||
if (range?.intersectsNode(node)) sel?.collapse(el);
|
||||
}
|
||||
}
|
||||
|
||||
for (const child of node.childNodes) {
|
||||
if (!(child instanceof Element)) continue;
|
||||
fixContent(editor, child);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Esta funcion hace que los elementos del editor sigan la estructura.
|
||||
// TODO: nos falta borrar atributos (style, y básicamente cualquier otra cosa)
|
||||
// Edge cases:
|
||||
// * no borramos los <br> por que se requieren para que los navegadores
|
||||
// funcionen bien al escribir. no se deberían mostrar de todas maneras
|
||||
function cleanContent(editor: Editor, node: Element = editor.contentEl): void {
|
||||
const _type = getType(node);
|
||||
if (!_type) {
|
||||
node.parentElement?.removeChild(node);
|
||||
return;
|
||||
}
|
||||
|
||||
const { type } = _type;
|
||||
|
||||
if (type.allowedChildren !== "ignore-children") {
|
||||
for (const child of node.childNodes) {
|
||||
if (
|
||||
child.nodeType === Node.TEXT_NODE &&
|
||||
!type.allowedChildren.includes("text")
|
||||
) {
|
||||
node.removeChild(child);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!(child instanceof Element)) continue;
|
||||
|
||||
const childType = getType(child);
|
||||
if (childType?.typeName === "br") continue;
|
||||
if (!childType || !type.allowedChildren.includes(childType.typeName)) {
|
||||
// XXX: esto extrae las cosas de adentro para que no sea destructivo
|
||||
moveChildren(child, node, child);
|
||||
node.removeChild(child);
|
||||
return;
|
||||
}
|
||||
|
||||
cleanContent(editor, child);
|
||||
}
|
||||
|
||||
// solo contar children válido para ese nodo
|
||||
const validChildrenLength = getValidChildren(node, type).length;
|
||||
|
||||
const sel = safeGetSelection(editor);
|
||||
const range = sel && safeGetRangeAt(sel);
|
||||
if (
|
||||
type.handleEmpty === "remove" &&
|
||||
validChildrenLength == 0
|
||||
//&& (!range || !range.intersectsNode(node))
|
||||
) {
|
||||
node.parentNode?.removeChild(node);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function routine(editor: Editor): void {
|
||||
try {
|
||||
fixContent(editor);
|
||||
cleanContent(editor);
|
||||
storeContent(editor);
|
||||
|
||||
editor.htmlEl.value = editor.contentEl.innerHTML;
|
||||
} catch (error) {
|
||||
console.error("Hubo un problema corriendo la rutina", editor, error);
|
||||
}
|
||||
}
|
||||
|
||||
export interface Editor {
|
||||
editorEl: HTMLElement;
|
||||
toolbarEl: HTMLElement;
|
||||
toolbar: {
|
||||
auxiliary: {
|
||||
mark: {
|
||||
parentEl: HTMLElement;
|
||||
colorEl: HTMLInputElement;
|
||||
textColorEl: HTMLInputElement;
|
||||
};
|
||||
multimedia: {
|
||||
parentEl: HTMLElement;
|
||||
fileEl: HTMLInputElement;
|
||||
uploadEl: HTMLButtonElement;
|
||||
altEl: HTMLInputElement;
|
||||
removeEl: HTMLButtonElement;
|
||||
};
|
||||
link: {
|
||||
parentEl: HTMLElement;
|
||||
urlEl: HTMLInputElement;
|
||||
};
|
||||
};
|
||||
};
|
||||
contentEl: HTMLElement;
|
||||
wordAlertEl: HTMLElement;
|
||||
htmlEl: HTMLTextAreaElement;
|
||||
}
|
||||
|
||||
function getSel<T extends Element>(parentEl: HTMLElement, selector: string): T {
|
||||
const el = parentEl.querySelector<T>(selector);
|
||||
if (!el) throw new Error(`No pude encontrar un componente \`${selector}\``);
|
||||
return el;
|
||||
}
|
||||
|
||||
function setupEditor(editorEl: HTMLElement): void {
|
||||
// XXX: ¡Esto afecta a todo el documento! ¿Quizás usar un iframe para el editor?
|
||||
document.execCommand("defaultParagraphSeparator", false, "p");
|
||||
|
||||
const editor: Editor = {
|
||||
editorEl,
|
||||
toolbarEl: getSel(editorEl, ".editor-toolbar"),
|
||||
toolbar: {
|
||||
auxiliary: {
|
||||
mark: {
|
||||
parentEl: getSel(editorEl, "[data-editor-auxiliary=mark]"),
|
||||
colorEl: getSel(
|
||||
editorEl,
|
||||
"[data-editor-auxiliary=mark] [name=mark-color]"
|
||||
),
|
||||
textColorEl: getSel(
|
||||
editorEl,
|
||||
"[data-editor-auxiliary=mark] [name=mark-text-color]"
|
||||
),
|
||||
},
|
||||
multimedia: {
|
||||
parentEl: getSel(editorEl, "[data-editor-auxiliary=multimedia]"),
|
||||
fileEl: getSel(
|
||||
editorEl,
|
||||
"[data-editor-auxiliary=multimedia] [name=multimedia-file]"
|
||||
),
|
||||
uploadEl: getSel(
|
||||
editorEl,
|
||||
"[data-editor-auxiliary=multimedia] [name=multimedia-file-upload]"
|
||||
),
|
||||
altEl: getSel(
|
||||
editorEl,
|
||||
"[data-editor-auxiliary=multimedia] [name=multimedia-alt]"
|
||||
),
|
||||
removeEl: getSel(
|
||||
editorEl,
|
||||
"[data-editor-auxiliary=multimedia] [name=multimedia-remove]"
|
||||
),
|
||||
},
|
||||
link: {
|
||||
parentEl: getSel(editorEl, "[data-editor-auxiliary=link]"),
|
||||
urlEl: getSel(
|
||||
editorEl,
|
||||
"[data-editor-auxiliary=link] [name=link-url]"
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
contentEl: getSel(editorEl, ".editor-content"),
|
||||
wordAlertEl: getSel(editorEl, ".editor-aviso-word"),
|
||||
htmlEl: getSel(editorEl, "textarea"),
|
||||
};
|
||||
console.debug("iniciando editor", editor);
|
||||
|
||||
// Recuperar el contenido si hay algo guardado, si tuviéramos un campo
|
||||
// de última edición podríamos saber si el artículo fue editado
|
||||
// después o la versión local es la última.
|
||||
//
|
||||
// TODO: Preguntar si se lo quiere recuperar.
|
||||
restoreContent(editor);
|
||||
|
||||
// Word alert
|
||||
editor.contentEl.addEventListener("paste", () => {
|
||||
editor.wordAlertEl.style.display = "block";
|
||||
});
|
||||
|
||||
// Setup routine listeners
|
||||
const observer = new MutationObserver(() => routine(editor));
|
||||
observer.observe(editor.contentEl, {
|
||||
childList: true,
|
||||
attributes: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
document.addEventListener("selectionchange", () => routine(editor));
|
||||
|
||||
// Capture onClick
|
||||
editor.contentEl.addEventListener(
|
||||
"click",
|
||||
(event) => {
|
||||
const target = event.target! as Element;
|
||||
const type = getType(target);
|
||||
if (!type || !type.type.onClick) {
|
||||
setAuxiliaryToolbar(editor, null);
|
||||
clearSelected(editor);
|
||||
return true;
|
||||
}
|
||||
type.type.onClick(editor, target);
|
||||
return false;
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
// Clean seleted
|
||||
const selectedEl = editor.contentEl.querySelector("[data-editor-selected]");
|
||||
if (selectedEl) delete (selectedEl as HTMLElement).dataset.editorSelected;
|
||||
|
||||
// Setup botones
|
||||
setupMarksButtons(editor);
|
||||
setupBlocksButtons(editor);
|
||||
setupParentBlocksButtons(editor);
|
||||
setupMultimediaButtons(editor);
|
||||
|
||||
setupLinkAuxiliaryToolbar(editor);
|
||||
setupMultimediaAuxiliaryToolbar(editor);
|
||||
setupMarkAuxiliaryToolbar(editor);
|
||||
|
||||
// Finally...
|
||||
routine(editor);
|
||||
}
|
||||
|
||||
document.addEventListener("turbolinks:load", () => {
|
||||
const flash = document.querySelector<HTMLElement>(".js-flash");
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue