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

[WEB-876] fix: Multiple editor instances cause weird issues with Tippy (#4092)

Browse Source 
* fix: tippy rendered properly when there are multiple editor instances

* enhancement: using cn to merge classes conditionally
This commit is contained in:
M. Palanikannan 2024-04-01 12:04:01 +05:30 committed by GitHub
parent 3a466cfe40
commit fafdac68f0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
import { Editor } from "@tiptap/react";
import { FC, ReactNode } from "react";
import { cn } from "src/lib/utils";
interface EditorContainerProps {
editor: Editor | null;
@ -53,7 +54,7 @@ export const EditorContainer: FC<EditorContainerProps> = (props) => {
onMouseLeave={() => {
hideDragHandle?.();
}}
className={`cursor-text ${editorClassNames}`}
className={cn(`cursor-text`, { "active-editor": editor?.isFocused && editor?.isEditable }, editorClassNames)}
>
{children}
</div>

2
packages/editor/core/src/ui/mentions/suggestion.ts
View File

@ -22,7 +22,7 @@ export const Suggestion = (suggestions: IMentionSuggestion[]) => ({
// @ts-ignore
popup = tippy("body", {
getReferenceClientRect: props.clientRect,
appendTo: () => document.querySelector("#editor-container"),
appendTo: () => document.querySelector(".active-editor") ?? document.querySelector("#editor-container"),
content: reactRenderer.element,
showOnCreate: true,
interactive: true,

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.querySelector("#editor-container"),
appendTo: () => document.querySelector(".active-editor") ?? document.querySelector("#editor-container"),
content: component.element,
showOnCreate: true,
interactive: true,

2
yarn.lock
View File

@ -2733,7 +2733,7 @@
dependencies:
"@types/react" "*"
"@types/react@*", "@types/react@^18.2.42":
"@types/react@*", "@types/react@18.2.42", "@types/react@^18.2.42":
version "18.2.42"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.42.tgz#6f6b11a904f6d96dda3c2920328a97011a00aba7"
integrity sha512-c1zEr96MjakLYus/wPnuWDo1/zErfdU9rNsIGmE+NV71nx88FG9Ttgo5dqorXTu/LImX2f63WBP986gJkMPNbA==