@shelamkoff/rector 1.0.0

package/dist/core/splitConvert.js

@@ -0,0 +1,190 @@
+import { closestBlock } from './dom.js'
+
+/**
+ * Shared utility for splitting a block at a selection range and converting
+ * the selected portion to a different block type.
+ *
+ * Used by both TypeSelector (inline toolbar) and BlockSettingsMenu (tune menu).
+ *
+ * @param {import('./types').IBlockManager} blocks
+ * @param {import('./types').ISelectionManager} selection
+ * @param {number} currentIndex
+ * @param {string} currentType
+ * @param {HTMLElement} contentEl
+ * @param {Range} range
+ * @param {string} targetType
+ * @param {Record<string, unknown>} [targetData]
+ * @param {boolean} [targetIsText]
+ * @returns {boolean} whether conversion actually happened
+ */
+export function splitAndConvert(blocks, selection, currentIndex, currentType, contentEl, range, targetType, targetData, targetIsText = false) {
+  const currentBlock = blocks.getBlockByIndex(currentIndex)
+  const pluginSplit = currentBlock?.plugin.splitSelection?.(contentEl, range)
+
+  if (pluginSplit) {
+    const transferable = targetIsText ? pluginSplit.selectedData : {}
+    const newData = { ...transferable, ...(targetData || {}) }
+    let insertIndex = currentIndex + 1
+
+    if (pluginSplit.remainingData) {
+      blocks.convert(currentIndex, currentType, pluginSplit.remainingData)
+    } else {
+      blocks.remove(currentIndex)
+      insertIndex = currentIndex
+    }
+
+    const newBlock = blocks.insert(targetType, newData, insertIndex)
+    blocks.setCurrentIndex(insertIndex)
+    selection.setCaretToBlock(newBlock.id, 'start')
+    newBlock.focus()
+    return true
+  }
+
+  // The generic splitter owns only a single editable root whose HTML maps to
+  // `{ text }`. A structured block can contain several editable descendants
+  // and plugin-owned controls; rewriting its wrapper.innerHTML would corrupt
+  // both its data shape and event handlers. Such plugins must describe a safe
+  // data-level split through `splitSelection()`.
+  if (contentEl.getAttribute('contenteditable') !== 'true') return false
+
+  // Extract before/selected/after content as HTML
+  const beforeRange = document.createRange()
+  beforeRange.selectNodeContents(contentEl)
+  beforeRange.setEnd(range.startContainer, range.startOffset)
+  const beforeEl = document.createElement('div')
+  beforeEl.appendChild(beforeRange.cloneContents())
+  const beforeHtml = beforeEl.innerHTML
+
+  const selectedEl = document.createElement('div')
+  selectedEl.appendChild(range.cloneContents())
+  const selectedHtml = selectedEl.innerHTML
+
+  const afterRange = document.createRange()
+  afterRange.selectNodeContents(contentEl)
+  afterRange.setStart(range.endContainer, range.endOffset)
+  const afterEl = document.createElement('div')
+  afterEl.appendChild(afterRange.cloneContents())
+  const afterHtml = afterEl.innerHTML
+
+  if (!selectedHtml) return false
+
+  const mergedData = { text: selectedHtml, ...(targetData || {}) }
+
+  if (!beforeHtml && !afterHtml) {
+    const converted = blocks.convert(currentIndex, targetType, mergedData)
+    if (converted) {
+      blocks.setCurrentIndex(currentIndex)
+      selection.setCaretToBlock(converted.id, 'start')
+      converted.focus()
+    }
+    return !!converted
+  }
+
+  if (!beforeHtml) {
+    contentEl.innerHTML = selectedHtml
+    currentBlock?.markDirty()
+    const converted = blocks.convert(currentIndex, targetType, mergedData)
+    if (afterHtml) {
+      blocks.insert(currentType, { text: afterHtml }, currentIndex + 1)
+    }
+    if (converted) {
+      blocks.setCurrentIndex(currentIndex)
+      selection.setCaretToBlock(converted.id, 'start')
+      converted.focus()
+    }
+  } else if (!afterHtml) {
+    contentEl.innerHTML = beforeHtml
+    currentBlock?.markDirty()
+    const newBlock = blocks.insert(targetType, mergedData, currentIndex + 1)
+    blocks.setCurrentIndex(currentIndex + 1)
+    selection.setCaretToBlock(newBlock.id, 'start')
+    newBlock.focus()
+  } else {
+    contentEl.innerHTML = beforeHtml
+    currentBlock?.markDirty()
+    const newBlock = blocks.insert(targetType, mergedData, currentIndex + 1)
+    blocks.insert(currentType, { text: afterHtml }, currentIndex + 2)
+    blocks.setCurrentIndex(currentIndex + 1)
+    selection.setCaretToBlock(newBlock.id, 'start')
+    newBlock.focus()
+  }
+
+  return true
+}
+
+/**
+ * Check if range starts at the beginning of contentEl.
+ * @param {HTMLElement} contentEl
+ * @param {Range} range
+ * @returns {boolean}
+ */
+export function rangeStartsAtBeginning(contentEl, range) {
+  try {
+    const full = document.createRange()
+    full.selectNodeContents(contentEl)
+    return range.compareBoundaryPoints(Range.START_TO_START, full) <= 0
+  } catch { return true }
+}
+
+/**
+ * Check if range ends at the end of contentEl.
+ * @param {HTMLElement} contentEl
+ * @param {Range} range
+ * @returns {boolean}
+ */
+export function rangeEndsAtEnd(contentEl, range) {
+  try {
+    const full = document.createRange()
+    full.selectNodeContents(contentEl)
+    return range.compareBoundaryPoints(Range.END_TO_END, full) >= 0
+  } catch { return true }
+}
+
+/**
+ * Check if entire block content is selected.
+ * Returns false on error (conservative — assume nothing is selected).
+ * @param {HTMLElement} contentEl
+ * @param {Range} range
+ * @returns {boolean}
+ */
+export function isFullBlockSelected(contentEl, range) {
+  try {
+    return rangeStartsAtBeginning(contentEl, range) && rangeEndsAtEnd(contentEl, range)
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Restore a saved selection range, including cross-block range and CSS Highlight.
+ * @param {Range | null} savedRange
+ * @param {import('./types').ICrossBlockSelection} [crossBlockSelection]
+ */
+export function restoreSelection(savedRange, crossBlockSelection) {
+  if (!savedRange) return
+  // Never clear a valid live caret in order to restore a Range whose block
+  // was deleted or replaced by a structural command. Chromium accepts some
+  // detached ranges without throwing, but leaves focus on <body>; the next
+  // Ctrl+Z then bypasses the editor and enters native DOM history.
+  if (!savedRange.startContainer.isConnected || !savedRange.endContainer.isConnected) return
+  const sel = window.getSelection()
+  if (sel) {
+    try {
+      sel.removeAllRanges()
+      sel.addRange(savedRange)
+    } catch {
+      // Range may reference detached DOM nodes
+    }
+  }
+  // Restore cross-block range if applicable
+  const startBlock = closestBlock(savedRange.startContainer)
+  const endBlock = closestBlock(savedRange.endContainer)
+  if (startBlock && endBlock && startBlock !== endBlock && crossBlockSelection) {
+    const editor = /** @type {HTMLElement | null} */ (startBlock.closest('.oe-editor'))
+    if (editor) {
+      crossBlockSelection.activate(savedRange, editor)
+    } else {
+      crossBlockSelection.set(savedRange)
+    }
+  }
+}

package/dist/core/textOffset.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Create a TreeWalker that skips text nodes inside inline plugin widgets.
+ * @param {import('./types.js').DOMNode} root
+ * @returns {TreeWalker}
+ */
+export function editableTextWalker(root: import("./types.js").DOMNode): TreeWalker;
+/**
+ * Get the first text node inside a node.
+ * @param {import('./types.js').DOMNode} node
+ * @returns {import('./types.js').DOMText | null}
+ */
+export function firstTextNode(node: import("./types.js").DOMNode): import("./types.js").DOMText | null;
+/**
+ * Get the last text node inside a node.
+ * @param {import('./types.js').DOMNode} node
+ * @returns {import('./types.js').DOMText | null}
+ */
+export function lastTextNode(node: import("./types.js").DOMNode): import("./types.js").DOMText | null;
+/**
+ * Calculate character offset from the start of a container element.
+ * Uses TreeWalker over text nodes — consistent with findNodeAtOffset().
+ * Handles both text-node and element-node target positions.
+ * @param {import('./types.js').DOMNode} container
+ * @param {import('./types.js').DOMNode} targetNode
+ * @param {number} targetOffset
+ * @returns {number}
+ */
+export function getTextOffset(container: import("./types.js").DOMNode, targetNode: import("./types.js").DOMNode, targetOffset: number): number;
+/**
+ * Restore a text selection by character offsets within an element.
+ * Walks text nodes to find the correct start/end positions.
+ * @param {HTMLElement} element
+ * @param {number} startOffset — character offset from start
+ * @param {number} endOffset — character offset for end
+ */
+export function restoreSelectionByOffsets(element: HTMLElement, startOffset: number, endOffset: number): void;
+/**
+ * Create a range from the last occurrence of `search` through the end of its
+ * text node. The lookup follows DOM text nodes instead of flattening the
+ * block to `textContent`, so inline widgets before the match cannot shift it.
+ *
+ * @param {HTMLElement} element
+ * @param {string} search
+ * @returns {Range | null}
+ */
+export function createRangeFromLastTextMatch(element: HTMLElement, search: string): Range | null;

package/dist/core/textOffset.js

@@ -0,0 +1,180 @@
+/**
+ * Create a TreeWalker that skips text nodes inside inline plugin widgets.
+ * @param {import('./types').DOMNode} root
+ * @returns {TreeWalker}
+ */
+export function editableTextWalker(root) {
+  return document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+    acceptNode(node) {
+      if (node.parentElement?.closest('[data-inline-plugin]')) return NodeFilter.FILTER_REJECT
+      return NodeFilter.FILTER_ACCEPT
+    }
+  })
+}
+
+/**
+ * Get the first text node inside a node.
+ * @param {import('./types').DOMNode} node
+ * @returns {import('./types').DOMText | null}
+ */
+export function firstTextNode(node) {
+  if (node.nodeType === Node.TEXT_NODE) return /** @type {import('./types').DOMText} */ (node)
+  const w = document.createTreeWalker(node, NodeFilter.SHOW_TEXT)
+  return /** @type {import('./types').DOMText | null} */ (w.nextNode())
+}
+
+/**
+ * Get the last text node inside a node.
+ * @param {import('./types').DOMNode} node
+ * @returns {import('./types').DOMText | null}
+ */
+export function lastTextNode(node) {
+  if (node.nodeType === Node.TEXT_NODE) return /** @type {import('./types').DOMText} */ (node)
+  const w = document.createTreeWalker(node, NodeFilter.SHOW_TEXT)
+  let last = null
+  while (w.nextNode()) last = w.currentNode
+  return /** @type {import('./types').DOMText | null} */ (last)
+}
+
+/**
+ * Calculate character offset from the start of a container element.
+ * Uses TreeWalker over text nodes — consistent with findNodeAtOffset().
+ * Handles both text-node and element-node target positions.
+ * @param {import('./types').DOMNode} container
+ * @param {import('./types').DOMNode} targetNode
+ * @param {number} targetOffset
+ * @returns {number}
+ */
+export function getTextOffset(container, targetNode, targetOffset) {
+  // Normalize element-node positions to text-node positions.
+  // When targetNode is an element, targetOffset is a child-node index.
+  if (targetNode.nodeType === Node.ELEMENT_NODE) {
+    if (targetOffset < targetNode.childNodes.length) {
+      // "Before child[targetOffset]" → resolve to (firstTextNodeInChild, 0)
+      const child = /** @type {import('./types').DOMNode} */ (targetNode.childNodes[targetOffset])
+      const first = firstTextNode(child)
+      if (first) {
+        targetNode = first
+        targetOffset = 0
+      } else {
+        return countTextBefore(container, child)
+      }
+    } else {
+      // "After last child" → resolve to (lastTextNode, endOfText)
+      const last = lastTextNode(targetNode)
+      if (last) {
+        targetNode = last
+        targetOffset = last.textContent?.length ?? 0
+      } else {
+        // No text nodes at all — return total text length up to this point
+        return container.textContent?.length ?? 0
+      }
+    }
+  }
+
+  // targetNode is now a text node — walk until we find it
+  // Use editableTextWalker to skip inline plugin widget text (consistent with setCaretToOffset)
+  const walker = editableTextWalker(container)
+  let offset = 0
+
+  while (walker.nextNode()) {
+    if (walker.currentNode === targetNode) {
+      return offset + targetOffset
+    }
+    offset += walker.currentNode.textContent?.length ?? 0
+  }
+
+  // targetNode not found — return total offset (defensive)
+  return offset
+}
+
+/**
+ * Restore a text selection by character offsets within an element.
+ * Walks text nodes to find the correct start/end positions.
+ * @param {HTMLElement} element
+ * @param {number} startOffset — character offset from start
+ * @param {number} endOffset — character offset for end
+ */
+export function restoreSelectionByOffsets(element, startOffset, endOffset) {
+  const sel = window.getSelection()
+  if (!sel) return
+  const range = document.createRange()
+  const walker = editableTextWalker(element)
+  let pos = 0
+  let startSet = false
+
+  while (walker.nextNode()) {
+    const node = walker.currentNode
+    const len = node.textContent?.length ?? 0
+    if (!startSet && pos + len >= startOffset) {
+      range.setStart(node, startOffset - pos)
+      startSet = true
+    }
+    if (startSet && pos + len >= endOffset) {
+      range.setEnd(node, endOffset - pos)
+      sel.removeAllRanges()
+      sel.addRange(range)
+      return
+    }
+    pos += len
+  }
+  // Fallback: select all content
+  range.selectNodeContents(element)
+  sel.removeAllRanges()
+  sel.addRange(range)
+}
+
+/**
+ * Create a range from the last occurrence of `search` through the end of its
+ * text node. The lookup follows DOM text nodes instead of flattening the
+ * block to `textContent`, so inline widgets before the match cannot shift it.
+ *
+ * @param {HTMLElement} element
+ * @param {string} search
+ * @returns {Range | null}
+ */
+export function createRangeFromLastTextMatch(element, search) {
+  if (!search) return null
+
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT)
+  /** @type {import('./types').DOMText | null} */
+  let matchNode = null
+  let matchOffset = -1
+
+  while (walker.nextNode()) {
+    const node = /** @type {import('./types').DOMText} */ (walker.currentNode)
+    const offset = node.data.lastIndexOf(search)
+    if (offset >= 0) {
+      matchNode = node
+      matchOffset = offset
+    }
+  }
+
+  if (!matchNode) return null
+  const range = document.createRange()
+  range.setStart(matchNode, matchOffset)
+  range.setEnd(matchNode, matchNode.length)
+  return range
+}
+
+/**
+ * Count total text content before a node in document order.
+ * @param {import('./types').DOMNode} container
+ * @param {import('./types').DOMNode} refNode
+ * @returns {number}
+ */
+function countTextBefore(container, refNode) {
+  const walker = editableTextWalker(container)
+  let offset = 0
+  while (walker.nextNode()) {
+    const textNode = walker.currentNode
+    // Stop when we reach or pass the reference node
+    if (textNode === refNode) break
+    if (refNode.nodeType === Node.ELEMENT_NODE && refNode.contains(textNode)) break
+    // Check document order: stop if textNode comes after refNode
+    const pos = textNode.compareDocumentPosition(refNode)
+    if (pos & Node.DOCUMENT_POSITION_PRECEDING) break
+    offset += textNode.textContent?.length ?? 0
+  }
+  return offset
+}

package/dist/core/themes/dark.css

@@ -0,0 +1,30 @@
+.oe-theme-dark {
+  --oe-bg: #0d0d0d;
+  --oe-surface: #0a0a0a;
+  --oe-card: #111;
+  --oe-card-hover: #191919;
+  --oe-border: #1a1a1a;
+  --oe-border-hover: #2a2a2a;
+  --oe-text-1: #f5f5f5;
+  --oe-text-2: #c4c4c4;
+  --oe-text-3: #908c8c;
+  --oe-accent: #4357b4;
+  --oe-accent-alpha: rgba(67, 87, 180, 0.15);
+  --oe-accent-text: #a78bfa;
+  --oe-surface-2: #141414;
+  --oe-surface-elevated: #1e1e24;
+  --oe-surface-hover: #1e1e24;
+  --oe-border-focus: #4357b4;
+  --oe-input-bg: #2c2c33;
+  --oe-input-bg-hover: #353540;
+  --oe-selection-bg: rgba(67, 87, 180, 0.25);
+  --oe-toolbar-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+
+
+  --oe-success: #4ade80;
+  --oe-success-alpha: rgba(74, 222, 128, 0.14);
+  --oe-danger: #f87171;
+  --oe-danger-light: #fca5a5;
+  --oe-danger-alpha: rgba(248, 113, 113, 0.14);
+  --oe-text-on-accent: #fff;
+}

package/dist/core/themes/light.css

@@ -0,0 +1,33 @@
+.oe-theme-light {
+  --oe-bg: #fff;
+  --oe-surface: #fafafa;
+  --oe-card: #fff;
+  --oe-card-hover: #f5f5f5;
+  --oe-border: #e5e5e5;
+  --oe-border-hover: #d4d4d4;
+  --oe-text-1: #1a1a1a;
+  --oe-text-2: #525252;
+  --oe-text-3: #a3a3a3;
+  --oe-accent: #4357b4;
+  --oe-accent-alpha: rgba(67, 87, 180, 0.1);
+  --oe-accent-text: #4357b4;
+  --oe-surface-2: #f0f0f0;
+  --oe-surface-elevated: #fff;
+  --oe-surface-hover: #f0f0f0;
+  --oe-border-focus: #4357b4;
+  --oe-input-bg: #f0f0f0;
+  --oe-input-bg-hover: #e8e8e8;
+  --oe-selection-bg: rgba(67, 87, 180, 0.2);
+  --oe-toolbar-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+
+
+  --oe-success: #16a34a;
+  --oe-success-alpha: rgba(22, 163, 74, 0.12);
+  --oe-danger: #dc2626;
+  --oe-danger-light: #ef4444;
+  --oe-danger-alpha: rgba(220, 38, 38, 0.1);
+  --oe-text-on-accent: #fff;
+
+  --oe-code-inline-bg: #eef0f8;
+  --oe-code-inline-text: #4357b4;
+}