add RTL support

bastihilger · Jan 10, 2022 · 6dd5fa2 · 6dd5fa2
1 parent 8406f80
commit 6dd5fa2
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 14 deletions.
diff --git a/Readme.md b/Readme.md
@@ -59,6 +59,8 @@ Tiptap::make('FieldName')
         '|',
         'textAlign',
         '|',
+        'rtl',
+        '|',
         'history',
         '|',
         'editHtml',
@@ -172,6 +174,19 @@ Tiptap::make('FieldName')
   ->defaultAlignment('right'),
 ```
 
+## RTL support with `rtl`
+
+When adding `rtl` you get a button for toggling RTL mode for all selected block elements (`dir="rtl"`). 
+
+``` php
+Tiptap::make('FieldName')
+  ->buttons([
+      'italic',
+      'bold',
+      'rtl',
+  ]),
+```
+
 ## The two different "code" buttons
 
 `'code'` is inline code (like `<code></code>`) while `'codeBlock'` will give you `<pre><code></code></pre>`.

diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/js/components/FormField.vue b/resources/js/components/FormField.vue
@@ -300,7 +300,7 @@ export default {
         },
 
         alignments() {
-            return this.field.alignments ? this.field.alignments : ['left', 'center', 'right', 'justify'];
+            return this.field.alignments ? this.field.alignments : ['start', 'center', 'end', 'justify'];
         },
 
         alignElements() {
@@ -407,14 +407,49 @@ export default {
             
             Heading.configure({
                 levels: this.headingLevels,
+            }).extend({
+                addAttributes() {
+                    return {
+                        ...this.parent?.(),
+                        dir: String,
+                    }
+                }
+            }),
+            Blockquote.extend({
+                addAttributes() {
+                    return {
+                        ...this.parent?.(),
+                        dir: String,
+                    }
+                }
+            }),
+            BulletList.extend({
+                addAttributes() {
+                    return {
+                        ...this.parent?.(),
+                        dir: String,
+                    }
+                }
             }),
-            Blockquote,
-            BulletList,
             HorizontalRule,
             ListItem,    
-            OrderedList,
+            OrderedList.extend({
+                addAttributes() {
+                    return {
+                        ...this.parent?.(),
+                        dir: String,
+                    }
+                }
+            }),
             HardBreak,
-            Paragraph,
+            Paragraph.extend({
+                addAttributes() {
+                    return {
+                        ...this.parent?.(),
+                        dir: String,
+                    }
+                }
+            }),
             Table.configure({
                 resizable: true,
             }),

diff --git a/resources/js/components/buttons/RtlButton.vue b/resources/js/components/buttons/RtlButton.vue
@@ -3,7 +3,7 @@
         <base-button
             :isActive="rtlIsActive()"
             :isDisabled="mode != 'editor'"
-            :clickMethod="toggleRtl"
+            :clickMethod="setRtl"
             :title="'RTL'"
             :icon="['fas', 'paragraph-rtl']"
         >
@@ -26,14 +26,21 @@ export default {
         rtlIsActive() {
            return this.editor ? this.editor.isActive({ dir: 'rtl' }) : false;
         },
-        toggleRtl() {
+        setRtl() {
+            const okNodes = [
+                'paragraph', 'heading'
+            ];
+
             if (this.rtlIsActive()) {
-                this.editor.chain().focus().updateAttributes('paragraph', { dir: 'auto' }).run();
+                okNodes.forEach(
+                    nodename => this.editor.chain().focus().updateAttributes(nodename, { dir: 'ltr' }).run()
+                );
+                 
             } else {
-                this.editor.chain().focus().updateAttributes('paragraph', { dir: 'rtl' }).run();
-                this.editor.chain().focus().updateAttributes('heading', { dir: 'rtl' }).run();
+                okNodes.forEach(
+                    nodename => this.editor.chain().focus().updateAttributes(nodename, { dir: 'rtl' }).run()
+                );
             }
-            
         }
     }
 }

diff --git a/resources/js/components/buttons/TextAlignButtons.vue b/resources/js/components/buttons/TextAlignButtons.vue
@@ -8,7 +8,7 @@
             :clickMethod="setAlignment"
             :clickMethodParameters="alignment"
             :title="__('align '+alignment)"
-            :icon="['fas', 'align-'+alignment]"
+            :icon="['fas', 'align-'+iconName(alignment)]"
         >
         </base-button>
     </span>
@@ -26,10 +26,32 @@ export default {
     },
 
     methods: {
+        iconName(alignment) {
+            if (alignment == 'start') { return 'left' };
+            if (alignment == 'end') { return 'right' };
+            return alignment;
+        }, 
         alignmentIsActive(alignment) {
-           return this.editor ? this.editor.isActive({ textAlign: alignment }) : false;
+            let isActive = this.editor ? this.editor.isActive({ textAlign: alignment }) : false;
+            if (alignment == 'left') {
+                isActive = this.editor 
+                    ? (this.editor.isActive({ textAlign: 'left' }) || this.editor.isActive({ textAlign: 'start' })) 
+                    : false
+            }
+            if (alignment == 'right') {
+                isActive = this.editor 
+                    ? (this.editor.isActive({ textAlign: 'right' }) || this.editor.isActive({ textAlign: 'end' })) 
+                    : false
+            }
+           return isActive;
         },
         setAlignment(alignment) {
+            if (alignment == 'left') {
+                alignment = 'start';
+            }
+            if (alignment == 'right') {
+                alignment = 'end';
+            }
             this.editor.chain().focus().setTextAlign(alignment).run();
         }
     }

diff --git a/src/Tiptap.php b/src/Tiptap.php
@@ -98,6 +98,12 @@ public function htmlTheme($htmlTheme)
      */
     public function alignments($alignments)
     {
+        $alignments = array_map(function($item){
+            if($item == 'left') { return 'start'; } 
+            if($item == 'right') { return 'end'; }
+            return $item;
+        }, $alignments);
+
         return $this->withMeta([
             'alignments' => $alignments,
         ]);