From 42aff20b9959fb55492eddc0a8a1b85f3ea669a8 Mon Sep 17 00:00:00 2001
From: Enggar Tivandi <enggartivandi@outlook.com>
Date: Sat, 18 Mar 2023 05:24:45 +0800
Subject: [PATCH] chore: update support math formula and make config file
 publishable

---
 ...onfig.php => filament-cherry-markdown.php} |   4 +-
 resources/views/cherryMarkdownField.blade.php | 135 +++++++++---------
 src/CherryMarkdown.php                        |   4 +-
 src/FilamentCherryMarkdownServiceProvider.php |   7 +-
 4 files changed, 76 insertions(+), 74 deletions(-)
 rename config/{config.php => filament-cherry-markdown.php} (62%)

diff --git a/config/config.php b/config/filament-cherry-markdown.php
similarity index 62%
rename from config/config.php
rename to config/filament-cherry-markdown.php
index e07ced8..37d751e 100644
--- a/config/config.php
+++ b/config/filament-cherry-markdown.php
@@ -8,6 +8,8 @@
     'editor_config' => [
         'height'            => '500px',
         'default_model'     => 'edit&preview',
-        'locale'            => 'en_US'
+        'locale'            => 'en_US',
+        'math_engine'       => 'MathJax',
+        'math_engine_src'   => 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js'
     ]
 ];
diff --git a/resources/views/cherryMarkdownField.blade.php b/resources/views/cherryMarkdownField.blade.php
index 0a77f93..0dd38c9 100644
--- a/resources/views/cherryMarkdownField.blade.php
+++ b/resources/views/cherryMarkdownField.blade.php
@@ -1,15 +1,5 @@
-<x-forms::field-wrapper
-    :id="$getId()"
-    :label="$getLabel()"
-    :label-sr-only="$isLabelHidden()"
-    :helper-text="$getHelperText()"
-    :hint="$getHint()"
-    :hint-action="$getHintAction()"
-    :hint-color="$getHintColor()"
-    :hint-icon="$getHintIcon()"
-    :required="$isRequired()"
-    :state-path="$getStatePath()"
->
+<x-forms::field-wrapper :id="$getId()" :label="$getLabel()" :label-sr-only="$isLabelHidden()" :helper-text="$getHelperText()" :hint="$getHint()"
+    :hint-action="$getHintAction()" :hint-color="$getHintColor()" :hint-icon="$getHintIcon()" :required="$isRequired()" :state-path="$getStatePath()">
 
     <script>
         function debounce(func, timeout = 300) {
@@ -25,64 +15,71 @@ function debounce(func, timeout = 300) {
         let cherryEditorConfiguration = @json(config('filament-cherry-markdown.editor_config'));
     </script>
 
-    <div
-        x-data="{ state: $wire.{{ $applyStateBindingModifiers('entangle(\'' . $getStatePath() . '\')') }} }"
-        x-init="cherryEditor = new Cherry({
-            id: 'cherry-editor',
-            value: state,
-            editor: {
-                height: cherryEditorConfiguration.height || '100%',
-                defaultModel: cherryEditorConfiguration.default_model || 'edit&preview',
+    <div x-data="{ state: $wire.{{ $applyStateBindingModifiers('entangle(\'' . $getStatePath() . '\')') }} }" x-init="cherryEditor = new Cherry({
+        id: 'cherry-editor',
+        value: state,
+        editor: {
+            height: cherryEditorConfiguration.height || '100%',
+            defaultModel: cherryEditorConfiguration.default_model || 'edit&preview',
+        },
+        engine: {
+            syntax: {
+                mathBlock: {
+                    engine: cherryEditorConfiguration.math_engine || 'MathJax',
+                    src: cherryEditorConfiguration.math_engine_src,
+                },
+                inlineMath: {
+                    engine: cherryEditorConfiguration.math_engine || 'MathJax',
+                },
             },
-            toolbars: {
-                toolbar: [
-                    @if ($hasToolbarButton('bold')) 'bold', @endif
-                    @if ($hasToolbarButton('italic')) 'italic', @endif
-                    @if ($hasToolbarButton('strikethrough')) 'strikethrough', @endif '|',
-                    @if ($hasToolbarButton('color')) 'color', @endif
-                    @if ($hasToolbarButton('header')) 'header', @endif '|',
-                    @if ($hasToolbarButton('list')) 'list', @endif {
-                        insert: [
-                            @if ($hasToolbarButton('image')) 'image', @endif
-                            @if ($hasToolbarButton('audio')) 'audio', @endif
-                            @if ($hasToolbarButton('video')) 'video', @endif
-                            @if ($hasToolbarButton('link')) 'link', @endif
-                            @if ($hasToolbarButton('hr')) 'hr', @endif
-                            @if ($hasToolbarButton('br')) 'br', @endif
-                            @if ($hasToolbarButton('code')) 'code', @endif
-                            @if ($hasToolbarButton('formula')) 'formula', @endif
-                            @if ($hasToolbarButton('toc')) 'toc', @endif
-                            @if ($hasToolbarButton('table')) 'table', @endif
-                            @if ($hasToolbarButton('line-table')) 'line-table', @endif
-                            @if ($hasToolbarButton('bar-table')) 'bar-table', @endif
-                            @if ($hasToolbarButton('pdf')) 'pdf', @endif
-                            @if ($hasToolbarButton('word')) 'word', @endif
-                        ]
-                    },
-                    @if ($hasToolbarButton('graph')) 'graph', @endif
-                    @if ($hasToolbarButton('settings')) 'settings', @endif
-                ]
-            },
-            fileUpload: function(file, onSuccess, onError) {
-                $wire.upload(`componentFileAttachments.{{ $getStatePath() }}`, file, () => {
-                    $wire.getComponentFileAttachmentUrl('{{ $getStatePath() }}').then((url) => {
-                        if (!url) {
-                            return onError('File could not be uploaded');
-                        }
-                        onSuccess(url);
-        
-                        console.log(url)
-                    })
-                });
-            },
-            locale: cherryEditorConfiguration.locale || 'zh_CN',
-        });
-        
-        cherryEditor.onChange(debounce((e) => {
-            state = String(e.markdown)
-        }))"
-        wire:ignore
-    >
+        },
+        toolbars: {
+            toolbar: [
+                @if ($hasToolbarButton('bold')) 'bold', @endif
+                @if ($hasToolbarButton('italic')) 'italic', @endif
+                @if ($hasToolbarButton('strikethrough')) 'strikethrough', @endif '|',
+                @if ($hasToolbarButton('panel')) 'panel', @endif
+                @if ($hasToolbarButton('detail')) 'detail', @endif
+                @if ($hasToolbarButton('color')) 'color', @endif
+                @if ($hasToolbarButton('header')) 'header', @endif '|',
+                @if ($hasToolbarButton('list')) 'list', @endif {
+                    insert: [
+                        @if ($hasToolbarButton('image')) 'image', @endif
+                        @if ($hasToolbarButton('audio')) 'audio', @endif
+                        @if ($hasToolbarButton('video')) 'video', @endif
+                        @if ($hasToolbarButton('link')) 'link', @endif
+                        @if ($hasToolbarButton('hr')) 'hr', @endif
+                        @if ($hasToolbarButton('br')) 'br', @endif
+                        @if ($hasToolbarButton('code')) 'code', @endif
+                        @if ($hasToolbarButton('formula')) 'formula', @endif
+                        @if ($hasToolbarButton('toc')) 'toc', @endif
+                        @if ($hasToolbarButton('table')) 'table', @endif
+                        @if ($hasToolbarButton('line-table')) 'line-table', @endif
+                        @if ($hasToolbarButton('bar-table')) 'bar-table', @endif
+                        @if ($hasToolbarButton('pdf')) 'pdf', @endif
+                        @if ($hasToolbarButton('word')) 'word', @endif
+                    ]
+                },
+                @if ($hasToolbarButton('graph')) 'graph', @endif
+                @if ($hasToolbarButton('settings')) 'settings', @endif
+            ]
+        },
+        fileUpload: function(file, callback) {
+            $wire.upload(`componentFileAttachments.{{ $getStatePath() }}`, file, () => {
+                $wire.getComponentFileAttachmentUrl('{{ $getStatePath() }}').then((url) => {
+                    if (!url) {
+                        return console.error('File could not be uploaded');
+                    }
+                    callback(url);
+                })
+            });
+        },
+        locale: cherryEditorConfiguration.locale || 'zh_CN',
+    });
+    
+    cherryEditor.onChange(debounce((e) => {
+        state = String(e.markdown)
+    }))" wire:ignore>
         <div id="cherry-editor"></div>
     </div>
 </x-forms::field-wrapper>
diff --git a/src/CherryMarkdown.php b/src/CherryMarkdown.php
index 355f5cc..cf5ecef 100644
--- a/src/CherryMarkdown.php
+++ b/src/CherryMarkdown.php
@@ -35,6 +35,8 @@ class CherryMarkdown extends Field implements HasFileAttachments
         'pdf',
         'word',
         'graph',
-        'settings'
+        'settings',
+        'panel',
+        'detail'
     ];
 }
diff --git a/src/FilamentCherryMarkdownServiceProvider.php b/src/FilamentCherryMarkdownServiceProvider.php
index 357b6ac..28b058f 100644
--- a/src/FilamentCherryMarkdownServiceProvider.php
+++ b/src/FilamentCherryMarkdownServiceProvider.php
@@ -19,12 +19,13 @@ public function bootingPackage()
         ], true);
 
         Filament::registerStyles([
-            // 'https://pro.fontawesome.com/releases/v5.15.4/css/all.css',
             'https://cdn.jsdelivr.net/npm/cherry-markdown/dist/cherry-markdown.min.css',
             'spatie-markdown-editor' => __DIR__ . '/../resources/css/plugin.css',
         ]);
+    }
 
-        // Automatically apply the package configuration
-        $this->mergeConfigFrom(__DIR__ . '/../config/config.php', 'filament-cherry-markdown');
+    public function packageConfigured(Package $package): void
+    {
+        $package->hasConfigFile();
     }
 }