mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-15 03:33:59 +02:00
Code Issues Releases Wiki Activity

fix block void node spacing, closes #1226

Browse Source
This commit is contained in:
Ian Storm Taylor
2017-10-13 18:00:51 -07:00
parent aa2ae9f4a1
commit 5c1d43e3f9
5 changed files with 34 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
examples/dev.html
View File

@@ -1,3 +1,4 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
@@ -8,12 +9,11 @@
<body>
<main></main>
<script>
/* eslint-disable */
// Dynamically creates the script and link tag and adds the current time
// in ms as a query on the URL. This ensures the script and the link is
// always reloaded.
//
// Useful during debugging because we want to see changes to the
// JavaScript and CSS code immediately.
// always reloaded. Useful during debugging because we want to see changes
// to the JavaScript and CSS code immediately.
var head = document.getElementsByTagName('head')[0]
var script = document.createElement('script')
var time = new Date().getTime()

3
examples/images/index.js
View File

@@ -32,8 +32,9 @@ const schema = {
const { node, isSelected } = props
const src = node.data.get('src')
const className = isSelected ? 'active' : null
const style = { display: 'block' }
return (
<img src={src} className={className} {...props.attributes} />
<img src={src} className={className} style={style} {...props.attributes} />
)
},
paragraph: (props) => {

2
examples/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />

2
package.json
View File

@@ -72,7 +72,7 @@
"build": "yarn run build:packages",
"build:examples": "yarn run build:examples:dev && yarn run build:examples:prod",
"build:examples:dev": "browserify --debug --transform babelify ./examples/index.js > ./examples/build.dev.js",
"build:examples:prod": "NODE_ENV=production browserify --transform babelify ./examples/index.js > ./examples/build.prod.js",
"build:examples:prod": "NODE_ENV=production browserify --global-transform envify --global-transform uglifyify --transform babelify ./examples/index.js > ./examples/build.prod.js",
"build:packages": "lerna run build",
"clean": "lerna run clean && lerna clean",
"gh-pages": "yarn run build && yarn run build:examples && gh-pages --dist ./examples",

50
packages/slate-react/src/components/void.js
View File

@@ -124,8 +124,23 @@ class Void extends React.Component {
render() {
const { props } = this
const { children, node } = props
const { children, node, readOnly } = props
const Tag = node.kind == 'block' ? 'div' : 'span'
let style
if (!readOnly && node.kind == 'block') {
style = {
display: 'block',
height: '0',
color: 'transparent'
}
}
if (!readOnly && node.kind == 'inline') {
style = {
color: 'transparent'
}
}
this.debug('render', { props })
@@ -138,7 +153,9 @@ class Void extends React.Component {
onDragEnter={this.onDragEnter}
onDragStart={this.onDragStart}
>
{this.renderSpacer()}
<Tag style={style}>
{this.renderText()}
</Tag>
<Tag contentEditable={false}>
{children}
</Tag>
@@ -147,33 +164,19 @@ class Void extends React.Component {
}
/**
* Render a fake spacer text, which will catch the cursor when it the void
* node is navigated to with the arrow keys. Having this spacer there means
* the browser continues to manage the selection natively, so it keeps track
* of the right offset when moving across the block.
* Render the void node's text node, which will catch the cursor when it the
* void node is navigated to with the arrow keys.
*
* Having this text node there means the browser continues to manage the
* selection natively, so it keeps track of the right offset when moving
* across the block.
*
* @return {Element}
*/
renderSpacer = () => {
renderText = () => {
const { block, decorations, isSelected, node, readOnly, schema, state, editor } = this.props
const child = node.getFirstText()
let style
if (node.kind == 'block') {
style = {
display: 'inline-block',
verticalAlign: 'top',
width: '0',
height: '0',
color: 'transparent'
}
} else {
style = {
color: 'transparent'
}
}
return (
<Text
block={node.kind == 'block' ? node : block}
@@ -186,7 +189,6 @@ class Void extends React.Component {
readOnly={readOnly}
schema={schema}
state={state}
style={style}
/>
)
}