79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
import { Editor } from "editor/editor";
|
|
import {
|
|
safeGetSelection,
|
|
safeGetRangeAt,
|
|
moveChildren,
|
|
blockNames,
|
|
parentBlockNames,
|
|
} from "editor/utils";
|
|
import { EditorNode, getType, getValidParentInSelection } from "editor/types";
|
|
|
|
function makeParentBlock(
|
|
tag: string,
|
|
create: EditorNode["create"]
|
|
): EditorNode {
|
|
return {
|
|
selector: tag,
|
|
allowedChildren: [...blockNames, "multimedia"],
|
|
handleEmpty: "remove",
|
|
create,
|
|
};
|
|
}
|
|
|
|
// TODO: añadir blockquote
|
|
// XXX: si agregás algo acá, probablemente le quieras hacer un botón
|
|
// en app/views/posts/attributes/_content.haml
|
|
export const parentBlocks: { [propName: string]: EditorNode } = {
|
|
left: makeParentBlock("div[data-align=left]", () => {
|
|
const el = document.createElement("div");
|
|
el.dataset.align = "left";
|
|
el.style.textAlign = "left";
|
|
return el;
|
|
}),
|
|
center: makeParentBlock("div[data-align=center]", () => {
|
|
const el = document.createElement("div");
|
|
el.dataset.align = "center";
|
|
el.style.textAlign = "center";
|
|
return el;
|
|
}),
|
|
right: makeParentBlock("div[data-align=right]", () => {
|
|
const el = document.createElement("div");
|
|
el.dataset.align = "right";
|
|
el.style.textAlign = "right";
|
|
return el;
|
|
}),
|
|
};
|
|
|
|
export function setupButtons(editor: Editor): void {
|
|
for (const [name, type] of Object.entries(parentBlocks)) {
|
|
const buttonEl = editor.toolbarEl.querySelector(
|
|
`[data-editor-button="parentBlock-${name}"]`
|
|
);
|
|
if (!buttonEl) continue;
|
|
buttonEl.addEventListener("click", (event) => {
|
|
event.preventDefault();
|
|
|
|
// TODO: Esto solo mueve el bloque en el que está el final de la selección
|
|
// (anchorNode). quizás lo podemos hacer al revés (iterar desde contentEl
|
|
// para encontrar los bloques que están seleccionados y moverlos/cambiarles
|
|
// el parentBlock)
|
|
|
|
const list = getValidParentInSelection({ editor, type: name });
|
|
|
|
const replacementEl = type.create(editor);
|
|
if (list[0] == editor.contentEl) {
|
|
// no está en un parentBlock
|
|
editor.contentEl.insertBefore(replacementEl, list[1]);
|
|
replacementEl.appendChild(list[1]);
|
|
} else {
|
|
// está en un parentBlock
|
|
moveChildren(list[0], replacementEl, null);
|
|
editor.contentEl.replaceChild(replacementEl, list[0]);
|
|
}
|
|
window.getSelection()?.collapse(replacementEl);
|
|
|
|
return false;
|
|
});
|
|
}
|
|
}
|