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

tiptap: fix menu

This commit is contained in:
fantasticit 2022-05-09 16:04:55 +08:00
parent 7e0d145ce9
commit d5b3ea24de
7 changed files with 70 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/client/src/tiptap/core/extensions/table-cell.tsx
View File

@ -28,10 +28,16 @@ export const TableCell = BuiltInTableCell.extend({
},
addProseMirrorPlugins() {
const { isEditable } = this.editor;
return [
new Plugin({
props: {
decorations: (state) => {
if (!isEditable) {
return DecorationSet.empty;
}
const { doc, selection } = state;
const decorations: Decoration[] = [];
const cells = getCellsInColumn(0)(selection);

6
packages/client/src/tiptap/core/extensions/table-header.tsx
View File

@ -28,10 +28,16 @@ export const TableHeader = BuiltInTableHeader.extend({
},
addProseMirrorPlugins() {
const { isEditable } = this.editor;
return [
new Plugin({
props: {
decorations: (state) => {
if (!isEditable) {
return DecorationSet.empty;
}
const { doc, selection } = state;
const decorations: Decoration[] = [];
const cells = getCellsInRow(0)(selection);

15
packages/client/src/tiptap/core/extensions/table.ts
View File

@ -7,12 +7,14 @@ export const Table = BuiltInTable.extend({
renderHTML() {
return [
'div',
{ class: 'scrollable-wrapper' },
['div', { class: 'scrollable' }, ['table', { class: 'rme-table' }, ['tbody', 0]]],
{ class: 'node-table' },
['div', { class: `scrollable` }, ['table', { class: `think-table render-wrapper` }, ['tbody', 0]]],
];
},
addProseMirrorPlugins() {
const { isEditable } = this.editor;
return [
tableEditing(),
new Plugin({
@ -25,10 +27,15 @@ export const Table = BuiltInTable.extend({
doc.descendants((node, pos) => {
if (node.type.name !== this.name) return;
const elements = document.getElementsByClassName('rme-table');
const elements = document.getElementsByClassName('think-table');
const table = elements[index];
if (!table) return;
if (!isEditable) {
table.classList.add('is-readonly');
}
const element = table.parentElement;
const shadowRight = !!(element && element.scrollWidth > element.clientWidth);
@ -36,7 +43,7 @@ export const Table = BuiltInTable.extend({
decorations.push(
Decoration.widget(pos + 1, () => {
const shadow = document.createElement('div');
shadow.className = 'scrollable-shadow right';
shadow.className = `scrollable-shadow right ${isEditable ? 'is-editable' : ''}`;
return shadow;
})
);

23
packages/client/src/tiptap/core/styles/selection.scss
View File

@ -80,4 +80,27 @@
}
}
}
.node-table {
&.selected-node {
&:not(.has-focus) {
::selection {
background-color: transparent;
}
}
.render-wrapper {
position: relative;
&::after {
position: absolute;
pointer-events: none;
border: 1px solid var(--node-selected-border-color) !important;
background-color: rgb(179 212 255 / 30%);
content: '';
inset: 0;
}
}
}
}
}

21
packages/client/src/tiptap/core/styles/table.scss
View File

@ -1,7 +1,7 @@
.ProseMirror {
.scrollable-wrapper {
.node-table {
position: relative;
margin: 0.5em 0;
margin-top: 0.75em;
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
@ -30,13 +30,24 @@
&.left {
box-shadow: 16px 0 16px -16px inset rgb(0 0 0 / 25%);
border-left: 1em solid red;
}
&.right {
right: 0;
left: auto;
box-shadow: rgb(0 0 0 / 25%) -16px 0 16px -16px inset;
&.is-editable {
&::after {
position: absolute;
top: 0;
right: 0;
width: 1em;
height: 1em;
background-color: var(--semi-color-nav-bg);
content: '';
}
}
}
}
@ -48,6 +59,10 @@
box-sizing: border-box;
border-color: var(--semi-color-fill-2);
&.is-readonly {
margin-top: 0;
}
td,
th {
position: relative;

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

@ -3,7 +3,7 @@ import { Space, Button } from '@douyinfe/semi-ui';
import { IconAddColumnBefore, IconAddColumnAfter, IconDeleteColumn } from 'components/icons';
import { Tooltip } from 'components/tooltip';
import { BubbleMenu } from 'tiptap/editor/views/bubble-menu';
import { TableRow } from 'tiptap/core/extensions/table-row';
import { Table } from 'tiptap/core/extensions/table';
import { isTableSelected } from 'tiptap/prose-utils';
export const TableColBubbleMenu = ({ editor }) => {
@ -20,9 +20,9 @@ export const TableColBubbleMenu = ({ editor }) => {
offset: [0, 20],
}}
shouldShow={({ node, state }) => {
if (!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');
return editor.isActive(TableRow.name) && !!gripColumn;
return !!gripColumn;
}}
getRenderContainer={(node) => {
return node;

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

@ -3,7 +3,7 @@ import { Space, Button } from '@douyinfe/semi-ui';
import { IconAddRowBefore, IconAddRowAfter, IconDeleteRow } from 'components/icons';
import { Tooltip } from 'components/tooltip';
import { BubbleMenu } from 'tiptap/editor/views/bubble-menu';
import { TableRow } from 'tiptap/core/extensions/table-row';
import { Table } from 'tiptap/core/extensions/table';
import { isTableSelected } from 'tiptap/prose-utils';
export const TableRowBubbleMenu = ({ editor }) => {
@ -21,9 +21,9 @@ export const TableRowBubbleMenu = ({ editor }) => {
offset: [0, 20],
}}
shouldShow={({ node, state }) => {
if (!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');
return editor.isActive(TableRow.name) && !!gripRow;
return !!gripRow;
}}
getRenderContainer={(node) => {
return node;