mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-15 11:44:05 +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> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@@ -8,12 +9,11 @@
<body> <body>
<main></main> <main></main>
<script> <script>
/* eslint-disable */
// Dynamically creates the script and link tag and adds the current time // 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 // in ms as a query on the URL. This ensures the script and the link is
// always reloaded. // always reloaded. Useful during debugging because we want to see changes
// // to the JavaScript and CSS code immediately.
// Useful during debugging because we want to see changes to the
// JavaScript and CSS code immediately.
var head = document.getElementsByTagName('head')[0] var head = document.getElementsByTagName('head')[0]
var script = document.createElement('script') var script = document.createElement('script')
var time = new Date().getTime() var time = new Date().getTime()

3
examples/images/index.js
View File

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

2
examples/index.html
View File

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

2
package.json
View File

@@ -72,7 +72,7 @@
"build": "yarn run build:packages", "build": "yarn run build:packages",
"build:examples": "yarn run build:examples:dev && yarn run build:examples:prod", "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: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", "build:packages": "lerna run build",
"clean": "lerna run clean && lerna clean", "clean": "lerna run clean && lerna clean",
"gh-pages": "yarn run build && yarn run build:examples && gh-pages --dist ./examples", "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() { render() {
const { props } = this const { props } = this
const { children, node } = props const { children, node, readOnly } = props
const Tag = node.kind == 'block' ? 'div' : 'span' 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 }) this.debug('render', { props })
@@ -138,7 +153,9 @@ class Void extends React.Component {
onDragEnter={this.onDragEnter} onDragEnter={this.onDragEnter}
onDragStart={this.onDragStart} onDragStart={this.onDragStart}
> >
{this.renderSpacer()} <Tag style={style}>
{this.renderText()}
</Tag>
<Tag contentEditable={false}> <Tag contentEditable={false}>
{children} {children}
</Tag> </Tag>
@@ -147,33 +164,19 @@ class Void extends React.Component {
} }
/** /**
* Render a fake spacer text, which will catch the cursor when it the void * Render the void node's text node, which will catch the cursor when it the
* node is navigated to with the arrow keys. Having this spacer there means * void node is navigated to with the arrow keys.
* the browser continues to manage the selection natively, so it keeps track *
* of the right offset when moving across the block. * 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} * @return {Element}
*/ */
renderSpacer = () => { renderText = () => {
const { block, decorations, isSelected, node, readOnly, schema, state, editor } = this.props const { block, decorations, isSelected, node, readOnly, schema, state, editor } = this.props
const child = node.getFirstText() 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 ( return (
<Text <Text
block={node.kind == 'block' ? node : block} block={node.kind == 'block' ? node : block}
@@ -186,7 +189,6 @@ class Void extends React.Component {
readOnly={readOnly} readOnly={readOnly}
schema={schema} schema={schema}
state={state} state={state}
style={style}
/> />
) )
} }