@shelamkoff/rector 1.0.0

package/dist/core/toolbar/ToolbarPositioner.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Positioning logic for the floating block toolbar.
+ *
+ * Two positioning modes:
+ *  - Desktop: absolute, anchored to the current block's top inside the
+ *    editor root.
+ *  - Mobile: appended *into* the block element so it sits in normal flow
+ *    below content.
+ *
+ * Plus a FLIP-style animator for `block:moved`: snapshot old top, set new
+ * top via `offsetTop` walk, animate the delta. The walk is needed because
+ * the live `getBoundingClientRect()` is unreliable mid-animation (the
+ * block we're tracking may itself be in a CSS transform).
+ */
+export class ToolbarPositioner {
+    /**
+     * @param {HTMLElement} toolbarEl
+     * @param {HTMLElement} rootEl
+     * @param {import('../types.js').IBlockReader} blocks
+     * @param {{ mobileBreakpoint: number, moveAnimationMs: number }} options
+     */
+    constructor(toolbarEl: HTMLElement, rootEl: HTMLElement, blocks: import("../types.js").IBlockReader, options: {
+        mobileBreakpoint: number;
+        moveAnimationMs: number;
+    });
+    /** @type {boolean} */
+    moveAnimating: boolean;
+    /**
+     * Move the toolbar to the current block. Called on focus/insert/remove.
+     * Returns false if there is no current block (caller should hide).
+     *
+     * @returns {boolean}
+     */
+    updatePosition(): boolean;
+    /**
+     * FLIP-animate the toolbar to the new block position (called on `block:moved`).
+     * Optionally also animates the settings menu element if it's open.
+     *
+     * @param {HTMLElement | null} settingsMenuEl
+     */
+    animatePosition(settingsMenuEl: HTMLElement | null): void;
+    /**
+     * After a block-removed animation completes, FLIP the toolbar to its
+     * new spot. Returns the dy offset for callers that want to animate
+     * additional siblings (or zero if no animation is needed).
+     *
+     * @returns {number}
+     */
+    animateAfterRemoval(): number;
+    /**
+     * Position the toolbox popup relative to the toolbar (desktop only —
+     * mobile uses CSS bottom-sheet positioning).
+     *
+     * @param {HTMLElement} toolboxEl
+     */
+    positionToolbox(toolboxEl: HTMLElement): void;
+    /** @returns {boolean} */
+    isMobile(): boolean;
+    #private;
+}

package/dist/core/toolbar/ToolbarPositioner.js

@@ -0,0 +1,188 @@
+import { positionPopup } from '../dom.js'
+
+/**
+ * Positioning logic for the floating block toolbar.
+ *
+ * Two positioning modes:
+ *  - Desktop: absolute, anchored to the current block's top inside the
+ *    editor root.
+ *  - Mobile: appended *into* the block element so it sits in normal flow
+ *    below content.
+ *
+ * Plus a FLIP-style animator for `block:moved`: snapshot old top, set new
+ * top via `offsetTop` walk, animate the delta. The walk is needed because
+ * the live `getBoundingClientRect()` is unreliable mid-animation (the
+ * block we're tracking may itself be in a CSS transform).
+ */
+export class ToolbarPositioner {
+  /** @type {HTMLElement} */
+  #toolbarEl
+
+  /** @type {HTMLElement} */
+  #rootEl
+
+  /** @type {import('../types').IBlockReader} */
+  #blocks
+
+  /** @type {number} */
+  #mobileBreakpoint
+
+  /** @type {number} */
+  #moveAnimationMs
+
+  /** @type {boolean} */
+  moveAnimating = false
+
+  /**
+   * @param {HTMLElement} toolbarEl
+   * @param {HTMLElement} rootEl
+   * @param {import('../types').IBlockReader} blocks
+   * @param {{ mobileBreakpoint: number, moveAnimationMs: number }} options
+   */
+  constructor(toolbarEl, rootEl, blocks, options) {
+    this.#toolbarEl = toolbarEl
+    this.#rootEl = rootEl
+    this.#blocks = blocks
+    this.#mobileBreakpoint = options.mobileBreakpoint
+    this.#moveAnimationMs = options.moveAnimationMs
+  }
+
+  /**
+   * Move the toolbar to the current block. Called on focus/insert/remove.
+   * Returns false if there is no current block (caller should hide).
+   *
+   * @returns {boolean}
+   */
+  updatePosition() {
+    const block = this.#blocks.getCurrentBlock()
+    if (!block) return false
+
+    this.#toolbarEl.style.display = ''
+
+    if (this.isMobile()) {
+      // Mobile: live in the block's flow, below content.
+      if (this.#toolbarEl.parentElement !== block.element) {
+        block.element.appendChild(this.#toolbarEl)
+      }
+      this.#toolbarEl.style.top = ''
+    } else {
+      // Desktop: absolute inside editor root.
+      if (this.#toolbarEl.parentElement !== this.#rootEl) {
+        this.#rootEl.appendChild(this.#toolbarEl)
+      }
+      const editorRect = this.#rootEl.getBoundingClientRect()
+      const blockRect = block.element.getBoundingClientRect()
+      this.#toolbarEl.style.top = `${blockRect.top - editorRect.top}px`
+    }
+
+    return true
+  }
+
+  /**
+   * FLIP-animate the toolbar to the new block position (called on `block:moved`).
+   * Optionally also animates the settings menu element if it's open.
+   *
+   * @param {HTMLElement | null} settingsMenuEl
+   */
+  animatePosition(settingsMenuEl) {
+    if (this.isMobile()) {
+      this.updatePosition()
+      return
+    }
+
+    const block = this.#blocks.getCurrentBlock()
+    if (!block) return
+
+    // FIRST: save current toolbar position.
+    const oldTop = parseFloat(this.#toolbarEl.style.top) || 0
+
+    // LAST: compute layout position via offsetTop walk
+    // (immune to in-flight FLIP transforms on the block element).
+    let newTop = 0
+    /** @type {HTMLElement | null} */
+    let offsetEl = block.element
+    while (offsetEl && offsetEl !== this.#rootEl) {
+      newTop += offsetEl.offsetTop
+      offsetEl = /** @type {HTMLElement | null} */ (offsetEl.offsetParent)
+    }
+
+    this.moveAnimating = true
+    this.#toolbarEl.style.top = `${newTop}px`
+
+    if (this.#toolbarEl.parentElement !== this.#rootEl) {
+      this.#rootEl.appendChild(this.#toolbarEl)
+    }
+
+    // INVERT + PLAY
+    const dy = oldTop - newTop
+    if (Math.abs(dy) < 1) {
+      this.moveAnimating = false
+      return
+    }
+
+    const opts = { duration: this.#moveAnimationMs, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' }
+
+    this.#toolbarEl.animate(
+      [{ transform: `translateY(${dy}px)` }, { transform: 'translateY(0)' }],
+      opts,
+    ).onfinish = () => { this.moveAnimating = false }
+
+    if (settingsMenuEl) {
+      settingsMenuEl.animate(
+        [{ transform: `translateY(${dy}px)` }, { transform: 'translateY(0)' }],
+        opts,
+      )
+    }
+  }
+
+  /**
+   * After a block-removed animation completes, FLIP the toolbar to its
+   * new spot. Returns the dy offset for callers that want to animate
+   * additional siblings (or zero if no animation is needed).
+   *
+   * @returns {number}
+   */
+  animateAfterRemoval() {
+    const oldTop = parseFloat(this.#toolbarEl.style.top) || 0
+    this.updatePosition()
+    const newTop = parseFloat(this.#toolbarEl.style.top) || 0
+    const dy = oldTop - newTop
+    if (Math.abs(dy) > 1) {
+      this.#toolbarEl.animate(
+        [{ transform: `translateY(${dy}px)` }, { transform: 'translateY(0)' }],
+        { duration: this.#moveAnimationMs, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' },
+      )
+    }
+    return dy
+  }
+
+  /**
+   * Position the toolbox popup relative to the toolbar (desktop only —
+   * mobile uses CSS bottom-sheet positioning).
+   *
+   * @param {HTMLElement} toolboxEl
+   */
+  positionToolbox(toolboxEl) {
+    if (this.isMobile()) {
+      toolboxEl.style.top = ''
+      toolboxEl.style.bottom = ''
+      toolboxEl.style.left = ''
+      toolboxEl.style.right = ''
+      return
+    }
+
+    const toolbarRect = this.#toolbarEl.getBoundingClientRect()
+    const editorRect = this.#rootEl.getBoundingClientRect()
+
+    const rightOffset = editorRect.right - toolbarRect.right
+    toolboxEl.style.right = `${rightOffset}px`
+    toolboxEl.style.left = 'auto'
+
+    positionPopup(toolboxEl, toolbarRect, editorRect)
+  }
+
+  /** @returns {boolean} */
+  isMobile() {
+    return window.innerWidth < this.#mobileBreakpoint
+  }
+}

package/dist/core/toolbar/ToolboxBuilder.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @typedef {Object} ToolboxDeps
+ * @property {Map<string, import('../types.js').BlockPlugin>} plugins
+ * @property {import('../InlinePluginRegistry.js').InlinePluginRegistry | null} inlinePlugins
+ * @property {import('../I18n.js').I18n} i18n
+ * @property {number} filterThreshold
+ * @property {(type: string) => void} onInsertBlock
+ * @property {(type: string) => void} onInsertInlinePlugin
+ * @property {() => void} onClose
+ */
+/**
+ * Builds and manages the toolbox popup contents:
+ *  - filter input (when plugin count exceeds threshold)
+ *  - menu items for each block plugin
+ *  - menu items for each inline plugin
+ *  - keyboard navigation (Arrow/Home/End/Escape)
+ *  - text filter that hides non-matching items
+ *
+ * Owns no positioning or open/close state — that lives on Toolbar.
+ */
+export class ToolboxBuilder {
+    /**
+     * @param {HTMLElement} toolboxEl
+     * @param {ToolboxDeps} deps
+     */
+    constructor(toolboxEl: HTMLElement, deps: ToolboxDeps);
+    /** @returns {HTMLInputElement | null} */
+    get filterInput(): HTMLInputElement | null;
+    /**
+     * Reset the filter to empty (called when reopening the toolbox).
+     */
+    resetFilter(): void;
+    destroy(): void;
+    #private;
+}
+export type ToolboxDeps = {
+    plugins: Map<string, import("../types.js").BlockPlugin>;
+    inlinePlugins: import("../InlinePluginRegistry.js").InlinePluginRegistry | null;
+    i18n: import("../I18n.js").I18n;
+    filterThreshold: number;
+    onInsertBlock: (type: string) => void;
+    onInsertInlinePlugin: (type: string) => void;
+    onClose: () => void;
+};

package/dist/core/toolbar/ToolboxBuilder.js

@@ -0,0 +1,260 @@
+import { el } from '../dom.js'
+
+const ICON_SEARCH = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>'
+
+/**
+ * @typedef {Object} ToolboxDeps
+ * @property {Map<string, import('../types').BlockPlugin>} plugins
+ * @property {import('../InlinePluginRegistry').InlinePluginRegistry | null} inlinePlugins
+ * @property {import('../I18n').I18n} i18n
+ * @property {number} filterThreshold
+ * @property {(type: string) => void} onInsertBlock
+ * @property {(type: string) => void} onInsertInlinePlugin
+ * @property {() => void} onClose
+ */
+
+/**
+ * Builds and manages the toolbox popup contents:
+ *  - filter input (when plugin count exceeds threshold)
+ *  - menu items for each block plugin
+ *  - menu items for each inline plugin
+ *  - keyboard navigation (Arrow/Home/End/Escape)
+ *  - text filter that hides non-matching items
+ *
+ * Owns no positioning or open/close state — that lives on Toolbar.
+ */
+export class ToolboxBuilder {
+  /** @type {HTMLElement} */
+  #toolboxEl
+
+  /** @type {ToolboxDeps} */
+  #deps
+
+  /** @type {HTMLInputElement | null} */
+  #filterInput = null
+
+  /**
+   * @param {HTMLElement} toolboxEl
+   * @param {ToolboxDeps} deps
+   */
+  constructor(toolboxEl, deps) {
+    this.#toolboxEl = toolboxEl
+    this.#deps = deps
+    this.#toolboxEl.addEventListener('keydown', this.#onKeydown)
+    this.#build()
+  }
+
+  /** @returns {HTMLInputElement | null} */
+  get filterInput() {
+    return this.#filterInput
+  }
+
+  /**
+   * Reset the filter to empty (called when reopening the toolbox).
+   */
+  resetFilter() {
+    if (this.#filterInput) {
+      this.#filterInput.value = ''
+      this.#applyFilter('')
+    }
+  }
+
+  destroy() {
+    this.#toolboxEl.removeEventListener('keydown', this.#onKeydown)
+  }
+
+  // ── building ────────────────────────────────────────────────────────────────
+
+  #build() {
+    this.#toolboxEl.innerHTML = ''
+    this.#filterInput = null
+
+    const plugins = [...this.#deps.plugins.values()]
+
+    if (plugins.length > this.#deps.filterThreshold) {
+      this.#toolboxEl.appendChild(this.#buildFilterInput())
+    }
+
+    for (const plugin of plugins) {
+      this.#toolboxEl.appendChild(this.#buildBlockItem(plugin))
+    }
+
+    if (this.#deps.inlinePlugins) {
+      for (const ip of this.#deps.inlinePlugins.values()) {
+        this.#toolboxEl.appendChild(this.#buildInlinePluginItem(ip))
+      }
+    }
+  }
+
+  /** @returns {HTMLElement} */
+  #buildFilterInput() {
+    const wrap = el('li', 'oe-toolbox__filter', { role: 'none' })
+
+    const icon = el('span', 'oe-toolbox__filter-icon')
+    icon.innerHTML = ICON_SEARCH
+
+    const input = /** @type {HTMLInputElement} */ (el('input', 'oe-toolbox__filter-input', {
+      type: 'text',
+      placeholder: this.#deps.i18n.t('toolbox.search'),
+    }))
+
+    input.addEventListener('input', () => this.#applyFilter(input.value))
+    input.addEventListener('keydown', (e) => this.#onFilterKeydown(e, input))
+
+    wrap.append(icon, input)
+    this.#filterInput = input
+    return wrap
+  }
+
+  /**
+   * @param {import('../types').BlockPlugin} plugin
+   * @returns {HTMLElement}
+   */
+  #buildBlockItem(plugin) {
+    const item = el('li', 'oe-toolbox__item', { role: 'menuitem', tabindex: '-1' })
+    item.dataset.pluginType = plugin.type
+
+    // English type name + localized title for bilingual search.
+    const enFallback = plugin.type.charAt(0).toUpperCase() + plugin.type.slice(1)
+    item.dataset.search = `${enFallback}\0${plugin.title}`.toLowerCase()
+
+    const icon = el('span', 'oe-toolbox__icon')
+    icon.innerHTML = plugin.icon
+    item.appendChild(icon)
+
+    const label = el('span', 'oe-toolbox__label')
+    label.textContent = plugin.title
+    item.appendChild(label)
+
+    item.addEventListener('click', () => this.#deps.onInsertBlock(plugin.type))
+    return item
+  }
+
+  /**
+   * @param {import('../types').InlinePlugin} ip
+   * @returns {HTMLElement}
+   */
+  #buildInlinePluginItem(ip) {
+    const item = el('li', 'oe-toolbox__item oe-toolbox__item--inline', { role: 'menuitem', tabindex: '-1' })
+    item.dataset.pluginType = ip.type
+    item.dataset.inlinePlugin = '1'
+
+    const enFallback = ip.type.charAt(0).toUpperCase() + ip.type.slice(1)
+    item.dataset.search = `${enFallback}\0${ip.title}`.toLowerCase()
+
+    const iconEl = el('span', 'oe-toolbox__icon')
+    iconEl.innerHTML = ip.icon
+    item.appendChild(iconEl)
+
+    const label = el('span', 'oe-toolbox__label')
+    label.textContent = ip.title
+    item.appendChild(label)
+
+    item.addEventListener('click', () => this.#deps.onInsertInlinePlugin(ip.type))
+    return item
+  }
+
+  // ── filter ──────────────────────────────────────────────────────────────────
+
+  /**
+   * @param {string} query
+   */
+  #applyFilter(query) {
+    const q = query.toLowerCase().trim()
+    const items = this.#toolboxEl.querySelectorAll('.oe-toolbox__item')
+    let visibleCount = 0
+
+    for (const item of items) {
+      const itemEl = /** @type {HTMLElement} */ (item)
+      const labelText = itemEl.querySelector('.oe-toolbox__label')?.textContent ?? ''
+      const searchText = itemEl.dataset.search || String(labelText).toLowerCase()
+      const match = !q || searchText.includes(q)
+      itemEl.style.display = match ? '' : 'none'
+      if (match) visibleCount++
+    }
+
+    let emptyEl = this.#toolboxEl.querySelector('.oe-toolbox__empty')
+    if (visibleCount === 0 && q) {
+      if (!emptyEl) {
+        emptyEl = el('div', 'oe-toolbox__empty')
+        emptyEl.textContent = this.#deps.i18n.t('slash.noResults')
+        this.#toolboxEl.appendChild(emptyEl)
+      }
+    } else if (emptyEl) {
+      emptyEl.remove()
+    }
+  }
+
+  // ── keyboard ────────────────────────────────────────────────────────────────
+
+  /**
+   * @param {KeyboardEvent} e
+   * @param {HTMLInputElement} input
+   */
+  #onFilterKeydown(e, input) {
+    if (e.key === 'Escape') {
+      input.value = ''
+      this.#applyFilter('')
+      this.#deps.onClose()
+      e.stopPropagation()
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      e.stopPropagation()
+      const first = this.#toolboxEl.querySelector('[role="menuitem"]:not([style*="display: none"])')
+      if (first instanceof globalThis.HTMLElement) first.focus()
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      e.stopPropagation()
+      const items = this.#toolboxEl.querySelectorAll('[role="menuitem"]:not([style*="display: none"])')
+      const last = items.item(items.length - 1)
+      if (last instanceof globalThis.HTMLElement) last.focus()
+    } else if (e.key !== 'Enter') {
+      e.stopPropagation()
+    }
+  }
+
+  /** @param {KeyboardEvent} e */
+  #onKeydown = (e) => {
+    const items = /** @type {HTMLElement[]} */ (
+      [...this.#toolboxEl.querySelectorAll('[role="menuitem"]:not([style*="display: none"])')]
+    )
+    if (!items.length) return
+
+    const current = /** @type {HTMLElement} */ (document.activeElement)
+    const idx = items.indexOf(current)
+
+    switch (e.key) {
+      case 'ArrowDown': {
+        e.preventDefault()
+        e.stopPropagation()
+        const next = idx < items.length - 1 ? idx + 1 : 0
+        items[next]?.focus()
+        break
+      }
+      case 'ArrowUp': {
+        e.preventDefault()
+        e.stopPropagation()
+        if (idx <= 0 && this.#filterInput) {
+          this.#filterInput.focus()
+        } else {
+          const prev = idx > 0 ? idx - 1 : items.length - 1
+          items[prev]?.focus()
+        }
+        break
+      }
+      case 'Escape':
+        e.preventDefault()
+        e.stopPropagation()
+        this.#deps.onClose()
+        break
+      case 'Home':
+        e.preventDefault()
+        items[0]?.focus()
+        break
+      case 'End':
+        e.preventDefault()
+        items[items.length - 1]?.focus()
+        break
+    }
+  }
+}