From 2e4549ebd7a4b64b5d930667b5914f64b39cff71 Mon Sep 17 00:00:00 2001
From: Tomas Mirchev <contact@tomastm.com>
Date: Mon, 30 Jun 2025 17:06:21 +0000
Subject: [PATCH] better design edit page

---
 reader/src/ResourcePage.jsx | 47 ++++++++++++++++++-------------------
 1 file changed, 23 insertions(+), 24 deletions(-)

diff --git a/reader/src/ResourcePage.jsx b/reader/src/ResourcePage.jsx
index 69c0509..a790c14 100644
--- a/reader/src/ResourcePage.jsx
+++ b/reader/src/ResourcePage.jsx
@@ -33,7 +33,7 @@ function SelectResource({ topics, selectedTopic, selectedResource, onChange, dis
   return (
     <div>
       {/* File Selector */}
-      <div className="bg-white border-b border-gray-200 p-2 flex space-x-6">
+      <div className="bg-white border-b border-b-2 border-gray-200 p-2 flex space-x-6">
         <div className="flex items-center">
           <label htmlFor="topicSelect" className="block mr-2 text-sm font-medium text-gray-700 ">
             Избери тема:
@@ -262,7 +262,7 @@ const ResourcePage = ({ topics }) => {
 
   // Main content screen
   return (
-    <div className="min-h-screen bg-gray-50 flex flex-col">
+    <div className="h-dvh flex flex-col">
       <SelectResource
         topics={topics}
         selectedTopic={selectedTopic}
@@ -275,37 +275,36 @@ const ResourcePage = ({ topics }) => {
       />
 
       {message.status === "error" && (
-        <div className="text-lg p-12 text-red-600 bg-gray-200">
+        <div className="text-lg p-12 text-red-600 bg-gray-200 border-b border-gray-200 ">
           <pre>{message.text}</pre>
         </div>
       )}
 
       {/* Content Editor */}
-      <div className="flex-1 bg-white p-2 flex flex-col">
-        <div className="flex-1 h-full flex space-x-2">
-          <div className="flex-1 flex flex-col">
-            <textarea
-              id="content"
-              disabled={isLoading || isSavingLoading}
-              value={content || ""}
-              onChange={(e) => setContent(e.target.value)}
-              className="w-full h-full min-h-full flex-1 items-stretch resize-none px-3 py-2 bg-gray-100 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono text-sm"
-              placeholder="Въведете вашето Markdown съдържание тук..."
-            />
-          </div>
-          <div className="flex-1 w-full min-h-full overflow-hidden px-3 py-2 border border-gray-300 rounded-md">
-            <iframe
-              srcDoc={htmlContent}
-              title="MD Content"
-              className="w-full h-full border-0"
-              allow="fullscreen"
-            />
-          </div>
+      <div className="flex-1 overflow-scroll">
+        <div className="min-h-full flex">
+          <div
+            contentEditable={!isLoading && !isSavingLoading}
+            suppressContentEditableWarning={true}
+            onInput={(e) => setContent(e.currentTarget.textContent || "")}
+            className="flex-1 min-h-full px-3 py-2 bg-gray-100 border-r border-gray-300 outline-none font-mono text-sm whitespace-pre-wrap"
+            ref={(el) => {
+              if (el && el.textContent !== content) {
+                el.textContent = content || "";
+              }
+            }}
+          />
+          <iframe
+            srcDoc={htmlContent}
+            title="MD Content"
+            className="flex-1 min-h-full"
+            allow="fullscreen"
+          />
         </div>
       </div>
 
       {/* Bottom Actions */}
-      <div className="bg-white border-t border-gray-200 p-2 flex justify-between">
+      <div className="border-t border-t-2 border-gray-200 p-2 flex justify-between">
         <div className="flex flex-wrap gap-3">
           <button
             onClick={handleCopyContent}