@ssobig/writer-cli 0.2.2 → 0.3.2

package/templates/mystery-v1/markdown-image-editor.js

@@ -0,0 +1,320 @@
+(function (root, factory) {
+  const api = factory();
+  if (typeof module === "object" && module.exports) module.exports = api;
+  if (root) root.WriterMarkdownImageEditor = api;
+})(typeof globalThis !== "undefined" ? globalThis : this, function () {
+  "use strict";
+
+  const IMAGE_TYPES = ["image/jpeg", "image/png", "image/webp", "image/gif"];
+  function insertion(source, position, markdown) {
+    const before = source.slice(0, position);
+    const after = source.slice(position);
+    const prefix = before && !before.endsWith("\n\n") ? (before.endsWith("\n") ? "\n" : "\n\n") : "";
+    const suffix = after.startsWith("\n\n") ? "" : after.startsWith("\n") ? "\n" : "\n\n";
+    return { from: position, insert: prefix + markdown + suffix };
+  }
+
+  function create({ cm, model, assets, parent, canInsert, onIdle }) {
+    const doc = parent.ownerDocument;
+    let view = null;
+    let disposed = false;
+    let serial = Promise.resolve();
+    const jobs = new Map();
+    const fileInputs = new Set();
+    const bookmarkEffect = cm.StateEffect.define();
+    const bookmarks = cm.StateField.define({
+      create: () => new Map(),
+      update(previous, transaction) {
+        const next = new Map();
+        previous.forEach((mark, id) => {
+          let removed = false;
+          transaction.changes.iterChangedRanges((from, to) => {
+            if (to > from && (mark.to > mark.from
+              ? from < mark.to && to > mark.from
+              : from <= mark.from && to > mark.from)) removed = true;
+          });
+          if (!removed) next.set(id, {
+            from: transaction.changes.mapPos(mark.from, 1),
+            to: transaction.changes.mapPos(mark.to, mark.to > mark.from ? -1 : 1)
+          });
+        });
+        transaction.effects.forEach(effect => {
+          if (effect.is(bookmarkEffect)) {
+            if (effect.value.mark) next.set(effect.value.id, effect.value.mark);
+            else next.delete(effect.value.id);
+          }
+        });
+        return next;
+      }
+    });
+
+    const imageBlocks = state => model.parseDocument(state.doc.toString(), { preserveBlankLines: true }).blocks.filter(block => block.type === "image");
+    function selectBlock(figure) {
+      const from = view.posAtDOM(figure);
+      return imageBlocks(view.state).find(block => from >= block.from && from <= block.to);
+    }
+    function button(label, action) {
+      const element = doc.createElement("button");
+      element.type = "button";
+      element.textContent = label;
+      element.addEventListener("mousedown", event => event.preventDefault());
+      element.addEventListener("click", event => { event.preventDefault(); event.stopPropagation(); if (!view.state.readOnly) action(); });
+      return element;
+    }
+
+    // Implements CodeMirror's WidgetType interface without changing the pinned bundle.
+    class ImageWidget {
+      constructor(block) { this.block = block; }
+      eq(other) { return other instanceof ImageWidget && other.block.assetId === this.block.assetId && other.block.alt === this.block.alt; }
+      compare(other) { return this === other || this.eq(other); }
+      get estimatedHeight() { return 180; }
+      get lineBreaks() { return 0; }
+      updateDOM() { return false; }
+      ignoreEvent() { return true; }
+      coordsAt() { return null; }
+      destroy() {}
+      toDOM(editor) {
+        const figure = doc.createElement("figure");
+        figure.className = "writer-md-image writer-md-image-editable";
+        figure.contentEditable = "false";
+        figure.tabIndex = 0;
+        figure.setAttribute("aria-label", this.block.alt || "본문 이미지");
+        const image = doc.createElement("img");
+        image.dataset.componentAsset = this.block.assetId;
+        image.alt = this.block.alt;
+        image.draggable = false;
+        const status = doc.createElement("span");
+        status.className = "writer-md-image-status";
+        status.textContent = "이미지를 불러오는 중입니다.";
+        const url = assets?.get?.(this.block.assetId);
+        image.hidden = !url;
+        if (url) image.src = url;
+        image.addEventListener("load", () => editor.requestMeasure());
+        image.addEventListener("error", () => { image.hidden = true; status.textContent = "이미지를 불러오지 못했습니다."; editor.requestMeasure(); });
+        figure.append(image, status);
+        if (assets?.upload) {
+          const actions = doc.createElement("span");
+          actions.className = "writer-md-image-actions";
+          actions.append(button("교체", () => {
+            const block = selectBlock(figure);
+            if (block) chooseFiles({ from: block.from, to: block.to });
+          }), button("본문에서 제거", () => {
+            const block = selectBlock(figure);
+            if (!block) return;
+            editor.dispatch({ changes: { from: block.from, to: block.to }, selection: { anchor: block.from }, userEvent: "delete" });
+            editor.focus();
+          }));
+          figure.append(actions);
+        }
+        figure.addEventListener("keydown", event => {
+          if (editor.state.readOnly) return;
+          if (!['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) return;
+          const block = selectBlock(figure);
+          if (!block) return;
+          event.preventDefault();
+          event.stopPropagation();
+          if (["Backspace", "Delete"].includes(event.key)) editor.dispatch({ changes: { from: block.from, to: block.to }, selection: { anchor: block.from }, userEvent: "delete" });
+          else {
+            const backward = ["ArrowLeft", "ArrowUp"].includes(event.key);
+            const position = backward ? block.from : block.to;
+            if ((!backward && position === editor.state.doc.length) || (backward && position === 0)) {
+              editor.dispatch({ changes: { from: position, insert: "\n" }, selection: { anchor: backward ? 0 : position + 1 }, userEvent: "input" });
+            } else editor.dispatch({ selection: { anchor: backward ? Math.max(0, position - 1) : Math.min(editor.state.doc.length, position + 1) } });
+          }
+          editor.focus();
+        });
+        return figure;
+      }
+    }
+    const decorate = state => cm.Decoration.set(imageBlocks(state).map(block => cm.Decoration.replace({ widget: new ImageWidget(block), block: true }).range(block.from, block.to)), true);
+    const decorations = cm.StateField.define({
+      create: decorate,
+      update(previous, transaction) {
+        return transaction.docChanged ? decorate(transaction.state) : previous;
+      },
+      provide: field => [cm.EditorView.decorations.from(field), cm.EditorView.atomicRanges.from(field, ranges => () => ranges)]
+    });
+
+    const toolbar = doc.createElement("div");
+    toolbar.className = "writer-md-image-toolbar";
+    toolbar.setAttribute("aria-label", "본문 이미지 도구");
+    const feedback = doc.createElement("div");
+    feedback.className = "writer-md-image-feedback";
+    feedback.setAttribute("role", "status");
+    feedback.hidden = true;
+    function say(message) { feedback.hidden = false; feedback.replaceChildren(doc.createTextNode(message)); }
+    function cancel(id) {
+      jobs.delete(id);
+      if (!disposed) view.dispatch({ effects: bookmarkEffect.of({ id }) });
+      renderJobs();
+    }
+    function renderJobs() {
+      if (disposed) return;
+      feedback.replaceChildren();
+      feedback.hidden = jobs.size === 0;
+      if (!jobs.size) onIdle?.();
+      jobs.forEach((job, id) => {
+        const row = doc.createElement("div");
+        row.append(doc.createTextNode(`${job.file.name || "이미지"}: ${job.error || "업로드 중…"} `));
+        if (job.error) row.append(button("재시도", () => { job.error = ""; enqueue(id); }));
+        row.append(button("취소", () => cancel(id)));
+        feedback.append(row);
+      });
+    }
+    function addBookmark(mark) {
+      const id = doc.defaultView.crypto.randomUUID();
+      view.dispatch({ effects: bookmarkEffect.of({ id, mark }) });
+      return id;
+    }
+    function allowed(mark) {
+      if (view.state.readOnly) return false;
+      if (view.composing) { say("한글 입력을 마친 뒤 이미지를 넣어주세요."); return false; }
+      if (!canInsert(view.state.doc.toString(), mark.from, mark.to)) { say("표 바깥의 본문에 이미지를 넣어주세요."); return false; }
+      return true;
+    }
+    function commit(id, assetId, alt) {
+      let mark = view.state.field(bookmarks).get(id);
+      if (!mark || !allowed(mark)) return false;
+      if (mark.from === mark.to) {
+        const image = imageBlocks(view.state).find(block => mark.from >= block.from && mark.from <= block.to);
+        if (image) mark = { from: image.to, to: image.to };
+      }
+      const markdown = model.imageMarkdown(assetId, alt);
+      const change = mark.to > mark.from
+        ? { from: mark.from, to: mark.to, insert: markdown }
+        : insertion(view.state.doc.toString(), mark.from, markdown);
+      const followsInsertion = mark.from === mark.to && view.state.selection.main.empty && view.state.selection.main.head === mark.from;
+      view.dispatch({ changes: change, ...(followsInsertion ? { selection: { anchor: change.from + change.insert.length } } : {}), effects: bookmarkEffect.of({ id }), userEvent: "input.image" });
+      return true;
+    }
+    function enqueue(id) {
+      renderJobs();
+      serial = serial.then(async () => {
+        const job = jobs.get(id);
+        if (!job || disposed || !view.state.field(bookmarks).has(id)) { cancel(id); return; }
+        try {
+          // A replacement gets a new ID so other references and undo retain the original.
+          job.assetId ||= `body-image-${doc.defaultView.crypto.randomUUID()}`;
+          if (!job.uploaded) { await assets.upload(job.assetId, job.file); job.uploaded = true; }
+          if (disposed || jobs.get(id) !== job) return;
+          // Wait for CodeMirror to finish its IME transaction, not only the DOM event.
+          while (!disposed && jobs.get(id) === job && view.composing) {
+            await new Promise(resolve => doc.defaultView.setTimeout(resolve, 30));
+          }
+          if (disposed || jobs.get(id) !== job) return;
+          const inserted = commit(id, job.assetId, job.file.name || "이미지");
+          jobs.delete(id);
+          renderJobs();
+          if (!inserted) say("삽입 위치가 변경되어 에셋에만 저장했습니다. 에셋에서 다시 선택할 수 있습니다.");
+        } catch (error) {
+          if (disposed || jobs.get(id) !== job) return;
+          job.error = error?.message || "업로드하지 못했습니다.";
+          renderJobs();
+        }
+      });
+    }
+    function uploadFiles(files, mark = { from: view.state.selection.main.head, to: view.state.selection.main.head }) {
+      if (!allowed(mark)) return;
+      for (const file of files) {
+        if (!IMAGE_TYPES.includes(file.type) || file.size > 15 * 1024 * 1024) { say("JPEG·PNG·WebP·GIF 이미지를 15MB 이하로 선택해주세요."); continue; }
+        const id = addBookmark(mark);
+        jobs.set(id, { file });
+        enqueue(id);
+        if (mark.to > mark.from) break;
+      }
+    }
+    function chooseFiles(mark = { from: view.state.selection.main.head, to: view.state.selection.main.head }) {
+      if (!allowed(mark)) return;
+      const id = addBookmark(mark);
+      const input = doc.createElement("input");
+      input.type = "file";
+      input.accept = IMAGE_TYPES.join(",");
+      input.multiple = mark.from === mark.to;
+      input.hidden = true;
+      fileInputs.add(input);
+      parent.append(input);
+      const clean = () => { input.remove(); fileInputs.delete(input); if (!disposed) { view.dispatch({ effects: bookmarkEffect.of({ id }) }); if (!jobs.size) onIdle?.(); } };
+      input.addEventListener("cancel", clean, { once: true });
+      input.addEventListener("change", () => {
+        const current = !disposed && view.state.field(bookmarks).get(id);
+        if (current) uploadFiles([...input.files], current);
+        clean();
+      }, { once: true });
+      input.click();
+    }
+    function chooseAsset() {
+      const mark = { from: view.state.selection.main.head, to: view.state.selection.main.head };
+      if (!allowed(mark)) return;
+      const id = addBookmark(mark);
+      const dialog = doc.createElement("dialog");
+      dialog.className = "writer-md-image-picker";
+      dialog.setAttribute("aria-label", "에셋 이미지 선택");
+      const heading = doc.createElement("h3"); heading.textContent = "에셋에서 이미지 선택";
+      dialog.append(heading);
+      const list = doc.createElement("div"); list.className = "writer-md-image-picker-list";
+      const entries = (assets.list?.() || []).filter(entry => IMAGE_TYPES.includes(entry.type));
+      entries.forEach(entry => {
+        const item = button(entry.name || entry.assetId, () => {
+          commit(id, entry.assetId, entry.name || "이미지");
+          dialog.close();
+        });
+        const url = assets.get(entry.assetId);
+        if (url) { const image = doc.createElement("img"); image.src = url; image.alt = ""; item.prepend(image); }
+        list.append(item);
+      });
+      if (!entries.length) list.textContent = "등록된 이미지가 없습니다. 이미지 업로드를 이용해주세요.";
+      dialog.append(list, button("닫기", () => dialog.close()));
+      dialog.addEventListener("close", () => { dialog.remove(); if (!disposed) { view.dispatch({ effects: bookmarkEffect.of({ id }) }); view.focus(); } }, { once: true });
+      parent.append(dialog);
+      dialog.showModal();
+    }
+    const events = cm.EditorView.domEventHandlers({
+      paste(event) {
+        const files = [...(event.clipboardData?.files || [])];
+        if (view.state.readOnly || !assets?.upload || !files.length) return false;
+        event.preventDefault(); uploadFiles(files); return true;
+      },
+      dragover(event) {
+        if (view.state.readOnly || !assets?.upload || ![...(event.dataTransfer?.types || [])].includes("Files")) return false;
+        event.preventDefault(); event.stopPropagation(); event.dataTransfer.dropEffect = "copy"; return true;
+      },
+      drop(event) {
+        const files = [...(event.dataTransfer?.files || [])];
+        if (view.state.readOnly || !assets?.upload || !files.length) return false;
+        event.preventDefault(); event.stopPropagation();
+        const from = view.posAtCoords({ x: event.clientX, y: event.clientY }) ?? view.state.selection.main.head;
+        uploadFiles(files, { from, to: from }); return true;
+      }
+    });
+    function protectBoundary(backward) {
+      return editor => {
+        const selection = editor.state.selection.main;
+        if (editor.composing || !selection.empty) return false;
+        const block = imageBlocks(editor.state).find(item => backward
+          ? selection.head === item.to + 1 || selection.head === item.to
+          : selection.head === item.from - 1 || selection.head === item.from);
+        if (!block) return false;
+        const figure = [...editor.dom.querySelectorAll('.writer-md-image-editable')].find(element => editor.posAtDOM(element) === block.from);
+        figure?.focus();
+        return true;
+      };
+    }
+    return {
+      hasPending: () => jobs.size > 0 || fileInputs.size > 0,
+      extensions: [bookmarks, decorations, events, cm.keymap.of([
+        { key: "Backspace", run: protectBoundary(true) },
+        { key: "Delete", run: protectBoundary(false) }
+      ])],
+      attach(editor) {
+        view = editor;
+        if (assets?.upload) {
+          toolbar.append(button("이미지 업로드", () => chooseFiles()), button("에셋에서 선택", chooseAsset));
+          parent.prepend(toolbar);
+          parent.append(feedback);
+        }
+      },
+      destroy() { disposed = true; jobs.clear(); fileInputs.forEach(input => input.remove()); fileInputs.clear(); toolbar.remove(); feedback.remove(); parent.querySelectorAll(".writer-md-image-picker").forEach(dialog => dialog.remove()); }
+    };
+  }
+  return Object.freeze({ create, insertion });
+});