67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
import { Editor } from "editor/editor";
|
|
import { EditorNode } from "editor/types";
|
|
import { markNames, setAuxiliaryToolbar, clearSelected } from "editor/utils";
|
|
|
|
const hex = (x: string) => ("0" + parseInt(x).toString(16)).slice(-2);
|
|
// https://stackoverflow.com/a/3627747
|
|
// TODO: cambiar por una solución más copada
|
|
function rgbToHex(rgb: string): string {
|
|
const matches = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
|
|
if (!matches) throw new Error("no pude parsear el rgb()");
|
|
return "#" + hex(matches[1]) + hex(matches[2]) + hex(matches[3]);
|
|
}
|
|
|
|
function select(editor: Editor, el: HTMLElement): void {
|
|
clearSelected(editor);
|
|
el.dataset.editorSelected = "";
|
|
editor.toolbar.auxiliary.mark.colorEl.value = el.style.backgroundColor
|
|
? rgbToHex(el.style.backgroundColor)
|
|
: "#f206f9";
|
|
editor.toolbar.auxiliary.mark.textColorEl.value = el.style.color
|
|
? rgbToHex(el.style.color)
|
|
: "#000000";
|
|
setAuxiliaryToolbar(editor, editor.toolbar.auxiliary.mark.parentEl);
|
|
}
|
|
|
|
export const mark: EditorNode = {
|
|
selector: "mark",
|
|
allowedChildren: [...markNames.filter((n) => n !== "mark"), "text"],
|
|
handleEmpty: "remove",
|
|
create: () => document.createElement("mark"),
|
|
onClick(editor, el) {
|
|
if (!(el instanceof HTMLElement)) throw new Error("oh no");
|
|
select(editor, el);
|
|
},
|
|
};
|
|
|
|
export function setupAuxiliaryToolbar(editor: Editor): void {
|
|
editor.toolbar.auxiliary.mark.colorEl.addEventListener("input", (event) => {
|
|
const color = editor.toolbar.auxiliary.mark.colorEl.value;
|
|
const selectedEl = editor.contentEl.querySelector<HTMLElement>(
|
|
"mark[data-editor-selected]"
|
|
);
|
|
if (!selectedEl)
|
|
throw new Error("No pude encontrar el mark para setear el color");
|
|
|
|
selectedEl.style.backgroundColor = color;
|
|
});
|
|
editor.toolbar.auxiliary.mark.textColorEl.addEventListener(
|
|
"input",
|
|
(event) => {
|
|
const color = editor.toolbar.auxiliary.mark.textColorEl.value;
|
|
const selectedEl = editor.contentEl.querySelector<HTMLElement>(
|
|
"mark[data-editor-selected]"
|
|
);
|
|
if (!selectedEl)
|
|
throw new Error(
|
|
"No pude encontrar el mark para setear el color del text"
|
|
);
|
|
|
|
selectedEl.style.color = color;
|
|
}
|
|
);
|
|
editor.toolbar.auxiliary.mark.colorEl.addEventListener("keydown", (event) => {
|
|
if (event.keyCode == 13) event.preventDefault();
|
|
});
|
|
}
|