@navette-js/forms 0.0.0-stage → 1.0.0-beta.2

package/views/components/rich-editor.ejs

@@ -0,0 +1,471 @@
+<%# Rich editor markup. Generated by tools/gen-rich-editor-view.mjs: do not edit by hand.
+    Variables: livewireId, key (field key and id), statePath. Not handled here: disabled or invalid state. %>
+<div x-cloak="x-cloak" style="--min-height: 10rem;" class="fi-fo-rich-editor fi-input-wrp">
+            
+                        <div class="fi-input-wrp-content-ctn">
+                
+        <div hidden data-field-accessibility ></div>
+        <div
+            aria-labelledby="<%= key %>-label"
+            data-rich-editor-key="<%= key %>"
+            id="<%= key %>"
+            role="group"
+            x-load
+            x-load-src="<%- assetUrl('js/filament/forms/components/rich-editor.js') %>"
+            x-data="richEditorFormComponent({
+                            acceptedFileTypes: JSON.parse('[\u0022image\\\/png\u0022,\u0022image\\\/jpeg\u0022,\u0022image\\\/gif\u0022,\u0022image\\\/webp\u0022]'),
+                            acceptedFileTypesValidationMessage: 'Uploaded files must be of type: image\/png, image\/jpeg, image\/gif, image\/webp.',
+                            activePanel: null,
+                            canAttachFiles: true,
+                            deleteCustomBlockButtonIconHtml: '\u003Csvg class=\u0022fi-icon fi-size-md\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 viewBox=\u00220 0 20 20\u0022 fill=\u0022currentColor\u0022 aria-hidden=\u0022true\u0022 data-slot=\u0022icon\u0022\u003E\n  \u003Cpath fill-rule=\u0022evenodd\u0022 d=\u0022M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z\u0022 clip-rule=\u0022evenodd\u0022\/\u003E\n\u003C\/svg\u003E',
+                            deleteCustomBlockButtonLabel: 'Delete block',
+                            editCustomBlockButtonIconHtml: '\u003Csvg class=\u0022fi-icon fi-size-md\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 viewBox=\u00220 0 20 20\u0022 fill=\u0022currentColor\u0022 aria-hidden=\u0022true\u0022 data-slot=\u0022icon\u0022\u003E\n  \u003Cpath d=\u0022m5.433 13.917 1.262-3.155A4 4 0 0 1 7.58 9.42l6.92-6.918a2.121 2.121 0 0 1 3 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 0 1-.65-.65Z\u0022\/\u003E\n  \u003Cpath d=\u0022M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0 0 10 3H4.75A2.75 2.75 0 0 0 2 5.75v9.5A2.75 2.75 0 0 0 4.75 18h9.5A2.75 2.75 0 0 0 17 15.25V10a.75.75 0 0 0-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5Z\u0022\/\u003E\n\u003C\/svg\u003E',
+                            editCustomBlockButtonLabel: 'Edit block',
+                            extensions: [],
+                            floatingToolbars: JSON.parse('{\u0022grid\u0022:[\u0022gridAddColumnBefore\u0022,\u0022gridAddColumnAfter\u0022,\u0022gridDeleteColumn\u0022,\u0022gridDelete\u0022],\u0022table\u0022:[\u0022tableAddColumnBefore\u0022,\u0022tableAddColumnAfter\u0022,\u0022tableDeleteColumn\u0022,\u0022tableAddRowBefore\u0022,\u0022tableAddRowAfter\u0022,\u0022tableDeleteRow\u0022,\u0022tableMergeCells\u0022,\u0022tableSplitCell\u0022,\u0022tableToggleHeaderRow\u0022,\u0022tableToggleHeaderCell\u0022,\u0022tableDelete\u0022]}'),
+                            hasResizableImages: false,
+                            hasMinimalCustomBlockControls: false,
+                            hasStickyToolbar: false,
+                            isDisabled: false,
+                            label: <%- js(label) %>,
+                            isLiveDebounced: false,
+                            isLiveOnBlur: false,
+                            key: '<%= key %>',
+                            linkProtocols: JSON.parse('[\u0022http\u0022,\u0022https\u0022,\u0022ftp\u0022,\u0022ftps\u0022,\u0022mailto\u0022,\u0022tel\u0022,\u0022callto\u0022,\u0022sms\u0022,\u0022cid\u0022,\u0022xmpp\u0022]'),
+                            liveDebounce: null,
+                            livewireId: '<%= livewireId %>',
+                            maxFileSize: 12288,
+                            maxFileSizeValidationMessage: 'Uploaded files must not be greater than 12288 kilobytes.',
+                            mentions: [],
+                            mergeTags: [],
+                            noMergeTagSearchResultsMessage: 'No merge tag results.',
+                            placeholder: null,
+                            state: $wire.$entangle('<%= statePath %>', false),
+                            statePath: '<%= statePath %>',
+                            textColors: JSON.parse('{\u0022slate\u0022:{\u0022color\u0022:\u0022oklch(0.446 0.043 257.281)\u0022,\u0022darkColor\u0022:\u0022oklch(0.704 0.04 256.788)\u0022},\u0022gray\u0022:{\u0022color\u0022:\u0022oklch(0.446 0.03 256.802)\u0022,\u0022darkColor\u0022:\u0022oklch(0.707 0.022 261.325)\u0022},\u0022zinc\u0022:{\u0022color\u0022:\u0022oklch(0.442 0.017 285.786)\u0022,\u0022darkColor\u0022:\u0022oklch(0.705 0.015 286.067)\u0022},\u0022neutral\u0022:{\u0022color\u0022:\u0022oklch(0.439 0 0)\u0022,\u0022darkColor\u0022:\u0022oklch(0.708 0 0)\u0022},\u0022stone\u0022:{\u0022color\u0022:\u0022oklch(0.444 0.011 73.639)\u0022,\u0022darkColor\u0022:\u0022oklch(0.709 0.01 56.259)\u0022},\u0022mauve\u0022:{\u0022color\u0022:\u0022oklch(0.435 0.029 321.78)\u0022,\u0022darkColor\u0022:\u0022oklch(0.711 0.019 323.02)\u0022},\u0022olive\u0022:{\u0022color\u0022:\u0022oklch(0.466 0.025 107.3)\u0022,\u0022darkColor\u0022:\u0022oklch(0.737 0.021 106.9)\u0022},\u0022mist\u0022:{\u0022color\u0022:\u0022oklch(0.45 0.017 213.2)\u0022,\u0022darkColor\u0022:\u0022oklch(0.723 0.014 214.4)\u0022},\u0022taupe\u0022:{\u0022color\u0022:\u0022oklch(0.438 0.017 39.3)\u0022,\u0022darkColor\u0022:\u0022oklch(0.714 0.014 41.2)\u0022},\u0022red\u0022:{\u0022color\u0022:\u0022oklch(0.577 0.245 27.325)\u0022,\u0022darkColor\u0022:\u0022oklch(0.704 0.191 22.216)\u0022},\u0022orange\u0022:{\u0022color\u0022:\u0022oklch(0.646 0.222 41.116)\u0022,\u0022darkColor\u0022:\u0022oklch(0.75 0.183 55.934)\u0022},\u0022amber\u0022:{\u0022color\u0022:\u0022oklch(0.666 0.179 58.318)\u0022,\u0022darkColor\u0022:\u0022oklch(0.828 0.189 84.429)\u0022},\u0022yellow\u0022:{\u0022color\u0022:\u0022oklch(0.681 0.162 75.834)\u0022,\u0022darkColor\u0022:\u0022oklch(0.852 0.199 91.936)\u0022},\u0022lime\u0022:{\u0022color\u0022:\u0022oklch(0.648 0.2 131.684)\u0022,\u0022darkColor\u0022:\u0022oklch(0.841 0.238 128.85)\u0022},\u0022green\u0022:{\u0022color\u0022:\u0022oklch(0.627 0.194 149.214)\u0022,\u0022darkColor\u0022:\u0022oklch(0.792 0.209 151.711)\u0022},\u0022emerald\u0022:{\u0022color\u0022:\u0022oklch(0.596 0.145 163.225)\u0022,\u0022darkColor\u0022:\u0022oklch(0.765 0.177 163.223)\u0022},\u0022teal\u0022:{\u0022color\u0022:\u0022oklch(0.6 0.118 184.704)\u0022,\u0022darkColor\u0022:\u0022oklch(0.777 0.152 181.912)\u0022},\u0022cyan\u0022:{\u0022color\u0022:\u0022oklch(0.609 0.126 221.723)\u0022,\u0022darkColor\u0022:\u0022oklch(0.789 0.154 211.53)\u0022},\u0022sky\u0022:{\u0022color\u0022:\u0022oklch(0.588 0.158 241.966)\u0022,\u0022darkColor\u0022:\u0022oklch(0.746 0.16 232.661)\u0022},\u0022blue\u0022:{\u0022color\u0022:\u0022oklch(0.546 0.245 262.881)\u0022,\u0022darkColor\u0022:\u0022oklch(0.707 0.165 254.624)\u0022},\u0022indigo\u0022:{\u0022color\u0022:\u0022oklch(0.511 0.262 276.966)\u0022,\u0022darkColor\u0022:\u0022oklch(0.673 0.182 276.935)\u0022},\u0022violet\u0022:{\u0022color\u0022:\u0022oklch(0.541 0.281 293.009)\u0022,\u0022darkColor\u0022:\u0022oklch(0.702 0.183 293.541)\u0022},\u0022purple\u0022:{\u0022color\u0022:\u0022oklch(0.558 0.288 302.321)\u0022,\u0022darkColor\u0022:\u0022oklch(0.714 0.203 305.504)\u0022},\u0022fuchsia\u0022:{\u0022color\u0022:\u0022oklch(0.591 0.293 322.896)\u0022,\u0022darkColor\u0022:\u0022oklch(0.74 0.238 322.16)\u0022},\u0022pink\u0022:{\u0022color\u0022:\u0022oklch(0.592 0.249 0.584)\u0022,\u0022darkColor\u0022:\u0022oklch(0.718 0.202 349.761)\u0022},\u0022rose\u0022:{\u0022color\u0022:\u0022oklch(0.586 0.253 17.585)\u0022,\u0022darkColor\u0022:\u0022oklch(0.712 0.194 13.428)\u0022}}'),
+                            uploadingFileMessage: 'Uploading file...',
+                        })"
+            x-bind:class="{
+                'fi-fo-rich-editor-uploading-file': isUploadingFile,
+            }"
+            x-on:keydown="handleToolbarKeydown($event)"
+            x-on:focusin="handleToolbarFocusin($event)"
+            x-on:focusout="handleToolbarFocusout($event)"
+            wire:ignore
+            wire:key="<%= livewireId %>.<%= key %>.a8cf63fecab3eb3edf6760bc02f258a6"
+        >
+                            <div
+                    class="fi-fo-rich-editor-toolbar "
+                    data-rich-editor-toolbar="main"
+                    role="toolbar"
+                    x-ref="toolbar"
+                    aria-label="Editor toolbar"
+                >
+                                            <div class="fi-fo-rich-editor-toolbar-group">
+                                                                                                
+        <button data-rich-editor-tool="bold" tabindex="-1" type="button" aria-label="Bold" aria-pressed="false" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('bold', []) }" x-bind:aria-pressed="(editorUpdatedAt && $getEditor()?.isActive('bold', [])) ? 'true' : 'false'" x-on:click="$getEditor()?.chain().focus().toggleBold().run()" x-tooltip="{ content: 'Bold', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+  <path fill-rule="evenodd" d="M4 3a1 1 0 0 1 1-1h6a4.5 4.5 0 0 1 3.274 7.587A4.75 4.75 0 0 1 11.25 18H5a1 1 0 0 1-1-1V3Zm2.5 5.5v-4H11a2 2 0 1 1 0 4H6.5Zm0 2.5v4.5h4.75a2.25 2.25 0 0 0 0-4.5H6.5Z" clip-rule="evenodd"/>
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="italic" tabindex="-1" type="button" aria-label="Italic" aria-pressed="false" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('italic', []) }" x-bind:aria-pressed="(editorUpdatedAt && $getEditor()?.isActive('italic', [])) ? 'true' : 'false'" x-on:click="$getEditor()?.chain().focus().toggleItalic().run()" x-tooltip="{ content: 'Italic', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+  <path fill-rule="evenodd" d="M8 2.75A.75.75 0 0 1 8.75 2h7.5a.75.75 0 0 1 0 1.5h-3.215l-4.483 13h2.698a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3.215l4.483-13H8.75A.75.75 0 0 1 8 2.75Z" clip-rule="evenodd"/>
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="underline" tabindex="-1" type="button" aria-label="Underline" aria-pressed="false" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('underline', []) }" x-bind:aria-pressed="(editorUpdatedAt && $getEditor()?.isActive('underline', [])) ? 'true' : 'false'" x-on:click="$getEditor()?.chain().focus().toggleUnderline().run()" x-tooltip="{ content: 'Underline', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+  <path fill-rule="evenodd" d="M4.75 2a.75.75 0 0 1 .75.75V9a4.5 4.5 0 1 0 9 0V2.75a.75.75 0 0 1 1.5 0V9A6 6 0 0 1 4 9V2.75A.75.75 0 0 1 4.75 2ZM2 17.25a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"/>
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="strike" tabindex="-1" type="button" aria-label="Strikethrough" aria-pressed="false" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('strike', []) }" x-bind:aria-pressed="(editorUpdatedAt && $getEditor()?.isActive('strike', [])) ? 'true' : 'false'" x-on:click="$getEditor()?.chain().focus().toggleStrike().run()" x-tooltip="{ content: 'Strikethrough', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+  <path fill-rule="evenodd" d="M11.617 3.963c-1.186-.318-2.418-.323-3.416.015-.992.336-1.49.91-1.642 1.476-.152.566-.007 1.313.684 2.1.528.6 1.273 1.1 2.128 1.446h7.879a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5h3.813a5.976 5.976 0 0 1-.447-.456C5.18 7.479 4.798 6.231 5.11 5.066c.312-1.164 1.268-2.055 2.61-2.509 1.336-.451 2.877-.42 4.286-.043.856.23 1.684.592 2.409 1.074a.75.75 0 1 1-.83 1.25 6.723 6.723 0 0 0-1.968-.875Zm1.909 8.123a.75.75 0 0 1 1.015.309c.53.99.607 2.062.18 3.01-.421.94-1.289 1.648-2.441 2.038-1.336.452-2.877.42-4.286.043-1.409-.377-2.759-1.121-3.69-2.18a.75.75 0 1 1 1.127-.99c.696.791 1.765 1.403 2.952 1.721 1.186.318 2.418.323 3.416-.015.853-.288 1.34-.756 1.555-1.232.21-.467.205-1.049-.136-1.69a.75.75 0 0 1 .308-1.014Z" clip-rule="evenodd"/>
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="subscript" tabindex="-1" type="button" aria-label="Subscript" aria-pressed="false" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('subscript', []) }" x-bind:aria-pressed="(editorUpdatedAt && $getEditor()?.isActive('subscript', [])) ? 'true' : 'false'" x-on:click="$getEditor()?.chain().focus().toggleSubscript().run()" x-tooltip="{ content: 'Subscript', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M5 7l8 10m-8 0l8 -10" />
+    <path d="M21 20h-4l3.5 -4a1.73 1.73 0 0 0 -3.5 -2" />
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="superscript" tabindex="-1" type="button" aria-label="Superscript" aria-pressed="false" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('superscript', []) }" x-bind:aria-pressed="(editorUpdatedAt && $getEditor()?.isActive('superscript', [])) ? 'true' : 'false'" x-on:click="$getEditor()?.chain().focus().toggleSuperscript().run()" x-tooltip="{ content: 'Superscript', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M5 7l8 10m-8 0l8 -10" />
+    <path d="M21 11h-4l3.5 -4a1.73 1.73 0 0 0 -3.5 -2" />
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="link" tabindex="-1" type="button" aria-label="Link" aria-pressed="false" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('link', []) }" x-bind:aria-pressed="(editorUpdatedAt && $getEditor()?.isActive('link', [])) ? 'true' : 'false'" x-on:click="mountToolAction('link', { editorSelection, ...{ url: $getEditor().getAttributes('link')?.href, shouldOpenInNewTab: $getEditor().getAttributes('link')?.target === '_blank' } }, $el)" x-tooltip="{ content: 'Link', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+  <path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"/>
+  <path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"/>
+</svg>                    </button>
+
+                                                                                            </div>
+                                            <div class="fi-fo-rich-editor-toolbar-group">
+                                                                                                
+        <button data-rich-editor-tool="h2" tabindex="-1" type="button" aria-label="Heading 2" aria-pressed="false" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('heading', JSON.parse('{\u0022level\u0022:2}')) }" x-bind:aria-pressed="(editorUpdatedAt && $getEditor()?.isActive('heading', JSON.parse('{\u0022level\u0022:2}'))) ? 'true' : 'false'" x-on:click="$getEditor()?.chain().focus().toggleHeading({ level: 2 }).run()" x-tooltip="{ content: 'Heading 2', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M17 12a2 2 0 1 1 4 0c0 .591 -.417 1.318 -.816 1.858l-3.184 4.143l4 0" />
+    <path d="M4 6v12" />
+    <path d="M12 6v12" />
+    <path d="M11 18h2" />
+    <path d="M3 18h2" />
+    <path d="M4 12h8" />
+    <path d="M3 6h2" />
+    <path d="M11 6h2" />
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="h3" tabindex="-1" type="button" aria-label="Heading 3" aria-pressed="false" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('heading', JSON.parse('{\u0022level\u0022:3}')) }" x-bind:aria-pressed="(editorUpdatedAt && $getEditor()?.isActive('heading', JSON.parse('{\u0022level\u0022:3}'))) ? 'true' : 'false'" x-on:click="$getEditor()?.chain().focus().toggleHeading({ level: 3 }).run()" x-tooltip="{ content: 'Heading 3', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M19 14a2 2 0 1 0 -2 -2" />
+    <path d="M17 16a2 2 0 1 0 2 -2" />
+    <path d="M4 6v12" />
+    <path d="M12 6v12" />
+    <path d="M11 18h2" />
+    <path d="M3 18h2" />
+    <path d="M4 12h8" />
+    <path d="M3 6h2" />
+    <path d="M11 6h2" />
+</svg>                    </button>
+
+                                                                                            </div>
+                                            <div class="fi-fo-rich-editor-toolbar-group">
+                                                                                                
+        <button data-rich-editor-tool="alignStart" tabindex="-1" type="button" aria-label="Align start" aria-pressed="false" x-bind:class="{ 'fi-active': editorUpdatedAt && ($getEditor()?.isActive({ textAlign: 'start' })) }" x-bind:aria-pressed="(editorUpdatedAt && ($getEditor()?.isActive({ textAlign: 'start' }))) ? 'true' : 'false'" x-on:click="$getEditor()?.chain().focus().setTextAlign('start').run()" x-tooltip="{ content: 'Align start', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M4 6l16 0" />
+    <path d="M4 12l10 0" />
+    <path d="M4 18l14 0" />
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="alignCenter" tabindex="-1" type="button" aria-label="Align center" aria-pressed="false" x-bind:class="{ 'fi-active': editorUpdatedAt && ($getEditor()?.isActive({ textAlign: 'center' })) }" x-bind:aria-pressed="(editorUpdatedAt && ($getEditor()?.isActive({ textAlign: 'center' }))) ? 'true' : 'false'" x-on:click="$getEditor()?.chain().focus().setTextAlign('center').run()" x-tooltip="{ content: 'Align center', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M4 6l16 0" />
+    <path d="M8 12l8 0" />
+    <path d="M6 18l12 0" />
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="alignEnd" tabindex="-1" type="button" aria-label="Align end" aria-pressed="false" x-bind:class="{ 'fi-active': editorUpdatedAt && ($getEditor()?.isActive({ textAlign: 'end' })) }" x-bind:aria-pressed="(editorUpdatedAt && ($getEditor()?.isActive({ textAlign: 'end' }))) ? 'true' : 'false'" x-on:click="$getEditor()?.chain().focus().setTextAlign('end').run()" x-tooltip="{ content: 'Align end', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M4 6l16 0" />
+    <path d="M10 12l10 0" />
+    <path d="M6 18l14 0" />
+</svg>                    </button>
+
+                                                                                            </div>
+                                            <div class="fi-fo-rich-editor-toolbar-group">
+                                                                                                
+        <button data-rich-editor-tool="blockquote" tabindex="-1" type="button" aria-label="Blockquote" aria-pressed="false" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('blockquote', []) }" x-bind:aria-pressed="(editorUpdatedAt && $getEditor()?.isActive('blockquote', [])) ? 'true' : 'false'" x-on:click="$getEditor()?.chain().focus().toggleBlockquote().run()" x-tooltip="{ content: 'Blockquote', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+  <path fill-rule="evenodd" d="M10 2c-2.236 0-4.43.18-6.57.524C1.993 2.755 1 4.014 1 5.426v5.148c0 1.413.993 2.67 2.43 2.902 1.168.188 2.352.327 3.55.414.28.02.521.18.642.413l1.713 3.293a.75.75 0 0 0 1.33 0l1.713-3.293a.783.783 0 0 1 .642-.413 41.102 41.102 0 0 0 3.55-.414c1.437-.231 2.43-1.49 2.43-2.902V5.426c0-1.413-.993-2.67-2.43-2.902A41.289 41.289 0 0 0 10 2ZM6.75 6a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Zm0 2.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5Z" clip-rule="evenodd"/>
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="codeBlock" tabindex="-1" type="button" aria-label="Code block" aria-pressed="false" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('codeBlock', []) }" x-bind:aria-pressed="(editorUpdatedAt && $getEditor()?.isActive('codeBlock', [])) ? 'true' : 'false'" x-on:click="$getEditor()?.chain().focus().toggleCodeBlock().run()" x-tooltip="{ content: 'Code block', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M14.5 4h2.5a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-10a3 3 0 0 1 -3 -3v-5" />
+    <path d="M6 5l-2 2l2 2" />
+    <path d="M10 9l2 -2l-2 -2" />
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="bulletList" tabindex="-1" type="button" aria-label="Bullet list" aria-pressed="false" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('bulletList', []) }" x-bind:aria-pressed="(editorUpdatedAt && $getEditor()?.isActive('bulletList', [])) ? 'true' : 'false'" x-on:click="$getEditor()?.chain().focus().toggleBulletList().run()" x-tooltip="{ content: 'Bullet list', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+  <path fill-rule="evenodd" d="M6 4.75A.75.75 0 0 1 6.75 4h10.5a.75.75 0 0 1 0 1.5H6.75A.75.75 0 0 1 6 4.75ZM6 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H6.75A.75.75 0 0 1 6 10Zm0 5.25a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H6.75a.75.75 0 0 1-.75-.75ZM1.99 4.75a1 1 0 0 1 1-1H3a1 1 0 0 1 1 1v.01a1 1 0 0 1-1 1h-.01a1 1 0 0 1-1-1v-.01ZM1.99 15.25a1 1 0 0 1 1-1H3a1 1 0 0 1 1 1v.01a1 1 0 0 1-1 1h-.01a1 1 0 0 1-1-1v-.01ZM1.99 10a1 1 0 0 1 1-1H3a1 1 0 0 1 1 1v.01a1 1 0 0 1-1 1h-.01a1 1 0 0 1-1-1V10Z" clip-rule="evenodd"/>
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="orderedList" tabindex="-1" type="button" aria-label="Numbered list" aria-pressed="false" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('orderedList', []) }" x-bind:aria-pressed="(editorUpdatedAt && $getEditor()?.isActive('orderedList', [])) ? 'true' : 'false'" x-on:click="$getEditor()?.chain().focus().toggleOrderedList().run()" x-tooltip="{ content: 'Numbered list', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+  <path d="M3 1.25a.75.75 0 0 0 0 1.5h.25v2.5a.75.75 0 0 0 1.5 0V2A.75.75 0 0 0 4 1.25H3ZM2.97 8.654a3.5 3.5 0 0 1 1.524-.12.034.034 0 0 1-.012.012L2.415 9.579A.75.75 0 0 0 2 10.25v1c0 .414.336.75.75.75h2.5a.75.75 0 0 0 0-1.5H3.927l1.225-.613c.52-.26.848-.79.848-1.371 0-.647-.429-1.327-1.193-1.451a5.03 5.03 0 0 0-2.277.155.75.75 0 0 0 .44 1.434ZM7.75 3a.75.75 0 0 0 0 1.5h9.5a.75.75 0 0 0 0-1.5h-9.5ZM7.75 9.25a.75.75 0 0 0 0 1.5h9.5a.75.75 0 0 0 0-1.5h-9.5ZM7.75 15.5a.75.75 0 0 0 0 1.5h9.5a.75.75 0 0 0 0-1.5h-9.5ZM2.625 13.875a.75.75 0 0 0 0 1.5h1.5a.125.125 0 0 1 0 .25H3.5a.75.75 0 0 0 0 1.5h.625a.125.125 0 0 1 0 .25h-1.5a.75.75 0 0 0 0 1.5h1.5a1.625 1.625 0 0 0 1.37-2.5 1.625 1.625 0 0 0-1.37-2.5h-1.5Z"/>
+</svg>                    </button>
+
+                                                                                            </div>
+                                            <div class="fi-fo-rich-editor-toolbar-group">
+                                                                                                
+        <button data-rich-editor-tool="table" tabindex="-1" type="button" aria-label="Table" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('table', []) }" x-on:click="$getEditor()?.commands.insertTable({ rows: 2, cols: 3, withHeaderRow: true })" x-tooltip="{ content: 'Table', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z"/>
+    <path d="M3 10h18"/>
+    <path d="M10 3v18"/>
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="attachFiles" tabindex="-1" type="button" aria-label="Attach files" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('image', []) }" x-on:click="mountToolAction('attachFiles', { editorSelection, ...{ alt: $getEditor().getAttributes('image')?.alt, id: $getEditor().getAttributes('image')?.id, src: $getEditor().getAttributes('image')?.src } }, $el)" x-tooltip="{ content: 'Attach files', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+  <path fill-rule="evenodd" d="M15.621 4.379a3 3 0 0 0-4.242 0l-7 7a3 3 0 0 0 4.241 4.243h.001l.497-.5a.75.75 0 0 1 1.064 1.057l-.498.501-.002.002a4.5 4.5 0 0 1-6.364-6.364l7-7a4.5 4.5 0 0 1 6.368 6.36l-3.455 3.553A2.625 2.625 0 1 1 9.52 9.52l3.45-3.451a.75.75 0 1 1 1.061 1.06l-3.45 3.451a1.125 1.125 0 0 0 1.587 1.595l3.454-3.553a3 3 0 0 0 0-4.242Z" clip-rule="evenodd"/>
+</svg>                    </button>
+
+                                                                                            </div>
+                                            <div class="fi-fo-rich-editor-toolbar-group">
+                                                                                                
+        <button data-rich-editor-tool="undo" tabindex="-1" type="button" aria-label="Undo" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('undo', []) }" x-on:click="$getEditor()?.chain().focus().undo().run()" x-tooltip="{ content: 'Undo', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+  <path fill-rule="evenodd" d="M7.793 2.232a.75.75 0 0 1-.025 1.06L3.622 7.25h10.003a5.375 5.375 0 0 1 0 10.75H10.75a.75.75 0 0 1 0-1.5h2.875a3.875 3.875 0 0 0 0-7.75H3.622l4.146 3.957a.75.75 0 0 1-1.036 1.085l-5.5-5.25a.75.75 0 0 1 0-1.085l5.5-5.25a.75.75 0 0 1 1.06.025Z" clip-rule="evenodd"/>
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="redo" tabindex="-1" type="button" aria-label="Redo" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('redo', []) }" x-on:click="$getEditor()?.chain().focus().redo().run()" x-tooltip="{ content: 'Redo', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+  <path fill-rule="evenodd" d="M12.207 2.232a.75.75 0 0 0 .025 1.06l4.146 3.958H6.375a5.375 5.375 0 0 0 0 10.75H9.25a.75.75 0 0 0 0-1.5H6.375a3.875 3.875 0 0 1 0-7.75h10.003l-4.146 3.957a.75.75 0 0 0 1.036 1.085l5.5-5.25a.75.75 0 0 0 0-1.085l-5.5-5.25a.75.75 0 0 0-1.06.025Z" clip-rule="evenodd"/>
+</svg>                    </button>
+
+                                                                                            </div>
+                                    </div>
+            
+            <div
+                x-show="isUploadingFile"
+                x-cloak
+                class="fi-fo-rich-editor-uploading-file-message"
+            >
+                    <svg
+        fill="none"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true" class="fi-icon fi-loading-indicator fi-size-md"
+    >
+        <path
+            clip-rule="evenodd"
+            d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+            fill-rule="evenodd"
+            fill="currentColor"
+            opacity="0.2"
+        ></path>
+        <path
+            d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z"
+            fill="currentColor"
+        ></path>
+    </svg>
+                <span>Uploading file...</span>
+            </div>
+
+            <div
+                x-show="! isUploadingFile && fileValidationMessage"
+                x-cloak
+                class="fi-fo-rich-editor-file-validation-message"
+            >
+                <span
+                    x-text="fileValidationMessage"
+                    x-show="! isUploadingFile && fileValidationMessage"
+                ></span>
+            </div>
+
+            <div class="fi-fo-rich-editor-main">
+                <div x-ref="editor" class="fi-fo-rich-editor-content fi-prose">
+                                            <div
+                            x-ref="floatingToolbar::grid"
+                            class="fi-fo-rich-editor-floating-toolbar fi-not-prose"
+                            data-rich-editor-toolbar
+                            role="toolbar"
+                            aria-label="Editor toolbar"
+                        >
+                                                                                                
+        <button data-rich-editor-tool="gridAddColumnBefore" tabindex="-1" type="button" aria-label="Add column before" x-bind:class="{ 'fi-active': false }" x-bind:disabled="!(editorUpdatedAt && ($getEditor()?.can().addGridColumnBefore()))" x-on:click="$getEditor()?.chain().focus().addGridColumnBefore().run()" x-tooltip="{ content: 'Add column before', theme: $store.theme }" data-testid="grid-add-column-before" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M14 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1z"/>
+    <path d="M5 12l4 0"/>
+    <path d="M7 10l0 4"/>
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="gridAddColumnAfter" tabindex="-1" type="button" aria-label="Add column after" x-bind:class="{ 'fi-active': false }" x-bind:disabled="!(editorUpdatedAt && ($getEditor()?.can().addGridColumnAfter()))" x-on:click="$getEditor()?.chain().focus().addGridColumnAfter().run()" x-tooltip="{ content: 'Add column after', theme: $store.theme }" data-testid="grid-add-column-after" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M6 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1z" />
+    <path d="M15 12l4 0" />
+    <path d="M17 10l0 4" />
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="gridDeleteColumn" tabindex="-1" type="button" aria-label="Delete column" x-bind:class="{ 'fi-active': false }" x-bind:disabled="!(editorUpdatedAt && ($getEditor()?.can().deleteGridColumn()))" x-on:click="$getEditor()?.chain().focus().deleteGridColumn().run()" x-tooltip="{ content: 'Delete column', theme: $store.theme }" data-testid="grid-delete-column" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M6 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1z" />
+    <path d="M16 10l4 4" />
+    <path d="M16 14l4 -4" />
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="gridDelete" tabindex="-1" type="button" aria-label="Delete grid" x-bind:class="{ 'fi-active': false }" x-bind:disabled="!(editorUpdatedAt && $getEditor()?.isActive('grid', []))" x-on:click="$getEditor()?.chain().focus().deleteGrid().run()" x-tooltip="{ content: 'Delete grid', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M4 6h2" />
+    <path d="M4 10h5.5" />
+    <path d="M4 14h5.5" />
+    <path d="M4 18h5.5" />
+    <path d="M14.5 6h5.5" />
+    <path d="M14.5 10h5.5" />
+    <path d="M18 14h2" />
+    <path d="M14.5 18h3.5" />
+    <path d="M3 3l18 18" />
+</svg>                    </button>
+
+                                                                                            </div>
+                                            <div
+                            x-ref="floatingToolbar::table"
+                            class="fi-fo-rich-editor-floating-toolbar fi-not-prose"
+                            data-rich-editor-toolbar
+                            role="toolbar"
+                            aria-label="Editor toolbar"
+                        >
+                                                                                                
+        <button data-rich-editor-tool="tableAddColumnBefore" tabindex="-1" type="button" aria-label="Add column before" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('tableAddColumnBefore', []) }" x-on:click="$getEditor()?.chain().focus().addColumnBefore().run()" x-tooltip="{ content: 'Add column before', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M14 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1z"/>
+    <path d="M5 12l4 0"/>
+    <path d="M7 10l0 4"/>
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="tableAddColumnAfter" tabindex="-1" type="button" aria-label="Add column after" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('tableAddColumnAfter', []) }" x-on:click="$getEditor()?.chain().focus().addColumnAfter().run()" x-tooltip="{ content: 'Add column after', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M6 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1z" />
+    <path d="M15 12l4 0" />
+    <path d="M17 10l0 4" />
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="tableDeleteColumn" tabindex="-1" type="button" aria-label="Delete column" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('tableDeleteColumn', []) }" x-on:click="$getEditor()?.chain().focus().deleteColumn().run()" x-tooltip="{ content: 'Delete column', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M6 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1z" />
+    <path d="M16 10l4 4" />
+    <path d="M16 14l4 -4" />
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="tableAddRowBefore" tabindex="-1" type="button" aria-label="Add row above" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('tableAddRowBefore', []) }" x-on:click="$getEditor()?.chain().focus().addRowBefore().run()" x-tooltip="{ content: 'Add row above', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M4 18v-4a1 1 0 0 1 1 -1h14a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-14a1 1 0 0 1 -1 -1z" />
+    <path d="M12 9v-4" />
+    <path d="M10 7l4 0" />
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="tableAddRowAfter" tabindex="-1" type="button" aria-label="Add row below" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('tableAddRowAfter', []) }" x-on:click="$getEditor()?.chain().focus().addRowAfter().run()" x-tooltip="{ content: 'Add row below', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M20 6v4a1 1 0 0 1 -1 1h-14a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h14a1 1 0 0 1 1 1z" />
+    <path d="M12 15l0 4" />
+    <path d="M14 17l-4 0" />
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="tableDeleteRow" tabindex="-1" type="button" aria-label="Delete row" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('tableDeleteRow', []) }" x-on:click="$getEditor()?.chain().focus().deleteRow().run()" x-tooltip="{ content: 'Delete row', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M20 6v4a1 1 0 0 1 -1 1h-14a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h14a1 1 0 0 1 1 1z" />
+    <path d="M10 16l4 4" />
+    <path d="M10 20l4 -4" />
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="tableMergeCells" tabindex="-1" type="button" aria-label="Merge cells" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('tableMergeCells', []) }" x-on:click="$getEditor()?.chain().focus().mergeCells().run()" x-tooltip="{ content: 'Merge cells', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M12 21v-6"/>
+    <path d="M12 9V3"/>
+    <path d="M3 15h18"/>
+    <path d="M3 9h18"/>
+    <rect width="18" height="18" x="3" y="3" rx="2"/>
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="tableSplitCell" tabindex="-1" type="button" aria-label="Split cell" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('tableSplitCell', []) }" x-on:click="$getEditor()?.chain().focus().splitCell().run()" x-tooltip="{ content: 'Split cell', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M12 15V9"/>
+    <path d="M3 15h18"/>
+    <path d="M3 9h18"/>
+    <rect width="18" height="18" x="3" y="3" rx="2"/>
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="tableToggleHeaderRow" tabindex="-1" type="button" aria-label="Toggle header row" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('tableToggleHeaderRow', []) }" x-on:click="$getEditor()?.chain().focus().toggleHeaderRow().run()" x-tooltip="{ content: 'Toggle header row', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <rect width="18" height="18" x="3" y="3" rx="2"/>
+    <path d="M14 9h1"/>
+    <path d="M19 9h2"/>
+    <path d="M3 9h2"/>
+    <path d="M9 9h1"/>
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="tableToggleHeaderCell" tabindex="-1" type="button" aria-label="Toggle header cell" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('tableToggleHeaderCell', []) }" x-on:click="$getEditor()?.chain().focus().toggleHeaderCell().run()" x-tooltip="{ content: 'Toggle header cell', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M12 3v17a1 1 0 0 1-1 1H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6a1 1 0 0 1-1 1H3"/>
+    <path d="m16 19 2 2 4-4"/>
+</svg>                    </button>
+
+                                                                                                                                        
+        <button data-rich-editor-tool="tableDelete" tabindex="-1" type="button" aria-label="Delete table" x-bind:class="{ 'fi-active': editorUpdatedAt && $getEditor()?.isActive('tableDelete', []) }" x-on:click="$getEditor()?.chain().focus().deleteTable().run()" x-tooltip="{ content: 'Delete table', theme: $store.theme }" class="fi-fo-rich-editor-tool">
+            <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M7 3h12a2 2 0 0 1 2 2v12m-.585 3.413a1.994 1.994 0 0 1 -1.415 .587h-14a2 2 0 0 1 -2 -2v-14c0 -.55 .223 -1.05 .583 -1.412"/>
+    <path d="M3 10h7m4 0h7"/>
+    <path d="M10 3v3m0 4v11"/>
+    <path d="M3 3l18 18"/>
+</svg>                    </button>
+
+                                                                                            </div>
+                                    </div>
+
+                                    <div
+                        x-show="isPanelActive()"
+                        x-cloak
+                        class="fi-fo-rich-editor-panels "
+                    >
+                        <div
+                            x-show="isPanelActive('customBlocks')"
+                            x-cloak
+                            class="fi-fo-rich-editor-panel"
+                        >
+                            <div class="fi-fo-rich-editor-panel-header">
+                                <p class="fi-fo-rich-editor-panel-heading">
+                                    Blocks                                </p>
+
+                                <div class="fi-fo-rich-editor-panel-close-btn-ctn">
+                                    <button type="button" x-on:click="togglePanel()" class="fi-icon-btn" aria-label="Close panel">
+                                        <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+  <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/>
+</svg>                                    </button>
+                                </div>
+                            </div>
+
+                            
+                            <div class="fi-fo-rich-editor-custom-blocks-ctn">
+                                                                                            </div>
+                        </div>
+
+                        <div
+                            x-show="isPanelActive('mergeTags')"
+                            x-cloak
+                            class="fi-fo-rich-editor-panel"
+                        >
+                            <div class="fi-fo-rich-editor-panel-header">
+                                <p class="fi-fo-rich-editor-panel-heading">
+                                    Merge tags                                </p>
+
+                                <div class="fi-fo-rich-editor-panel-close-btn-ctn">
+                                    <button type="button" x-on:click="togglePanel()" class="fi-icon-btn" aria-label="Close panel">
+                                        <svg class="fi-icon fi-size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+  <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/>
+</svg>                                    </button>
+                                </div>
+                            </div>
+
+                            <div class="fi-fo-rich-editor-merge-tags-list">
+                                                            </div>
+                        </div>
+                    </div>
+                            </div>
+        </div>
+
+                    </div>
+
+                    </div>

package/views/components/text-input.ejs

@@ -0,0 +1,32 @@
+<%# Text input with its prefix/suffix wrapper. %>
+<div <%- wrapper %>>
+    <% if (prefix !== null) { %>
+        <div x-on:click="if (! $event.target.closest('.fi-input-wrp-actions')) $dispatch('focus-input')" class="fi-input-wrp-prefix fi-input-wrp-prefix-has-content fi-input-wrp-prefix-has-label">
+            <span class="fi-input-wrp-label">
+                <%= prefix %>
+            </span>
+        </div>
+    <% } %>
+    <div class="fi-input-wrp-content-ctn">
+        <input <%- input %> />
+    </div>
+    <% if (suffix !== null) { %>
+        <div x-on:click="if (! $event.target.closest('.fi-input-wrp-actions')) $dispatch('focus-input')" class="fi-input-wrp-suffix fi-input-wrp-suffix-has-label">
+            <span class="fi-input-wrp-label">
+                <%= suffix %>
+            </span>
+        </div>
+    <% } %>
+    <% if (revealable) { %>
+        <div class="fi-input-wrp-suffix">
+            <div class="fi-input-wrp-actions">
+                <button title="<%= showLabel %>" aria-label="<%= showLabel %>" type="button" wire:loading.class="fi-disabled" class="fi-ac-icon-btn-action fi-icon-btn fi-size-sm" x-ref="showPasswordAction" x-show="! isPasswordRevealed" x-on:click="setPasswordRevealed(true)">
+                    <%- icon('m-eye') %>
+                </button>
+                <button title="<%= hideLabel %>" aria-label="<%= hideLabel %>" type="button" wire:loading.class="fi-disabled" class="fi-ac-icon-btn-action fi-icon-btn fi-size-sm" x-cloak="x-cloak" x-ref="hidePasswordAction" x-show="isPasswordRevealed" x-on:click="setPasswordRevealed(false)">
+                    <%- icon('m-eye-slash') %>
+                </button>
+            </div>
+        </div>
+    <% } %>
+</div>