Toolbar improvements

package.json

@@ -42,6 +42,7 @@
         "lodash": "^4.17.21",
         "lowlight": "^3.1.0",
         "tippy.js": "^6.3.7",
-        "tiptap-extension-upload-image": "^1.0.1"
+        "tiptap-extension-upload-image": "^1.0.1",
+        "vue3-sticky-directive": "^0.0.2"
     }
 }

resources/js/components/FormField.vue

@@ -8,10 +8,12 @@
         <template #field>
             <div
                 ref="container"
+                sticky-container
                 class="nova-canvas"
                 :class="{ 'nova-canvas--disabled': !editorReady }"
             >
                 <div
+                    v-sticky
                     ref="header"
                     class="nova-canvas-header form-control py-3 h-auto form-input form-control-bordered form-input--top"
                 >
@@ -104,7 +106,8 @@ export default {
             editable: !this.field.readonly,
             editorProps: {
                 attributes: {
-                    class: 'nova-canvas-content h-auto min-h-40 max-w-none block py-3 prose prose-slate form-control form-input form-input--bottom form-control-bordered dark:prose-invert prose-sm focus:outline-none',
+                    class: 'nova-canvas-content h-auto overflow-y-scroll min-h-40 max-w-none block py-3 prose prose-slate form-control form-input form-input--bottom form-control-bordered dark:prose-invert prose-sm focus:outline-none',
+                    style: this.field.scrollable ? `height: ${this.field.scrollable}px;` : ''
                 },
             },
             content: this.value,

resources/js/field.js

@@ -1,9 +1,11 @@
 import IndexField from './components/IndexField'
 import DetailField from './components/DetailField'
 import FormField from './components/FormField'
+import Sticky from 'vue3-sticky-directive'
 
 Nova.booting((app, store) => {
-  app.component('index-nova-editor', IndexField)
-  app.component('detail-nova-editor', DetailField)
-  app.component('form-nova-editor', FormField)
+    app.component('index-nova-editor', IndexField)
+    app.component('detail-nova-editor', DetailField)
+    app.component('form-nova-editor', FormField)
+    app.use(Sticky)
 })

routes/api.php

@@ -5,5 +5,5 @@
 use Spatie\LaravelImageOptimizer\Middlewares\OptimizeImages;
 
 Route::post('/upload', ImageUploadController::class)
-    //->middleware(OptimizeImages::class)
+    ->middleware(OptimizeImages::class)
     ->name('nova-canvas.upload');

src/Canvas.php

@@ -22,6 +22,7 @@ public function __construct($name, $attribute = null, callable $resolveCallback
             'disk' => config('nova.storage_disk'),
             'endpoint' => config('nova-canvas.images.endpoint'),
             'path' => config('nova-canvas.images.path'),
+            'scrollable' => null,
         ]);
 
         parent::__construct($name, $attribute, $resolveCallback);
@@ -95,4 +96,15 @@ public function asJson(): self
     {
         return $this->withMeta(['output' => 'json']);
     }
+
+    /**
+     * Set the editor content to a fixed height and make scrollable.
+     *
+     * @param int|null $height Height of the editor in px, null to disable.
+     * @return self
+     */
+    public function scrollable(?int $height = 400): self
+    {
+        return $this->withMeta(['scrollable' => $height]);
+    }
 }