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={() => { onMouseLeave={() => {
hideDragHandle?.(); hideDragHandle?.();
}} }}
className={`cursor-text ${editorClassNames}`} className={`cursor-text ${editorClassNames} ${editor?.isFocused && editor?.isEditable ? "active-editor" : ""}`}
> >
{children} {children}
</div> </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 { Editor } from "@tiptap/core";
import tippy from "tippy.js"; import tippy from "tippy.js";
import { v4 as uuidv4 } from "uuid";
import { MentionList } from "src/ui/mentions/mention-list"; import { MentionList } from "src/ui/mentions/mention-list";
export const Mentions = ({ export const Mentions = ({
@ -28,9 +27,6 @@ export const Mentions = ({
let component: ReactRenderer | null = null; let component: ReactRenderer | null = null;
let popup: any | null = null; let popup: any | null = null;
const hidePopup = () => {
popup?.[0].hide();
};
return { return {
onStart: (props: { editor: Editor; clientRect: DOMRect }) => { onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
if (!props.clientRect) { if (!props.clientRect) {
@ -44,14 +40,13 @@ export const Mentions = ({
// @ts-expect-error - Tippy types are incorrect // @ts-expect-error - Tippy types are incorrect
popup = tippy("body", { popup = tippy("body", {
getReferenceClientRect: props.clientRect, getReferenceClientRect: props.clientRect,
appendTo: () => document.body, appendTo: () => document.querySelector(".active-editor"),
content: component.element, content: component.element,
showOnCreate: true, showOnCreate: true,
interactive: true, interactive: true,
trigger: "manual", trigger: "manual",
placement: "bottom-start", placement: "bottom-start",
}); });
// document.addEventListener("scroll", hidePopup, true);
}, },
onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => { onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
component?.updateProps(props); component?.updateProps(props);
@ -87,8 +82,6 @@ export const Mentions = ({
props.editor.storage.mentionsOpen = false; props.editor.storage.mentionsOpen = false;
popup?.[0].destroy(); popup?.[0].destroy();
component?.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 const filteredSuggestions = mappedSuggestions.filter((suggestion) =>
.filter((suggestion) => suggestion.title.toLowerCase().startsWith(query.toLowerCase())) suggestion.title.toLowerCase().startsWith(query.toLowerCase())
.slice(0, 5); );
setItems(filteredSuggestions); setItems(filteredSuggestions);
setIsLoading(false); // End loading setIsLoading(false); // End loading

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

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