mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-12 10:14:02 +02:00
Code Issues Releases Wiki Activity

Replace zero width blocks with newline before copy (#1644)

Browse Source 
* Replace zero width blocks with newline before copy

* Fix linting issue

* Fixing linting again, sorry Github
This commit is contained in:
Blake Embrey
2018-02-21 12:38:56 -08:00
committed by Ian Storm Taylor
parent 1776d8e64c
commit 07788eb2d9
11 changed files with 33 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/slate-react/src/components/leaf.js
View File

@@ -116,14 +116,20 @@ class Leaf extends React.Component {
renderText() {
const { block, node, parent, text, index, leaves } = this.props
// COMPAT: If the text is empty and the only child, we need to render a
// line break when copying and pasting to support expected plain text.
if (text == '' && parent.kind == 'block' && parent.text == '') {
return <span data-slate-zero-width="n">{'\u200B'}</span>
}
// COMPAT: Render text inside void nodes with a zero-width space.
// So the node can contain selection but the text is not visible.
if (parent.isVoid) return <span data-slate-zero-width>{'\u200B'}</span>
if (parent.isVoid) return <span data-slate-zero-width="z">{'\u200B'}</span>
// COMPAT: If the text is empty, it's because it's on the edge of an inline
// void node, so we render a zero-width space so that the selection can be
// inserted next to it still.
if (text == '') return <span data-slate-zero-width>{'\u200B'}</span>
if (text == '') return <span data-slate-zero-width="z">{'\u200B'}</span>
// COMPAT: Browsers will collapse trailing new lines at the end of blocks,
// so we need to add an extra trailing new lines to prevent that.

11
packages/slate-react/src/utils/clone-fragment.js
View File

@@ -1,7 +1,8 @@
import Base64 from 'slate-base64-serializer'
import findDOMNode from './find-dom-node'
import getWindow from 'get-window'
import findDOMNode from './find-dom-node'
import { ZERO_WIDTH_SELECTOR, ZERO_WIDTH_ATTRIBUTE } from './find-point'
import { IS_CHROME, IS_SAFARI } from '../constants/environment'
/**
@@ -62,10 +63,10 @@ function cloneFragment(event, value, fragment = value.fragment) {
// Remove any zero-width space spans from the cloned DOM so that they don't
// show up elsewhere when pasted.
const zws = [].slice.call(
contents.querySelectorAll('[data-slate-zero-width]')
)
zws.forEach(zw => zw.parentNode.removeChild(zw))
;[].slice.call(contents.querySelectorAll(ZERO_WIDTH_SELECTOR)).forEach(zw => {
const isNewline = zw.getAttribute(ZERO_WIDTH_ATTRIBUTE) === 'n'
zw.textContent = isNewline ? '\n' : ''
})
// COMPAT: In Chrome and Safari, if the last element in the selection to
// copy has `contenteditable="false"` the copy will fail, and nothing will

4
packages/slate-react/src/utils/find-point.js
View File

@@ -8,6 +8,8 @@ import OffsetKey from './offset-key'
* @type {String}
*/
export const ZERO_WIDTH_ATTRIBUTE = 'data-slate-zero-width'
export const ZERO_WIDTH_SELECTOR = `[${ZERO_WIDTH_ATTRIBUTE}]`
const OFFSET_KEY_ATTRIBUTE = 'data-offset-key'
const RANGE_SELECTOR = `[${OFFSET_KEY_ATTRIBUTE}]`
const TEXT_SELECTOR = `[data-key]`
@@ -60,7 +62,7 @@ function findPoint(nativeNode, nativeOffset, value) {
// from the offset to account for the zero-width space character.
if (
offset == node.textContent.length &&
parentNode.hasAttribute('data-slate-zero-width')
parentNode.hasAttribute(ZERO_WIDTH_ATTRIBUTE)
) {
offset--
}

2
packages/slate-react/test/rendering/fixtures/custom-block-void.js
View File

@@ -35,7 +35,7 @@ export const output = `
<div contenteditable="true" data-slate-spacer="true" style="height:0;color:transparent;outline:none">
<span>
<span>
<span data-slate-zero-width="true">&#x200B;</span>
<span data-slate-zero-width="z">&#x200B;</span>
</span>
</span>
</div>

8
packages/slate-react/test/rendering/fixtures/custom-inline-multiple.js
View File

@@ -39,7 +39,7 @@ export const output = `
<div style="position:relative">
<span>
<span>
<span data-slate-zero-width="true">&#x200B;</span>
<span data-slate-zero-width="z">&#x200B;</span>
</span>
</span>
<a href="https://google.com">
@@ -49,7 +49,7 @@ export const output = `
</a>
<span>
<span>
<span data-slate-zero-width="true">&#x200B;</span>
<span data-slate-zero-width="z">&#x200B;</span>
</span>
</span>
<a href="https://google.com">
@@ -59,7 +59,7 @@ export const output = `
</a>
<span>
<span>
<span data-slate-zero-width="true">&#x200B;</span>
<span data-slate-zero-width="z">&#x200B;</span>
</span>
</span>
<a href="https://google.com">
@@ -69,7 +69,7 @@ export const output = `
</a>
<span>
<span>
<span data-slate-zero-width="true">&#x200B;</span>
<span data-slate-zero-width="z">&#x200B;</span>
</span>
</span>
</div>

6
packages/slate-react/test/rendering/fixtures/custom-inline-void.js
View File

@@ -33,14 +33,14 @@ export const output = `
<div style="position:relative">
<span>
<span>
<span data-slate-zero-width="true">&#x200B;</span>
<span data-slate-zero-width="z">&#x200B;</span>
</span>
</span>
<span data-slate-void="true" contenteditable="false">
<span contenteditable="true" data-slate-spacer="true" style="height:0;color:transparent;outline:none">
<span>
<span>
<span data-slate-zero-width="true">&#x200B;</span>
<span data-slate-zero-width="z">&#x200B;</span>
</span>
</span>
</span>
@@ -50,7 +50,7 @@ export const output = `
</span>
<span>
<span>
<span data-slate-zero-width="true">&#x200B;</span>
<span data-slate-zero-width="z">&#x200B;</span>
</span>
</span>
</div>

4
packages/slate-react/test/rendering/fixtures/custom-inline.js
View File

@@ -37,7 +37,7 @@ export const output = `
<div style="position:relative">
<span>
<span>
<span data-slate-zero-width="true">&#x200B;</span>
<span data-slate-zero-width="z">&#x200B;</span>
</span>
</span>
<a href="https://google.com">
@@ -47,7 +47,7 @@ export const output = `
</a>
<span>
<span>
<span data-slate-zero-width="true">&#x200B;</span>
<span data-slate-zero-width="z">&#x200B;</span>
</span>
</span>
</div>

4
packages/slate-react/test/rendering/fixtures/default-block-with-inline.js
View File

@@ -19,7 +19,7 @@ export const output = `
<div style="position:relative">
<span>
<span>
<span data-slate-zero-width="true">&#x200B;</span>
<span data-slate-zero-width="z">&#x200B;</span>
</span>
</span>
<span style="position:relative">
@@ -29,7 +29,7 @@ export const output = `
</span>
<span>
<span>
<span data-slate-zero-width="true">&#x200B;</span>
<span data-slate-zero-width="z">&#x200B;</span>
</span>
</span>
</div>

2
packages/slate-react/test/rendering/fixtures/empty-block-with-inline.js
View File

@@ -19,7 +19,7 @@ export const output = `
<div style="position:relative">
<span>
<span>
<span data-slate-zero-width="true">\u200B</span>
<span data-slate-zero-width="n">\u200B</span>
</span>
</span>
</div>

2
packages/slate-react/test/rendering/fixtures/empty-block.js
View File

@@ -17,7 +17,7 @@ export const output = `
<div style="position:relative">
<span>
<span>
<span data-slate-zero-width="true">\u200B</span>
<span data-slate-zero-width="n">\u200B</span>
</span>
</span>
</div>

4
packages/slate-react/test/rendering/fixtures/readonly-custom-inline-void.js
View File

@@ -34,7 +34,7 @@ export const output = `
<div style="position:relative">
<span>
<span>
<span data-slate-zero-width="true">&#x200B;</span>
<span data-slate-zero-width="z">&#x200B;</span>
</span>
</span>
<span data-slate-void="true">
@@ -44,7 +44,7 @@ export const output = `
</span>
<span>
<span>
<span data-slate-zero-width="true">&#x200B;</span>
<span data-slate-zero-width="z">&#x200B;</span>
</span>
</span>
</div>