mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-08-17 20:51:20 +02:00
Reshape Void
component. (#1265)
* Reshape `Void` component. Add some cases where editor blur should be prevented. * Update tests.
This commit is contained in:
committed by
Ian Storm Taylor
parent
3b41f11370
commit
fe0d7fd1ce
@@ -228,9 +228,16 @@ class Content extends React.Component {
|
||||
this.tmp.key++
|
||||
}
|
||||
|
||||
// If the `onSelect` handler fires while the `isUpdatingSelection` flag is
|
||||
// set it's a result of updating the selection manually, so skip it.
|
||||
if (handler == 'onSelect' && this.tmp.isUpdatingSelection) {
|
||||
// Ignore `onBlur`, `onFocus` and `onSelect` events generated
|
||||
// programmatically while updating selection.
|
||||
if (
|
||||
this.tmp.isUpdatingSelection &&
|
||||
(
|
||||
handler == 'onSelect' ||
|
||||
handler == 'onBlur' ||
|
||||
handler == 'onFocus'
|
||||
)
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
|
@@ -65,17 +65,31 @@ class Void extends React.Component {
|
||||
const Tag = node.kind == 'block' ? 'div' : 'span'
|
||||
const style = {
|
||||
height: '0',
|
||||
color: 'transparent'
|
||||
color: 'transparent',
|
||||
outline: 'none'
|
||||
}
|
||||
const spacer = (
|
||||
<Tag
|
||||
contentEditable
|
||||
data-slate-spacer
|
||||
suppressContentEditableWarning
|
||||
style={style}
|
||||
>
|
||||
{this.renderText()}
|
||||
</Tag>
|
||||
)
|
||||
|
||||
this.debug('render', { props })
|
||||
|
||||
return (
|
||||
<Tag data-slate-void data-key={node.key} draggable={readOnly ? null : true}>
|
||||
{!readOnly && <Tag style={style}>
|
||||
{this.renderText()}
|
||||
</Tag>}
|
||||
<Tag contentEditable={readOnly ? null : false}>
|
||||
<Tag
|
||||
data-slate-void
|
||||
data-key={node.key}
|
||||
draggable={readOnly ? null : true}
|
||||
contentEditable={readOnly ? null : false}
|
||||
>
|
||||
{readOnly ? null : spacer }
|
||||
<Tag>
|
||||
{children}
|
||||
</Tag>
|
||||
</Tag>
|
||||
|
@@ -5,6 +5,7 @@ import { findDOMNode } from 'react-dom'
|
||||
|
||||
import HOTKEYS from '../constants/hotkeys'
|
||||
import { IS_FIREFOX, SUPPORTED_EVENTS } from '../constants/environment'
|
||||
import findNode from '../utils/find-node'
|
||||
|
||||
/**
|
||||
* Debug.
|
||||
@@ -60,12 +61,31 @@ function BeforePlugin() {
|
||||
if (isCopying) return true
|
||||
if (editor.props.readOnly) return true
|
||||
|
||||
// If the active element is still the editor, the blur event is due to the
|
||||
// window itself being blurred (eg. when changing tabs) so we should ignore
|
||||
// the event, since we want to maintain focus when returning.
|
||||
const { state } = change
|
||||
const focusTarget = event.relatedTarget
|
||||
|
||||
// If focusTarget is null, the blur event is due to the window itself being
|
||||
// blurred (eg. when changing tabs) so we should ignore the event, since we
|
||||
// want to maintain focus when returning.
|
||||
if (!focusTarget) return true
|
||||
|
||||
const el = findDOMNode(editor)
|
||||
const window = getWindow(el)
|
||||
if (window.document.activeElement == el) return true
|
||||
|
||||
// The event should also be ignored if the focus returns to the editor from
|
||||
// an embedded editable element (eg. an input element inside a void node),
|
||||
if (focusTarget == el) return true
|
||||
|
||||
// when the focus moved from the editor to a void node spacer...
|
||||
if (focusTarget.hasAttribute('data-slate-spacer')) return true
|
||||
|
||||
// or to an editable element inside the editor but not into a void node
|
||||
// (eg. a list item of the check list example).
|
||||
if (
|
||||
el.contains(focusTarget) &&
|
||||
!findNode(focusTarget, state).isVoid
|
||||
) {
|
||||
return true
|
||||
}
|
||||
|
||||
debug('onBlur', { event })
|
||||
}
|
||||
|
@@ -23,13 +23,13 @@ export const state = (
|
||||
|
||||
export const output = `
|
||||
<div data-slate-editor="true" contenteditable="true" role="textbox">
|
||||
<div data-slate-void="true" draggable="true">
|
||||
<div style="height:0;color:transparent">
|
||||
<div data-slate-void="true" draggable="true" contenteditable="false">
|
||||
<div contenteditable="true" data-slate-spacer="true" style="height:0;color:transparent;outline:none">
|
||||
<span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div contenteditable="false">
|
||||
<div>
|
||||
<img src="https://example.com/image.png">
|
||||
</div>
|
||||
</div>
|
||||
|
@@ -31,13 +31,13 @@ export const output = `
|
||||
<span data-slate-zero-width="true"> </span>
|
||||
</span>
|
||||
</span>
|
||||
<span data-slate-void="true" draggable="true">
|
||||
<span style="height:0;color:transparent">
|
||||
<span data-slate-void="true" draggable="true" contenteditable="false">
|
||||
<span contenteditable="true" data-slate-spacer="true" style="height:0;color:transparent;outline:none">
|
||||
<span>
|
||||
<span></span>
|
||||
</span>
|
||||
</span>
|
||||
<span contenteditable="false">
|
||||
<span>
|
||||
<img>
|
||||
</span>
|
||||
</span>
|
||||
|
Reference in New Issue
Block a user