diff --git a/docs/src/docPages/api/extensions/focus.md b/docs/src/docPages/api/extensions/focus.md index 68a834b5..edd67dde 100644 --- a/docs/src/docPages/api/extensions/focus.md +++ b/docs/src/docPages/api/extensions/focus.md @@ -16,10 +16,10 @@ yarn add @tiptap/extension-focus ``` ## Settings -| Option | Type | Default | Description | -| --------- | --------- | ------------- | ------------------------------------------------------ | -| className | `String` | `'has-focus'` | The class that is applied to the focused element. | -| nested | `Boolean` | `false` | When enabled nested elements get the focus class, too. | +| Option | Type | Default | Description | +| --------- | -------- | ------------- | ---------------------------------------------------------------------------- | +| className | `String` | `'has-focus'` | The class that is applied to the focused element. | +| mode | `String` | `'all'` | Apply the class to `'all'`, the `'shallowest'` or the `'deepest'` node only. | ## Source code [packages/extension-focus/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-focus/) diff --git a/packages/extension-focus/src/focus.ts b/packages/extension-focus/src/focus.ts index 57499760..56d8d5fa 100644 --- a/packages/extension-focus/src/focus.ts +++ b/packages/extension-focus/src/focus.ts @@ -4,9 +4,7 @@ import { DecorationSet, Decoration } from 'prosemirror-view' export interface FocusOptions { className: string, - start: 'deep' | 'shallow', - exact: boolean, - // levels: 'all' | number, + mode: 'all' | 'deepest' | 'shallowest', } export const FocusClasses = Extension.create({ @@ -14,9 +12,7 @@ export const FocusClasses = Extension.create({ defaultOptions: { className: 'has-focus', - start: 'deep', - exact: false, - // levels: 'all', + mode: 'all', }, addProseMirrorPlugins() { @@ -35,7 +31,7 @@ export const FocusClasses = Extension.create({ // Maximum Levels let maxLevels = 0 - if (this.options.start === 'deep') { + if (this.options.mode === 'deepest') { doc.descendants((node, pos) => { if (node.isText) { return @@ -64,19 +60,11 @@ export const FocusClasses = Extension.create({ currentLevel += 1 - // const outOfScope = typeof this.options.levels === 'number' - // && ( - // (this.options.start === 'deep' && maxLevels - currentLevel > this.options.levels) - // || (this.options.start === 'shallow' && currentLevel > this.options.levels) - // ) - const outOfScope = this.options.exact - && ( - (this.options.start === 'deep' && maxLevels - currentLevel !== 0) - || (this.options.start === 'shallow' && currentLevel > 1) - ) + const outOfScope = (this.options.mode === 'deepest' && maxLevels - currentLevel > 0) + || (this.options.mode === 'shallowest' && currentLevel > 1) if (outOfScope) { - return this.options.start === 'deep' + return this.options.mode === 'deepest' } decorations.push(Decoration.node(pos, pos + node.nodeSize, {