+
@@ -220,73 +235,93 @@ function ContentMenu(props: any) {
onClick={deleteNode}
className="flex gap-3 focus:text-red-500 focus:bg-red-400 hover:bg-red-400 dark:hover:text-red-500 bg-opacity-10 hover:bg-opacity-20 focus:bg-opacity-30 dark:hover:bg-opacity-20"
>
-
+
{t('editor.remove')}
-
-
- {t('editor.clear.tooltip')}
-
+
+ {hasClearExtension
+ ? (
+
+
+ {t('editor.clear.tooltip')}
+
+ )
+ : null}
+
-
+
{t('editor.copyToClipboard')}
-
+
{t('editor.copy')}
-
-
-
-
- {t('editor.textalign.tooltip')}
-
-
-
- setTextAlign('left')}>
-
- {t('editor.textalign.left.tooltip')}
-
- setTextAlign('center')}>
-
- {t('editor.textalign.center.tooltip')}
-
+ {hasTextAlignExtension || hasIndentExtension
+ ? (
+
+ )
+ : null}
- setTextAlign('right')}>
-
- {t('editor.textalign.right.tooltip')}
-
-
-
-
-
-
-
- {t('editor.indent')}
-
-
-
- = IndentProps.max}
- >
-
- {t('editor.indent.tooltip')}
-
+ {hasTextAlignExtension
+ ? (
+
+
+
+ {t('editor.textalign.tooltip')}
+
+
+
+ setTextAlign('left')}>
+
+ {t('editor.textalign.left.tooltip')}
+
+ setTextAlign('center')}>
+
+ {t('editor.textalign.center.tooltip')}
+
+ setTextAlign('right')}>
+
+ {t('editor.textalign.right.tooltip')}
+
+
+
+
+ )
+ : null}
+
+ {hasIndentExtension
+ ? (
+
+
+
+ {t('editor.indent')}
+
+
+
+ = IndentProps.max}
+ >
+
+ {t('editor.indent.tooltip')}
+
+
+
+
+ {t('editor.outdent.tooltip')}
+
+
+
+
+ )
+ : null}
-
-
- {t('editor.outdent.tooltip')}
-
-
-
-
@@ -295,4 +330,4 @@ function ContentMenu(props: any) {
)
}
-export default ContentMenu
+export { ContentMenu }
diff --git a/src/components/menus/components/TableBubbleMenu.tsx b/src/components/menus/components/TableBubbleMenu.tsx
index 0c2413d..9443d93 100644
--- a/src/components/menus/components/TableBubbleMenu.tsx
+++ b/src/components/menus/components/TableBubbleMenu.tsx
@@ -1,56 +1,58 @@
-import React from 'react'
-
+import type { Editor } from '@tiptap/core'
import { isActive } from '@tiptap/core'
import { BubbleMenu } from '@tiptap/react'
import type { GetReferenceClientRect } from 'tippy.js'
import { sticky } from 'tippy.js'
-import ActionButton from '@/components/ActionButton'
-import { Separator } from '@/components/ui/separator'
+import { ActionButton, Separator } from '@/components'
import HighlightActionButton from '@/extensions/Highlight/components/HighlightActionButton'
import { useLocale } from '@/locales'
-function TableBubbleMenu(props: any) {
- const shouldShow = ({ editor }: any) => {
+export interface TableBubbleMenuProps {
+ editor: Editor
+}
+
+function TableBubbleMenu({ editor }: TableBubbleMenuProps) {
+ const shouldShow = ({ editor }: { editor: Editor }) => {
return isActive(editor.view.state, 'table')
}
const { t } = useLocale()
function onAddColumnBefore() {
- props.editor.chain().focus().addColumnBefore().run()
+ editor.chain().focus().addColumnBefore().run()
}
function onAddColumnAfter() {
- props.editor.chain().focus().addColumnAfter().run()
+ editor.chain().focus().addColumnAfter().run()
}
function onDeleteColumn() {
- props.editor.chain().focus().deleteColumn().run()
+ editor.chain().focus().deleteColumn().run()
}
function onAddRowAbove() {
- props.editor.chain().focus().addRowBefore().run()
+ editor.chain().focus().addRowBefore().run()
}
function onAddRowBelow() {
- props.editor.chain().focus().addRowAfter().run()
+ editor.chain().focus().addRowAfter().run()
}
function onDeleteRow() {
- props.editor.chain().focus().deleteRow().run()
+ editor.chain().focus().deleteRow().run()
}
function onMergeCell() {
- props.editor.chain().focus().mergeCells().run()
+ editor.chain().focus().mergeCells().run()
}
function onSplitCell() {
- props.editor?.chain().focus().splitCell().run()
+ editor?.chain().focus().splitCell().run()
}
function onDeleteTable() {
- props.editor.chain().focus().deleteTable().run()
+ editor.chain().focus().deleteTable().run()
}
function onSetCellBackground(color: string) {
- props.editor.chain().focus().setTableCellBackground(color).run()
+ editor.chain().focus().setTableCellBackground(color).run()
}
const getReferenceClientRect: GetReferenceClientRect = () => {
const {
@@ -58,14 +60,14 @@ function TableBubbleMenu(props: any) {
state: {
selection: { from },
},
- } = props.editor
+ } = editor
const node = view.domAtPos(from).node as HTMLElement
if (!node) {
return new DOMRect(-1000, -1000, 0, 0)
}
- const tableWrapper = node?.closest('.tableWrapper')
+ const tableWrapper = node?.closest?.('.tableWrapper')
if (!tableWrapper) {
return new DOMRect(-1000, -1000, 0, 0)
}
@@ -77,7 +79,7 @@ function TableBubbleMenu(props: any) {
return (
@@ -129,7 +131,7 @@ function TableBubbleMenu(props: any) {
tooltip-options={{
sideOffset: 15,
}}
- disabled={!props?.editor?.can().addRowBefore?.()}
+ disabled={!editor?.can().addRowBefore?.()}
/>