[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:
M. Palanikannan 2025-10-07 18:01:39 +05:30 committed by GitHub
parent 2ca8620246
commit c3e8ce8f28
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 20 additions and 21 deletions

View file

@ -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") {

View file

@ -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);
},

View file

@ -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),
};