From b31ae8f5a1c729449a47c87c3dc7f6a09fb5341b Mon Sep 17 00:00:00 2001 From: Rahman Ramsi Date: Tue, 15 Aug 2023 10:42:02 +0800 Subject: [PATCH] wip --- .../Forms/Website/GeneralSettingForm.php | 4 +- app/Models/Conference.php | 4 +- app/Providers/AppServiceProvider.php | 10 +- app/Providers/Filament/PanelProvider.php | 23 ++++ app/Providers/FilamentServiceProvider.php | 54 -------- composer.json | 3 +- composer.lock | 86 +++++++++++- config/app.php | 1 - config/filament-forms-tinyeditor.php | 89 +++++++++++++ packages/livewire-page-group | 2 +- postcss.config.js | 4 +- .../filament-forms-tinyeditor/tiny-editor.js | 37 ++++++ resources/views/website/layouts/app.blade.php | 49 +++++-- .../views/website/layouts/header.blade.php | 2 +- resources/views/website/pages/home.blade.php | 11 +- resources/website/css/plugins/tiptap.css | 125 ++++++++++++++++++ resources/website/css/tailwind.config.js | 18 ++- resources/website/css/website.css | 17 +++ 18 files changed, 454 insertions(+), 85 deletions(-) delete mode 100644 app/Providers/FilamentServiceProvider.php create mode 100644 config/filament-forms-tinyeditor.php create mode 100644 public/js/mohamedsabil83/filament-forms-tinyeditor/tiny-editor.js create mode 100644 resources/website/css/plugins/tiptap.css diff --git a/app/Livewire/Panel/Forms/Website/GeneralSettingForm.php b/app/Livewire/Panel/Forms/Website/GeneralSettingForm.php index 3bc8e35db..cf7a9b4fb 100644 --- a/app/Livewire/Panel/Forms/Website/GeneralSettingForm.php +++ b/app/Livewire/Panel/Forms/Website/GeneralSettingForm.php @@ -10,8 +10,10 @@ use Filament\Forms\Contracts\HasForms; use Filament\Forms\Form; use Filament\Notifications\Notification; +use FilamentTiptapEditor\TiptapEditor; use Illuminate\Contracts\View\View; use Livewire\Component; +use Mohamedsabil83\FilamentFormsTinyeditor\Components\TinyEditor; class GeneralSettingForm extends Component implements HasForms { @@ -37,7 +39,7 @@ public function form(Form $form): Form ->collection('logo') ->image() ->conversion('thumb'), - RichEditor::make('meta.page_footer'), + TinyEditor::make('meta.page_footer'), ]) ->statePath('data') diff --git a/app/Models/Conference.php b/app/Models/Conference.php index 96f0f2b5c..104148d4f 100644 --- a/app/Models/Conference.php +++ b/app/Models/Conference.php @@ -43,9 +43,9 @@ class Conference extends Model implements HasMedia, HasName, HasAvatar 'type' => ConferenceType::class, ]; - public static function current() + public static function current(): ?Conference { - if (! isset(static::$current)) { + if (!isset(static::$current)) { static::$current = static::where('is_current', true)->first(); } diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php index ec902813e..48bda4e08 100644 --- a/app/Providers/AppServiceProvider.php +++ b/app/Providers/AppServiceProvider.php @@ -2,12 +2,14 @@ namespace App\Providers; +use App\Models\Conference; use Illuminate\Database\Eloquent\Model; use Illuminate\Database\Eloquent\Relations\Relation; use Illuminate\Support\Facades\DB; use Illuminate\Support\Facades\Log; use Illuminate\Support\Facades\Storage; use Illuminate\Support\Facades\URL; +use Illuminate\Support\Facades\View; use Illuminate\Support\ServiceProvider; class AppServiceProvider extends ServiceProvider @@ -27,6 +29,7 @@ public function boot(): void { $this->setupModel(); $this->setupStorage(); + $this->setupView(); } protected function setupModel() @@ -38,7 +41,7 @@ protected function setupModel() // Since this is a performance concern only, don’t halt // production for violations. - Model::preventLazyLoading(! $this->app->isProduction()); + Model::preventLazyLoading(!$this->app->isProduction()); } protected function setupMorph() @@ -93,4 +96,9 @@ protected function setupStorage() ); }); } + + protected function setupView() + { + View::share('currentConference', Conference::current()); + } } diff --git a/app/Providers/Filament/PanelProvider.php b/app/Providers/Filament/PanelProvider.php index 08de20d74..eacded7e3 100644 --- a/app/Providers/Filament/PanelProvider.php +++ b/app/Providers/Filament/PanelProvider.php @@ -4,6 +4,9 @@ use App\Http\Middleware\ApplyTenantScopes; use App\Models\Conference; +use Filament\Forms\Components\DatePicker; +use Filament\Forms\Components\SpatieMediaLibraryFileUpload; +use Filament\Forms\Components\TimePicker; use Filament\Http\Middleware\Authenticate; use Filament\Http\Middleware\DisableBladeIconComponents; use Filament\Http\Middleware\DispatchServingFilamentEvent; @@ -32,6 +35,8 @@ public function panel(Panel $panel): Panel ->id('panel') ->path('panel') ->maxContentWidth('full') + ->homeUrl(fn () => route('livewirePageGroup.website.pages.home')) + ->bootUsing(fn () => $this->setupFilamentComponent()) ->renderHook( 'panels::scripts.before', fn () => Blade::render(<<<'Blade' @@ -119,4 +124,22 @@ protected function getAuthMiddleware(): array Authenticate::class, ]; } + + protected function setupFilamentComponent() + { + // TODO Validasi file type menggunakan dengan menggunakan format extension, bukan dengan mime type, hal ini agar mempermudah pengguna dalam melakukan setting file apa saja yang diperbolehkan + // Saat ini SpatieMediaLibraryFileUpload hanya support file validation dengan mime type. + // Solusi mungkin buat custom component upload dengan menggunakan library seperti dropzone, atau yang lainnya. + SpatieMediaLibraryFileUpload::configureUsing(function (SpatieMediaLibraryFileUpload $fileUpload): void { + $fileUpload->maxSize(config('media-library.max_file_size') / 1024); + // ->acceptedFileTypes(config('media-library.accepted_file_types')) + }); + DatePicker::configureUsing(function (DatePicker $datePicker): void { + $datePicker->displayFormat(setting('format.date')); + }); + + TimePicker::configureUsing(function (TimePicker $timePicker): void { + $timePicker->displayFormat(setting('format.time')); + }); + } } diff --git a/app/Providers/FilamentServiceProvider.php b/app/Providers/FilamentServiceProvider.php deleted file mode 100644 index 3d9a332c1..000000000 --- a/app/Providers/FilamentServiceProvider.php +++ /dev/null @@ -1,54 +0,0 @@ -setupFileUploads(); - $this->setupFormat(); - }); - } - - protected function setupFileUploads() - { - // TODO Validasi file type menggunakan dengan menggunakan format extension, bukan dengan mime type, hal ini agar mempermudah pengguna dalam melakukan setting file apa saja yang diperbolehkan - // Saat ini SpatieMediaLibraryFileUpload hanya support file validation dengan mime type. - // Solusi mungkin buat custom component upload dengan menggunakan library seperti dropzone, atau yang lainnya. - SpatieMediaLibraryFileUpload::configureUsing(function (SpatieMediaLibraryFileUpload $fileUpload): void { - $fileUpload->maxSize(config('media-library.max_file_size') / 1024); - // ->acceptedFileTypes(config('media-library.accepted_file_types')) - }); - } - - protected function setupFormat() - { - DatePicker::configureUsing(function (DatePicker $datePicker): void { - $datePicker->displayFormat(setting('format.date')); - }); - - TimePicker::configureUsing(function (TimePicker $timePicker): void { - $timePicker->displayFormat(setting('format.time')); - }); - } -} diff --git a/composer.json b/composer.json index 912ac03d2..199411258 100644 --- a/composer.json +++ b/composer.json @@ -10,7 +10,7 @@ "require": { "php": "^8.1", "akaunting/laravel-setting": "^1.2", - "awcodes/filament-tiptap-editor": "^3.0@alpha", + "awcodes/filament-tiptap-editor": "^3.0@beta", "binarytorch/larecipe": "^2.6", "filament/filament": "^3.0", "filament/spatie-laravel-media-library-plugin": "^3.0", @@ -23,6 +23,7 @@ "laravel/sanctum": "^3.2", "laravel/tinker": "^2.8", "lorisleiva/laravel-actions": "^2.5", + "mohamedsabil83/filament-forms-tinyeditor": "^2.0", "plank/laravel-metable": "^5.4", "rahmanramsi/livewire-page-group": "^0.0.3", "spatie/eloquent-sortable": "^4.0", diff --git a/composer.lock b/composer.lock index 1c667c08e..3e8e4c2f4 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "b6e50e1cb80b68d9a96cdca5b7343d28", + "content-hash": "be6cc6b521e6786369d268784af3ed06", "packages": [ { "name": "akaunting/laravel-setting", @@ -4311,6 +4311,88 @@ }, "time": "2023-05-10T11:58:31+00:00" }, + { + "name": "mohamedsabil83/filament-forms-tinyeditor", + "version": "v2.0.1", + "source": { + "type": "git", + "url": "https://github.com/mohamedsabil83/filament-forms-tinyeditor.git", + "reference": "d0ad3a43a467f126fb03b004c4297c5da437c883" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/mohamedsabil83/filament-forms-tinyeditor/zipball/d0ad3a43a467f126fb03b004c4297c5da437c883", + "reference": "d0ad3a43a467f126fb03b004c4297c5da437c883", + "shasum": "" + }, + "require": { + "filament/forms": "^3.0", + "illuminate/contracts": "^9.0|^10.0", + "php": "^8.1", + "spatie/laravel-package-tools": "^1.14.0" + }, + "require-dev": { + "laravel/pint": "^1.0", + "nunomaduro/collision": "^6.0|^7.0", + "nunomaduro/larastan": "^2.0", + "orchestra/testbench": "^7.0|^8.0", + "pestphp/pest": "^1.21", + "pestphp/pest-plugin-laravel": "^1.1", + "phpstan/extension-installer": "^1.1", + "phpstan/phpstan-deprecation-rules": "^1.0", + "phpstan/phpstan-phpunit": "^1.0", + "phpunit/phpunit": "^9.5|^10.0", + "spatie/laravel-ray": "^1.26" + }, + "type": "library", + "extra": { + "laravel": { + "providers": [ + "Mohamedsabil83\\FilamentFormsTinyeditor\\FilamentFormsTinyeditorServiceProvider" + ] + } + }, + "autoload": { + "psr-4": { + "Mohamedsabil83\\FilamentFormsTinyeditor\\": "src" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "MohamedSabil83", + "email": "me@mohamedsabil83.com", + "role": "Developer" + } + ], + "description": "A TinyMce editor component for Filament", + "homepage": "https://github.com/mohamedsabil83/filament-forms-tinyeditor", + "keywords": [ + "Forms", + "filament", + "laravel", + "tinyeditor", + "tinymce" + ], + "support": { + "issues": "https://github.com/mohamedsabil83/filament-forms-tinyeditor/issues", + "source": "https://github.com/mohamedsabil83/filament-forms-tinyeditor/tree/v2.0.1" + }, + "funding": [ + { + "url": "https://paypal.me/technolizer", + "type": "custom" + }, + { + "url": "https://github.com/mohamedsabil83", + "type": "github" + } + ], + "time": "2023-08-01T14:21:46+00:00" + }, { "name": "monolog/monolog", "version": "3.4.0", @@ -12300,7 +12382,7 @@ "aliases": [], "minimum-stability": "dev", "stability-flags": { - "awcodes/filament-tiptap-editor": 15 + "awcodes/filament-tiptap-editor": 10 }, "prefer-stable": true, "prefer-lowest": false, diff --git a/config/app.php b/config/app.php index e4aa742bd..408e40cb0 100644 --- a/config/app.php +++ b/config/app.php @@ -194,7 +194,6 @@ // App\Providers\BroadcastServiceProvider::class, App\Providers\EventServiceProvider::class, App\Providers\RouteServiceProvider::class, - App\Providers\FilamentServiceProvider::class, App\Providers\Filament\PanelProvider::class, App\Providers\WebsiteServiceProvider::class, diff --git a/config/filament-forms-tinyeditor.php b/config/filament-forms-tinyeditor.php new file mode 100644 index 000000000..42d205573 --- /dev/null +++ b/config/filament-forms-tinyeditor.php @@ -0,0 +1,89 @@ + [ + + 'default' => [ + 'plugins' => 'advlist autoresize codesample directionality emoticons fullscreen hr image imagetools link lists media table toc wordcount code', + 'toolbar' => 'undo redo removeformat | formatselect fontsizeselect | bold italic | rtl ltr | alignjustify alignright aligncenter alignleft | numlist bullist | forecolor backcolor | blockquote table hr | image link code | fullscreen', + 'upload_directory' => 'tinyeditor', + ], + + 'simple' => [ + 'plugins' => 'autoresize directionality emoticons link wordcount', + 'toolbar' => 'removeformat | bold italic | rtl ltr | link emoticons', + 'upload_directory' => null, + ], + + 'template' => [ + 'plugins' => 'autoresize template', + 'toolbar' => 'template', + 'upload_directory' => null, + ], + /* + |-------------------------------------------------------------------------- + | Custom Configs + |-------------------------------------------------------------------------- + | + | If you want to add custom configurations to directly tinymce + | You can use custom_configs key as an array + | + */ + + /* + 'default' => [ + 'plugins' => 'advlist autoresize codesample directionality emoticons fullscreen hr image imagetools link lists media table toc wordcount', + 'toolbar' => 'undo redo removeformat | formatselect fontsizeselect | bold italic | rtl ltr | alignjustify alignright aligncenter alignleft | numlist bullist | forecolor backcolor | blockquote table toc hr | image link media codesample emoticons | wordcount fullscreen', + 'custom_configs' => [ + 'allow_html_in_named_anchor' => true, + 'link_default_target' => '_blank', + 'codesample_global_prismjs' => true, + 'image_advtab' => true, + 'image_class_list' => [ + [ + 'title' => 'None', + 'value' => '', + ], + [ + 'title' => 'Fluid', + 'value' => 'img-fluid', + ], + ], + ] + ], + */ + + ], + + /* + |-------------------------------------------------------------------------- + | Templates + |-------------------------------------------------------------------------- + | + | You can add as many as you want of templates to use it in your application. + | + | https://www.tiny.cloud/docs/plugins/opensource/template/#templates + | + | ex: TinyEditor::make('content')->profiles('template')->template('example') + */ + + 'templates' => [ + + 'example' => [ + // content + ['title' => 'Some title 1', 'description' => 'Some desc 1', 'content' => 'My content'], + // url + ['title' => 'Some title 2', 'description' => 'Some desc 2', 'url' => 'http://localhost'], + ], + + ], +]; diff --git a/packages/livewire-page-group b/packages/livewire-page-group index 584c8ad38..0f57f86eb 160000 --- a/packages/livewire-page-group +++ b/packages/livewire-page-group @@ -1 +1 @@ -Subproject commit 584c8ad389442a934d686540faf67414b7981f01 +Subproject commit 0f57f86eb23f8b693c5639aeec20b607e3fefd23 diff --git a/postcss.config.js b/postcss.config.js index 93a7ef4e9..04983ace8 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,7 +1,7 @@ module.exports = { plugins: { - "tailwindcss/nesting": "postcss-nesting", + 'tailwindcss/nesting': {}, tailwindcss: {}, autoprefixer: {}, }, -}; +} \ No newline at end of file diff --git a/public/js/mohamedsabil83/filament-forms-tinyeditor/tiny-editor.js b/public/js/mohamedsabil83/filament-forms-tinyeditor/tiny-editor.js new file mode 100644 index 000000000..cfe9ae572 --- /dev/null +++ b/public/js/mohamedsabil83/filament-forms-tinyeditor/tiny-editor.js @@ -0,0 +1,37 @@ +document.addEventListener('DOMContentLoaded', function () { + const sortableClass = [ + 'fi-fo-builder-item', + 'fi-fo-repeater-item', + ]; + + Livewire.hook('morph.updated', (el) => { + if (!window.tinySettingsCopy) { + return; + } + + const isModalOpen = document.body.classList.contains('tox-dialog__disable-scroll'); + + if (!isModalOpen && sortableClass.some(i => el.el.classList.contains(i))) { + removeEditors(); + setTimeout(reinitializeEditors, 1); + } + }) + + const removeEditors = debounce(() => { + window.tinySettingsCopy.forEach(i => tinymce.execCommand('mceRemoveEditor', false, i.target.id)); + }, 50); + + const reinitializeEditors = debounce(() => { + window.tinySettingsCopy.forEach(settings => tinymce.init(settings)) + }); + + function debounce(callback, timeout = 100) { + let timer; + return (...args) => { + clearTimeout(timer); + timer = setTimeout(() => { + callback.apply(this, args); + }, timeout); + }; + } +}) diff --git a/resources/views/website/layouts/app.blade.php b/resources/views/website/layouts/app.blade.php index e85817296..90e9235bb 100644 --- a/resources/views/website/layouts/app.blade.php +++ b/resources/views/website/layouts/app.blade.php @@ -7,7 +7,9 @@ {{ $livewire?->getTitle() ?? '' }} - +