1
0
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:
AlbertHilb
2017-10-26 00:32:10 +02:00
committed by Ian Storm Taylor
parent 3b41f11370
commit fe0d7fd1ce
5 changed files with 61 additions and 20 deletions

View File

@@ -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
}

View File

@@ -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>

View File

@@ -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 })
}

View File

@@ -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>

View File

@@ -31,13 +31,13 @@ export const output = `
<span data-slate-zero-width="true">&#x200A;</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>