@shelamkoff/rector 1.0.0

package/dist/core/block-settings-menu/MenuBuilder.js

@@ -0,0 +1,203 @@
+import { el } from '../dom.js'
+import {
+  ICON_BACK, ICON_CHEVRON_RIGHT, ICON_DELETE, ICON_DOWN, ICON_DUPLICATE, ICON_SWITCH, ICON_UP,
+} from '../icons.js'
+
+/**
+ * @typedef {Object} MenuBuilderDeps
+ * @property {import('../types').IBlockManager} blocks
+ * @property {Map<string, import('../types').BlockPlugin>} plugins
+ * @property {import('../I18n').I18n} i18n
+ * @property {import('./BlockActions.js').BlockActions} actions
+ * @property {(direction?: 'forward' | 'back' | 'none') => void} rebuildMain
+ *   Used by the convert-view back button to redraw the main view.
+ */
+
+/**
+ * Builds the contents of the block settings menu.
+ *
+ * Two views:
+ *  - Main view: move up/down, plugin settings (e.g. heading levels),
+ *    duplicate, convert-to (drill-down), delete.
+ *  - Convert view: list of all block types, with the current one marked active.
+ *
+ * Drill-down direction is conveyed via two CSS classes
+ * (`oe-settings-menu--forward`/`--back`) so the menu can animate.
+ */
+export class MenuBuilder {
+  /** @type {HTMLElement} */
+  #menuEl
+
+  /** @type {MenuBuilderDeps} */
+  #deps
+
+  /**
+   * @param {HTMLElement} menuEl
+   * @param {MenuBuilderDeps} deps
+   */
+  constructor(menuEl, deps) {
+    this.#menuEl = menuEl
+    this.#deps = deps
+  }
+
+  /**
+   * @param {'forward' | 'back' | 'none'} [direction]
+   */
+  buildMainView(direction = 'none') {
+    this.#menuEl.innerHTML = ''
+    this.#applyDirection(direction)
+
+    const blocks = this.#deps.blocks
+    const currentIndex = blocks.getCurrentIndex()
+    const current = blocks.getCurrentBlock()
+    if (!current) return
+
+    const isFirst = currentIndex === 0
+    const isLast = currentIndex === blocks.getBlockCount() - 1
+
+    // Move up / Move down — always at the top.
+    this.#addItem(this.#deps.i18n.t('block.moveUp'), ICON_UP, () => this.#deps.actions.moveUp(), isFirst)
+    this.#addItem(this.#deps.i18n.t('block.moveDown'), ICON_DOWN, () => this.#deps.actions.moveDown(), isLast)
+
+    this.#menuEl.appendChild(el('li', 'oe-settings-menu__separator', { role: 'separator' }))
+
+    // Plugin-specific settings (e.g. heading levels, table operations).
+    const plugin = this.#deps.plugins.get(current.type)
+    if (plugin?.renderSettings) {
+      let settingsItems = null
+      try {
+        settingsItems = plugin.renderSettings(current.contentElement)
+      } catch (err) {
+        console.warn(`[MenuBuilder] Failed to render settings for "${current.type}":`, err)
+      }
+      const items = Array.isArray(settingsItems) ? settingsItems : settingsItems ? [settingsItems] : []
+
+      for (const item of items) {
+        if (!item) continue
+        item.addEventListener('click', (e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          this.#deps.actions.handleSettingsAction(current, plugin, item)
+        })
+        this.#menuEl.appendChild(item)
+      }
+
+      if (items.length > 0) {
+        this.#menuEl.appendChild(el('li', 'oe-settings-menu__separator', { role: 'separator' }))
+      }
+    }
+
+    // Duplicate
+    this.#addItem(this.#deps.i18n.t('block.duplicate'), ICON_DUPLICATE, () => this.#deps.actions.duplicate())
+
+    // Convert-to drill-down (only when there are multiple block types).
+    if (this.#deps.plugins.size > 1) {
+      this.#addDrilldownItem(this.#deps.i18n.t('block.convertTo'), ICON_SWITCH, () => this.buildConvertView())
+    }
+
+    this.#menuEl.appendChild(el('li', 'oe-settings-menu__separator', { role: 'separator' }))
+
+    // Delete (danger).
+    this.#addItem(this.#deps.i18n.t('block.delete'), ICON_DELETE, () => this.#deps.actions.delete(), false, true)
+  }
+
+  buildConvertView() {
+    this.#menuEl.innerHTML = ''
+    this.#applyDirection('forward')
+
+    const current = this.#deps.blocks.getCurrentBlock()
+    if (!current) return
+
+    // Back button.
+    this.#addItem(this.#deps.i18n.t('block.back'), ICON_BACK, () => this.#deps.rebuildMain('back'))
+    this.#menuEl.appendChild(el('li', 'oe-settings-menu__separator', { role: 'separator' }))
+
+    for (const plugin of this.#deps.plugins.values()) {
+      const isActive = plugin.type === current.type
+      const item = this.#createItemBtn(plugin.title, plugin.icon, () => {
+        this.#deps.actions.convertTo(plugin.type)
+      })
+      if (isActive) item.classList.add('oe-settings-menu__item--active')
+      this.#menuEl.appendChild(item)
+    }
+  }
+
+  // ── helpers ─────────────────────────────────────────────────────────────────
+
+  /**
+   * @param {'forward' | 'back' | 'none'} direction
+   */
+  #applyDirection(direction) {
+    if (direction === 'back') {
+      this.#menuEl.classList.add('oe-settings-menu--back')
+      this.#menuEl.classList.remove('oe-settings-menu--forward')
+    } else if (direction === 'forward') {
+      this.#menuEl.classList.add('oe-settings-menu--forward')
+      this.#menuEl.classList.remove('oe-settings-menu--back')
+    } else {
+      this.#menuEl.classList.remove('oe-settings-menu--forward', 'oe-settings-menu--back')
+    }
+  }
+
+  /**
+   * @param {string} label
+   * @param {string} icon
+   * @param {() => void} handler
+   * @param {boolean} [disabled]
+   * @param {boolean} [danger]
+   */
+  #addItem(label, icon, handler, disabled = false, danger = false) {
+    this.#menuEl.appendChild(this.#createItemBtn(label, icon, handler, disabled, danger))
+  }
+
+  /**
+   * @param {string} label
+   * @param {string} icon
+   * @param {() => void} handler
+   */
+  #addDrilldownItem(label, icon, handler) {
+    const item = this.#createItemBtn(label, icon, handler)
+    const arrow = el('span', 'oe-settings-menu__arrow')
+    arrow.innerHTML = ICON_CHEVRON_RIGHT
+    item.appendChild(arrow)
+    this.#menuEl.appendChild(item)
+  }
+
+  /**
+   * @param {string} label
+   * @param {string} icon
+   * @param {() => void} handler
+   * @param {boolean} [disabled]
+   * @param {boolean} [danger]
+   * @returns {HTMLElement}
+   */
+  #createItemBtn(label, icon, handler, disabled = false, danger = false) {
+    let cls = 'oe-settings-menu__item'
+    if (disabled) cls += ' oe-settings-menu__item--disabled'
+    if (danger) cls += ' oe-settings-menu__item--danger'
+
+    const btn = el('li', cls, {
+      role: 'menuitem',
+      tabindex: '-1',
+      ...(disabled ? { 'aria-disabled': 'true' } : {}),
+    })
+
+    const iconSpan = el('span', 'oe-settings-menu__icon')
+    iconSpan.innerHTML = icon
+    btn.appendChild(iconSpan)
+
+    const labelSpan = el('span', 'oe-settings-menu__label')
+    labelSpan.textContent = label
+    btn.appendChild(labelSpan)
+
+    if (!disabled) {
+      btn.addEventListener('click', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        handler()
+      })
+    }
+
+    return btn
+  }
+}

package/dist/core/block-settings-menu/MenuPositioner.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Positioning logic for the block-settings menu.
+ *
+ * Desktop: anchored under (or above, on overflow) the floating toolbar,
+ * right-aligned with the toolbar's right edge. Reads `toolbar.offsetTop`
+ * walk instead of `getBoundingClientRect()` to avoid sampling FLIP-animated
+ * transforms — the visual position lags one frame behind layout during
+ * block-move animations.
+ *
+ * Mobile: bottom-sheet positioning is handled by CSS (position: fixed +
+ * `oe-settings-menu--open` class), so we just clear inline coordinates.
+ */
+export class MenuPositioner {
+    /**
+     * @param {HTMLElement} menuEl
+     * @param {HTMLElement} rootEl
+     * @param {number} mobileBreakpoint
+     */
+    constructor(menuEl: HTMLElement, rootEl: HTMLElement, mobileBreakpoint?: number);
+    position(): void;
+    #private;
+}

package/dist/core/block-settings-menu/MenuPositioner.js

@@ -0,0 +1,79 @@
+/**
+ * Positioning logic for the block-settings menu.
+ *
+ * Desktop: anchored under (or above, on overflow) the floating toolbar,
+ * right-aligned with the toolbar's right edge. Reads `toolbar.offsetTop`
+ * walk instead of `getBoundingClientRect()` to avoid sampling FLIP-animated
+ * transforms — the visual position lags one frame behind layout during
+ * block-move animations.
+ *
+ * Mobile: bottom-sheet positioning is handled by CSS (position: fixed +
+ * `oe-settings-menu--open` class), so we just clear inline coordinates.
+ */
+export class MenuPositioner {
+  /** @type {HTMLElement} */
+  #menuEl
+
+  /** @type {HTMLElement} */
+  #rootEl
+
+  /** @type {number} */
+  #mobileBreakpoint
+
+  /**
+   * @param {HTMLElement} menuEl
+   * @param {HTMLElement} rootEl
+   * @param {number} mobileBreakpoint
+   */
+  constructor(menuEl, rootEl, mobileBreakpoint = 768) {
+    this.#menuEl = menuEl
+    this.#rootEl = rootEl
+    this.#mobileBreakpoint = mobileBreakpoint
+  }
+
+  position() {
+    if (window.innerWidth < this.#mobileBreakpoint) {
+      // Mobile: CSS handles bottom-sheet positioning.
+      this.#menuEl.style.top = ''
+      this.#menuEl.style.bottom = ''
+      this.#menuEl.style.left = ''
+      this.#menuEl.style.right = ''
+      return
+    }
+
+    const toolbar = /** @type {HTMLElement | null} */ (this.#rootEl.querySelector('.oe-toolbar'))
+    if (!toolbar) return
+
+    const editorRect = this.#rootEl.getBoundingClientRect()
+
+    // Toolbar layout top relative to editor root, via offsetTop walk
+    // (immune to in-flight FLIP transforms).
+    let toolbarLayoutTop = 0
+    /** @type {HTMLElement | null} */
+    let offsetEl = toolbar
+    while (offsetEl && offsetEl !== this.#rootEl) {
+      toolbarLayoutTop += offsetEl.offsetTop
+      offsetEl = /** @type {HTMLElement | null} */ (offsetEl.offsetParent)
+    }
+    const toolbarHeight = toolbar.offsetHeight
+
+    // Right offset from toolbar's right edge.
+    const toolbarRect = toolbar.getBoundingClientRect()
+    const rightOffset = editorRect.right - toolbarRect.right
+    this.#menuEl.style.right = `${rightOffset}px`
+    this.#menuEl.style.left = 'auto'
+
+    // Prefer below; flip above if not enough space.
+    const toolbarBottomAbs = editorRect.top + toolbarLayoutTop + toolbarHeight
+    const spaceBelow = window.innerHeight - toolbarBottomAbs - 8
+    const menuHeight = this.#menuEl.offsetHeight || 320
+
+    if (spaceBelow >= menuHeight) {
+      this.#menuEl.style.top = `${toolbarLayoutTop + toolbarHeight + 4}px`
+      this.#menuEl.style.bottom = 'auto'
+    } else {
+      this.#menuEl.style.top = 'auto'
+      this.#menuEl.style.bottom = `${editorRect.bottom - (editorRect.top + toolbarLayoutTop) + 4}px`
+    }
+  }
+}

package/dist/core/clipboard/Clipboard.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Editor clipboard surface — listens to copy/cut/paste/keydown on the editor
+ * root and dispatches to the right helper:
+ *  - selected blocks (`block.selected`): handled inline (whole-block copy/cut)
+ *  - cross-block range: delegated to `CrossBlockEditor`
+ *  - paste: routed by MIME type → custom-data, files, html, plain text,
+ *    each via `PasteRouter` lookup or `pasteInsert.js` helpers.
+ */
+export class Clipboard {
+    /**
+     * @typedef {Object} ClipboardConfig
+     * @property {import('../types.js').IBlockManager} blocks
+     * @property {import('../types.js').ISelectionManager} selection
+     * @property {Map<string, import('../types.js').BlockPlugin>} plugins
+     * @property {string} defaultBlockType
+     * @property {import('../types.js').ICrossBlockSelection} crossBlockSelection
+     * @property {import('../types.js').IEventBus} events
+     * @property {import('../CommandDispatcher.js').CommandDispatcher} commands
+     * @property {import('../BlockOperations.js').BlockOperations} blockOps
+     * @property {() => import('../types.js').EditorDocument} captureSnapshot
+     * @property {import('../InlinePluginRegistry.js').InlinePluginRegistry} inlinePluginRegistry
+     * @property {import('../types.js').InlinePluginContext} inlinePluginCtx
+     * @property {import('../Diagnostics.js').Diagnostics} [diagnostics]
+     * @property {(() => boolean)} [uiActivePredicate]
+     */
+    /**
+     * @param {HTMLElement} rootEl
+     * @param {ClipboardConfig} config
+     */
+    constructor(rootEl: HTMLElement, config: {
+        blocks: import("../types.js").IBlockManager;
+        selection: import("../types.js").ISelectionManager;
+        plugins: Map<string, import("../types.js").BlockPlugin>;
+        defaultBlockType: string;
+        crossBlockSelection: import("../types.js").ICrossBlockSelection;
+        events: import("../types.js").IEventBus;
+        commands: import("../CommandDispatcher.js").CommandDispatcher;
+        blockOps: import("../BlockOperations.js").BlockOperations;
+        captureSnapshot: () => import("../types.js").EditorDocument;
+        inlinePluginRegistry: import("../InlinePluginRegistry.js").InlinePluginRegistry;
+        inlinePluginCtx: import("../types.js").InlinePluginContext;
+        diagnostics?: import("../Diagnostics.js").Diagnostics;
+        uiActivePredicate?: (() => boolean);
+    });
+    destroy(): void;
+    #private;
+}