ordars_rails_editor 0.1.0

data/app/javascript/ordars_rails_editor/index.js

@@ -0,0 +1,420 @@
+// ordars-rails-editor 셸 — 편집 코어는 Tiptap(번들 내장), 이 파일은 툴바·팔레트·툴팁·
+// HTML 소스 모드·첨부 패널·업로드 어댑터·폼 동기화를 담당한다.
+//
+// 마운트: 헬퍼(ore_editor)가 렌더한 [data-ore-editor] 루트를 OrdarsRailsEditor.mountAll() 이 잡는다.
+//   동적 삽입(모달 AJAX 등)은 host 가 window.OrdarsRailsEditor.mountAll(container) 를 다시 호출.
+//
+// 업로드 계약(data-ore-upload-url 지정 시):
+//   POST {upload_url}  multipart FormData { file }  (+ X-CSRF-Token 헤더)
+//   응답 JSON: { id, url, thumbnail_url?, file_name, file_size, file_type }  (file_type: image|video|document|...)
+//   실패: { error: "메시지" } — alert 대신 ore:error 이벤트 + 콘솔.
+//   미지정 시(로컬 모드): 이미지 본문 삽입=dataURL, 첨부=목록 표시만(hidden input 없음).
+//
+// 저장 계약: 루트 내부 textarea.ore-input(hidden) 에 HTML 을 동기화(update 마다 + submit 시),
+//   첨부는 .ore-attach-row 마다 hidden input[name={attach_name}][value=file_id].
+
+import {
+  Editor, StarterKit, Underline, Link, TextStyle, Color, Highlight,
+  TextAlign, Image, Placeholder
+} from "ordars_rails_editor/tiptap"
+
+// 글자 크기 — TextStyle 마크에 fontSize 속성 추가
+const SizedTextStyle = TextStyle.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      fontSize: {
+        default: null,
+        parseHTML: el => el.style.fontSize || null,
+        renderHTML: attrs => (attrs.fontSize ? { style: `font-size: ${attrs.fontSize}` } : {})
+      }
+    }
+  }
+})
+
+// 이미지 — data-file-id 마커 보존(렌더 시점 URL 치환의 근거)
+const FileImage = Image.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      "data-file-id": { default: null }
+    }
+  }
+})
+
+const COLORS = ["#0f172a", "#dc2626", "#ea580c", "#ca8a04", "#16a34a", "#2563eb", "#7c3aed", "#db2777", "#64748b", "#3e6187", "#0d9488", "#92400e", "#78716c"]
+const HIGHLIGHTS = ["#fef08a", "#bbf7d0", "#bfdbfe", "#fbcfe8", "#fed7aa", "#e9d5ff"]
+
+// ── 전역 말풍선 툴팁 (버튼 위) ──
+let tipEl = null
+let tipTimer = null
+function ensureTip() {
+  if (tipEl) return tipEl
+  tipEl = document.createElement("div")
+  tipEl.className = "ore-tip"
+  document.body.appendChild(tipEl)
+  return tipEl
+}
+function bindTips(scope) {
+  scope.querySelectorAll("[data-tip]").forEach(el => {
+    if (el._oreTip) return
+    el._oreTip = true
+    el.addEventListener("mouseenter", () => {
+      clearTimeout(tipTimer)
+      tipTimer = setTimeout(() => {
+        const t = ensureTip()
+        t.textContent = el.dataset.tip
+        t.classList.add("show")
+        const r = el.getBoundingClientRect()
+        let x = r.left + r.width / 2 - t.offsetWidth / 2
+        x = Math.max(8, Math.min(x, window.innerWidth - t.offsetWidth - 8))
+        t.style.left = x + "px"
+        t.style.top = (r.top - t.offsetHeight - 8) + "px"
+      }, 120)
+    })
+    const hide = () => { clearTimeout(tipTimer); tipEl?.classList.remove("show") }
+    el.addEventListener("mouseleave", hide)
+    el.addEventListener("mousedown", hide)
+  })
+}
+
+export class OreEditor {
+  static instances = new WeakMap()
+
+  static mount(root) {
+    if (OreEditor.instances.has(root)) return OreEditor.instances.get(root)
+    const inst = new OreEditor(root)
+    OreEditor.instances.set(root, inst)
+    return inst
+  }
+
+  static mountAll(scope = document) {
+    scope.querySelectorAll("[data-ore-editor]").forEach(root => OreEditor.mount(root))
+  }
+
+  static get(root) { return OreEditor.instances.get(root) }
+
+  constructor(root) {
+    this.root = root
+    this.input = root.querySelector(".ore-input")
+    this.uploadUrl = root.dataset.oreUploadUrl || ""
+    this.attachName = root.dataset.oreAttachName || ""
+    this.limits = {
+      images: parseInt(root.dataset.oreMaxImages || "100", 10),
+      videos: parseInt(root.dataset.oreMaxVideos || "50", 10),
+      totalMb: parseFloat(root.dataset.oreMaxMb || "50")
+    }
+    this.state = { img: 0, vid: 0, bytes: 0 }
+    this.htmlMode = false
+
+    this.editor = new Editor({
+      element: root.querySelector(".ore-content"),
+      extensions: [
+        StarterKit,
+        Underline,
+        SizedTextStyle,
+        Color,
+        Highlight.configure({ multicolor: true }),
+        Link.configure({ openOnClick: false, autolink: true }),
+        TextAlign.configure({ types: ["heading", "paragraph"] }),
+        FileImage.configure({ inline: false }),
+        Placeholder.configure({ placeholder: root.dataset.orePlaceholder || "내용을 입력하세요" })
+      ],
+      content: this.input ? this.input.value : "",
+      onUpdate: () => this.syncInput()
+    })
+
+    this.wireToolbar()
+    this.wirePalettes()
+    this.wireAttachments()
+    this.wireFormSync()
+    bindTips(root)
+    this.refresh = this.refresh.bind(this)
+    this.editor.on("transaction", this.refresh)
+    this.editor.on("selectionUpdate", this.refresh)
+    root.dispatchEvent(new CustomEvent("ore:mounted", { bubbles: true }))
+  }
+
+  destroy() {
+    this.editor?.destroy()
+    OreEditor.instances.delete(this.root)
+  }
+
+  getHTML() { return this.editor.getHTML() }
+  setContent(html) { this.editor.commands.setContent(html || "", true); this.syncInput() }
+
+  syncInput() {
+    if (!this.input) return
+    const html = this.editor.getHTML()
+    // 빈 문서는 빈 문자열로 (required 검증·plain 저장 판단이 쉬워지게)
+    this.input.value = this.editor.isEmpty ? "" : html
+  }
+
+  // ── 툴바 ──
+  wireToolbar() {
+    const chain = () => this.editor.chain().focus()
+    const cmds = {
+      bold: () => chain().toggleBold().run(),
+      italic: () => chain().toggleItalic().run(),
+      strike: () => chain().toggleStrike().run(),
+      underline: () => chain().toggleUnderline().run(),
+      code: () => chain().toggleCode().run(),
+      bulletList: () => chain().toggleBulletList().run(),
+      orderedList: () => chain().toggleOrderedList().run(),
+      blockquote: () => chain().toggleBlockquote().run(),
+      hr: () => chain().setHorizontalRule().run(),
+      alignLeft: () => chain().setTextAlign("left").run(),
+      alignCenter: () => chain().setTextAlign("center").run(),
+      alignRight: () => chain().setTextAlign("right").run(),
+      alignJustify: () => chain().setTextAlign("justify").run(),
+      undo: () => chain().undo().run(),
+      redo: () => chain().redo().run(),
+      link: () => {
+        const prev = this.editor.getAttributes("link").href || ""
+        const url = prompt("링크 URL (비우면 해제)", prev)
+        if (url === null) return
+        if (url === "") chain().unsetLink().run()
+        else chain().extendMarkRange("link").setLink({ href: url }).run()
+      },
+      html: () => this.toggleHtml()
+    }
+    this.root.querySelectorAll("[data-cmd]").forEach(b =>
+      b.addEventListener("click", () => cmds[b.dataset.cmd]?.()))
+
+    const fs = this.root.querySelector(".ore-fontsize")
+    fs?.addEventListener("change", e => {
+      const v = e.target.value
+      chain().setMark("textStyle", { fontSize: v || null }).run()
+    })
+
+    this.root.querySelector(".ore-imgbtn")?.addEventListener("click", () => this.pickImage())
+  }
+
+  refresh() {
+    const q = sel => this.root.querySelector(sel)
+    const marks = { bold: "bold", italic: "italic", strike: "strike", underline: "underline", code: "code", bulletList: "bulletList", orderedList: "orderedList", blockquote: "blockquote" }
+    for (const [cmd, name] of Object.entries(marks)) {
+      q(`[data-cmd="${cmd}"]`)?.classList.toggle("on", this.editor.isActive(name))
+    }
+    ;[["alignLeft", "left"], ["alignCenter", "center"], ["alignRight", "right"], ["alignJustify", "justify"]].forEach(([c, v]) =>
+      q(`[data-cmd="${c}"]`)?.classList.toggle("on", this.editor.isActive({ textAlign: v })))
+    q('[data-cmd="link"]')?.classList.toggle("on", this.editor.isActive("link"))
+    const fs = q(".ore-fontsize")
+    if (fs) fs.value = this.editor.getAttributes("textStyle").fontSize || ""
+  }
+
+  // ── 팔레트 (글자색·형광펜 — 해제는 마지막 ⌀ 스와치) ──
+  wirePalettes() {
+    const build = (palSel, colors, apply, clear) => {
+      const el = this.root.querySelector(palSel)
+      if (!el) return
+      colors.forEach(c => {
+        const b = document.createElement("button")
+        b.type = "button"; b.style.background = c
+        b.addEventListener("click", ev => { ev.stopPropagation(); apply(c); this.closePops() })
+        el.appendChild(b)
+      })
+      const x = document.createElement("button")
+      x.type = "button"; x.className = "clear"; x.title = "해제"
+      x.addEventListener("click", ev => { ev.stopPropagation(); clear(); this.closePops() })
+      el.appendChild(x)
+    }
+    build(".ore-colorpal", COLORS,
+      c => this.editor.chain().focus().setColor(c).run(),
+      () => this.editor.chain().focus().unsetColor().run())
+    build(".ore-hlpal", HIGHLIGHTS,
+      c => this.editor.chain().focus().setHighlight({ color: c }).run(),
+      () => this.editor.chain().focus().unsetHighlight().run())
+
+    this.root.querySelectorAll("[data-pop]").forEach(btn => {
+      btn.addEventListener("click", () => {
+        const pop = this.root.querySelector(btn.dataset.pop)
+        const was = pop?.classList.contains("open")
+        this.closePops()
+        if (pop && !was) pop.classList.add("open")
+      })
+    })
+    document.addEventListener("click", e => {
+      if (!e.target.closest || !e.target.closest(".ore-btnwrap")) this.closePops()
+    })
+  }
+
+  closePops() { this.root.querySelectorAll(".ore-pop").forEach(p => p.classList.remove("open")) }
+
+  // ── HTML 소스 모드 ──
+  toggleHtml() {
+    const view = this.root.querySelector(".ore-html")
+    if (!view) return
+    this.htmlMode = !this.htmlMode
+    this.root.classList.toggle("is-html", this.htmlMode)
+    this.root.querySelector('[data-cmd="html"]')?.classList.toggle("on", this.htmlMode)
+    if (this.htmlMode) view.value = this.editor.getHTML()
+    else { this.editor.commands.setContent(view.value, true); this.syncInput() }
+  }
+
+  // ── 이미지 본문 삽입 ──
+  pickImage() {
+    const pick = document.createElement("input")
+    pick.type = "file"; pick.accept = "image/*"; pick.multiple = true
+    pick.addEventListener("change", async () => {
+      for (const f of pick.files) {
+        if (this.uploadUrl) {
+          const meta = await this.upload(f)
+          if (!meta) continue
+          this.editor.chain().focus().setImage({ src: meta.url, "data-file-id": meta.id }).run()
+          this.addAttachRow(f, meta)
+          // 호스트 훅 — 본문 삽입 업로드를 호스트의 첨부 목록/수명주기와 연동할 때 사용
+          this.root.dispatchEvent(new CustomEvent("ore:uploaded", { bubbles: true, detail: { ...meta, inline: true } }))
+        } else {
+          const r = new FileReader()
+          r.onload = () => this.editor.chain().focus().setImage({ src: r.result }).run()
+          r.readAsDataURL(f)
+          this.addAttachRow(f, null)
+        }
+      }
+      this.syncInput()
+    })
+    pick.click()
+  }
+
+  // ── 첨부 패널 ──
+  wireAttachments() {
+    const list = this.root.querySelector(".ore-attachlist")
+    if (!list) return
+    const pickFiles = () => {
+      const pick = document.createElement("input")
+      pick.type = "file"; pick.multiple = true
+      pick.addEventListener("change", () => [...pick.files].forEach(f => this.attach(f)))
+      pick.click()
+    }
+    this.root.querySelector(".ore-filebtn")?.addEventListener("click", pickFiles)
+    list.addEventListener("dragover", e => e.preventDefault())
+    list.addEventListener("drop", e => { e.preventDefault(); [...e.dataTransfer.files].forEach(f => this.attach(f)) })
+  }
+
+  async attach(file) {
+    if (this.uploadUrl) {
+      const meta = await this.upload(file)
+      if (meta) {
+        this.addAttachRow(file, meta)
+        this.root.dispatchEvent(new CustomEvent("ore:uploaded", { bubbles: true, detail: { ...meta, inline: false } }))
+      }
+    } else {
+      this.addAttachRow(file, null)
+    }
+  }
+
+  async upload(file) {
+    try {
+      const fd = new FormData()
+      fd.append("file", file)
+      const csrf = document.querySelector('meta[name="csrf-token"]')?.content
+      const res = await fetch(this.uploadUrl, {
+        method: "POST", body: fd,
+        headers: csrf ? { "X-CSRF-Token": csrf } : {}
+      })
+      const json = await res.json().catch(() => ({}))
+      if (!res.ok || json.error || !json.url) {
+        this.emitError(json.error || `업로드 실패 (${res.status})`)
+        return null
+      }
+      return json
+    } catch (e) {
+      this.emitError("업로드 중 오류: " + e.message)
+      return null
+    }
+  }
+
+  emitError(message) {
+    this.root.dispatchEvent(new CustomEvent("ore:error", { bubbles: true, detail: { message } }))
+    if (window.showSnackbar) window.showSnackbar(message, "error")
+    else console.error("[ordars-rails-editor]", message)
+  }
+
+  addAttachRow(file, meta) {
+    const list = this.root.querySelector(".ore-attachlist")
+    if (!list) return
+    list.querySelector(".ore-attach-empty")?.remove()
+
+    const type = meta?.file_type || (file.type.startsWith("image/") ? "image" : file.type.startsWith("video/") ? "video" : "file")
+    const size = meta?.file_size ?? file.size
+
+    const row = document.createElement("div")
+    row.className = "ore-attach-row"
+    if (type === "image") {
+      const t = document.createElement("img"); t.className = "th"
+      t.src = meta?.thumbnail_url || meta?.url || URL.createObjectURL(file)
+      row.appendChild(t)
+    } else {
+      const i = document.createElement("div"); i.className = "ic"
+      i.textContent = type === "video" ? "▶" : "📄"
+      row.appendChild(i)
+    }
+    const nm = document.createElement("span"); nm.className = "nm"; nm.textContent = meta?.file_name || file.name
+    const sz = document.createElement("span"); sz.className = "sz"; sz.textContent = (size / 1024 / 1024).toFixed(2) + "MB"
+    const rm = document.createElement("button"); rm.type = "button"; rm.className = "rm"; rm.textContent = "✕"; rm.title = "삭제"
+    row.append(nm, sz, rm)
+
+    if (meta?.id && this.attachName) {
+      const hid = document.createElement("input")
+      hid.type = "hidden"; hid.name = this.attachName; hid.value = meta.id
+      row.appendChild(hid)
+    }
+
+    rm.addEventListener("click", () => {
+      row.remove()
+      if (type === "image") this.state.img--
+      if (type === "video") this.state.vid--
+      this.state.bytes -= size
+      this.syncGauges()
+      if (!list.querySelector(".ore-attach-row")) this.renderEmpty(list)
+    })
+
+    list.appendChild(row)
+    if (type === "image") this.state.img++
+    if (type === "video") this.state.vid++
+    this.state.bytes += size
+    this.syncGauges()
+  }
+
+  renderEmpty(list) {
+    const d = document.createElement("div")
+    d.className = "ore-attach-empty"
+    d.textContent = "첨부된 파일이 없습니다. — [파일] 버튼 또는 이 영역에 드래그"
+    list.appendChild(d)
+  }
+
+  syncGauges() {
+    const q = sel => this.root.querySelector(sel)
+    const set = (sel, v) => { const el = q(sel); if (el) el.textContent = v }
+    set(".ore-cnt-img", this.state.img)
+    set(".ore-cnt-vid", this.state.vid)
+    const mb = this.state.bytes / 1024 / 1024
+    set(".ore-cap-used", mb.toFixed(2) + "MB")
+    const g = (sel, pct) => { const el = q(sel); if (el) el.style.width = Math.min(100, pct) + "%" }
+    g(".ore-g-img i", this.state.img / this.limits.images * 100)
+    g(".ore-g-vid i", this.state.vid / this.limits.videos * 100)
+    g(".ore-g-cap i", mb / this.limits.totalMb * 100)
+  }
+
+  // ── 폼 동기화 — submit 직전 최신 HTML 보장 (HTML 모드였으면 그 내용 반영) ──
+  wireFormSync() {
+    const form = this.root.closest("form")
+    if (!form || form._oreSync) return
+    form._oreSync = true
+    form.addEventListener("submit", () => {
+      OreEditor.instances.get(this.root) // noop — 인스턴스 생존 확인
+      if (this.htmlMode) this.toggleHtml()
+      this.syncInput()
+    })
+  }
+}
+
+function mountAll(scope) { OreEditor.mountAll(scope || document) }
+
+window.OrdarsRailsEditor = { OreEditor, mount: OreEditor.mount.bind(OreEditor), mountAll, get: OreEditor.get.bind(OreEditor) }
+
+document.addEventListener("DOMContentLoaded", () => mountAll())
+document.addEventListener("turbo:load", () => mountAll())
+
+export default OreEditor