Skip to content

Commit 7a6d9da

Browse files
committed
fix #7554 -- The @mention pop-up menu should go away if you switch files
1 parent 60e97d0 commit 7a6d9da

File tree

4 files changed

+42
-10
lines changed

4 files changed

+42
-10
lines changed

src/packages/frontend/chat/chatroom.tsx

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ import { LLMCostEstimationChat } from "./llm-cost-estimation";
4343
import { SubmitMentionsFn } from "./types";
4444
import { INPUT_HEIGHT, markChatAsReadIfUnseen } from "./utils";
4545
import VideoChatButton from "./video/launch-button";
46+
import { FrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
4647

4748
const FILTER_RECENT_NONE = { value: 0, label: "All" } as const;
4849

@@ -75,9 +76,10 @@ const CHAT_LOG_STYLE: React.CSSProperties = {
7576
interface Props {
7677
project_id: string;
7778
path: string;
79+
is_visible?: boolean;
7880
}
7981

80-
export const ChatRoom: React.FC<Props> = ({ project_id, path }) => {
82+
export const ChatRoom: React.FC<Props> = ({ project_id, path, is_visible }) => {
8183
const actions: ChatActions = useActions(project_id, path);
8284

8385
const is_uploading = useRedux(["is_uploading"], project_id, path);
@@ -550,13 +552,26 @@ export const ChatRoom: React.FC<Props> = ({ project_id, path }) => {
550552
if (messages == null || input == null) {
551553
return <Loading theme={"medium"} />;
552554
}
555+
// remove frameContext once the chatroom is part of a frame tree.
556+
// we need this now, e.g., since some markdown editing components
557+
// for input assume in a frame tree, e.g., to fix
558+
// https://github.com/sagemathinc/cocalc/issues/7554
553559
return (
554-
<div
555-
onMouseMove={mark_as_read}
556-
onClick={mark_as_read}
557-
className="smc-vfill"
560+
<FrameContext.Provider
561+
value={{
562+
project_id,
563+
path,
564+
isVisible: !!is_visible,
565+
redux,
566+
} as any}
558567
>
559-
{render_body()}
560-
</div>
568+
<div
569+
onMouseMove={mark_as_read}
570+
onClick={mark_as_read}
571+
className="smc-vfill"
572+
>
573+
{render_body()}
574+
</div>
575+
</FrameContext.Provider>
561576
);
562577
};

src/packages/frontend/editors/markdown-input/component.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ export function MarkdownInput(props: Props) {
151151
unregisterEditor,
152152
value,
153153
} = props;
154-
const { actions } = useFrameContext();
154+
const { actions, isVisible } = useFrameContext();
155155
const cm = useRef<CodeMirror.Editor>();
156156
const textarea_ref = useRef<HTMLTextAreaElement>(null);
157157
const editor_settings = useRedux(["account", "editor_settings"]);
@@ -801,6 +801,14 @@ export function MarkdownInput(props: Props) {
801801
}
802802
}
803803

804+
// make sure that mentions is closed if we switch to another tab.
805+
useEffect(() => {
806+
console.log("")
807+
if (mentions && !isVisible) {
808+
close_mentions();
809+
}
810+
}, [isVisible]);
811+
804812
function render_mentions_popup() {
805813
if (mentions == null || mentions_offset == null) return;
806814

src/packages/frontend/editors/slate/editable-markdown.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ export const EditableMarkdown: React.FC<Props> = React.memo((props: Props) => {
160160
unregisterEditor,
161161
value,
162162
} = props;
163-
const { project_id, path, desc } = useFrameContext();
163+
const { project_id, path, desc, isVisible } = useFrameContext();
164164
const isMountedRef = useIsMountedRef();
165165
const id = id0 ?? "";
166166
const actions = actions0 ?? {};
@@ -334,6 +334,7 @@ export const EditableMarkdown: React.FC<Props> = React.memo((props: Props) => {
334334
const mentionableUsers = useMentionableUsers();
335335

336336
const mentions = useMentions({
337+
isVisible,
337338
editor,
338339
insertMention: (editor, account_id) => {
339340
Transforms.insertNodes(editor, [

src/packages/frontend/editors/slate/slate-mentions/hook.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { Editor, Range, Text, Transforms } from "slate";
1414
import { ReactEditor } from "../slate-react";
1515
import React from "react";
1616
import { useIsMountedRef } from "@cocalc/frontend/app-framework";
17-
import { useCallback, useMemo, useState } from "react";
17+
import { useCallback, useEffect, useMemo, useState } from "react";
1818
import {
1919
Complete,
2020
Item,
@@ -25,6 +25,7 @@ interface Options {
2525
editor: ReactEditor;
2626
insertMention: (Editor, string) => void;
2727
matchingUsers: (search: string) => (string | JSX.Element)[];
28+
isVisible?: boolean;
2829
}
2930

3031
interface MentionsControl {
@@ -34,6 +35,7 @@ interface MentionsControl {
3435
}
3536

3637
export const useMentions: (Options) => MentionsControl = ({
38+
isVisible,
3739
editor,
3840
insertMention,
3941
matchingUsers,
@@ -42,6 +44,12 @@ export const useMentions: (Options) => MentionsControl = ({
4244
const [search, setSearch] = useState("");
4345
const isMountedRef = useIsMountedRef();
4446

47+
useEffect(() => {
48+
if (!isVisible && target) {
49+
setTarget(undefined);
50+
}
51+
}, [isVisible]);
52+
4553
const items: Item[] = useMemo(() => {
4654
return matchingUsers(search);
4755
}, [search]);

0 commit comments

Comments
 (0)