diff --git a/examples/index.css b/examples/index.css
index ce344a0a6..336f41591 100644
--- a/examples/index.css
+++ b/examples/index.css
@@ -29,11 +29,19 @@ img {
blockquote {
border-left: 2px solid #ddd;
margin-left: 0;
+ margin-right: 0;
padding-left: 10px;
color: #aaa;
font-style: italic;
}
+blockquote[dir="rtl"] {
+ border-left: none;
+ padding-left: 0;
+ padding-right: 10px;
+ border-right: 2px solid #ddd;
+}
+
table {
border-collapse: collapse;
}
diff --git a/examples/index.js b/examples/index.js
index c8bfd5f20..d894e8666 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -18,6 +18,7 @@ import PlainText from './plain-text'
import Plugins from './plugins'
import ReadOnly from './read-only'
import RichText from './rich-text'
+import RTL from './rtl'
import Tables from './tables'
import DevPerformancePlain from './development/performance-plain'
import DevPerformanceRich from './development/performance-rich'
@@ -73,6 +74,7 @@ class App extends React.Component {
{this.renderTab('Code Highlighting', 'code-highlighting')}
{this.renderTab('Paste HTML', 'paste-html')}
{this.renderTab('Read-only', 'read-only')}
+ {this.renderTab('RTL', 'rtl')}
{this.renderTab('Plugins', 'plugins')}
)
@@ -128,6 +130,7 @@ const router = (
+
diff --git a/examples/rich-text/state.json b/examples/rich-text/state.json
index 2ce81ca27..8e7372be9 100644
--- a/examples/rich-text/state.json
+++ b/examples/rich-text/state.json
@@ -81,26 +81,6 @@
}
]
},
- {
- "kind": "block",
- "type": "paragraph",
- "nodes": [
- {
- "kind": "text",
- "text": "It support both LTR (English) and RTL (Arabic, Hebrew) edition:"
- }
- ]
- },
- {
- "kind": "block",
- "type": "paragraph",
- "nodes": [
- {
- "kind": "text",
- "text": "مرحبا بالعالم"
- }
- ]
- },
{
"kind": "block",
"type": "paragraph",
diff --git a/examples/rtl/Readme.md b/examples/rtl/Readme.md
new file mode 100644
index 000000000..20aee1528
--- /dev/null
+++ b/examples/rtl/Readme.md
@@ -0,0 +1,8 @@
+
+# Plain Text Example
+
+
+
+This is the most basic Slate example. It's basically a glorified `