rails_den 2.0.0

data/app/assets/javascript/rails_den/composer.js

@@ -0,0 +1,1785 @@
+(() => {
+  const COMPOSER_SELECTOR =
+    "[data-rails-den-composer]"
+
+  const INPUT_SELECTOR =
+    "[data-rails-den-composer-input]"
+
+  const MENTION_NAME_PATTERN =
+    /[A-Za-z0-9_]/
+
+  const MENTION_BOUNDARY_PATTERN =
+    /[\s([{"']/
+
+  const MENTION_DEBOUNCE =
+    175
+
+  const roots =
+    new Map()
+
+  const emojis = [
+    [ "😄", "smile" ],
+    [ "😂", "laughing" ],
+    [ "❤️", "heart" ],
+    [ "👍", "thumbs up" ],
+    [ "👀", "eyes" ],
+    [ "🔥", "fire" ],
+    [ "🎉", "party" ],
+    [ "🚀", "rocket" ],
+    [ "✅", "check" ],
+    [ "❌", "x" ],
+    [ "🤔", "thinking" ],
+    [ "🙌", "raised hands" ]
+  ]
+
+  const graphemeSegmenter =
+    typeof Intl !== "undefined" &&
+    typeof Intl.Segmenter === "function"
+      ? new Intl.Segmenter(
+          undefined,
+          {
+            granularity: "grapheme"
+          }
+        )
+      : null
+
+  function reactAvailable() {
+    return (
+      window.React &&
+      window.ReactDOM &&
+      typeof window.ReactDOM.createRoot ===
+        "function"
+    )
+  }
+
+  function composerConfiguration(composer) {
+    const input =
+      composer.querySelector(
+        INPUT_SELECTOR
+      )
+
+    if (!input) {
+      return null
+    }
+
+    return {
+      previewUrl:
+        composer.dataset.previewUrl,
+      mentionCandidatesUrl:
+        composer.dataset
+          .railsDenMentionCandidatesUrl,
+      id:
+        input.id,
+      name:
+        input.name,
+      value:
+        input.value,
+      rows:
+        input.rows || 8,
+      required:
+        input.required,
+      autofocus:
+        input.autofocus,
+      placeholder:
+        input.placeholder || ""
+    }
+  }
+
+  function wordCount(value) {
+    const normalized =
+      value.trim()
+
+    if (!normalized) {
+      return 0
+    }
+
+    return normalized
+      .split(/\s+/u)
+      .length
+  }
+
+  function characterCount(value) {
+    if (graphemeSegmenter) {
+      return Array.from(
+        graphemeSegmenter.segment(
+          value
+        )
+      ).length
+    }
+
+    return Array.from(
+      value
+    ).length
+  }
+
+  function markdownRangeExcluded(value, offset) {
+    const before = value.slice(0, offset)
+    const lineStart = before.lastIndexOf("\n") + 1
+    const line = value.slice(lineStart, offset)
+
+    if (/^ {0,3}>/.test(line)) {
+      return true
+    }
+
+    const lines = before.split("\n")
+    let fence = null
+
+    for (const candidateLine of lines) {
+      const marker = candidateLine.match(/^ {0,3}(`{3,}|~{3,})/)
+
+      if (!marker) {
+        continue
+      }
+
+      if (fence === marker[1][0]) {
+        fence = null
+      } else if (!fence) {
+        fence = marker[1][0]
+      }
+    }
+
+    if (fence) {
+      return true
+    }
+
+    const backticks = (line.match(/`/g) || []).length
+
+    if (backticks % 2 === 1) {
+      return true
+    }
+
+    const openingAngle = line.lastIndexOf("<")
+    const closingAngle = line.lastIndexOf(">")
+
+    if (openingAngle > closingAngle) {
+      return true
+    }
+
+    const openingDestination = line.lastIndexOf("](")
+    const closingDestination = line.lastIndexOf(")")
+
+    if (openingDestination > closingDestination) {
+      return true
+    }
+
+    const token = line.split(/\s/).pop() || ""
+
+    return /^(?:https?:\/\/|mailto:|www\.)/i.test(token)
+  }
+
+  function activeMentionQuery(value, start, finish) {
+    if (start !== finish) {
+      return null
+    }
+
+    let tokenStart = start
+
+    while (
+      tokenStart > 0 &&
+      MENTION_NAME_PATTERN.test(
+        value[tokenStart - 1]
+      )
+    ) {
+      tokenStart -= 1
+    }
+
+    if (
+      tokenStart === 0 ||
+      value[tokenStart - 1] !== "@"
+    ) {
+      return null
+    }
+
+    const atIndex = tokenStart - 1
+    const prefix = value.slice(tokenStart, start)
+
+    if (
+      prefix.length < 1 ||
+      prefix.length > 30 ||
+      !/^[A-Za-z0-9_]+$/.test(prefix)
+    ) {
+      return null
+    }
+
+    if (atIndex > 0) {
+      const previous = value[atIndex - 1]
+
+      if (!MENTION_BOUNDARY_PATTERN.test(previous)) {
+        return null
+      }
+
+      let slashes = 0
+      let index = atIndex - 1
+
+      while (index >= 0 && value[index] === "\\") {
+        slashes += 1
+        index -= 1
+      }
+
+      if (slashes % 2 === 1) {
+        return null
+      }
+    }
+
+    if (markdownRangeExcluded(value, atIndex)) {
+      return null
+    }
+
+    return {
+      start: atIndex,
+      finish: start,
+      prefix: prefix.toLowerCase()
+    }
+  }
+
+  function Composer({ configuration }) {
+    const React =
+      window.React
+
+    const h =
+      React.createElement
+
+    const {
+      useEffect,
+      useId,
+      useRef,
+      useState
+    } = React
+
+    const [
+      body,
+      setBody
+    ] =
+      useState(
+        configuration.value
+      )
+
+    const [
+      mode,
+      setMode
+    ] =
+      useState(
+        "write"
+      )
+
+    const [
+      status,
+      setStatus
+    ] =
+      useState(
+        "Markdown supported"
+      )
+
+    const [
+      previewHtml,
+      setPreviewHtml
+    ] =
+      useState(
+        ""
+      )
+
+    const [
+      previewFailed,
+      setPreviewFailed
+    ] =
+      useState(
+        false
+      )
+
+    const [
+      emojiOpen,
+      setEmojiOpen
+    ] =
+      useState(
+        false
+      )
+
+    const [
+      mentionQuery,
+      setMentionQuery
+    ] = useState(null)
+
+    const [
+      mentionCandidates,
+      setMentionCandidates
+    ] = useState([])
+
+    const [
+      mentionActiveIndex,
+      setMentionActiveIndex
+    ] = useState(0)
+
+    const [
+      mentionPosition,
+      setMentionPosition
+    ] = useState(null)
+
+    const [
+      mentionAnnouncement,
+      setMentionAnnouncement
+    ] = useState("")
+
+    const composerRef =
+      useRef(null)
+
+    const textareaRef =
+      useRef(null)
+
+    const previewRef =
+      useRef(null)
+
+    const previewTimerRef =
+      useRef(null)
+
+    const previewRequestRef =
+      useRef(null)
+
+    const mentionTimerRef =
+      useRef(null)
+
+    const mentionRequestRef =
+      useRef(null)
+
+    const mentionSequenceRef =
+      useRef(0)
+
+    const mentionListRef =
+      useRef(null)
+
+    const mentionListId =
+      `rails-den-mention-list-${useId().replace(/:/g, "")}`
+
+    const mentionOpen =
+      mentionQuery !== null &&
+      mentionCandidates.length > 0
+
+    const words =
+      wordCount(body)
+
+    const characters =
+      characterCount(body)
+
+    const statusText =
+      `${status} · ` +
+      `${words} ` +
+      `${words === 1 ? "word" : "words"} · ` +
+      `${characters} ` +
+      `${characters === 1 ? "character" : "characters"}`
+
+    function cancelPreview() {
+      if (previewTimerRef.current) {
+        window.clearTimeout(
+          previewTimerRef.current
+        )
+
+        previewTimerRef.current = null
+      }
+
+      if (previewRequestRef.current) {
+        previewRequestRef.current.abort()
+
+        previewRequestRef.current = null
+      }
+    }
+
+    function cancelMentionRequest() {
+      if (mentionTimerRef.current) {
+        window.clearTimeout(mentionTimerRef.current)
+        mentionTimerRef.current = null
+      }
+
+      if (mentionRequestRef.current) {
+        mentionRequestRef.current.abort()
+        mentionRequestRef.current = null
+      }
+    }
+
+    function closeMentions({announce = ""} = {}) {
+      cancelMentionRequest()
+      mentionSequenceRef.current += 1
+      setMentionQuery(null)
+      setMentionCandidates([])
+      setMentionActiveIndex(0)
+      setMentionPosition(null)
+
+      if (announce) {
+        setMentionAnnouncement(announce)
+      }
+    }
+
+    function positionMentionList() {
+      const input = textareaRef.current
+
+      if (!input || !mentionQuery) {
+        return
+      }
+
+      const pane = input.parentElement
+      const style = window.getComputedStyle(input)
+      const mirror = document.createElement("div")
+      const marker = document.createElement("span")
+      const copiedProperties = [
+        "boxSizing",
+        "width",
+        "height",
+        "paddingTop",
+        "paddingRight",
+        "paddingBottom",
+        "paddingLeft",
+        "borderTopWidth",
+        "borderRightWidth",
+        "borderBottomWidth",
+        "borderLeftWidth",
+        "fontFamily",
+        "fontSize",
+        "fontStyle",
+        "fontWeight",
+        "letterSpacing",
+        "lineHeight",
+        "textAlign",
+        "textTransform",
+        "wordSpacing",
+        "tabSize"
+      ]
+
+      mirror.className = "rails-den-mention-caret-mirror"
+      copiedProperties.forEach((property) => {
+        mirror.style[property] = style[property]
+      })
+      mirror.style.whiteSpace = "pre-wrap"
+      mirror.style.overflowWrap = "break-word"
+      mirror.style.top = `${-input.scrollTop}px`
+      mirror.style.left = `${-input.scrollLeft}px`
+      mirror.textContent = input.value.slice(0, mentionQuery.finish)
+      marker.textContent = "\u200b"
+      mirror.appendChild(marker)
+      pane.appendChild(mirror)
+
+      const markerRect = marker.getBoundingClientRect()
+      const paneRect = pane.getBoundingClientRect()
+      const lineHeight = parseFloat(style.lineHeight) || 24
+      const listWidth = Math.min(320, paneRect.width - 16)
+      const left = Math.max(
+        8,
+        Math.min(markerRect.left - paneRect.left, paneRect.width - listWidth - 8)
+      )
+      const below = markerRect.bottom - paneRect.top + 6
+      const estimatedHeight = Math.min(mentionCandidates.length, 8) * 48 + 2
+      const above = markerRect.top - paneRect.top - estimatedHeight - 6
+      const top = below + estimatedHeight <= pane.clientHeight
+        ? below
+        : Math.max(8, above || lineHeight)
+
+      pane.removeChild(mirror)
+      setMentionPosition({left, top, width: listWidth})
+    }
+
+    async function fetchMentionCandidates(query, sequence) {
+      if (!configuration.mentionCandidatesUrl) {
+        closeMentions()
+        return
+      }
+
+      const controller = new AbortController()
+      mentionRequestRef.current = controller
+
+      try {
+        const url = new URL(configuration.mentionCandidatesUrl, window.location.origin)
+        url.searchParams.set("q", query.prefix)
+
+        const response = await fetch(url.toString(), {
+          method: "GET",
+          credentials: "same-origin",
+          headers: {"Accept": "application/json"},
+          signal: controller.signal
+        })
+        const contentType = response.headers.get("content-type") || ""
+
+        if (!response.ok || !contentType.includes("application/json")) {
+          closeMentions()
+          return
+        }
+
+        const payload = await response.json()
+
+        if (sequence !== mentionSequenceRef.current) {
+          return
+        }
+
+        const suggestions = Array.isArray(payload.suggestions)
+          ? payload.suggestions.slice(0, 10)
+          : []
+
+        setMentionCandidates(suggestions)
+        setMentionActiveIndex(0)
+        setMentionAnnouncement(
+          suggestions.length === 0
+            ? "No mention suggestions"
+            : `${suggestions.length} mention ${suggestions.length === 1 ? "suggestion" : "suggestions"} available`
+        )
+      } catch (error) {
+        if (error.name !== "AbortError") {
+          closeMentions()
+        }
+      } finally {
+        if (mentionRequestRef.current === controller) {
+          mentionRequestRef.current = null
+        }
+      }
+    }
+
+    function scheduleMentionCandidates(value, input) {
+      const query = activeMentionQuery(
+        value,
+        input.selectionStart ?? value.length,
+        input.selectionEnd ?? value.length
+      )
+
+      cancelMentionRequest()
+
+      if (!query || mode !== "write") {
+        closeMentions()
+        return
+      }
+
+      const sequence = mentionSequenceRef.current + 1
+      mentionSequenceRef.current = sequence
+      setMentionQuery(query)
+      setMentionCandidates([])
+      setMentionActiveIndex(0)
+      mentionTimerRef.current = window.setTimeout(() => {
+        mentionTimerRef.current = null
+        fetchMentionCandidates(query, sequence)
+      }, MENTION_DEBOUNCE)
+    }
+
+    function insertMention(candidate) {
+      const input = textareaRef.current
+
+      if (!input || !mentionQuery) {
+        return
+      }
+
+      const following = input.value[mentionQuery.finish]
+      const suffix = following && /\s|[.,!?;:)}\]]/.test(following)
+        ? ""
+        : " "
+      const replacement = `@${candidate.mention_name}${suffix}`
+
+      input.setSelectionRange(mentionQuery.start, mentionQuery.finish)
+
+      const inserted = document.execCommand(
+        "insertText",
+        false,
+        replacement
+      )
+
+      if (!inserted) {
+        input.setRangeText(
+          replacement,
+          mentionQuery.start,
+          mentionQuery.finish,
+          "end"
+        )
+      }
+      const nextBody = input.value
+      const cursor = input.selectionStart
+
+      if (typeof window.ReactDOM.flushSync === "function") {
+        window.ReactDOM.flushSync(() => setBody(nextBody))
+      } else {
+        setBody(nextBody)
+      }
+
+      closeMentions({announce: `Inserted @${candidate.mention_name}`})
+
+      window.requestAnimationFrame(() => {
+        const currentInput = textareaRef.current
+
+        if (!currentInput) {
+          return
+        }
+
+        currentInput.focus()
+        currentInput.setSelectionRange(cursor, cursor)
+      })
+    }
+
+    function handleMentionKeyDown(event) {
+      if (!mentionOpen) {
+        if (event.key === "Escape") {
+          closeMentions()
+        }
+        return
+      }
+
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault()
+        const direction = event.key === "ArrowDown" ? 1 : -1
+        setMentionActiveIndex((current) =>
+          (current + direction + mentionCandidates.length) % mentionCandidates.length
+        )
+      } else if (event.key === "Enter") {
+        event.preventDefault()
+        insertMention(mentionCandidates[mentionActiveIndex])
+      } else if (event.key === "Escape") {
+        event.preventDefault()
+        closeMentions()
+      } else if (event.key === "Tab") {
+        closeMentions()
+      }
+    }
+
+    async function updatePreview(value) {
+      if (!configuration.previewUrl) {
+        setPreviewFailed(true)
+
+        setStatus(
+          "Preview unavailable"
+        )
+
+        return
+      }
+
+      if (previewRequestRef.current) {
+        previewRequestRef.current.abort()
+      }
+
+      const controller =
+        new AbortController()
+
+      previewRequestRef.current =
+        controller
+
+      setStatus(
+        "Rendering preview…"
+      )
+
+      try {
+        const csrfToken =
+          document.querySelector(
+            'meta[name="csrf-token"]'
+          )?.content
+
+        const headers = {
+          "Accept":
+            "text/html",
+          "Content-Type":
+            "application/x-www-form-urlencoded;charset=UTF-8"
+        }
+
+        if (csrfToken) {
+          headers["X-CSRF-Token"] =
+            csrfToken
+        }
+
+        const response =
+          await fetch(
+            configuration.previewUrl,
+            {
+              method: "POST",
+              headers,
+              body:
+                new URLSearchParams({
+                  body: value
+                }),
+              signal:
+                controller.signal
+            }
+          )
+
+        if (!response.ok) {
+          throw new Error(
+            `Preview failed with ${response.status}`
+          )
+        }
+
+        const html =
+          await response.text()
+
+        if (
+          previewRequestRef.current !==
+          controller
+        ) {
+          return
+        }
+
+        setPreviewHtml(html)
+        setPreviewFailed(false)
+
+        setStatus(
+          "Preview updated"
+        )
+      } catch (error) {
+        if (
+          error.name ===
+          "AbortError"
+        ) {
+          return
+        }
+
+        setPreviewHtml("")
+        setPreviewFailed(true)
+
+        setStatus(
+          "Preview unavailable"
+        )
+      } finally {
+        if (
+          previewRequestRef.current ===
+          controller
+        ) {
+          previewRequestRef.current =
+            null
+        }
+      }
+    }
+
+    function schedulePreview(
+      value,
+      delay = 300
+    ) {
+      if (previewTimerRef.current) {
+        window.clearTimeout(
+          previewTimerRef.current
+        )
+      }
+
+      if (previewRequestRef.current) {
+        previewRequestRef.current.abort()
+
+        previewRequestRef.current = null
+      }
+
+      previewTimerRef.current =
+        window.setTimeout(
+          () => {
+            previewTimerRef.current =
+              null
+
+            updatePreview(value)
+          },
+          delay
+        )
+    }
+
+    function selection() {
+      const input =
+        textareaRef.current
+
+      if (!input) {
+        return {
+          start: body.length,
+          finish: body.length,
+          text: ""
+        }
+      }
+
+      const start =
+        input.selectionStart ??
+        input.value.length
+
+      const finish =
+        input.selectionEnd ??
+        start
+
+      return {
+        start,
+        finish,
+        text:
+          input.value.slice(
+            start,
+            finish
+          )
+      }
+    }
+
+    function replaceSelection(
+      replacement,
+      selectedStart = null,
+      selectedEnd = null
+    ) {
+      const input =
+        textareaRef.current
+
+      if (!input) {
+        return
+      }
+
+      const current =
+        selection()
+
+      const nextBody =
+        input.value.slice(
+          0,
+          current.start
+        ) +
+        replacement +
+        input.value.slice(
+          current.finish
+        )
+
+      setBody(nextBody)
+
+      if (mode === "preview") {
+        schedulePreview(
+          nextBody
+        )
+      }
+
+      window.requestAnimationFrame(
+        () => {
+          const currentInput =
+            textareaRef.current
+
+          if (!currentInput) {
+            return
+          }
+
+          if (
+            selectedStart !== null &&
+            selectedEnd !== null
+          ) {
+            currentInput.setSelectionRange(
+              current.start +
+                selectedStart,
+              current.start +
+                selectedEnd
+            )
+          } else {
+            const cursor =
+              current.start +
+              replacement.length
+
+            currentInput.setSelectionRange(
+              cursor,
+              cursor
+            )
+          }
+
+          currentInput.focus()
+        }
+      )
+    }
+
+    function wrapSelection(
+      prefix,
+      suffix,
+      placeholder
+    ) {
+      const current =
+        selection()
+
+      const content =
+        current.text ||
+        placeholder
+
+      const replacement =
+        `${prefix}${content}${suffix}`
+
+      replaceSelection(
+        replacement,
+        prefix.length,
+        prefix.length +
+          content.length
+      )
+    }
+
+    function insertLink() {
+      const current =
+        selection()
+
+      const label =
+        current.text ||
+        "link text"
+
+      const replacement =
+        `[${label}](https://example.com)`
+
+      const urlStart =
+        label.length + 3
+
+      const urlEnd =
+        replacement.length - 1
+
+      replaceSelection(
+        replacement,
+        urlStart,
+        urlEnd
+      )
+    }
+
+    function insertCodeBlock() {
+      const current =
+        selection()
+
+      const content =
+        current.text ||
+        "code"
+
+      const replacement =
+        `\`\`\`\n${content}\n\`\`\``
+
+      replaceSelection(
+        replacement,
+        4,
+        4 + content.length
+      )
+    }
+
+    function quoteSelection() {
+      const current =
+        selection()
+
+      const content =
+        current.text ||
+        "quoted text"
+
+      const quoted =
+        content
+          .split("\n")
+          .map(
+            (line) =>
+              `> ${line}`
+          )
+          .join("\n")
+
+      replaceSelection(
+        quoted
+      )
+    }
+
+    function applyAction(action) {
+      switch (action) {
+        case "bold":
+          wrapSelection(
+            "**",
+            "**",
+            "bold text"
+          )
+          break
+
+        case "italic":
+          wrapSelection(
+            "*",
+            "*",
+            "italic text"
+          )
+          break
+
+        case "strike":
+          wrapSelection(
+            "~~",
+            "~~",
+            "strikethrough text"
+          )
+          break
+
+        case "link":
+          insertLink()
+          break
+
+        case "code":
+          wrapSelection(
+            "`",
+            "`",
+            "code"
+          )
+          break
+
+        case "code-block":
+          insertCodeBlock()
+          break
+
+        case "quote":
+          quoteSelection()
+          break
+
+        case "spoiler":
+          wrapSelection(
+            "||",
+            "||",
+            "spoiler text"
+          )
+          break
+      }
+    }
+
+    function showWrite() {
+      cancelPreview()
+
+      setMode(
+        "write"
+      )
+
+      setEmojiOpen(
+        false
+      )
+
+      setStatus(
+        "Markdown supported"
+      )
+
+      window.requestAnimationFrame(
+        () => {
+          textareaRef.current?.focus()
+        }
+      )
+    }
+
+    function showPreview() {
+      closeMentions()
+
+      setMode(
+        "preview"
+      )
+
+      setEmojiOpen(
+        false
+      )
+
+      schedulePreview(
+        body,
+        0
+      )
+    }
+
+    function handleBodyChange(event) {
+      const nextBody =
+        event.target.value
+
+      setBody(
+        nextBody
+      )
+
+      scheduleMentionCandidates(
+        nextBody,
+        event.target
+      )
+
+      if (mode === "preview") {
+        schedulePreview(
+          nextBody
+        )
+      }
+    }
+
+    function insertEmoji(emoji) {
+      replaceSelection(
+        emoji
+      )
+
+      setEmojiOpen(
+        false
+      )
+    }
+
+    useEffect(
+      () => {
+        function handleDocumentClick(event) {
+          if (
+            !emojiOpen ||
+            !composerRef.current
+          ) {
+            return
+          }
+
+          if (
+            composerRef.current.contains(
+              event.target
+            )
+          ) {
+            return
+          }
+
+          setEmojiOpen(
+            false
+          )
+        }
+
+        function handleKeyDown(event) {
+          if (
+            event.key ===
+            "Escape"
+          ) {
+            setEmojiOpen(
+              false
+            )
+          }
+        }
+
+        document.addEventListener(
+          "click",
+          handleDocumentClick
+        )
+
+        document.addEventListener(
+          "keydown",
+          handleKeyDown
+        )
+
+        return () => {
+          document.removeEventListener(
+            "click",
+            handleDocumentClick
+          )
+
+          document.removeEventListener(
+            "keydown",
+            handleKeyDown
+          )
+        }
+      },
+      [
+        emojiOpen
+      ]
+    )
+
+    useEffect(
+      () => {
+        if (!mentionOpen) {
+          return
+        }
+
+        positionMentionList()
+
+        const activeOption = mentionListRef.current?.querySelector(
+          `[data-rails-den-mention-option="${mentionActiveIndex}"]`
+        )
+
+        activeOption?.scrollIntoView({block: "nearest"})
+      },
+      [mentionOpen, mentionActiveIndex, mentionCandidates]
+    )
+
+    useEffect(
+      () => {
+        const input = textareaRef.current
+        const composer = input?.closest(COMPOSER_SELECTOR)
+        const form = input?.form
+
+        function handleOutsidePointer(event) {
+          if (composer && !composer.contains(event.target)) {
+            closeMentions()
+          }
+        }
+
+        function handleSelectionActivity() {
+          if (!input || document.activeElement !== input) {
+            return
+          }
+
+          scheduleMentionCandidates(input.value, input)
+        }
+
+        function handlePositionChange() {
+          if (mentionOpen) {
+            positionMentionList()
+          }
+        }
+
+        function handleSubmit() {
+          if (input && typeof window.ReactDOM.flushSync === "function") {
+            window.ReactDOM.flushSync(() => setBody(input.value))
+          }
+
+          closeMentions()
+        }
+
+        document.addEventListener("pointerdown", handleOutsidePointer)
+        input?.addEventListener("click", handleSelectionActivity)
+        input?.addEventListener("select", handleSelectionActivity)
+        input?.addEventListener("scroll", handlePositionChange)
+        window.addEventListener("resize", handlePositionChange)
+        window.visualViewport?.addEventListener("resize", handlePositionChange)
+        window.addEventListener("scroll", handlePositionChange, true)
+        form?.addEventListener("submit", handleSubmit)
+
+        return () => {
+          document.removeEventListener("pointerdown", handleOutsidePointer)
+          input?.removeEventListener("click", handleSelectionActivity)
+          input?.removeEventListener("select", handleSelectionActivity)
+          input?.removeEventListener("scroll", handlePositionChange)
+          window.removeEventListener("resize", handlePositionChange)
+          window.visualViewport?.removeEventListener("resize", handlePositionChange)
+          window.removeEventListener("scroll", handlePositionChange, true)
+          form?.removeEventListener("submit", handleSubmit)
+        }
+      },
+      [mentionOpen, mentionQuery]
+    )
+
+    useEffect(
+      () => {
+        if (
+          mode !== "preview" ||
+          previewFailed ||
+          !previewRef.current
+        ) {
+          return
+        }
+
+        document.dispatchEvent(
+          new CustomEvent(
+            "rails-den:content-updated",
+            {
+              detail: {
+                root:
+                  previewRef.current
+              }
+            }
+          )
+        )
+      },
+      [
+        previewHtml,
+        previewFailed,
+        mode
+      ]
+    )
+
+    useEffect(
+      () => {
+        return () => {
+          cancelPreview()
+          cancelMentionRequest()
+        }
+      },
+      []
+    )
+
+    function toolButton(
+      action,
+      title,
+      content
+    ) {
+      return h(
+        "button",
+        {
+          type: "button",
+          className:
+            "rails-den-composer-tool",
+          title,
+          onClick: () =>
+            applyAction(action)
+        },
+        content
+      )
+    }
+
+    const previewContentProps = {
+      className:
+        "rails-den-composer-preview-content",
+      ref:
+        previewRef
+    }
+
+    if (!previewFailed) {
+      previewContentProps
+        .dangerouslySetInnerHTML = {
+          __html:
+            previewHtml
+        }
+    }
+
+    return h(
+      React.Fragment,
+      null,
+
+      h(
+        "div",
+        {
+          className:
+            "rails-den-composer-tabs"
+        },
+
+        h(
+          "button",
+          {
+            type: "button",
+            className:
+              mode === "write"
+                ? "rails-den-composer-tab is-active"
+                : "rails-den-composer-tab",
+            "aria-pressed":
+              mode === "write"
+                ? "true"
+                : "false",
+            onClick:
+              showWrite
+          },
+          "Write"
+        ),
+
+        h(
+          "button",
+          {
+            type: "button",
+            className:
+              mode === "preview"
+                ? "rails-den-composer-tab is-active"
+                : "rails-den-composer-tab",
+            "aria-pressed":
+              mode === "preview"
+                ? "true"
+                : "false",
+            onClick:
+              showPreview
+          },
+          "Preview"
+        )
+      ),
+
+      h(
+        "div",
+        {
+          ref:
+            composerRef,
+          className:
+            "rails-den-composer-toolbar",
+          role:
+            "toolbar",
+          "aria-label":
+            "Formatting"
+        },
+
+        toolButton(
+          "bold",
+          "Bold",
+          h(
+            "strong",
+            null,
+            "B"
+          )
+        ),
+
+        toolButton(
+          "italic",
+          "Italic",
+          h(
+            "em",
+            null,
+            "I"
+          )
+        ),
+
+        toolButton(
+          "strike",
+          "Strikethrough",
+          h(
+            "s",
+            null,
+            "S"
+          )
+        ),
+
+        h(
+          "span",
+          {
+            className:
+              "rails-den-composer-toolbar-divider"
+          }
+        ),
+
+        toolButton(
+          "link",
+          "Link",
+          "Link"
+        ),
+
+        toolButton(
+          "code",
+          "Inline code",
+          "Code"
+        ),
+
+        toolButton(
+          "code-block",
+          "Code block",
+          "Code block"
+        ),
+
+        toolButton(
+          "quote",
+          "Quote",
+          "Quote"
+        ),
+
+        toolButton(
+          "spoiler",
+          "Spoiler",
+          "Spoiler"
+        ),
+
+        h(
+          "span",
+          {
+            className:
+              "rails-den-composer-toolbar-divider"
+          }
+        ),
+
+        h(
+          "div",
+          {
+            className:
+              "rails-den-composer-emoji-container"
+          },
+
+          h(
+            "button",
+            {
+              type: "button",
+              className:
+                "rails-den-composer-tool rails-den-composer-emoji-toggle",
+              "aria-expanded":
+                emojiOpen
+                  ? "true"
+                  : "false",
+              title:
+                "Emoji",
+              onClick:
+                () => {
+                  setEmojiOpen(
+                    (open) =>
+                      !open
+                  )
+                }
+            },
+            "😀"
+          ),
+
+          h(
+            "div",
+            {
+              className:
+                "rails-den-composer-emoji-picker",
+              hidden:
+                !emojiOpen
+            },
+
+            ...emojis.map(
+              ([ emoji, name ]) =>
+                h(
+                  "button",
+                  {
+                    key:
+                      `${emoji}-${name}`,
+                    type:
+                      "button",
+                    className:
+                      "rails-den-composer-emoji",
+                    "aria-label":
+                      name,
+                    title:
+                      name,
+                    onClick:
+                      () =>
+                        insertEmoji(
+                          emoji
+                        )
+                  },
+                  emoji
+                )
+            )
+          )
+        )
+      ),
+
+      h(
+        "div",
+        {
+          className:
+            "rails-den-composer-pane",
+          hidden:
+            mode !== "write"
+        },
+
+        h(
+          "textarea",
+          {
+            ref:
+              textareaRef,
+            id:
+              configuration.id,
+            name:
+              configuration.name,
+            rows:
+              configuration.rows,
+            required:
+              configuration.required,
+            autoFocus:
+              configuration.autofocus,
+            placeholder:
+              configuration.placeholder,
+            value:
+              body,
+            role:
+              "combobox",
+            "aria-autocomplete":
+              "list",
+            "aria-expanded":
+              mentionOpen
+                ? "true"
+                : "false",
+            "aria-controls":
+              mentionListId,
+            "aria-activedescendant":
+              mentionOpen
+                ? `${mentionListId}-option-${mentionActiveIndex}`
+                : undefined,
+            "data-rails-den-composer-input":
+              "true",
+            onChange:
+              handleBodyChange,
+            onKeyDown:
+              handleMentionKeyDown
+          }
+        ),
+
+        mentionOpen &&
+          h(
+            "div",
+            {
+              ref:
+                mentionListRef,
+              id:
+                mentionListId,
+              role:
+                "listbox",
+              className:
+                "rails-den-mention-suggestions",
+              style:
+                mentionPosition || {
+                  left: 8,
+                  top: 8
+                }
+            },
+
+            ...mentionCandidates.map(
+              (candidate, index) => {
+                const displayName = candidate.display_name || ""
+                const showDisplayName =
+                  displayName.toLowerCase() !== candidate.mention_name.toLowerCase()
+
+                return h(
+                  "div",
+                  {
+                    key:
+                      candidate.mention_name,
+                    id:
+                      `${mentionListId}-option-${index}`,
+                    role:
+                      "option",
+                    "aria-selected":
+                      index === mentionActiveIndex
+                        ? "true"
+                        : "false",
+                    "data-rails-den-mention-option":
+                      index,
+                    className:
+                      index === mentionActiveIndex
+                        ? "rails-den-mention-suggestion is-active"
+                        : "rails-den-mention-suggestion",
+                    onPointerDown:
+                      (event) => {
+                        event.preventDefault()
+                        insertMention(candidate)
+                      },
+                    onMouseEnter:
+                      () => setMentionActiveIndex(index)
+                  },
+                  h(
+                    "span",
+                    {
+                      className:
+                        "rails-den-mention-suggestion-name"
+                    },
+                    `@${candidate.mention_name}`
+                  ),
+                  showDisplayName &&
+                    h(
+                      "span",
+                      {
+                        className:
+                          "rails-den-mention-suggestion-display"
+                      },
+                      displayName
+                    )
+                )
+              }
+            )
+          )
+      ),
+
+      h(
+        "div",
+        {
+          className:
+            "rails-den-composer-pane rails-den-composer-preview",
+          hidden:
+            mode !== "preview"
+        },
+
+        previewFailed
+          ? h(
+              "div",
+              previewContentProps,
+              "Unable to render preview."
+            )
+          : h(
+              "div",
+              previewContentProps
+            )
+      ),
+
+      h(
+        "div",
+        {
+          className:
+            "rails-den-composer-status",
+          "aria-live":
+            "polite"
+        },
+        statusText
+      ),
+
+      h(
+        "div",
+        {
+          className:
+            "rails-den-visually-hidden",
+          "aria-live":
+            "polite",
+          "aria-atomic":
+            "true"
+        },
+        mentionAnnouncement
+      )
+    )
+  }
+
+  function initializeComposer(composer) {
+    if (
+      composer.dataset
+        .railsDenComposerReady ===
+      "true"
+    ) {
+      return
+    }
+
+    if (!reactAvailable()) {
+      return
+    }
+
+    const configuration =
+      composerConfiguration(
+        composer
+      )
+
+    if (!configuration) {
+      return
+    }
+
+    const originalHtml =
+      composer.innerHTML
+
+    composer.dataset
+      .railsDenComposerReady =
+      "true"
+
+    const root =
+      window.ReactDOM.createRoot(
+        composer
+      )
+
+    roots.set(
+      composer,
+      {
+        root,
+        originalHtml
+      }
+    )
+
+    root.render(
+      window.React.createElement(
+        Composer,
+        {
+          configuration
+        }
+      )
+    )
+  }
+
+  function initializeComposers() {
+    document
+      .querySelectorAll(
+        COMPOSER_SELECTOR
+      )
+      .forEach(
+        initializeComposer
+      )
+  }
+
+  function restoreComposersForTurboCache() {
+    roots.forEach(
+      (
+        {
+          root,
+          originalHtml
+        },
+        composer
+      ) => {
+        const currentInput =
+          composer.querySelector(
+            INPUT_SELECTOR
+          )
+
+        const currentValue =
+          currentInput?.value
+
+        root.unmount()
+
+        composer.innerHTML =
+          originalHtml
+
+        delete composer.dataset
+          .railsDenComposerReady
+
+        if (
+          currentValue !== undefined
+        ) {
+          const restoredInput =
+            composer.querySelector(
+              INPUT_SELECTOR
+            )
+
+          if (restoredInput) {
+            restoredInput.value =
+              currentValue
+
+            restoredInput.defaultValue =
+              currentValue
+          }
+        }
+      }
+    )
+
+    roots.clear()
+  }
+
+  document.addEventListener(
+    "DOMContentLoaded",
+    initializeComposers
+  )
+
+  document.addEventListener(
+    "turbo:load",
+    initializeComposers
+  )
+
+  document.addEventListener(
+    "turbo:before-cache",
+    restoreComposersForTurboCache
+  )
+})()