refactor: remove old css files

- fix filename typo - use tailwind typography as editor style
yilanboy · Nov 5, 2024 · 0f23465 · 0f23465
1 parent 92f9fc6
commit 0f23465
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 195 deletions.
diff --git a/resources/css/editor.css b/resources/css/editor.css
diff --git a/resources/css/missing-content-style.css b/resources/css/missing-content-style.css
diff --git a/resources/ts/ckeditor/custom.css b/resources/ts/ckeditor/custom.css
@@ -7,7 +7,10 @@
 }
 
 :root.dark {
-    --ck-color-base-border:#4b5563;
+    --ck-color-base-background: #374151;
+    --ck-color-engine-placeholder-text: #a1a1aa;
+
+    --ck-color-base-border: #4b5563;
 
     /* Helper variables to avoid duplication in the colors. */
     --ck-custom-background: hsl(270, 1%, 29%);

diff --git a/...s/components/post-form/ckedtior.blade.php → ...s/components/post-form/ckeditor.blade.php b/...s/components/post-form/ckedtior.blade.php → ...s/components/post-form/ckeditor.blade.php
@@ -1,5 +1,17 @@
 @props(['model', 'maxCharacters'])
 
+@assets
+  {{-- Ckeditor --}}
+  @vite('resources/ts/ckeditor/ckeditor.ts')
+
+  <style>
+    .ck-editor__editable_inline {
+      /* editing area */
+      min-height: 500px;
+    }
+  </style>
+@endassets
+
 @script
   <script>
     Alpine.data('ckeditor', () => ({
@@ -74,7 +86,7 @@
 @endscript
 
 <div
-  class="col-span-2 max-w-none"
+  class="post-body col-span-2 max-w-none"
   x-data="ckeditor"
   wire:ignore
 >

diff --git a/...nts/post-form/desktop-side-menu.blade.php → ...t-form/desktop-editor-side-menu.blade.php b/...nts/post-form/desktop-side-menu.blade.php → ...t-form/desktop-editor-side-menu.blade.php
diff --git a/resources/views/components/post-form/tagify.blade.php b/resources/views/components/post-form/tagify.blade.php
@@ -1,6 +1,8 @@
 @props(['model'])
 
 @assets
+  @vite(['resources/ts/tagify.ts', 'node_modules/@yaireo/tagify/dist/tagify.css'])
+
   {{-- custom tagify style --}}
   <style>
     .tagify-custom-look {
@@ -15,6 +17,9 @@
       --tag-text-color: #f9fafb;
       --tag-remove-btn-color: #f9fafb;
       --tag-text-color--edit: #f9fafb;
+      --input-color: #f9fafb;
+      --placeholder-color: #f9fafb;
+      --placeholder-color-focus: #f9fafb;
     }
 
     :root.dark {

diff --git a/resources/views/livewire/pages/posts/create-post-page.blade.php b/resources/views/livewire/pages/posts/create-post-page.blade.php
@@ -1,19 +1,3 @@
-@assets
-  {{-- Ckeditor --}}
-  @vite('resources/ts/ckeditor/ckeditor.ts')
-  {{-- Tagify --}}
-  @vite('resources/ts/tagify.ts')
-
-  {{-- prettier-ignore-start --}}
-  {{-- editor style --}}
-  @vite([
-    'resources/css/editor.css',
-    'node_modules/@yaireo/tagify/dist/tagify.css',
-    'resources/css/missing-content-style.css'
-  ])
-  {{-- prettier-ignore-end --}}
-@endassets
-
 {{-- create new post --}}
 <x-layouts.layout-main>
   <div class="container mx-auto">
@@ -112,7 +96,7 @@ class="form-input h-12 w-full rounded-md border border-gray-300 text-lg focus:bo
                 <x-post-form.tagify :model="'form.tags'" />
 
                 {{-- post body --}}
-                <x-post-form.ckedtior
+                <x-post-form.ckeditor
                   :model="'form.body'"
                   :max-characters="$this->form->bodyMaxCharacter"
                 />
@@ -151,7 +135,7 @@ class="h-5 w-5"
         </div>
       </div>
 
-      <x-post-form.desktop-side-menu :form-id="'create-post'" />
+      <x-post-form.desktop-editor-side-menu :form-id="'create-post'" />
     </div>
   </div>
 </x-layouts.layout-main>
diff --git a/resources/views/livewire/pages/posts/edit-post-page.blade.php b/resources/views/livewire/pages/posts/edit-post-page.blade.php
@@ -1,19 +1,3 @@
-@assets
-  {{-- Ckeditor --}}
-  @vite('resources/ts/ckeditor/ckeditor.ts')
-  {{-- Tagify --}}
-  @vite('resources/ts/tagify.ts')
-
-  {{-- prettier-ignore-start --}}
-  {{-- editor style --}}
-  @vite([
-    'resources/css/editor.css',
-    'node_modules/@yaireo/tagify/dist/tagify.css',
-    'resources/css/missing-content-style.css'
-  ])
-  {{-- prettier-ignore-end --}}
-@endassets
-
 {{-- edit post --}}
 <x-layouts.layout-main>
   <div class="container mx-auto">
@@ -112,7 +96,7 @@ class="form-input h-12 w-full rounded-md border border-gray-300 text-lg focus:bo
                 <x-post-form.tagify :model="'form.tags'" />
 
                 {{-- post body --}}
-                <x-post-form.ckedtior
+                <x-post-form.ckeditor
                   :model="'form.body'"
                   :max-characters="$this->form->bodyMaxCharacter"
                 />
@@ -151,7 +135,7 @@ class="h-5 w-5"
         </div>
       </div>
 
-      <x-post-form.desktop-side-menu :form-id="'edit-post'" />
+      <x-post-form.desktop-editor-side-menu :form-id="'edit-post'" />
     </div>
   </div>
 </x-layouts.layout-main>
diff --git a/vite.config.js b/vite.config.js
@@ -20,8 +20,6 @@ export default defineConfig({
                 // css
                 'resources/css/app.css',
                 'node_modules/@yaireo/tagify/dist/tagify.css',
-                'resources/css/editor.css',
-                'resources/css/missing-content-style.css',
                 'node_modules/highlight.js/styles/atom-one-dark.css',
             ],
             refresh: true,