mirror of
https://github.com/Shadowfita/docmost.git
synced 2025-11-13 00:02:30 +10:00
fix tiptap editor types
This commit is contained in:
Philipinho
@ -1,26 +1,26 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Avatar, Dialog, Group, Stack, Text } from '@mantine/core';
|
||||
import { useClickOutside } from '@mantine/hooks';
|
||||
import { useAtom } from 'jotai';
|
||||
import React, { useState } from "react";
|
||||
import { Avatar, Dialog, Group, Stack, Text } from "@mantine/core";
|
||||
import { useClickOutside } from "@mantine/hooks";
|
||||
import { useAtom } from "jotai";
|
||||
import {
|
||||
activeCommentIdAtom,
|
||||
draftCommentIdAtom,
|
||||
showCommentPopupAtom,
|
||||
} from '@/features/comment/atoms/comment-atom';
|
||||
import { Editor } from '@tiptap/core';
|
||||
import CommentEditor from '@/features/comment/components/comment-editor';
|
||||
import CommentActions from '@/features/comment/components/comment-actions';
|
||||
import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
|
||||
import { useCreateCommentMutation } from '@/features/comment/queries/comment-query';
|
||||
import { asideStateAtom } from '@/components/navbar/atoms/sidebar-atom';
|
||||
} from "@/features/comment/atoms/comment-atom";
|
||||
import CommentEditor from "@/features/comment/components/comment-editor";
|
||||
import CommentActions from "@/features/comment/components/comment-actions";
|
||||
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import { useCreateCommentMutation } from "@/features/comment/queries/comment-query";
|
||||
import { asideStateAtom } from "@/components/navbar/atoms/sidebar-atom";
|
||||
import { useEditor } from "@tiptap/react";
|
||||
|
||||
interface CommentDialogProps {
|
||||
editor: Editor,
|
||||
pageId: string,
|
||||
editor: ReturnType<typeof useEditor>;
|
||||
pageId: string;
|
||||
}
|
||||
|
||||
function CommentDialog({ editor, pageId }: CommentDialogProps) {
|
||||
const [comment, setComment] = useState('');
|
||||
const [comment, setComment] = useState("");
|
||||
const [, setShowCommentPopup] = useAtom(showCommentPopupAtom);
|
||||
const [, setActiveCommentId] = useAtom(activeCommentIdAtom);
|
||||
const [draftCommentId, setDraftCommentId] = useAtom(draftCommentIdAtom);
|
||||
@ -34,6 +34,7 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
|
||||
|
||||
const handleDialogClose = () => {
|
||||
setShowCommentPopup(false);
|
||||
// @ts-ignore
|
||||
editor.chain().focus().unsetCommentDecoration().run();
|
||||
};
|
||||
|
||||
@ -52,11 +53,17 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
|
||||
selection: selectedText,
|
||||
};
|
||||
|
||||
const createdComment = await createCommentMutation.mutateAsync(commentData);
|
||||
editor.chain().setComment(createdComment.id).unsetCommentDecoration().run();
|
||||
const createdComment =
|
||||
await createCommentMutation.mutateAsync(commentData);
|
||||
editor
|
||||
.chain()
|
||||
.setContent(createdComment.id)
|
||||
// @ts-ignore
|
||||
.unsetCommentDecoration()
|
||||
.run();
|
||||
setActiveCommentId(createdComment.id);
|
||||
|
||||
setAsideState({ tab: 'comments', isAsideOpen: true });
|
||||
setAsideState({ tab: "comments", isAsideOpen: true });
|
||||
setTimeout(() => {
|
||||
const selector = `div[data-comment-id="${createdComment.id}"]`;
|
||||
const commentElement = document.querySelector(selector);
|
||||
@ -64,7 +71,7 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
|
||||
});
|
||||
} finally {
|
||||
setShowCommentPopup(false);
|
||||
setDraftCommentId('');
|
||||
setDraftCommentId("");
|
||||
}
|
||||
};
|
||||
|
||||
@ -73,24 +80,38 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog opened={true} onClose={handleDialogClose} ref={useClickOutsideRef} size="lg" radius="md"
|
||||
w={300} position={{ bottom: 500, right: 50 }} withCloseButton withBorder>
|
||||
|
||||
<Dialog
|
||||
opened={true}
|
||||
onClose={handleDialogClose}
|
||||
ref={useClickOutsideRef}
|
||||
size="lg"
|
||||
radius="md"
|
||||
w={300}
|
||||
position={{ bottom: 500, right: 50 }}
|
||||
withCloseButton
|
||||
withBorder
|
||||
>
|
||||
<Stack gap={2}>
|
||||
<Group>
|
||||
<Avatar size="sm" c="blue">{currentUser.user.name.charAt(0)}</Avatar>
|
||||
<Avatar size="sm" c="blue">
|
||||
{currentUser.user.name.charAt(0)}
|
||||
</Avatar>
|
||||
<div style={{ flex: 1 }}>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Text size="sm" fw={500} lineClamp={1}>{currentUser.user.name}</Text>
|
||||
<Text size="sm" fw={500} lineClamp={1}>
|
||||
{currentUser.user.name}
|
||||
</Text>
|
||||
</Group>
|
||||
</div>
|
||||
</Group>
|
||||
|
||||
<CommentEditor onUpdate={handleCommentEditorChange} placeholder="Write a comment"
|
||||
editable={true} autofocus={true}
|
||||
/>
|
||||
<CommentActions onSave={handleAddComment} isLoading={isPending}
|
||||
<CommentEditor
|
||||
onUpdate={handleCommentEditorChange}
|
||||
placeholder="Write a comment"
|
||||
editable={true}
|
||||
autofocus={true}
|
||||
/>
|
||||
<CommentActions onSave={handleAddComment} isLoading={isPending} />
|
||||
</Stack>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
@ -1,14 +1,29 @@
|
||||
import { BubbleMenu, BubbleMenuProps, isNodeSelection } from '@tiptap/react';
|
||||
import { FC, useState } from 'react';
|
||||
import { IconBold, IconCode, IconItalic, IconStrikethrough, IconUnderline, IconMessage } from '@tabler/icons-react';
|
||||
import clsx from 'clsx';
|
||||
import classes from './bubble-menu.module.css';
|
||||
import { ActionIcon, rem, Tooltip } from '@mantine/core';
|
||||
import { ColorSelector } from './color-selector';
|
||||
import { NodeSelector } from './node-selector';
|
||||
import { draftCommentIdAtom, showCommentPopupAtom } from '@/features/comment/atoms/comment-atom';
|
||||
import { useAtom } from 'jotai';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import {
|
||||
BubbleMenu,
|
||||
BubbleMenuProps,
|
||||
isNodeSelection,
|
||||
useEditor,
|
||||
} from "@tiptap/react";
|
||||
import { FC, useState } from "react";
|
||||
import {
|
||||
IconBold,
|
||||
IconCode,
|
||||
IconItalic,
|
||||
IconStrikethrough,
|
||||
IconUnderline,
|
||||
IconMessage,
|
||||
} from "@tabler/icons-react";
|
||||
import clsx from "clsx";
|
||||
import classes from "./bubble-menu.module.css";
|
||||
import { ActionIcon, rem, Tooltip } from "@mantine/core";
|
||||
import { ColorSelector } from "./color-selector";
|
||||
import { NodeSelector } from "./node-selector";
|
||||
import {
|
||||
draftCommentIdAtom,
|
||||
showCommentPopupAtom,
|
||||
} from "@/features/comment/atoms/comment-atom";
|
||||
import { useAtom } from "jotai";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
|
||||
export interface BubbleMenuItem {
|
||||
name: string;
|
||||
@ -17,7 +32,9 @@ export interface BubbleMenuItem {
|
||||
icon: typeof IconBold;
|
||||
}
|
||||
|
||||
type EditorBubbleMenuProps = Omit<BubbleMenuProps, 'children'>;
|
||||
type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children" | "editor"> & {
|
||||
editor: ReturnType<typeof useEditor>;
|
||||
};
|
||||
|
||||
export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
|
||||
const [, setShowCommentPopup] = useAtom(showCommentPopupAtom);
|
||||
@ -25,44 +42,44 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
|
||||
|
||||
const items: BubbleMenuItem[] = [
|
||||
{
|
||||
name: 'bold',
|
||||
isActive: () => props.editor.isActive('bold'),
|
||||
name: "bold",
|
||||
isActive: () => props.editor.isActive("bold"),
|
||||
command: () => props.editor.chain().focus().toggleBold().run(),
|
||||
icon: IconBold,
|
||||
},
|
||||
{
|
||||
name: 'italic',
|
||||
isActive: () => props.editor.isActive('italic'),
|
||||
name: "italic",
|
||||
isActive: () => props.editor.isActive("italic"),
|
||||
command: () => props.editor.chain().focus().toggleItalic().run(),
|
||||
icon: IconItalic,
|
||||
},
|
||||
{
|
||||
name: 'underline',
|
||||
isActive: () => props.editor.isActive('underline'),
|
||||
name: "underline",
|
||||
isActive: () => props.editor.isActive("underline"),
|
||||
command: () => props.editor.chain().focus().toggleUnderline().run(),
|
||||
icon: IconUnderline,
|
||||
},
|
||||
{
|
||||
name: 'strike',
|
||||
isActive: () => props.editor.isActive('strike'),
|
||||
name: "strike",
|
||||
isActive: () => props.editor.isActive("strike"),
|
||||
command: () => props.editor.chain().focus().toggleStrike().run(),
|
||||
icon: IconStrikethrough,
|
||||
},
|
||||
{
|
||||
name: 'code',
|
||||
isActive: () => props.editor.isActive('code'),
|
||||
name: "code",
|
||||
isActive: () => props.editor.isActive("code"),
|
||||
command: () => props.editor.chain().focus().toggleCode().run(),
|
||||
icon: IconCode,
|
||||
},
|
||||
];
|
||||
|
||||
const commentItem: BubbleMenuItem = {
|
||||
|
||||
name: 'comment',
|
||||
isActive: () => props.editor.isActive('comment'),
|
||||
name: "comment",
|
||||
isActive: () => props.editor.isActive("comment"),
|
||||
command: () => {
|
||||
const commentId = uuidv4();
|
||||
|
||||
// @ts-ignore
|
||||
props.editor.chain().focus().setCommentDecoration().run();
|
||||
setDraftCommentId(commentId);
|
||||
setShowCommentPopup(true);
|
||||
@ -76,13 +93,17 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
|
||||
const { selection } = state;
|
||||
const { empty } = selection;
|
||||
|
||||
if (editor.isActive('image') || empty || isNodeSelection(selection)) {
|
||||
if (
|
||||
props.editor.isActive("image") ||
|
||||
empty ||
|
||||
isNodeSelection(selection)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
tippyOptions: {
|
||||
moveTransition: 'transform 0.15s ease-out',
|
||||
moveTransition: "transform 0.15s ease-out",
|
||||
onHidden: () => {
|
||||
setIsNodeSelectorOpen(false);
|
||||
setIsColorSelectorOpen(false);
|
||||
@ -96,10 +117,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
|
||||
const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<BubbleMenu
|
||||
{...bubbleMenuProps}
|
||||
className={classes.bubbleMenu}
|
||||
>
|
||||
<BubbleMenu {...bubbleMenuProps} className={classes.bubbleMenu}>
|
||||
<NodeSelector
|
||||
editor={props.editor}
|
||||
isOpen={isNodeSelectorOpen}
|
||||
@ -113,15 +131,19 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
|
||||
<ActionIcon.Group>
|
||||
{items.map((item, index) => (
|
||||
<Tooltip key={index} label={item.name} withArrow>
|
||||
|
||||
<ActionIcon key={index} variant="default" size="lg" radius="0" aria-label={item.name}
|
||||
className={clsx({ [classes.active]: item.isActive() })}
|
||||
style={{ border: 'none' }}
|
||||
onClick={item.command}>
|
||||
<ActionIcon
|
||||
key={index}
|
||||
variant="default"
|
||||
size="lg"
|
||||
radius="0"
|
||||
aria-label={item.name}
|
||||
className={clsx({ [classes.active]: item.isActive() })}
|
||||
style={{ border: "none" }}
|
||||
onClick={item.command}
|
||||
>
|
||||
<item.icon style={{ width: rem(16) }} stroke={2} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
|
||||
))}
|
||||
</ActionIcon.Group>
|
||||
|
||||
@ -136,14 +158,17 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
|
||||
/>
|
||||
|
||||
<Tooltip label={commentItem.name} withArrow>
|
||||
|
||||
<ActionIcon variant="default" size="lg" radius="0" aria-label={commentItem.name}
|
||||
style={{ border: 'none' }}
|
||||
onClick={commentItem.command}>
|
||||
<ActionIcon
|
||||
variant="default"
|
||||
size="lg"
|
||||
radius="0"
|
||||
aria-label={commentItem.name}
|
||||
style={{ border: "none" }}
|
||||
onClick={commentItem.command}
|
||||
>
|
||||
<IconMessage style={{ width: rem(16) }} stroke={2} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
|
||||
</BubbleMenu>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { Editor } from '@tiptap/core';
|
||||
import { Dispatch, FC, SetStateAction } from 'react';
|
||||
import { IconCheck, IconChevronDown } from '@tabler/icons-react';
|
||||
import { Button, Popover, rem, ScrollArea, Text } from '@mantine/core';
|
||||
import classes from './bubble-menu.module.css';
|
||||
import { Dispatch, FC, SetStateAction } from "react";
|
||||
import { IconCheck, IconChevronDown } from "@tabler/icons-react";
|
||||
import { Button, Popover, rem, ScrollArea, Text } from "@mantine/core";
|
||||
import classes from "./bubble-menu.module.css";
|
||||
import { useEditor } from "@tiptap/react";
|
||||
|
||||
export interface BubbleColorMenuItem {
|
||||
name: string;
|
||||
@ -10,121 +10,125 @@ export interface BubbleColorMenuItem {
|
||||
}
|
||||
|
||||
interface ColorSelectorProps {
|
||||
editor: Editor;
|
||||
editor: ReturnType<typeof useEditor>;
|
||||
isOpen: boolean;
|
||||
setIsOpen: Dispatch<SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
const TEXT_COLORS: BubbleColorMenuItem[] = [
|
||||
{
|
||||
name: 'Default',
|
||||
color: '',
|
||||
name: "Default",
|
||||
color: "",
|
||||
},
|
||||
{
|
||||
name: 'Blue',
|
||||
color: '#2563EB',
|
||||
name: "Blue",
|
||||
color: "#2563EB",
|
||||
},
|
||||
{
|
||||
name: 'Green',
|
||||
color: '#008A00',
|
||||
name: "Green",
|
||||
color: "#008A00",
|
||||
},
|
||||
{
|
||||
name: 'Purple',
|
||||
color: '#9333EA',
|
||||
name: "Purple",
|
||||
color: "#9333EA",
|
||||
},
|
||||
{
|
||||
name: 'Red',
|
||||
color: '#E00000',
|
||||
name: "Red",
|
||||
color: "#E00000",
|
||||
},
|
||||
{
|
||||
name: 'Yellow',
|
||||
color: '#EAB308',
|
||||
name: "Yellow",
|
||||
color: "#EAB308",
|
||||
},
|
||||
{
|
||||
name: 'Orange',
|
||||
color: '#FFA500',
|
||||
name: "Orange",
|
||||
color: "#FFA500",
|
||||
},
|
||||
{
|
||||
name: 'Pink',
|
||||
color: '#BA4081',
|
||||
name: "Pink",
|
||||
color: "#BA4081",
|
||||
},
|
||||
{
|
||||
name: 'Gray',
|
||||
color: '#A8A29E',
|
||||
name: "Gray",
|
||||
color: "#A8A29E",
|
||||
},
|
||||
];
|
||||
|
||||
// TODO: handle dark mode
|
||||
const HIGHLIGHT_COLORS: BubbleColorMenuItem[] = [
|
||||
{
|
||||
name: 'Default',
|
||||
color: '',
|
||||
name: "Default",
|
||||
color: "",
|
||||
},
|
||||
{
|
||||
name: 'Blue',
|
||||
color: '#c1ecf9',
|
||||
name: "Blue",
|
||||
color: "#c1ecf9",
|
||||
},
|
||||
{
|
||||
name: 'Green',
|
||||
color: '#acf79f',
|
||||
name: "Green",
|
||||
color: "#acf79f",
|
||||
},
|
||||
{
|
||||
name: 'Purple',
|
||||
color: '#f6f3f8',
|
||||
name: "Purple",
|
||||
color: "#f6f3f8",
|
||||
},
|
||||
{
|
||||
name: 'Red',
|
||||
color: '#fdebeb',
|
||||
name: "Red",
|
||||
color: "#fdebeb",
|
||||
},
|
||||
{
|
||||
name: 'Yellow',
|
||||
color: '#fbf4a2',
|
||||
name: "Yellow",
|
||||
color: "#fbf4a2",
|
||||
},
|
||||
{
|
||||
name: 'Orange',
|
||||
color: '#faebdd',
|
||||
name: "Orange",
|
||||
color: "#faebdd",
|
||||
},
|
||||
{
|
||||
name: 'Pink',
|
||||
color: '#faf1f5',
|
||||
name: "Pink",
|
||||
color: "#faf1f5",
|
||||
},
|
||||
{
|
||||
name: 'Gray',
|
||||
color: '#f1f1ef',
|
||||
name: "Gray",
|
||||
color: "#f1f1ef",
|
||||
},
|
||||
];
|
||||
|
||||
export const ColorSelector: FC<ColorSelectorProps> =
|
||||
({ editor, isOpen, setIsOpen }) => {
|
||||
export const ColorSelector: FC<ColorSelectorProps> = ({
|
||||
editor,
|
||||
isOpen,
|
||||
setIsOpen,
|
||||
}) => {
|
||||
const activeColorItem = TEXT_COLORS.find(({ color }) =>
|
||||
editor.isActive("textStyle", { color }),
|
||||
);
|
||||
|
||||
const activeColorItem = TEXT_COLORS.find(({ color }) =>
|
||||
editor.isActive('textStyle', { color }),
|
||||
);
|
||||
const activeHighlightItem = HIGHLIGHT_COLORS.find(({ color }) =>
|
||||
editor.isActive("highlight", { color }),
|
||||
);
|
||||
|
||||
const activeHighlightItem = HIGHLIGHT_COLORS.find(({ color }) =>
|
||||
editor.isActive('highlight', { color }),
|
||||
);
|
||||
return (
|
||||
<Popover width={200} opened={isOpen} withArrow>
|
||||
<Popover.Target>
|
||||
<Button
|
||||
variant="default"
|
||||
radius="0"
|
||||
leftSection="A"
|
||||
rightSection={<IconChevronDown size={16} />}
|
||||
className={classes.colorButton}
|
||||
style={{
|
||||
color: activeColorItem?.color,
|
||||
}}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
/>
|
||||
</Popover.Target>
|
||||
|
||||
return (
|
||||
<Popover width={200} opened={isOpen} withArrow>
|
||||
<Popover.Target>
|
||||
|
||||
<Button variant="default" radius="0"
|
||||
leftSection="A"
|
||||
rightSection={<IconChevronDown size={16} />}
|
||||
className={classes.colorButton}
|
||||
style={{
|
||||
color: activeColorItem?.color,
|
||||
}}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
/>
|
||||
</Popover.Target>
|
||||
|
||||
<Popover.Dropdown>
|
||||
{/* make mah responsive */}
|
||||
<ScrollArea.Autosize type="scroll" mah='400'>
|
||||
|
||||
<Text span c="dimmed" inherit>COLOR</Text>
|
||||
<Popover.Dropdown>
|
||||
{/* make mah responsive */}
|
||||
<ScrollArea.Autosize type="scroll" mah="400">
|
||||
<Text span c="dimmed" inherit>
|
||||
COLOR
|
||||
</Text>
|
||||
|
||||
<Button.Group orientation="vertical">
|
||||
{TEXT_COLORS.map(({ name, color }, index) => (
|
||||
@ -134,56 +138,60 @@ export const ColorSelector: FC<ColorSelectorProps> =
|
||||
leftSection={<span style={{ color }}>A</span>}
|
||||
justify="left"
|
||||
fullWidth
|
||||
rightSection={editor.isActive('textStyle', { color })
|
||||
&& (<IconCheck style={{ width: rem(16) }} />)}
|
||||
|
||||
rightSection={
|
||||
editor.isActive("textStyle", { color }) && (
|
||||
<IconCheck style={{ width: rem(16) }} />
|
||||
)
|
||||
}
|
||||
onClick={() => {
|
||||
editor.commands.unsetColor();
|
||||
name !== 'Default' &&
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.setColor(color || '')
|
||||
.run();
|
||||
name !== "Default" &&
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.setColor(color || "")
|
||||
.run();
|
||||
setIsOpen(false);
|
||||
}}
|
||||
style={{ border: 'none' }}
|
||||
style={{ border: "none" }}
|
||||
>
|
||||
{name}
|
||||
</Button>
|
||||
))}
|
||||
</Button.Group>
|
||||
|
||||
<Text span c="dimmed" inherit>BACKGROUND</Text>
|
||||
<Text span c="dimmed" inherit>
|
||||
BACKGROUND
|
||||
</Text>
|
||||
|
||||
<Button.Group orientation="vertical">
|
||||
{HIGHLIGHT_COLORS.map(({ name, color }, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant="default"
|
||||
leftSection={<span style={{ padding: '4px', background: color }}>A</span>}
|
||||
leftSection={
|
||||
<span style={{ padding: "4px", background: color }}>A</span>
|
||||
}
|
||||
justify="left"
|
||||
fullWidth
|
||||
rightSection={editor.isActive('highlight', { color })
|
||||
&& (<IconCheck style={{ width: rem(16) }} />)}
|
||||
|
||||
rightSection={
|
||||
editor.isActive("highlight", { color }) && (
|
||||
<IconCheck style={{ width: rem(16) }} />
|
||||
)
|
||||
}
|
||||
onClick={() => {
|
||||
editor.commands.unsetHighlight();
|
||||
name !== 'Default' &&
|
||||
editor
|
||||
.commands
|
||||
.setHighlight({ color });
|
||||
name !== "Default" && editor.commands.setHighlight({ color });
|
||||
setIsOpen(false);
|
||||
}}
|
||||
style={{ border: 'none' }}
|
||||
style={{ border: "none" }}
|
||||
>
|
||||
{name}
|
||||
</Button>
|
||||
))}
|
||||
</Button.Group>
|
||||
|
||||
</ScrollArea.Autosize>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
</ScrollArea.Autosize>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,20 +1,23 @@
|
||||
import { Editor } from '@tiptap/core';
|
||||
import React, { Dispatch, FC, SetStateAction } from 'react';
|
||||
import React, { Dispatch, FC, SetStateAction } from "react";
|
||||
import {
|
||||
IconBlockquote,
|
||||
IconCheck, IconCheckbox, IconChevronDown, IconCode,
|
||||
IconCheck,
|
||||
IconCheckbox,
|
||||
IconChevronDown,
|
||||
IconCode,
|
||||
IconH1,
|
||||
IconH2,
|
||||
IconH3,
|
||||
IconList,
|
||||
IconListNumbers,
|
||||
IconTypography,
|
||||
} from '@tabler/icons-react';
|
||||
import { Popover, Button, rem, ScrollArea } from '@mantine/core';
|
||||
import classes from '@/features/editor/components/bubble-menu/bubble-menu.module.css';
|
||||
} from "@tabler/icons-react";
|
||||
import { Popover, Button, rem, ScrollArea } from "@mantine/core";
|
||||
import classes from "@/features/editor/components/bubble-menu/bubble-menu.module.css";
|
||||
import { useEditor } from "@tiptap/react";
|
||||
|
||||
interface NodeSelectorProps {
|
||||
editor: Editor;
|
||||
editor: ReturnType<typeof useEditor>;
|
||||
isOpen: boolean;
|
||||
setIsOpen: Dispatch<SetStateAction<boolean>>;
|
||||
}
|
||||
@ -26,123 +29,121 @@ export interface BubbleMenuItem {
|
||||
isActive: () => boolean;
|
||||
}
|
||||
|
||||
export const NodeSelector: FC<NodeSelectorProps> =
|
||||
({ editor, isOpen, setIsOpen }) => {
|
||||
export const NodeSelector: FC<NodeSelectorProps> = ({
|
||||
editor,
|
||||
isOpen,
|
||||
setIsOpen,
|
||||
}) => {
|
||||
const items: BubbleMenuItem[] = [
|
||||
{
|
||||
name: "Text",
|
||||
icon: IconTypography,
|
||||
command: () =>
|
||||
editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
|
||||
isActive: () =>
|
||||
editor.isActive("paragraph") &&
|
||||
!editor.isActive("bulletList") &&
|
||||
!editor.isActive("orderedList"),
|
||||
},
|
||||
{
|
||||
name: "Heading 1",
|
||||
icon: IconH1,
|
||||
command: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
|
||||
isActive: () => editor.isActive("heading", { level: 1 }),
|
||||
},
|
||||
{
|
||||
name: "Heading 2",
|
||||
icon: IconH2,
|
||||
command: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
|
||||
isActive: () => editor.isActive("heading", { level: 2 }),
|
||||
},
|
||||
{
|
||||
name: "Heading 3",
|
||||
icon: IconH3,
|
||||
command: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
|
||||
isActive: () => editor.isActive("heading", { level: 3 }),
|
||||
},
|
||||
{
|
||||
name: "To-do List",
|
||||
icon: IconCheckbox,
|
||||
command: () => editor.chain().focus().toggleTaskList().run(),
|
||||
isActive: () => editor.isActive("taskItem"),
|
||||
},
|
||||
{
|
||||
name: "Bullet List",
|
||||
icon: IconList,
|
||||
command: () => editor.chain().focus().toggleBulletList().run(),
|
||||
isActive: () => editor.isActive("bulletList"),
|
||||
},
|
||||
{
|
||||
name: "Numbered List",
|
||||
icon: IconListNumbers,
|
||||
command: () => editor.chain().focus().toggleOrderedList().run(),
|
||||
isActive: () => editor.isActive("orderedList"),
|
||||
},
|
||||
{
|
||||
name: "Blockquote",
|
||||
icon: IconBlockquote,
|
||||
command: () =>
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.toggleNode("paragraph", "paragraph")
|
||||
.toggleBlockquote()
|
||||
.run(),
|
||||
isActive: () => editor.isActive("blockquote"),
|
||||
},
|
||||
{
|
||||
name: "Code",
|
||||
icon: IconCode,
|
||||
command: () => editor.chain().focus().toggleCodeBlock().run(),
|
||||
isActive: () => editor.isActive("codeBlock"),
|
||||
},
|
||||
];
|
||||
|
||||
const items: BubbleMenuItem[] = [
|
||||
{
|
||||
name: 'Text',
|
||||
icon: IconTypography,
|
||||
command: () =>
|
||||
editor.chain().focus().toggleNode('paragraph', 'paragraph').run(),
|
||||
isActive: () =>
|
||||
editor.isActive('paragraph') &&
|
||||
!editor.isActive('bulletList') &&
|
||||
!editor.isActive('orderedList'),
|
||||
},
|
||||
{
|
||||
name: 'Heading 1',
|
||||
icon: IconH1,
|
||||
command: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
|
||||
isActive: () => editor.isActive('heading', { level: 1 }),
|
||||
},
|
||||
{
|
||||
name: 'Heading 2',
|
||||
icon: IconH2,
|
||||
command: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
|
||||
isActive: () => editor.isActive('heading', { level: 2 }),
|
||||
},
|
||||
{
|
||||
name: 'Heading 3',
|
||||
icon: IconH3,
|
||||
command: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
|
||||
isActive: () => editor.isActive('heading', { level: 3 }),
|
||||
},
|
||||
{
|
||||
name: 'To-do List',
|
||||
icon: IconCheckbox,
|
||||
command: () => editor.chain().focus().toggleTaskList().run(),
|
||||
isActive: () => editor.isActive('taskItem'),
|
||||
},
|
||||
{
|
||||
name: 'Bullet List',
|
||||
icon: IconList,
|
||||
command: () => editor.chain().focus().toggleBulletList().run(),
|
||||
isActive: () => editor.isActive('bulletList'),
|
||||
},
|
||||
{
|
||||
name: 'Numbered List',
|
||||
icon: IconListNumbers,
|
||||
command: () => editor.chain().focus().toggleOrderedList().run(),
|
||||
isActive: () => editor.isActive('orderedList'),
|
||||
},
|
||||
{
|
||||
name: 'Blockquote',
|
||||
icon: IconBlockquote,
|
||||
command: () =>
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.toggleNode('paragraph', 'paragraph')
|
||||
.toggleBlockquote()
|
||||
.run(),
|
||||
isActive: () => editor.isActive('blockquote'),
|
||||
},
|
||||
{
|
||||
name: 'Code',
|
||||
icon: IconCode,
|
||||
command: () => editor.chain().focus().toggleCodeBlock().run(),
|
||||
isActive: () => editor.isActive('codeBlock'),
|
||||
},
|
||||
];
|
||||
|
||||
const activeItem = items.filter((item) => item.isActive()).pop() ?? {
|
||||
name: 'Multiple',
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover opened={isOpen} withArrow>
|
||||
|
||||
<Popover.Target>
|
||||
<Button variant="default" radius="0"
|
||||
rightSection={<IconChevronDown size={16} />}
|
||||
className={classes.colorButton}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
{activeItem?.name}
|
||||
</Button>
|
||||
|
||||
</Popover.Target>
|
||||
|
||||
<Popover.Dropdown>
|
||||
<ScrollArea.Autosize type="scroll" mah={400}>
|
||||
|
||||
<Button.Group orientation="vertical">
|
||||
|
||||
{items.map((item, index) => (
|
||||
|
||||
<Button
|
||||
key={index}
|
||||
variant="default"
|
||||
leftSection={<item.icon size={16} />}
|
||||
rightSection={activeItem.name === item.name
|
||||
&& (<IconCheck size={16} />)}
|
||||
justify="left"
|
||||
fullWidth
|
||||
onClick={() => {
|
||||
item.command();
|
||||
setIsOpen(false);
|
||||
}}
|
||||
style={{ border: 'none' }}
|
||||
>
|
||||
{item.name}
|
||||
</Button>
|
||||
))}
|
||||
|
||||
</Button.Group>
|
||||
</ScrollArea.Autosize>
|
||||
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
const activeItem = items.filter((item) => item.isActive()).pop() ?? {
|
||||
name: "Multiple",
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover opened={isOpen} withArrow>
|
||||
<Popover.Target>
|
||||
<Button
|
||||
variant="default"
|
||||
radius="0"
|
||||
rightSection={<IconChevronDown size={16} />}
|
||||
className={classes.colorButton}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
{activeItem?.name}
|
||||
</Button>
|
||||
</Popover.Target>
|
||||
|
||||
<Popover.Dropdown>
|
||||
<ScrollArea.Autosize type="scroll" mah={400}>
|
||||
<Button.Group orientation="vertical">
|
||||
{items.map((item, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant="default"
|
||||
leftSection={<item.icon size={16} />}
|
||||
rightSection={
|
||||
activeItem.name === item.name && <IconCheck size={16} />
|
||||
}
|
||||
justify="left"
|
||||
fullWidth
|
||||
onClick={() => {
|
||||
item.command();
|
||||
setIsOpen(false);
|
||||
}}
|
||||
style={{ border: "none" }}
|
||||
>
|
||||
{item.name}
|
||||
</Button>
|
||||
))}
|
||||
</Button.Group>
|
||||
</ScrollArea.Autosize>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
import { Editor } from '@tiptap/core';
|
||||
import { ReactRenderer } from '@tiptap/react';
|
||||
import CommandList from '@/features/editor/components/slash-menu/command-list';
|
||||
import tippy from 'tippy.js';
|
||||
import { ReactRenderer, useEditor } from "@tiptap/react";
|
||||
import CommandList from "@/features/editor/components/slash-menu/command-list";
|
||||
import tippy from "tippy.js";
|
||||
|
||||
const renderItems = () => {
|
||||
let component: ReactRenderer | null = null;
|
||||
let popup: any | null = null;
|
||||
|
||||
return {
|
||||
onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
|
||||
onStart: (props: {
|
||||
editor: ReturnType<typeof useEditor>;
|
||||
clientRect: DOMRect;
|
||||
}) => {
|
||||
component = new ReactRenderer(CommandList, {
|
||||
props,
|
||||
editor: props.editor,
|
||||
@ -19,17 +21,20 @@ const renderItems = () => {
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
popup = tippy('body', {
|
||||
popup = tippy("body", {
|
||||
getReferenceClientRect: props.clientRect,
|
||||
appendTo: () => document.body,
|
||||
content: component.element,
|
||||
showOnCreate: true,
|
||||
interactive: true,
|
||||
trigger: 'manual',
|
||||
placement: 'bottom-start',
|
||||
trigger: "manual",
|
||||
placement: "bottom-start",
|
||||
});
|
||||
},
|
||||
onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
|
||||
onUpdate: (props: {
|
||||
editor: ReturnType<typeof useEditor>;
|
||||
clientRect: DOMRect;
|
||||
}) => {
|
||||
component?.updateProps(props);
|
||||
|
||||
if (!props.clientRect) {
|
||||
@ -42,7 +47,7 @@ const renderItems = () => {
|
||||
});
|
||||
},
|
||||
onKeyDown: (props: { event: KeyboardEvent }) => {
|
||||
if (props.event.key === 'Escape') {
|
||||
if (props.event.key === "Escape") {
|
||||
popup?.[0].hide();
|
||||
|
||||
return true;
|
||||
|
||||
@ -1,16 +1,17 @@
|
||||
import { Editor, Range } from '@tiptap/core';
|
||||
import { Range } from "@tiptap/core";
|
||||
import { useEditor } from "@tiptap/react";
|
||||
|
||||
export type CommandProps = {
|
||||
editor: Editor;
|
||||
editor: ReturnType<typeof useEditor>;
|
||||
range: Range;
|
||||
}
|
||||
};
|
||||
|
||||
export type CommandListProps = {
|
||||
items: SlashMenuGroupedItemsType;
|
||||
command: (item: SlashMenuItemType) => void;
|
||||
editor: Editor;
|
||||
editor: ReturnType<typeof useEditor>;
|
||||
range: Range;
|
||||
}
|
||||
};
|
||||
|
||||
export type SlashMenuItemType = {
|
||||
title: string;
|
||||
@ -19,8 +20,8 @@ export type SlashMenuItemType = {
|
||||
separator?: true;
|
||||
searchTerms: string[];
|
||||
command: (props: CommandProps) => void;
|
||||
disable?: (editor: Editor) => boolean;
|
||||
}
|
||||
disable?: (editor: ReturnType<typeof useEditor>) => boolean;
|
||||
};
|
||||
|
||||
export type SlashMenuGroupedItemsType = {
|
||||
[category: string]: SlashMenuItemType[];
|
||||
|
||||
@ -1,35 +1,35 @@
|
||||
import { StarterKit } from '@tiptap/starter-kit';
|
||||
import { Placeholder } from '@tiptap/extension-placeholder';
|
||||
import { TextAlign } from '@tiptap/extension-text-align';
|
||||
import { TaskList } from '@tiptap/extension-task-list';
|
||||
import { TaskItem } from '@tiptap/extension-task-item';
|
||||
import { Underline } from '@tiptap/extension-underline';
|
||||
import { Link } from '@tiptap/extension-link';
|
||||
import { Superscript } from '@tiptap/extension-superscript';
|
||||
import SubScript from '@tiptap/extension-subscript';
|
||||
import { Highlight } from '@tiptap/extension-highlight';
|
||||
import { Typography } from '@tiptap/extension-typography';
|
||||
import DragAndDrop from '@/features/editor/extensions/drag-handle';
|
||||
import { TextStyle } from '@tiptap/extension-text-style';
|
||||
import { Color } from '@tiptap/extension-color';
|
||||
import SlashCommand from '@/features/editor/extensions/slash-command';
|
||||
import { Collaboration } from '@tiptap/extension-collaboration';
|
||||
import { CollaborationCursor } from '@tiptap/extension-collaboration-cursor';
|
||||
import { HocuspocusProvider } from '@hocuspocus/provider';
|
||||
import { Comment, TrailingNode } from '@docmost/editor-ext';
|
||||
import { StarterKit } from "@tiptap/starter-kit";
|
||||
import { Placeholder } from "@tiptap/extension-placeholder";
|
||||
import { TextAlign } from "@tiptap/extension-text-align";
|
||||
import { TaskList } from "@tiptap/extension-task-list";
|
||||
import { TaskItem } from "@tiptap/extension-task-item";
|
||||
import { Underline } from "@tiptap/extension-underline";
|
||||
import { Link } from "@tiptap/extension-link";
|
||||
import { Superscript } from "@tiptap/extension-superscript";
|
||||
import SubScript from "@tiptap/extension-subscript";
|
||||
import { Highlight } from "@tiptap/extension-highlight";
|
||||
import { Typography } from "@tiptap/extension-typography";
|
||||
import DragAndDrop from "@/features/editor/extensions/drag-handle";
|
||||
import { TextStyle } from "@tiptap/extension-text-style";
|
||||
import { Color } from "@tiptap/extension-color";
|
||||
import SlashCommand from "@/features/editor/extensions/slash-command";
|
||||
import { Collaboration } from "@tiptap/extension-collaboration";
|
||||
import { CollaborationCursor } from "@tiptap/extension-collaboration-cursor";
|
||||
import { HocuspocusProvider } from "@hocuspocus/provider";
|
||||
import { Comment, TrailingNode } from "@docmost/editor-ext";
|
||||
|
||||
export const mainExtensions = [
|
||||
StarterKit.configure({
|
||||
history: false,
|
||||
dropcursor: {
|
||||
width: 3,
|
||||
color: '#70CFF8',
|
||||
color: "#70CFF8",
|
||||
},
|
||||
}),
|
||||
Placeholder.configure({
|
||||
placeholder: 'Enter "/" for commands',
|
||||
}),
|
||||
TextAlign.configure({ types: ['heading', 'paragraph'] }),
|
||||
TextAlign.configure({ types: ["heading", "paragraph"] }),
|
||||
TaskList,
|
||||
TaskItem.configure({
|
||||
nested: true,
|
||||
@ -49,10 +49,10 @@ export const mainExtensions = [
|
||||
SlashCommand,
|
||||
Comment.configure({
|
||||
HTMLAttributes: {
|
||||
class: 'comment-mark',
|
||||
class: "comment-mark",
|
||||
},
|
||||
}),
|
||||
];
|
||||
] as any;
|
||||
|
||||
type CollabExtensions = (provider: HocuspocusProvider) => any[];
|
||||
|
||||
|
||||
@ -1,28 +1,38 @@
|
||||
import '@/features/editor/styles/index.css';
|
||||
import React, {
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { IndexeddbPersistence } from 'y-indexeddb';
|
||||
import * as Y from 'yjs';
|
||||
import { HocuspocusProvider } from '@hocuspocus/provider';
|
||||
import { EditorContent, useEditor } from '@tiptap/react';
|
||||
import { collabExtensions, mainExtensions } from '@/features/editor/extensions/extensions';
|
||||
import { useAtom } from 'jotai';
|
||||
import { authTokensAtom } from '@/features/auth/atoms/auth-tokens-atom';
|
||||
import useCollaborationUrl from '@/features/editor/hooks/use-collaboration-url';
|
||||
import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
|
||||
import { pageEditorAtom } from '@/features/editor/atoms/editor-atoms';
|
||||
import { asideStateAtom } from '@/components/navbar/atoms/sidebar-atom';
|
||||
import { activeCommentIdAtom, showCommentPopupAtom } from '@/features/comment/atoms/comment-atom';
|
||||
import CommentDialog from '@/features/comment/components/comment-dialog';
|
||||
import EditorSkeleton from '@/features/editor/components/editor-skeleton';
|
||||
import { EditorBubbleMenu } from '@/features/editor/components/bubble-menu/bubble-menu';
|
||||
import "@/features/editor/styles/index.css";
|
||||
import React, { useEffect, useLayoutEffect, useMemo, useState } from "react";
|
||||
import { IndexeddbPersistence } from "y-indexeddb";
|
||||
import * as Y from "yjs";
|
||||
import { HocuspocusProvider } from "@hocuspocus/provider";
|
||||
import { EditorContent, useEditor } from "@tiptap/react";
|
||||
import {
|
||||
collabExtensions,
|
||||
mainExtensions,
|
||||
} from "@/features/editor/extensions/extensions";
|
||||
import { useAtom } from "jotai";
|
||||
import { authTokensAtom } from "@/features/auth/atoms/auth-tokens-atom";
|
||||
import useCollaborationUrl from "@/features/editor/hooks/use-collaboration-url";
|
||||
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms";
|
||||
import { asideStateAtom } from "@/components/navbar/atoms/sidebar-atom";
|
||||
import {
|
||||
activeCommentIdAtom,
|
||||
showCommentPopupAtom,
|
||||
} from "@/features/comment/atoms/comment-atom";
|
||||
import CommentDialog from "@/features/comment/components/comment-dialog";
|
||||
import EditorSkeleton from "@/features/editor/components/editor-skeleton";
|
||||
import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubble-menu";
|
||||
|
||||
const colors = ['#958DF1', '#F98181', '#FBBC88', '#FAF594', '#70CFF8', '#94FADB', '#B9F18D'];
|
||||
const getRandomElement = list => list[Math.floor(Math.random() * list.length)];
|
||||
const colors = [
|
||||
"#958DF1",
|
||||
"#F98181",
|
||||
"#FBBC88",
|
||||
"#FAF594",
|
||||
"#70CFF8",
|
||||
"#94FADB",
|
||||
"#B9F18D",
|
||||
];
|
||||
const getRandomElement = (list) =>
|
||||
list[Math.floor(Math.random() * list.length)];
|
||||
const getRandomColor = () => getRandomElement(colors);
|
||||
|
||||
interface PageEditorProps {
|
||||
@ -30,7 +40,10 @@ interface PageEditorProps {
|
||||
editable?: boolean;
|
||||
}
|
||||
|
||||
export default function PageEditor({ pageId, editable = true }: PageEditorProps) {
|
||||
export default function PageEditor({
|
||||
pageId,
|
||||
editable = true,
|
||||
}: PageEditorProps) {
|
||||
const [token] = useAtom(authTokensAtom);
|
||||
const collaborationURL = useCollaborationUrl();
|
||||
const [currentUser] = useAtom(currentUserAtom);
|
||||
@ -46,12 +59,9 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
|
||||
const [isRemoteSynced, setRemoteSynced] = useState(false);
|
||||
|
||||
const localProvider = useMemo(() => {
|
||||
const provider = new IndexeddbPersistence(
|
||||
pageId,
|
||||
ydoc,
|
||||
);
|
||||
const provider = new IndexeddbPersistence(pageId, ydoc);
|
||||
|
||||
provider.on('synced', () => {
|
||||
provider.on("synced", () => {
|
||||
setLocalSynced(true);
|
||||
});
|
||||
|
||||
@ -67,7 +77,7 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
|
||||
connect: false,
|
||||
});
|
||||
|
||||
provider.on('synced', () => {
|
||||
provider.on("synced", () => {
|
||||
setRemoteSynced(true);
|
||||
});
|
||||
|
||||
@ -85,10 +95,7 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
|
||||
};
|
||||
}, [remoteProvider, localProvider]);
|
||||
|
||||
const extensions = [
|
||||
...mainExtensions,
|
||||
...collabExtensions(remoteProvider),
|
||||
];
|
||||
const extensions = [...mainExtensions, ...collabExtensions(remoteProvider)];
|
||||
|
||||
const editor = useEditor(
|
||||
{
|
||||
@ -97,8 +104,8 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
|
||||
editorProps: {
|
||||
handleDOMEvents: {
|
||||
keydown: (_view, event) => {
|
||||
if (['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {
|
||||
const slashCommand = document.querySelector('#slash-command');
|
||||
if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
|
||||
const slashCommand = document.querySelector("#slash-command");
|
||||
if (slashCommand) {
|
||||
return true;
|
||||
}
|
||||
@ -118,14 +125,18 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
|
||||
|
||||
useEffect(() => {
|
||||
if (editor && currentUser.user) {
|
||||
editor.chain().focus().updateUser({ ...currentUser.user, color: getRandomColor() }).run();
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.updateUser({ ...currentUser.user, color: getRandomColor() })
|
||||
.run();
|
||||
}
|
||||
}, [editor, currentUser.user]);
|
||||
|
||||
const handleActiveCommentEvent = (event) => {
|
||||
const { commentId } = event.detail;
|
||||
setActiveCommentId(commentId);
|
||||
setAsideState({ tab: 'comments', isAsideOpen: true });
|
||||
setAsideState({ tab: "comments", isAsideOpen: true });
|
||||
|
||||
const selector = `div[data-comment-id="${commentId}"]`;
|
||||
const commentElement = document.querySelector(selector);
|
||||
@ -133,16 +144,19 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('ACTIVE_COMMENT_EVENT', handleActiveCommentEvent);
|
||||
document.addEventListener("ACTIVE_COMMENT_EVENT", handleActiveCommentEvent);
|
||||
return () => {
|
||||
document.removeEventListener('ACTIVE_COMMENT_EVENT', handleActiveCommentEvent);
|
||||
document.removeEventListener(
|
||||
"ACTIVE_COMMENT_EVENT",
|
||||
handleActiveCommentEvent,
|
||||
);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setActiveCommentId(null);
|
||||
setShowCommentPopup(false);
|
||||
setAsideState({ tab: '', isAsideOpen: false });
|
||||
setAsideState({ tab: "", isAsideOpen: false });
|
||||
}, [pageId]);
|
||||
|
||||
const isSynced = isLocalSynced || isRemoteSynced;
|
||||
@ -165,6 +179,7 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : <EditorSkeleton />;
|
||||
|
||||
) : (
|
||||
<EditorSkeleton />
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user