binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-436] chore: added h4 to h6 heading options (#4304)

Browse source 
* chore: added h4 to h6 heading options

* fix: build errors
This commit is contained in:
Aaryan Khandelwal 2024-04-29 16:04:37 +05:30 • committed by GitHub
parent 49a6c9582c
commit 84fd1dca4b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 227 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

37
web/components/pages/editor/header/toolbar.tsx
View file

@ -1,10 +1,11 @@
import React, { useEffect, useState, useCallback } from "react";
import { Check, ChevronDown } from "lucide-react";
// editor
import { EditorMenuItemNames, EditorRefApi } from "@plane/document-editor";
// ui
import { Tooltip } from "@plane/ui";
import { CustomMenu, Tooltip } from "@plane/ui";
// constants
import { TOOLBAR_ITEMS, ToolbarMenuItem } from "@/constants/editor";
import { TOOLBAR_ITEMS, TYPOGRAPHY_ITEMS, ToolbarMenuItem } from "@/constants/editor";
// helpers
import { cn } from "@/helpers/common.helper";
@ -34,12 +35,12 @@ const ToolbarButton: React.FC<ToolbarButtonProps> = React.memo((props) => {
key={item.key}
type="button"
onClick={() => executeCommand(item.key)}
className={cn("grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80", {
className={cn("grid size-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80", {
"bg-custom-background-80 text-custom-text-100": isActive,
})}
>
<item.icon
className={cn("h-4 w-4", {
className={cn("size-4", {
"text-custom-text-100": isActive,
})}
/>
@ -71,8 +72,36 @@ export const PageToolbar: React.FC<Props> = ({ editorRef }) => {
return () => unsubscribe();
}, [editorRef, updateActiveStates]);
const activeTypography = TYPOGRAPHY_ITEMS.find((item) => editorRef.isMenuItemActive(item.key));
return (
<div className="flex flex-wrap items-center divide-x divide-custom-border-200">
<CustomMenu
customButton={
<span className="text-custom-text-300 text-sm border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 h-7 w-24 rounded px-2 flex items-center justify-between gap-2 whitespace-nowrap text-left">
{activeTypography?.name || "Text"}
<ChevronDown className="flex-shrink-0 size-3" />
</span>
}
className="pr-2"
placement="bottom-start"
closeOnSelect
maxHeight="lg"
>
{TYPOGRAPHY_ITEMS.map((item) => (
<CustomMenu.MenuItem
key={item.key}
className="flex items-center justify-between gap-2"
onClick={() => editorRef.executeMenuItemCommand(item.key)}
>
<span className="flex items-center gap-2">
<item.icon className="size-3" />
{item.name}
</span>
{activeTypography?.key === item.key && <Check className="size-3 text-custom-text-300 flex-shrink-0" />}
</CustomMenu.MenuItem>
))}
</CustomMenu>
{Object.keys(toolbarItems).map((key) => (
<div key={key} className="flex items-center gap-0.5 px-2 first:pl-0 last:pr-0">
{toolbarItems[key].map((item) => (

33
web/constants/editor.ts
View file

@ -1,9 +1,13 @@
import {
Bold,
CaseSensitive,
Code2,
Heading1,
Heading2,
Heading3,
Heading4,
Heading5,
Heading6,
Image,
Italic,
List,
@ -28,15 +32,22 @@ export type ToolbarMenuItem = {
editors: TEditorTypes[];
};
export const BASIC_MARK_ITEMS: ToolbarMenuItem[] = [
{ key: "H1", name: "Heading 1", icon: Heading1, editors: ["document"] },
{ key: "H2", name: "Heading 2", icon: Heading2, editors: ["document"] },
{ key: "H3", name: "Heading 3", icon: Heading3, editors: ["document"] },
export const TYPOGRAPHY_ITEMS: ToolbarMenuItem[] = [
{ key: "text", name: "Text", icon: CaseSensitive, editors: ["document"] },
{ key: "h1", name: "Heading 1", icon: Heading1, editors: ["document"] },
{ key: "h2", name: "Heading 2", icon: Heading2, editors: ["document"] },
{ key: "h3", name: "Heading 3", icon: Heading3, editors: ["document"] },
{ key: "h4", name: "Heading 4", icon: Heading4, editors: ["document"] },
{ key: "h5", name: "Heading 5", icon: Heading5, editors: ["document"] },
{ key: "h6", name: "Heading 6", icon: Heading6, editors: ["document"] },
];
const BASIC_MARK_ITEMS: ToolbarMenuItem[] = [
{ key: "bold", name: "Bold", icon: Bold, shortcut: ["Cmd", "B"], editors: ["lite", "document"] },
{ key: "italic", name: "Italic", icon: Italic, shortcut: ["Cmd", "I"], editors: ["lite", "document"] },
{ key: "underline", name: "Underline", icon: Underline, shortcut: ["Cmd", "U"], editors: ["lite", "document"] },
{
key: "strike",
key: "strikethrough",
name: "Strikethrough",
icon: Strikethrough,
shortcut: ["Cmd", "Shift", "S"],
@ -44,23 +55,23 @@ export const BASIC_MARK_ITEMS: ToolbarMenuItem[] = [
},
];
export const LIST_ITEMS: ToolbarMenuItem[] = [
const LIST_ITEMS: ToolbarMenuItem[] = [
{
key: "bullet-list",
key: "bulleted-list",
name: "Bulleted list",
icon: List,
shortcut: ["Cmd", "Shift", "7"],
editors: ["lite", "document"],
},
{
key: "ordered-list",
key: "numbered-list",
name: "Numbered list",
icon: ListOrdered,
shortcut: ["Cmd", "Shift", "8"],
editors: ["lite", "document"],
},
{
key: "To-do List",
key: "to-do-list",
name: "To-do list",
icon: ListTodo,
shortcut: ["Cmd", "Shift", "9"],
@ -68,12 +79,12 @@ export const LIST_ITEMS: ToolbarMenuItem[] = [
},
];
export const USER_ACTION_ITEMS: ToolbarMenuItem[] = [
const USER_ACTION_ITEMS: ToolbarMenuItem[] = [
{ key: "quote", name: "Quote", icon: Quote, editors: ["lite", "document"] },
{ key: "code", name: "Code", icon: Code2, editors: ["lite", "document"] },
];
export const COMPLEX_ITEMS: ToolbarMenuItem[] = [
const COMPLEX_ITEMS: ToolbarMenuItem[] = [
{ key: "table", name: "Table", icon: Table, editors: ["document"] },
{ key: "image", name: "Image", icon: Image, editors: ["lite", "document"] },
];