github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: mentions and slash commands now work well with multiple editors in one place

Browse Source
This commit is contained in:
Palanikannan1437 2024-03-27 11:28:53 +05:30
parent 48f913fbe6
commit 625205f972
4 changed files with 6 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/editor/core/src/ui/components/editor-container.tsx
View File

@ -53,7 +53,7 @@ export const EditorContainer: FC<EditorContainerProps> = (props) => {
onMouseLeave={() => {
hideDragHandle?.();
}}
className={`cursor-text ${editorClassNames}`}
className={`cursor-text ${editorClassNames} ${editor?.isFocused && editor?.isEditable ? "active-editor" : ""}`}
>
{children}
</div>

9
packages/editor/core/src/ui/mentions/index.tsx
View File

@ -4,7 +4,6 @@ import { ReactRenderer } from "@tiptap/react";
import { Editor } from "@tiptap/core";
import tippy from "tippy.js";
import { v4 as uuidv4 } from "uuid";
import { MentionList } from "src/ui/mentions/mention-list";
export const Mentions = ({
@ -28,9 +27,6 @@ export const Mentions = ({
let component: ReactRenderer | null = null;
let popup: any | null = null;
const hidePopup = () => {
popup?.[0].hide();
};
return {
onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
if (!props.clientRect) {
@ -44,14 +40,13 @@ export const Mentions = ({
// @ts-expect-error - Tippy types are incorrect
popup = tippy("body", {
getReferenceClientRect: props.clientRect,
appendTo: () => document.body,
appendTo: () => document.querySelector(".active-editor"),
content: component.element,
showOnCreate: true,
interactive: true,
trigger: "manual",
placement: "bottom-start",
});
// document.addEventListener("scroll", hidePopup, true);
},
onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
component?.updateProps(props);
@ -87,8 +82,6 @@ export const Mentions = ({
props.editor.storage.mentionsOpen = false;
popup?.[0].destroy();
component?.destroy();
// document.removeEventListener("scroll", hidePopup, true);
},
};
},

6
packages/editor/core/src/ui/mentions/mention-list.tsx
View File

@ -35,9 +35,9 @@ export const MentionList = forwardRef((props: MentionListProps, ref) => {
};
});
const filteredSuggestions = mappedSuggestions
.filter((suggestion) => suggestion.title.toLowerCase().startsWith(query.toLowerCase()))
.slice(0, 5);
const filteredSuggestions = mappedSuggestions.filter((suggestion) =>
suggestion.title.toLowerCase().startsWith(query.toLowerCase())
);
setItems(filteredSuggestions);
setIsLoading(false); // End loading

2
packages/editor/extensions/src/extensions/slash-commands.tsx
View File

@ -330,7 +330,7 @@ const renderItems = () => {
// @ts-ignore
popup = tippy("body", {
getReferenceClientRect: props.clientRect,
appendTo: () => document.body,
appendTo: () => document.querySelector(".active-editor"),
content: component.element,
showOnCreate: true,
interactive: true,