1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-09 08:46:35 +02:00

fix: unexpected table selection behavior (#5821)

This commit is contained in:
Czy
2025-03-17 10:26:29 +08:00
committed by GitHub
parent 1022682d82
commit a94fe72bd1
3 changed files with 17 additions and 3 deletions

View File

@@ -53,7 +53,9 @@ const App = () => {
Transforms.setNodes( Transforms.setNodes(
editor, editor,
{ type: match ? null : 'code' }, { type: match ? null : 'code' },
{ match: n => Element.isElement(n) && Editor.isBlock(editor, n) } {
match: n => Element.isElement(n) && Editor.isBlock(editor, n),
}
) )
break break
} }

View File

@@ -8,6 +8,7 @@ import {
} from 'slate' } from 'slate'
import { withHistory } from 'slate-history' import { withHistory } from 'slate-history'
import { Editable, Slate, withReact } from 'slate-react' import { Editable, Slate, withReact } from 'slate-react'
import { css } from '@emotion/css'
const TablesExample = () => { const TablesExample = () => {
const renderElement = useCallback(props => <Element {...props} />, []) const renderElement = useCallback(props => <Element {...props} />, [])
@@ -83,7 +84,12 @@ const Element = ({ attributes, children, element }) => {
switch (element.type) { switch (element.type) {
case 'table': case 'table':
return ( return (
<table> <table
className={css`
// avoid unexpected selection behavior on both sides of the table
position: relative;
`}
>
<tbody {...attributes}>{children}</tbody> <tbody {...attributes}>{children}</tbody>
</table> </table>
) )

View File

@@ -16,6 +16,7 @@ import {
withReact, withReact,
} from 'slate-react' } from 'slate-react'
import { CustomEditor } from './custom-types.d' import { CustomEditor } from './custom-types.d'
import { css } from '@emotion/css'
const TablesExample = () => { const TablesExample = () => {
const renderElement = useCallback( const renderElement = useCallback(
@@ -114,7 +115,12 @@ const Element = ({ attributes, children, element }: RenderElementProps) => {
switch (element.type) { switch (element.type) {
case 'table': case 'table':
return ( return (
<table> <table
className={css`
// avoid unexpected selection behavior on both sides of the table
position: relative;
`}
>
<tbody {...attributes}>{children}</tbody> <tbody {...attributes}>{children}</tbody>
</table> </table>
) )