plane/apps/app/components/tiptap/bubble-menu/index.tsx

120 lines
3.4 KiB
TypeScript
Raw Normal View History

feat : Tiptap integration (#1832) * remirror instances commented out to avoid prosemirror conflicts * styles migrated for remirror to tiptap transition * added bubblemenu support with extensions * fixed css for task lists and code with syntax highlighting * added support for slash command * fixed bubble menu to match styles and added better seperation in UI * saving with debounce logic added and it's stored in backend * added migration support by updating to html * Image uploads done * improved file structure and delete image function implemented * Integrated tiptap with Issue Modal * added additional props and Tiptap Integration with Comments * added tiptap integration with user activity feeds * added ref control support and bubble menu support for readonly editor * added tiptap support for plane pages * added tiptap support to gpt assistant modal (yet to be tested) * removed remirror instances and cleaned up code * improved code structure for extracting props in Tiptap * fixing ts errors for next build * fixing node ts error for Horizontal Rule * added ts fix for node types * temp fix * temp fix * added min height for issue description in modal * added resolutions to prosemirror-model version * trying pnpm overrides * explicitly added prosemirror deps * bugfixes * removed extra gap at the top and moved saved indicator to the bottom * fix: slash command scroll position * chore: update custom css variables * matched theme colours * fixed gpt-assistant modal * updated yarn lock * added debounced updates for the title and removed saved state after timeout * added css animations for saved state * build fixes and remove remirror instances * minor commenting fixes --------- Co-authored-by: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com> Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2023-08-15 09:34:46 +00:00
import { BubbleMenu, BubbleMenuProps } from "@tiptap/react";
import { FC, useState } from "react";
import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon } from "lucide-react";
import { NodeSelector } from "./node-selector";
import { LinkSelector } from "./link-selector";
import { cn } from "../utils";
export interface BubbleMenuItem {
name: string;
isActive: () => boolean;
command: () => void;
icon: typeof BoldIcon;
}
type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children">;
export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
const items: BubbleMenuItem[] = [
{
name: "bold",
isActive: () => props.editor.isActive("bold"),
command: () => props.editor.chain().focus().toggleBold().run(),
icon: BoldIcon,
},
{
name: "italic",
isActive: () => props.editor.isActive("italic"),
command: () => props.editor.chain().focus().toggleItalic().run(),
icon: ItalicIcon,
},
{
name: "underline",
isActive: () => props.editor.isActive("underline"),
command: () => props.editor.chain().focus().toggleUnderline().run(),
icon: UnderlineIcon,
},
{
name: "strike",
isActive: () => props.editor.isActive("strike"),
command: () => props.editor.chain().focus().toggleStrike().run(),
icon: StrikethroughIcon,
},
{
name: "code",
isActive: () => props.editor.isActive("code"),
command: () => props.editor.chain().focus().toggleCode().run(),
icon: CodeIcon,
},
];
const bubbleMenuProps: EditorBubbleMenuProps = {
...props,
shouldShow: ({ editor }) => {
if (!editor.isEditable) {
return false;
}
if (editor.isActive("image")) {
return false;
}
return editor.view.state.selection.content().size > 0;
},
tippyOptions: {
moveTransition: "transform 0.15s ease-out",
onHidden: () => {
setIsNodeSelectorOpen(false);
setIsLinkSelectorOpen(false);
},
},
};
const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
return (
<BubbleMenu
{...bubbleMenuProps}
className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
>
<NodeSelector
editor={props.editor}
isOpen={isNodeSelectorOpen}
setIsOpen={() => {
setIsNodeSelectorOpen(!isNodeSelectorOpen);
setIsLinkSelectorOpen(false);
}}
/>
<LinkSelector
editor={props.editor}
isOpen={isLinkSelectorOpen}
setIsOpen={() => {
setIsLinkSelectorOpen(!isLinkSelectorOpen);
setIsNodeSelectorOpen(false);
}}
/>
<div className="flex">
{items.map((item, index) => (
<button
key={index}
2023-08-16 12:55:11 +00:00
type="button"
feat : Tiptap integration (#1832) * remirror instances commented out to avoid prosemirror conflicts * styles migrated for remirror to tiptap transition * added bubblemenu support with extensions * fixed css for task lists and code with syntax highlighting * added support for slash command * fixed bubble menu to match styles and added better seperation in UI * saving with debounce logic added and it's stored in backend * added migration support by updating to html * Image uploads done * improved file structure and delete image function implemented * Integrated tiptap with Issue Modal * added additional props and Tiptap Integration with Comments * added tiptap integration with user activity feeds * added ref control support and bubble menu support for readonly editor * added tiptap support for plane pages * added tiptap support to gpt assistant modal (yet to be tested) * removed remirror instances and cleaned up code * improved code structure for extracting props in Tiptap * fixing ts errors for next build * fixing node ts error for Horizontal Rule * added ts fix for node types * temp fix * temp fix * added min height for issue description in modal * added resolutions to prosemirror-model version * trying pnpm overrides * explicitly added prosemirror deps * bugfixes * removed extra gap at the top and moved saved indicator to the bottom * fix: slash command scroll position * chore: update custom css variables * matched theme colours * fixed gpt-assistant modal * updated yarn lock * added debounced updates for the title and removed saved state after timeout * added css animations for saved state * build fixes and remove remirror instances * minor commenting fixes --------- Co-authored-by: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com> Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2023-08-15 09:34:46 +00:00
onClick={item.command}
2023-08-16 12:55:11 +00:00
className={cn(
"p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
{
"text-custom-text-100 bg-custom-primary-100/5": item.isActive(),
}
)}
feat : Tiptap integration (#1832) * remirror instances commented out to avoid prosemirror conflicts * styles migrated for remirror to tiptap transition * added bubblemenu support with extensions * fixed css for task lists and code with syntax highlighting * added support for slash command * fixed bubble menu to match styles and added better seperation in UI * saving with debounce logic added and it's stored in backend * added migration support by updating to html * Image uploads done * improved file structure and delete image function implemented * Integrated tiptap with Issue Modal * added additional props and Tiptap Integration with Comments * added tiptap integration with user activity feeds * added ref control support and bubble menu support for readonly editor * added tiptap support for plane pages * added tiptap support to gpt assistant modal (yet to be tested) * removed remirror instances and cleaned up code * improved code structure for extracting props in Tiptap * fixing ts errors for next build * fixing node ts error for Horizontal Rule * added ts fix for node types * temp fix * temp fix * added min height for issue description in modal * added resolutions to prosemirror-model version * trying pnpm overrides * explicitly added prosemirror deps * bugfixes * removed extra gap at the top and moved saved indicator to the bottom * fix: slash command scroll position * chore: update custom css variables * matched theme colours * fixed gpt-assistant modal * updated yarn lock * added debounced updates for the title and removed saved state after timeout * added css animations for saved state * build fixes and remove remirror instances * minor commenting fixes --------- Co-authored-by: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com> Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2023-08-15 09:34:46 +00:00
>
<item.icon
className={cn("h-4 w-4", {
"text-custom-text-100": item.isActive(),
})}
/>
</button>
))}
</div>
</BubbleMenu>
);
};