Merge pull request #30 from mailcarrierapp/feat/live-preview

[2.x] Live preview

Author: danilopolani

bun.lockb

@@ -25,6 +25,7 @@
         "laravel/socialite": "^5.6.1",
         "livewire/livewire": "^3.4",
         "nunomaduro/termwind": "^1.15|^2.0",
+        "pboivin/filament-peek": "^2.2",
         "ralphjsmit/laravel-filament-components": "^2.0",
         "socialiteproviders/manager": "^4.3",
         "spatie/data-transfer-object": "^3.9.1",

composer.json

@@ -8,16 +8,20 @@
     "build": "mix --production"
   },
   "devDependencies": {
+    "@codemirror/lang-html": "^6.4.8",
+    "@codemirror/lang-json": "^6.0.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "autoprefixer": "^10.4.17",
+    "codemirror": "^6.0.1",
     "highlight.js": "^11.9.0",
     "laravel-mix": "^6.0.6",
     "postcss": "^8.4.33",
     "postcss-nesting": "^12.0.2",
     "resolve-url-loader": "^5.0.0",
     "sass": "^1.70.0",
     "sass-loader": "^12.1.0",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "thememirror": "^2.0.1"
   }
 }

package.json

@@ -1,4 +1,4 @@
-@import '../../vendor/filament/filament/resources/css/theme.css';
+@import "../../vendor/filament/filament/resources/css/theme.css";
 
 @config '../../tailwind.config.js';
 
@@ -7,3 +7,11 @@
   top: -2px;
   transform: rotate(-40deg);
 }
+
+.filament-peek-panel-body iframe {
+  @apply rounded bg-white;
+}
+
+.cm-editor {
+  @apply h-full;
+}

resources/css/theme.css

@@ -1,5 +1,6 @@
 {
     "/js/highlight.js": "/js/highlight.js",
+    "/js/codemirror.component.js": "/js/codemirror.component.js",
     "/css/theme.css": "/css/theme.css",
     "/css/highlight.css": "/css/highlight.css"
 }

resources/dist/css/theme.css

@@ -0,0 +1,86 @@
+import {
+  history,
+  indentWithTab
+} from "@codemirror/commands";
+import { html } from "@codemirror/lang-html";
+import { Compartment, EditorState } from '@codemirror/state';
+import { EditorView, highlightActiveLineGutter, keymap, lineNumbers } from "@codemirror/view";
+import { dracula, smoothy } from 'thememirror';
+
+// Adapted from https://github.com/dotswan/filament-code-editor
+const CodeEditorAlpinePlugin = (Alpine) => {
+  Alpine.data('codeEditorFormComponent', ({ state, isReadOnly, language = 'html' }) => ({
+    state,
+    editor: undefined,
+    themeConfig: undefined,
+    languageConfig: undefined,
+    isReadOnly: false,
+
+    init() {
+      this.isReadOnly = isReadOnly;
+      this.themeConfig = new Compartment();
+      this.languageConfig = new Compartment();
+      this.render();
+
+      // Needed for programmatic updates from Livewire (e.g. form fill) to the component
+      this.$watch('state', (value) => {
+        if (this.editor.state.doc.toString() !== value) {
+          this.editor.dispatch({
+            changes: { from: 0, to: this.editor.state.doc.length, insert: value }
+          });
+        }
+      });
+    },
+
+    render() {
+      this.editor = new EditorView({
+        parent: this.$refs.codeEditor,
+        state: EditorState.create({
+          doc: this.state,
+          autofocus: true,
+          indentWithTabs: true,
+          smartIndent: true,
+          lineNumbers: true,
+          matchBrackets: true,
+          tabSize: 2,
+          styleSelectedText: true,
+          extensions: [
+            keymap.of([indentWithTab]),
+            this.languageConfig.of(language === 'json' ? json() : html()),
+            this.themeConfig.of([dracula]),
+            EditorView.lineWrapping,
+            EditorState.readOnly.of(this.isReadOnly),
+            lineNumbers(),
+            history(),
+            highlightActiveLineGutter(),
+            EditorView.updateListener.of((v) => {
+              if (v.docChanged) {
+                this.state = v.state.doc.toString();
+                this.$wire.$commit();
+              }
+            }),
+          ],
+        }),
+      });
+
+      window.addEventListener('theme-changed', () => {
+        let theme = localStorage.getItem('theme');
+        if (theme === 'system') {
+          theme = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
+            ? 'dark'
+            : 'light';
+        }
+
+        this.editor.dispatch({
+          effects: this.themeConfig.reconfigure([
+            theme === 'light' ? smoothy : dracula
+          ])
+        });
+      });
+    },
+  }));
+}
+
+document.addEventListener('alpine:init', () => {
+  window.Alpine.plugin(CodeEditorAlpinePlugin);
+});

resources/dist/js/codemirror.component.js

@@ -1,39 +1,17 @@
+{{-- Adapted from https://github.com/dotswan/filament-code-editor --}}
 <x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
-    <div x-data="codeEditor" class="w-full max-h-full rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 overflow-hidden">
-        <div x-ref="editor" class="w-full h-[300px]" wire:ignore></div>
+    <div class="relative max-w-full overflow-hidden rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 h-[365px]">
+        <div
+            class="w-full h-full"
+            x-data="codeEditorFormComponent({
+                state: $wire.$entangle('{{ $getStatePath() }}'),
+                isReadOnly: @js($isDisabled()),
+            })">
+            <div
+                wire:ignore
+                x-ref="codeEditor"
+                class="w-full h-full">
+            </div>
+        </div>
     </div>
 </x-dynamic-component>
-
-<script type="module">
-    import * as monaco from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
-
-    Alpine.data('codeEditor', () => ({
-        state: @entangle($getStatePath()),
-        init() {
-            const editor = monaco.editor.create(this.$refs.editor, {
-                value: this.state,
-                language: 'twig',
-                automaticLayout: true,
-                scrollBeyondLastLine: false,
-                readOnly: {{ $isDisabled() ? 'true' : 'false' }},
-                minimap: {
-                    enabled: false,
-                },
-            });
-
-            editor.getModel().onDidChangeContent(() => this.state = editor.getValue());
-
-            window.addEventListener('theme-changed', () => {
-                let theme = localStorage.getItem('theme');
-
-                if (theme === 'system') {
-                    theme = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
-                        ? 'dark'
-                        : 'light';
-                }
-
-                monaco.editor.setTheme(theme === 'light' ? 'vs' : 'vs-dark');
-            });
-        }
-    }));
-</script>

resources/dist/mix-manifest.json

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+    <head>
+        <meta charset="utf-8" />
+
+        <meta name="application-name" content="{{ config('app.name') }}" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="csrf_token" value="{{ csrf_token() }}"/>
+
+        <title>MailCarrier preview</title>
+
+        <style>
+            [x-cloak] {
+                display: none !important;
+            }
+        </style>
+
+        @livewireStyles
+    </head>
+
+    <body class="antialiased">
+        {{ $slot }}
+
+        @livewireScripts
+    </body>
+</html>