feat: add editor image support (#319)

code4romania · Apr 19, 2023 · 4b5f402 · 4b5f402
1 parent af4a0e4
commit 4b5f402
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 5 deletions.
diff --git a/app/Http/Requests/Admin/SettingRequest.php b/app/Http/Requests/Admin/SettingRequest.php
@@ -38,6 +38,7 @@ public function rules(): array
                 'settings.front_page' => ['required', 'exists:pages,id'],
                 'settings.privacy_page' => ['required', 'exists:pages,id'],
                 'settings.terms_page' => ['required', 'exists:pages,id'],
+                'settings.footer' => ['array'],
                 'settings.html' => ['array'],
                 'settings.html.header' => ['nullable', 'string'],
                 'settings.html.footer' => ['nullable', 'string'],

diff --git a/app/Models/Setting.php b/app/Models/Setting.php
@@ -39,6 +39,7 @@ protected static function defaults(): Collection
                 'terms_page' => null,
                 'logo' => null,
                 'favicon' => null,
+                'footer' => $translatable,
                 'html' => [
                     'header' => null,
                     'footer' => null,

diff --git a/app/View/Components/Site/Footer.php b/app/View/Components/Site/Footer.php
@@ -14,6 +14,8 @@ class Footer extends Component
 {
     public ?string $title;
 
+    public ?string $footer;
+
     public Collection $menu;
 
     public ?array $social;
@@ -27,6 +29,8 @@ public function __construct()
     {
         $this->title = localized_settings('site.title');
 
+        $this->footer = localized_settings('site.footer');
+
         $this->menu = MenuItem::query()
             ->location('footer')
             ->get()

diff --git a/resources/js/components/Editor/Toolbar.vue b/resources/js/components/Editor/Toolbar.vue
@@ -256,6 +256,22 @@
                         isActive: () => props.editor.isActive('paragraph'),
                     },
                 ],
+                [
+                    {
+                        icon: 'Media/image-fill',
+                        action: () => {
+                            const url = window.prompt('URL');
+
+                            if (url) {
+                                props.editor
+                                    .chain()
+                                    .focus()
+                                    .setImage({ src: url })
+                                    .run();
+                            }
+                        },
+                    },
+                ],
                 [
                     {
                         icon: 'Editor/table-2',

diff --git a/resources/js/components/Form/Editor.vue b/resources/js/components/Form/Editor.vue
@@ -155,5 +155,14 @@
             cursor: ew-resize;
             cursor: col-resize;
         }
+
+        img {
+            max-width: 100%;
+            height: auto;
+
+            &.ProseMirror-selectednode {
+                outline: 3px solid #68cef8;
+            }
+        }
     }
 </style>
diff --git a/resources/js/pages/Settings/Site.vue b/resources/js/pages/Settings/Site.vue
@@ -80,6 +80,12 @@
                     :accept="['.png', '.gif', '.jpg', '.jpeg']"
                     :help="$t('field_help.favicon')"
                 />
+
+                <localized-field
+                    field="form-editor"
+                    :label="$t('field.footer')"
+                    v-model="form.settings.footer"
+                />
             </panel>
 
             <panel title="Custom HTML">

diff --git a/resources/views/components/site/footer-government.blade.php b/resources/views/components/site/footer-government.blade.php
@@ -2,7 +2,7 @@
     <div class="container py-12 lg:py-16">
         <div class="grid gap-8 xl:grid-cols-3">
             <div>
-                {{-- TODO --}}
+                {!! $footer !!}
             </div>
 
             <nav class="xl:col-span-2">

diff --git a/resources/views/components/site/footer.blade.php b/resources/views/components/site/footer.blade.php
@@ -4,7 +4,7 @@
     <div class="container py-12 lg:py-16">
         <div class="grid gap-8 xl:grid-cols-3">
             <div>
-                {{-- TODO --}}
+                {!! $footer !!}
             </div>
 
             <nav class="xl:col-span-2">
@@ -18,7 +18,8 @@
                             <x-dynamic-component
                                 class="text-sm font-semibold tracking-wider text-gray-400 uppercase hover:text-gray-900"
                                 :component="$item->component"
-                                :item="$item" />
+                                :item="$item"
+                            />
 
                             @if ($item->children->count())
                                 <ul class="space-y-4">
@@ -27,7 +28,8 @@ class="text-sm font-semibold tracking-wider text-gray-400 uppercase hover:text-g
                                             <x-dynamic-component
                                                 class="text-gray-500 hover:text-gray-900"
                                                 :component="$item->component"
-                                                :item="$item" />
+                                                :item="$item"
+                                            />
                                         </li>
                                     @endforeach
                                 </ul>
@@ -39,7 +41,10 @@ class="text-gray-500 hover:text-gray-900"
         </div>
 
         <div class="pt-8 mt-8 border-t border-gray-200 md:flex md:items-center md:justify-between">
-            <x-social-media-links :links="$social" class="text-gray-400 md:order-2" />
+            <x-social-media-links
+                :links="$social"
+                class="text-gray-400 md:order-2"
+            />
 
             <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
                 &copy; {{ date('Y') }} {{ $title }}.