thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests 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 { Editor } from "@tiptap/react";
import { FC, ReactNode } from "react"; import { FC, ReactNode } from "react";
import { cn } from "src/lib/utils";
interface EditorContainerProps { interface EditorContainerProps {
editor: Editor | null; editor: Editor | null;
@ -53,7 +54,7 @@ export const EditorContainer: FC<EditorContainerProps> = (props) => {
onMouseLeave={() => { onMouseLeave={() => {
hideDragHandle?.(); hideDragHandle?.();
}} }}
className={`cursor-text ${editorClassNames}`} className={cn(`cursor-text`, { "active-editor": editor?.isFocused && editor?.isEditable }, editorClassNames)}
> >
{children} {children}
</div> </div>

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

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

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

2
yarn.lock
View File

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