bog / static / js / post-editor.js

const inputTitle = document.querySelector('input[name="title"]');
const inputSlug = document.querySelector('input[name="slug"]');
const inputDt = document.querySelector('input[name="creation_datetime"]');
const inputSubtitle = document.querySelector('input[name="subtitle"]');
const inputCategory = document.querySelector('input[name="category"]');
const inputBskyUri = document.querySelector('input[name="bsky_uri"]');
const editor = document.querySelector("#editor");
const editorPreview = document.querySelector("#editorPreview");

function preview(render) {
  if (render !== false) {
    editorPreview.classList.remove("error");
    editorPreview.innerHTML = `
      <h1 class="blog-head">${inputTitle.value}</h1>
      <span class="blog-subhead"><em>${inputSubtitle.value}</em></span>
      <p class='blog-publish'>
        🕒 ${inputDt.value}
      </p>
      <hr class='frontmatter'>
    `;
    editorPreview.innerHTML += render;
  } else {
    editorPreview.classList.add("error");
  }
}

// Enhanced editor features

const handleTabs = (el) => {
  const TAB = "    ";

  el.addEventListener("keydown", (e) => {
    const { key, shiftKey, target } = e;
    const { value, selectionStart, selectionEnd } = target;

    if (key === "Tab") {
      e.preventDefault();
      const startLine = value.lastIndexOf("\n", selectionStart - 1) + 1;
      const endLine = value.indexOf("\n", selectionEnd);
      const endIndex = endLine === -1 ? value.length : endLine;
      const lines = value.slice(startLine, endIndex).split("\n");

      if (shiftKey) {
        let removed = 0;
        const updatedLines = lines.map((line) => {
          if (line.startsWith(TAB)) {
            removed += TAB.length;
            return line.slice(TAB.length);
          }
          return line;
        });
        target.value =
          value.slice(0, startLine) +
          updatedLines.join("\n") +
          value.slice(endIndex);
        if (removed > 0) {
          target.selectionStart = Math.max(selectionStart - TAB.length, 0);
          target.selectionEnd = Math.max(
            selectionEnd - removed,
            target.selectionStart,
          );
        }
      } else {
        const updatedLines = lines.map((line) => TAB + line);
        target.value =
          value.slice(0, startLine) +
          updatedLines.join("\n") +
          value.slice(endIndex);
        const shiftAmount = lines.length * TAB.length;
        target.selectionStart = selectionStart + TAB.length;
        target.selectionEnd = selectionEnd + shiftAmount;
      }

      updatePreview(false);
    }
  });
};

const handleEnterIndent = (el) => {
  el.addEventListener("keydown", (e) => {
    if (e.key !== "Enter") return;
    e.preventDefault();

    const { value, selectionStart, selectionEnd } = el;
    const before = value.slice(0, selectionStart);
    const after = value.slice(selectionEnd);
    const lineStart = before.lastIndexOf("\n") + 1;
    const currentLine = before.slice(lineStart);
    const match = currentLine.match(/^\s*/);
    const indent = match ? match[0] : "";

    el.value = before + "\n" + indent + after;
    const caretPos = selectionStart + 1 + indent.length;
    el.selectionStart = el.selectionEnd = caretPos;

    updatePreview(false);
  });
};

const handleBackspace = (el) => {
  const TAB = "    ";
  el.addEventListener("keydown", (e) => {
    if (e.key !== "Backspace") return;
    const { value, selectionStart, selectionEnd } = el;
    const prevFour = value.slice(selectionStart - 4, selectionStart);
    if (prevFour === TAB) {
      e.preventDefault();
      el.value = value.slice(0, selectionStart - 4) + value.slice(selectionEnd);
      el.selectionStart = el.selectionEnd = selectionStart - 4;

      updatePreview(false);
    }
  });
};

const VOID_ELEMENTS = new Set([
  "area",
  "base",
  "br",
  "col",
  "embed",
  "hr",
  "img",
  "input",
  "link",
  "meta",
  "param",
  "source",
  "track",
  "wbr",
]);

const enableEditorFeatures = (el) => {
  if (!el) return;
  el.value = el.value.replace(/\t/g, "    ");

  handleTabs(el);
  handleEnterIndent(el);
  handleBackspace(el);
};

async function syncDraft() {
  const resp = await fetch(`/blog/new/sync`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      title: inputTitle.value,
      slug: inputSlug.value,
      contents: editor.value,
      creation_datetime: inputDt.value,
      subtitle: inputSubtitle.value || null,
      category: inputCategory.value || null,
      bsky_uri: inputBskyUri.value || null,
    }),
  });

  if (resp.ok) {
    return await resp.text();
  } else {
    return false
  }
}


async function renderDraft() {
  const resp = await fetch(`/blog/edit/render`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      contents: editor.value,
    }),
  });

  if (resp.ok) {
    return await resp.text();
  } else {
    return false
  }
}

async function updatePreview(sync = false) {
  if (sync) {
    let render = await syncDraft();
    preview(render);
  } else {
    let render = await renderDraft();
    preview(render);
  }
  if (typeof createFootnotes === "function") createFootnotes();
}

// --- Entry point ---
function initPostEditor(mode = "edit") {
  enableEditorFeatures(document.querySelector("#editor"));

  const sync = mode === "new";

  [editor, inputTitle, inputSubtitle, inputSlug, inputDt].forEach((el) =>
    el?.addEventListener("input", () => updatePreview(sync)),
  );

  updatePreview(false)
}

// Export the initializer
export { initPostEditor };