New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
dotCMS/core#23977 Block editor freeze scroll on tippy menus show #24180
Changes from 5 commits
cef5ab2
9d4b19a
3c24c8f
5f55053
a7245e2
9a1c979
f457ec2
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -260,4 +260,12 @@ | |
margin-bottom: $spacing-3; | ||
} | ||
} | ||
|
||
tiptap-editor { | ||
/* To avoid jupms whe the scroll is hidden */ | ||
scrollbar-gutter: stable; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. TIL! |
||
} | ||
.overflow-hidden { | ||
overflow-y: hidden; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -143,7 +143,7 @@ export class BubbleFormView extends BubbleMenuView { | |
|
||
this.tippy = tippy(editorElement.parentElement, { | ||
...this.tippyOptions, | ||
duration: 250, | ||
duration: [250, 0], | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Rafa, these values can be a constant? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sure, @oidacra! |
||
content: this.element, | ||
interactive: true, | ||
maxWidth: 'none', | ||
|
@@ -186,7 +186,7 @@ export class BubbleFormView extends BubbleMenuView { | |
} | ||
|
||
private hanlderScroll(e: Event) { | ||
if (this.tippy?.popper && this.tippy?.popper.contains(e.target as HTMLElement)) { | ||
if (!this.shouldHideOnScroll(e.target as HTMLElement)) { | ||
oidacra marked this conversation as resolved.
Show resolved
Hide resolved
|
||
return true; | ||
} | ||
|
||
|
@@ -201,6 +201,10 @@ export class BubbleFormView extends BubbleMenuView { | |
|
||
return domRect || getNodePosition(node, type); | ||
} | ||
|
||
private shouldHideOnScroll(node: HTMLElement): boolean { | ||
return this.tippy?.state.isMounted && this.tippy?.popper.contains(node); | ||
} | ||
} | ||
|
||
export const bubbleFormPlugin = (options: BubbleFormProps) => { | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -104,6 +104,11 @@ export class BubbleLinkFormView { | |
const { state } = this.editor; | ||
const { to } = state.selection; | ||
const { openOnClick } = LINK_FORM_PLUGIN_KEY.getState(state); | ||
const pluginState = this.pluginKey.getState(state); | ||
|
||
if (!pluginState.isOpen) { | ||
return; | ||
} | ||
|
||
if (openOnClick) { | ||
this.editor.commands.closeLinkForm(); | ||
|
@@ -123,7 +128,7 @@ export class BubbleLinkFormView { | |
|
||
this.tippy = tippy(editorElement.parentElement, { | ||
...this.tippyOptions, | ||
duration: 250, | ||
duration: [250, 0], | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same as bubble form. |
||
getReferenceClientRect: () => this.setTippyPosition(), | ||
content: this.element, | ||
interactive: true, | ||
|
@@ -138,6 +143,9 @@ export class BubbleLinkFormView { | |
options: { fallbackPlacements: ['top-start'] } | ||
} | ||
] | ||
}, | ||
onHide: () => { | ||
this.editor.commands.closeLinkForm(); | ||
} | ||
}); | ||
} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
import { PluginKey, Plugin, Transaction, EditorState } from 'prosemirror-state'; | ||
|
||
import { Extension } from '@tiptap/core'; | ||
|
||
export const FREEZE_SCROLL_KEY = new PluginKey('freeze-scroll'); | ||
|
||
declare module '@tiptap/core' { | ||
interface Commands<ReturnType> { | ||
FreezeScroll: { | ||
freezeScroll: (value: boolean) => ReturnType; | ||
}; | ||
} | ||
} | ||
|
||
interface PluginState { | ||
freezeScroll: boolean; | ||
} | ||
|
||
export const FreezeScroll = Extension.create({ | ||
addCommands() { | ||
return { | ||
freezeScroll: | ||
(value) => | ||
({ chain }) => { | ||
return chain() | ||
.command(({ tr }) => { | ||
tr.setMeta(FREEZE_SCROLL_KEY, { freezeScroll: value }); | ||
|
||
return true; | ||
}) | ||
.run(); | ||
} | ||
}; | ||
}, | ||
|
||
addProseMirrorPlugins() { | ||
return [FreezeScrollPlugin]; | ||
} | ||
}); | ||
|
||
export const FreezeScrollPlugin = new Plugin({ | ||
key: FREEZE_SCROLL_KEY, | ||
state: { | ||
init(): PluginState { | ||
return { | ||
freezeScroll: false | ||
}; | ||
}, | ||
apply(transaction: Transaction, value: PluginState, oldState: EditorState): PluginState { | ||
const { freezeScroll } = transaction.getMeta(FREEZE_SCROLL_KEY) || {}; | ||
const state = FREEZE_SCROLL_KEY?.getState(oldState); | ||
|
||
if (typeof freezeScroll === 'boolean') { | ||
return { freezeScroll }; | ||
} | ||
|
||
// keep the old state in case we do not receive a new one. | ||
return state || value; | ||
} | ||
} | ||
}); |
Large diffs are not rendered by default.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Small typo in the comment "jumps" @rjvelazco
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, @manuelrojas!