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

remove rendering from schema & make it expressive (#1262)

Browse Source 
* split rendering out of schema

* remove default components

* first stab at new schema

* make default normalizations smarter

* revert to forcing defaults to be verbose?

* refactor reason constants

* split nodes into blocks/inlines

* get tests passing

* restructure schema tests

* add parent test

* cleanup

* remove defaults from schema

* refactor schema rule.nodes validation, update example

* embed schema in state objects

* fixes

* update examples, and fixes

* update walkthroughs

* update docs

* remove old schemas doc page

* add more tests

* update benchmarks
This commit is contained in:
Ian Storm Taylor
2017-10-25 17:32:29 -07:00
committed by GitHub
parent 6298d5442d
commit 509d3d50fc
102 changed files with 2977 additions and 2175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
docs/walkthroughs/applying-custom-formatting.md
View File

@@ -16,11 +16,6 @@ class App extends React.Component {
state = {
state: initialState,
schema: {
nodes: {
code: CodeNode
}
}
}
onChange = ({ state }) => {
@@ -40,12 +35,18 @@ class App extends React.Component {
return (
<Editor
state={this.state.state}
schema={this.state.schema}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}
/>
)
}
renderNode = (props) => {
switch (props.node.type) {
case 'code': return <CodeNode {...props} />
}
}
}
```
@@ -57,11 +58,6 @@ class App extends React.Component {
state = {
state: initialState,
schema: {
nodes: {
code: CodeNode
}
}
}
onChange = ({ state }) => {
@@ -92,13 +88,19 @@ class App extends React.Component {
render() {
return (
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}
/>
)
}
renderNode = (props) => {
switch (props.node.type) {
case 'code': return <CodeNode {...props} />
}
}
}
```
@@ -116,9 +118,7 @@ function BoldMark(props) {
Pretty simple, right?
And now, let's tell Slate about that mark.
To do that, we'll add it to the `schema` object under a `marks` property.
Also, let's allow our mark to be toggled by changing `addMark` to `toggleMark`.
And now, let's tell Slate about that mark. To do that, we'll pass in the `renderMark` prop to our editor. Also, let's allow our mark to be toggled by changing `addMark` to `toggleMark`.
```js
function BoldMark(props) {
@@ -129,15 +129,6 @@ class App extends React.Component {
state = {
state: initialState,
schema: {
nodes: {
code: CodeNode
},
// Add our "bold" mark to the schema...
marks: {
bold: BoldMark
}
}
}
onChange = ({ state }) => {
@@ -165,13 +156,28 @@ class App extends React.Component {
render() {
return (
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}
// Add the `renderMark` prop...
renderMark={this.renderMark}
/>
)
}
renderNode = (props) => {
switch (props.node.type) {
case 'code': return <CodeNode {...props} />
}
}
// Add a `renderMark` method to render marks.
renderMark = (props) => {
switch (props.mark.type) {
case 'bold': return <BoldMark {...props} />
}
}
}
```

43
docs/walkthroughs/defining-custom-block-nodes.md
View File

@@ -72,12 +72,6 @@ class App extends React.Component {
state = {
state: initialState,
// Add a "schema" to our app's state that we can pass to the Editor.
schema: {
nodes: {
code: CodeNode
}
}
}
onChange = ({ state }) => {
@@ -93,16 +87,23 @@ class App extends React.Component {
render() {
return (
// Pass in the `schema` property...
// Pass in the `renderNode` prop...
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}
/>
)
}
// Add a `renderNode` method to render a `CodeNode` for code blocks.
renderNode = (props) => {
switch (props.node.type) {
case 'code': return <CodeNode {...props} />
}
}
}
```
@@ -117,11 +118,6 @@ class App extends React.Component {
state = {
state: initialState,
schema: {
nodes: {
code: CodeNode
}
}
}
onChange = ({ state }) => {
@@ -143,14 +139,20 @@ class App extends React.Component {
render() {
return (
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}
/>
)
}
renderNode = (props) => {
switch (props.node.type) {
case 'code': return <CodeNode {...props} />
}
}
}
```
@@ -167,11 +169,6 @@ class App extends React.Component {
state = {
state: initialState,
schema: {
nodes: {
code: CodeNode
}
}
}
onChange = ({ state }) => {
@@ -194,13 +191,19 @@ class App extends React.Component {
render() {
return (
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}
/>
)
}
renderNode = (props) => {
switch (props.node.type) {
case 'code': return <CodeNode {...props} />
}
}
}
```

34
docs/walkthroughs/saving-and-loading-html-content.md
View File

@@ -219,19 +219,6 @@ class App extends React.Component {
state = {
state: html.deserialize(initialState),
// Add a schema with our nodes and marks...
schema: {
nodes: {
code: props => <pre {...props.attributes}>{props.children}</pre>,
paragraph: props => <p {...props.attributes}>{props.children}</p>,
quote: props => <blockquote {...props.attributes}>{props.children}</blockquote>,
},
marks: {
bold: props => <strong>{props.children}</strong>,
italic: props => <em>{props.children}</em>,
underline: props => <u>{props.children}</u>,
}
}
}
onChange = ({ state }) => {
@@ -247,12 +234,31 @@ class App extends React.Component {
render() {
return (
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={this.onChange}
// Add the ability to render our nodes and marks...
renderNode={this.renderNode}
renderMark={this.renderMark}
/>
)
}
renderNode = (props) => {
switch (props.node.type) {
case 'code': return <pre {...props.attributes}><code>{props.children}</code></pre>
case 'code': return <p {...props.attributes}>{props.children}</p>
case 'quote': return <blockquote {...props.attributes}>{props.children}</blockquote>
}
}
// Add a `renderMark` method to render marks.
renderMark = (props) => {
switch (props.mark.type) {
case 'bold': return <strong>{props.children}</strong>
case 'italic': return <em>{props.children}</em>
case 'underline': return <u>{props.children}</u>
}
}
}
```

49
docs/walkthroughs/using-plugins.md
View File

@@ -18,11 +18,6 @@ class App extends React.Component {
state = {
state: initialState,
schema: {
marks: {
bold: props => <strong>{props.children}</strong>
}
}
}
onChange = ({ state }) => {
@@ -39,14 +34,20 @@ class App extends React.Component {
render() {
return (
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderMark={this.renderMark}
/>
)
}
renderMark = (props) => {
switch (props.mark.type) {
case 'bold': return <strong>{props.children}</strong>
}
}
}
```
@@ -106,11 +107,6 @@ class App extends React.Component {
state = {
state: initialState,
schema: {
marks: {
bold: props => <strong>{props.children}</strong>
}
}
}
onChange = ({ state }) => {
@@ -122,12 +118,18 @@ class App extends React.Component {
// Add the `plugins` property to the editor, and remove `onKeyDown`.
<Editor
plugins={plugins}
schema={this.state.schema}
state={this.state.state}
onChange={this.onChange}
renderMark={this.renderMark}
/>
)
}
renderMark = (props) => {
switch (props.mark.type) {
case 'bold': return <strong>{props.children}</strong>
}
}
}
```
@@ -150,16 +152,6 @@ class App extends React.Component {
state = {
state: initialState,
schema: {
marks: {
bold: props => <strong>{props.children}</strong>,
// Add our new mark renderers...
code: props => <code>{props.children}</code>,
italic: props => <em>{props.children}</em>,
strikethrough: props => <del>{props.children}</del>,
underline: props => <u>{props.children}</u>,
}
}
}
onChange = ({ state }) => {
@@ -170,12 +162,23 @@ class App extends React.Component {
return (
<Editor
plugins={plugins}
schema={this.state.schema}
state={this.state.state}
onChange={this.onChange}
renderMark={this.renderMark}
/>
)
}
renderMark = (props) => {
switch (props.mark.type) {
case 'bold': return <strong>{props.children}</strong>
// Add our new mark renderers...
case 'code': return <code>{props.children}</code>
case 'italic': return <em>{props.children}</em>
case 'strikethrough': return <del>{props.children}</del>
case 'underline': return <u>{props.children}</u>
}
}
}
```