@shelamkoff/rector 1.0.0

package/dist/core/inline-toolbar/ActionsPanel.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @typedef {Object} ActionsPanelDeps
+ * @property {import('../types.js').IEventBus} events
+ * @property {import('../types.js').ICrossBlockSelection} crossBlockSelection
+ * @property {import('../Tooltip.js').Tooltip} tooltip
+ * @property {() => void} updateActiveStates
+ * @property {() => void} hideTypeSelector
+ * @property {<T>(range: Range, operation: () => T) => T} mutate
+ * @property {() => void} onClosed
+ *   Called after the panel is removed and the saved selection has been
+ *   restored. InlineToolbar uses this to flip its view back to "buttons"
+ *   and re-show the buttons panel.
+ */
+/**
+ * Drill-down "actions" panel for inline tools that have a `renderActions`
+ * implementation (e.g. link editor, font size picker).
+ *
+ * Lifecycle:
+ *  1. `open(tool, panelHost)` — calls `tool.renderActions(ctx)`. If it
+ *     returns null, the tool wants plain `toggle()` semantics — caller
+ *     handles that branch.
+ *  2. The panel is appended to `panelHost`. The buttons panel is hidden
+ *     by the caller.
+ *  3. `close()` — removes the panel and restores the saved selection.
+ *
+ * Manages a saved `Range` so the user's selection survives focus shifts
+ * into the actions UI (input fields, buttons).
+ */
+export class ActionsPanel {
+    /** @param {ActionsPanelDeps} deps */
+    constructor(deps: ActionsPanelDeps);
+    /**
+     * Try to open the tool's actions panel.
+     * @param {import('../types.js').InlineTool} tool
+     * @returns {HTMLElement | null} the rendered panel, or null if the
+     *   tool wants `toggle()` semantics instead.
+     */
+    open(tool: import("../types.js").InlineTool): HTMLElement | null;
+    /**
+     * Close the panel and restore selection.
+     * No-op if no panel is open.
+     */
+    close(): void;
+    /** Discard saved range and remove any live panel without restoring. */
+    reset(): void;
+    #private;
+}
+export type ActionsPanelDeps = {
+    events: import("../types.js").IEventBus;
+    crossBlockSelection: import("../types.js").ICrossBlockSelection;
+    tooltip: import("../Tooltip.js").Tooltip;
+    updateActiveStates: () => void;
+    hideTypeSelector: () => void;
+    mutate: <T>(range: Range, operation: () => T) => T;
+    /**
+     *   Called after the panel is removed and the saved selection has been
+     *   restored. InlineToolbar uses this to flip its view back to "buttons"
+     *   and re-show the buttons panel.
+     */
+    onClosed: () => void;
+};

package/dist/core/inline-toolbar/ActionsPanel.js

@@ -0,0 +1,132 @@
+/**
+ * @typedef {Object} ActionsPanelDeps
+ * @property {import('../types').IEventBus} events
+ * @property {import('../types').ICrossBlockSelection} crossBlockSelection
+ * @property {import('../Tooltip').Tooltip} tooltip
+ * @property {() => void} updateActiveStates
+ * @property {() => void} hideTypeSelector
+ * @property {<T>(range: Range, operation: () => T) => T} mutate
+ * @property {() => void} onClosed
+ *   Called after the panel is removed and the saved selection has been
+ *   restored. InlineToolbar uses this to flip its view back to "buttons"
+ *   and re-show the buttons panel.
+ */
+
+/**
+ * Drill-down "actions" panel for inline tools that have a `renderActions`
+ * implementation (e.g. link editor, font size picker).
+ *
+ * Lifecycle:
+ *  1. `open(tool, panelHost)` — calls `tool.renderActions(ctx)`. If it
+ *     returns null, the tool wants plain `toggle()` semantics — caller
+ *     handles that branch.
+ *  2. The panel is appended to `panelHost`. The buttons panel is hidden
+ *     by the caller.
+ *  3. `close()` — removes the panel and restores the saved selection.
+ *
+ * Manages a saved `Range` so the user's selection survives focus shifts
+ * into the actions UI (input fields, buttons).
+ */
+export class ActionsPanel {
+  /** @type {ActionsPanelDeps} */
+  #deps
+
+  /** @type {Range | null} saved range before opening the panel */
+  #savedRange = null
+
+  /** @type {HTMLElement | null} */
+  #panel = null
+
+  /** @param {ActionsPanelDeps} deps */
+  constructor(deps) {
+    this.#deps = deps
+  }
+
+  /**
+   * Try to open the tool's actions panel.
+   * @param {import('../types').InlineTool} tool
+   * @returns {HTMLElement | null} the rendered panel, or null if the
+   *   tool wants `toggle()` semantics instead.
+   */
+  open(tool) {
+    if (!tool.renderActions) return null
+
+    // Save current selection range before focus moves into the panel.
+    // Never reuse a range left by a previous panel invocation.
+    this.#savedRange = null
+    const sel = window.getSelection()
+    if (sel && sel.rangeCount > 0) {
+      this.#savedRange = sel.getRangeAt(0).cloneRange()
+    }
+    if (!this.#savedRange) return null
+
+    /** @type {import('../types').InlineToolActionContext} */
+    const ctx = {
+      range: this.#savedRange,
+      mutate: (operation) => this.#deps.mutate(/** @type {Range} */ (this.#savedRange), operation),
+      restoreSelection: () => this.#restoreSelection(),
+      close: () => this.close(),
+      showTooltip: (anchor, label) => this.#deps.tooltip.show(anchor, label),
+      hideTooltip: () => this.#deps.tooltip.hide(),
+    }
+
+    const panel = tool.renderActions(ctx)
+    if (!panel) return null
+
+    this.#deps.hideTypeSelector()
+    this.#panel = panel
+    return panel
+  }
+
+  /**
+   * Close the panel and restore selection.
+   * No-op if no panel is open.
+   */
+  close() {
+    if (!this.#panel) return
+    this.#deps.tooltip.hide()
+    this.#panel.remove()
+    this.#panel = null
+
+    this.#restoreSelection()
+    this.#savedRange = null
+    this.#deps.updateActiveStates()
+    this.#deps.onClosed()
+  }
+
+  /** Discard saved range and remove any live panel without restoring. */
+  reset() {
+    if (this.#panel) {
+      this.#panel.remove()
+      this.#panel = null
+    }
+    this.#savedRange = null
+  }
+
+  #restoreSelection() {
+    if (!this.#savedRange) return
+    // If cross-block selection is active, the tool already restored it via cbs.
+    if (this.#deps.crossBlockSelection.range) return
+    const sel = window.getSelection()
+    if (!sel) return
+    const start = this.#savedRange.startContainer
+    const startElement = start.nodeType === Node.ELEMENT_NODE
+      ? /** @type {HTMLElement} */ (start)
+      : start.parentElement
+    const editingHost = startElement?.closest('[contenteditable="true"]')
+
+    // Focus may still belong to a URL/action input after the panel closes.
+    // Move it back to the editing host so the next undo/redo shortcut reaches
+    // the editor history. Focus first, then restore the exact range because
+    // focusing a contenteditable may collapse the native selection.
+    try {
+      if (editingHost instanceof globalThis.HTMLElement) {
+        editingHost.focus({ preventScroll: true })
+      }
+      sel.removeAllRanges()
+      sel.addRange(this.#savedRange)
+    } catch {
+      // Range may reference detached DOM nodes (e.g. after undo/redo).
+    }
+  }
+}

package/dist/core/inline-toolbar/InlinePositioner.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Position the inline toolbar relative to the current native selection.
+ *
+ * Tries to render above the selection; flips below when there's not enough
+ * space at the top of the viewport. Horizontally centered on the selection
+ * but clamped to stay within the editor's bounds.
+ */
+export class InlinePositioner {
+    /**
+     * @param {HTMLElement} toolbarEl
+     * @param {HTMLElement} rootEl
+     */
+    constructor(toolbarEl: HTMLElement, rootEl: HTMLElement);
+    /**
+     * Reposition the toolbar based on the current native selection.
+     * No-op if there's no live selection.
+     */
+    position(): void;
+    #private;
+}

package/dist/core/inline-toolbar/InlinePositioner.js

@@ -0,0 +1,63 @@
+/**
+ * Position the inline toolbar relative to the current native selection.
+ *
+ * Tries to render above the selection; flips below when there's not enough
+ * space at the top of the viewport. Horizontally centered on the selection
+ * but clamped to stay within the editor's bounds.
+ */
+export class InlinePositioner {
+  /** @type {HTMLElement} */
+  #toolbarEl
+
+  /** @type {HTMLElement} */
+  #rootEl
+
+  /**
+   * @param {HTMLElement} toolbarEl
+   * @param {HTMLElement} rootEl
+   */
+  constructor(toolbarEl, rootEl) {
+    this.#toolbarEl = toolbarEl
+    this.#rootEl = rootEl
+  }
+
+  /**
+   * Reposition the toolbar based on the current native selection.
+   * No-op if there's no live selection.
+   */
+  position() {
+    const sel = window.getSelection()
+    if (!sel || sel.rangeCount === 0) return
+
+    const range = sel.getRangeAt(0)
+    const rangeRect = range.getBoundingClientRect()
+    const editorRect = this.#rootEl.getBoundingClientRect()
+    const toolbarHeight = this.#toolbarEl.offsetHeight || 40
+    const toolbarWidth = this.#toolbarEl.offsetWidth || 200
+
+    // Center on selection, then clamp so toolbar stays within editor bounds.
+    const halfToolbar = toolbarWidth / 2
+    const centerLeft = rangeRect.left + rangeRect.width / 2 - editorRect.left
+    const minLeft = halfToolbar + 4
+    const maxLeft = editorRect.width - halfToolbar - 4
+    const left = Math.max(minLeft, Math.min(centerLeft, maxLeft))
+
+    // Flip below the selection if there isn't enough room above.
+    const spaceAbove = rangeRect.top
+    const needsFlip = spaceAbove < toolbarHeight + 16
+
+    if (needsFlip) {
+      const top = rangeRect.bottom - editorRect.top
+      this.#toolbarEl.style.left = `${left}px`
+      this.#toolbarEl.style.top = `${top}px`
+      this.#toolbarEl.style.transform = 'translateX(-50%)'
+      this.#toolbarEl.style.marginTop = '8px'
+    } else {
+      const top = rangeRect.top - editorRect.top
+      this.#toolbarEl.style.left = `${left}px`
+      this.#toolbarEl.style.top = `${top}px`
+      this.#toolbarEl.style.transform = 'translateX(-50%) translateY(-100%)'
+      this.#toolbarEl.style.marginTop = '-8px'
+    }
+  }
+}

package/dist/core/inline-toolbar/InlineToolbar.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Floating toolbar that appears above non-collapsed text selections.
+ *
+ * Coordinates four collaborators:
+ *  - `SelectionTracker`     — when to show/hide based on the user's selection
+ *  - `InlinePositioner`     — where to render relative to the selection rect
+ *  - `PluginControlsSlot`   — plugin-provided buttons (e.g. heading level)
+ *  - `ActionsPanel`         — drill-down panels for tools that need a UI
+ *                             (link editor, font size, etc.)
+ *
+ * The Toolbar itself owns the lifecycle, the buttons panel build, and the
+ * public API (`show`, `hide`, `openTool`, `destroy`).
+ */
+export class InlineToolbar {
+    /**
+     * @param {HTMLElement} rootEl
+     * @param {import('../types.js').ISelectionManager} selection
+     * @param {import('../types.js').IBlockManager} blocks
+     * @param {import('../types.js').IEventBus} events
+     * @param {import('../types.js').InlineTool[]} tools
+     * @param {(type: string) => import('../types.js').BlockPlugin['renderInlineControls'] | undefined} getInlineControls
+     * @param {import('../TypeSelector.js').TypeSelector} typeSelector
+     * @param {import('../types.js').ICrossBlockSelection} crossBlockSelection
+     * @param {import('../CommandDispatcher.js').CommandDispatcher} commands
+     */
+    constructor(rootEl: HTMLElement, selection: import("../types.js").ISelectionManager, blocks: import("../types.js").IBlockManager, events: import("../types.js").IEventBus, tools: import("../types.js").InlineTool[], getInlineControls: (type: string) => import("../types.js").BlockPlugin["renderInlineControls"] | undefined, typeSelector: import("../TypeSelector.js").TypeSelector, crossBlockSelection: import("../types.js").ICrossBlockSelection, commands: import("../CommandDispatcher.js").CommandDispatcher);
+    /** @returns {boolean} */
+    get isVisible(): boolean;
+    show(): void;
+    hide(): void;
+    /**
+     * Programmatically open a tool by name (e.g. from a keyboard shortcut).
+     * @param {string} toolName
+     */
+    openTool(toolName: string): void;
+    /**
+     * Returns true when the inline toolbar has an interactive UI open
+     * (actions panel or a tool dropdown like font-size).
+     * Used by KeyboardManager to yield control to the overlay.
+     * @returns {boolean}
+     */
+    hasActiveUI(): boolean;
+    destroy(): void;
+    #private;
+}