From 17d676b639dc7ba99a7f57aaf0c4a3f9a929e950 Mon Sep 17 00:00:00 2001
From: Ian Storm Taylor <ian@ianstormtaylor.com>
Date: Fri, 29 Jul 2016 12:05:01 -0700
Subject: [PATCH] refactor rtl support, add rtl example

---
 examples/index.css                            |  8 ++
 examples/index.js                             |  3 +
 examples/rich-text/state.json                 | 20 -----
 examples/rtl/Readme.md                        |  8 ++
 examples/rtl/index.js                         | 79 +++++++++++++++++++
 examples/rtl/state.json                       | 54 +++++++++++++
 lib/components/node.js                        | 15 ++--
 lib/models/block.js                           | 11 ---
 lib/models/node.js                            | 16 ++++
 lib/utils/bidi.js                             | 30 -------
 .../fixtures/nested-text-direction/index.js   |  4 +
 .../fixtures/nested-text-direction/input.yaml | 17 ++++
 .../nested-text-direction/output.html         | 14 ++++
 13 files changed, 212 insertions(+), 67 deletions(-)
 create mode 100644 examples/rtl/Readme.md
 create mode 100644 examples/rtl/index.js
 create mode 100644 examples/rtl/state.json
 delete mode 100644 lib/utils/bidi.js
 create mode 100644 test/rendering/fixtures/nested-text-direction/index.js
 create mode 100644 test/rendering/fixtures/nested-text-direction/input.yaml
 create mode 100644 test/rendering/fixtures/nested-text-direction/output.html

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')}
       </div>
     )
@@ -128,6 +130,7 @@ const router = (
       <Route path="plugins" component={Plugins} />
       <Route path="read-only" component={ReadOnly} />
       <Route path="rich-text" component={RichText} />
+      <Route path="rtl" component={RTL} />
       <Route path="tables" component={Tables} />
       <Route path="dev-performance-plain" component={DevPerformancePlain} />
       <Route path="dev-performance-rich" component={DevPerformanceRich} />
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
+
+![](../../docs/images/plain-text-example.png)
+
+This is the most basic Slate example. It's basically a glorified `<textarea>`. But it gives you a sense for the absolute basics of Slate.
+
+Check out the [Examples readme](..) to see how to run it!
diff --git a/examples/rtl/index.js b/examples/rtl/index.js
new file mode 100644
index 000000000..6194a2617
--- /dev/null
+++ b/examples/rtl/index.js
@@ -0,0 +1,79 @@
+
+import { Editor, Raw } from '../..'
+import React from 'react'
+import SoftBreak from 'slate-soft-break'
+import initialState from './state.json'
+
+/**
+ * Define a set of node renderers.
+ *
+ * @type {Object}
+ */
+
+const NODES = {
+  'block-quote': (props) => <blockquote {...props.attributes}>{props.children}</blockquote>,
+}
+
+/**
+ * The plain text example.
+ *
+ * @type {Component}
+ */
+
+class PlainText extends React.Component {
+
+  /**
+   * Deserialize the initial editor state.
+   *
+   * @type {Object}
+   */
+
+  state = {
+    state: Raw.deserialize(initialState, { terse: true })
+  };
+
+  /**
+   * On change.
+   *
+   * @param {State} state
+   */
+
+  onChange = (state) => {
+    this.setState({ state })
+  }
+
+  /**
+   * Render the editor.
+   *
+   * @return {Component} component
+   */
+
+  render = () => {
+    return (
+      <Editor
+        placeholder={'Enter some plain text...'}
+        onChange={this.onChange}
+        renderNode={this.renderNode}
+        state={this.state.state}
+      />
+    )
+  }
+
+  /**
+   * Return a node renderer for a Slate `node`.
+   *
+   * @param {Node} node
+   * @return {Component or Void}
+   */
+
+  renderNode = (node) => {
+    return NODES[node.type]
+  }
+
+}
+
+/**
+ * Export.
+ */
+
+export default PlainText
diff --git a/examples/rtl/state.json b/examples/rtl/state.json
new file mode 100644
index 000000000..504e6f016
--- /dev/null
+++ b/examples/rtl/state.json
@@ -0,0 +1,54 @@
+{
+  "nodes": [
+    {
+      "kind": "block",
+      "type": "paragraph",
+      "nodes": [
+        {
+          "kind": "text",
+          "text": "Slate supports both left-to-right text editing (English, French, etc.) and right-to-left text editing (Arabic, Hebrew, etc.) which it automatically detects. Here's an example featuring excerpts from Khalil Gibran:"
+        }
+      ]
+    },
+    {
+      "kind": "block",
+      "type": "block-quote",
+      "nodes": [
+        {
+          "kind": "text",
+          "text": "Et un jeune dit : parle-nous de l'amitié.\nEt il répondit, disant :\nVotre ami est votre besoin qui a trouvé une réponse.\nIl est le champ que vous semez avec amour et moissonnez avec reconnaissance.\nIl est votre table et votre foyer."
+        }
+      ]
+    },
+    {
+      "kind": "block",
+      "type": "block-quote",
+      "nodes": [
+        {
+          "kind": "text",
+          "text": "ثم قال له شاب: هات حدثناعن الصداقة.\nفأجاب و قال:\nإن صديقك هو كفاية حاجاتك.\nهو حقك الذي تزرعه بالمحبة و تحصده بالشكر.\nهو مائدتك و موقدك."
+        }
+      ]
+    },
+    {
+      "kind": "block",
+      "type": "block-quote",
+      "nodes": [
+        {
+          "kind": "text",
+          "text": "And a youth said, \"Speak to us of Friendship.\"\nYour friend is your needs answered.\nHe is your field which you sow with love and reap with thanksgiving.\nAnd he is your board and your fireside."
+        }
+      ]
+    },
+    {
+      "kind": "block",
+      "type": "paragraph",
+      "nodes": [
+        {
+          "kind": "text",
+          "text": "Try it out for yourself!"
+        }
+      ]
+    }
+  ]
+}
diff --git a/lib/components/node.js b/lib/components/node.js
index e17a05526..80558f316 100644
--- a/lib/components/node.js
+++ b/lib/components/node.js
@@ -93,17 +93,20 @@ class Node extends React.Component {
       .map(child => this.renderNode(child))
       .toArray()
 
-    // Calcul direction of text
-    const dir = node.textDir
-
-    // Attributes that the developer has to mix into the element in their custom
-    // renderer component.
+    // Attributes that the developer must to mix into the element in their
+    // custom node renderer component.
     const attributes = {
-      'dir': dir !== 'ltr' ? dir : undefined,
       'data-key': node.key,
       'onDragStart': this.onDragStart
     }
 
+    // If it's a block node with inline children, add the proper `dir` attribute
+    // for text direction.
+    if (node.kind == 'block' && node.nodes.first().kind != 'block') {
+      const direction = node.getTextDirection()
+      if (direction == 'rtl') attributes.dir = 'rtl'
+    }
+
     return (
       <Component
         attributes={attributes}
diff --git a/lib/models/block.js b/lib/models/block.js
index fb8142926..36398ac47 100644
--- a/lib/models/block.js
+++ b/lib/models/block.js
@@ -15,7 +15,6 @@ import Inline from './inline'
 import Node from './node'
 import Text from './text'
 import uid from '../utils/uid'
-import bidi from '../utils/bidi'
 import Immutable, { Map, List, Record } from 'immutable'
 
 /**
@@ -111,16 +110,6 @@ class Block extends new Record(DEFAULTS) {
       .join('')
   }
 
-  /**
-   * Get the text direction.
-   *
-   * @return {String} dir
-   */
-
-  get textDir() {
-    return bidi.getDirection(this.text)
-  }
-
 }
 
 /**
diff --git a/lib/models/node.js b/lib/models/node.js
index 9f0f1751a..6e45e35a1 100644
--- a/lib/models/node.js
+++ b/lib/models/node.js
@@ -8,6 +8,7 @@ import Mark from './mark'
 import Selection from './selection'
 import Transforms from './transforms'
 import Text from './text'
+import direction from 'direction'
 import includes from 'lodash/includes'
 import memoize from '../utils/memoize'
 import uid from '../utils/uid'
@@ -731,6 +732,20 @@ const Node = {
       })
   },
 
+  /**
+   * Get the direction of the node's text.
+   *
+   * @return {String} direction
+   */
+
+  getTextDirection() {
+    const text = this.text
+    const dir = direction(text)
+    return dir == 'neutral'
+      ? undefined
+      : dir
+  },
+
   /**
    * Recursively get all of the child text nodes in order of appearance.
    *
@@ -1131,6 +1146,7 @@ memoize(Node, [
   'getPreviousText',
   'getPreviousBlock',
   'getTextAtOffset',
+  'getTextDirection',
   'getTexts',
   'getTextsAtRange',
   'hasChild',
diff --git a/lib/utils/bidi.js b/lib/utils/bidi.js
deleted file mode 100644
index d6e150cf2..000000000
--- a/lib/utils/bidi.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import direction from 'direction'
-import { Map } from 'immutable'
-
-let cache = {}
-
-/**
- * Get direction of a text
- * @param  {String} text
- * @return {String} dir?
- */
-
-function getDirection(text) {
-    if (cache[text]) {
-        return cache[text]
-    }
-
-    let dir = direction(text)
-    if (dir === 'neutral') {
-        return
-    }
-
-    return dir
-}
-
-
-const bidi = {
-    getDirection
-}
-
-export default bidi
diff --git a/test/rendering/fixtures/nested-text-direction/index.js b/test/rendering/fixtures/nested-text-direction/index.js
new file mode 100644
index 000000000..dbf0139ef
--- /dev/null
+++ b/test/rendering/fixtures/nested-text-direction/index.js
@@ -0,0 +1,4 @@
+
+/**
+ * Nothing, pure defaults.
+ */
diff --git a/test/rendering/fixtures/nested-text-direction/input.yaml b/test/rendering/fixtures/nested-text-direction/input.yaml
new file mode 100644
index 000000000..0d2514b23
--- /dev/null
+++ b/test/rendering/fixtures/nested-text-direction/input.yaml
@@ -0,0 +1,17 @@
+
+nodes:
+  - kind: block
+    type: default
+    nodes:
+      - kind: block
+        type: default
+        nodes:
+          - kind: text
+            ranges:
+              - text: "مرحبا بالعالم"
+      - kind: block
+        type: default
+        nodes:
+          - kind: text
+            ranges:
+              - text: "שלום עולם"
diff --git a/test/rendering/fixtures/nested-text-direction/output.html b/test/rendering/fixtures/nested-text-direction/output.html
new file mode 100644
index 000000000..f946126b8
--- /dev/null
+++ b/test/rendering/fixtures/nested-text-direction/output.html
@@ -0,0 +1,14 @@
+
+<div contenteditable="true">
+  <div style="position:relative;">
+  <div dir="rtl" style="position:relative;">
+    <span>
+      <span>مرحبا بالعالم</span>
+    </span>
+  </div>
+  <div dir="rtl" style="position:relative;">
+    <span>
+      <span>שלום עולם</span>
+    </span>
+  </div>
+</div>