added markdown-editor

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index fbe1a0fd72652128c15dce7a68f4cb3efad84dc0..c11c1f8d0cfa4c1d1af3122a994eda63cfa51e1e 100644 (file)
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,10 +8,13 @@
                        "name": "dailytxt",
                        "version": "0.0.1",
                        "dependencies": {
+                               "@fortawesome/free-solid-svg-icons": "^6.7.2",
                                "@popperjs/core": "^2.11.8",
                                "axios": "^1.7.8",
                                "bootstrap": "^5.3.3",
-                               "dayjs": "^1.11.13"
+                               "dayjs": "^1.11.13",
+                               "svelte-outside": "^0.0.3",
+                               "tiny-markdown-editor": "^0.1.31"
                        },
                        "devDependencies": {
                                "@sveltejs/adapter-auto": "^3.0.0",
@@ -28,6 +31,7 @@
                                "sass": "1.77.6",
                                "svelte": "^5.0.0",
                                "svelte-check": "^4.0.0",
+                               "svelte-fa": "^4.0.3",
                                "typescript": "^5.0.0",
                                "typescript-eslint": "^8.0.0",
                                "vite": "^5.0.3"
@@ -578,6 +582,27 @@
                                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
                        }
                },
+               "node_modules/@fortawesome/fontawesome-common-types": {
+                       "version": "6.7.2",
+                       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
+                       "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+                       "license": "MIT",
+                       "engines": {
+                               "node": ">=6"
+                       }
+               },
+               "node_modules/@fortawesome/free-solid-svg-icons": {
+                       "version": "6.7.2",
+                       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
+                       "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==",
+                       "license": "(CC-BY-4.0 AND MIT)",
+                       "dependencies": {
+                               "@fortawesome/fontawesome-common-types": "6.7.2"
+                       },
+                       "engines": {
+                               "node": ">=6"
+                       }
+               },
                "node_modules/@humanfs/core": {
                        "version": "0.19.1",
                        "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1662,6 +1687,17 @@
                                "node": ">= 0.6"
                        }
                },
+               "node_modules/core-js": {
+                       "version": "3.39.0",
+                       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.39.0.tgz",
+                       "integrity": "sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==",
+                       "hasInstallScript": true,
+                       "license": "MIT",
+                       "funding": {
+                               "type": "opencollective",
+                               "url": "https://opencollective.com/core-js"
+                       }
+               },
                "node_modules/cross-spawn": {
                        "version": "7.0.6",
                        "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3331,6 +3367,22 @@
                                "url": "https://opencollective.com/eslint"
                        }
                },
+               "node_modules/svelte-fa": {
+                       "version": "4.0.3",
+                       "resolved": "https://registry.npmjs.org/svelte-fa/-/svelte-fa-4.0.3.tgz",
+                       "integrity": "sha512-saZ8yACM0k9Aexey+2NXU1W0MBosU5lBsRgqFCJKM+Taw7d0HyimPaPAjmvY/Xkyi3UwEYL/Sdu1IZJv/p0Flw==",
+                       "dev": true,
+                       "license": "MIT",
+                       "peerDependencies": {
+                               "svelte": "^4.0.0 || ^5.0.0"
+                       }
+               },
+               "node_modules/svelte-outside": {
+                       "version": "0.0.3",
+                       "resolved": "https://registry.npmjs.org/svelte-outside/-/svelte-outside-0.0.3.tgz",
+                       "integrity": "sha512-4mJttaDRXkBBL+8JqjfA1P5Ny64qmkZL3x5zELAW3tqehic3LLHvPNDcGAk8PVRooM2qUym9Oz3TfA9lO4OctA==",
+                       "license": "MIT"
+               },
                "node_modules/tiny-glob": {
                        "version": "0.2.9",
                        "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
@@ -3342,6 +3394,15 @@
                                "globrex": "^0.1.2"
                        }
                },
+               "node_modules/tiny-markdown-editor": {
+                       "version": "0.1.31",
+                       "resolved": "https://registry.npmjs.org/tiny-markdown-editor/-/tiny-markdown-editor-0.1.31.tgz",
+                       "integrity": "sha512-rCjxSyiytrJOmDpAdRKhw/9XFw5uUaW3kbfb5dop5JwWAka0386tSO3HUswOTQpX7W5bFlpkCKyKMS+XsBKa+w==",
+                       "license": "MIT",
+                       "dependencies": {
+                               "core-js": "^3.6.5"
+                       }
+               },
                "node_modules/to-regex-range": {
                        "version": "5.0.1",
                        "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

diff --git a/frontend/package.json b/frontend/package.json
index 186d2f3127ecb901086ee4337038be22f83602ab..19ad3006cb1d2a70cea2ef002f40dd6cd13dbe18 100644 (file)
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,14 +26,18 @@
                "sass": "1.77.6",
                "svelte": "^5.0.0",
                "svelte-check": "^4.0.0",
+               "svelte-fa": "^4.0.3",
                "typescript": "^5.0.0",
                "typescript-eslint": "^8.0.0",
                "vite": "^5.0.3"
        },
        "dependencies": {
+               "@fortawesome/free-solid-svg-icons": "^6.7.2",
                "@popperjs/core": "^2.11.8",
                "axios": "^1.7.8",
                "bootstrap": "^5.3.3",
-               "dayjs": "^1.11.13"
+               "dayjs": "^1.11.13",
+               "svelte-outside": "^0.0.3",
+               "tiny-markdown-editor": "^0.1.31"
        }
 }

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 5b1ea3eb4a301d920c3a0fd5958f1dc15c749c75..71a889031b7535f721e3f0e4f83532c530c8f9b0 100644 (file)
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -8,6 +8,8 @@
        import { goto } from '$app/navigation';
        import { onMount } from 'svelte';
        import { searchString, searchResults } from '$lib/searchStore.js';
+       import * as TinyMDE from 'tiny-markdown-editor';
+       import '../../node_modules/tiny-markdown-editor/dist/tiny-mde.css';
 
        let API_URL = dev
                ? `${window.location.origin.replace(/:5173.*$/gm, '')}:8000`
@@ -43,8 +45,27 @@
                }
        );
 
+       let tinyMDE;
        onMount(() => {
+               tinyMDE = new TinyMDE.Editor({ element: 'editor', content: '' });
+               let commandBar = new TinyMDE.CommandBar({ element: 'toolbar', editor: tinyMDE });
+               document.getElementsByClassName('TinyMDE')[0].classList.add('focus-ring');
+
+               tinyMDE.addEventListener('change', (event) => {
+                       currentLog = event.content;
+                       handleInput();
+               });
+
                getLog();
+               loadMarkedDays();
+       });
+
+       $effect(() => {
+               if (currentLog !== savedLog) {
+                       document.getElementsByClassName('TinyMDE')[0].classList.add('notSaved');
+               } else {
+                       document.getElementsByClassName('TinyMDE')[0].classList.remove('notSaved');
+               }
        });
 
        let lastSelectedDate = $state($selectedDate);
@@ -74,7 +95,7 @@
                }
        });
 
-       let lastMonth = $cal.currentMonth;
+       let lastMonth = $cal.currentMonth - 1;
        let lastYear = $cal.currentYear;
        let isLoadingMarkedDays = false;
        function loadMarkedDays() {
@@ -171,6 +192,10 @@
 
                        currentLog = response.data.text;
                        savedLog = currentLog;
+
+                       tinyMDE.setContent(currentLog);
+                       tinyMDE.setSelection({ row: 0, col: 0 });
+
                        logDateWritten = response.data.date_written;
 
                        return true;
@@ -185,6 +210,10 @@
        }
 
        async function saveLog() {
+               if (currentLog === savedLog) {
+                       return true;
+               }
+
                // axios to backend
                let date_written = new Date().toLocaleString('de-DE', {
                        timeZone: 'Europe/Berlin',
@@ -308,12 +337,16 @@
                                <div class="textAreaHistory">history</div>
                                <div class="textAreaDelete">delete</div>
                        </div>
-                       <textarea
+                       <!-- <textarea
                                bind:value={currentLog}
                                oninput={handleInput}
                                class="form-control {currentLog !== savedLog ? 'notSaved' : ''}"
                                rows="10"
-                       ></textarea>
+                       ></textarea> -->
+                       <div id="log" class="focus-ring">
+                               <div id="toolbar"></div>
+                               <div id="editor"></div>
+                       </div>
                        {$selectedDate}<br />
                        {lastSelectedDate}
                </div>
@@ -361,6 +394,38 @@
 </div>
 
 <style>
+       :global(.TMCommandBar) {
+               border-top: 1px solid #ccc;
+               border-left: 1px solid #ccc;
+               border-right: 1px solid #ccc;
+       }
+
+       #editor {
+               height: 400px;
+       }
+
+       :global(.TinyMDE) {
+               border: 1px solid lightgreen;
+
+               border-bottom-left-radius: 5px;
+               border-bottom-right-radius: 5px;
+               overflow-y: auto;
+
+               transition: all ease 0.2s;
+       }
+
+       :global(.TinyMDE:focus:not(.notSaved)) {
+               box-shadow: 0 0 0 0.25rem #90ee9070;
+       }
+
+       :global(.TinyMDE:focus.notSaved) {
+               box-shadow: 0 0 0 0.25rem #f57c0030;
+       }
+
+       :global(.TinyMDE.notSaved) {
+               border-color: #f57c00;
+       }
+
        .sidenav {
                /* max-width: 430px; */
                width: 380px;
@@ -386,11 +451,11 @@
                /* border-color: #ff9800; */
        }
 
-       textarea:focus.notSaved {
+       #log:focus.notSaved {
                box-shadow: 0 0 0 0.25rem #f57c0030;
        }
 
-       textarea:focus:not(.notSaved) {
+       #log div:focus:not(.notSaved) {
                border-color: #90ee90;
                box-shadow: 0 0 0 0.25rem #90ee9070;
        }