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={() => { onMouseLeave={() => {
toggleVisible(false); toggleVisible(false);
}} }}
onMouseMove={() => { onMouseDown={() => {
hideOnClick && toggleVisible(false); 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( const shouldShow = useCallback(
({ node, state }) => { ({ node, state }) => {
if (!editor.isActive(Table.name) || !node || isTableSelected(state.selection)) return false; 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; return !!gripColumn;
}, },
[editor] [editor]
@ -28,7 +35,7 @@ export const TableColBubbleMenu = ({ editor }) => {
editor={editor} editor={editor}
pluginKey="table-col-bubble-menu" pluginKey="table-col-bubble-menu"
tippyOptions={{ tippyOptions={{
offset: [0, 20], offset: [0, 35],
}} }}
shouldShow={shouldShow} shouldShow={shouldShow}
getRenderContainer={getRenderContainer} getRenderContainer={getRenderContainer}
@ -53,6 +60,7 @@ export const TableColBubbleMenu = ({ editor }) => {
size="small" size="small"
/> />
</Tooltip> </Tooltip>
<Tooltip content="删除当前列" hideOnClick> <Tooltip content="删除当前列" hideOnClick>
<Button onClick={deleteColumn} icon={<IconDeleteColumn />} type="tertiary" theme="borderless" size="small" /> <Button onClick={deleteColumn} icon={<IconDeleteColumn />} type="tertiary" theme="borderless" size="small" />
</Tooltip> </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( const shouldShow = useCallback(
({ node, state }) => { ({ node, state }) => {
if (!editor.isActive(Table.name) || !node || isTableSelected(state.selection)) return false; 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; return !!gripRow;
}, },
[editor] [editor]
@ -29,21 +36,21 @@ export const TableRowBubbleMenu = ({ editor }) => {
pluginKey="table-row-bubble-menu" pluginKey="table-row-bubble-menu"
tippyOptions={{ tippyOptions={{
placement: 'left', placement: 'left',
offset: [0, 20], offset: [0, 30],
}} }}
shouldShow={shouldShow} shouldShow={shouldShow}
getRenderContainer={getRenderContainer} getRenderContainer={getRenderContainer}
> >
<Space vertical spacing={4}> <Space vertical spacing={4}>
<Tooltip content="向前插入一行"> <Tooltip content="向前插入一行" position="left">
<Button onClick={addRowBefore} icon={<IconAddRowBefore />} type="tertiary" theme="borderless" size="small" /> <Button onClick={addRowBefore} icon={<IconAddRowBefore />} type="tertiary" theme="borderless" size="small" />
</Tooltip> </Tooltip>
<Tooltip content="向后插入一行"> <Tooltip content="向后插入一行" position="left">
<Button onClick={addRowAfter} icon={<IconAddRowAfter />} type="tertiary" theme="borderless" size="small" /> <Button onClick={addRowAfter} icon={<IconAddRowAfter />} type="tertiary" theme="borderless" size="small" />
</Tooltip> </Tooltip>
<Tooltip content="删除当前行" hideOnClick> <Tooltip content="删除当前行" position="left" hideOnClick>
<Button onClick={deleteRow} icon={<IconDeleteRow />} type="tertiary" theme="borderless" size="small" /> <Button onClick={deleteRow} icon={<IconDeleteRow />} type="tertiary" theme="borderless" size="small" />
</Tooltip> </Tooltip>
</Space> </Space>