From b867a863c65ae4f161e6928cb0cc98709e877b92 Mon Sep 17 00:00:00 2001
From: Richard Emijere <67247138+The-CodeINN@users.noreply.github.com>
Date: Mon, 23 Dec 2024 07:57:37 +0100
Subject: [PATCH] Enhance word editor with resizing and responsiveness

Implement a resizable pane functionality for the word editor.

* Add a custom hook `useResizablePanes` in `src/lib/hooks/use-resizable-panes.js` to handle resizing functionality.
* Import the custom hook in `src/components/islands/word-editor.jsx` and use it to manage the resizing functionality.
* Add a draggable handle between the Editor and Preview panes in `src/components/islands/word-editor.jsx`.
* Update the CSS in `src/base.css` to style the draggable handle and ensure proper resizing behavior.
---
 src/base.css                           | 14 +++++++++++-
 src/components/islands/word-editor.jsx | 14 +++++++++---
 src/lib/hooks/use-resizable-panes.js   | 31 ++++++++++++++++++++++++++
 3 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/hooks/use-resizable-panes.js

diff --git a/src/base.css b/src/base.css
index 064dd6c..21c858c 100644
--- a/src/base.css
+++ b/src/base.css
@@ -26,4 +26,16 @@ a:hover {
 }
 .scrollbar::-webkit-scrollbar {
   width: 5px;
-}
\ No newline at end of file
+}
+
+.resizer {
+  cursor: col-resize;
+  width: 5px;
+  background-color: #ccc;
+}
+
+.editor-pane,
+.preview-pane {
+  flex: 1;
+  overflow: auto;
+}
diff --git a/src/components/islands/word-editor.jsx b/src/components/islands/word-editor.jsx
index baa34a3..17a478c 100644
--- a/src/components/islands/word-editor.jsx
+++ b/src/components/islands/word-editor.jsx
@@ -5,12 +5,14 @@ import useRouter from "../../lib/hooks/use-router.js";
 import { capitalizeText } from "../../lib/utils/index.js";
 import useWordEditor from "../../lib/hooks/use-word-editor.js";
 import { $isWordSubmitLoading, $isWordSubmitted, $togglePreview } from "../../lib/stores/dictionary.js";
+import useResizablePanes from "../../lib/hooks/use-resizable-panes.js";
 
 /**
  * Main Word Editor Component - Island
  */
 export default function WordEditor({ title = "", content = "", metadata = {}, action }) {
   const togglePreview = useStore($togglePreview);
+  const { editorWidth, previewWidth, handleMouseDown } = useResizablePanes();
 
   return (
     <div className="w-full flex border rounded-lg">
@@ -20,9 +22,15 @@ export default function WordEditor({ title = "", content = "", metadata = {}, ac
         eContent={content} 
         eMetadata={metadata}
         className={` ${ !togglePreview ? "flex" : "hidden" } w-full h-full lg:!flex flex-col p-5 border-r`}
+        style={{ width: `${editorWidth}%` }}
       />
-      <Preview className="w-full h-full hidden lg:flex flex-col p-5" />
-      <Preview className={`${ togglePreview ? "flex" : "hidden" } w-full h-full lg:!hidden flex-col p-5`} />
+      <div
+        className="resizer"
+        onMouseDown={handleMouseDown}
+        style={{ cursor: "col-resize", width: "5px", backgroundColor: "#ccc" }}
+      />
+      <Preview className="w-full h-full hidden lg:flex flex-col p-5" style={{ width: `${previewWidth}%` }} />
+      <Preview className={`${ togglePreview ? "flex" : "hidden" } w-full h-full lg:!hidden flex-col p-5`} style={{ width: `${previewWidth}%` }} />
     </div>
   );
 }
@@ -239,4 +247,4 @@ const DummyPreviewNavbar = () => (
       </div>
     </nav>
   </div>
-);
\ No newline at end of file
+);
diff --git a/src/lib/hooks/use-resizable-panes.js b/src/lib/hooks/use-resizable-panes.js
new file mode 100644
index 0000000..cea5ee3
--- /dev/null
+++ b/src/lib/hooks/use-resizable-panes.js
@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react';
+
+export default function useResizablePanes() {
+  const [paneWidths, setPaneWidths] = useState({ editor: 50, preview: 50 });
+
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      const newEditorWidth = (e.clientX / window.innerWidth) * 100;
+      const newPreviewWidth = 100 - newEditorWidth;
+      setPaneWidths({ editor: newEditorWidth, preview: newPreviewWidth });
+    };
+
+    const handleMouseUp = () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    const handleMouseDown = () => {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    };
+
+    document.addEventListener('mousedown', handleMouseDown);
+
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown);
+    };
+  }, []);
+
+  return paneWidths;
+}