@shelamkoff/rector 1.0.0

package/dist/inline-plugins/mention/styles.css

@@ -0,0 +1,183 @@
+/*!
+ * Mention inline plugin — stylesheet.
+ *
+ * Two concerns:
+ *   1. Dropdown UI  (.oe-mention-*)  — autocomplete suggestions shown while
+ *      the user is typing after the trigger character.
+ *   2. Committed pill (.oe-ip--mention) — extends the base `.oe-ip` inline
+ *      widget defined in `core/themes/variables.css`.
+ *
+ * Colors come from the owning editor's theme CSS variables so the plugin
+ * blends with built-in and consumer-defined themes automatically.
+ */
+
+/* ── Dropdown container ─────────────────────────────────────── */
+.oe-mention-dropdown {
+  /* The element lives inside `.oe-editor` to inherit theme tokens. Fixed
+     positioning keeps the caret math in viewport coordinates and avoids
+     coupling the popup to a block's layout. */
+  position: fixed;
+  z-index: 1000;
+  box-sizing: border-box;
+  width: max-content;
+  min-width: 260px;
+  max-width: min(320px, calc(100vw - 20px));
+  max-height: min(280px, calc(100vh - 20px));
+  padding: 6px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: var(--oe-border-hover, #2a2a2a) transparent;
+  background: var(--oe-toolbar-bg, var(--oe-card, #111));
+  border: 1px solid var(--oe-toolbar-border, var(--oe-border, #1a1a1a));
+  border-radius: var(--oe-radius, 10px);
+  box-shadow: var(--oe-toolbar-shadow, 0 8px 24px rgba(0, 0, 0, 0.4));
+  font-family: var(--oe-font, inherit), sans-serif;
+  font-size: 13px;
+  color: var(--oe-text-1, #f5f5f5);
+
+  /* Hidden by default — toggled via .oe-mention-dropdown--active. */
+  opacity: 0;
+  transform: translateY(-4px);
+  visibility: hidden;
+  transition: opacity 0.12s ease, transform 0.12s ease;
+  pointer-events: none;
+}
+
+.oe-mention-dropdown--active {
+  opacity: 1;
+  transform: translateY(0);
+  visibility: visible;
+  pointer-events: auto;
+}
+
+/* Thin scrollbar. */
+.oe-mention-dropdown::-webkit-scrollbar { width: 6px; height: 6px; }
+.oe-mention-dropdown::-webkit-scrollbar-track { background: transparent; }
+.oe-mention-dropdown::-webkit-scrollbar-thumb {
+  background: var(--oe-border-hover, #2a2a2a);
+  border-radius: 6px;
+}
+
+/* ── Dropdown item ──────────────────────────────────────────── */
+.oe-mention-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 52px;
+  padding: 8px 10px;
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--oe-radius-sm, 4px);
+  color: var(--oe-text-2, #c4c4c4);
+  transition: color var(--oe-transition, 0.15s ease), background-color var(--oe-transition, 0.15s ease);
+}
+
+.oe-mention-item:hover,
+.oe-mention-item--active {
+  background: var(--oe-card-hover, #191919);
+  color: var(--oe-text-1, #f5f5f5);
+}
+
+/* ── Avatar ─────────────────────────────────────────────────── */
+.oe-mention-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+  background: var(--oe-surface-2, #141414);
+}
+
+.oe-mention-avatar-placeholder {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  background: var(--oe-accent, #4357b4);
+  color: #ffffff;
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+/* ── Info column ────────────────────────────────────────────── */
+.oe-mention-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.oe-mention-name {
+  font-weight: 500;
+  font-size: 13px;
+  color: var(--oe-text-1, #f5f5f5);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.oe-mention-details {
+  font-size: 11px;
+  color: var(--oe-text-3, #908c8c);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── No-results row ─────────────────────────────────────────── */
+.oe-mention-no-results {
+  cursor: default;
+  color: var(--oe-text-3, #908c8c);
+}
+.oe-mention-no-results:hover { background: transparent; }
+
+/* ── Loading row ────────────────────────────────────────────── */
+.oe-mention-loading {
+  color: var(--oe-text-3, #908c8c);
+  cursor: default;
+}
+.oe-mention-loading .oe-mention-item { justify-content: center; font-size: 12px; }
+.oe-mention-loading .oe-mention-item:hover { background: transparent; }
+
+/* ── Committed pill (extends base .oe-ip) ───────────────────── */
+/*
+ * Base `.oe-ip` (core/themes/variables.css) already provides the
+ * pill shape, padding, border-radius, font-size, vertical-align
+ * and cursor. The `--mention` modifier only tints it.
+ */
+.oe-ip--mention {
+  background: color-mix(in srgb, var(--oe-accent, #4f8cff) 14%, transparent);
+  color: var(--oe-accent, #4f8cff);
+  font-weight: 500;
+  font-family: inherit;  /* override mono from base .oe-ip */
+  padding: 1px 6px;
+  gap: 0;
+}
+
+.oe-ip--mention:hover {
+  background: color-mix(in srgb, var(--oe-accent, #4f8cff) 22%, transparent);
+}
+
+/*
+ * Editing state — the user has backspaced into / is typing inside a
+ * committed pill. Dropdown is open, query is being re-matched. Visual
+ * treatment mirrors mentionjs `.mention.active`: slightly bolder tint +
+ * dashed outline as an affordance for "this is in-flight, not committed".
+ */
+.oe-ip--mention--editing {
+  background: color-mix(in srgb, var(--oe-accent, #4f8cff) 24%, transparent);
+  outline: 1px dashed color-mix(in srgb, var(--oe-accent, #4f8cff) 55%, transparent);
+  outline-offset: 1px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .oe-mention-dropdown,
+  .oe-mention-item {
+    transition: none;
+  }
+}

package/dist/inline-plugins/mention/widget.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Lightweight mention widget factory — enough for the renderer (and any
+ * consumer that only needs the DOM round-trip without editor runtime).
+ *
+ * Implements the structural subset of `InlinePlugin` expected by
+ * `EditorRenderer.config.inlinePlugins` (`type` + `createWidget` + `getData`).
+ *
+ * The renderer must receive the same trigger as the editor plugin when a
+ * non-default trigger is used. The trigger is presentation configuration and
+ * is not duplicated in every serialized widget.
+ *
+ * @param {string} [trigger='@'] Exactly one Unicode code point.
+ * @returns {import('../../renderer/types.js').InlinePluginLike}
+ */
+export function createMentionWidget(trigger?: string): import("../../renderer/types.js").InlinePluginLike;
+export type MentionWidgetData = import("./index.js").MentionWidgetData;

package/dist/inline-plugins/mention/widget.js

@@ -0,0 +1,75 @@
+// @ts-check
+/**
+ * Mention widget primitives — the renderer-side half of the mention inline
+ * plugin (build + read DOM, no editor runtime).
+ *
+ * Pure DOM factories with no dependencies on the editor (TriggerManager,
+ * dropdown UI, search pipeline, i18n, styles). Used by:
+ *   - `createMentionPlugin()` — full editor plugin delegates to these.
+ *   - Document renderer — `EditorRenderer` receives this via
+ *     `RendererConfig.inlinePlugins` and uses it to rehydrate committed
+ *     mention placeholders (`{{<id>}}`) back into pills.
+ */
+
+import { generateInlineId } from '../../shared/inlineMarshal.js'
+import { normalizeTextValue } from '../../shared/textFormat.js'
+
+/** @typedef {import('./index').MentionWidgetData} MentionWidgetData */
+
+/**
+ * @param {Record<string, unknown>} data
+ * @param {string} trigger
+ * @param {string} [id] Stable widget instance id. Preserved across save /
+ *   load round-trips. Generated if not supplied (fresh commit path).
+ * @returns {HTMLElement}
+ */
+function createWidget(data, trigger, id) {
+  const value = normalizeTextValue(data.id)
+  const name = normalizeTextValue(data.name)
+  const span = document.createElement('span')
+  span.className = 'oe-ip oe-ip--mention'
+  span.setAttribute('data-inline-plugin', 'mention')
+  span.setAttribute('data-id', id || generateInlineId())
+  span.setAttribute('data-value', value)
+  span.textContent = trigger + name
+  return span
+}
+
+/**
+ * @param {HTMLElement} element
+ * @param {string} trigger
+ * @returns {MentionWidgetData}
+ */
+function getData(element, trigger) {
+  const text = element.textContent || ''
+  const name = text.startsWith(trigger) ? text.slice(trigger.length) : text
+  return {
+    id: element.dataset.value || '',
+    name,
+  }
+}
+
+/**
+ * Lightweight mention widget factory — enough for the renderer (and any
+ * consumer that only needs the DOM round-trip without editor runtime).
+ *
+ * Implements the structural subset of `InlinePlugin` expected by
+ * `EditorRenderer.config.inlinePlugins` (`type` + `createWidget` + `getData`).
+ *
+ * The renderer must receive the same trigger as the editor plugin when a
+ * non-default trigger is used. The trigger is presentation configuration and
+ * is not duplicated in every serialized widget.
+ *
+ * @param {string} [trigger='@'] Exactly one Unicode code point.
+ * @returns {import('../../renderer/types').InlinePluginLike}
+ */
+export function createMentionWidget(trigger = '@') {
+  if (typeof trigger !== 'string' || Array.from(trigger).length !== 1) {
+    throw new TypeError('Mention widget trigger must be exactly one Unicode code point')
+  }
+  return {
+    type: 'mention',
+    createWidget: (data, id) => createWidget(data, trigger, id),
+    getData: element => getData(element, trigger),
+  }
+}

package/dist/inline-tools/align.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Create the toolbar control that applies one text alignment to every block
+ * participating in the current selection.
+ *
+ * @param {{ left: string, center: string, right: string, justify: string }} labels
+ * @param {import('../types.js').ICrossBlockSelection | null} [cbs]
+ * @returns {import('../types.js').InlineTool}
+ */
+export function createAlignTool(labels: {
+    left: string;
+    center: string;
+    right: string;
+    justify: string;
+}, cbs?: import("../types.js").ICrossBlockSelection | null): import("../types.js").InlineTool;

package/dist/inline-tools/align.js

@@ -0,0 +1,120 @@
+import { el } from '../core/dom.js'
+import {
+  ICON_ALIGN_LEFT,
+  ICON_ALIGN_CENTER,
+  ICON_ALIGN_RIGHT,
+  ICON_ALIGN_JUSTIFY,
+  getBlockContentElement,
+  getSelectedBlockElements,
+  createBackButton,
+} from './utils.js'
+import { TEXT_ALIGN_TUNE_ATTRIBUTE } from '../core/constants.js'
+
+const ALIGNMENTS = [
+  { value: '',        icon: ICON_ALIGN_LEFT,    key: 'left' },
+  { value: 'center',  icon: ICON_ALIGN_CENTER,  key: 'center' },
+  { value: 'right',   icon: ICON_ALIGN_RIGHT,   key: 'right' },
+  { value: 'justify', icon: ICON_ALIGN_JUSTIFY,  key: 'justify' },
+]
+
+/**
+ * Create the toolbar control that applies one text alignment to every block
+ * participating in the current selection.
+ *
+ * @param {{ left: string, center: string, right: string, justify: string }} labels
+ * @param {import('../types').ICrossBlockSelection | null} [cbs]
+ * @returns {import('../types').InlineTool}
+ */
+export function createAlignTool(labels, cbs = null) {
+  /** @type {Record<string, { icon: string, title: string }>} */
+  const alignMap = {
+    '':        { icon: ICON_ALIGN_LEFT,    title: labels.left },
+    'left':    { icon: ICON_ALIGN_LEFT,    title: labels.left },
+    'center':  { icon: ICON_ALIGN_CENTER,  title: labels.center },
+    'right':   { icon: ICON_ALIGN_RIGHT,   title: labels.right },
+    'justify': { icon: ICON_ALIGN_JUSTIFY, title: labels.justify },
+  }
+
+  /** Get current alignment from selection */
+  function getCurrentAlign() {
+    const block = getBlockContentElement()
+    return block?.style.textAlign || ''
+  }
+
+  /** @param {HTMLElement} blockRoot @param {string} value */
+  function setAlignment(blockRoot, value) {
+    blockRoot.style.textAlign = value
+    blockRoot.setAttribute(TEXT_ALIGN_TUNE_ATTRIBUTE, value)
+  }
+
+  return {
+    type: 'align',
+    title: labels.left,
+    icon: ICON_ALIGN_LEFT,
+    tag: 'div',
+
+    /** Dynamic icon - reflects current alignment */
+    getIcon() {
+      const entry = alignMap[getCurrentAlign()] ?? alignMap['']
+      return entry?.icon ?? ICON_ALIGN_LEFT
+    },
+
+    /** Dynamic label for tooltip */
+    getTitle() {
+      const entry = alignMap[getCurrentAlign()] ?? alignMap['']
+      return entry?.title ?? labels.left
+    },
+
+    isActive() {
+      const align = getCurrentAlign()
+      return !!align && align !== 'left'
+    },
+
+    toggle() {
+      // no-op: opens renderActions
+    },
+
+    renderActions(ctx) {
+      const panel = el('div', 'oe-inline-toolbar__panel oe-inline-toolbar__align-panel')
+
+      panel.appendChild(createBackButton(ctx))
+
+      const currentAlign = getCurrentAlign()
+
+      for (const alignment of ALIGNMENTS) {
+        const info = /** @type {{ icon: string, title: string }} */ (alignMap[alignment.value] ?? alignMap[''])
+        const btn = el('button', 'oe-inline-tool', { type: 'button' })
+        btn.innerHTML = alignment.icon
+        if (currentAlign === alignment.value || (!currentAlign && alignment.value === '')) {
+          btn.classList.add('oe-inline-tool--active')
+        }
+        btn.addEventListener('mouseenter', () => ctx.showTooltip(btn, info.title))
+        btn.addEventListener('mouseleave', () => ctx.hideTooltip())
+        btn.addEventListener('mousedown', (e) => { e.preventDefault(); e.stopPropagation() })
+        btn.addEventListener('click', (e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          ctx.restoreSelection()
+
+          ctx.mutate(() => {
+            const crossBlocks = getSelectedBlockElements(cbs)
+            if (crossBlocks) {
+              for (const blockEl of crossBlocks) {
+                setAlignment(blockEl, alignment.value)
+              }
+            } else {
+              const target = getBlockContentElement()
+              if (target) {
+                setAlignment(target, alignment.value)
+              }
+            }
+          })
+          ctx.close()
+        })
+        panel.appendChild(btn)
+      }
+
+      return panel
+    },
+  }
+}

package/dist/inline-tools/bold.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Create the built-in bold formatting control (`<b>`, `Mod+B`).
+ *
+ * @param {string} label
+ * @param {import('../types.js').ICrossBlockSelection | null} [cbs]
+ * @returns {import('../types.js').InlineTool}
+ */
+export function createBoldTool(label: string, cbs?: import("../types.js").ICrossBlockSelection | null): import("../types.js").InlineTool;

package/dist/inline-tools/bold.js

@@ -0,0 +1,12 @@
+import { createSimpleInlineTool, ICON_BOLD } from './utils.js'
+
+/**
+ * Create the built-in bold formatting control (`<b>`, `Mod+B`).
+ *
+ * @param {string} label
+ * @param {import('../types').ICrossBlockSelection | null} [cbs]
+ * @returns {import('../types').InlineTool}
+ */
+export function createBoldTool(label, cbs) {
+  return createSimpleInlineTool('bold', label, ICON_BOLD, 'b', 'Mod+B', cbs ?? undefined)
+}

package/dist/inline-tools/caseTransform.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Create inline tool that toggles selected text between UPPERCASE and lowercase.
+ *
+ * @param {string} label
+ * @param {import('../types.js').ICrossBlockSelection | null} [cbs]
+ * @returns {import('../types.js').InlineTool}
+ */
+export function createCaseTransformTool(label: string, cbs?: import("../types.js").ICrossBlockSelection | null): import("../types.js").InlineTool;

package/dist/inline-tools/caseTransform.js

@@ -0,0 +1,87 @@
+import {
+  saveSelectionOffsets,
+  restoreSelectionOffsets,
+  clearCrossBlockRange,
+} from './utils.js'
+import { editableTextWalker } from '../core/textOffset.js'
+
+// Tabler: letter-case-toggle
+const ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 15.5v-7a2.5 2.5 0 0 1 5 0v7"/><path d="M6.5 12h5"/><path d="M15 15.5v-3.5a2 2 0 1 1 4 0v3.5"/></svg>'
+
+/**
+ * @param {string} text
+ * @returns {boolean}
+ */
+function isUpperCase(text) {
+  // Comparing both case mappings recognizes cased letters independently of
+  // their script without treating digits and punctuation as letters.
+  const letters = Array.from(text)
+    .filter(char => char.toLocaleLowerCase() !== char.toLocaleUpperCase())
+    .join('')
+  return letters.length > 0 && letters === letters.toUpperCase()
+}
+
+/**
+ * Create inline tool that toggles selected text between UPPERCASE and lowercase.
+ *
+ * @param {string} label
+ * @param {import('../types').ICrossBlockSelection | null} [cbs]
+ * @returns {import('../types').InlineTool}
+ */
+export function createCaseTransformTool(label, cbs = null) {
+  return {
+    type: 'caseTransform',
+    title: label,
+    icon: ICON,
+
+    isActive: () => false,
+
+    toggle(selection) {
+      const range = selection?.range
+      if (!range || range.collapsed) return
+
+      const text = range.toString()
+      if (!text) return
+
+      const toUpper = !isUpperCase(text)
+
+      const saved = saveSelectionOffsets(range)
+
+      // Collect only text nodes clipped to range boundaries
+      const ancestor = range.commonAncestorContainer
+      const walkParent = ancestor.nodeType === Node.ELEMENT_NODE
+        ? /** @type {HTMLElement} */ (ancestor)
+        : ancestor.parentElement
+      if (!walkParent) return
+
+      const walker = editableTextWalker(walkParent)
+      /** @type {{ node: Text, start: number, end: number }[]} */
+      const targets = []
+
+      while (walker.nextNode()) {
+        const node = /** @type {Text} */ (walker.currentNode)
+        if (!range.intersectsNode(node)) continue
+        let start = 0
+        let end = node.length
+        if (node === range.startContainer) start = range.startOffset
+        if (node === range.endContainer) end = range.endOffset
+        if (start >= end) continue
+        targets.push({ node, start, end })
+      }
+
+      // Transform only the clipped portions
+      for (const { node, start, end } of targets) {
+        const before = node.data.slice(0, start)
+        const middle = node.data.slice(start, end)
+        const after = node.data.slice(end)
+        node.data = before + (toUpper ? middle.toUpperCase() : middle.toLowerCase()) + after
+      }
+
+      restoreSelectionOffsets(cbs, saved)
+      if (!saved.crossOffsets && !saved.singleOffsets) {
+        clearCrossBlockRange(cbs)
+      }
+
+    },
+  }
+}

package/dist/inline-tools/clearFormatting.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Create an inline tool that removes ordinary text formatting from exactly
+ * the selected characters. Links and inline-plugin widgets are preserved.
+ * @param {string} label
+ * @param {import('../types.js').ICrossBlockSelection | null} [cbs]
+ * @returns {import('../types.js').InlineTool}
+ */
+export function createClearFormattingTool(label: string, cbs?: import("../types.js").ICrossBlockSelection | null): import("../types.js").InlineTool;

package/dist/inline-tools/clearFormatting.js

@@ -0,0 +1,74 @@
+import {
+  ICON_CLEAR,
+  restoreSelectionOffsets,
+  saveSelectionOffsets,
+  toggleTag,
+} from './utils.js'
+
+const CLEARABLE_TAGS = ['b', 'i', 's', 'code', 'mark', 'span', 'em', 'strong', 'u', 'sup', 'sub']
+
+/**
+ * Keep inline-plugin widgets intact while clearing ordinary text wrappers.
+ * @param {HTMLElement} element
+ * @returns {boolean}
+ */
+function isClearableElement(element) {
+  return !element.dataset.inlinePlugin && !element.closest('[data-inline-plugin]')
+}
+
+/**
+ * Return whether a matching wrapper affects any part of the range.
+ * @param {Range} range
+ * @param {string} tag
+ * @returns {boolean}
+ */
+function hasClearableWrapper(range, tag) {
+  const start = range.startContainer.nodeType === Node.ELEMENT_NODE
+    ? /** @type {HTMLElement} */ (range.startContainer)
+    : range.startContainer.parentElement
+  let ancestor = start
+  while (ancestor && ancestor.getAttribute('contenteditable') !== 'true') {
+    if (ancestor.matches(tag) && isClearableElement(ancestor)) return true
+    ancestor = ancestor.parentElement
+  }
+
+  const common = range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE
+    ? /** @type {HTMLElement} */ (range.commonAncestorContainer)
+    : range.commonAncestorContainer.parentElement
+  const root = common?.closest('[contenteditable="true"]') || common
+  return !!root && Array.from(root.querySelectorAll(tag)).some(element => (
+    isClearableElement(/** @type {HTMLElement} */ (element))
+      && range.intersectsNode(element)
+  ))
+}
+
+/**
+ * Create an inline tool that removes ordinary text formatting from exactly
+ * the selected characters. Links and inline-plugin widgets are preserved.
+ * @param {string} label
+ * @param {import('../types').ICrossBlockSelection | null} [cbs]
+ * @returns {import('../types').InlineTool}
+ */
+export function createClearFormattingTool(label, cbs = null) {
+  return {
+    type: 'clearFormatting',
+    title: label,
+    icon: ICON_CLEAR,
+    isActive: () => false,
+    toggle(selection) {
+      const actualRange = cbs?.range || selection?.range
+      if (!actualRange || actualRange.collapsed) return
+      const saved = saveSelectionOffsets(actualRange)
+
+      for (const tag of CLEARABLE_TAGS) {
+        restoreSelectionOffsets(cbs, saved)
+        const selection = window.getSelection()
+        const current = cbs?.range || (selection?.rangeCount ? selection.getRangeAt(0) : null)
+        if (!current || !hasClearableWrapper(current, tag)) continue
+        toggleTag(tag, current, isClearableElement)
+      }
+
+      restoreSelectionOffsets(cbs, saved)
+    },
+  }
+}

package/dist/inline-tools/code.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Create the built-in inline-code control (`<code>`, `Mod+Shift+M`).
+ *
+ * @param {string} label
+ * @param {import('../types.js').ICrossBlockSelection | null} [cbs]
+ * @returns {import('../types.js').InlineTool}
+ */
+export function createCodeTool(label: string, cbs?: import("../types.js").ICrossBlockSelection | null): import("../types.js").InlineTool;

package/dist/inline-tools/code.js

@@ -0,0 +1,12 @@
+import { createSimpleInlineTool, ICON_CODE } from './utils.js'
+
+/**
+ * Create the built-in inline-code control (`<code>`, `Mod+Shift+M`).
+ *
+ * @param {string} label
+ * @param {import('../types').ICrossBlockSelection | null} [cbs]
+ * @returns {import('../types').InlineTool}
+ */
+export function createCodeTool(label, cbs) {
+  return createSimpleInlineTool('code', label, ICON_CODE, 'code', 'Mod+Shift+M', cbs ?? undefined)
+}

package/dist/inline-tools/colorPicker.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Create the background color inline tool with a custom color picker dropdown.
+ * @param {string} label
+ * @param {import('../types.js').ICrossBlockSelection | null} [cbs]
+ * @returns {import('../types.js').InlineTool}
+ */
+export function createBgColorTool(label: string, cbs?: import("../types.js").ICrossBlockSelection | null): import("../types.js").InlineTool;