Merge pull request #451 from pinkary-project/feat/remember-post

feat: remember posts
pinkary-project · Jul 29, 2024 · d6b6573 · d6b6573
2 parents d5e84d1 + 6712331
commit d6b6573
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 19 deletions.
diff --git a/app/Livewire/Questions/Create.php b/app/Livewire/Questions/Create.php
@@ -148,6 +148,14 @@ public function maxContentLength(): int
         return $this->isSharingUpdate ? 1000 : 255;
     }
 
+    #[Computed]
+    public function draftKey(): string
+    {
+        return $this->parentId !== null && $this->parentId !== '' && $this->parentId !== '0'
+            ? "reply_{$this->parentId}"
+            : 'post_new';
+    }
+
     /**
      * Refresh the component.
      */

diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
         "@tailwindcss/forms": "^0.5.2",
         "@tailwindcss/typography": "^0.5.12",
         "alpinejs-notify": "^1.0.3",
+        "autosize": "^6.0.1",
         "autoprefixer": "^10.4.19",
         "axios": "^1.6.8",
         "highlight.js": "^11.9.0",

diff --git a/resources/js/app.js b/resources/js/app.js
@@ -1,5 +1,5 @@
 import './bootstrap'
-
+import autosize from 'autosize';
 import focus from '@alpinejs/focus'
 import notifications from 'alpinejs-notify'
 import Sortable from 'sortablejs'
@@ -26,15 +26,10 @@ Alpine.directive('sortable', (el) => {
 })
 
 Alpine.directive('autosize', (el) => {
-    const offset = (el.offsetHeight - el.clientHeight) + 8
-    const resize = () => {
-        el.style.height = 'auto';
-        el.style.height = el.scrollHeight + offset + 'px';
-    };
-
-    el.addEventListener('input', resize);
-    el.resize = resize;
-})
+    if (el) {
+        autosize(el);
+    }
+});
 
 import { shareProfile } from './share-profile.js'
 Alpine.data('shareProfile', shareProfile)

diff --git a/resources/views/livewire/questions/create.blade.php b/resources/views/livewire/questions/create.blade.php
@@ -14,16 +14,29 @@ class="mb-12 pt-4"
                 maxFileSize = {{ $this->maxFileSize }};
             }'
             class="relative group/menu">
-            <x-textarea
-                wire:model="content"
-                placeholder="{{ $this->placeholder }}"
-                maxlength="{{ $this->maxContentLength }}"
-                rows="3"
-                required
-                x-autosize
-                x-ref="content"
-            />
+                <div x-data="{ content: $persist($wire.entangle('content')).as('{{ $this->draftKey }}') }">
+                    <x-textarea
+                        x-model="content"
+                        placeholder="{{ $this->placeholder }}"
+                        maxlength="{{ $this->maxContentLength }}"
+                        rows="3"
+                        required
+                        x-autosize
+                        x-ref="content"
+                    />
+                </div>
 
+                <div class="absolute top-0 right-0 mt-2 mr-2 group-hover/menu:inline-block hidden">
+                    <button
+                        title="Upload an image"
+                        x-ref="imageButton"
+                        :disabled="uploading || images.length >= uploadLimit"
+                        class="rounded-lg bg-slate-800 text-sm text-slate-400 p-1.5 hover:text-pink-500"
+                        :class="{'cursor-not-allowed text-pink-500': uploading || images.length >= uploadLimit}"
+                    >
+                        <x-heroicon-o-camera class="h-5 w-5"/>
+                    </button>
+                </div>
             <div
                 class="absolute top-0 right-0 mt-2 mr-2 group-hover/menu:inline-block hidden">
                 <button title="Upload an image" x-ref="imageButton"