ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

improve the focus extension, add starting point and levels

Browse Source
This commit is contained in:
Hans Pagel
2021-02-05 12:03:17 +01:00
parent 6276643e6b
commit 7c5cc61cec
1 changed files with 48 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
packages/extension-focus/src/focus.ts
View File

@@ -4,7 +4,8 @@ import { DecorationSet, Decoration } from 'prosemirror-view'
export interface FocusOptions {
className: string,
nested: boolean,
start: 'deep' | 'shallow',
levels: 'all' | number,
}
export const FocusClasses = Extension.create({
@@ -12,7 +13,8 @@ export const FocusClasses = Extension.create({
defaultOptions: <FocusOptions>{
className: 'has-focus',
nested: false,
start: 'deep',
levels: 'all',
},
addProseMirrorPlugins() {
@@ -29,17 +31,53 @@ export const FocusClasses = Extension.create({
return DecorationSet.create(doc, [])
}
// Maximum Levels
let maxLevels = 0
if (this.options.start === 'deep') {
doc.descendants((node, pos) => {
const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize)
if (hasAnchor && !node.isText) {
const decoration = Decoration.node(pos, pos + node.nodeSize, {
class: this.options.className,
})
decorations.push(decoration)
if (node.isText) {
return
}
return this.options.nested
const isCurrent = anchor >= pos && anchor <= (pos + node.nodeSize)
if (!isCurrent) {
return false
}
maxLevels += 1
})
}
// Loop through current
let currentLevel = 0
doc.descendants((node, pos) => {
if (node.isText) {
return false
}
const isCurrent = anchor >= pos && anchor <= (pos + node.nodeSize)
if (!isCurrent) {
return false
}
currentLevel += 1
const isOutOfScope = typeof this.options.levels === 'number'
&& (
this.options.start === 'shallow'
? currentLevel > this.options.levels
: maxLevels - currentLevel > this.options.levels
)
console.log(node.type.name, currentLevel, maxLevels, this.options.levels)
if (isOutOfScope) {
return this.options.start === 'deep'
}
decorations.push(Decoration.node(pos, pos + node.nodeSize, {
class: this.options.className,
}))
})
return DecorationSet.create(doc, decorations)