sutty/app/javascript/editor/types/multimedia.ts

import * as ActiveStorage from "@rails/activestorage";
import { Editor } from "editor/editor";
import { EditorNode, getValidParentInSelection } from "editor/types";
import {
  safeGetSelection,
  safeGetRangeAt,
  markNames,
  parentBlockNames,
  setAuxiliaryToolbar,
  clearSelected,
} from "editor/utils";

function uploadFile(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const upload = new ActiveStorage.DirectUpload(
      file,
      origin + "/rails/active_storage/direct_uploads"
    );

    upload.create((error: any, blob: any) => {
      if (error) {
        reject(error);
      } else {
        const url = `${origin}/rails/active_storage/blobs/${blob.signed_id}/${blob.filename}`;
        resolve(url);
      }
    });
  });
}

function getAlt(multimediaInnerEl: HTMLElement): string | null {
  switch (multimediaInnerEl.tagName) {
    case "VIDEO":
    case "AUDIO":
      return multimediaInnerEl.getAttribute("aria-label");
    case "IMG":
      return (multimediaInnerEl as HTMLImageElement).alt;
    case "IFRAME":
      return multimediaInnerEl.title;
    default:
      throw new Error("no pude conseguir el alt");
  }
}
function setAlt(multimediaInnerEl: HTMLElement, value: string): void {
  switch (multimediaInnerEl.tagName) {
    case "VIDEO":
    case "AUDIO":
      multimediaInnerEl.setAttribute("aria-label", value);
      break;
    case "IMG":
      (multimediaInnerEl as HTMLImageElement).alt = value;
      break;
    case "IFRAME":
      multimediaInnerEl.title = value;
      break;
    default:
      throw new Error("no pude setear el alt");
  }
}

function select(editor: Editor, el: HTMLElement): void {
  clearSelected(editor);
  el.dataset.editorSelected = "";

  const innerEl = el.querySelector<HTMLElement>("[data-multimedia-inner]");
  if (!innerEl) throw new Error("No hay multimedia válida");
  if (innerEl.tagName === "P") {
    editor.toolbar.auxiliary.multimedia.altEl.value = "";
    editor.toolbar.auxiliary.multimedia.altEl.disabled = true;
  } else {
    editor.toolbar.auxiliary.multimedia.altEl.value = getAlt(innerEl) || "";
    editor.toolbar.auxiliary.multimedia.altEl.disabled = false;
  }

  setAuxiliaryToolbar(editor, editor.toolbar.auxiliary.multimedia.parentEl);
}

export const multimedia: EditorNode = {
  selector: "figure[data-multimedia]",
  allowedChildren: "ignore-children",
  handleEmpty: "remove",
  create: () => {
    const figureEl = document.createElement("figure");
    figureEl.dataset.multimedia = "";
    figureEl.contentEditable = "false";

    const placeholderEl = document.createElement("p");
    placeholderEl.dataset.multimediaInner = "";
    // TODO i18n
    placeholderEl.append("¡Clickeame para subir un archivo!");
    figureEl.appendChild(placeholderEl);

    const descriptionEl = document.createElement("figcaption");
    descriptionEl.contentEditable = "true";
    // TODO i18n
    descriptionEl.append("Escribí acá la descripción del archivo.");
    figureEl.appendChild(descriptionEl);

    return figureEl;
  },
  onClick(editor, el) {
    if (!(el instanceof HTMLElement)) throw new Error("oh no");
    select(editor, el);
  },
};
function createElementWithFile(url: string, type: string): HTMLElement {
  if (type.match(/^image\/.+$/)) {
    const el = document.createElement("img");
    el.dataset.multimediaInner = "";
    el.src = url;
    return el;
  } else if (type.match(/^video\/.+$/)) {
    const el = document.createElement("video");
    el.controls = true;
    el.dataset.multimediaInner = "";
    el.src = url;
    return el;
  } else if (type.match(/^audio\/.+$/)) {
    const el = document.createElement("audio");
    el.controls = true;
    el.dataset.multimediaInner = "";
    el.src = url;
    return el;
  } else if (type.match(/^application\/pdf$/)) {
    const el = document.createElement("iframe");
    el.dataset.multimediaInner = "";
    el.src = url;
    return el;
  } else {
    // TODO: chequear si el archivo es válido antes de subir
    throw new Error("Tipo de archivo no reconocido");
  }
}

export function setupAuxiliaryToolbar(editor: Editor): void {
  editor.toolbar.auxiliary.multimedia.uploadEl.addEventListener(
    "click",
    (event) => {
      const files = editor.toolbar.auxiliary.multimedia.fileEl.files;
      if (!files || !files.length)
        throw new Error("no hay archivos para subir");
      const file = files[0];

      const selectedEl = editor.contentEl.querySelector<HTMLElement>(
        "figure[data-editor-selected]"
      );
      if (!selectedEl)
        throw new Error("No pude encontrar el elemento para setear el archivo");

      selectedEl.dataset.editorLoading = "";
      uploadFile(file)
        .then((url) => {
          const innerEl = selectedEl.querySelector("[data-multimedia-inner]");
          if (!innerEl) throw new Error("No hay multimedia a reemplazar");

          const el = createElementWithFile(url, file.type);
          setAlt(el, editor.toolbar.auxiliary.multimedia.altEl.value);
          selectedEl.replaceChild(el, innerEl);

          select(editor, selectedEl);

          delete selectedEl.dataset.editorError;
        })
        .catch((err) => {
          console.error(err);
          // TODO: mostrar error
          selectedEl.dataset.editorError = "";
        })
        .finally(() => {
          delete selectedEl.dataset.editorLoading;
        });
    }
  );

  editor.toolbar.auxiliary.multimedia.removeEl.addEventListener(
    "click",
    (event) => {
      const selectedEl = editor.contentEl.querySelector<HTMLElement>(
        "figure[data-editor-selected]"
      );
      if (!selectedEl)
        throw new Error("No pude encontrar el elemento para borrar");

      selectedEl.parentElement?.removeChild(selectedEl);
      setAuxiliaryToolbar(editor, null);
    }
  );

  editor.toolbar.auxiliary.multimedia.altEl.addEventListener(
    "input",
    (event) => {
      const selectedEl = editor.contentEl.querySelector<HTMLAnchorElement>(
        "figure[data-editor-selected]"
      );
      if (!selectedEl)
        throw new Error("No pude encontrar el multimedia para setear el alt");

      const innerEl = selectedEl.querySelector<HTMLElement>(
        "[data-multimedia-inner]"
      );
      if (!innerEl) throw new Error("No hay multimedia a para setear el alt");

      setAlt(innerEl, editor.toolbar.auxiliary.multimedia.altEl.value);
    }
  );
  editor.toolbar.auxiliary.multimedia.altEl.addEventListener(
    "keydown",
    (event) => {
      if (event.keyCode == 13) event.preventDefault();
    }
  );
}

export function setupButtons(editor: Editor): void {
  const buttonEl = editor.toolbarEl.querySelector(
    '[data-editor-button="multimedia"]'
  );
  if (!buttonEl) throw new Error("No encontre el botón de multimedia");
  buttonEl.addEventListener("click", (event) => {
    event.preventDefault();

    const list = getValidParentInSelection({ editor, type: "multimedia" });

    const el = multimedia.create(editor);
    list[0].insertBefore(el, list[1].nextElementSibling);
    select(editor, el);

    return false;
  });
}