sutty/app/javascript/editor/types.ts

import { Editor } from "editor/editor";
import { marks } from "editor/types/marks";
import { blocks, li, EditorBlock } from "editor/types/blocks";
import { parentBlocks } from "editor/types/parentBlocks";
import { multimedia } from "editor/types/multimedia";
import {
  blockNames,
  parentBlockNames,
  safeGetRangeAt,
  safeGetSelection,
} from "editor/utils";

export interface EditorNode {
  selector: string;
  // la string es el nombre en la gran lista de types O 'text'
  // XXX: esto es un hack para no poner EditorNode dentro de EditorNode,
  // quizás podemos hacer que esto sea una función que retorna bool
  allowedChildren: string[] | "ignore-children";

  // * si es 'do-nothing', no hace nada si está vacío (esto es para cuando
  //   permitís 'text' entonces se puede tipear adentro, ej: párrafo vacío)
  // * si es 'remove', sacamos el coso si está vacío.
  //   ej: strong: { handleNothing: 'remove' }
  // * si es un block, insertamos el bloque y movemos la selección ahí
  //   ej: ul: { handleNothing: li }
  handleEmpty: "do-nothing" | "remove" | EditorBlock;

  // esta función puede ser llamada para cosas que no necesariamente sea la
  // creación del nodo con el botón; por ejemplo, al intentar recuperar
  // el formato. esto es importante por que, por ejemplo, no deberíamos
  // cambiar la selección acá.
  create: (editor: Editor) => HTMLElement;

  onClick?: (editor: Editor, target: Element) => void;
}

export const types: { [propName: string]: EditorNode } = {
  ...marks,
  ...blocks,
  li,
  ...parentBlocks,
  contentEl: {
    selector: ".editor-content",
    allowedChildren: [...blockNames, ...parentBlockNames, "multimedia"],
    handleEmpty: blocks.paragraph,
    create: () => {
      throw new Error("se intentó crear contentEl");
    },
  },
  br: {
    selector: "br",
    allowedChildren: [],
    handleEmpty: "do-nothing",
    create: () => {
      throw new Error("se intentó crear br");
    },
  },
  multimedia,
};

export function getType(
  node: Element
): { typeName: string; type: EditorNode } | null {
  for (let [typeName, type] of Object.entries(types)) {
    if (node.matches(type.selector)) {
      return { typeName, type };
    }
  }

  return null;
}

// encuentra el primer pariente que pueda tener al type, y retorna un array
// donde
//   array[0] = elemento que matchea el type
//   array[array.len - 1] = primer elemento seleccionado
export function getValidParentInSelection(args: {
  editor: Editor;
  type: string;
}): Element[] {
  const sel = safeGetSelection(args.editor);
  if (!sel) throw new Error("No se donde insertar esto");
  const range = safeGetRangeAt(sel);
  if (!range) throw new Error("No se donde insertar esto");

  let list: Element[] = [];

  if (!sel.anchorNode) {
    throw new Error("No se donde insertar esto");
  } else if (sel.anchorNode instanceof Element) {
    list = [sel.anchorNode];
  } else if (sel.anchorNode.parentElement) {
    list = [sel.anchorNode.parentElement];
  } else {
    throw new Error("No se donde insertar esto");
  }

  while (true) {
    const el = list[0];
    if (!args.editor.contentEl.contains(el) && el != args.editor.contentEl)
      throw new Error("No se donde insertar esto");
    const type = getType(el);

    if (type) {
      //if (type.typeName === 'contentEl') break
      //if (parentBlockNames.includes(type.typeName)) break
      if (
        type.type.allowedChildren instanceof Array &&
        type.type.allowedChildren.includes(args.type)
      )
        break;
    }
    if (el.parentElement) {
      list = [el.parentElement, ...list];
    } else {
      throw new Error("No se donde insertar esto");
    }
  }

  return list;
}

export function getValidChildren(node: Element, type: EditorNode): Node[] {
  if (type.allowedChildren === "ignore-children")
    throw new Error(
      "se llamó a getValidChildren con un type que no lo permite!"
    );
  return [...node.childNodes].filter((n) => {
    // si permite texto y esto es un texto, es válido
    if (n.nodeType === Node.TEXT_NODE)
      return type.allowedChildren.includes("text") && n.textContent?.length;

    // si no es un elemento, no es válido
    if (!(n instanceof Element)) return false;

    const t = getType(n);
    if (!t) return false;
    return type.allowedChildren.includes(t.typeName);
  });
}