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:
@@ -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
|
||||||
}
|
}
|
||||||
|
@@ -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>
|
||||||
)
|
)
|
||||||
|
@@ -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>
|
||||||
)
|
)
|
||||||
|
Reference in New Issue
Block a user