thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: update the ui of the slash command menu

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-12-09 17:26:47 +05:30
parent d16a6402cd
commit 842048b2f2
5 changed files with 175 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/editor/document-editor/src/ui/extensions/index.tsx
View File

@ -15,12 +15,13 @@ export const DocumentEditorExtensions = (
isSubmitting: "submitting" | "submitted" | "saved", isSubmitting: "submitting" | "submitted" | "saved",
) => void, ) => void,
) => { ) => {
const additonalOptions: ISlashCommandItem[] = [ const additionalOptions: ISlashCommandItem[] = [
{ {
title: "Issue Embed", key: "issue_embed",
description: "Embed an issue from the project", title: "Issue embed",
searchTerms: ["Issue", "Iss"], description: "Embed an issue from the project.",
icon: <LayersIcon height={"20px"} width={"20px"} />, searchTerms: ["issue", "link", "embed"],
icon: <LayersIcon className="h-3.5 w-3.5" />,
command: ({ editor, range }) => { command: ({ editor, range }) => {
editor editor
.chain() .chain()
@ -35,7 +36,7 @@ export const DocumentEditorExtensions = (
]; ];
return [ return [
SlashCommand(uploadFile, setIsSubmitting, additonalOptions), SlashCommand(uploadFile, setIsSubmitting, additionalOptions),
DragAndDrop, DragAndDrop,
Placeholder.configure({ Placeholder.configure({
placeholder: ({ node }) => { placeholder: ({ node }) => {

2
packages/editor/extensions/package.json
View File

@ -35,7 +35,7 @@
"@plane/editor-core": "*", "@plane/editor-core": "*",
"eslint": "8.36.0", "eslint": "8.36.0",
"eslint-config-next": "13.2.4", "eslint-config-next": "13.2.4",
"lucide-react": "^0.244.0", "lucide-react": "^0.249.0",
"tippy.js": "^6.3.7", "tippy.js": "^6.3.7",
"@tiptap/pm": "^2.1.7" "@tiptap/pm": "^2.1.7"
}, },

303
packages/editor/extensions/src/extensions/slash-commands.tsx
View File

@ -10,19 +10,23 @@ import { Editor, Range, Extension } from "@tiptap/core";
import Suggestion from "@tiptap/suggestion"; import Suggestion from "@tiptap/suggestion";
import { ReactRenderer } from "@tiptap/react"; import { ReactRenderer } from "@tiptap/react";
import tippy from "tippy.js"; import tippy from "tippy.js";
import type { UploadImage, ISlashCommandItem, CommandProps } from "@plane/editor-types"; import type {
UploadImage,
ISlashCommandItem,
CommandProps,
} from "@plane/editor-types";
import { import {
CaseSensitive,
Code2,
Heading1, Heading1,
Heading2, Heading2,
Heading3, Heading3,
ImageIcon,
List, List,
ListOrdered, ListOrdered,
Text, ListTodo,
TextQuote,
Code,
MinusSquare, MinusSquare,
CheckSquare, Quote,
ImageIcon,
Table, Table,
} from "lucide-react"; } from "lucide-react";
import { import {
@ -39,6 +43,7 @@ import {
} from "@plane/editor-core"; } from "@plane/editor-core";
interface CommandItemProps { interface CommandItemProps {
key: string;
title: string; title: string;
description: string; description: string;
icon: ReactNode; icon: ReactNode;
@ -83,146 +88,158 @@ const getSuggestionItems =
setIsSubmitting?: ( setIsSubmitting?: (
isSubmitting: "submitting" | "submitted" | "saved", isSubmitting: "submitting" | "submitted" | "saved",
) => void, ) => void,
additonalOptions?: Array<ISlashCommandItem> additionalOptions?: Array<ISlashCommandItem>,
) => ) =>
({ query }: { query: string }) => { ({ query }: { query: string }) => {
let slashCommands: ISlashCommandItem[] = [ let slashCommands: ISlashCommandItem[] = [
{ {
title: "Text", key: "text",
description: "Just start typing with plain text.", title: "Text",
searchTerms: ["p", "paragraph"], description: "Just start typing with plain text.",
icon: <Text size={18} />, searchTerms: ["p", "paragraph"],
command: ({ editor, range }: CommandProps) => { icon: <CaseSensitive className="h-3.5 w-3.5" />,
editor command: ({ editor, range }: CommandProps) => {
.chain() editor
.focus() .chain()
.deleteRange(range) .focus()
.toggleNode("paragraph", "paragraph") .deleteRange(range)
.run(); .toggleNode("paragraph", "paragraph")
}, .run();
}, },
{ },
title: "Heading 1", {
description: "Big section heading.", key: "heading_1",
searchTerms: ["title", "big", "large"], title: "Heading 1",
icon: <Heading1 size={18} />, description: "Big section heading.",
command: ({ editor, range }: CommandProps) => { searchTerms: ["title", "big", "large"],
toggleHeadingOne(editor, range); icon: <Heading1 className="h-3.5 w-3.5" />,
}, command: ({ editor, range }: CommandProps) => {
toggleHeadingOne(editor, range);
}, },
{ },
title: "Heading 2", {
description: "Medium section heading.", key: "heading_2",
searchTerms: ["subtitle", "medium"], title: "Heading 2",
icon: <Heading2 size={18} />, description: "Medium section heading.",
command: ({ editor, range }: CommandProps) => { searchTerms: ["subtitle", "medium"],
toggleHeadingTwo(editor, range); icon: <Heading2 className="h-3.5 w-3.5" />,
}, command: ({ editor, range }: CommandProps) => {
toggleHeadingTwo(editor, range);
}, },
{ },
title: "Heading 3", {
description: "Small section heading.", key: "heading_3",
searchTerms: ["subtitle", "small"], title: "Heading 3",
icon: <Heading3 size={18} />, description: "Small section heading.",
command: ({ editor, range }: CommandProps) => { searchTerms: ["subtitle", "small"],
toggleHeadingThree(editor, range); icon: <Heading3 className="h-3.5 w-3.5" />,
}, command: ({ editor, range }: CommandProps) => {
toggleHeadingThree(editor, range);
}, },
{ },
title: "To-do List", {
description: "Track tasks with a to-do list.", key: "todo_list",
searchTerms: ["todo", "task", "list", "check", "checkbox"], title: "To do",
icon: <CheckSquare size={18} />, description: "Track tasks with a to-do list.",
command: ({ editor, range }: CommandProps) => { searchTerms: ["todo", "task", "list", "check", "checkbox"],
toggleTaskList(editor, range); icon: <ListTodo className="h-3.5 w-3.5" />,
}, command: ({ editor, range }: CommandProps) => {
toggleTaskList(editor, range);
}, },
{ },
title: "Bullet List", {
description: "Create a simple bullet list.", key: "bullet_list",
searchTerms: ["unordered", "point"], title: "Bullet list",
icon: <List size={18} />, description: "Create a simple bullet list.",
command: ({ editor, range }: CommandProps) => { searchTerms: ["unordered", "point"],
toggleBulletList(editor, range); icon: <List className="h-3.5 w-3.5" />,
}, command: ({ editor, range }: CommandProps) => {
toggleBulletList(editor, range);
}, },
{ },
title: "Divider", {
description: "Visually divide blocks", key: "numbered_list",
searchTerms: ["line", "divider", "horizontal", "rule", "separate"], title: "Numbered list",
icon: <MinusSquare size={18} />, description: "Create a list with numbering.",
command: ({ editor, range }: CommandProps) => { searchTerms: ["ordered"],
// @ts-expect-error I have to move this to the core icon: <ListOrdered className="h-3.5 w-3.5" />,
editor.chain().focus().deleteRange(range).setHorizontalRule().run(); command: ({ editor, range }: CommandProps) => {
}, toggleOrderedList(editor, range);
}, },
{ },
title: "Table", {
description: "Create a Table", key: "table",
searchTerms: ["table", "cell", "db", "data", "tabular"], title: "Table",
icon: <Table size={18} />, description: "Create a table",
command: ({ editor, range }: CommandProps) => { searchTerms: ["table", "cell", "db", "data", "tabular"],
insertTableCommand(editor, range); icon: <Table className="h-3.5 w-3.5" />,
}, command: ({ editor, range }: CommandProps) => {
insertTableCommand(editor, range);
}, },
{ },
title: "Numbered List", {
description: "Create a list with numbering.", key: "quote_block",
searchTerms: ["ordered"], title: "Quote",
icon: <ListOrdered size={18} />, description: "Capture a quote.",
command: ({ editor, range }: CommandProps) => { searchTerms: ["blockquote"],
toggleOrderedList(editor, range); icon: <Quote className="h-3.5 w-3.5" />,
}, command: ({ editor, range }: CommandProps) =>
toggleBlockquote(editor, range),
},
{
key: "code_block",
title: "Code",
description: "Capture a code snippet.",
searchTerms: ["codeblock"],
icon: <Code2 className="h-3.5 w-3.5" />,
command: ({ editor, range }: CommandProps) =>
// @ts-expect-error I have to move this to the core
editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
},
{
key: "image",
title: "Image",
description: "Upload an image from your computer.",
searchTerms: ["photo", "picture", "media"],
icon: <ImageIcon className="h-3.5 w-3.5" />,
command: ({ editor, range }: CommandProps) => {
insertImageCommand(editor, uploadFile, setIsSubmitting, range);
}, },
{ },
title: "Quote", {
description: "Capture a quote.", key: "divider",
searchTerms: ["blockquote"], title: "Divider",
icon: <TextQuote size={18} />, description: "Visually divide blocks.",
command: ({ editor, range }: CommandProps) => searchTerms: ["line", "divider", "horizontal", "rule", "separate"],
toggleBlockquote(editor, range), icon: <MinusSquare className="h-3.5 w-3.5" />,
command: ({ editor, range }: CommandProps) => {
// @ts-expect-error I have to move this to the core
editor.chain().focus().deleteRange(range).setHorizontalRule().run();
}, },
{ },
title: "Code", ];
description: "Capture a code snippet.",
searchTerms: ["codeblock"],
icon: <Code size={18} />,
command: ({ editor, range }: CommandProps) =>
// @ts-expect-error I have to move this to the core
editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
},
{
title: "Image",
description: "Upload an image from your computer.",
searchTerms: ["photo", "picture", "media"],
icon: <ImageIcon size={18} />,
command: ({ editor, range }: CommandProps) => {
insertImageCommand(editor, uploadFile, setIsSubmitting, range);
},
},
]
if (additonalOptions) { if (additionalOptions) {
additonalOptions.map(item => { additionalOptions.map((item) => {
slashCommands.push(item) slashCommands.push(item);
}) });
}
slashCommands = slashCommands.filter((item) => {
if (typeof query === "string" && query.length > 0) {
const search = query.toLowerCase();
return (
item.title.toLowerCase().includes(search) ||
item.description.toLowerCase().includes(search) ||
(item.searchTerms &&
item.searchTerms.some((term: string) => term.includes(search)))
);
} }
return true;
});
slashCommands = slashCommands.filter((item) => { return slashCommands;
if (typeof query === "string" && query.length > 0) { };
const search = query.toLowerCase();
return (
item.title.toLowerCase().includes(search) ||
item.description.toLowerCase().includes(search) ||
(item.searchTerms &&
item.searchTerms.some((term: string) => term.includes(search)))
);
}
return true;
})
return slashCommands
};
export const updateScrollView = (container: HTMLElement, item: HTMLElement) => { export const updateScrollView = (container: HTMLElement, item: HTMLElement) => {
const containerHeight = container.offsetHeight; const containerHeight = container.offsetHeight;
@ -303,27 +320,23 @@ const CommandList = ({
<div <div
id="slash-command" id="slash-command"
ref={commandListContainer} ref={commandListContainer}
className="z-50 fixed h-auto max-h-[330px] w-72 overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-100 px-1 py-2 shadow-md transition-all" className="z-50 fixed h-auto max-h-[330px] w-52 overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-100 px-1 py-2 shadow-md transition-all"
> >
{items.map((item: CommandItemProps, index: number) => ( {items.map((item, index) => (
<button <button
key={item.key}
className={cn( className={cn(
`flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100`, `w-full flex items-center gap-2 rounded-md px-2.5 py-1.5 text-sm text-custom-text-100 hover:bg-custom-primary-100/5`,
{ {
"bg-custom-primary-100/5 text-custom-text-100": "bg-custom-primary-100/5": index === selectedIndex,
index === selectedIndex,
}, },
)} )}
key={index}
onClick={() => selectItem(index)} onClick={() => selectItem(index)}
> >
<div className="flex h-10 w-10 items-center justify-center rounded-md border border-custom-border-300 bg-custom-background-100"> <div className="flex-shrink-0 grid place-items-center">
{item.icon} {item.icon}
</div> </div>
<div> <p>{item.title}</p>
<p className="font-medium">{item.title}</p>
<p className="text-xs text-custom-text-300">{item.description}</p>
</div>
</button> </button>
))} ))}
</div> </div>
@ -383,11 +396,11 @@ export const SlashCommand = (
setIsSubmitting?: ( setIsSubmitting?: (
isSubmitting: "submitting" | "submitted" | "saved", isSubmitting: "submitting" | "submitted" | "saved",
) => void, ) => void,
additonalOptions?: Array<ISlashCommandItem>, additionalOptions?: Array<ISlashCommandItem>,
) => ) =>
Command.configure({ Command.configure({
suggestion: { suggestion: {
items: getSuggestionItems(uploadFile, setIsSubmitting, additonalOptions), items: getSuggestionItems(uploadFile, setIsSubmitting, additionalOptions),
render: renderItems, render: renderItems,
}, },
}); });

7
packages/editor/types/src/types/slash-commands-suggestion.ts
View File

@ -1,15 +1,16 @@
import { ReactNode } from "react"; import { ReactNode } from "react";
import { Editor, Range } from "@tiptap/core" import { Editor, Range } from "@tiptap/core";
export type CommandProps = { export type CommandProps = {
editor: Editor; editor: Editor;
range: Range; range: Range;
} };
export type ISlashCommandItem = { export type ISlashCommandItem = {
key: string;
title: string; title: string;
description: string; description: string;
searchTerms: string[]; searchTerms: string[];
icon: ReactNode; icon: ReactNode;
command: ({ editor, range }: CommandProps) => void; command: ({ editor, range }: CommandProps) => void;
} };

5
yarn.lock
View File

@ -6078,6 +6078,11 @@ lucide-react@^0.244.0:
resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.244.0.tgz#9626f44881830280012dad23afda7ddbcffff24b" resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.244.0.tgz#9626f44881830280012dad23afda7ddbcffff24b"
integrity sha512-PeDVbx5PlIRrVvdxiuSxPfBo7sK5qrL3LbvvRoGVNiHYRAkBm/48lKqoioxcmp0bgsyJs9lMw7CdtGFvnMJbVg== integrity sha512-PeDVbx5PlIRrVvdxiuSxPfBo7sK5qrL3LbvvRoGVNiHYRAkBm/48lKqoioxcmp0bgsyJs9lMw7CdtGFvnMJbVg==
lucide-react@^0.249.0:
version "0.249.0"
resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.249.0.tgz#6914c70220d9bdd69015d7b2009fb358a716c909"
integrity sha512-vBvk6aEz7c/v3moYejn3CbIZ9jtn8aDhtT+N9nao71MycQqZB9QtQ0U0WEnB58856A5boKtSUEkjF9NwkM04gA==
lucide-react@^0.293.0: lucide-react@^0.293.0:
version "0.293.0" version "0.293.0"
resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.293.0.tgz#02703dbcc56bb38779f4e576cc03be8cc0046fcc" resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.293.0.tgz#02703dbcc56bb38779f4e576cc03be8cc0046fcc"