app.js

(() => {
  const THEME_KEY = "bigrichtextbox:theme:v1";
  /** @type {HTMLButtonElement | null} */
  const themeToggleEl = document.getElementById("themeToggle");
  /** @type {HTMLButtonElement | null} */
  const shareToggleEl = document.getElementById("shareToggle");
  /** @type {HTMLElement | null} */
  const toastEl = document.getElementById("toast");

  const DARK_ICON = "🌙";
  const LIGHT_ICON = "☀️";

  function getStoredTheme() {
    try {
      const v = localStorage.getItem(THEME_KEY);
      return v === "light" || v === "dark" ? v : "";
    } catch {
      return "";
    }
  }

  function setTheme(theme) {
    if (theme === "light" || theme === "dark") {
      document.documentElement.setAttribute("data-theme", theme);
      try {
        localStorage.setItem(THEME_KEY, theme);
      } catch {
      }
    } else {
      document.documentElement.removeAttribute("data-theme");
      try {
        localStorage.removeItem(THEME_KEY);
      } catch {
      }
    }

    if (themeToggleEl) {
      const current = document.documentElement.getAttribute("data-theme") || "system";
      themeToggleEl.textContent = current === "dark" ? DARK_ICON : LIGHT_ICON;
    }
  }

  if (themeToggleEl) {
    const initial = getStoredTheme();
    setTheme(initial || "dark");

    themeToggleEl.addEventListener("click", () => {
      const current = document.documentElement.getAttribute("data-theme");
      setTheme(current === "dark" ? "light" : "dark");
    });
  }

  const STORAGE_KEY = "bigrichtextbox:quill-delta:v1";
  const HASH_PREFIX = "#d=";

  /** @type {HTMLElement | null} */
  const editorEl = document.getElementById("editor");
  /** @type {HTMLElement | null} */
  const toolbarEl = document.getElementById("toolbar");

  if (!editorEl || !toolbarEl) {
    return;
  }

  if (typeof window.Quill !== "function") {
    return;
  }

  const Quill = window.Quill;
  const LZString = window.LZString || null;
  const hljs = window.hljs || null;

  const Font = Quill.import("formats/font");
  Font.whitelist = ["inter", "serif", "monospace"];
  Quill.register(Font, true);

  function showToolbar() {
    toolbarEl.hidden = false;
  }

  function hideToolbar() {
    toolbarEl.hidden = true;
  }

  function isToolbarFocused() {
    const active = document.activeElement;
    return !!(active && toolbarEl.contains(active));
  }

  function isEventInsideEditorOrToolbar(target) {
    if (!(target instanceof Node)) {
      return false;
    }
    return editorEl.contains(target) || toolbarEl.contains(target);
  }

  function debounce(fn, delayMs) {
    /** @type {number | undefined} */
    let t;
    return () => {
      if (t) {
        window.clearTimeout(t);
      }
      t = window.setTimeout(fn, delayMs);
    };
  }

  const quill = new Quill(editorEl, {
    theme: "snow",
    modules: {
      toolbar: "#toolbar",
      ...(hljs ? { syntax: true } : {}),
    },
    formats: [
      "header",
      "font",
      "bold",
      "italic",
      "underline",
      "list",
      "align",
      "code-block",
    ],
  });

  // Expose for debugging / tests.
  window.__quill = quill;

  function setCodeLanguageAtSelection(lang) {
    const range = quill.getSelection(true);
    if (!range) return;

    const language = String(lang || "").trim().toLowerCase();
    // Quill stores code-block language as a line attribute on the terminating newline.
    // Use formatLine so the language is applied to the current line(s) and persists.
    quill.formatLine(range.index, Math.max(range.length, 1), "code-block", language || true);

    const [line] = quill.getLine(range.index);
    if (!line || !line.domNode) return;

    const container = line.domNode.closest(".ql-code-block-container");
    if (!container) return;

    if (language) {
      container.setAttribute("data-language", language);
    } else {
      container.removeAttribute("data-language");
    }
  }

  function syncCodeLanguageSelect() {
    const range = quill.getSelection();
    if (!range) return;

    const codeLangSelect = toolbarEl.querySelector("select.code-lang");
    if (!codeLangSelect) return;

    const [line] = quill.getLine(range.index);
    if (!line || !line.domNode) return;

    const container = line.domNode.closest(".ql-code-block-container");
    if (!container) {
      codeLangSelect.value = "";
      return;
    }

    const current = container.getAttribute("data-language") || "";
    codeLangSelect.value = current;
  }

  function getShareHash(delta) {
    if (!LZString) return "";
    try {
      const payload = JSON.stringify(delta);
      const compressed = LZString.compressToEncodedURIComponent(payload);
      return `${HASH_PREFIX}${compressed}`;
    } catch {
      return "";
    }
  }

  function readHashDelta() {
    if (!LZString) return null;
    const hash = window.location.hash || "";
    if (!hash.startsWith(HASH_PREFIX)) {
      return null;
    }
    const raw = hash.slice(HASH_PREFIX.length);
    if (!raw) return null;
    try {
      const json = LZString.decompressFromEncodedURIComponent(raw);
      if (!json) return null;
      return JSON.parse(json);
    } catch {
      return null;
    }
  }

  function saveNow() {
    try {
      const delta = quill.getContents();
      localStorage.setItem(STORAGE_KEY, JSON.stringify(delta));
    } catch {
    }
  }

  const saveDebounced = debounce(saveNow, 250);

  function restore() {
    try {
      const hashDelta = readHashDelta();
      if (hashDelta) {
        quill.setContents(hashDelta);
        return;
      }

      const raw = localStorage.getItem(STORAGE_KEY);
      if (!raw) {
        return;
      }
      const parsed = JSON.parse(raw);
      if (parsed) {
        quill.setContents(parsed);
      }
    } catch {
    }
  }

  restore();

  quill.on("text-change", () => {
    saveDebounced();
  });

  quill.on("selection-change", (range) => {
    if (range) {
      showToolbar();
      syncCodeLanguageSelect();
    } else {
      if (isToolbarFocused()) {
        showToolbar();
      } else {
        hideToolbar();
      }
    }
  });

  toolbarEl.addEventListener("focusin", () => {
    showToolbar();
  });

  document.addEventListener("mousedown", (e) => {
    const target = e.target;
    if (isEventInsideEditorOrToolbar(target)) {
      showToolbar();
      return;
    }
    hideToolbar();
  });

  if (shareToggleEl) {
    shareToggleEl.addEventListener("click", async () => {
      if (!LZString) {
        if (toastEl) {
          toastEl.textContent = "Sharing needs LZ-String to load. Refresh the page.";
          toastEl.classList.add("is-visible");
          toastEl.setAttribute("aria-hidden", "false");
          window.setTimeout(() => {
            toastEl.classList.remove("is-visible");
            toastEl.setAttribute("aria-hidden", "true");
          }, 3000);
        }
        return;
      }
      const delta = quill.getContents();
      const hash = getShareHash(delta);
      if (!hash) {
        return;
      }

      const url = `${window.location.origin}${window.location.pathname}${hash}`;
      try {
        await navigator.clipboard.writeText(url);
        shareToggleEl.textContent = "✅";
        if (toastEl) {
          toastEl.textContent = "Share link copied. Paste it to share.";
          toastEl.classList.add("is-visible");
          toastEl.setAttribute("aria-hidden", "false");
        }
      } catch {
        shareToggleEl.textContent = "✅";
        if (toastEl) {
          toastEl.textContent = "Share link ready. Copy from the address bar.";
          toastEl.classList.add("is-visible");
          toastEl.setAttribute("aria-hidden", "false");
        }
      }

      window.setTimeout(() => {
        shareToggleEl.textContent = "🔗";
      }, 1200);

      if (toastEl) {
        window.setTimeout(() => {
          toastEl.classList.remove("is-visible");
          toastEl.setAttribute("aria-hidden", "true");
        }, 3000);
      }
    });
  }

  toolbarEl.addEventListener("change", (e) => {
    const target = e.target instanceof HTMLSelectElement ? e.target : null;
    if (!target || !target.classList.contains("code-lang")) {
      return;
    }
    const lang = target.value;
    setCodeLanguageAtSelection(lang);
    syncCodeLanguageSelect();
  });

  hideToolbar();
  quill.focus();
})();