fix: do not throw when dir attribute is set initially (#6996) (#6998)

Co-authored-by: Sergey Vinogradov <mr.vursen@gmail.com>
vaadin · Dec 22, 2023 · c94de89 · c94de89
1 parent 56f7a8f
commit c94de89
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.js b/packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.js
@@ -255,6 +255,10 @@ export const RichTextEditorMixin = (superClass) =>
 
     /** @private */
     __setDirection(dir) {
+      if (!this._editor) {
+        return;
+      }
+
       // Needed for proper `ql-align` class to be set and activate the toolbar align button
       const alignAttributor = Quill.import('attributors/class/align');
       alignAttributor.whitelist = [dir === 'rtl' ? 'left' : 'right', 'center', 'justify'];
@@ -297,6 +301,8 @@ export const RichTextEditorMixin = (superClass) =>
         this.__patchFirefoxFocus();
       }
 
+      this.__setDirection(this.__dir);
+
       const editorContent = editor.querySelector('.ql-editor');
 
       editorContent.setAttribute('role', 'textbox');

diff --git a/packages/rich-text-editor/test/basic.common.js b/packages/rich-text-editor/test/basic.common.js
@@ -145,6 +145,27 @@ describe('rich text editor', () => {
       });
     });
 
+    describe('RTL set initially', () => {
+      beforeEach(async () => {
+        rte = fixtureSync('<vaadin-rich-text-editor dir="rtl"></vaadin-rich-text-editor>');
+        await nextRender();
+        editor = rte._editor;
+      });
+
+      ['center', 'left'].forEach((align) => {
+        it(`should apply ${align} alignment when clicking the "toolbar-button-align-${align}" part in RTL`, () => {
+          btn = getButton(`align-${align}`);
+
+          btn.click();
+          expect(editor.getFormat(0).align).to.be.equal(align);
+
+          btn = getButton('align-right');
+          btn.click();
+          expect(editor.getFormat(0).align).to.be.not.ok;
+        });
+      });
+    });
+
     it('should clear formatting when clicking the "clean-button" part', () => {
       editor.format('bold', true);
       editor.format('underline', true);