Merge pull request #14185 from untillnesss/4.x-new-trix-toolbar-button

Add Trix Toolbar Button Subscript & Superscript
filamentphp · Feb 2, 2025 · 6d2b147 · 6d2b147
2 parents aadbff7 + aeaa3cf
commit 6d2b147
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 0 deletions.
diff --git a/packages/forms/docs/02-fields/10-rich-editor.md b/packages/forms/docs/02-fields/10-rich-editor.md
@@ -46,6 +46,8 @@ RichEditor::make('content')
         'orderedList',
         'redo',
         'strike',
+        'sub',
+        'sup',
         'underline',
         'undo',
     ])

diff --git a/packages/forms/resources/js/components/rich-editor.js b/packages/forms/resources/js/components/rich-editor.js
@@ -48,6 +48,10 @@ Trix.LineBreakInsertion.prototype.shouldInsertBlockBreak = function () {
     }
 }
 
+Trix.config.textAttributes.sub = { tagName: 'sub', inheritable: true }
+
+Trix.config.textAttributes.sup = { tagName: 'sup', inheritable: true }
+
 export default function richEditorFormComponent({ state }) {
     return {
         state,

diff --git a/packages/forms/resources/lang/en/components.php b/packages/forms/resources/lang/en/components.php
@@ -396,6 +396,8 @@
             'ordered_list' => 'Numbered list',
             'redo' => 'Redo',
             'strike' => 'Strikethrough',
+            'sub' => 'Subscript',
+            'sup' => 'Superscript',
             'underline' => 'Underline',
             'undo' => 'Undo',
         ],

diff --git a/packages/forms/resources/views/components/rich-editor.blade.php b/packages/forms/resources/views/components/rich-editor.blade.php
@@ -150,6 +150,56 @@ class="h-5 w-5"
                                     </x-filament-forms::rich-editor.toolbar.button>
                                 @endif
 
+                                @if ($hasToolbarButton('sub'))
+                                    <x-filament-forms::rich-editor.toolbar.button
+                                        data-trix-attribute="sub"
+                                        data-trix-key="-"
+                                        title="{{ __('filament-forms::components.rich_editor.toolbar_buttons.sub') }}"
+                                        tabindex="-1"
+                                    >
+                                        <svg
+                                            class="-mx-4 h-4 dark:fill-current"
+                                            aria-hidden="true"
+                                            focusable="false"
+                                            data-prefix="fas"
+                                            data-icon="sub"
+                                            role="img"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            viewBox="0 0 512 512"
+                                        >
+                                            <path
+                                                fill="currentColor"
+                                                d="M496 448h-16V304a16 16 0 0 0-16-16h-48a16 16 0 0 0-14.29 8.83l-16 32A16 16 0 0 0 400 352h16v96h-16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h96a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM336 64h-67a16 16 0 0 0-13.14 6.87l-79.9 115-79.9-115A16 16 0 0 0 83 64H16A16 16 0 0 0 0 80v48a16 16 0 0 0 16 16h33.48l77.81 112-77.81 112H16a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h67a16 16 0 0 0 13.14-6.87l79.9-115 79.9 115A16 16 0 0 0 269 448h67a16 16 0 0 0 16-16v-48a16 16 0 0 0-16-16h-33.48l-77.81-112 77.81-112H336a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16z"
+                                            />
+                                        </svg>
+                                    </x-filament-forms::rich-editor.toolbar.button>
+                                @endif
+
+                                @if ($hasToolbarButton('sup'))
+                                    <x-filament-forms::rich-editor.toolbar.button
+                                        data-trix-attribute="sup"
+                                        data-trix-key="+"
+                                        title="{{ __('filament-forms::components.rich_editor.toolbar_buttons.sup') }}"
+                                        tabindex="-1"
+                                    >
+                                        <svg
+                                            class="-mx-4 h-4 dark:fill-current"
+                                            aria-hidden="true"
+                                            focusable="false"
+                                            data-prefix="fas"
+                                            data-icon="sup"
+                                            role="img"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            viewBox="0 0 512 512"
+                                        >
+                                            <path
+                                                fill="currentColor"
+                                                d="M496 160h-16V16a16 16 0 0 0-16-16h-48a16 16 0 0 0-14.29 8.83l-16 32A16 16 0 0 0 400 64h16v96h-16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h96a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM336 64h-67a16 16 0 0 0-13.14 6.87l-79.9 115-79.9-115A16 16 0 0 0 83 64H16A16 16 0 0 0 0 80v48a16 16 0 0 0 16 16h33.48l77.81 112-77.81 112H16a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h67a16 16 0 0 0 13.14-6.87l79.9-115 79.9 115A16 16 0 0 0 269 448h67a16 16 0 0 0 16-16v-48a16 16 0 0 0-16-16h-33.48l-77.81-112 77.81-112H336a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16z"
+                                            />
+                                        </svg>
+                                    </x-filament-forms::rich-editor.toolbar.button>
+                                @endif
+
                                 @if ($hasToolbarButton('link'))
                                     <x-filament-forms::rich-editor.toolbar.button
                                         data-trix-attribute="href"

diff --git a/packages/forms/src/Components/RichEditor.php b/packages/forms/src/Components/RichEditor.php
@@ -35,6 +35,8 @@ class RichEditor extends Field implements Contracts\CanBeLengthConstrained, Cont
         'orderedList',
         'redo',
         'strike',
+        'sub',
+        'sup',
         'underline',
         'undo',
     ];
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,6 +46,8 @@ RichEditor::make('content') @@
             'orderedList',
             'redo',
             'strike',
+            'sub',
+            'sup',
             'underline',
             'undo',
         ])
@@ Expand Down @@