From: PhiTux Date: Mon, 6 Jan 2025 17:12:39 +0000 (+0100) Subject: added markdown-editor X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=d859be31d2666469511060fd4eb196106032c589;p=DailyTxT.git added markdown-editor --- diff --git a/frontend/package-lock.json b/frontend/package-lock.json index fbe1a0f..c11c1f8 100644 --- 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 186d2f3..19ad300 100644 --- 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 5b1ea3e..71a8890 100644 --- 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 @@
history
delete
- + > --> +
+
+
+
{$selectedDate}
{lastSelectedDate} @@ -361,6 +394,38 @@