Improve CKEditor config

- Add toolbar save button, so you can easily save while working
- Add image uploading
- Improve styles, use PT Sans
- Drop IE 11 support, since CKEditor 5 officially do not support it

.babelrc

@@ -8,12 +8,10 @@
             {
                 "debug": true,
                 "modules": false,
-                "forceAllTransforms": true,
+                "forceAllTransforms": false,
                 "useBuiltIns": "entry",
                 "corejs": "3",
-                "targets": {
-                    "ie": "11"
-                }
+                "targets": "last 4 Chrome versions, last 4 Firefox versions, last 4 Edge versions, last 2 Safari versions"
             }
         ]
     ]

app/Http/Controllers/PageController.php

@@ -3,7 +3,11 @@
 namespace App\Http\Controllers;
 
 use App\Page;
+use Illuminate\Filesystem\FilesystemManager;
+use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
+use Illuminate\Support\Str;
+use Intervention\Image\ImageManager;
 
 class PageController extends Controller
 {
@@ -94,6 +98,70 @@ public function update(Request $request, Page $page)
             ->with('status', 'Siden ble lagret.');
     }
 
+    protected function storeThumb(FilesystemManager $fm, ImageManager $im, $file, $maxWidth, $maxHeight, $filename) {
+        $blob = $im->make($file->path())
+            ->resize($maxWidth, $maxHeight, function ($constraint) {
+                $constraint->aspectRatio();
+                $constraint->upsize();
+            })
+            ->encode(null, 85);
+
+        $fm->disk('public')->put($filename, $blob);
+    }
+
+    /**
+     * Store a new image uploaded from CKEditor.
+     *
+     * @param Request $request
+     * @param FilesystemManager $fm
+     * @return JsonResponse
+     */
+    public function uploadImage(Request $request, FilesystemManager $fm, ImageManager $im)
+    {
+        $user = \Auth::user();
+        if (!count($user->rights)) {
+            return response()->json(['Error' => 'Permission denied, no write access to any base.'], 401);
+        }
+
+        $file = $request->file('upload');
+        $basename = Str::random(40);
+        $ext = '.' . $file->extension();
+        $filename = "{$basename}{$ext}";
+
+        $publicPath = 'uploads/';
+
+        if ($ext === '.gif') {
+            // Don't generate thumbs
+            $fm->disk('public')->putFileAs('.', $file, $filename);
+
+            $url = asset($publicPath . $filename);
+            $this->log("Lastet opp bilde: <a href='$url'>" . basename($url) . "</a>");
+
+            return response()->json([
+                'url' =>  $url,
+            ]);
+        }
+
+        $thumbSizes = ['1200', '600', '300'];
+
+        $this->storeThumb($fm, $im, $file, 1920, null, $filename);
+        $urls = [
+            'default' => asset($publicPath . $filename),
+        ];
+        foreach ($thumbSizes as $width) {
+            $thumb_filename = $basename . '_' . $width . $ext;
+            $this->storeThumb($fm, $im, $file, $width, null, "{$basename}_{$width}{$ext}");
+            $urls[$width] = asset("{$publicPath}{$basename}_{$width}{$ext}");
+        }
+
+        $url = $urls['default'];
+        $this->log("Lastet opp bilde: <a href='$url'>" . basename($url) . "</a>");
+
+        return response()->json([
+            'urls' => $urls,
+        ]);
+    }
+
     /**
      * Remove the specified resource from storage.
      *

app/Http/Kernel.php

@@ -70,7 +70,7 @@ class Kernel extends HttpKernel
         'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
 
         'secure.content' => \Stevenmaguire\Laravel\Http\Middleware\EnforceContentSecurity::class,
-        'admin' => \App\Http\Middleware\Login::class,
+        'login' => \App\Http\Middleware\Login::class,
 
         'checklang' => \App\Http\Middleware\CheckLang::class,
     ];

app/Providers/RouteServiceProvider.php

@@ -160,10 +160,11 @@ protected function mapDynamicRoutes()
         Route::middleware('web')
             ->namespace($this->namespace)
             ->group(function () {
-                Route::middleware('admin')
+                Route::middleware('login')
                     ->group(function () {
                         Route::get('{page}/edit', 'PageController@edit');
                         Route::post('{page}/update', 'PageController@update');
+                        Route::post('upload-image', 'PageController@uploadImage');
                     });
                 Route::get('{page}', 'PageController@show');
             });

composer.json

@@ -6,6 +6,7 @@
     "type": "project",
     "require": {
         "php": ">=7.2",
+        "ext-gd": "*",
         "ext-json": "*",
         "ext-pdo": "*",
         "ext-pdo_pgsql": "*",
@@ -14,6 +15,8 @@
         "doctrine/dbal": "~2.9",
         "fideloper/proxy": "^4.0",
         "http-interop/http-factory-guzzle": "^1.0",
+        "intervention/image": "^2.5",
+        "jenssegers/agent": "^2.6",
         "laravel/framework": "6.5.*",
         "laravel/tinker": "^1.0",
         "laravelcollective/html": "~6.0",

config/app.php

@@ -167,6 +167,7 @@
          */
         Collective\Html\HtmlServiceProvider::class,
         Barryvdh\Debugbar\ServiceProvider::class,
+        Intervention\Image\ImageServiceProvider::class,
 
         /*
          * Application Service Providers...

config/filesystems.php

@@ -13,7 +13,7 @@
     |
     */
 
-    'default' => env('FILESYSTEM_DRIVER', 'local'),
+    'default' => env('FILESYSTEM_DRIVER', 'public'),
 
     /*
     |--------------------------------------------------------------------------

config/image.php

@@ -0,0 +1,20 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Image Driver
+    |--------------------------------------------------------------------------
+    |
+    | Intervention Image supports "GD Library" and "Imagick" to process images
+    | internally. You may choose one of them according to your PHP
+    | configuration. By default PHP's "GD Library" implementation is used.
+    |
+    | Supported: "gd", "imagick"
+    |
+    */
+
+    'driver' => 'gd'
+
+];

docker/Dockerfile

@@ -16,11 +16,24 @@ RUN apt-get update \
     && apt-get install -y libpq-dev \
     && docker-php-ext-install pdo pdo_pgsql
 
+# RUN apt-get update \
+#     && apt-get install -y libvips-dev \
+#     && pecl install vips \
+#     && docker-php-ext-enable vips
+
+RUN apt-get update && apt-get install -y \
+        libjpeg62-turbo-dev \
+        libpng-dev \
+    && docker-php-ext-configure gd --with-jpeg \
+    && docker-php-ext-install -j$(nproc) gd
+
 RUN a2enmod rewrite ssl headers
 RUN a2dissite 000-default
 
 RUN cp "$PHP_INI_DIR/php.ini-production" "$PHP_INI_DIR/php.ini" \
-    && sed -i "s/memory_limit = 128M/memory_limit = 348M/" "$PHP_INI_DIR/php.ini"
+    && sed -i "s/memory_limit = .*/memory_limit = 512M/" "$PHP_INI_DIR/php.ini" \
+    && sed -i "s/post_max_size = .*/post_max_size = 128M/" "$PHP_INI_DIR/php.ini" \
+    && sed -i "s/upload_max_filesize = .*/upload_max_filesize = 128M/" "$PHP_INI_DIR/php.ini"
 
 RUN mkdir -p \
     ./storage/app \