rails_den 2.0.0

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

@@ -0,0 +1,1337 @@
+(() => {
+  const ONEBOX_POLL_INTERVAL_MS = 500
+  const ONEBOX_POLL_TIMEOUT_MS = 30000
+  const DRAFT_SAVE_DELAY_MS = 750
+
+  const DRAFT_COMPOSER_SELECTOR =
+    "[data-rails-den-draft-url]"
+
+  const DRAFT_INPUT_SELECTOR =
+    "[data-rails-den-composer-input]"
+
+  const DRAFT_STATUS_SELECTOR =
+    "[data-rails-den-draft-status]"
+
+  const READ_POSITION_SELECTOR =
+    "[data-rails-den-read-position-url]"
+
+  const BOARD_FOLLOW_SELECTOR =
+    "[data-rails-den-board-follow]"
+
+  const TOPIC_FOLLOW_SELECTOR =
+    "[data-rails-den-topic-follow]"
+
+  const draftAutosaves =
+    new Map()
+
+  function readPositionHeaders() {
+    const csrfToken =
+      document.querySelector(
+        'meta[name="csrf-token"]'
+      )?.content
+
+    const headers = {
+      "Accept":
+        "application/json",
+      "Content-Type":
+        "application/x-www-form-urlencoded;charset=UTF-8"
+    }
+
+    if (csrfToken) {
+      headers["X-CSRF-Token"] =
+        csrfToken
+    }
+
+    return headers
+  }
+
+  function initializeReadPosition(
+    element
+  ) {
+    if (
+      element.dataset
+        .railsDenReadPositionReady ===
+      "true"
+    ) {
+      return
+    }
+
+    const url =
+      element.dataset
+        .railsDenReadPositionUrl
+
+    const postId =
+      element.dataset
+        .railsDenReadPositionPostId
+
+    if (!url || !postId) {
+      return
+    }
+
+    element.dataset
+      .railsDenReadPositionReady =
+      "true"
+
+    fetch(
+      url,
+      {
+        method: "PATCH",
+        credentials: "same-origin",
+        headers: readPositionHeaders(),
+        body:
+          new URLSearchParams({
+            post_id: postId
+          })
+      }
+    ).catch(
+      () => {
+        // Read-state persistence must not
+        // interfere with reading the topic.
+      }
+    )
+  }
+
+  function initializeReadPositions(
+    root = document
+  ) {
+    root
+      .querySelectorAll(
+        READ_POSITION_SELECTOR
+      )
+      .forEach(
+        initializeReadPosition
+      )
+  }
+
+  function initializeSpoilers(root = document) {
+    root
+      .querySelectorAll(
+        ".spoiler:not([data-rails-den-spoiler-ready])"
+      )
+      .forEach(
+        (spoiler) => {
+          spoiler.dataset
+            .railsDenSpoilerReady =
+              "true"
+
+          spoiler.tabIndex = 0
+
+          spoiler.setAttribute(
+            "role",
+            "button"
+          )
+
+          spoiler.setAttribute(
+            "aria-expanded",
+            "false"
+          )
+
+          spoiler.setAttribute(
+            "aria-label",
+            "Spoiler. Activate to reveal."
+          )
+
+          function toggle() {
+            const revealed =
+              spoiler.classList.toggle(
+                "is-revealed"
+              )
+
+            spoiler.setAttribute(
+              "aria-expanded",
+              revealed
+                ? "true"
+                : "false"
+            )
+
+            spoiler.setAttribute(
+              "aria-label",
+              revealed
+                ? "Spoiler revealed. Activate to hide."
+                : "Spoiler. Activate to reveal."
+            )
+          }
+
+          spoiler.addEventListener(
+            "click",
+            (event) => {
+              if (
+                event.target.closest("a")
+              ) {
+                return
+              }
+
+              toggle()
+            }
+          )
+
+          spoiler.addEventListener(
+            "keydown",
+            (event) => {
+              if (
+                event.key !== "Enter" &&
+                event.key !== " "
+              ) {
+                return
+              }
+
+              event.preventDefault()
+              toggle()
+            }
+          )
+        }
+      )
+  }
+
+  function initializeOneboxPolling(
+    root = document
+  ) {
+    root
+      .querySelectorAll(
+        [
+          "[data-rails-den-onebox-poll-url]",
+          ":not([data-rails-den-onebox-polling-ready])"
+        ].join("")
+      )
+      .forEach(
+        (element) => {
+          element.dataset
+            .railsDenOneboxPollingReady =
+              "true"
+
+          const url =
+            element.dataset
+              .railsDenOneboxPollUrl
+
+          if (!url) {
+            return
+          }
+
+          const startedAt = Date.now()
+
+          function pollingExpired() {
+            return (
+              Date.now() - startedAt >=
+              ONEBOX_POLL_TIMEOUT_MS
+            )
+          }
+
+          function elementStillPresent() {
+            return document.documentElement
+              .contains(element)
+          }
+
+          function scheduleNextCheck() {
+            if (
+              pollingExpired() ||
+              !elementStillPresent()
+            ) {
+              return
+            }
+
+            window.setTimeout(
+              checkStatus,
+              ONEBOX_POLL_INTERVAL_MS
+            )
+          }
+
+          async function checkStatus() {
+            if (
+              pollingExpired() ||
+              !elementStillPresent()
+            ) {
+              return
+            }
+
+            try {
+              const response =
+                await fetch(
+                  url,
+                  {
+                    credentials: "same-origin",
+                    headers: {
+                      Accept: "application/json"
+                    }
+                  }
+                )
+
+              if (!response.ok) {
+                scheduleNextCheck()
+                return
+              }
+
+              const status =
+                await response.json()
+
+              if (status.pending === false) {
+                window.location.reload()
+                return
+              }
+            } catch (_error) {
+              // A temporary polling failure should not
+              // interfere with reading or using the topic.
+            }
+
+            scheduleNextCheck()
+          }
+
+          scheduleNextCheck()
+        }
+      )
+  }
+
+  function draftHeaders() {
+    const csrfToken =
+      document.querySelector(
+        'meta[name="csrf-token"]'
+      )?.content
+
+    const headers = {
+      "Accept":
+        "application/json",
+      "Content-Type":
+        "application/x-www-form-urlencoded;charset=UTF-8"
+    }
+
+    if (csrfToken) {
+      headers["X-CSRF-Token"] =
+        csrfToken
+    }
+
+    return headers
+  }
+
+  function draftParameters(
+    composer,
+    value
+  ) {
+    const parameters =
+      new URLSearchParams()
+
+    parameters.set(
+      "rails_den_post_draft[body]",
+      value
+    )
+
+    const replyToId =
+      composer.dataset
+        .railsDenDraftReplyToId
+
+    if (replyToId) {
+      parameters.set(
+        "rails_den_post_draft[reply_to_id]",
+        replyToId
+      )
+    }
+
+    const quotedPostId =
+      composer.dataset
+        .railsDenDraftQuotedPostId
+
+    if (quotedPostId) {
+      parameters.set(
+        "rails_den_post_draft[quoted_post_id]",
+        quotedPostId
+      )
+    }
+
+    return parameters
+  }
+
+  function currentDraftInput(state) {
+    return state.composer
+      .querySelector(
+        DRAFT_INPUT_SELECTOR
+      )
+  }
+
+  function setDraftStatus(
+    state,
+    message
+  ) {
+    if (!state.status) {
+      return
+    }
+
+    state.status.textContent =
+      message
+  }
+
+  function cancelDraftSave(state) {
+    if (state.timer) {
+      window.clearTimeout(
+        state.timer
+      )
+
+      state.timer = null
+    }
+
+    if (state.controller) {
+      state.controller.abort()
+      state.controller = null
+    }
+  }
+
+  async function saveDraft(state) {
+    const input =
+      currentDraftInput(state)
+
+    if (!input) {
+      return
+    }
+
+    const value =
+      input.value
+
+    if (
+      value ===
+      state.lastSavedValue
+    ) {
+      state.dirty = false
+
+      setDraftStatus(
+        state,
+        value.trim()
+          ? "Draft saved"
+          : "Draft autosave on"
+      )
+
+      return
+    }
+
+    if (state.controller) {
+      state.controller.abort()
+    }
+
+    const controller =
+      new AbortController()
+
+    state.controller =
+      controller
+
+    setDraftStatus(
+      state,
+      "Saving…"
+    )
+
+    try {
+      const response =
+        await fetch(
+          state.composer.dataset
+            .railsDenDraftUrl,
+          {
+            method: "PUT",
+            credentials:
+              "same-origin",
+            headers:
+              draftHeaders(),
+            body:
+              draftParameters(
+                state.composer,
+                value
+              ),
+            signal:
+              controller.signal
+          }
+        )
+
+      if (!response.ok) {
+        throw new Error(
+          `Draft save failed with ${response.status}`
+        )
+      }
+
+      if (
+        state.controller !==
+        controller
+      ) {
+        return
+      }
+
+      state.lastSavedValue =
+        value
+
+      state.dirty =
+        false
+
+      setDraftStatus(
+        state,
+        value.trim()
+          ? "Draft saved"
+          : "Draft cleared"
+      )
+    } catch (error) {
+      if (
+        error.name ===
+        "AbortError"
+      ) {
+        return
+      }
+
+      setDraftStatus(
+        state,
+        "Draft save failed"
+      )
+    } finally {
+      if (
+        state.controller ===
+        controller
+      ) {
+        state.controller =
+          null
+      }
+    }
+  }
+
+  function scheduleDraftSave(state) {
+    const input =
+      currentDraftInput(state)
+
+    if (!input) {
+      return
+    }
+
+    const value =
+      input.value
+
+    state.dirty =
+      value !==
+        state.lastSavedValue
+
+    if (!state.dirty) {
+      cancelDraftSave(state)
+
+      setDraftStatus(
+        state,
+        value.trim()
+          ? "Draft saved"
+          : "Draft autosave on"
+      )
+
+      return
+    }
+
+    cancelDraftSave(state)
+
+    setDraftStatus(
+      state,
+      "Saving…"
+    )
+
+    state.timer =
+      window.setTimeout(
+        () => {
+          state.timer = null
+          saveDraft(state)
+        },
+        DRAFT_SAVE_DELAY_MS
+      )
+  }
+
+  function flushDraftSave(state) {
+    if (
+      state.submitting ||
+      !state.dirty
+    ) {
+      return
+    }
+
+    const input =
+      currentDraftInput(state)
+
+    if (!input) {
+      return
+    }
+
+    const value =
+      input.value
+
+    fetch(
+      state.composer.dataset
+        .railsDenDraftUrl,
+      {
+        method: "PUT",
+        credentials:
+          "same-origin",
+        headers:
+          draftHeaders(),
+        body:
+          draftParameters(
+            state.composer,
+            value
+          ),
+        keepalive: true
+      }
+    ).catch(
+      () => {
+        // Navigation should not be blocked by
+        // a last-chance draft save failure.
+      }
+    )
+  }
+
+  function initializeDraftAutosave(
+    composer
+  ) {
+    if (
+      composer.dataset
+        .railsDenDraftAutosaveReady ===
+      "true"
+    ) {
+      return
+    }
+
+    const input =
+      composer.querySelector(
+        DRAFT_INPUT_SELECTOR
+      )
+
+    if (!input) {
+      return
+    }
+
+    const status =
+      composer.parentElement
+        ?.querySelector(
+          DRAFT_STATUS_SELECTOR
+        )
+
+    const form =
+      composer.closest(
+        "form"
+      )
+
+    const state = {
+      composer,
+      status,
+      form,
+      timer: null,
+      controller: null,
+      dirty: false,
+      submitting: false,
+      lastSavedValue:
+        input.value
+    }
+
+    function handleInput() {
+      scheduleDraftSave(state)
+    }
+
+    function handleComposerClick() {
+      window.requestAnimationFrame(
+        () => {
+          scheduleDraftSave(state)
+        }
+      )
+    }
+
+    function handleSubmit() {
+      state.submitting = true
+      cancelDraftSave(state)
+    }
+
+    composer.addEventListener(
+      "input",
+      handleInput
+    )
+
+    composer.addEventListener(
+      "click",
+      handleComposerClick
+    )
+
+    form?.addEventListener(
+      "submit",
+      handleSubmit
+    )
+
+    composer.dataset
+      .railsDenDraftAutosaveReady =
+      "true"
+
+    setDraftStatus(
+      state,
+      "Draft autosave on"
+    )
+
+    draftAutosaves.set(
+      composer,
+      {
+        state,
+        handleInput,
+        handleComposerClick,
+        handleSubmit
+      }
+    )
+  }
+
+  function initializeDraftAutosaves(
+    root = document
+  ) {
+    root
+      .querySelectorAll(
+        DRAFT_COMPOSER_SELECTOR
+      )
+      .forEach(
+        initializeDraftAutosave
+      )
+  }
+
+  function boardFollowHeaders() {
+    const csrfToken =
+      document.querySelector(
+        'meta[name="csrf-token"]'
+      )?.content
+
+    const headers = {
+      "Accept": "application/json"
+    }
+
+    if (csrfToken) {
+      headers["X-CSRF-Token"] =
+        csrfToken
+    }
+
+    return headers
+  }
+
+  function setBoardFollowMethod(
+    form,
+    following
+  ) {
+    let methodInput =
+      form.querySelector(
+        'input[name="_method"]'
+      )
+
+    if (following) {
+      if (!methodInput) {
+        methodInput =
+          document.createElement(
+            "input"
+          )
+
+        methodInput.type = "hidden"
+        methodInput.name = "_method"
+        form.appendChild(methodInput)
+      }
+
+      methodInput.value = "delete"
+    } else {
+      methodInput?.remove()
+    }
+  }
+
+  function setBoardFollowState(
+    form,
+    following
+  ) {
+    const button =
+      form.querySelector(
+        "[data-rails-den-board-follow-button]"
+      )
+
+    const label =
+      form.querySelector(
+        "[data-rails-den-board-follow-label]"
+      )
+
+    form.dataset.railsDenFollowing =
+      following ? "true" : "false"
+
+    button?.setAttribute(
+      "aria-pressed",
+      following ? "true" : "false"
+    )
+
+    if (button) {
+      button.title =
+        following
+          ? form.dataset
+              .railsDenUnfollowLabel
+          : form.dataset
+              .railsDenFollowLabel
+    }
+
+    if (label) {
+      label.textContent =
+        following
+          ? `★ ${form.dataset.railsDenFollowingLabel}`
+          : `☆ ${form.dataset.railsDenFollowLabel}`
+    }
+
+    setBoardFollowMethod(
+      form,
+      following
+    )
+  }
+
+  function setBoardFollowStatus(
+    form,
+    message,
+    error = false
+  ) {
+    const status =
+      form.querySelector(
+        "[data-rails-den-board-follow-status]"
+      )
+
+    if (!status) {
+      return
+    }
+
+    status.textContent = message
+    status.classList.toggle(
+      "is-error",
+      error
+    )
+  }
+
+  function initializeBoardFollow(form) {
+    if (
+      form.dataset
+        .railsDenBoardFollowReady ===
+      "true"
+    ) {
+      return
+    }
+
+    let requestSequence = 0
+
+    form.addEventListener(
+      "submit",
+      async (event) => {
+        const button =
+          form.querySelector(
+            "[data-rails-den-board-follow-button]"
+          )
+
+        const label =
+          form.querySelector(
+            "[data-rails-den-board-follow-label]"
+          )
+
+        const url =
+          form.dataset
+            .railsDenFollowUrl
+
+        if (!button || !label || !url) {
+          return
+        }
+
+        event.preventDefault()
+
+        const wasFollowing =
+          form.dataset
+            .railsDenFollowing ===
+          "true"
+
+        const sequence =
+          ++requestSequence
+
+        button.disabled = true
+        button.setAttribute(
+          "aria-busy",
+          "true"
+        )
+
+        label.textContent =
+          wasFollowing
+            ? form.dataset
+                .railsDenUnfollowingBusy
+            : form.dataset
+                .railsDenFollowingBusy
+
+        setBoardFollowStatus(
+          form,
+          ""
+        )
+
+        try {
+          const response =
+            await fetch(
+              url,
+              {
+                method:
+                  wasFollowing
+                    ? "DELETE"
+                    : "POST",
+                credentials:
+                  "same-origin",
+                headers:
+                  boardFollowHeaders()
+              }
+            )
+
+          if (response.redirected) {
+            window.location.href =
+              response.url
+            return
+          }
+
+          const contentType =
+            response.headers.get(
+              "content-type"
+            ) || ""
+
+          if (
+            !response.ok ||
+            !contentType.includes(
+              "application/json"
+            )
+          ) {
+            throw new Error(
+              `Board follow update failed with ${response.status}`
+            )
+          }
+
+          const result =
+            await response.json()
+
+          if (
+            typeof result.following !==
+              "boolean" ||
+            typeof result.changed !==
+              "boolean"
+          ) {
+            throw new Error(
+              "Board follow response was invalid"
+            )
+          }
+
+          if (sequence !== requestSequence) {
+            return
+          }
+
+          setBoardFollowState(
+            form,
+            result.following
+          )
+
+          setBoardFollowStatus(
+            form,
+            result.following
+              ? form.dataset
+                  .railsDenFollowedNotice
+              : form.dataset
+                  .railsDenUnfollowedNotice
+          )
+        } catch (_error) {
+          if (sequence !== requestSequence) {
+            return
+          }
+
+          setBoardFollowState(
+            form,
+            wasFollowing
+          )
+
+          setBoardFollowStatus(
+            form,
+            form.dataset
+              .railsDenUpdateFailed,
+            true
+          )
+        } finally {
+          if (sequence === requestSequence) {
+            button.disabled = false
+            button.removeAttribute(
+              "aria-busy"
+            )
+            button.focus()
+          }
+        }
+      }
+    )
+
+    form.dataset
+      .railsDenBoardFollowReady =
+      "true"
+  }
+
+  function initializeBoardFollows(
+    root = document
+  ) {
+    root
+      .querySelectorAll(
+        BOARD_FOLLOW_SELECTOR
+      )
+      .forEach(
+        initializeBoardFollow
+      )
+  }
+
+  function topicFollowHeaders() {
+    const csrfToken =
+      document.querySelector(
+        'meta[name="csrf-token"]'
+      )?.content
+
+    const headers = {
+      "Accept": "application/json"
+    }
+
+    if (csrfToken) {
+      headers["X-CSRF-Token"] =
+        csrfToken
+    }
+
+    return headers
+  }
+
+  function setTopicFollowMethod(
+    form,
+    following
+  ) {
+    let methodInput =
+      form.querySelector(
+        'input[name="_method"]'
+      )
+
+    if (following) {
+      if (!methodInput) {
+        methodInput =
+          document.createElement(
+            "input"
+          )
+
+        methodInput.type = "hidden"
+        methodInput.name = "_method"
+        form.appendChild(methodInput)
+      }
+
+      methodInput.value = "delete"
+    } else {
+      methodInput?.remove()
+    }
+  }
+
+  function setTopicFollowState(
+    form,
+    following
+  ) {
+    const button =
+      form.querySelector(
+        "[data-rails-den-topic-follow-button]"
+      )
+
+    const label =
+      form.querySelector(
+        "[data-rails-den-topic-follow-label]"
+      )
+
+    form.dataset.railsDenFollowing =
+      following ? "true" : "false"
+
+    button?.setAttribute(
+      "aria-pressed",
+      following ? "true" : "false"
+    )
+
+    if (button) {
+      button.title =
+        following
+          ? form.dataset
+              .railsDenUnfollowLabel
+          : form.dataset
+              .railsDenFollowLabel
+    }
+
+    if (label) {
+      label.textContent =
+        following
+          ? `★ ${form.dataset.railsDenFollowingLabel}`
+          : `☆ ${form.dataset.railsDenFollowLabel}`
+    }
+
+    setTopicFollowMethod(
+      form,
+      following
+    )
+  }
+
+  function setTopicFollowStatus(
+    form,
+    message,
+    error = false
+  ) {
+    const status =
+      form.querySelector(
+        "[data-rails-den-topic-follow-status]"
+      )
+
+    if (!status) {
+      return
+    }
+
+    status.textContent = message
+    status.classList.toggle(
+      "is-error",
+      error
+    )
+  }
+
+  function initializeTopicFollow(form) {
+    if (
+      form.dataset
+        .railsDenTopicFollowReady ===
+      "true"
+    ) {
+      return
+    }
+
+    let requestSequence = 0
+
+    form.addEventListener(
+      "submit",
+      async (event) => {
+        event.preventDefault()
+
+        const button =
+          form.querySelector(
+            "[data-rails-den-topic-follow-button]"
+          )
+
+        const label =
+          form.querySelector(
+            "[data-rails-den-topic-follow-label]"
+          )
+
+        const url =
+          form.dataset
+            .railsDenFollowUrl
+
+        if (!button || !label || !url) {
+          form.submit()
+          return
+        }
+
+        const wasFollowing =
+          form.dataset
+            .railsDenFollowing ===
+          "true"
+
+        const sequence =
+          ++requestSequence
+
+        button.disabled = true
+        button.setAttribute(
+          "aria-busy",
+          "true"
+        )
+
+        label.textContent =
+          wasFollowing
+            ? form.dataset
+                .railsDenUnfollowingBusy
+            : form.dataset
+                .railsDenFollowingBusy
+
+        setTopicFollowStatus(
+          form,
+          ""
+        )
+
+        try {
+          const response =
+            await fetch(
+              url,
+              {
+                method:
+                  wasFollowing
+                    ? "DELETE"
+                    : "POST",
+                credentials:
+                  "same-origin",
+                headers:
+                  topicFollowHeaders()
+              }
+            )
+
+          if (response.redirected) {
+            window.location.href =
+              response.url
+            return
+          }
+
+          const contentType =
+            response.headers.get(
+              "content-type"
+            ) || ""
+
+          if (
+            !response.ok ||
+            !contentType.includes(
+              "application/json"
+            )
+          ) {
+            throw new Error(
+              `Follow update failed with ${response.status}`
+            )
+          }
+
+          const result =
+            await response.json()
+
+          if (
+            typeof result.following !==
+              "boolean" ||
+            typeof result.changed !==
+              "boolean"
+          ) {
+            throw new Error(
+              "Follow response was invalid"
+            )
+          }
+
+          if (sequence !== requestSequence) {
+            return
+          }
+
+          setTopicFollowState(
+            form,
+            result.following
+          )
+
+          setTopicFollowStatus(
+            form,
+            result.following
+              ? form.dataset
+                  .railsDenFollowedNotice
+              : form.dataset
+                  .railsDenUnfollowedNotice
+          )
+        } catch (_error) {
+          if (sequence !== requestSequence) {
+            return
+          }
+
+          setTopicFollowState(
+            form,
+            wasFollowing
+          )
+
+          setTopicFollowStatus(
+            form,
+            form.dataset
+              .railsDenUpdateFailed,
+            true
+          )
+        } finally {
+          if (sequence === requestSequence) {
+            button.disabled = false
+            button.removeAttribute(
+              "aria-busy"
+            )
+          }
+        }
+      }
+    )
+
+    form.dataset
+      .railsDenTopicFollowReady =
+      "true"
+  }
+
+  function initializeTopicFollows(
+    root = document
+  ) {
+    root
+      .querySelectorAll(
+        TOPIC_FOLLOW_SELECTOR
+      )
+      .forEach(
+        initializeTopicFollow
+      )
+  }
+
+  function teardownDraftAutosaves() {
+    draftAutosaves.forEach(
+      (
+        {
+          state,
+          handleInput,
+          handleComposerClick,
+          handleSubmit
+        },
+        composer
+      ) => {
+        flushDraftSave(state)
+        cancelDraftSave(state)
+
+        composer.removeEventListener(
+          "input",
+          handleInput
+        )
+
+        composer.removeEventListener(
+          "click",
+          handleComposerClick
+        )
+
+        state.form?.removeEventListener(
+          "submit",
+          handleSubmit
+        )
+
+        delete composer.dataset
+          .railsDenDraftAutosaveReady
+      }
+    )
+
+    draftAutosaves.clear()
+  }
+
+  function flushDraftAutosaves() {
+    draftAutosaves.forEach(
+      ({ state }) => {
+        flushDraftSave(state)
+      }
+    )
+  }
+
+  function initializeContent(
+    root = document
+  ) {
+    initializeReadPositions(root)
+    initializeSpoilers(root)
+    initializeOneboxPolling(root)
+    initializeDraftAutosaves(root)
+    initializeBoardFollows(root)
+    initializeTopicFollows(root)
+  }
+
+  document.addEventListener(
+    "DOMContentLoaded",
+    () => {
+      initializeContent()
+    }
+  )
+
+  document.addEventListener(
+    "turbo:load",
+    () => {
+      initializeContent()
+    }
+  )
+
+  document.addEventListener(
+    "turbo:before-cache",
+    teardownDraftAutosaves
+  )
+
+  window.addEventListener(
+    "pagehide",
+    flushDraftAutosaves
+  )
+
+  document.addEventListener(
+    "rails-den:content-updated",
+    (event) => {
+      initializeContent(
+        event.detail?.root ||
+        document
+      )
+    }
+  )
+})()