Support Webp images - thumbnails, preview, and editing images for Laravel Ckfinder

For all those who need webp within CKFinder - after hours of figuring this out I've finally managed to get it to work - here are the files and code you need to update:

public/js/ckfinder/ckfinder.js

Search for:

isExtensionOfImage:function(e){return/jpeg|jpg|gif|png/.test(e.toLowerCase())}        

and append webp to it:

isExtensionOfImage:function(e){return/jpeg|jpg|gif|png|webp/.test(e.toLowerCase())}        

Create a file Image.php with path: app/Overrides/CKSource/CKFinder/Image.php and then copy content from vendor/ckfinder/ckfinder-laravel-package/_connector/Image.php to app/Overrides/CKSource/CKFinder/Image.php

Add webp to $supportedExtensions

protected static $supportedExtensions = ['jpg', 'jpeg', 'gif', 'png', 'webp'];        

Add 'image/webp' => $gdSupportedTypes & IMG_WEBP to constructor's $supportedFormats variable

public static function mimeTypeFromExtension($extension)
{
    $extensionMimeTypeMap = [
        // ...
        'webp' => 'image/webp',
    ];

    ...
}        

Add image/webp case to getData method

public function getData($format = null, $quality = 80)
{
    // ...

    switch ($mime) {
        // ...
        case 'image/webp':
            imagewebp($this->gdImage);

            break;
    }

    // ...
}        

Update composer.json

"autoload": {
    "psr-4": {
        ...
        "CKSource\\" : "app/Overrides/CKSource/"
    },
    "exclude-from-classmap": [
        "vendor/ckfinder/ckfinder-laravel-package/_connector/Image.php"
    ],
},        

Last step: go to the terminal and run

composer update        

This is the result on the Ckfinder screen after completing the above steps