2020-11-16 06:25:25 +08:00
|
|
|
import { Extension } from '@tiptap/core'
|
2020-11-10 16:21:47 +08:00
|
|
|
import { Plugin, PluginKey } from 'prosemirror-state'
|
2020-08-21 23:32:47 +08:00
|
|
|
import { DecorationSet, Decoration } from 'prosemirror-view'
|
|
|
|
|
2020-09-10 00:55:19 +08:00
|
|
|
export interface FocusOptions {
|
2020-08-22 02:33:57 +08:00
|
|
|
className: string,
|
2021-02-05 19:03:17 +08:00
|
|
|
start: 'deep' | 'shallow',
|
|
|
|
levels: 'all' | number,
|
2020-08-22 02:33:57 +08:00
|
|
|
}
|
|
|
|
|
2020-12-08 04:32:50 +08:00
|
|
|
export const FocusClasses = Extension.create({
|
2020-12-02 16:44:46 +08:00
|
|
|
name: 'focus',
|
|
|
|
|
2020-10-22 18:34:49 +08:00
|
|
|
defaultOptions: <FocusOptions>{
|
2020-09-09 05:44:45 +08:00
|
|
|
className: 'has-focus',
|
2021-02-05 19:03:17 +08:00
|
|
|
start: 'deep',
|
|
|
|
levels: 'all',
|
2020-10-22 18:34:49 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
addProseMirrorPlugins() {
|
|
|
|
return [
|
|
|
|
new Plugin({
|
2020-11-10 16:21:47 +08:00
|
|
|
key: new PluginKey('focus'),
|
2020-10-22 18:34:49 +08:00
|
|
|
props: {
|
|
|
|
decorations: ({ doc, selection }) => {
|
|
|
|
const { isEditable, isFocused } = this.editor
|
|
|
|
const { anchor } = selection
|
|
|
|
const decorations: Decoration[] = []
|
|
|
|
|
|
|
|
if (!isEditable || !isFocused) {
|
|
|
|
return DecorationSet.create(doc, [])
|
2020-08-21 23:32:47 +08:00
|
|
|
}
|
|
|
|
|
2021-02-05 19:03:17 +08:00
|
|
|
// Maximum Levels
|
|
|
|
let maxLevels = 0
|
|
|
|
if (this.options.start === 'deep') {
|
|
|
|
doc.descendants((node, pos) => {
|
|
|
|
if (node.isText) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
const isCurrent = anchor >= pos && anchor <= (pos + node.nodeSize)
|
|
|
|
if (!isCurrent) {
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
|
|
|
|
maxLevels += 1
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
// Loop through current
|
|
|
|
let currentLevel = 0
|
2020-10-22 18:34:49 +08:00
|
|
|
doc.descendants((node, pos) => {
|
2021-02-05 19:03:17 +08:00
|
|
|
if (node.isText) {
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
|
|
|
|
const isCurrent = anchor >= pos && anchor <= (pos + node.nodeSize)
|
|
|
|
if (!isCurrent) {
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
|
|
|
|
currentLevel += 1
|
|
|
|
|
2021-02-05 19:12:16 +08:00
|
|
|
const outOfScope = typeof this.options.levels === 'number'
|
2021-02-05 19:03:17 +08:00
|
|
|
&& (
|
2021-02-05 19:12:16 +08:00
|
|
|
(this.options.start === 'deep' && maxLevels - currentLevel > this.options.levels)
|
|
|
|
|| (this.options.start === 'shallow' && currentLevel > this.options.levels)
|
2021-02-05 19:03:17 +08:00
|
|
|
)
|
|
|
|
|
2021-02-05 19:12:16 +08:00
|
|
|
if (outOfScope) {
|
2021-02-05 19:03:17 +08:00
|
|
|
return this.options.start === 'deep'
|
2020-10-22 18:34:49 +08:00
|
|
|
}
|
|
|
|
|
2021-02-05 19:03:17 +08:00
|
|
|
decorations.push(Decoration.node(pos, pos + node.nodeSize, {
|
|
|
|
class: this.options.className,
|
|
|
|
}))
|
2020-10-22 18:34:49 +08:00
|
|
|
})
|
2020-08-21 23:32:47 +08:00
|
|
|
|
2020-10-22 18:34:49 +08:00
|
|
|
return DecorationSet.create(doc, decorations)
|
|
|
|
},
|
2020-08-21 23:32:47 +08:00
|
|
|
},
|
2020-10-22 18:34:49 +08:00
|
|
|
}),
|
|
|
|
]
|
|
|
|
},
|
|
|
|
})
|
2020-10-23 04:40:40 +08:00
|
|
|
|
2020-11-16 23:58:30 +08:00
|
|
|
declare module '@tiptap/core' {
|
|
|
|
interface AllExtensions {
|
|
|
|
FocusClasses: typeof FocusClasses,
|
2020-10-23 04:40:40 +08:00
|
|
|
}
|
|
|
|
}
|