diff --git a/examples/composition/index.js b/examples/composition/index.js index f29cf2363..7a136a197 100644 --- a/examples/composition/index.js +++ b/examples/composition/index.js @@ -9,6 +9,7 @@ import insert from './insert.js' import special from './special.js' import { isKeyHotkey } from 'is-hotkey' import { Button, Icon, Toolbar } from '../components' +import { ANDROID_API_VERSION } from 'slate-dev-environment' /** * Define the default node type. @@ -47,6 +48,41 @@ const Tab = styled(TabLink)` margin-right: 0.25em; ` +const Version = styled('div')` + float: right; + padding: 0.5em; + font-size: 75%; + color: #808080; +` + +const EditorText = styled('div')` + color: #808080; + background: #f0f0f0; + font: 12px monospace; + white-space: pre-wrap; + margin: 1em -1em; + padding: 0.5em; + div { + margin: 0 0 0.5em; + } +` + +const EditorTextCaption = styled('div')` + color: white; + background: #808080; + padding: 0.5em; +` + +/** + * Extract lines of text from `Value` + * + * @return {String[]} + */ + +function getTextLines(value) { + return value.document.nodes.map(node => node.text).toArray() +} + /** * Subpages which are each a smoke test. * @@ -145,6 +181,7 @@ class RichTextExample extends React.Component { render() { const { text } = this.state if (text == null) return + const textLines = getTextLines(this.state.value) return (
@@ -161,6 +198,11 @@ class RichTextExample extends React.Component { ) })} + + {ANDROID_API_VERSION + ? `Android API ${ANDROID_API_VERSION}` + : null} +
{this.state.text}
@@ -186,6 +228,12 @@ class RichTextExample extends React.Component { renderNode={this.renderNode} renderMark={this.renderMark} /> + + Text in Slate's `Value` + {textLines.map((line, index) => ( +
{line.length > 0 ? line : ' '}
+ ))} +
) } diff --git a/package.json b/package.json index 3b592c9bd..82bcc6676 100644 --- a/package.json +++ b/package.json @@ -83,6 +83,7 @@ "peerDependencies": { "slate": "*", "slate-dev-benchmark": "*", + "slate-dev-environment": "*", "slate-dev-test-utils": "*", "slate-html-serializer": "*", "slate-plain-serializer": "*",