CompositionInput: Proper RTL support

signalapp · Nov 23, 2020 · 1fa47d5 · 1fa47d5
1 parent d76e6d3
commit 1fa47d5
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 10 deletions.
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
@@ -8717,6 +8717,7 @@ button.module-image__border-overlay:focus {
     .ql-editor {
       caret-color: transparent;
       padding: 0;
+      text-align: start;
 
       &--loaded {
         caret-color: auto;

diff --git a/ts/components/CompositionInput.tsx b/ts/components/CompositionInput.tsx
@@ -33,17 +33,15 @@ import {
   insertEmojiOps,
 } from '../quill/util';
 import { SignalClipboard } from '../quill/signal-clipboard';
+import { DirectionalBlot } from '../quill/block/blot';
 
 Quill.register('formats/emoji', EmojiBlot);
 Quill.register('formats/mention', MentionBlot);
+Quill.register('formats/block', DirectionalBlot);
 Quill.register('modules/emojiCompletion', EmojiCompletion);
 Quill.register('modules/mentionCompletion', MentionCompletion);
 Quill.register('modules/signalClipboard', SignalClipboard);
 
-const Block = Quill.import('blots/block');
-Block.tagName = 'DIV';
-Quill.register(Block, true);
-
 interface HistoryStatic {
   undo(): void;
   clear(): void;

diff --git a/ts/quill/block/blot.tsx b/ts/quill/block/blot.tsx
@@ -0,0 +1,16 @@
+// Copyright 2020 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import Quill from 'quill';
+
+const Block = Quill.import('blots/block');
+
+export class DirectionalBlot extends Block {
+  static tagName = 'div';
+
+  static create(value: string): Node {
+    const node = super.create(value);
+    node.setAttribute('dir', 'auto');
+    return node;
+  }
+}
diff --git a/ts/util/lint/exceptions.json b/ts/util/lint/exceptions.json
@@ -14544,7 +14544,7 @@
     "rule": "React-useRef",
     "path": "ts/components/CompositionInput.js",
     "line": "    const emojiCompletionRef = React.useRef();",
-    "lineNumber": 44,
+    "lineNumber": 43,
     "reasonCategory": "falseMatch",
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Doesn't refer to a DOM element."
@@ -14553,7 +14553,7 @@
     "rule": "React-useRef",
     "path": "ts/components/CompositionInput.js",
     "line": "    const mentionCompletionRef = React.useRef();",
-    "lineNumber": 45,
+    "lineNumber": 44,
     "reasonCategory": "falseMatch",
     "updated": "2020-10-26T23:54:34.273Z",
     "reasonDetail": "Doesn't refer to a DOM element."
@@ -14562,7 +14562,7 @@
     "rule": "React-useRef",
     "path": "ts/components/CompositionInput.js",
     "line": "    const quillRef = React.useRef();",
-    "lineNumber": 46,
+    "lineNumber": 45,
     "reasonCategory": "falseMatch",
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Doesn't refer to a DOM element."
@@ -14571,7 +14571,7 @@
     "rule": "React-useRef",
     "path": "ts/components/CompositionInput.js",
     "line": "    const scrollerRef = React.useRef(null);",
-    "lineNumber": 47,
+    "lineNumber": 46,
     "reasonCategory": "usageTrusted",
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Used with Quill for scrolling."
@@ -14580,7 +14580,7 @@
     "rule": "React-useRef",
     "path": "ts/components/CompositionInput.js",
     "line": "    const propsRef = React.useRef(props);",
-    "lineNumber": 48,
+    "lineNumber": 47,
     "reasonCategory": "falseMatch",
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Doesn't refer to a DOM element."
@@ -14589,7 +14589,7 @@
     "rule": "React-useRef",
     "path": "ts/components/CompositionInput.js",
     "line": "    const memberRepositoryRef = React.useRef(new memberRepository_1.MemberRepository());",
-    "lineNumber": 49,
+    "lineNumber": 48,
     "reasonCategory": "falseMatch",
     "updated": "2020-10-26T23:56:13.482Z",
     "reasonDetail": "Doesn't refer to a DOM element."