From d5b3ea24def74c7c2b0f93227d3ce415d68357d1 Mon Sep 17 00:00:00 2001 From: fantasticit Date: Mon, 9 May 2022 16:04:55 +0800 Subject: [PATCH] tiptap: fix menu --- .../src/tiptap/core/extensions/table-cell.tsx | 6 +++++ .../tiptap/core/extensions/table-header.tsx | 6 +++++ .../src/tiptap/core/extensions/table.ts | 15 ++++++++---- .../src/tiptap/core/styles/selection.scss | 23 +++++++++++++++++++ .../client/src/tiptap/core/styles/table.scss | 21 ++++++++++++++--- .../tiptap/editor/menus/table/col-bubble.tsx | 6 ++--- .../tiptap/editor/menus/table/row-bubble.tsx | 6 ++--- 7 files changed, 70 insertions(+), 13 deletions(-) diff --git a/packages/client/src/tiptap/core/extensions/table-cell.tsx b/packages/client/src/tiptap/core/extensions/table-cell.tsx index 5196604..beb4d1b 100644 --- a/packages/client/src/tiptap/core/extensions/table-cell.tsx +++ b/packages/client/src/tiptap/core/extensions/table-cell.tsx @@ -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); diff --git a/packages/client/src/tiptap/core/extensions/table-header.tsx b/packages/client/src/tiptap/core/extensions/table-header.tsx index 4d6f52a..02e9cf9 100644 --- a/packages/client/src/tiptap/core/extensions/table-header.tsx +++ b/packages/client/src/tiptap/core/extensions/table-header.tsx @@ -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); diff --git a/packages/client/src/tiptap/core/extensions/table.ts b/packages/client/src/tiptap/core/extensions/table.ts index 2952326..5fef9cc 100644 --- a/packages/client/src/tiptap/core/extensions/table.ts +++ b/packages/client/src/tiptap/core/extensions/table.ts @@ -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; }) ); diff --git a/packages/client/src/tiptap/core/styles/selection.scss b/packages/client/src/tiptap/core/styles/selection.scss index fae93af..277a578 100644 --- a/packages/client/src/tiptap/core/styles/selection.scss +++ b/packages/client/src/tiptap/core/styles/selection.scss @@ -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; + } + } + } + } } diff --git a/packages/client/src/tiptap/core/styles/table.scss b/packages/client/src/tiptap/core/styles/table.scss index ccaa5d8..65cf255 100644 --- a/packages/client/src/tiptap/core/styles/table.scss +++ b/packages/client/src/tiptap/core/styles/table.scss @@ -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; diff --git a/packages/client/src/tiptap/editor/menus/table/col-bubble.tsx b/packages/client/src/tiptap/editor/menus/table/col-bubble.tsx index c11fbe9..908b474 100644 --- a/packages/client/src/tiptap/editor/menus/table/col-bubble.tsx +++ b/packages/client/src/tiptap/editor/menus/table/col-bubble.tsx @@ -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; diff --git a/packages/client/src/tiptap/editor/menus/table/row-bubble.tsx b/packages/client/src/tiptap/editor/menus/table/row-bubble.tsx index 6a31001..d221c0d 100644 --- a/packages/client/src/tiptap/editor/menus/table/row-bubble.tsx +++ b/packages/client/src/tiptap/editor/menus/table/row-bubble.tsx @@ -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;