@shelamkoff/rector 1.0.0

package/dist/plugins/gallery/view-empty.js

@@ -0,0 +1,56 @@
+import { renderDropzone } from '../shared/dropzone.js'
+import { isSupportedImageFile } from '../shared/fileInput.js'
+import { CSS } from './css.js'
+import { ICON_SELECT } from './icons.js'
+
+/**
+ * @typedef {Object} EmptyViewDeps
+ * @property {(key: string, fallback: string) => string} t
+ * @property {boolean} readOnly
+ * @property {() => void} onUploadClick
+ * @property {Array<{ icon?: string, label: string, handler: (context: { signal: AbortSignal }) => Promise<Array<{url: string, alt?: string}> | null> }>} customActions
+ * @property {(handler: (context: { signal: AbortSignal }) => Promise<Array<{url: string, alt?: string}> | null>) => Promise<void>} runCustomAction
+ * @property {(files: File[]) => void} onFilesDropped
+ */
+
+/**
+ * Render the empty-state dropzone for the Gallery plugin.
+ * Replaces wrapper contents and removes the `filled` class.
+ *
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').GalleryState} state
+ * @param {EmptyViewDeps} deps
+ * @returns {void}
+ */
+export function renderEmptyView(wrapper, state, deps) {
+  state.resetTransient()
+
+  const signal = /** @type {AbortController} */ (state.abortController).signal
+
+  renderDropzone(wrapper, signal, {
+    select: CSS.select,
+    selectIcon: CSS.selectIcon,
+    selectText: CSS.selectText,
+    selectLink: CSS.selectLink,
+    selectActions: CSS.selectActions,
+    selectAction: CSS.selectAction,
+    dropzoneActive: CSS.dropzoneActive,
+    filled: CSS.filled,
+  }, {
+    iconHtml: ICON_SELECT,
+    uploadText: deps.t('dropzoneUpload', 'Upload'),
+    afterText: deps.t('dropzoneText', 'images from your device or drag and drop them here'),
+    readOnly: deps.readOnly,
+    emptyText: deps.t('emptyReadonly', 'No images'),
+    onUploadClick: deps.onUploadClick,
+    actions: deps.customActions.map(action => ({
+      icon: action.icon,
+      label: action.label,
+      onSelect: () => { void deps.runCustomAction(action.handler) },
+    })),
+    onDrop: (dt) => {
+      const files = [...(dt.files || [])].filter(isSupportedImageFile)
+      if (files.length > 0) deps.onFilesDropped(files)
+    },
+  })
+}

package/dist/plugins/gallery/view-filled.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @typedef {Object} FilledViewDeps
+ * @property {(key: string, fallback: string) => string} t
+ * @property {boolean} readOnly
+ * @property {() => void} syncCaptions
+ * @property {() => import('./state.js').GalleryState | undefined} getState
+ * @property {() => void} reRender
+ * @property {() => void} renderEmpty
+ * @property {(operation: () => void) => void} mutate
+ * @property {(files: File[]) => void} onFilesDropped
+ * @property {() => void} onTriggerFileInput
+ * @property {() => void} onPromptUrl
+ * @property {() => void} onDeleteAll
+ * @property {Array<{ icon?: string, label: string, handler: (context: { signal: AbortSignal }) => Promise<Array<{url: string, alt?: string}> | null> }>} customActions
+ * @property {(handler: (context: { signal: AbortSignal }) => Promise<Array<{url: string, alt?: string}> | null>) => Promise<void>} runCustomAction
+ */
+/**
+ * Render the filled-state Gallery view: template grid (or masonry) +
+ * optional overflow row + action bar.
+ *
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').GalleryState} state
+ * @param {FilledViewDeps} deps
+ * @returns {void}
+ */
+export function renderFilledView(wrapper: HTMLElement, state: import("./state.js").GalleryState, deps: FilledViewDeps): void;
+export type FilledViewDeps = {
+    t: (key: string, fallback: string) => string;
+    readOnly: boolean;
+    syncCaptions: () => void;
+    getState: () => import("./state.js").GalleryState | undefined;
+    reRender: () => void;
+    renderEmpty: () => void;
+    mutate: (operation: () => void) => void;
+    onFilesDropped: (files: File[]) => void;
+    onTriggerFileInput: () => void;
+    onPromptUrl: () => void;
+    onDeleteAll: () => void;
+    customActions: Array<{
+        icon?: string;
+        label: string;
+        handler: (context: {
+            signal: AbortSignal;
+        }) => Promise<Array<{
+            url: string;
+            alt?: string;
+        }> | null>;
+    }>;
+    runCustomAction: (handler: (context: {
+        signal: AbortSignal;
+    }) => Promise<Array<{
+        url: string;
+        alt?: string;
+    }> | null>) => Promise<void>;
+};

package/dist/plugins/gallery/view-filled.js

@@ -0,0 +1,353 @@
+import { makeActionBtn as _makeActionBtn, makeSep as _makeSep } from '../shared/actionBar.js'
+import { CSS } from './css.js'
+import {
+  ICON_ADD_IMAGE, ICON_BACK, ICON_CHEVRON_RIGHT, ICON_SETTINGS, ICON_TRASH,
+  ICON_UPLOAD, ICON_URL,
+} from './icons.js'
+import {
+  ALL_LAYOUTS, MAX_VISIBLE, classifyOrientation, getSlotsCount,
+  pickInitialAutoTemplate, selectAutoTemplate,
+} from './layout.js'
+import { applyGalleryStyles } from './styles.js'
+import { buildSettingsPanel } from './settings.js'
+import {
+  attachExternalDrop, createEmptySlot, createFilledSlot, createOverflowItem,
+} from './slot.js'
+
+/**
+ * @typedef {Object} FilledViewDeps
+ * @property {(key: string, fallback: string) => string} t
+ * @property {boolean} readOnly
+ * @property {() => void} syncCaptions
+ * @property {() => import('./state.js').GalleryState | undefined} getState
+ * @property {() => void} reRender
+ * @property {() => void} renderEmpty
+ * @property {(operation: () => void) => void} mutate
+ * @property {(files: File[]) => void} onFilesDropped
+ * @property {() => void} onTriggerFileInput
+ * @property {() => void} onPromptUrl
+ * @property {() => void} onDeleteAll
+ * @property {Array<{ icon?: string, label: string, handler: (context: { signal: AbortSignal }) => Promise<Array<{url: string, alt?: string}> | null> }>} customActions
+ * @property {(handler: (context: { signal: AbortSignal }) => Promise<Array<{url: string, alt?: string}> | null>) => Promise<void>} runCustomAction
+ */
+
+/**
+ * Render the filled-state Gallery view: template grid (or masonry) +
+ * optional overflow row + action bar.
+ *
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').GalleryState} state
+ * @param {FilledViewDeps} deps
+ * @returns {void}
+ */
+export function renderFilledView(wrapper, state, deps) {
+  state.resetTransient()
+  wrapper.innerHTML = ''
+  wrapper.classList.add(CSS.filled)
+
+  const signal = /** @type {AbortController} */ (state.abortController).signal
+
+  if (state.data.layout === 'masonry') {
+    renderMasonry(wrapper, state, deps, signal)
+  } else {
+    renderSlotBased(wrapper, state, deps, signal)
+  }
+
+  applyGalleryStyles(wrapper, state)
+  if (!deps.readOnly) wrapper.appendChild(renderActions(wrapper, state, deps, signal))
+}
+
+/**
+ * Masonry: flat grid, all images visible.
+ *
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').GalleryState} state
+ * @param {FilledViewDeps} deps
+ * @param {AbortSignal} signal
+ */
+function renderMasonry(wrapper, state, deps, signal) {
+  const grid = document.createElement('div')
+  grid.className = `${CSS.grid} eg--masonry`
+
+  const slotDeps = makeSlotDeps(deps)
+
+  state.data.images.forEach((img, i) => {
+    const slot = createFilledSlot(img, i, signal, slotDeps)
+    slot.dataset.index = String(i)
+    grid.appendChild(slot)
+  })
+
+  if (!deps.readOnly) attachExternalDrop(grid, signal, deps.onFilesDropped)
+  wrapper.appendChild(grid)
+}
+
+/**
+ * Slot-based: fixed template + optional overflow row.
+ *
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').GalleryState} state
+ * @param {FilledViewDeps} deps
+ * @param {AbortSignal} signal
+ */
+function renderSlotBased(wrapper, state, deps, signal) {
+  const layout = state.data.layout
+  const images = state.data.images
+  const isAuto = layout === 'auto'
+
+  const slotCount = isAuto
+    ? Math.min(images.length, MAX_VISIBLE)
+    : getSlotsCount(layout)
+  const slotImages = images.slice(0, slotCount)
+  const overflowImages = images.slice(slotCount)
+
+  const templateName = isAuto ? pickInitialAutoTemplate(slotCount) : layout
+  const grid = document.createElement('div')
+  grid.className = `${CSS.grid} eg--${templateName}`
+
+  const slotDeps = makeSlotDeps(deps)
+
+  // Auto + 3+ images: refine template after we know orientations.
+  if (isAuto && slotCount > 2) {
+    const orientations = new Array(slotCount)
+    let loadedCount = 0
+
+    const onAllLoaded = () => {
+      for (const cls of [...grid.classList]) {
+        if (cls.startsWith('eg--')) grid.classList.remove(cls)
+      }
+      grid.classList.add(`eg--${selectAutoTemplate(slotCount, orientations)}`)
+    }
+
+    for (let idx = 0; idx < slotCount; idx++) {
+      const img = slotImages[idx]
+      if (!img) continue
+
+      const slot = createFilledSlot(img, idx, signal, slotDeps)
+      slot.dataset.slot = String(idx)
+
+      const imgEl = /** @type {HTMLImageElement | null} */ (slot.querySelector(`.${CSS.slotImg}`))
+      if (imgEl) {
+        let ready = false
+        const onReady = () => {
+          if (ready) return
+          ready = true
+          orientations[idx] = classifyOrientation(imgEl.naturalWidth, imgEl.naturalHeight)
+          loadedCount++
+          if (loadedCount >= slotCount) onAllLoaded()
+        }
+        imgEl.addEventListener('load', onReady, { once: true, signal })
+        imgEl.addEventListener('error', onReady, { once: true, signal })
+        if (imgEl.complete) queueMicrotask(onReady)
+      }
+      grid.appendChild(slot)
+    }
+  } else {
+    // Fixed layout — render filled + empty placeholders.
+    for (let idx = 0; idx < slotCount; idx++) {
+      const img = slotImages[idx]
+      if (img) {
+        const slot = createFilledSlot(img, idx, signal, slotDeps)
+        slot.dataset.slot = String(idx)
+        grid.appendChild(slot)
+      } else {
+        grid.appendChild(createEmptySlot(idx, slotDeps))
+      }
+    }
+  }
+
+  if (!deps.readOnly) attachExternalDrop(grid, signal, deps.onFilesDropped)
+  wrapper.appendChild(grid)
+
+  if (overflowImages.length > 0) {
+    const overflow = document.createElement('div')
+    overflow.className = CSS.overflow
+
+    overflowImages.forEach((img, oi) => {
+      const globalIdx = slotCount + oi
+      overflow.appendChild(createOverflowItem(img, globalIdx, signal, slotDeps))
+    })
+
+    if (!deps.readOnly) attachExternalDrop(overflow, signal, deps.onFilesDropped)
+    wrapper.appendChild(overflow)
+  }
+}
+
+/**
+ * Build the deps object for slot/overflow builders.
+ * Centralizes the bridge from filled-view-level callbacks to slot-level needs.
+ *
+ * @param {FilledViewDeps} deps
+ * @returns {import('./slot.js').SlotDeps}
+ */
+function makeSlotDeps(deps) {
+  return {
+    t: deps.t,
+    readOnly: deps.readOnly,
+    syncCaptions: deps.syncCaptions,
+    getState: deps.getState,
+    onRemoveImage: (index) => {
+      const state = deps.getState()
+      if (!state) return
+      deps.mutate(() => {
+        state.data.images.splice(index, 1)
+        if (state.data.images.length === 0) deps.renderEmpty()
+        else deps.reRender()
+      })
+    },
+    onSwapImages: (from, to) => {
+      const state = deps.getState()
+      if (!state) return
+      deps.mutate(() => {
+        const tmp = state.data.images[from]
+        state.data.images[from] = /** @type {any} */ (state.data.images[to])
+        state.data.images[to] = /** @type {any} */ (tmp)
+        deps.reRender()
+      })
+    },
+  }
+}
+
+/**
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').GalleryState} state
+ * @param {FilledViewDeps} deps
+ * @param {AbortSignal} signal
+ */
+function renderActions(wrapper, state, deps, signal) {
+  const actions = document.createElement('div')
+  actions.className = CSS.actions
+
+  const settingsDeps = {
+    t: deps.t,
+    syncCaptions: deps.syncCaptions,
+    reRender: deps.reRender,
+    mutate: deps.mutate,
+  }
+
+  // Settings dropdown
+  const dropdown = document.createElement('div')
+  dropdown.className = CSS.dropdown
+
+  const settingsBtn = document.createElement('button')
+  settingsBtn.type = 'button'
+  settingsBtn.className = CSS.actionBtn
+  settingsBtn.innerHTML = `${ICON_SETTINGS} ${deps.t('settings', 'Settings')}`
+  settingsBtn.setAttribute('aria-haspopup', 'true')
+  settingsBtn.setAttribute('aria-expanded', 'false')
+
+  const panel = buildSettingsPanel(wrapper, state, settingsDeps)
+  panel.setAttribute('role', 'group')
+  panel.setAttribute('aria-label', deps.t('settings', 'Settings'))
+
+  settingsBtn.addEventListener('click', (e) => {
+    e.stopPropagation()
+    const open = dropdown.classList.toggle(CSS.dropdownOpen)
+    settingsBtn.setAttribute('aria-expanded', String(open))
+  }, { signal })
+
+  dropdown.append(settingsBtn, panel)
+
+  document.addEventListener('click', (e) => {
+    if (!dropdown.contains(/** @type {Node} */ (e.target))) {
+      dropdown.classList.remove(CSS.dropdownOpen)
+      settingsBtn.setAttribute('aria-expanded', 'false')
+    }
+  }, { signal })
+  dropdown.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape' || !dropdown.classList.contains(CSS.dropdownOpen)) return
+    event.preventDefault()
+    dropdown.classList.remove(CSS.dropdownOpen)
+    settingsBtn.setAttribute('aria-expanded', 'false')
+    settingsBtn.focus()
+  }, { signal })
+
+  // Main view container (for drill-down hide/show)
+  const mainView = document.createElement('div')
+  mainView.className = CSS.actionsView
+  mainView.style.display = 'contents'
+
+  mainView.appendChild(dropdown)
+  mainView.appendChild(makeSep())
+
+  // Add (drill-down)
+  const addBtn = makeActionBtn(
+    `${ICON_ADD_IMAGE} ${deps.t('addMore', 'Add')} ${ICON_CHEVRON_RIGHT}`,
+    () => showAddView(actions, mainView, deps, signal),
+    signal,
+  )
+  addBtn.querySelector('svg:last-child')?.classList.add(CSS.actionChevron)
+  mainView.appendChild(addBtn)
+
+  mainView.appendChild(makeSep())
+
+  // Delete all
+  const deleteAllBtn = document.createElement('button')
+  deleteAllBtn.type = 'button'
+  deleteAllBtn.className = `${CSS.actionBtn} ${CSS.actionBtnDanger}`
+  deleteAllBtn.innerHTML = ICON_TRASH
+  deleteAllBtn.setAttribute('aria-label', deps.t('deleteAll', 'Delete all'))
+  deleteAllBtn.addEventListener('mousedown', (e) => e.preventDefault(), { signal })
+  deleteAllBtn.addEventListener('click', (e) => {
+    e.stopPropagation()
+    deps.onDeleteAll()
+  }, { signal })
+  mainView.appendChild(deleteAllBtn)
+
+  actions.appendChild(mainView)
+  return actions
+}
+
+/**
+ * @param {HTMLElement} actions
+ * @param {HTMLElement} mainView
+ * @param {FilledViewDeps} deps
+ * @param {AbortSignal} signal
+ */
+function showAddView(actions, mainView, deps, signal) {
+  mainView.style.display = 'none'
+
+  const view = document.createElement('div')
+  view.className = CSS.actionsView
+  view.style.display = 'contents'
+
+  const restore = () => { view.remove(); mainView.style.display = 'contents' }
+
+  view.appendChild(makeActionBtn(
+    `${ICON_BACK} ${deps.t('back', 'Back')}`,
+    restore,
+    signal,
+  ))
+  view.appendChild(makeSep())
+
+  view.appendChild(makeActionBtn(
+    `${ICON_UPLOAD} ${deps.t('upload', 'Upload')}`,
+    () => { deps.onTriggerFileInput(); restore() },
+    signal,
+  ))
+
+  for (const action of deps.customActions) {
+    view.appendChild(makeActionBtn(
+      `${action.icon || ''} ${action.label}`.trim(),
+      async () => { await deps.runCustomAction(action.handler); restore() },
+      signal,
+    ))
+  }
+
+  view.appendChild(makeActionBtn(
+    `${ICON_URL} URL`,
+    () => { deps.onPromptUrl(); restore() },
+    signal,
+  ))
+
+  actions.appendChild(view)
+}
+
+/** @param {string} innerHTML @param {() => void} handler @param {AbortSignal} signal */
+function makeActionBtn(innerHTML, handler, signal) {
+  return _makeActionBtn(CSS.actionBtn, innerHTML, handler, signal)
+}
+
+/** @returns {HTMLDivElement} */
+function makeSep() {
+  return _makeSep(CSS.actionsSep)
+}

package/dist/plugins/heading/HeadingLevelSelect.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Inline toolbar control for changing heading level.
+ * Extracted from Heading.renderInlineControls() for SRP.
+ *
+ * @param {import('./index.js').Heading} plugin
+ * @param {HTMLElement} element - heading content element
+ * @param {import('../../core/types.js').InlineControlContext} ctx
+ * @param {(key: string, fallback: string) => string} t - translation function
+ * @param {ReadonlyArray<{level: number, key: string, icon: string}>} levels
+ * @returns {import('../../core/types.js').InlineControlGroup}
+ */
+export function createHeadingLevelSelect(plugin: import("./index.js").Heading, element: HTMLElement, ctx: import("../../core/types.js").InlineControlContext, t: (key: string, fallback: string) => string, levels: ReadonlyArray<{
+    level: number;
+    key: string;
+    icon: string;
+}>): import("../../core/types.js").InlineControlGroup;

package/dist/plugins/heading/HeadingLevelSelect.js

@@ -0,0 +1,183 @@
+import { getTextOffset } from '../../core/textOffset.js'
+import { restoreSelectionByOffsets } from '../../core/textOffset.js'
+import { handleMenuKeydown } from '../../core/menuKeyboardNav.js'
+
+const ICON_CHEVRON = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6l6 -6"/></svg>'
+
+/**
+ * Inline toolbar control for changing heading level.
+ * Extracted from Heading.renderInlineControls() for SRP.
+ *
+ * @param {import('./index.js').Heading} plugin
+ * @param {HTMLElement} element - heading content element
+ * @param {import('../../core/types').InlineControlContext} ctx
+ * @param {(key: string, fallback: string) => string} t - translation function
+ * @param {ReadonlyArray<{level: number, key: string, icon: string}>} levels
+ * @returns {import('../../core/types').InlineControlGroup}
+ */
+export function createHeadingLevelSelect(plugin, element, ctx, t, levels) {
+  let currentLevel = plugin.getLevel(element)
+  let contentEl = element
+  let dropdownOpen = false
+
+  /** @type {number | null} */
+  let savedStartOffset = null
+  /** @type {number | null} */
+  let savedEndOffset = null
+
+  // Select button: "H2 ▾"
+  const selectBtn = document.createElement('button')
+  selectBtn.type = 'button'
+  selectBtn.className = 'oe-inline-toolbar__level-select'
+  selectBtn.setAttribute('aria-label', t('level', 'Heading level'))
+  selectBtn.setAttribute('aria-haspopup', 'menu')
+  selectBtn.setAttribute('aria-expanded', 'false')
+
+  const label = document.createElement('span')
+  label.className = 'oe-inline-toolbar__level-label'
+  label.textContent = `H${currentLevel}`
+  selectBtn.appendChild(label)
+
+  const chevron = document.createElement('span')
+  chevron.className = 'oe-inline-toolbar__type-chevron'
+  chevron.setAttribute('aria-hidden', 'true')
+  chevron.innerHTML = ICON_CHEVRON
+  selectBtn.appendChild(chevron)
+
+  // Dropdown panel
+  const dropdown = document.createElement('div')
+  dropdown.className = 'oe-inline-toolbar__level-dropdown'
+  dropdown.setAttribute('role', 'menu')
+  dropdown.style.display = 'none'
+
+  for (const { level, key, icon } of levels) {
+    const item = document.createElement('button')
+    item.type = 'button'
+    item.className = 'oe-inline-toolbar__type-item'
+    item.setAttribute('role', 'menuitemradio')
+    item.setAttribute('aria-checked', String(level === currentLevel))
+    if (level === currentLevel) {
+      item.classList.add('oe-inline-toolbar__type-item--active')
+    }
+    item.dataset.level = String(level)
+
+    const iconSpan = document.createElement('span')
+    iconSpan.className = 'oe-inline-toolbar__type-item-icon'
+    iconSpan.innerHTML = icon
+    item.appendChild(iconSpan)
+
+    const labelSpan = document.createElement('span')
+    labelSpan.className = 'oe-inline-toolbar__type-item-label'
+    labelSpan.textContent = t(key, `Heading ${level}`)
+    item.appendChild(labelSpan)
+
+    item.addEventListener('mousedown', (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+    })
+    item.addEventListener('click', (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+
+      const textLen = contentEl.textContent?.length ?? 0
+      const startOff = savedStartOffset ?? 0
+      const endOff = savedEndOffset ?? textLen
+
+      ctx.mutate(() => {
+        ctx.suppressSelectionChange()
+        const newEl = plugin.changeLevel(contentEl, level)
+        if (newEl !== contentEl) {
+          contentEl = newEl
+          ctx.onContentElementChanged(newEl)
+        }
+        currentLevel = level
+        label.textContent = `H${level}`
+
+        restoreSelectionByOffsets(contentEl, startOff, endOff)
+        saveRange()
+
+        // Update active states in dropdown
+        for (const btn of dropdown.children) {
+          const lvl = parseInt(/** @type {HTMLElement} */ (btn).dataset.level || '0', 10)
+          btn.classList.toggle('oe-inline-toolbar__type-item--active', lvl === level)
+          btn.setAttribute('aria-checked', String(lvl === level))
+        }
+      })
+
+      closeDropdown()
+    })
+
+    dropdown.appendChild(item)
+  }
+
+  // Toggle dropdown
+  selectBtn.addEventListener('mousedown', (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  })
+  selectBtn.addEventListener('click', (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (dropdownOpen) {
+      closeDropdown()
+    } else {
+      openDropdown()
+    }
+  })
+  selectBtn.addEventListener('keydown', (e) => {
+    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return
+    e.preventDefault()
+    e.stopPropagation()
+    if (!dropdownOpen) openDropdown()
+    const items = [...dropdown.querySelectorAll('[role="menuitemradio"]')]
+    const target = e.key === 'ArrowUp' ? items.at(-1) : items[0]
+    if (target instanceof HTMLElement) target.focus()
+  })
+  dropdown.addEventListener('keydown', (e) => {
+    handleMenuKeydown(e, dropdown, {
+      itemSelector: '[role="menuitemradio"]',
+      onEscape: () => {
+        closeDropdown()
+        selectBtn.focus()
+      },
+    })
+  })
+
+  function saveRange() {
+    const sel = window.getSelection()
+    if (sel && sel.rangeCount > 0) {
+      const range = sel.getRangeAt(0)
+      savedStartOffset = getTextOffset(contentEl, range.startContainer, range.startOffset)
+      savedEndOffset = getTextOffset(contentEl, range.endContainer, range.endOffset)
+    }
+  }
+
+  function openDropdown() {
+    saveRange()
+    dropdownOpen = true
+    dropdown.style.display = ''
+    selectBtn.setAttribute('aria-expanded', 'true')
+  }
+
+  function closeDropdown() {
+    dropdownOpen = false
+    dropdown.style.display = 'none'
+    selectBtn.setAttribute('aria-expanded', 'false')
+  }
+
+  // Close on outside click
+  const onOutsideClick = (/** @type {MouseEvent} */ e) => {
+    if (!dropdownOpen) return
+    const target = /** @type {Node} */ (e.target)
+    if (selectBtn.contains(target) || dropdown.contains(target)) return
+    closeDropdown()
+  }
+  document.addEventListener('mousedown', onOutsideClick, true)
+
+  return {
+    elements: [selectBtn, dropdown],
+    destroy() {
+      document.removeEventListener('mousedown', onOutsideClick, true)
+    },
+  }
+}