[WIKI-710] [WIKI-717] fix: slash commands and mentions in comments (#7919)
* fix: fixing slash commands and mentions * fix: tiptap types handled
This commit is contained in:
parent
2ca8620246
commit
c3e8ce8f28
3 changed files with 20 additions and 21 deletions
|
|
@ -19,7 +19,6 @@ export const renderMentionsDropdown =
|
|||
return {
|
||||
onStart: (props) => {
|
||||
if (!searchCallback) return;
|
||||
if (!props.clientRect) return;
|
||||
component = new ReactRenderer<CommandListInstance, MentionsListDropdownProps>(MentionsListDropdown, {
|
||||
props: {
|
||||
...props,
|
||||
|
|
@ -27,20 +26,18 @@ export const renderMentionsDropdown =
|
|||
},
|
||||
editor: props.editor,
|
||||
});
|
||||
if (!props.clientRect) return;
|
||||
props.editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.MENTION);
|
||||
const element = component.element as HTMLElement;
|
||||
element.style.position = "absolute";
|
||||
element.style.zIndex = "100";
|
||||
|
||||
document.body.appendChild(element);
|
||||
updateFloatingUIFloaterPosition(props.editor, element);
|
||||
},
|
||||
onUpdate: (props) => {
|
||||
component?.updateProps(props);
|
||||
if (!component || !component.element) return;
|
||||
component.updateProps(props);
|
||||
if (!props.clientRect) return;
|
||||
if (component?.element) {
|
||||
updateFloatingUIFloaterPosition(props.editor, component?.element as HTMLElement);
|
||||
}
|
||||
updateFloatingUIFloaterPosition(props.editor, component.element);
|
||||
},
|
||||
onKeyDown: ({ event }) => {
|
||||
if (event.key === "Escape") {
|
||||
|
|
|
|||
|
|
@ -54,33 +54,22 @@ const Command = Extension.create<SlashCommandOptions>({
|
|||
return {
|
||||
onStart: (props) => {
|
||||
// Track active dropdown
|
||||
props.editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.SLASH_COMMANDS);
|
||||
component = new ReactRenderer<CommandListInstance, SlashCommandsMenuProps>(SlashCommandsMenu, {
|
||||
props,
|
||||
editor: props.editor,
|
||||
});
|
||||
|
||||
if (!props.clientRect) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!props.clientRect) return;
|
||||
props.editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.SLASH_COMMANDS);
|
||||
const element = component.element as HTMLElement;
|
||||
element.style.position = "absolute";
|
||||
element.style.zIndex = "100";
|
||||
document.body.appendChild(element);
|
||||
|
||||
updateFloatingUIFloaterPosition(props.editor, element);
|
||||
},
|
||||
|
||||
onUpdate: (props) => {
|
||||
if (!component || !component.element) return;
|
||||
|
||||
component.updateProps(props);
|
||||
|
||||
if (!props.clientRect) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!props.clientRect) return;
|
||||
const element = component.element as HTMLElement;
|
||||
updateFloatingUIFloaterPosition(props.editor, element);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -11,6 +11,19 @@ export const updateFloatingUIFloaterPosition = (
|
|||
strategy?: Strategy;
|
||||
}
|
||||
) => {
|
||||
const editorElement = editor.options.element;
|
||||
let container: Element | HTMLElement = document.body;
|
||||
|
||||
if (editorElement instanceof Element) {
|
||||
container = editorElement;
|
||||
} else if (editorElement && typeof editorElement === "object" && "mount" in editorElement) {
|
||||
container = editorElement.mount;
|
||||
} else if (typeof editorElement === "function") {
|
||||
container = document.body;
|
||||
}
|
||||
|
||||
container.appendChild(element);
|
||||
|
||||
const virtualElement = {
|
||||
getBoundingClientRect: () => posToDOMRect(editor.view, editor.state.selection.from, editor.state.selection.to),
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue