diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 9676397d78e..3b5967fc1ea 100644 --- 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 index 8b4e352fc17..21d7427d584 100644 --- 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 new file mode 100644 index 00000000000..a5f6a6c21e7 --- /dev/null +++ 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 index 8a4693b249d..b86149e7e11 100644 --- 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."