Merge pull request #94 from hunghg255/fix-table

hunghg255 · Nov 3, 2024 · 848425d · 848425d
2 parents ec29cb3 + 6cc6c26
commit 848425d
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 98 deletions.
diff --git a/src/components/menus/components/TableBubbleMenu.tsx b/src/components/menus/components/TableBubbleMenu.tsx
@@ -10,9 +10,10 @@ import { useLocale } from '@/locales'
 
 export interface TableBubbleMenuProps {
   editor: Editor
+  disabled?: boolean
 }
 
-function TableBubbleMenu({ editor }: TableBubbleMenuProps) {
+function TableBubbleMenu({ editor, disabled }: TableBubbleMenuProps) {
   const shouldShow = ({ editor }: { editor: Editor }) => {
     return isActive(editor.view.state, 'table')
   }
@@ -94,103 +95,110 @@ function TableBubbleMenu({ editor }: TableBubbleMenuProps) {
         sticky: 'popper',
       }}
     >
-      <div className="richtext-min-w-32 richtext-flex richtext-flex-row richtext-h-full richtext-items-center richtext-leading-none richtext-gap-0.5 richtext-p-2 richtext-w-full richtext-bg-background richtext-rounded-lg richtext-shadow-sm !richtext-border richtext-border-border">
-        <ActionButton
-          icon="BetweenHorizonalEnd"
-          tooltip={t('editor.table.menu.insertColumnBefore')}
-          action={onAddColumnBefore}
-          tooltip-options={{
-            sideOffset: 15,
-          }}
-          disabled={!editor?.can()?.addColumnBefore?.()}
-        />
-        <ActionButton
-          icon="BetweenHorizonalStart"
-          tooltip={t('editor.table.menu.insertColumnAfter')}
-          action={onAddColumnAfter}
-          tooltip-options={{
-            sideOffset: 15,
-          }}
-          disabled={!editor?.can()?.addColumnAfter?.()}
-        />
-        <ActionButton
-          icon="DeleteColumn"
-          action={onDeleteColumn}
-          tooltip={t('editor.table.menu.deleteColumn')}
-          tooltip-options={{
-            sideOffset: 15,
-          }}
-          disabled={!editor?.can().deleteColumn?.()}
-        />
-        <Separator orientation="vertical" className="!richtext-mx-1 !richtext-my-2 !richtext-h-[16px]" />
-
-        <ActionButton
-          icon="BetweenVerticalEnd"
-          action={onAddRowAbove}
-          tooltip={t('editor.table.menu.insertRowAbove')}
-          tooltip-options={{
-            sideOffset: 15,
-          }}
-          disabled={!editor?.can().addRowBefore?.()}
-        />
-
-        <ActionButton
-          icon="BetweenVerticalStart"
-          action={onAddRowBelow}
-          tooltip={t('editor.table.menu.insertRowBelow')}
-          tooltip-options={{
-            sideOffset: 15,
-          }}
-          disabled={!editor?.can()?.addRowAfter?.()}
-        />
-        <ActionButton
-          icon="DeleteRow"
-          action={onDeleteRow}
-          tooltip={t('editor.table.menu.deleteRow')}
-          tooltip-options={{
-            sideOffset: 15,
-          }}
-          disabled={!editor?.can()?.deleteRow?.()}
-        />
-        <Separator orientation="vertical" className="!richtext-mx-1 !richtext-my-2 !richtext-h-[16px]" />
-        <ActionButton
-          icon="TableCellsMerge"
-          action={onMergeCell}
-          tooltip={t('editor.table.menu.mergeCells')}
-          tooltip-options={{
-            sideOffset: 15,
-          }}
-          disabled={!editor?.can()?.mergeCells?.()}
-        />
-        <ActionButton
-          icon="TableCellsSplit"
-          action={onSplitCell}
-          tooltip={t('editor.table.menu.splitCells')}
-          tooltip-options={{
-            sideOffset: 15,
-          }}
-          disabled={!editor?.can()?.splitCell?.()}
-        />
-        <Separator orientation="vertical" className="!richtext-mx-1 !richtext-my-2 !richtext-h-[16px]" />
-
-        <HighlightActionButton
-          editor={editor}
-          tooltip={t('editor.table.menu.setCellsBgColor')}
-          action={onSetCellBackground}
-          tooltipOptions={{
-            sideOffset: 15,
-          }}
-        />
-        <ActionButton
-          icon="Trash2"
-          tooltip={t('editor.table.menu.deleteTable')}
-          action={onDeleteTable}
-          tooltip-options={{
-            sideOffset: 15,
-          }}
-          disabled={!editor?.can()?.deleteTable?.()}
-        />
-      </div>
+      {
+        disabled
+          ? <></>
+          : (
+              <div className="richtext-min-w-32 richtext-flex richtext-flex-row richtext-h-full richtext-items-center richtext-leading-none richtext-gap-0.5 richtext-p-2 richtext-w-full richtext-bg-background richtext-rounded-lg richtext-shadow-sm !richtext-border richtext-border-border">
+                <ActionButton
+                  icon="BetweenHorizonalEnd"
+                  tooltip={t('editor.table.menu.insertColumnBefore')}
+                  action={onAddColumnBefore}
+                  tooltip-options={{
+                    sideOffset: 15,
+                  }}
+                  disabled={!editor?.can()?.addColumnBefore?.()}
+                />
+                <ActionButton
+                  icon="BetweenHorizonalStart"
+                  tooltip={t('editor.table.menu.insertColumnAfter')}
+                  action={onAddColumnAfter}
+                  tooltip-options={{
+                    sideOffset: 15,
+                  }}
+                  disabled={!editor?.can()?.addColumnAfter?.()}
+                />
+                <ActionButton
+                  icon="DeleteColumn"
+                  action={onDeleteColumn}
+                  tooltip={t('editor.table.menu.deleteColumn')}
+                  tooltip-options={{
+                    sideOffset: 15,
+                  }}
+                  disabled={!editor?.can().deleteColumn?.()}
+                />
+                <Separator orientation="vertical" className="!richtext-mx-1 !richtext-my-2 !richtext-h-[16px]" />
+
+                <ActionButton
+                  icon="BetweenVerticalEnd"
+                  action={onAddRowAbove}
+                  tooltip={t('editor.table.menu.insertRowAbove')}
+                  tooltip-options={{
+                    sideOffset: 15,
+                  }}
+                  disabled={!editor?.can().addRowBefore?.()}
+                />
+
+                <ActionButton
+                  icon="BetweenVerticalStart"
+                  action={onAddRowBelow}
+                  tooltip={t('editor.table.menu.insertRowBelow')}
+                  tooltip-options={{
+                    sideOffset: 15,
+                  }}
+                  disabled={!editor?.can()?.addRowAfter?.()}
+                />
+                <ActionButton
+                  icon="DeleteRow"
+                  action={onDeleteRow}
+                  tooltip={t('editor.table.menu.deleteRow')}
+                  tooltip-options={{
+                    sideOffset: 15,
+                  }}
+                  disabled={!editor?.can()?.deleteRow?.()}
+                />
+                <Separator orientation="vertical" className="!richtext-mx-1 !richtext-my-2 !richtext-h-[16px]" />
+                <ActionButton
+                  icon="TableCellsMerge"
+                  action={onMergeCell}
+                  tooltip={t('editor.table.menu.mergeCells')}
+                  tooltip-options={{
+                    sideOffset: 15,
+                  }}
+                  disabled={!editor?.can()?.mergeCells?.()}
+                />
+                <ActionButton
+                  icon="TableCellsSplit"
+                  action={onSplitCell}
+                  tooltip={t('editor.table.menu.splitCells')}
+                  tooltip-options={{
+                    sideOffset: 15,
+                  }}
+                  disabled={!editor?.can()?.splitCell?.()}
+                />
+                <Separator orientation="vertical" className="!richtext-mx-1 !richtext-my-2 !richtext-h-[16px]" />
+
+                <HighlightActionButton
+                  editor={editor}
+                  tooltip={t('editor.table.menu.setCellsBgColor')}
+                  action={onSetCellBackground}
+                  tooltipOptions={{
+                    sideOffset: 15,
+                  }}
+                />
+                <ActionButton
+                  icon="Trash2"
+                  tooltip={t('editor.table.menu.deleteTable')}
+                  action={onDeleteTable}
+                  tooltip-options={{
+                    sideOffset: 15,
+                  }}
+                  disabled={!editor?.can()?.deleteTable?.()}
+                />
+              </div>
+            )
+      }
+
     </BubbleMenu>
   )
 }

diff --git a/src/styles/editor.scss b/src/styles/editor.scss
@@ -29,6 +29,7 @@
       table {
         overflow: hidden;
         display: table;
+        margin: 0 auto;
 
         .column-resize-handle {
           @apply richtext-bottom-[-2px] richtext-absolute richtext-right-[-2px] richtext-top-0 richtext-w-1 richtext-z-10 richtext-pointer-events-none richtext-bg-primary;