diff --git a/examples/auto-markdown/Readme.md b/examples/auto-markdown/Readme.md index bcd497c21..16cee1cec 100644 --- a/examples/auto-markdown/Readme.md +++ b/examples/auto-markdown/Readme.md @@ -3,6 +3,6 @@ ![](../../docs/images/auto-markdown-example.png) -This example shows you add a few key command handlers to get Markdown-like shortcuts in the editor. Such that once you press `> ` at the start of a line it turns it into a block quote! +This example shows you can add a few key command handlers to get Markdown-like shortcuts in the editor. Such that once you press `> ` at the start of a line it turns it into a block quote! Check out the [Examples readme](..) to see how to run it! diff --git a/examples/code-highlighting/Readme.md b/examples/code-highlighting/Readme.md new file mode 100644 index 000000000..1f64cdc59 --- /dev/null +++ b/examples/code-highlighting/Readme.md @@ -0,0 +1,8 @@ + +# Code Highlighting Example + +![](../../docs/images/code-highlighting-example.png) + +This example shows you how to use "decorators" to render dynamically formatted text—in this case, code blocks! + +Check out the [Examples readme](..) to see how to run it! diff --git a/examples/hovering-menu/Readme.md b/examples/hovering-menu/Readme.md new file mode 100644 index 000000000..99dfaa4c8 --- /dev/null +++ b/examples/hovering-menu/Readme.md @@ -0,0 +1,8 @@ + +# Hovering Menu Example + +![](../../docs/images/hovering-menu-example.png) + +This example shows you add a menu that appears hovering above the current selection as a user clicks around, where you can add formatting buttons. The menu is its own React component, completely separate from Slate, but the buttons in it are wired up to change the content in Slate's editor. + +Check out the [Examples readme](..) to see how to run it! diff --git a/examples/images/Readme.md b/examples/images/Readme.md new file mode 100644 index 000000000..a1810bcb8 --- /dev/null +++ b/examples/images/Readme.md @@ -0,0 +1,9 @@ + +# Images Example + +![](../../docs/images/images-example.png) + +This example shows you how you can use "void" nodes to render content that has no text in it, like images. + +Check out the [Examples readme](..) to see how to run it! + diff --git a/examples/links/Readme.md b/examples/links/Readme.md new file mode 100644 index 000000000..04b913be4 --- /dev/null +++ b/examples/links/Readme.md @@ -0,0 +1,8 @@ + +# Links Example + +![](../../docs/images/links-example.png) + +This example shows you how you can wrap text in "inline" nodes to associate metadata, like an `href`, with a piece of text. This is how you'd add links to Slate, but it's also how you might add hashtags, at-mentions, and many more inline features! + +Check out the [Examples readme](..) to see how to run it! diff --git a/examples/paste-html/Readme.md b/examples/paste-html/Readme.md new file mode 100644 index 000000000..fedebdc09 --- /dev/null +++ b/examples/paste-html/Readme.md @@ -0,0 +1,8 @@ + +# Paste HTML Example + +![](../../docs/images/paste-html-example.png) + +This example shows you how you can use the HTML serializer to convert HTML that a user pastes into the editor into formatted text, instead of it defaulting to plain text. + +Check out the [Examples readme](..) to see how to run it! diff --git a/examples/plain-text/Readme.md b/examples/plain-text/Readme.md new file mode 100644 index 000000000..20aee1528 --- /dev/null +++ b/examples/plain-text/Readme.md @@ -0,0 +1,8 @@ + +# Plain Text Example + +![](../../docs/images/plain-text-example.png) + +This is the most basic Slate example. It's basically a glorified `