collavre 0.5.0 → 0.7.0

data/app/javascript/lib/lexical/action_text_attachment_node.js

@@ -1,459 +0,0 @@
-import React, {useCallback, useEffect, useMemo, useRef} from "react"
-import {DecoratorNode} from "lexical"
-import {useLexicalComposerContext} from "@lexical/react/LexicalComposerContext"
-import {useLexicalNodeSelection} from "@lexical/react/useLexicalNodeSelection"
-import {mergeRegister} from "@lexical/utils"
-import {
-  $getNodeByKey,
-  COMMAND_PRIORITY_LOW,
-  KEY_BACKSPACE_COMMAND,
-  KEY_DELETE_COMMAND
-} from "lexical"
-
-import {
-  sanitizeAttachmentPayload,
-  attachmentPayloadFromAttachmentElement,
-  attachmentPayloadFromFigure,
-  attachmentPayloadToHTMLElement,
-  ensureSgid,
-  formatFileSize
-} from "./attachment_payload"
-
-const TYPE = "action-text-attachment"
-
-const STATUS_READY = "ready"
-const STATUS_UPLOADING = "uploading"
-const STATUS_ERROR = "error"
-
-export class ActionTextAttachmentNode extends DecoratorNode {
-  constructor(payload, key) {
-    super(key)
-    this.__payload = sanitizeAttachmentPayload(payload)
-  }
-
-  static getType() {
-    return TYPE
-  }
-
-  static clone(node) {
-    return new ActionTextAttachmentNode(node.__payload, node.__key)
-  }
-
-  static importJSON(serializedNode) {
-    return new ActionTextAttachmentNode(serializedNode.payload ?? {}, serializedNode.key)
-  }
-
-  exportJSON() {
-    return {
-      type: TYPE,
-      version: 1,
-      payload: this.__payload
-    }
-  }
-
-  static importDOM() {
-    return {
-      "action-text-attachment": (domNode) => ({
-        conversion: (node) => {
-          const payload = attachmentPayloadFromAttachmentElement(node)
-          return payload ? {node: new ActionTextAttachmentNode(payload)} : null
-        },
-        priority: 1
-      }),
-      figure: (domNode) => ({
-        conversion: (node) => {
-          const payload = attachmentPayloadFromFigure(node)
-          return payload ? {node: new ActionTextAttachmentNode(payload)} : null
-        },
-        priority: 0
-      })
-    }
-  }
-
-  exportDOM() {
-    const {element} = attachmentPayloadToHTMLElement(this.__payload)
-    return {element}
-  }
-
-  createDOM() {
-    const container = document.createElement("div")
-    container.className = "lexical-attachment-block"
-    return container
-  }
-
-  updateDOM() {
-    return false
-  }
-
-  getPayload() {
-    return this.__payload
-  }
-
-  setPayload(updates) {
-    const writable = this.getWritable()
-    const merged = {
-      ...writable.__payload,
-      ...updates
-    }
-    if (updates.previewable === undefined) {
-      merged.previewable = writable.__payload.previewable
-    }
-    if (updates.caption === undefined) {
-      merged.caption = writable.__payload.caption
-    }
-    writable.__payload = sanitizeAttachmentPayload(merged)
-  }
-
-  setCaption(caption) {
-    this.setPayload({caption})
-  }
-
-  setDimensions(width, height) {
-    this.setPayload({width, height})
-  }
-
-  setProgress(progress) {
-    this.setPayload({progress: Math.max(0, Math.min(100, progress || 0))})
-  }
-
-  setLocalPreview(localUrl) {
-    this.setPayload({localUrl})
-  }
-
-  markUploading(updates = {}) {
-    this.setPayload({
-      ...updates,
-      status: STATUS_UPLOADING,
-      progress: 0,
-      previewable:
-        updates.previewable !== undefined
-          ? !!updates.previewable
-          : this.__payload.previewable
-    })
-  }
-
-  applyUploadResult(result) {
-    this.setPayload({
-      ...result,
-      status: STATUS_READY,
-      progress: 100
-    })
-  }
-
-  markUploadError(message) {
-    this.setPayload({
-      status: STATUS_ERROR,
-      progress: 0,
-      error: message || "Upload failed"
-    })
-  }
-
-  markUploaded() {
-    this.setPayload({status: STATUS_READY, progress: 100})
-  }
-
-  clearLocalUrl() {
-    this.setPayload({localUrl: null})
-  }
-
-  getTextContent() {
-    return " "
-  }
-
-  isInline() {
-    return false
-  }
-
-  decorate() {
-    return React.createElement(AttachmentComponent, {
-      nodeKey: this.getKey(),
-      payload: this.__payload
-    })
-  }
-}
-
-export function $createActionTextAttachmentNode(payload = {}) {
-  return new ActionTextAttachmentNode(payload)
-}
-
-export function $isActionTextAttachmentNode(node) {
-  return node instanceof ActionTextAttachmentNode
-}
-
-function isBlobUrl(url) {
-  return typeof url === "string" && url.startsWith("blob:")
-}
-
-function AttachmentComponent({payload, nodeKey}) {
-  const [editor] = useLexicalComposerContext()
-  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey)
-  const imageRef = useRef(null)
-
-  const className = useMemo(() => {
-    const classes = ["lexical-attachment"]
-    if (payload.previewable) classes.push("lexical-attachment--image")
-    if (isSelected) classes.push("is-selected")
-    if (payload.status === STATUS_UPLOADING) classes.push("is-uploading")
-    if (payload.status === STATUS_ERROR) classes.push("is-error")
-    return classes.join(" ")
-  }, [isSelected, payload.previewable, payload.status])
-
-  const removeNode = useCallback(() => {
-    editor.update(() => {
-      const node = $getNodeByKey(nodeKey)
-      if ($isActionTextAttachmentNode(node)) {
-        node.remove()
-      }
-    })
-  }, [editor, nodeKey])
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerCommand(
-        KEY_DELETE_COMMAND,
-        (event) => {
-          if (isSelected) {
-            event?.preventDefault()
-            removeNode()
-            return true
-          }
-          return false
-        },
-        COMMAND_PRIORITY_LOW
-      ),
-      editor.registerCommand(
-        KEY_BACKSPACE_COMMAND,
-        (event) => {
-          if (isSelected) {
-            event?.preventDefault()
-            removeNode()
-            return true
-          }
-          return false
-        },
-        COMMAND_PRIORITY_LOW
-      )
-    )
-  }, [editor, isSelected, removeNode])
-
-  useEffect(() => () => {
-    if (isBlobUrl(payload.localUrl)) {
-      URL.revokeObjectURL(payload.localUrl)
-    }
-  }, [payload.localUrl])
-
-  const selectNode = useCallback(
-    (event) => {
-      if (event.target.closest("input, textarea, button, a")) return
-      event.preventDefault()
-      if (!event.shiftKey) {
-        clearSelection()
-        setSelected(true)
-      } else {
-        setSelected(!isSelected)
-      }
-    },
-    [clearSelection, isSelected, setSelected]
-  )
-
-  const handleCaptionChange = useCallback(
-    (event) => {
-      const nextCaption = event.target.value
-      editor.update(() => {
-        const node = $getNodeByKey(nodeKey)
-        if ($isActionTextAttachmentNode(node)) {
-          node.setCaption(nextCaption)
-        }
-      })
-    },
-    [editor, nodeKey]
-  )
-
-  const startResize = useCallback(
-    (event) => {
-      if (!payload.previewable) return
-      event.preventDefault()
-      const img = imageRef.current
-      if (!img) return
-      const rect = img.getBoundingClientRect()
-      const ratio = rect.width && rect.height ? rect.width / rect.height : 1
-      const startWidth = rect.width
-      const startX = event.clientX
-
-      const handleMove = (moveEvent) => {
-        const delta = moveEvent.clientX - startX
-        const nextWidth = Math.max(80, Math.round(startWidth + delta))
-        const nextHeight = Math.round(nextWidth / ratio)
-        editor.update(() => {
-          const node = $getNodeByKey(nodeKey)
-          if ($isActionTextAttachmentNode(node)) {
-            node.setDimensions(nextWidth, nextHeight)
-          }
-        })
-      }
-
-      const handleUp = () => {
-        document.removeEventListener("pointermove", handleMove)
-        document.removeEventListener("pointerup", handleUp)
-      }
-
-      document.addEventListener("pointermove", handleMove)
-      document.addEventListener("pointerup", handleUp)
-    },
-    [editor, nodeKey, payload.previewable]
-  )
-
-  const children = []
-
-  children.push(
-    React.createElement(
-      "button",
-      {
-        type: "button",
-        className: "lexical-attachment__remove",
-        onMouseDown: (event) => event.preventDefault(),
-        onClick: (event) => {
-          event.preventDefault()
-          removeNode()
-        },
-        "aria-label": "Remove attachment"
-      },
-      "×"
-    )
-  )
-
-  if (payload.status === STATUS_UPLOADING) {
-    children.push(
-      React.createElement(
-        "div",
-        {className: "lexical-attachment__overlay"},
-        React.createElement(
-          "div",
-          {className: "lexical-attachment__progress"},
-          `Uploading… ${Math.round(payload.progress || 0)}%`
-        )
-      )
-    )
-  }
-
-  if (payload.status === STATUS_ERROR) {
-    children.push(
-      React.createElement(
-        "div",
-        {className: "lexical-attachment__overlay lexical-attachment__overlay--error"},
-        React.createElement("div", null, "Upload failed. Remove and try again.")
-      )
-    )
-  }
-
-  const figureChildren = []
-
-  if (payload.previewable && (payload.localUrl || payload.url)) {
-    const resolvedWidth = payload.width ? Math.round(payload.width) : null
-    figureChildren.push(
-      React.createElement("img", {
-        ref: imageRef,
-        src: payload.localUrl || payload.url,
-        alt: payload.caption || payload.filename || "",
-        style: {
-          maxWidth: "100%",
-          width: resolvedWidth ? `${resolvedWidth}px` : undefined,
-          height: resolvedWidth ? "auto" : payload.height ? `${Math.round(payload.height)}px` : undefined
-        }
-      })
-    )
-  } else {
-    const infoChildren = []
-    if (payload.url) {
-      infoChildren.push(
-        React.createElement(
-          "a",
-          {
-            href: payload.url,
-            target: "_blank",
-            rel: "noopener",
-            className: "lexical-attachment__file-name",
-            onClick: (event) => event.stopPropagation()
-          },
-          payload.filename || "Attachment"
-        )
-      )
-    } else {
-      infoChildren.push(
-        React.createElement(
-          "div",
-          {className: "lexical-attachment__file-name"},
-          payload.filename || "Attachment"
-        )
-      )
-    }
-    if (Number.isFinite(payload.filesize)) {
-      infoChildren.push(
-        React.createElement(
-          "div",
-          {className: "lexical-attachment__file-size"},
-          formatFileSize(payload.filesize)
-        )
-      )
-    }
-
-    figureChildren.push(
-      React.createElement(
-        "div",
-        {className: "lexical-attachment__file"},
-        React.createElement(
-          "div",
-          {className: "lexical-attachment__file-icon", "aria-hidden": "true"},
-          "📎"
-        ),
-        React.createElement(
-          "div",
-          {className: "lexical-attachment__file-info"},
-          ...infoChildren
-        )
-      )
-    )
-  }
-
-  const captionChildren = [
-    React.createElement("input", {
-      type: "text",
-      className: "lexical-attachment__caption-input",
-      value: payload.caption || "",
-      placeholder: payload.previewable ? "Add caption" : "Describe attachment",
-      onChange: handleCaptionChange,
-      onClick: (event) => event.stopPropagation(),
-      onFocus: (event) => event.stopPropagation()
-    })
-  ]
-
-  if (payload.previewable && Number.isFinite(payload.filesize)) {
-    captionChildren.push(
-      React.createElement(
-        "span",
-        {className: "lexical-attachment__caption-size"},
-        formatFileSize(payload.filesize)
-      )
-    )
-  }
-
-  figureChildren.push(React.createElement("figcaption", null, ...captionChildren))
-
-  children.push(React.createElement("figure", null, ...figureChildren))
-
-  if (payload.previewable) {
-    children.push(
-      React.createElement("div", {
-        className: "lexical-attachment__resize-handle",
-        role: "presentation",
-        onPointerDown: startResize
-      })
-    )
-  }
-
-  return React.createElement(
-    "div",
-    {className, contentEditable: false, onClick: selectNode},
-    ...children
-  )
-}

data/app/javascript/lib/lexical/dom_attachment_utils.js

@@ -1,66 +0,0 @@
-import {
-  sanitizeAttachmentPayload,
-  attachmentPayloadFromAttachmentElement,
-  attachmentPayloadFromFigure,
-  attachmentPayloadToHTMLElement
-} from "./attachment_payload"
-
-export function extractAttachmentPayloadFromDOM(element) {
-  if (!(element instanceof Element)) return null
-  if (element.tagName === "ACTION-TEXT-ATTACHMENT") {
-    return attachmentPayloadFromAttachmentElement(element)
-  }
-  if (element.tagName === "FIGURE") {
-    return attachmentPayloadFromFigure(element)
-  }
-  return null
-}
-
-export function ensureAttachmentWrapper(element) {
-  if (!(element instanceof Element)) return null
-  const payload = attachmentPayloadFromAttachmentElement(element)
-  if (payload) return {element, payload}
-
-  const figure = element.tagName === "FIGURE" ? element : element.querySelector("figure.attachment")
-  if (!figure) return null
-  const figurePayload = attachmentPayloadFromFigure(figure)
-  if (!figurePayload) return null
-  const {element: wrapper, payload: sanitized} = attachmentPayloadToHTMLElement(figurePayload)
-  figure.replaceWith(wrapper)
-  return {element: wrapper, payload: sanitized}
-}
-
-export function serializeAttachmentPayloadToHTML(payload) {
-  const {element} = attachmentPayloadToHTMLElement(payload)
-  return element.outerHTML
-}
-
-export function normalizeAttachmentPair(container) {
-  if (!(container instanceof Element)) return
-  const attachments = Array.from(container.querySelectorAll("action-text-attachment"))
-  const seen = new Set()
-
-  attachments.forEach((attachment) => {
-    const payload = attachmentPayloadFromAttachmentElement(attachment)
-    if (!payload) return
-    const key = `${payload.sgid || payload.filename}-${payload.url || ""}`
-    if (seen.has(key)) {
-      attachment.remove()
-      return
-    }
-    seen.add(key)
-
-    const figure = attachment.querySelector("figure.attachment")
-    if (figure) {
-      attachmentPayloadToHTMLElement(payload) // ensures figure JSON is in-sync
-    }
-  })
-
-  container.querySelectorAll("figure.attachment").forEach((figure) => {
-    if (figure.closest("action-text-attachment")) return
-    const payload = attachmentPayloadFromFigure(figure)
-    if (!payload) return
-    const {element} = attachmentPayloadToHTMLElement(payload)
-    figure.replaceWith(element)
-  })
-}

data/app/javascript/modules/share_modal.js

@@ -1,76 +0,0 @@
-// Share creative modal functionality
-// Handles share button click, invite link generation, and modal interactions
-
-document.addEventListener('turbo:load', function() {
-  const shareBtn = document.getElementById('share-creative-btn')
-  const modal = document.getElementById('share-creative-modal')
-  const closeBtn = document.getElementById('close-share-modal')
-  const emailInput = document.getElementById('share-user-email')
-  const inviteLinkBtn = document.getElementById('creative-invite-link')
-  const permissionSelect = document.getElementById('share-permission')
-
-  if (inviteLinkBtn) {
-    inviteLinkBtn.onclick = function() {
-      const creativeId = inviteLinkBtn.dataset.creativeId
-      const permission = permissionSelect ? permissionSelect.value : 'read'
-      const permissionLabel = permissionSelect ? permissionSelect.options[permissionSelect.selectedIndex].text : ''
-      const noAccessMessage = inviteLinkBtn.dataset.noAccessMessage || 'Cannot create invite link for "No Access" permission.'
-      const copiedTemplate = inviteLinkBtn.dataset.copiedTemplate || 'Invite link copied with __PERMISSION__ permission!'
-
-      if (permission === 'no_access') {
-        alert(noAccessMessage)
-        return
-      }
-      fetch('/invite', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content
-        },
-        body: JSON.stringify({ creative_id: creativeId, permission: permission })
-      }).then(r => r.json()).then(data => {
-        const plan42Copy = window.Plan42 && window.Plan42.copyTextToClipboard
-        let copyPromise = null
-        if (plan42Copy) {
-          copyPromise = plan42Copy(data.url)
-        } else if (navigator.clipboard && navigator.clipboard.writeText) {
-          copyPromise = navigator.clipboard.writeText(data.url)
-        }
-        if (copyPromise) {
-          copyPromise.then(function() {
-            alert(copiedTemplate.replace('__PERMISSION__', permissionLabel))
-          })
-        }
-      })
-    }
-  }
-
-  if (shareBtn && modal && closeBtn) {
-    shareBtn.onclick = function() {
-      modal.style.display = 'flex'
-      document.body.classList.add('no-scroll')
-    }
-    closeBtn.onclick = function() {
-      modal.style.display = 'none'
-      document.body.classList.remove('no-scroll')
-    }
-    modal.onclick = function(e) {
-      if (e.target === modal) {
-        modal.style.display = 'none'
-        document.body.classList.remove('no-scroll')
-      }
-    }
-    const params = new URLSearchParams(window.location.search)
-    const reqEmail = params.get('share_request')
-    if (reqEmail) {
-      shareBtn.click()
-      if (emailInput) {
-        emailInput.value = reqEmail
-        emailInput.dispatchEvent(new Event('blur'))
-      }
-    }
-    if (params.get('open_share') === 'true') {
-      shareBtn.click()
-    }
-  }
-})

data/app/javascript/modules/share_user_popup.js

@@ -1,77 +0,0 @@
-import CommonPopup from '../lib/common_popup'
-
-let sharePopupInitialized = false
-
-if (!sharePopupInitialized) {
-  sharePopupInitialized = true
-
-  document.addEventListener('turbo:load', function () {
-    const input = document.getElementById('share-user-email')
-    const menu = document.getElementById('share-user-suggestions')
-    const modal = document.getElementById('share-creative-modal')
-    const closeBtn = document.getElementById('close-share-modal')
-
-    if (!input || !menu) return
-
-    const list = menu.querySelector('.mention-results') || menu.querySelector('.common-popup-list')
-    let fetchTimer
-
-    const popupMenu = new CommonPopup(menu, {
-      listElement: list,
-      renderItem: (user) => `<div class="mention-item"><img src="${user.avatar_url || ''}" width="20" height="20" class="avatar" /> ${user.name} <span style="opacity:0.7">${user.email || ''}</span></div>`,
-      onSelect: (user) => {
-        input.value = user.email || user.name
-        popupMenu.hide()
-        input.focus()
-        input.dispatchEvent(new Event('input', { bubbles: true }))
-        input.dispatchEvent(new Event('blur', { bubbles: true }))
-      },
-    })
-
-    function hide() {
-      popupMenu.hide()
-    }
-
-    function show(users) {
-      if (!users || users.length === 0) {
-        hide()
-        return
-      }
-      popupMenu.setItems(users)
-      popupMenu.showAt(input.getBoundingClientRect())
-    }
-
-    input.addEventListener('keydown', function (event) {
-      if (popupMenu.handleKey(event)) return
-    })
-
-    input.addEventListener('input', function () {
-      const term = input.value.trim()
-      if (!term) {
-        hide()
-        return
-      }
-      clearTimeout(fetchTimer)
-      fetchTimer = setTimeout(function () {
-        const url = new URL('/users/search', window.location.origin)
-        url.searchParams.set('q', term)
-        if (modal?.dataset?.creativeId) {
-          url.searchParams.set('creative_id', modal.dataset.creativeId)
-        }
-        fetch(url, { headers: { Accept: 'application/json' } })
-          .then(function (r) { return r.ok ? r.json() : [] })
-          .then(show)
-          .catch(function () { })
-      }, 200)
-    })
-
-    input.addEventListener('blur', function () {
-      setTimeout(hide, 150)
-    })
-
-    closeBtn?.addEventListener('click', hide)
-    modal?.addEventListener('click', function (event) {
-      if (event.target === modal) hide()
-    })
-  })
-}