From d43db7fc88fd5442773c26aac5c7ba76a2b665c0 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Wed, 22 Nov 2023 12:32:49 +0530 Subject: [PATCH] style: revamped page details UI (#2823) * style: revamp page details UI * chore: updated the info popover date format * fix: page actions mutation * style: made the page content responsive --- .../src/ui/components/alert-label.tsx | 26 +-- .../src/ui/components/content-browser.tsx | 58 +++---- .../src/ui/components/editor-header.tsx | 149 +++++++++-------- .../src/ui/components/index.ts | 9 ++ .../src/ui/components/info-popover.tsx | 79 +++++++++ .../src/ui/components/page-renderer.tsx | 49 +++--- .../src/ui/components/popover.tsx | 67 -------- .../src/ui/components/summary-popover.tsx | 57 +++++++ .../src/ui/components/summary-side-bar.tsx | 29 ++-- .../ui/components/vertical-dropdown-menu.tsx | 65 ++++---- .../editor/document-editor/src/ui/index.tsx | 140 ++++++++-------- .../src/ui/menu/fixed-menu.tsx | 117 +++++++------- .../document-editor/src/ui/readonly/index.tsx | 95 +++++------ .../src/ui/utils/menu-options.ts | 95 ++++++----- .../projects/[projectId]/pages/[pageId].tsx | 151 +++++++++--------- 15 files changed, 662 insertions(+), 524 deletions(-) create mode 100644 packages/editor/document-editor/src/ui/components/index.ts create mode 100644 packages/editor/document-editor/src/ui/components/info-popover.tsx delete mode 100644 packages/editor/document-editor/src/ui/components/popover.tsx create mode 100644 packages/editor/document-editor/src/ui/components/summary-popover.tsx diff --git a/packages/editor/document-editor/src/ui/components/alert-label.tsx b/packages/editor/document-editor/src/ui/components/alert-label.tsx index 7246647bc..0f0a238ba 100644 --- a/packages/editor/document-editor/src/ui/components/alert-label.tsx +++ b/packages/editor/document-editor/src/ui/components/alert-label.tsx @@ -1,19 +1,21 @@ -import { Icon } from "lucide-react" +import { Icon } from "lucide-react"; interface IAlertLabelProps { - Icon: Icon, - backgroundColor: string, - textColor?: string, - label: string, + Icon?: Icon; + backgroundColor: string; + textColor?: string; + label: string; } -export const AlertLabel = ({ Icon, backgroundColor,textColor, label }: IAlertLabelProps) => { +export const AlertLabel = (props: IAlertLabelProps) => { + const { Icon, backgroundColor, textColor, label } = props; return ( -
- - {label} +
+ {Icon && } + {label}
- ) - -} + ); +}; diff --git a/packages/editor/document-editor/src/ui/components/content-browser.tsx b/packages/editor/document-editor/src/ui/components/content-browser.tsx index 755d67b2d..bb0e3fb8b 100644 --- a/packages/editor/document-editor/src/ui/components/content-browser.tsx +++ b/packages/editor/document-editor/src/ui/components/content-browser.tsx @@ -8,33 +8,33 @@ interface ContentBrowserProps { markings: IMarking[]; } -export const ContentBrowser = ({ - editor, - markings, -}: ContentBrowserProps) => ( -
-

- Table of Contents -

-
- {markings.length !== 0 ? ( - markings.map((marking) => - marking.level === 1 ? ( - scrollSummary(editor, marking)} - heading={marking.text} - /> +export const ContentBrowser = (props: ContentBrowserProps) => { + const { editor, markings } = props; + + return ( +
+

Table of Contents

+
+ {markings.length !== 0 ? ( + markings.map((marking) => + marking.level === 1 ? ( + scrollSummary(editor, marking)} + heading={marking.text} + /> + ) : ( + scrollSummary(editor, marking)} + subHeading={marking.text} + /> + ), + ) ) : ( - scrollSummary(editor, marking)} - subHeading={marking.text} - /> - ) - ) - ) : ( -

- {"Headings will be displayed here for Navigation"} -

- )} -
-); +

+ Headings will be displayed here for navigation +

+ )} +
+
+ ); +}; diff --git a/packages/editor/document-editor/src/ui/components/editor-header.tsx b/packages/editor/document-editor/src/ui/components/editor-header.tsx index 32ebe43c9..e16f6768d 100644 --- a/packages/editor/document-editor/src/ui/components/editor-header.tsx +++ b/packages/editor/document-editor/src/ui/components/editor-header.tsx @@ -1,79 +1,90 @@ -import { Editor } from "@tiptap/react" -import { Lock, ArchiveIcon, MenuSquare } from "lucide-react" -import { useRef, useState } from "react" -import { usePopper } from "react-popper" -import { IMarking, UploadImage } from ".." -import { FixedMenu } from "../menu" -import { DocumentDetails } from "../types/editor-types" -import { AlertLabel } from "./alert-label" -import { ContentBrowser } from "./content-browser" -import { IVerticalDropdownItemProps, VerticalDropdownMenu } from "./vertical-dropdown-menu" +import { Editor } from "@tiptap/react"; +import { Archive, Info, Lock } from "lucide-react"; +import { IMarking, UploadImage } from ".."; +import { FixedMenu } from "../menu"; +import { DocumentDetails } from "../types/editor-types"; +import { AlertLabel } from "./alert-label"; +import { + IVerticalDropdownItemProps, + VerticalDropdownMenu, +} from "./vertical-dropdown-menu"; +import { SummaryPopover } from "./summary-popover"; +import { InfoPopover } from "./info-popover"; interface IEditorHeader { - editor: Editor, - KanbanMenuOptions: IVerticalDropdownItemProps[], - sidePeakVisible: boolean, - setSidePeakVisible: (currentState: boolean) => void, - markings: IMarking[], - isLocked: boolean, - isArchived: boolean, - archivedAt?: Date, - readonly: boolean, - uploadFile?: UploadImage, - setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void, - documentDetails: DocumentDetails + editor: Editor; + KanbanMenuOptions: IVerticalDropdownItemProps[]; + sidePeekVisible: boolean; + setSidePeekVisible: (sidePeekState: boolean) => void; + markings: IMarking[]; + isLocked: boolean; + isArchived: boolean; + archivedAt?: Date; + readonly: boolean; + uploadFile?: UploadImage; + setIsSubmitting?: ( + isSubmitting: "submitting" | "submitted" | "saved", + ) => void; + documentDetails: DocumentDetails; } -export const EditorHeader = ({ documentDetails, archivedAt, editor, sidePeakVisible, readonly, setSidePeakVisible, markings, uploadFile, setIsSubmitting, KanbanMenuOptions, isArchived, isLocked }: IEditorHeader) => { - - const summaryMenuRef = useRef(null); - const summaryButtonRef = useRef(null); - const [summaryPopoverVisible, setSummaryPopoverVisible] = useState(false); - - const { styles: summaryPopoverStyles, attributes: summaryPopoverAttributes } = usePopper(summaryButtonRef.current, summaryMenuRef.current, { - placement: "bottom-start" - }) +export const EditorHeader = (props: IEditorHeader) => { + const { + documentDetails, + archivedAt, + editor, + sidePeekVisible, + readonly, + setSidePeekVisible, + markings, + uploadFile, + setIsSubmitting, + KanbanMenuOptions, + isArchived, + isLocked, + } = props; return ( +
+
+ +
-
-
-
-
setSummaryPopoverVisible(true)} - onMouseLeave={() => setSummaryPopoverVisible(false)} - > - - {summaryPopoverVisible && -
- -
- } -
- {isLocked && } - {(isArchived && archivedAt) && } -
+
+ {!readonly && uploadFile && ( + + )} +
- {(!readonly && uploadFile) && } -
- {!isArchived &&

{`Last updated at ${new Date(documentDetails.last_updated_at).toLocaleString()}`}

} - -
+
+ {isLocked && ( + + )} + {isArchived && archivedAt && ( + + )} + {!isArchived && } +
- ) - -} + ); +}; diff --git a/packages/editor/document-editor/src/ui/components/index.ts b/packages/editor/document-editor/src/ui/components/index.ts new file mode 100644 index 000000000..1496a3cf4 --- /dev/null +++ b/packages/editor/document-editor/src/ui/components/index.ts @@ -0,0 +1,9 @@ +export * from "./alert-label"; +export * from "./content-browser"; +export * from "./editor-header"; +export * from "./heading-component"; +export * from "./info-popover"; +export * from "./page-renderer"; +export * from "./summary-popover"; +export * from "./summary-side-bar"; +export * from "./vertical-dropdown-menu"; diff --git a/packages/editor/document-editor/src/ui/components/info-popover.tsx b/packages/editor/document-editor/src/ui/components/info-popover.tsx new file mode 100644 index 000000000..d42e32a8d --- /dev/null +++ b/packages/editor/document-editor/src/ui/components/info-popover.tsx @@ -0,0 +1,79 @@ +import { useState } from "react"; +import { usePopper } from "react-popper"; +import { Calendar, History, Info } from "lucide-react"; +// types +import { DocumentDetails } from "../types/editor-types"; + +type Props = { + documentDetails: DocumentDetails; +}; + +// function to render a Date in the format- 25 May 2023 at 2:53PM +const renderDate = (date: Date): string => { + const options: Intl.DateTimeFormatOptions = { + day: "numeric", + month: "long", + year: "numeric", + hour: "numeric", + minute: "numeric", + hour12: true, + }; + + const formattedDate: string = new Intl.DateTimeFormat( + "en-US", + options, + ).format(date); + + return formattedDate; +}; + +export const InfoPopover: React.FC = (props) => { + const { documentDetails } = props; + + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + + const [referenceElement, setReferenceElement] = + useState(null); + const [popperElement, setPopperElement] = useState( + null, + ); + + const { styles: infoPopoverStyles, attributes: infoPopoverAttributes } = + usePopper(referenceElement, popperElement, { + placement: "bottom-start", + }); + + return ( +
setIsPopoverOpen(true)} + onMouseLeave={() => setIsPopoverOpen(false)} + > + + {isPopoverOpen && ( +
+
+
Last updated on
+
+ + {renderDate(new Date(documentDetails.last_updated_at))} +
+
+
+
Created on
+
+ + {renderDate(new Date(documentDetails.created_on))} +
+
+
+ )} +
+ ); +}; diff --git a/packages/editor/document-editor/src/ui/components/page-renderer.tsx b/packages/editor/document-editor/src/ui/components/page-renderer.tsx index 746d46e45..194152dd3 100644 --- a/packages/editor/document-editor/src/ui/components/page-renderer.tsx +++ b/packages/editor/document-editor/src/ui/components/page-renderer.tsx @@ -3,43 +3,32 @@ import { Editor } from "@tiptap/react"; import { DocumentDetails } from "../types/editor-types"; interface IPageRenderer { - sidePeakVisible: boolean; documentDetails: DocumentDetails; editor: Editor; editorClassNames: string; editorContentCustomClassNames?: string; } -export const PageRenderer = ({ - sidePeakVisible, - documentDetails, - editor, - editorClassNames, - editorContentCustomClassNames, -}: IPageRenderer) => { +export const PageRenderer = (props: IPageRenderer) => { + const { + documentDetails, + editor, + editorClassNames, + editorContentCustomClassNames, + } = props; + return ( -
-
-
-

- {documentDetails.title} -

-
-
-
- -
- -
- -
+
+

+ {documentDetails.title} +

+
+ + +
); diff --git a/packages/editor/document-editor/src/ui/components/popover.tsx b/packages/editor/document-editor/src/ui/components/popover.tsx deleted file mode 100644 index 8c587b603..000000000 --- a/packages/editor/document-editor/src/ui/components/popover.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React, { Fragment, useState } from "react"; -import { usePopper } from "react-popper"; -import { Popover, Transition } from "@headlessui/react"; -import { Placement } from "@popperjs/core"; -// ui -import { Button } from "@plane/ui"; -// icons -import { ChevronUp, MenuIcon } from "lucide-react"; - -type Props = { - children: React.ReactNode; - title?: string; - placement?: Placement; -}; - -export const SummaryPopover: React.FC = (props) => { - const { children, title = "SummaryPopover", placement } = props; - - const [referenceElement, setReferenceElement] = useState(null); - const [popperElement, setPopperElement] = useState(null); - - const { styles, attributes } = usePopper(referenceElement, popperElement, { - placement: placement ?? "auto", - }); - - return ( - - {({ open }) => { - if (open) { - } - return ( - <> - - - - - -
-
{children}
-
- - - - ); - }} - - ); -}; diff --git a/packages/editor/document-editor/src/ui/components/summary-popover.tsx b/packages/editor/document-editor/src/ui/components/summary-popover.tsx new file mode 100644 index 000000000..7c85ed945 --- /dev/null +++ b/packages/editor/document-editor/src/ui/components/summary-popover.tsx @@ -0,0 +1,57 @@ +import { useState } from "react"; +import { Editor } from "@tiptap/react"; +import { usePopper } from "react-popper"; +import { List } from "lucide-react"; +// components +import { ContentBrowser } from "./content-browser"; +// types +import { IMarking } from ".."; + +type Props = { + editor: Editor; + markings: IMarking[]; + sidePeekVisible: boolean; + setSidePeekVisible: (sidePeekState: boolean) => void; +}; + +export const SummaryPopover: React.FC = (props) => { + const { editor, markings, sidePeekVisible, setSidePeekVisible } = props; + + const [referenceElement, setReferenceElement] = + useState(null); + const [popperElement, setPopperElement] = useState( + null, + ); + + const { styles: summaryPopoverStyles, attributes: summaryPopoverAttributes } = + usePopper(referenceElement, popperElement, { + placement: "bottom-start", + }); + + return ( +
+ + {!sidePeekVisible && ( +
+ +
+ )} +
+ ); +}; diff --git a/packages/editor/document-editor/src/ui/components/summary-side-bar.tsx b/packages/editor/document-editor/src/ui/components/summary-side-bar.tsx index 304c80018..dd98e0572 100644 --- a/packages/editor/document-editor/src/ui/components/summary-side-bar.tsx +++ b/packages/editor/document-editor/src/ui/components/summary-side-bar.tsx @@ -1,18 +1,25 @@ -import { Editor } from "@tiptap/react" -import { IMarking } from ".." -import { ContentBrowser } from "./content-browser" +import { Editor } from "@tiptap/react"; +import { IMarking } from ".."; +import { ContentBrowser } from "./content-browser"; interface ISummarySideBarProps { - editor: Editor, - markings: IMarking[], - sidePeakVisible: boolean + editor: Editor; + markings: IMarking[]; + sidePeekVisible: boolean; } -export const SummarySideBar = ({ editor, markings, sidePeakVisible }: ISummarySideBarProps) => { +export const SummarySideBar = ({ + editor, + markings, + sidePeekVisible, +}: ISummarySideBarProps) => { return ( - -
+
- ) -} + ); +}; diff --git a/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx b/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx index c28cb4d32..cf7ee7db1 100644 --- a/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx +++ b/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx @@ -1,41 +1,52 @@ -import { Button, CustomMenu } from "@plane/ui" -import { ChevronUp, Icon, MoreVertical } from "lucide-react" +import { Button, CustomMenu } from "@plane/ui"; +import { ChevronUp, Icon, MoreVertical } from "lucide-react"; - -type TMenuItems = "archive_page" | "unarchive_page" | "lock_page" | "unlock_page" | "copy_markdown" | "close_page" | "copy_page_link" | "duplicate_page" +type TMenuItems = + | "archive_page" + | "unarchive_page" + | "lock_page" + | "unlock_page" + | "copy_markdown" + | "close_page" + | "copy_page_link" + | "duplicate_page"; export interface IVerticalDropdownItemProps { - key: number, - type: TMenuItems, - Icon: Icon, - label: string, - action: () => Promise | void + key: number; + type: TMenuItems; + Icon: Icon; + label: string; + action: () => Promise | void; } export interface IVerticalDropdownMenuProps { - items: IVerticalDropdownItemProps[], + items: IVerticalDropdownItemProps[]; } -const VerticalDropdownItem = ({ Icon, label, action }: IVerticalDropdownItemProps) => { - +const VerticalDropdownItem = ({ + Icon, + label, + action, +}: IVerticalDropdownItemProps) => { return ( - - + + +
{label}
 - ) -} + ); +}; export const VerticalDropdownMenu = ({ items }: IVerticalDropdownMenuProps) => { - return ( - - }> + } + > {items.map((item, index) => ( { /> ))} - ) -} + ); +}; diff --git a/packages/editor/document-editor/src/ui/index.tsx b/packages/editor/document-editor/src/ui/index.tsx index be75ff8fb..f46c5ca47 100644 --- a/packages/editor/document-editor/src/ui/index.tsx +++ b/packages/editor/document-editor/src/ui/index.tsx @@ -1,34 +1,40 @@ -"use client" -import React, { useState } from 'react'; -import { cn, getEditorClassNames, useEditor } from '@plane/editor-core'; -import { DocumentEditorExtensions } from './extensions'; -import { IDuplicationConfig, IPageArchiveConfig, IPageLockConfig } from './types/menu-actions'; -import { EditorHeader } from './components/editor-header'; -import { useEditorMarkings } from './hooks/use-editor-markings'; -import { SummarySideBar } from './components/summary-side-bar'; -import { DocumentDetails } from './types/editor-types'; -import { PageRenderer } from './components/page-renderer'; -import { getMenuOptions } from './utils/menu-options'; -import { useRouter } from 'next/router'; +"use client"; +import React, { useState } from "react"; +import { cn, getEditorClassNames, useEditor } from "@plane/editor-core"; +import { DocumentEditorExtensions } from "./extensions"; +import { + IDuplicationConfig, + IPageArchiveConfig, + IPageLockConfig, +} from "./types/menu-actions"; +import { EditorHeader } from "./components/editor-header"; +import { useEditorMarkings } from "./hooks/use-editor-markings"; +import { SummarySideBar } from "./components/summary-side-bar"; +import { DocumentDetails } from "./types/editor-types"; +import { PageRenderer } from "./components/page-renderer"; +import { getMenuOptions } from "./utils/menu-options"; +import { useRouter } from "next/router"; export type UploadImage = (file: File) => Promise; export type DeleteImage = (assetUrlWithWorkspaceId: string) => Promise; interface IDocumentEditor { - documentDetails: DocumentDetails, + documentDetails: DocumentDetails; value: string; uploadFile: UploadImage; deleteFile: DeleteImage; customClassName?: string; editorContentCustomClassNames?: string; onChange: (json: any, html: string) => void; - setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void; + setIsSubmitting?: ( + isSubmitting: "submitting" | "submitted" | "saved", + ) => void; setShouldShowAlert?: (showAlert: boolean) => void; forwardedRef?: any; debouncedUpdatesEnabled?: boolean; - duplicationConfig?: IDuplicationConfig, - pageLockConfig?: IPageLockConfig, - pageArchiveConfig?: IPageArchiveConfig + duplicationConfig?: IDuplicationConfig; + pageLockConfig?: IPageLockConfig; + pageArchiveConfig?: IPageArchiveConfig; } interface DocumentEditorProps extends IDocumentEditor { forwardedRef?: React.Ref; @@ -40,10 +46,10 @@ interface EditorHandle { } export interface IMarking { - type: "heading", - level: number, - text: string, - sequence: number + type: "heading"; + level: number; + text: string; + sequence: number; } const DocumentEditor = ({ @@ -60,21 +66,20 @@ const DocumentEditor = ({ forwardedRef, duplicationConfig, pageLockConfig, - pageArchiveConfig + pageArchiveConfig, }: IDocumentEditor) => { - // const [alert, setAlert] = useState("") - const { markings, updateMarkings } = useEditorMarkings() - const [sidePeakVisible, setSidePeakVisible] = useState(true) - const router = useRouter() + const { markings, updateMarkings } = useEditorMarkings(); + const [sidePeekVisible, setSidePeekVisible] = useState(true); + const router = useRouter(); const editor = useEditor({ onChange(json, html) { - updateMarkings(json) - onChange(json, html) + updateMarkings(json); + onChange(json, html); }, onStart(json) { - updateMarkings(json) + updateMarkings(json); }, debouncedUpdatesEnabled, setIsSubmitting, @@ -87,65 +92,66 @@ const DocumentEditor = ({ }); if (!editor) { - return null + return null; } - const KanbanMenuOptions = getMenuOptions( - { - editor: editor, - router: router, - duplicationConfig: duplicationConfig, - pageLockConfig: pageLockConfig, - pageArchiveConfig: pageArchiveConfig, - } - ) - const editorClassNames = getEditorClassNames({ noBorder: true, borderOnFocus: false, customClassName }); + const KanbanMenuOptions = getMenuOptions({ + editor: editor, + router: router, + duplicationConfig: duplicationConfig, + pageLockConfig: pageLockConfig, + pageArchiveConfig: pageArchiveConfig, + }); + const editorClassNames = getEditorClassNames({ + noBorder: true, + borderOnFocus: false, + customClassName, + }); if (!editor) return null; return ( -
-
- -
-
-
+
+ setSidePeekVisible(val)} + markings={markings} + uploadFile={uploadFile} + setIsSubmitting={setIsSubmitting} + isLocked={!pageLockConfig ? false : pageLockConfig.is_locked} + isArchived={!pageArchiveConfig ? false : pageArchiveConfig.is_archived} + archivedAt={pageArchiveConfig && pageArchiveConfig.archived_at} + documentDetails={documentDetails} + /> +
+
+
+
- {/* Page Element */}
+
); -} +}; -const DocumentEditorWithRef = React.forwardRef((props, ref) => ( - -)); +const DocumentEditorWithRef = React.forwardRef( + (props, ref) => , +); DocumentEditorWithRef.displayName = "DocumentEditorWithRef"; -export { DocumentEditor, DocumentEditorWithRef } +export { DocumentEditor, DocumentEditorWithRef }; diff --git a/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx b/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx index 2cd07ec14..8080f7c63 100644 --- a/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx +++ b/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx @@ -1,7 +1,22 @@ import { Editor } from "@tiptap/react"; -import { BoldIcon, Heading1, Heading2, Heading3 } from "lucide-react"; +import { BoldIcon } from "lucide-react"; -import { BoldItem, BulletListItem, cn, CodeItem, ImageItem, ItalicItem, NumberedListItem, QuoteItem, StrikeThroughItem, TableItem, UnderLineItem, HeadingOneItem, HeadingTwoItem, HeadingThreeItem } from "@plane/editor-core"; +import { + BoldItem, + BulletListItem, + cn, + CodeItem, + ImageItem, + ItalicItem, + NumberedListItem, + QuoteItem, + StrikeThroughItem, + TableItem, + UnderLineItem, + HeadingOneItem, + HeadingTwoItem, + HeadingThreeItem, +} from "@plane/editor-core"; import { UploadImage } from ".."; export interface BubbleMenuItem { @@ -14,77 +29,69 @@ export interface BubbleMenuItem { type EditorBubbleMenuProps = { editor: Editor; uploadFile: UploadImage; - setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void; -} + setIsSubmitting?: ( + isSubmitting: "submitting" | "submitted" | "saved", + ) => void; +}; export const FixedMenu = (props: EditorBubbleMenuProps) => { + const { editor, uploadFile, setIsSubmitting } = props; + const basicMarkItems: BubbleMenuItem[] = [ - HeadingOneItem(props.editor), - HeadingTwoItem(props.editor), - HeadingThreeItem(props.editor), - BoldItem(props.editor), - ItalicItem(props.editor), - UnderLineItem(props.editor), - StrikeThroughItem(props.editor), + HeadingOneItem(editor), + HeadingTwoItem(editor), + HeadingThreeItem(editor), + BoldItem(editor), + ItalicItem(editor), + UnderLineItem(editor), + StrikeThroughItem(editor), ]; const listItems: BubbleMenuItem[] = [ - BulletListItem(props.editor), - NumberedListItem(props.editor), + BulletListItem(editor), + NumberedListItem(editor), ]; const userActionItems: BubbleMenuItem[] = [ - QuoteItem(props.editor), - CodeItem(props.editor), + QuoteItem(editor), + CodeItem(editor), ]; const complexItems: BubbleMenuItem[] = [ - TableItem(props.editor), - ImageItem(props.editor, props.uploadFile, props.setIsSubmitting), + TableItem(editor), + ImageItem(editor, uploadFile, setIsSubmitting), ]; - // const handleAccessChange = (accessKey: string) => { - // props.commentAccessSpecifier?.onAccessChange(accessKey); - // }; - - return ( -
-
- {basicMarkItems.map((item, index) => ( +
+
+ {basicMarkItems.map((item) => ( ))}
-
- {listItems.map((item, index) => ( +
+ {listItems.map((item) => ( ))}
-
- {userActionItems.map((item, index) => ( +
+ {userActionItems.map((item) => ( ))}
-
- {complexItems.map((item, index) => ( +
+ {complexItems.map((item) => (