@tiptap/extensions 3.24.0 → 3.26.0

package/dist/placeholder/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/placeholder/constants.ts","../../src/placeholder/placeholder.ts","../../src/placeholder/plugins/PlaceholderPlugin.ts","../../src/placeholder/utils/buildPlaceholderDecorations.ts","../../src/placeholder/utils/createPlaceholderDecoration.ts","../../src/placeholder/utils/preparePlaceholderAttribute.ts","../../src/placeholder/utils/findScrollParent.ts","../../src/placeholder/utils/getViewportBoundaryPositions.ts","../../src/placeholder/utils/viewportTracking.ts"],"sourcesContent":["import { PluginKey } from '@tiptap/pm/state'\n\nimport type { ViewportState } from './types.js'\n\n/** The default data attribute label */\nexport const DEFAULT_DATA_ATTRIBUTE = 'placeholder'\n\n/** The plugin key used to store and read the placeholder viewport state */\nexport const PLUGIN_KEY = new PluginKey<ViewportState>('tiptap__placeholder')\n\n/**\n * Extra pixels added above and below the visible viewport when computing the\n * range of nodes to decorate. Decorating slightly beyond the fold means a\n * node already has its placeholder before it scrolls into view, which hides\n * the latency introduced by the throttled viewport recompute.\n */\nexport const VIEWPORT_OVERSCAN_PX = 200\n","import { Extension } from '@tiptap/core'\n\nimport { DEFAULT_DATA_ATTRIBUTE } from './constants.js'\nimport { createPlaceholderPlugin } from './plugins/PlaceholderPlugin.js'\nimport type { PlaceholderOptions } from './types.js'\n\n/**\n * This extension allows you to add a placeholder to your editor.\n * A placeholder is a text that appears when the editor or a node is empty.\n * @see https://www.tiptap.dev/api/extensions/placeholder\n */\nexport const Placeholder = Extension.create<PlaceholderOptions>({\n  name: 'placeholder',\n\n  addOptions() {\n    return {\n      emptyEditorClass: 'is-editor-empty',\n      emptyNodeClass: 'is-empty',\n      dataAttribute: DEFAULT_DATA_ATTRIBUTE,\n      placeholder: 'Write something …',\n      showOnlyWhenEditable: true,\n      showOnlyCurrent: true,\n      includeChildren: false,\n    }\n  },\n\n  addProseMirrorPlugins() {\n    return [createPlaceholderPlugin({ editor: this.editor, options: this.options })]\n  },\n})\n","import type { Editor } from '@tiptap/core'\nimport { Plugin } from '@tiptap/pm/state'\n\nimport { DEFAULT_DATA_ATTRIBUTE, PLUGIN_KEY } from '../constants.js'\nimport type { PlaceholderOptions } from '../types.js'\nimport { buildPlaceholderDecorations } from '../utils/buildPlaceholderDecorations.js'\nimport { preparePlaceholderAttribute } from '../utils/preparePlaceholderAttribute.js'\nimport { createViewportPluginView, viewportPluginState } from '../utils/viewportTracking.js'\n\nexport type CreatePluginOptions = {\n  editor: Editor\n  options: PlaceholderOptions\n}\n\n/**\n * Creates the ProseMirror plugin that renders placeholder decorations.\n * @param options.editor - The editor instance.\n * @param options.options - The resolved placeholder options.\n * @returns The configured placeholder plugin.\n */\nexport function createPlaceholderPlugin({ editor, options }: CreatePluginOptions) {\n  const dataAttribute = options.dataAttribute\n    ? `data-${preparePlaceholderAttribute(options.dataAttribute)}`\n    : `data-${DEFAULT_DATA_ATTRIBUTE}`\n\n  return new Plugin({\n    key: PLUGIN_KEY,\n    state: viewportPluginState,\n    view: createViewportPluginView,\n    props: {\n      decorations: ({ doc, selection }) =>\n        buildPlaceholderDecorations({ editor, options, dataAttribute, doc, selection }),\n    },\n  })\n}\n","import type { Editor } from '@tiptap/core'\nimport { isNodeEmpty } from '@tiptap/core'\nimport type { Node } from '@tiptap/pm/model'\nimport type { Selection } from '@tiptap/pm/state'\nimport type { Decoration } from '@tiptap/pm/view'\nimport { DecorationSet } from '@tiptap/pm/view'\n\nimport { PLUGIN_KEY } from '../constants.js'\nimport type { PlaceholderOptions } from '../types.js'\nimport { createPlaceholderDecoration } from './createPlaceholderDecoration.js'\n\n/**\n * Builds the placeholder decorations for the current document state.\n * @param options.editor - The editor instance.\n * @param options.options - The resolved placeholder options.\n * @param options.dataAttribute - The prepared `data-*` attribute name.\n * @param options.doc - The current document node.\n * @param options.selection - The current selection.\n * @returns A decoration set, or `null` when no placeholders should be shown.\n */\nexport function buildPlaceholderDecorations({\n  editor,\n  options,\n  dataAttribute,\n  doc,\n  selection,\n}: {\n  editor: Editor\n  options: PlaceholderOptions\n  dataAttribute: string\n  doc: Node\n  selection: Selection\n}): DecorationSet | null {\n  const active = editor.isEditable || !options.showOnlyWhenEditable\n\n  if (!active) {\n    return null\n  }\n\n  const { anchor } = selection\n  const decorations: Decoration[] = []\n  const isEmptyDoc = editor.isEmpty\n\n  const classes = {\n    emptyEditor: options.emptyEditorClass,\n    emptyNode: options.emptyNodeClass,\n  }\n\n  const useResolvedPath = options.showOnlyCurrent && !options.includeChildren\n\n  if (useResolvedPath) {\n    const resolved = doc.resolve(anchor)\n\n    // When the selection spans the whole document (e.g. an `AllSelection`\n    // after Cmd+A), the anchor resolves to the document level (depth 0). In\n    // that case the relevant textblock is the node directly after the\n    // position rather than an ancestor. otherwise the placeholder would\n    // disappear after selecting all and deleting.\n    const node = resolved.depth > 0 ? resolved.node(1) : resolved.nodeAfter\n    const nodeStart = resolved.depth > 0 ? resolved.before(1) : anchor\n\n    if (node && node.type.isTextblock && isNodeEmpty(node)) {\n      const hasAnchor = anchor >= nodeStart && anchor <= nodeStart + node.nodeSize\n\n      decorations.push(\n        createPlaceholderDecoration({\n          editor,\n          isEmptyDoc,\n          dataAttribute,\n          hasAnchor,\n          placeholder: options.placeholder,\n          classes,\n          node,\n          pos: nodeStart,\n        }),\n      )\n    }\n  } else {\n    const pluginState = PLUGIN_KEY.getState(editor.state)\n    const from = pluginState?.topPos ?? 0\n    const to = pluginState?.bottomPos ?? doc.content.size\n\n    doc.nodesBetween(from, to, (node, pos) => {\n      const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize\n      const isEmpty = !node.isLeaf && isNodeEmpty(node)\n\n      if (!node.type.isTextblock) {\n        return options.includeChildren\n      }\n\n      if ((hasAnchor || !options.showOnlyCurrent) && isEmpty) {\n        decorations.push(\n          createPlaceholderDecoration({\n            editor,\n            isEmptyDoc,\n            dataAttribute,\n            hasAnchor,\n            placeholder: options.placeholder,\n            classes,\n            node,\n            pos,\n          }),\n        )\n      }\n\n      return options.includeChildren\n    })\n  }\n\n  return DecorationSet.create(doc, decorations)\n}\n","import type { Editor } from '@tiptap/core'\nimport type { Node } from '@tiptap/pm/model'\nimport { Decoration } from '@tiptap/pm/view'\n\nimport type { PlaceholderOptions } from '../types.js'\n\n/**\n * Creates a ProseMirror node decoration that applies a placeholder\n * CSS class and data attribute to an empty node.\n * @param options.editor - The editor instance\n * @param options.pos - The position of the node in the document\n * @param options.node - The ProseMirror node\n * @param options.isEmptyDoc - Whether the entire document is empty\n * @param options.hasAnchor - Whether the selection anchor is within the node\n * @param options.dataAttribute - The data attribute name (e.g. `data-placeholder`)\n * @param options.classes - CSS classes for empty nodes and the empty editor\n * @param options.placeholder - The placeholder text or a function that returns it\n * @returns A ProseMirror node decoration with placeholder classes and data attribute\n */\nexport function createPlaceholderDecoration(options: {\n  editor: Editor\n  pos: number\n  node: Node\n  isEmptyDoc: boolean\n  hasAnchor: boolean\n  dataAttribute: string\n  classes: {\n    emptyEditor: PlaceholderOptions['emptyEditorClass']\n    emptyNode: PlaceholderOptions['emptyNodeClass']\n  }\n  placeholder: PlaceholderOptions['placeholder']\n}) {\n  const {\n    editor,\n    placeholder,\n    dataAttribute,\n    pos,\n    node,\n    isEmptyDoc,\n    hasAnchor,\n    classes: { emptyNode, emptyEditor },\n  } = options\n  const classes = [emptyNode]\n\n  if (isEmptyDoc) {\n    classes.push(emptyEditor)\n  }\n\n  return Decoration.node(pos, pos + node.nodeSize, {\n    class: classes.join(' '),\n    [dataAttribute]:\n      typeof placeholder === 'function'\n        ? placeholder({\n            editor,\n            node,\n            pos,\n            hasAnchor,\n          })\n        : placeholder,\n  })\n}\n","/**\n * Prepares the placeholder attribute by ensuring it is properly formatted.\n * @param attr - The placeholder attribute string.\n * @returns The prepared placeholder attribute string.\n */\nexport function preparePlaceholderAttribute(attr: string): string {\n  return (\n    attr\n      // replace whitespace with dashes\n      .replace(/\\s+/g, '-')\n      // replace non-alphanumeric  characters\n      // or special chars like $, %, &, etc.\n      // but not dashes\n      .replace(/[^a-zA-Z0-9-]/g, '')\n      // and replace any numeric character at the start\n      .replace(/^[0-9-]+/, '')\n      // and finally replace any stray, leading dashes\n      .replace(/^-+/, '')\n      .toLowerCase()\n  )\n}\n","/**\n * Checks if an element is scrollable by testing its overflow properties.\n * Elements with `overflow: hidden` or `overflow: clip` are intentionally\n * excluded — they clip content but don't emit scroll events.\n */\nfunction isScrollable(el: HTMLElement): boolean {\n  const style = getComputedStyle(el)\n  const overflow = `${style.overflow} ${style.overflowY} ${style.overflowX}`\n\n  return /auto|scroll|overlay/.test(overflow)\n}\n\nexport function findScrollParent(element: HTMLElement): HTMLElement | Window {\n  let el: HTMLElement | null = element\n\n  while (el) {\n    if (isScrollable(el)) {\n      return el\n    }\n\n    // Check if we hit a Shadow DOM boundary. If so, jump to the shadow host\n    // and continue traversing the light DOM.\n    const parent = el.parentElement\n    if (!parent) {\n      const root = el.getRootNode()\n      if (root instanceof ShadowRoot) {\n        el = root.host as HTMLElement\n        continue\n      }\n\n      return window\n    }\n\n    el = parent\n  }\n\n  return window\n}\n","import type { Node } from '@tiptap/pm/model'\nimport type { EditorView } from '@tiptap/pm/view'\n\nimport { VIEWPORT_OVERSCAN_PX } from '../constants.js'\n\nfunction getContainerRect(container: HTMLElement | Window): { top: number; bottom: number } {\n  if (container === window) {\n    return { top: 0, bottom: window.innerHeight }\n  }\n\n  return (container as HTMLElement).getBoundingClientRect()\n}\n\nexport function getViewportBoundaryPositions({\n  doc,\n  view,\n  scrollContainer,\n}: {\n  doc: Node\n  view: EditorView\n  scrollContainer?: HTMLElement | Window\n}) {\n  const editorRect = view.dom.getBoundingClientRect()\n  const containerRect = scrollContainer\n    ? getContainerRect(scrollContainer)\n    : { top: 0, bottom: window.innerHeight }\n\n  const visibleTop = Math.max(editorRect.top, containerRect.top) - VIEWPORT_OVERSCAN_PX\n  const visibleBottom = Math.min(editorRect.bottom, containerRect.bottom) + VIEWPORT_OVERSCAN_PX\n\n  if (visibleTop >= visibleBottom) {\n    // Editor is not visible — fall back to full document range\n    return { top: 0, bottom: doc.content.size }\n  }\n\n  // Pick the x-coordinate based on text direction. In LTR the content\n  // starts at the left edge; in RTL it starts at the right edge.\n  // Clamp to ensure the coordinate stays inside the editor bounds.\n  const isRTL = getComputedStyle(view.dom).direction === 'rtl'\n  const x = isRTL ? Math.max(editorRect.right - 2, editorRect.left + 2) : editorRect.left + 2\n\n  const topPos = view.posAtCoords({ left: x, top: visibleTop + 2 })\n  const bottomPos = view.posAtCoords({ left: x, top: visibleBottom - 2 })\n\n  return {\n    top: topPos ? topPos.pos : 0,\n    bottom: bottomPos ? bottomPos.pos : doc.content.size,\n  }\n}\n","import type { EditorState, PluginView, StateField, Transaction } from '@tiptap/pm/state'\nimport type { EditorView } from '@tiptap/pm/view'\n\nimport { PLUGIN_KEY } from '../constants.js'\nimport type { ViewportState } from '../types.js'\nimport { findScrollParent } from './findScrollParent.js'\nimport { getViewportBoundaryPositions } from './getViewportBoundaryPositions.js'\n\n/**\n * The plugin `state` config that tracks the visible viewport boundaries so the\n * decoration callback only scans the nodes currently on screen.\n */\nexport const viewportPluginState: StateField<ViewportState> = {\n  /**\n   * Initialises the viewport state with no known positions.\n   * @returns The initial viewport state.\n   */\n  init(): ViewportState {\n    return { topPos: null, bottomPos: null }\n  },\n\n  /**\n   * Updates the viewport state from incoming transactions.\n   * @param tr - The transaction being applied.\n   * @param prev - The previous viewport state.\n   * @returns The next viewport state.\n   */\n  apply(tr: Transaction, prev: ViewportState): ViewportState {\n    const meta = tr.getMeta(PLUGIN_KEY) as\n      | { positions?: { top: number; bottom: number } }\n      | undefined\n\n    if (meta?.positions) {\n      return { topPos: meta.positions.top, bottomPos: meta.positions.bottom }\n    }\n\n    if (!tr.docChanged) {\n      return prev\n    }\n\n    // Preserve last known viewport positions across transactions.\n    // Without this, every keystroke resets back to a full document\n    // scan, defeating the viewport optimisation.\n    // Only map when we have actual positions — null means \"no viewport\n    // info yet\" and should stay null to fall back to full doc scan.\n    return {\n      topPos: prev.topPos !== null ? tr.mapping.map(prev.topPos) : null,\n      bottomPos: prev.bottomPos !== null ? tr.mapping.map(prev.bottomPos) : null,\n    }\n  },\n}\n\n/**\n * Creates the plugin `view` that recomputes the visible viewport on scroll and\n * document size changes, dispatching the result into the plugin state.\n * @param view - The editor view the plugin is attached to.\n * @returns A plugin view with `update` and `destroy` handlers.\n */\nexport function createViewportPluginView(view: EditorView): PluginView {\n  const scrollContainer = findScrollParent(view.dom)\n\n  const computeAndDispatch = () => {\n    const positions = getViewportBoundaryPositions({\n      view,\n      doc: view.state.doc,\n      scrollContainer,\n    })\n\n    const prev = PLUGIN_KEY.getState(view.state)\n    if (prev?.topPos === positions.top && prev?.bottomPos === positions.bottom) {\n      return\n    }\n\n    const tr = view.state.tr.setMeta(PLUGIN_KEY, { positions })\n    view.dispatch(tr)\n  }\n\n  // rAF-based scheduler with interval guard (150ms → ~6–7 Hz) used by\n  // scroll events and update(). The overscan margin hides the extra\n  // latency. When the guard blocks, the callback reschedules itself so\n  // the trailing position is always captured.\n  let frame: number | null = null\n  let lastCompute = 0\n  const MIN_SCROLL_INTERVAL = 150\n\n  const scheduleFrame = () => {\n    if (frame !== null) return\n    frame = requestAnimationFrame(() => {\n      frame = null\n      const now = performance.now()\n      if (now - lastCompute >= MIN_SCROLL_INTERVAL) {\n        lastCompute = now\n        computeAndDispatch()\n      } else {\n        scheduleFrame()\n      }\n    })\n  }\n\n  scrollContainer.addEventListener('scroll', scheduleFrame, { passive: true })\n\n  // Fire once to populate initial viewport\n  computeAndDispatch()\n\n  return {\n    update(_view: EditorView, prevState: EditorState) {\n      if (view.state.doc.content.size !== prevState.doc.content.size) {\n        scheduleFrame()\n      }\n    },\n    destroy: () => {\n      if (frame !== null) {\n        cancelAnimationFrame(frame)\n      }\n      scrollContainer.removeEventListener('scroll', scheduleFrame)\n    },\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/placeholder/constants.ts","../../src/placeholder/placeholder.ts","../../src/placeholder/plugins/PlaceholderPlugin.ts","../../src/placeholder/utils/buildPlaceholderDecorations.ts","../../src/placeholder/utils/createPlaceholderDecoration.ts","../../src/placeholder/utils/preparePlaceholderAttribute.ts","../../src/placeholder/utils/findScrollParent.ts","../../src/placeholder/utils/getViewportBoundaryPositions.ts","../../src/placeholder/utils/viewportTracking.ts"],"sourcesContent":["import { PluginKey } from '@tiptap/pm/state'\n\nimport type { ViewportState } from './types.js'\n\n/** The default data attribute label */\nexport const DEFAULT_DATA_ATTRIBUTE = 'placeholder'\n\n/** The plugin key used to store and read the placeholder viewport state */\nexport const PLUGIN_KEY = new PluginKey<ViewportState>('tiptap__placeholder')\n\n/**\n * Extra pixels added above and below the visible viewport when computing the\n * range of nodes to decorate. Decorating slightly beyond the fold means a\n * node already has its placeholder before it scrolls into view, which hides\n * the latency introduced by the throttled viewport recompute.\n */\nexport const VIEWPORT_OVERSCAN_PX = 200\n","import { Extension } from '@tiptap/core'\n\nimport { DEFAULT_DATA_ATTRIBUTE } from './constants.js'\nimport { createPlaceholderPlugin } from './plugins/PlaceholderPlugin.js'\nimport type { PlaceholderOptions } from './types.js'\n\n/**\n * This extension allows you to add a placeholder to your editor.\n * A placeholder is a text that appears when the editor or a node is empty.\n * @see https://www.tiptap.dev/api/extensions/placeholder\n */\nexport const Placeholder = Extension.create<PlaceholderOptions>({\n  name: 'placeholder',\n\n  addOptions() {\n    return {\n      emptyEditorClass: 'is-editor-empty',\n      emptyNodeClass: 'is-empty',\n      dataAttribute: DEFAULT_DATA_ATTRIBUTE,\n      placeholder: 'Write something …',\n      showOnlyWhenEditable: true,\n      showOnlyCurrent: true,\n      includeChildren: false,\n    }\n  },\n\n  addProseMirrorPlugins() {\n    return [createPlaceholderPlugin({ editor: this.editor, options: this.options })]\n  },\n})\n","import type { Editor } from '@tiptap/core'\nimport { Plugin } from '@tiptap/pm/state'\n\nimport { DEFAULT_DATA_ATTRIBUTE, PLUGIN_KEY } from '../constants.js'\nimport type { PlaceholderOptions } from '../types.js'\nimport { buildPlaceholderDecorations } from '../utils/buildPlaceholderDecorations.js'\nimport { preparePlaceholderAttribute } from '../utils/preparePlaceholderAttribute.js'\nimport { createViewportPluginView, viewportPluginState } from '../utils/viewportTracking.js'\n\nexport type CreatePluginOptions = {\n  editor: Editor\n  options: PlaceholderOptions\n}\n\n/**\n * Creates the ProseMirror plugin that renders placeholder decorations.\n * @param options.editor - The editor instance.\n * @param options.options - The resolved placeholder options.\n * @returns The configured placeholder plugin.\n */\nexport function createPlaceholderPlugin({ editor, options }: CreatePluginOptions) {\n  const dataAttribute = options.dataAttribute\n    ? `data-${preparePlaceholderAttribute(options.dataAttribute)}`\n    : `data-${DEFAULT_DATA_ATTRIBUTE}`\n\n  return new Plugin({\n    key: PLUGIN_KEY,\n    state: viewportPluginState,\n    view: createViewportPluginView,\n    props: {\n      decorations: ({ doc, selection }) =>\n        buildPlaceholderDecorations({ editor, options, dataAttribute, doc, selection }),\n    },\n  })\n}\n","import type { Editor } from '@tiptap/core'\nimport { isNodeEmpty } from '@tiptap/core'\nimport type { Node } from '@tiptap/pm/model'\nimport type { Selection } from '@tiptap/pm/state'\nimport type { Decoration } from '@tiptap/pm/view'\nimport { DecorationSet } from '@tiptap/pm/view'\n\nimport { PLUGIN_KEY } from '../constants.js'\nimport type { PlaceholderOptions } from '../types.js'\nimport { createPlaceholderDecoration } from './createPlaceholderDecoration.js'\n\nfunction resolveEmptyNodeClass(\n  emptyNodeClass: PlaceholderOptions['emptyNodeClass'],\n  props: { editor: Editor; node: Node; pos: number; hasAnchor: boolean },\n): string {\n  return typeof emptyNodeClass === 'function' ? emptyNodeClass(props) : emptyNodeClass\n}\n\n/**\n * Builds the placeholder decorations for the current document state.\n * @param options.editor - The editor instance.\n * @param options.options - The resolved placeholder options.\n * @param options.dataAttribute - The prepared `data-*` attribute name.\n * @param options.doc - The current document node.\n * @param options.selection - The current selection.\n * @returns A decoration set, or `null` when no placeholders should be shown.\n */\nexport function buildPlaceholderDecorations({\n  editor,\n  options,\n  dataAttribute,\n  doc,\n  selection,\n}: {\n  editor: Editor\n  options: PlaceholderOptions\n  dataAttribute: string\n  doc: Node\n  selection: Selection\n}): DecorationSet | null {\n  const active = editor.isEditable || !options.showOnlyWhenEditable\n\n  if (!active) {\n    return null\n  }\n\n  const { anchor } = selection\n  const decorations: Decoration[] = []\n  const isEmptyDoc = editor.isEmpty\n\n  const useResolvedPath = options.showOnlyCurrent && !options.includeChildren\n\n  if (useResolvedPath) {\n    const resolved = doc.resolve(anchor)\n\n    // When the selection spans the whole document (e.g. an `AllSelection`\n    // after Cmd+A), the anchor resolves to the document level (depth 0). In\n    // that case the relevant textblock is the node directly after the\n    // position rather than an ancestor. otherwise the placeholder would\n    // disappear after selecting all and deleting.\n    const node = resolved.depth > 0 ? resolved.node(1) : resolved.nodeAfter\n    const nodeStart = resolved.depth > 0 ? resolved.before(1) : anchor\n\n    if (node && node.type.isTextblock && isNodeEmpty(node)) {\n      const hasAnchor = anchor >= nodeStart && anchor <= nodeStart + node.nodeSize\n\n      decorations.push(\n        createPlaceholderDecoration({\n          editor,\n          isEmptyDoc,\n          dataAttribute,\n          hasAnchor,\n          placeholder: options.placeholder,\n          classes: {\n            emptyEditor: options.emptyEditorClass,\n            emptyNode: resolveEmptyNodeClass(options.emptyNodeClass, {\n              editor,\n              node,\n              pos: nodeStart,\n              hasAnchor,\n            }),\n          },\n          node,\n          pos: nodeStart,\n        }),\n      )\n    }\n  } else {\n    const pluginState = PLUGIN_KEY.getState(editor.state)\n    const from = pluginState?.topPos ?? 0\n    const to = pluginState?.bottomPos ?? doc.content.size\n\n    doc.nodesBetween(from, to, (node, pos) => {\n      const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize\n      const isEmpty = !node.isLeaf && isNodeEmpty(node)\n\n      if (!node.type.isTextblock) {\n        return options.includeChildren\n      }\n\n      if ((hasAnchor || !options.showOnlyCurrent) && isEmpty) {\n        decorations.push(\n          createPlaceholderDecoration({\n            editor,\n            isEmptyDoc,\n            dataAttribute,\n            hasAnchor,\n            placeholder: options.placeholder,\n            classes: {\n              emptyEditor: options.emptyEditorClass,\n              emptyNode: resolveEmptyNodeClass(options.emptyNodeClass, {\n                editor,\n                node,\n                pos,\n                hasAnchor,\n              }),\n            },\n            node,\n            pos,\n          }),\n        )\n      }\n\n      return options.includeChildren\n    })\n  }\n\n  return DecorationSet.create(doc, decorations)\n}\n","import type { Editor } from '@tiptap/core'\nimport type { Node } from '@tiptap/pm/model'\nimport { Decoration } from '@tiptap/pm/view'\n\nimport type { PlaceholderOptions } from '../types.js'\n\n/**\n * Creates a ProseMirror node decoration that applies a placeholder\n * CSS class and data attribute to an empty node.\n * @param options.editor - The editor instance\n * @param options.pos - The position of the node in the document\n * @param options.node - The ProseMirror node\n * @param options.isEmptyDoc - Whether the entire document is empty\n * @param options.hasAnchor - Whether the selection anchor is within the node\n * @param options.dataAttribute - The data attribute name (e.g. `data-placeholder`)\n * @param options.classes - CSS classes for empty nodes and the empty editor\n * @param options.placeholder - The placeholder text or a function that returns it\n * @returns A ProseMirror node decoration with placeholder classes and data attribute\n */\nexport function createPlaceholderDecoration(options: {\n  editor: Editor\n  pos: number\n  node: Node\n  isEmptyDoc: boolean\n  hasAnchor: boolean\n  dataAttribute: string\n  classes: {\n    emptyEditor: PlaceholderOptions['emptyEditorClass']\n    emptyNode: string\n  }\n  placeholder: PlaceholderOptions['placeholder']\n}) {\n  const {\n    editor,\n    placeholder,\n    dataAttribute,\n    pos,\n    node,\n    isEmptyDoc,\n    hasAnchor,\n    classes: { emptyNode, emptyEditor },\n  } = options\n  const classes = [emptyNode]\n\n  if (isEmptyDoc) {\n    classes.push(emptyEditor)\n  }\n\n  return Decoration.node(pos, pos + node.nodeSize, {\n    class: classes.join(' '),\n    [dataAttribute]:\n      typeof placeholder === 'function'\n        ? placeholder({\n            editor,\n            node,\n            pos,\n            hasAnchor,\n          })\n        : placeholder,\n  })\n}\n","/**\n * Prepares the placeholder attribute by ensuring it is properly formatted.\n * @param attr - The placeholder attribute string.\n * @returns The prepared placeholder attribute string.\n */\nexport function preparePlaceholderAttribute(attr: string): string {\n  return (\n    attr\n      // replace whitespace with dashes\n      .replace(/\\s+/g, '-')\n      // replace non-alphanumeric  characters\n      // or special chars like $, %, &, etc.\n      // but not dashes\n      .replace(/[^a-zA-Z0-9-]/g, '')\n      // and replace any numeric character at the start\n      .replace(/^[0-9-]+/, '')\n      // and finally replace any stray, leading dashes\n      .replace(/^-+/, '')\n      .toLowerCase()\n  )\n}\n","/**\n * Checks if an element is scrollable by testing its overflow properties.\n * Elements with `overflow: hidden` or `overflow: clip` are intentionally\n * excluded — they clip content but don't emit scroll events.\n */\nfunction isScrollable(el: HTMLElement): boolean {\n  const style = getComputedStyle(el)\n  const overflow = `${style.overflow} ${style.overflowY} ${style.overflowX}`\n\n  return /auto|scroll|overlay/.test(overflow)\n}\n\nexport function findScrollParent(element: HTMLElement): HTMLElement | Window {\n  let el: HTMLElement | null = element\n\n  while (el) {\n    if (isScrollable(el)) {\n      return el\n    }\n\n    // Check if we hit a Shadow DOM boundary. If so, jump to the shadow host\n    // and continue traversing the light DOM.\n    const parent = el.parentElement\n    if (!parent) {\n      const root = el.getRootNode()\n      if (root instanceof ShadowRoot) {\n        el = root.host as HTMLElement\n        continue\n      }\n\n      return window\n    }\n\n    el = parent\n  }\n\n  return window\n}\n","import type { Node } from '@tiptap/pm/model'\nimport type { EditorView } from '@tiptap/pm/view'\n\nimport { VIEWPORT_OVERSCAN_PX } from '../constants.js'\n\nfunction getContainerRect(container: HTMLElement | Window): { top: number; bottom: number } {\n  if (container === window) {\n    return { top: 0, bottom: window.innerHeight }\n  }\n\n  return (container as HTMLElement).getBoundingClientRect()\n}\n\nexport function getViewportBoundaryPositions({\n  doc,\n  view,\n  scrollContainer,\n}: {\n  doc: Node\n  view: EditorView\n  scrollContainer?: HTMLElement | Window\n}) {\n  const editorRect = view.dom.getBoundingClientRect()\n  const containerRect = scrollContainer\n    ? getContainerRect(scrollContainer)\n    : { top: 0, bottom: window.innerHeight }\n\n  const visibleTop = Math.max(editorRect.top, containerRect.top) - VIEWPORT_OVERSCAN_PX\n  const visibleBottom = Math.min(editorRect.bottom, containerRect.bottom) + VIEWPORT_OVERSCAN_PX\n\n  if (visibleTop >= visibleBottom) {\n    // Editor is not visible — fall back to full document range\n    return { top: 0, bottom: doc.content.size }\n  }\n\n  // Pick the x-coordinate based on text direction. In LTR the content\n  // starts at the left edge; in RTL it starts at the right edge.\n  // Clamp to ensure the coordinate stays inside the editor bounds.\n  const isRTL = getComputedStyle(view.dom).direction === 'rtl'\n  const x = isRTL ? Math.max(editorRect.right - 2, editorRect.left + 2) : editorRect.left + 2\n\n  const topPos = view.posAtCoords({ left: x, top: visibleTop + 2 })\n  const bottomPos = view.posAtCoords({ left: x, top: visibleBottom - 2 })\n\n  return {\n    top: topPos ? topPos.pos : 0,\n    bottom: bottomPos ? bottomPos.pos : doc.content.size,\n  }\n}\n","import type { EditorState, PluginView, StateField, Transaction } from '@tiptap/pm/state'\nimport type { EditorView } from '@tiptap/pm/view'\n\nimport { PLUGIN_KEY } from '../constants.js'\nimport type { ViewportState } from '../types.js'\nimport { findScrollParent } from './findScrollParent.js'\nimport { getViewportBoundaryPositions } from './getViewportBoundaryPositions.js'\n\n/**\n * The plugin `state` config that tracks the visible viewport boundaries so the\n * decoration callback only scans the nodes currently on screen.\n */\nexport const viewportPluginState: StateField<ViewportState> = {\n  /**\n   * Initialises the viewport state with no known positions.\n   * @returns The initial viewport state.\n   */\n  init(): ViewportState {\n    return { topPos: null, bottomPos: null }\n  },\n\n  /**\n   * Updates the viewport state from incoming transactions.\n   * @param tr - The transaction being applied.\n   * @param prev - The previous viewport state.\n   * @returns The next viewport state.\n   */\n  apply(tr: Transaction, prev: ViewportState): ViewportState {\n    const meta = tr.getMeta(PLUGIN_KEY) as\n      | { positions?: { top: number; bottom: number } }\n      | undefined\n\n    if (meta?.positions) {\n      return { topPos: meta.positions.top, bottomPos: meta.positions.bottom }\n    }\n\n    if (!tr.docChanged) {\n      return prev\n    }\n\n    // Preserve last known viewport positions across transactions.\n    // Without this, every keystroke resets back to a full document\n    // scan, defeating the viewport optimisation.\n    // Only map when we have actual positions — null means \"no viewport\n    // info yet\" and should stay null to fall back to full doc scan.\n    return {\n      topPos: prev.topPos !== null ? tr.mapping.map(prev.topPos) : null,\n      bottomPos: prev.bottomPos !== null ? tr.mapping.map(prev.bottomPos) : null,\n    }\n  },\n}\n\n/**\n * Creates the plugin `view` that recomputes the visible viewport on scroll and\n * document size changes, dispatching the result into the plugin state.\n * @param view - The editor view the plugin is attached to.\n * @returns A plugin view with `update` and `destroy` handlers.\n */\nexport function createViewportPluginView(view: EditorView): PluginView {\n  const scrollContainer = findScrollParent(view.dom)\n\n  const computeAndDispatch = () => {\n    const positions = getViewportBoundaryPositions({\n      view,\n      doc: view.state.doc,\n      scrollContainer,\n    })\n\n    const prev = PLUGIN_KEY.getState(view.state)\n    if (prev?.topPos === positions.top && prev?.bottomPos === positions.bottom) {\n      return\n    }\n\n    const tr = view.state.tr.setMeta(PLUGIN_KEY, { positions })\n    view.dispatch(tr)\n  }\n\n  // rAF-based scheduler with interval guard (150ms → ~6–7 Hz) used by\n  // scroll events and update(). The overscan margin hides the extra\n  // latency. When the guard blocks, the callback reschedules itself so\n  // the trailing position is always captured.\n  let frame: number | null = null\n  let lastCompute = 0\n  const MIN_SCROLL_INTERVAL = 150\n\n  const scheduleFrame = () => {\n    if (frame !== null) return\n    frame = requestAnimationFrame(() => {\n      frame = null\n      const now = performance.now()\n      if (now - lastCompute >= MIN_SCROLL_INTERVAL) {\n        lastCompute = now\n        computeAndDispatch()\n      } else {\n        scheduleFrame()\n      }\n    })\n  }\n\n  scrollContainer.addEventListener('scroll', scheduleFrame, { passive: true })\n\n  // Fire once to populate initial viewport\n  computeAndDispatch()\n\n  return {\n    update(_view: EditorView, prevState: EditorState) {\n      if (view.state.doc.content.size !== prevState.doc.content.size) {\n        scheduleFrame()\n      }\n    },\n    destroy: () => {\n      if (frame !== null) {\n        cancelAnimationFrame(frame)\n      }\n      scrollContainer.removeEventListener('scroll', scheduleFrame)\n    },\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/selection/index.cjs

@@ -28,6 +28,13 @@ module.exports = __toCommonJS(index_exports);
 var import_core = require("@tiptap/core");
 var import_state = require("@tiptap/pm/state");
 var import_view = require("@tiptap/pm/view");
+var selectionStyle = `.ProseMirror:not(.ProseMirror-focused) *::selection {
+  background: transparent;
+}
+
+.ProseMirror:not(.ProseMirror-focused) *::-moz-selection {
+  background: transparent;
+}`;
 var Selection = import_core.Extension.create({
   name: "selection",
   addOptions() {
@@ -37,6 +44,9 @@ var Selection = import_core.Extension.create({
   },
   addProseMirrorPlugins() {
     const { editor, options } = this;
+    if (editor.options.injectCSS && typeof document !== "undefined") {
+      (0, import_core.createStyleTag)(selectionStyle, editor.options.injectNonce, "selection");
+    }
     return [
       new import_state.Plugin({
         key: new import_state.PluginKey("selection"),

package/dist/selection/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/selection/index.ts","../../src/selection/selection.ts"],"sourcesContent":["export * from './selection.js'\n","import { Extension, isNodeSelection } from '@tiptap/core'\nimport { Plugin, PluginKey } from '@tiptap/pm/state'\nimport { Decoration, DecorationSet } from '@tiptap/pm/view'\n\nexport type SelectionOptions = {\n  /**\n   * The class name that should be added to the selected text.\n   * @default 'selection'\n   * @example 'is-selected'\n   */\n  className: string\n}\n\n/**\n * This extension allows you to add a class to the selected text.\n * @see https://www.tiptap.dev/api/extensions/selection\n */\nexport const Selection = Extension.create<SelectionOptions>({\n  name: 'selection',\n\n  addOptions() {\n    return {\n      className: 'selection',\n    }\n  },\n\n  addProseMirrorPlugins() {\n    const { editor, options } = this\n\n    return [\n      new Plugin({\n        key: new PluginKey('selection'),\n        props: {\n          decorations(state) {\n            if (\n              state.selection.empty ||\n              editor.isFocused ||\n              !editor.isEditable ||\n              isNodeSelection(state.selection) ||\n              editor.view.dragging\n            ) {\n              return null\n            }\n\n            return DecorationSet.create(state.doc, [\n              Decoration.inline(state.selection.from, state.selection.to, {\n                class: options.className,\n              }),\n            ])\n          },\n        },\n      }),\n    ]\n  },\n})\n\nexport default Selection\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,kBAA2C;AAC3C,mBAAkC;AAClC,kBAA0C;AAenC,IAAM,YAAY,sBAAU,OAAyB;AAAA,EAC1D,MAAM;AAAA,EAEN,aAAa;AACX,WAAO;AAAA,MACL,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EAEA,wBAAwB;AACtB,UAAM,EAAE,QAAQ,QAAQ,IAAI;AAE5B,WAAO;AAAA,MACL,IAAI,oBAAO;AAAA,QACT,KAAK,IAAI,uBAAU,WAAW;AAAA,QAC9B,OAAO;AAAA,UACL,YAAY,OAAO;AACjB,gBACE,MAAM,UAAU,SAChB,OAAO,aACP,CAAC,OAAO,kBACR,6BAAgB,MAAM,SAAS,KAC/B,OAAO,KAAK,UACZ;AACA,qBAAO;AAAA,YACT;AAEA,mBAAO,0BAAc,OAAO,MAAM,KAAK;AAAA,cACrC,uBAAW,OAAO,MAAM,UAAU,MAAM,MAAM,UAAU,IAAI;AAAA,gBAC1D,OAAO,QAAQ;AAAA,cACjB,CAAC;AAAA,YACH,CAAC;AAAA,UACH;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACF,CAAC;","names":[]}
+{"version":3,"sources":["../../src/selection/index.ts","../../src/selection/selection.ts"],"sourcesContent":["export * from './selection.js'\n","import { createStyleTag, Extension, isNodeSelection } from '@tiptap/core'\nimport { Plugin, PluginKey } from '@tiptap/pm/state'\nimport { Decoration, DecorationSet } from '@tiptap/pm/view'\n\nconst selectionStyle = `.ProseMirror:not(.ProseMirror-focused) *::selection {\n  background: transparent;\n}\n\n.ProseMirror:not(.ProseMirror-focused) *::-moz-selection {\n  background: transparent;\n}`\n\nexport type SelectionOptions = {\n  /**\n   * The class name that should be added to the selected text.\n   * @default 'selection'\n   * @example 'is-selected'\n   */\n  className: string\n}\n\n/**\n * This extension allows you to add a class to the selected text.\n * @see https://www.tiptap.dev/api/extensions/selection\n */\nexport const Selection = Extension.create<SelectionOptions>({\n  name: 'selection',\n\n  addOptions() {\n    return {\n      className: 'selection',\n    }\n  },\n\n  addProseMirrorPlugins() {\n    const { editor, options } = this\n\n    if (editor.options.injectCSS && typeof document !== 'undefined') {\n      createStyleTag(selectionStyle, editor.options.injectNonce, 'selection')\n    }\n\n    return [\n      new Plugin({\n        key: new PluginKey('selection'),\n        props: {\n          decorations(state) {\n            if (\n              state.selection.empty ||\n              editor.isFocused ||\n              !editor.isEditable ||\n              isNodeSelection(state.selection) ||\n              editor.view.dragging\n            ) {\n              return null\n            }\n\n            return DecorationSet.create(state.doc, [\n              Decoration.inline(state.selection.from, state.selection.to, {\n                class: options.className,\n              }),\n            ])\n          },\n        },\n      }),\n    ]\n  },\n})\n\nexport default Selection\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,kBAA2D;AAC3D,mBAAkC;AAClC,kBAA0C;AAE1C,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBhB,IAAM,YAAY,sBAAU,OAAyB;AAAA,EAC1D,MAAM;AAAA,EAEN,aAAa;AACX,WAAO;AAAA,MACL,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EAEA,wBAAwB;AACtB,UAAM,EAAE,QAAQ,QAAQ,IAAI;AAE5B,QAAI,OAAO,QAAQ,aAAa,OAAO,aAAa,aAAa;AAC/D,sCAAe,gBAAgB,OAAO,QAAQ,aAAa,WAAW;AAAA,IACxE;AAEA,WAAO;AAAA,MACL,IAAI,oBAAO;AAAA,QACT,KAAK,IAAI,uBAAU,WAAW;AAAA,QAC9B,OAAO;AAAA,UACL,YAAY,OAAO;AACjB,gBACE,MAAM,UAAU,SAChB,OAAO,aACP,CAAC,OAAO,kBACR,6BAAgB,MAAM,SAAS,KAC/B,OAAO,KAAK,UACZ;AACA,qBAAO;AAAA,YACT;AAEA,mBAAO,0BAAc,OAAO,MAAM,KAAK;AAAA,cACrC,uBAAW,OAAO,MAAM,UAAU,MAAM,MAAM,UAAU,IAAI;AAAA,gBAC1D,OAAO,QAAQ;AAAA,cACjB,CAAC;AAAA,YACH,CAAC;AAAA,UACH;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACF,CAAC;","names":[]}

package/dist/selection/index.js

@@ -1,7 +1,14 @@
 // src/selection/selection.ts
-import { Extension, isNodeSelection } from "@tiptap/core";
+import { createStyleTag, Extension, isNodeSelection } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
+var selectionStyle = `.ProseMirror:not(.ProseMirror-focused) *::selection {
+  background: transparent;
+}
+
+.ProseMirror:not(.ProseMirror-focused) *::-moz-selection {
+  background: transparent;
+}`;
 var Selection = Extension.create({
   name: "selection",
   addOptions() {
@@ -11,6 +18,9 @@ var Selection = Extension.create({
   },
   addProseMirrorPlugins() {
     const { editor, options } = this;
+    if (editor.options.injectCSS && typeof document !== "undefined") {
+      createStyleTag(selectionStyle, editor.options.injectNonce, "selection");
+    }
     return [
       new Plugin({
         key: new PluginKey("selection"),

package/dist/selection/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/selection/selection.ts"],"sourcesContent":["import { Extension, isNodeSelection } from '@tiptap/core'\nimport { Plugin, PluginKey } from '@tiptap/pm/state'\nimport { Decoration, DecorationSet } from '@tiptap/pm/view'\n\nexport type SelectionOptions = {\n  /**\n   * The class name that should be added to the selected text.\n   * @default 'selection'\n   * @example 'is-selected'\n   */\n  className: string\n}\n\n/**\n * This extension allows you to add a class to the selected text.\n * @see https://www.tiptap.dev/api/extensions/selection\n */\nexport const Selection = Extension.create<SelectionOptions>({\n  name: 'selection',\n\n  addOptions() {\n    return {\n      className: 'selection',\n    }\n  },\n\n  addProseMirrorPlugins() {\n    const { editor, options } = this\n\n    return [\n      new Plugin({\n        key: new PluginKey('selection'),\n        props: {\n          decorations(state) {\n            if (\n              state.selection.empty ||\n              editor.isFocused ||\n              !editor.isEditable ||\n              isNodeSelection(state.selection) ||\n              editor.view.dragging\n            ) {\n              return null\n            }\n\n            return DecorationSet.create(state.doc, [\n              Decoration.inline(state.selection.from, state.selection.to, {\n                class: options.className,\n              }),\n            ])\n          },\n        },\n      }),\n    ]\n  },\n})\n\nexport default Selection\n"],"mappings":";AAAA,SAAS,WAAW,uBAAuB;AAC3C,SAAS,QAAQ,iBAAiB;AAClC,SAAS,YAAY,qBAAqB;AAenC,IAAM,YAAY,UAAU,OAAyB;AAAA,EAC1D,MAAM;AAAA,EAEN,aAAa;AACX,WAAO;AAAA,MACL,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EAEA,wBAAwB;AACtB,UAAM,EAAE,QAAQ,QAAQ,IAAI;AAE5B,WAAO;AAAA,MACL,IAAI,OAAO;AAAA,QACT,KAAK,IAAI,UAAU,WAAW;AAAA,QAC9B,OAAO;AAAA,UACL,YAAY,OAAO;AACjB,gBACE,MAAM,UAAU,SAChB,OAAO,aACP,CAAC,OAAO,cACR,gBAAgB,MAAM,SAAS,KAC/B,OAAO,KAAK,UACZ;AACA,qBAAO;AAAA,YACT;AAEA,mBAAO,cAAc,OAAO,MAAM,KAAK;AAAA,cACrC,WAAW,OAAO,MAAM,UAAU,MAAM,MAAM,UAAU,IAAI;AAAA,gBAC1D,OAAO,QAAQ;AAAA,cACjB,CAAC;AAAA,YACH,CAAC;AAAA,UACH;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACF,CAAC;","names":[]}
+{"version":3,"sources":["../../src/selection/selection.ts"],"sourcesContent":["import { createStyleTag, Extension, isNodeSelection } from '@tiptap/core'\nimport { Plugin, PluginKey } from '@tiptap/pm/state'\nimport { Decoration, DecorationSet } from '@tiptap/pm/view'\n\nconst selectionStyle = `.ProseMirror:not(.ProseMirror-focused) *::selection {\n  background: transparent;\n}\n\n.ProseMirror:not(.ProseMirror-focused) *::-moz-selection {\n  background: transparent;\n}`\n\nexport type SelectionOptions = {\n  /**\n   * The class name that should be added to the selected text.\n   * @default 'selection'\n   * @example 'is-selected'\n   */\n  className: string\n}\n\n/**\n * This extension allows you to add a class to the selected text.\n * @see https://www.tiptap.dev/api/extensions/selection\n */\nexport const Selection = Extension.create<SelectionOptions>({\n  name: 'selection',\n\n  addOptions() {\n    return {\n      className: 'selection',\n    }\n  },\n\n  addProseMirrorPlugins() {\n    const { editor, options } = this\n\n    if (editor.options.injectCSS && typeof document !== 'undefined') {\n      createStyleTag(selectionStyle, editor.options.injectNonce, 'selection')\n    }\n\n    return [\n      new Plugin({\n        key: new PluginKey('selection'),\n        props: {\n          decorations(state) {\n            if (\n              state.selection.empty ||\n              editor.isFocused ||\n              !editor.isEditable ||\n              isNodeSelection(state.selection) ||\n              editor.view.dragging\n            ) {\n              return null\n            }\n\n            return DecorationSet.create(state.doc, [\n              Decoration.inline(state.selection.from, state.selection.to, {\n                class: options.className,\n              }),\n            ])\n          },\n        },\n      }),\n    ]\n  },\n})\n\nexport default Selection\n"],"mappings":";AAAA,SAAS,gBAAgB,WAAW,uBAAuB;AAC3D,SAAS,QAAQ,iBAAiB;AAClC,SAAS,YAAY,qBAAqB;AAE1C,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBhB,IAAM,YAAY,UAAU,OAAyB;AAAA,EAC1D,MAAM;AAAA,EAEN,aAAa;AACX,WAAO;AAAA,MACL,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EAEA,wBAAwB;AACtB,UAAM,EAAE,QAAQ,QAAQ,IAAI;AAE5B,QAAI,OAAO,QAAQ,aAAa,OAAO,aAAa,aAAa;AAC/D,qBAAe,gBAAgB,OAAO,QAAQ,aAAa,WAAW;AAAA,IACxE;AAEA,WAAO;AAAA,MACL,IAAI,OAAO;AAAA,QACT,KAAK,IAAI,UAAU,WAAW;AAAA,QAC9B,OAAO;AAAA,UACL,YAAY,OAAO;AACjB,gBACE,MAAM,UAAU,SAChB,OAAO,aACP,CAAC,OAAO,cACR,gBAAgB,MAAM,SAAS,KAC/B,OAAO,KAAK,UACZ;AACA,qBAAO;AAAA,YACT;AAEA,mBAAO,cAAc,OAAO,MAAM,KAAK;AAAA,cACrC,WAAW,OAAO,MAAM,UAAU,MAAM,MAAM,UAAU,IAAI;AAAA,gBAC1D,OAAO,QAAQ;AAAA,cACjB,CAAC;AAAA,YACH,CAAC;AAAA,UACH;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACF,CAAC;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiptap/extensions",
-  "version": "3.24.0",
+  "version": "3.26.0",
   "description": "various extensions for tiptap",
   "keywords": [
     "tiptap",
@@ -100,12 +100,12 @@
     }
   },
   "devDependencies": {
-    "@tiptap/core": "^3.24.0",
-    "@tiptap/pm": "^3.24.0"
+    "@tiptap/pm": "^3.26.0",
+    "@tiptap/core": "^3.26.0"
   },
   "peerDependencies": {
-    "@tiptap/core": "3.24.0",
-    "@tiptap/pm": "3.24.0"
+    "@tiptap/core": "3.26.0",
+    "@tiptap/pm": "3.26.0"
   },
   "scripts": {
     "build": "tsup"

package/src/placeholder/types.ts

@@ -20,9 +20,18 @@ export interface PlaceholderOptions {
 
   /**
    * **The class name for empty nodes**
+   *
+   * You can use a function to return a dynamic class name or a string.
    * @default 'is-empty'
    */
-  emptyNodeClass: string
+  emptyNodeClass:
+    | ((EmptyNodeClassProps: {
+        editor: Editor
+        node: ProsemirrorNode
+        pos: number
+        hasAnchor: boolean
+      }) => string)
+    | string
 
   /**
    * **The data-attribute used for the placeholder label**

package/src/placeholder/utils/buildPlaceholderDecorations.ts

@@ -9,6 +9,13 @@ import { PLUGIN_KEY } from '../constants.js'
 import type { PlaceholderOptions } from '../types.js'
 import { createPlaceholderDecoration } from './createPlaceholderDecoration.js'
 
+function resolveEmptyNodeClass(
+  emptyNodeClass: PlaceholderOptions['emptyNodeClass'],
+  props: { editor: Editor; node: Node; pos: number; hasAnchor: boolean },
+): string {
+  return typeof emptyNodeClass === 'function' ? emptyNodeClass(props) : emptyNodeClass
+}
+
 /**
  * Builds the placeholder decorations for the current document state.
  * @param options.editor - The editor instance.
@@ -41,11 +48,6 @@ export function buildPlaceholderDecorations({
   const decorations: Decoration[] = []
   const isEmptyDoc = editor.isEmpty
 
-  const classes = {
-    emptyEditor: options.emptyEditorClass,
-    emptyNode: options.emptyNodeClass,
-  }
-
   const useResolvedPath = options.showOnlyCurrent && !options.includeChildren
 
   if (useResolvedPath) {
@@ -69,7 +71,15 @@ export function buildPlaceholderDecorations({
           dataAttribute,
           hasAnchor,
           placeholder: options.placeholder,
-          classes,
+          classes: {
+            emptyEditor: options.emptyEditorClass,
+            emptyNode: resolveEmptyNodeClass(options.emptyNodeClass, {
+              editor,
+              node,
+              pos: nodeStart,
+              hasAnchor,
+            }),
+          },
           node,
           pos: nodeStart,
         }),
@@ -96,7 +106,15 @@ export function buildPlaceholderDecorations({
             dataAttribute,
             hasAnchor,
             placeholder: options.placeholder,
-            classes,
+            classes: {
+              emptyEditor: options.emptyEditorClass,
+              emptyNode: resolveEmptyNodeClass(options.emptyNodeClass, {
+                editor,
+                node,
+                pos,
+                hasAnchor,
+              }),
+            },
             node,
             pos,
           }),

package/src/placeholder/utils/createPlaceholderDecoration.ts

@@ -26,7 +26,7 @@ export function createPlaceholderDecoration(options: {
   dataAttribute: string
   classes: {
     emptyEditor: PlaceholderOptions['emptyEditorClass']
-    emptyNode: PlaceholderOptions['emptyNodeClass']
+    emptyNode: string
   }
   placeholder: PlaceholderOptions['placeholder']
 }) {

package/src/selection/selection.ts

@@ -1,7 +1,15 @@
-import { Extension, isNodeSelection } from '@tiptap/core'
+import { createStyleTag, Extension, isNodeSelection } from '@tiptap/core'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import { Decoration, DecorationSet } from '@tiptap/pm/view'
 
+const selectionStyle = `.ProseMirror:not(.ProseMirror-focused) *::selection {
+  background: transparent;
+}
+
+.ProseMirror:not(.ProseMirror-focused) *::-moz-selection {
+  background: transparent;
+}`
+
 export type SelectionOptions = {
   /**
    * The class name that should be added to the selected text.
@@ -27,6 +35,10 @@ export const Selection = Extension.create<SelectionOptions>({
   addProseMirrorPlugins() {
     const { editor, options } = this
 
+    if (editor.options.injectCSS && typeof document !== 'undefined') {
+      createStyleTag(selectionStyle, editor.options.injectNonce, 'selection')
+    }
+
     return [
       new Plugin({
         key: new PluginKey('selection'),