added code for getting directionality of event, added Rtl example it …

…works 🎉 fixes #8

README.md

@@ -45,7 +45,7 @@ This changes a lot. To focus as much as possible I'll keep this small.
 - [x] Android support (via Input Events Level 2)
 - [x] Android support [thanks Trix ❤️](https://github.com/basecamp/trix/blob/master/src/trix/controllers/level_2_input_controller.coffee)
 - [x] [IME support](https://developer.mozilla.org/en-US/docs/Mozilla/IME_handling_guide)
-- [ ] [rtl support](https://www.w3.org/International/articles/inline-bidi-markup/)
+- [ ] [rtl support](https://github.com/juliankrispel/zettel/issues/8)
 - [ ] Prototype collaborative editing
 - [ ] Start writing docs and publishing exampples on codesandbox
 - [ ] Alternative view layers (Vuejs/svelte/angular)

core/src/handlers/onBeforeInput.ts

@@ -20,6 +20,8 @@ export default function onBeforeInput(editorState: EditorState, _event: any) {
   let newEditorState = editorState
   const domRange = getDomRange(editorState.list)
 
+  console.log(event, domRange)
+
   if (domRange == null) return newEditorState
 
   const { collapsed, start, end } = domRange

core/src/selection/getDomRange.ts

@@ -1,9 +1,9 @@
-import { ListState } from '../types'
+import { ListState, SelectionRange } from '../types'
 import getFragmentOffset from './getFragmentOffset'
 import { getUTF16Length } from '../utils'
 import getFragmentNode from './getFragmentNode'
 
-export default function getDomRange(list: ListState): { start: number, end: number, collapsed: boolean } | null {
+export default function getDomRange(list: ListState): SelectionRange | null {
   const domSelection = window.getSelection()
 
   if (domSelection == null || domSelection.anchorNode == null) {
@@ -26,12 +26,15 @@ export default function getDomRange(list: ListState): { start: number, end: numb
     endOffset = getUTF16Length(focusFragmentNode.innerText.slice(0, endOffset))
   }
 
+  const direction = anchorFragmentNode != null && getComputedStyle(anchorFragmentNode).direction === 'rtl' ? 'rtl' : 'ltr'
+
   const start = startOffset + fragmentOffsetStart
   const end = endOffset + fragmentOffsetEnd
 
   return {
     start,
     end,
-    collapsed: range.collapsed
+    collapsed: range.collapsed,
+    direction
   } 
 }

core/src/types.ts

@@ -5,6 +5,16 @@ export type EntityMap = {
   [key: string]: Entity
 }
 
+/**
+ * Range
+ */
+export type SelectionRange = {
+  start: number,
+  end: number,
+  collapsed: boolean,
+  direction: 'ltr' | 'rtl'
+}
+
 /**
  * Entity ftw!
  */

experiments/src/examples/Rtl.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+import { EditorState } from '@zettel/core'
+import Editor from '@zettel/react'
+
+const text = `[One 😅Line][And another line of text][And another line]`
+
+const App = () => {
+  const [editorState, setEditorState] = useState(() => EditorState.fromJSON({
+    text,
+    ranges: [],
+    entityMap: {}
+  }))
+
+  return (
+    <Editor
+      htmlAttrs={{ spellCheck: false, autoFocus: true, className: 'editor'}}
+      onChange={setEditorState}
+      renderBlock={(props) => {
+        const { htmlAttrs, children } = props
+        return <p dir="auto" {...htmlAttrs}>{children}</p>
+      }}
+      editorState={editorState}
+    />
+  );
+}
+
+export default App;

experiments/src/examples/index.tsx

@@ -2,6 +2,7 @@ import KittenAndLink from  './KittenAndLink'
 import ItalicAndBold from  './ItalicAndBold'
 import BlockStyling from './BlockStyling'
 import PlainText from './PlainText'
+import Rtl from './Rtl'
 import Tree from './Tree'
 import InputTester from './InputTester'
 import MarkdownTest from './MarkdownTest'
@@ -10,6 +11,7 @@ import TimeTravel from './TimeTravel'
 
 export {
   PlainText,
+  Rtl,
   KittenAndLink,
   InputTester,
   ItalicAndBold,