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

Lint JSON, CSS and Markdown files with Prettier (#1612)

Browse Source 
* Process and Lint CSS, Markdown and JSON files with Prettier

* Run `yarn prettier` to re-format Markdown, CSS and JSON files
This commit is contained in:
Renaud Chaput
2018-02-07 15:58:41 +00:00
committed by Ian Storm Taylor
parent fc264841b6
commit de4c9e478a
89 changed files with 1105 additions and 1148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/walkthroughs/adding-event-handlers.md
View File

@@ -1,4 +1,3 @@
<br/>
<p align="center"><strong>Previous:</strong><br/><a href="./installing-slate.md">Installing Slate</a></p>
<br/>
@@ -15,9 +14,8 @@ So we start with our app from earlier:
```js
class App extends React.Component {
state = {
value: initialValue
value: initialValue,
}
onChange = ({ value }) => {
@@ -25,14 +23,8 @@ class App extends React.Component {
}
render() {
return (
<Editor
value={this.state.value}
onChange={this.onChange}
/>
)
return <Editor value={this.state.value} onChange={this.onChange} />
}
}
```
@@ -40,9 +32,8 @@ And now we'll add an `onKeyDown` handler:
```js
class App extends React.Component {
state = {
value: initialValue
value: initialValue,
}
onChange = ({ value }) => {
@@ -63,7 +54,6 @@ class App extends React.Component {
/>
)
}
}
```
@@ -75,9 +65,8 @@ Our `onKeyDown` handler might look like this:
```js
class App extends React.Component {
state = {
value: initialValue
value: initialValue,
}
onChange = ({ value }) => {
@@ -105,7 +94,6 @@ class App extends React.Component {
/>
)
}
}
```

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

@@ -1,4 +1,3 @@
<br/>
<p align="center"><strong>Previous:</strong><br/><a href="./defining-custom-block-nodes.md">Defining Custom Block Nodes</a></p>
<br/>
@@ -13,7 +12,6 @@ So we start with our app from earlier:
```js
class App extends React.Component {
state = {
value: initialValue,
}
@@ -41,13 +39,13 @@ class App extends React.Component {
/>
)
}
renderNode = (props) => {
renderNode = props => {
switch (props.node.type) {
case 'code': return <CodeNode {...props} />
case 'code':
return <CodeNode {...props} />
}
}
}
```
@@ -55,7 +53,6 @@ And now, we'll edit the `onKeyDown` handler to make it so that when you press `c
```js
class App extends React.Component {
state = {
value: initialValue,
}
@@ -95,13 +92,13 @@ class App extends React.Component {
/>
)
}
renderNode = (props) => {
renderNode = props => {
switch (props.node.type) {
case 'code': return <CodeNode {...props} />
case 'code':
return <CodeNode {...props} />
}
}
}
```
@@ -126,7 +123,6 @@ function BoldMark(props) {
}
class App extends React.Component {
state = {
value: initialValue,
}
@@ -165,20 +161,21 @@ class App extends React.Component {
/>
)
}
renderNode = (props) => {
renderNode = props => {
switch (props.node.type) {
case 'code': return <CodeNode {...props} />
case 'code':
return <CodeNode {...props} />
}
}
// Add a `renderMark` method to render marks.
renderMark = (props) => {
renderMark = props => {
switch (props.mark.type) {
case 'bold': return <BoldMark {...props} />
case 'bold':
return <BoldMark {...props} />
}
}
}
```

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

@@ -1,4 +1,3 @@
<br/>
<p align="center"><strong>Previous:</strong><br/><a href="./adding-event-handlers.md">Adding Event Handlers</a></p>
<br/>
@@ -13,9 +12,8 @@ We'll show you how. Let's start with our app from earlier:
```js
class App extends React.Component {
state = {
value: initialValue
value: initialValue,
}
onChange = ({ value }) => {
@@ -25,7 +23,7 @@ class App extends React.Component {
onKeyDown = (event, change) => {
if (event.key != '&') return
event.preventDefault()
change.insertText('and');
change.insertText('and')
return true
}
@@ -38,7 +36,6 @@ class App extends React.Component {
/>
)
}
}
```
@@ -51,7 +48,11 @@ Node renderers are just simple React components, like so:
```js
// Define a React component renderer for our code blocks.
function CodeNode(props) {
return <pre {...props.attributes}><code>{props.children}</code></pre>
return (
<pre {...props.attributes}>
<code>{props.children}</code>
</pre>
)
}
```
@@ -65,11 +66,14 @@ Now, let's add that renderer to our `Editor`:
```js
function CodeNode(props) {
return <pre {...props.attributes}><code>{props.children}</code></pre>
return (
<pre {...props.attributes}>
<code>{props.children}</code>
</pre>
)
}
class App extends React.Component {
state = {
value: initialValue,
}
@@ -98,12 +102,12 @@ class App extends React.Component {
}
// Add a `renderNode` method to render a `CodeNode` for code blocks.
renderNode = (props) => {
renderNode = props => {
switch (props.node.type) {
case 'code': return <CodeNode {...props} />
case 'code':
return <CodeNode {...props} />
}
}
}
```
@@ -111,11 +115,14 @@ Okay, but now we'll need a way for the user to actually turn a block into a code
```js
function CodeNode(props) {
return <pre {...props.attributes}><code>{props.children}</code></pre>
return (
<pre {...props.attributes}>
<code>{props.children}</code>
</pre>
)
}
class App extends React.Component {
state = {
value: initialValue,
}
@@ -147,28 +154,31 @@ class App extends React.Component {
)
}
renderNode = (props) => {
renderNode = props => {
switch (props.node.type) {
case 'code': return <CodeNode {...props} />
case 'code':
return <CodeNode {...props} />
}
}
}
```
Now, if you press `control-\`` the block your cursor is in should turn into a code block! Magic!
Now, if you press `control-\`` the block your cursor is in should turn into a code block! Magic!
*Note: The Edge browser does not currently support `control-...` key events (see [issue](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/742263/)), so this example won't work on it.*
_Note: The Edge browser does not currently support `control-...` key events (see [issue](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/742263/)), so this example won't work on it._
But we forgot one thing. When you hit `control-\`` again, it should change the code block back into a paragraph. To do that, we'll need to add a bit of logic to change the type we set based on whether any of the currently selected blocks are already a code block:
```js
function CodeNode(props) {
return <pre {...props.attributes}><code>{props.children}</code></pre>
return (
<pre {...props.attributes}>
<code>{props.children}</code>
</pre>
)
}
class App extends React.Component {
state = {
value: initialValue,
}
@@ -201,12 +211,12 @@ class App extends React.Component {
)
}
renderNode = (props) => {
renderNode = props => {
switch (props.node.type) {
case 'code': return <CodeNode {...props} />
case 'code':
return <CodeNode {...props} />
}
}
}
```

47
docs/walkthroughs/installing-slate.md
View File

@@ -1,4 +1,3 @@
# Installing Slate
Slate is a monorepo divided up into multi npm packages, so to install it you do:
@@ -43,14 +42,14 @@ const initialValue = Value.fromJSON({
object: 'text',
leaves: [
{
text: 'A line of text in a paragraph.'
}
]
}
]
}
]
}
text: 'A line of text in a paragraph.',
},
],
},
],
},
],
},
})
```
@@ -73,22 +72,21 @@ const initialValue = Value.fromJSON({
object: 'text',
leaves: [
{
text: 'A line of text in a paragraph.'
}
]
}
]
}
]
}
text: 'A line of text in a paragraph.',
},
],
},
],
},
],
},
})
// Define our app...
class App extends React.Component {
// Set the initial value when the app is first constructed.
state = {
value: initialValue
value: initialValue,
}
// On change, update the app's React state with the new editor value.
@@ -98,24 +96,17 @@ class App extends React.Component {
// Render the editor.
render() {
return (
<Editor
value={this.state.value}
onChange={this.onChange}
/>
)
return <Editor value={this.state.value} onChange={this.onChange} />
}
}
```
You'll notice that the `onChange` handler passed into the `Editor` component just updates the app's state with the newest changed value. That way, when it re-renders the editor, the new value is reflected with your changes.
And that's it!
And that's it!
That's the most basic example of Slate. If you render that onto the page, you should see a paragraph with the text `A line of text in a paragraph.`. And when you type, you should see the text change!
<br/>
<p align="center"><strong>Next:</strong><br/><a href="./adding-event-handlers.md">Adding Event Handlers</a></p>
<br/>

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

@@ -1,4 +1,3 @@
<br/>
<p align="center"><strong>Previous:</strong><br/><a href="./saving-to-a-database.md">Saving to a Database</a></p>
<br/>
@@ -13,9 +12,8 @@ Let's start with a basic editor:
import { Editor } from 'slate-react'
class App extends React.Component {
state = {
value: Plain.deserialize('')
value: Plain.deserialize(''),
}
onChange({ value }) {
@@ -23,14 +21,8 @@ class App extends React.Component {
}
render() {
return (
<Editor
value={this.state.value}
onChange={this.onChange}
/>
)
return <Editor value={this.state.value} onChange={this.onChange} />
}
}
```
@@ -38,10 +30,10 @@ That will render a basic Slate editor on your page.
Now... we need to add the [`Html`](../reference/serializers/html.md) serializer. And to do that, we need to tell it a bit about the schema we plan on using. For this example, we'll work with a schema that has a few different parts:
- A `paragraph` block.
- A `code` block for code samples.
- A `quote` block for quotes...
- And `bold`, `italic` and `underline` formatting.
* A `paragraph` block.
* A `code` block for code samples.
* A `quote` block for quotes...
* And `bold`, `italic` and `underline` formatting.
By default, the `Html` serializer, knows nothing about our schema just like Slate itself. To fix this, we need to pass it a set of `rules`. Each rule defines how to serialize and deserialize a Slate object.
@@ -56,11 +48,11 @@ const rules = [
return {
object: 'block',
type: 'paragraph',
nodes: next(el.childNodes)
nodes: next(el.childNodes),
}
}
}
}
},
},
]
```
@@ -76,7 +68,7 @@ const rules = [
return {
object: 'block',
type: 'paragraph',
nodes: next(el.childNodes)
nodes: next(el.childNodes),
}
}
},
@@ -85,8 +77,8 @@ const rules = [
if (obj.object == 'block' && obj.type == 'paragraph') {
return <p>{children}</p>
}
}
}
},
},
]
```
@@ -103,7 +95,7 @@ Let's add the other types of blocks we want:
const BLOCK_TAGS = {
p: 'paragraph',
blockquote: 'quote',
pre: 'code'
pre: 'code',
}
const rules = [
@@ -115,19 +107,26 @@ const rules = [
return {
object: 'block',
type: type,
nodes: next(el.childNodes)
nodes: next(el.childNodes),
}
},
// Switch serialize to handle more blocks...
serialize(obj, children) {
if (obj.object != 'block') return
switch (obj.type) {
case 'paragraph': return <p>{children}</p>
case 'quote': return <blockquote>{children}</blockquote>
case 'code': return <pre><code>{children}</code></pre>
case 'paragraph':
return <p>{children}</p>
case 'quote':
return <blockquote>{children}</blockquote>
case 'code':
return (
<pre>
<code>{children}</code>
</pre>
)
}
}
}
},
},
]
```
@@ -137,12 +136,11 @@ You'll notice that even though code blocks are nested in a `<pre>` and a `<code>
Okay. So now our serializer can handle blocks, but we need to add our marks to it as well. Let's do that with a new rule...
```js
const BLOCK_TAGS = {
blockquote: 'quote',
p: 'paragraph',
pre: 'code'
pre: 'code',
}
// Add a dictionary of mark tags.
@@ -160,17 +158,24 @@ const rules = [
return {
object: 'block',
type: type,
nodes: next(el.childNodes)
nodes: next(el.childNodes),
}
},
serialize(obj, children) {
if (obj.object != 'block') return
switch (obj.type) {
case 'code': return <pre><code>{children}</code></pre>
case 'paragraph': return <p>{children}</p>
case 'quote': return <blockquote>{children}</blockquote>
case 'code':
return (
<pre>
<code>{children}</code>
</pre>
)
case 'paragraph':
return <p>{children}</p>
case 'quote':
return <blockquote>{children}</blockquote>
}
}
},
},
// Add a new rule that handles marks...
{
@@ -180,18 +185,21 @@ const rules = [
return {
object: 'mark',
type: type,
nodes: next(el.childNodes)
nodes: next(el.childNodes),
}
},
serialize(obj, children) {
if (obj.object != 'mark') return
switch (obj.type) {
case 'bold': return <strong>{children}</strong>
case 'italic': return <em>{children}</em>
case 'underline': return <u>{children}</u>
case 'bold':
return <strong>{children}</strong>
case 'italic':
return <em>{children}</em>
case 'underline':
return <u>{children}</u>
}
}
}
},
},
]
```
@@ -208,13 +216,9 @@ And finally, now that we have our serializer initialized, we can update our app
```js
// Load the initial value from Local Storage or a default.
const initialValue = (
localStorage.getItem('content') ||
'<p></p>'
)
const initialValue = localStorage.getItem('content') || '<p></p>'
class App extends React.Component {
state = {
value: html.deserialize(initialValue),
}
@@ -240,24 +244,33 @@ class App extends React.Component {
/>
)
}
renderNode = (props) => {
renderNode = props => {
switch (props.node.type) {
case 'code': return <pre {...props.attributes}><code>{props.children}</code></pre>
case 'paragraph': return <p {...props.attributes}>{props.children}</p>
case 'quote': return <blockquote {...props.attributes}>{props.children}</blockquote>
case 'code':
return (
<pre {...props.attributes}>
<code>{props.children}</code>
</pre>
)
case 'paragraph':
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) => {
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>
case 'bold':
return <strong>{props.children}</strong>
case 'italic':
return <em>{props.children}</em>
case 'underline':
return <u>{props.children}</u>
}
}
}
```

173
docs/walkthroughs/saving-to-a-database.md
View File

@@ -1,4 +1,3 @@
<br/>
<p align="center"><strong>Previous:</strong><br/><a href="./using-plugins.md">Using Plugins</a></p>
<br/>
@@ -26,20 +25,19 @@ const initialValue = Value.fromJSON({
object: 'text',
leaves: [
{
text: 'A line of text in a paragraph.'
}
]
}
]
}
]
}
text: 'A line of text in a paragraph.',
},
],
},
],
},
],
},
})
class App extends React.Component {
state = {
value: initialValue
value: initialValue,
}
onChange = ({ value }) => {
@@ -47,14 +45,8 @@ class App extends React.Component {
}
render() {
return (
<Editor
value={this.state.value}
onChange={this.onChange}
/>
)
return <Editor value={this.state.value} onChange={this.onChange} />
}
}
```
@@ -76,20 +68,19 @@ const initialValue = Value.fromJSON({
object: 'text',
leaves: [
{
text: 'A line of text in a paragraph.'
}
]
}
]
}
]
}
text: 'A line of text in a paragraph.',
},
],
},
],
},
],
},
})
class App extends React.Component {
state = {
value: initialValue
value: initialValue,
}
onChange = ({ value }) => {
@@ -101,14 +92,8 @@ class App extends React.Component {
}
render() {
return (
<Editor
value={this.state.value}
onChange={this.onChange}
/>
)
return <Editor value={this.state.value} onChange={this.onChange} />
}
}
```
@@ -119,31 +104,32 @@ But... if you refresh the page, everything is still reset. That's because we nee
```js
// Update the initial content to be pulled from Local Storage if it exists.
const existingValue = JSON.parse(localStorage.getItem('content'))
const initialValue = Value.fromJSON(existingValue || {
document: {
nodes: [
{
object: 'block',
type: 'paragraph',
nodes: [
{
object: 'text',
leaves: [
{
text: 'A line of text in a paragraph.'
}
]
}
]
}
]
const initialValue = Value.fromJSON(
existingValue || {
document: {
nodes: [
{
object: 'block',
type: 'paragraph',
nodes: [
{
object: 'text',
leaves: [
{
text: 'A line of text in a paragraph.',
},
],
},
],
},
],
},
}
})
)
class App extends React.Component {
state = {
value: initialValue
value: initialValue,
}
onChange = ({ value }) => {
@@ -154,14 +140,8 @@ class App extends React.Component {
}
render() {
return (
<Editor
value={this.state.value}
onChange={this.onChange}
/>
)
return <Editor value={this.state.value} onChange={this.onChange} />
}
}
```
@@ -171,31 +151,32 @@ However, if you inspect the change handler, you'll notice that it's actually sav
```js
const existingValue = JSON.parse(localStorage.getItem('content'))
const initialValue = Value.fromJSON(existingValue || {
document: {
nodes: [
{
object: 'block',
type: 'paragraph',
nodes: [
{
object: 'text',
leaves: [
{
text: 'A line of text in a paragraph.'
}
]
}
]
}
]
const initialValue = Value.fromJSON(
existingValue || {
document: {
nodes: [
{
object: 'block',
type: 'paragraph',
nodes: [
{
object: 'text',
leaves: [
{
text: 'A line of text in a paragraph.',
},
],
},
],
},
],
},
}
})
)
class App extends React.Component {
state = {
value: initialValue
value: initialValue,
}
onChange = ({ value }) => {
@@ -209,14 +190,8 @@ class App extends React.Component {
}
render() {
return (
<Editor
value={this.state.value}
onChange={this.onChange}
/>
)
return <Editor value={this.state.value} onChange={this.onChange} />
}
}
```
@@ -232,12 +207,13 @@ import { Editor } from 'slate-react'
import Plain from 'slate-plain-serializer'
const existingValue = localStorage.getItem('content')
const initialValue = Plain.deserialize(existingValue || 'A string of plain text.')
const initialValue = Plain.deserialize(
existingValue || 'A string of plain text.'
)
class App extends React.Component {
state = {
value: initialValue
value: initialValue,
}
onChange = ({ value }) => {
@@ -250,14 +226,8 @@ class App extends React.Component {
}
render() {
return (
<Editor
value={this.state.value}
onChange={this.onChange}
/>
)
return <Editor value={this.state.value} onChange={this.onChange} />
}
}
```
@@ -265,7 +235,6 @@ That works! Now you're working with plain text.
However, sometimes you may want something a bit more custom, and a bit more complex... good old fashioned HTML. In that case, check out the next guide...
<br/>
<p align="center"><strong>Next:</strong><br/><a href="./saving-and-loading-html-content.md">Saving and Loading HTML Content</a></p>
<br/>

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

@@ -1,4 +1,3 @@
<br/>
<p align="center"><strong>Previous:</strong><br/><a href="./applying-custom-formatting.md">Applying Custom Formatting</a></p>
<br/>
@@ -15,7 +14,6 @@ Starting with our app from earlier:
```js
class App extends React.Component {
state = {
value: initialValue,
}
@@ -42,12 +40,12 @@ class App extends React.Component {
)
}
renderMark = (props) => {
renderMark = props => {
switch (props.mark.type) {
case 'bold': return <strong>{props.children}</strong>
case 'bold':
return <strong>{props.children}</strong>
}
}
}
```
@@ -82,7 +80,7 @@ function MarkHotkey(options) {
// Toggle the mark `type`.
change.toggleMark(type)
return true
}
},
}
}
```
@@ -95,16 +93,13 @@ Now that we have our plugin, let's remove the hard-coded logic from our app, and
// Initialize our bold-mark-adding plugin.
const boldPlugin = MarkHotkey({
type: 'bold',
key: 'b'
key: 'b',
})
// Create an array of plugins.
const plugins = [
boldPlugin
]
const plugins = [boldPlugin]
class App extends React.Component {
state = {
value: initialValue,
}
@@ -124,13 +119,13 @@ class App extends React.Component {
/>
)
}
renderMark = (props) => {
renderMark = props => {
switch (props.mark.type) {
case 'bold': return <strong>{props.children}</strong>
case 'bold':
return <strong>{props.children}</strong>
}
}
}
```
@@ -145,11 +140,10 @@ const plugins = [
MarkHotkey({ key: '`', type: 'code' }),
MarkHotkey({ key: 'i', type: 'italic' }),
MarkHotkey({ key: '~', type: 'strikethrough' }),
MarkHotkey({ key: 'u', type: 'underline' })
MarkHotkey({ key: 'u', type: 'underline' }),
]
class App extends React.Component {
state = {
value: initialValue,
}
@@ -168,18 +162,22 @@ class App extends React.Component {
/>
)
}
renderMark = (props) => {
renderMark = props => {
switch (props.mark.type) {
case 'bold': return <strong>{props.children}</strong>
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>
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>
}
}
}
```
@@ -187,7 +185,6 @@ And there you have it! We just added a ton of functionality to the editor with v
That's why plugins are awesome. They let you get really expressive while also making your codebase easier to manage. And since Slate is built with plugins as a primary consideration, using them is dead simple!
<br/>
<p align="center"><strong>Next:</strong><br/><a href="./saving-to-a-database.md">Saving to a Database</a></p>
<br/>

4
docs/walkthroughs/using-the-bundled-source.md
View File

@@ -1,7 +1,6 @@
# Using the Bundled Source
For most folks, you'll want to install Slate via `npm`, in which case you can follow the regular [Installing Slate](./installing-slate.md) guide.
For most folks, you'll want to install Slate via `npm`, in which case you can follow the regular [Installing Slate](./installing-slate.md) guide.
But, if you'd rather install Slate by simply adding a `<script>` tag to your application, this guide will help you. To make the "bundled" use case simpler, each version of Slate ships with a bundled source file called `slate.js`.
@@ -55,4 +54,3 @@ That's it, you're ready to go!
<br/>
<p align="center"><strong>Next:</strong><br/><a href="./adding-event-handlers.md">Adding Event Handlers</a></p>
<br/>