From 7c5cc61cecf58f33c87a667b0e60c1580cf13fd6 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Fri, 5 Feb 2021 12:03:17 +0100 Subject: [PATCH 1/3] improve the focus extension, add starting point and levels --- packages/extension-focus/src/focus.ts | 58 ++++++++++++++++++++++----- 1 file changed, 48 insertions(+), 10 deletions(-) diff --git a/packages/extension-focus/src/focus.ts b/packages/extension-focus/src/focus.ts index 3c120c70..665792f6 100644 --- a/packages/extension-focus/src/focus.ts +++ b/packages/extension-focus/src/focus.ts @@ -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: { className: 'has-focus', - nested: false, + start: 'deep', + levels: 'all', }, addProseMirrorPlugins() { @@ -29,17 +31,53 @@ export const FocusClasses = Extension.create({ return DecorationSet.create(doc, []) } - doc.descendants((node, pos) => { - const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize) + // Maximum Levels + let maxLevels = 0 + if (this.options.start === 'deep') { + doc.descendants((node, pos) => { + if (node.isText) { + return + } - if (hasAnchor && !node.isText) { - const decoration = Decoration.node(pos, pos + node.nodeSize, { - class: this.options.className, - }) - decorations.push(decoration) + 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 } - return this.options.nested + 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) From 68ea1819793f03ed9927fcdd27aa9a311e556471 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Fri, 5 Feb 2021 12:12:16 +0100 Subject: [PATCH 2/3] refactoring --- packages/extension-focus/src/focus.ts | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/extension-focus/src/focus.ts b/packages/extension-focus/src/focus.ts index 665792f6..e24c26f2 100644 --- a/packages/extension-focus/src/focus.ts +++ b/packages/extension-focus/src/focus.ts @@ -62,16 +62,13 @@ export const FocusClasses = Extension.create({ currentLevel += 1 - const isOutOfScope = typeof this.options.levels === 'number' + const outOfScope = typeof this.options.levels === 'number' && ( - this.options.start === 'shallow' - ? currentLevel > this.options.levels - : maxLevels - currentLevel > this.options.levels + (this.options.start === 'deep' && maxLevels - currentLevel > this.options.levels) + || (this.options.start === 'shallow' && currentLevel > this.options.levels) ) - console.log(node.type.name, currentLevel, maxLevels, this.options.levels) - - if (isOutOfScope) { + if (outOfScope) { return this.options.start === 'deep' } From 2959ace822426d014fe3325f0abef8ca797268f4 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Fri, 5 Feb 2021 12:19:17 +0100 Subject: [PATCH 3/3] refactoring --- packages/extension-focus/src/focus.ts | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/extension-focus/src/focus.ts b/packages/extension-focus/src/focus.ts index e24c26f2..57499760 100644 --- a/packages/extension-focus/src/focus.ts +++ b/packages/extension-focus/src/focus.ts @@ -5,7 +5,8 @@ import { DecorationSet, Decoration } from 'prosemirror-view' export interface FocusOptions { className: string, start: 'deep' | 'shallow', - levels: 'all' | number, + exact: boolean, + // levels: 'all' | number, } export const FocusClasses = Extension.create({ @@ -14,7 +15,8 @@ export const FocusClasses = Extension.create({ defaultOptions: { className: 'has-focus', start: 'deep', - levels: 'all', + exact: false, + // levels: 'all', }, addProseMirrorPlugins() { @@ -62,10 +64,15 @@ export const FocusClasses = Extension.create({ currentLevel += 1 - const outOfScope = typeof this.options.levels === 'number' + // 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 > this.options.levels) - || (this.options.start === 'shallow' && currentLevel > this.options.levels) + (this.options.start === 'deep' && maxLevels - currentLevel !== 0) + || (this.options.start === 'shallow' && currentLevel > 1) ) if (outOfScope) {