gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tiptap: fix render table row, col bubble menu

This commit is contained in:
fantasticit 2022-05-10 15:57:21 +08:00
parent 5a02d0795a
commit 2517a8b577
3 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/components/tooltip/index.tsx
View File

@ -21,7 +21,7 @@ export const Tooltip: React.FC<IProps> = ({ content, hideOnClick = false, positi
onMouseLeave={() => {
toggleVisible(false);
}}
onMouseMove={() => {
onMouseDown={() => {
hideOnClick && toggleVisible(false);
}}
>

12
packages/client/src/tiptap/editor/menus/table/col-bubble.tsx
View File

@ -10,7 +10,14 @@ export const TableColBubbleMenu = ({ editor }) => {
const shouldShow = useCallback(
({ node, state }) => {
if (!editor.isActive(Table.name) || !node || isTableSelected(state.selection)) return false;
const gripColumn = node.querySelector('a.grip-column.selected');
let container = node;
while (container && !['TD', 'TH'].includes(container.tagName)) {
container = container.parentElement;
}
const gripColumn = container && container.querySelector && container.querySelector('a.grip-column.selected');
return !!gripColumn;
},
[editor]
@ -28,7 +35,7 @@ export const TableColBubbleMenu = ({ editor }) => {
editor={editor}
pluginKey="table-col-bubble-menu"
tippyOptions={{
offset: [0, 20],
offset: [0, 35],
}}
shouldShow={shouldShow}
getRenderContainer={getRenderContainer}
@ -53,6 +60,7 @@ export const TableColBubbleMenu = ({ editor }) => {
size="small"
/>
</Tooltip>
<Tooltip content="删除当前列" hideOnClick>
<Button onClick={deleteColumn} icon={<IconDeleteColumn />} type="tertiary" theme="borderless" size="small" />
</Tooltip>

17
packages/client/src/tiptap/editor/menus/table/row-bubble.tsx
View File

@ -10,7 +10,14 @@ export const TableRowBubbleMenu = ({ editor }) => {
const shouldShow = useCallback(
({ node, state }) => {
if (!editor.isActive(Table.name) || !node || isTableSelected(state.selection)) return false;
const gripRow = node.querySelector('a.grip-row.selected');
let container = node;
while (container && !['TD', 'TH'].includes(container.tagName)) {
container = container.parentElement;
}
const gripRow = container && container.querySelector && container.querySelector('a.grip-row.selected');
return !!gripRow;
},
[editor]
@ -29,21 +36,21 @@ export const TableRowBubbleMenu = ({ editor }) => {
pluginKey="table-row-bubble-menu"
tippyOptions={{
placement: 'left',
offset: [0, 20],
offset: [0, 30],
}}
shouldShow={shouldShow}
getRenderContainer={getRenderContainer}
>
<Space vertical spacing={4}>
<Tooltip content="向前插入一行">
<Tooltip content="向前插入一行" position="left">
<Button onClick={addRowBefore} icon={<IconAddRowBefore />} type="tertiary" theme="borderless" size="small" />
</Tooltip>
<Tooltip content="向后插入一行">
<Tooltip content="向后插入一行" position="left">
<Button onClick={addRowAfter} icon={<IconAddRowAfter />} type="tertiary" theme="borderless" size="small" />
</Tooltip>
<Tooltip content="删除当前行" hideOnClick>
<Tooltip content="删除当前行" position="left" hideOnClick>
<Button onClick={deleteRow} icon={<IconDeleteRow />} type="tertiary" theme="borderless" size="small" />
</Tooltip>
</Space>