feat: add initial markdown support via extra markdown component

package-lock.json

@@ -1,14 +1,18 @@
 {
 	"name": "jane",
-  "version": "0.0.0",
+	"version": "1.0.1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "jane",
-      "version": "0.0.0",
+			"version": "1.0.1",
+			"license": "GPL-3.0",
 			"dependencies": {
+				"@tailwindcss/typography": "^0.5.16",
 				"@tailwindcss/vite": "^4.0.14",
+				"dompurify": "^3.2.4",
+				"marked": "^15.0.7",
 				"tailwindcss": "^4.0.14",
 				"vue": "^3.5.13"
 			},
@@ -928,6 +932,21 @@
 				"node": ">= 10"
 			}
 		},
+		"node_modules/@tailwindcss/typography": {
+			"version": "0.5.16",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz",
+			"integrity": "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==",
+			"license": "MIT",
+			"dependencies": {
+				"lodash.castarray": "^4.4.0",
+				"lodash.isplainobject": "^4.0.6",
+				"lodash.merge": "^4.6.2",
+				"postcss-selector-parser": "6.0.10"
+			},
+			"peerDependencies": {
+				"tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+			}
+		},
 		"node_modules/@tailwindcss/vite": {
 			"version": "4.0.14",
 			"resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.0.14.tgz",
@@ -949,6 +968,13 @@
 			"integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
 			"license": "MIT"
 		},
+		"node_modules/@types/trusted-types": {
+			"version": "2.0.7",
+			"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+			"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+			"license": "MIT",
+			"optional": true
+		},
 		"node_modules/@vitejs/plugin-vue": {
 			"version": "5.2.1",
 			"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz",
@@ -1171,6 +1197,18 @@
 				"balanced-match": "^1.0.0"
 			}
 		},
+		"node_modules/cssesc": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+			"license": "MIT",
+			"bin": {
+				"cssesc": "bin/cssesc"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/csstype": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -1193,6 +1231,15 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/dompurify": {
+			"version": "3.2.4",
+			"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.4.tgz",
+			"integrity": "sha512-ysFSFEDVduQpyhzAob/kkuJjf5zWkZD8/A9ywSp1byueyuCfHamrCBa14/Oc2iiB0e51B+NpxSl5gmzn+Ms/mg==",
+			"license": "(MPL-2.0 OR Apache-2.0)",
+			"optionalDependencies": {
+				"@types/trusted-types": "^2.0.7"
+			}
+		},
 		"node_modules/enhanced-resolve": {
 			"version": "5.18.1",
 			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
@@ -1531,6 +1578,24 @@
 				"url": "https://opencollective.com/parcel"
 			}
 		},
+		"node_modules/lodash.castarray": {
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+			"integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+			"license": "MIT"
+		},
+		"node_modules/lodash.isplainobject": {
+			"version": "4.0.6",
+			"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+			"integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+			"license": "MIT"
+		},
+		"node_modules/lodash.merge": {
+			"version": "4.6.2",
+			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+			"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+			"license": "MIT"
+		},
 		"node_modules/magic-string": {
 			"version": "0.30.17",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@@ -1540,6 +1605,18 @@
 				"@jridgewell/sourcemap-codec": "^1.5.0"
 			}
 		},
+		"node_modules/marked": {
+			"version": "15.0.7",
+			"resolved": "https://registry.npmjs.org/marked/-/marked-15.0.7.tgz",
+			"integrity": "sha512-dgLIeKGLx5FwziAnsk4ONoGwHwGPJzselimvlVskE9XLN4Orv9u2VA3GWw/lYUqjfA0rUT/6fqKwfZJapP9BEg==",
+			"license": "MIT",
+			"bin": {
+				"marked": "bin/marked.js"
+			},
+			"engines": {
+				"node": ">= 18"
+			}
+		},
 		"node_modules/minimatch": {
 			"version": "9.0.5",
 			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -1622,6 +1699,19 @@
 				"node": "^10 || ^12 || >=14"
 			}
 		},
+		"node_modules/postcss-selector-parser": {
+			"version": "6.0.10",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+			"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+			"license": "MIT",
+			"dependencies": {
+				"cssesc": "^3.0.0",
+				"util-deprecate": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/rollup": {
 			"version": "4.35.0",
 			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.35.0.tgz",
@@ -1698,6 +1788,12 @@
 				"node": ">=14.17"
 			}
 		},
+		"node_modules/util-deprecate": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+			"license": "MIT"
+		},
 		"node_modules/vite": {
 			"version": "6.2.2",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.2.tgz",

package.json

@@ -21,7 +21,10 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"@tailwindcss/typography": "^0.5.16",
 		"@tailwindcss/vite": "^4.0.14",
+		"dompurify": "^3.2.4",
+		"marked": "^15.0.7",
 		"tailwindcss": "^4.0.14",
 		"vue": "^3.5.13"
 	},

src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import {ref, watchEffect} from 'vue'
+import {ref, watchEffect, nextTick} from 'vue'
 import Sidebar from './components/Sidebar.vue'
+import MarkdownEditor from './components/MarkdownEditor.vue'
 
 const STORAGE_KEY_CONFIG = 'jane-config'
 const STORAGE_KEY_NOTES = 'jane-notes'
@@ -54,6 +55,16 @@ function update_note() {
 	notes.value[noteId].content = input_content.value
 }
 
+// update note content
+function update_note_content({id, content}:any) {
+	// find the current note id in the notes array
+	let noteId = findNoteIndexById(id)
+	// set the note properties to the current input values
+	notes.value[noteId].content = content
+	// update the ref object
+	input_content.value = content
+}
+
 // set active note
 function set_active_note(id:any) {
 	// set the active note property
@@ -63,8 +74,8 @@ function set_active_note(id:any) {
 	// set the input properties to the current note
 	input_title.value = notes.value[noteId].title
 	input_content.value = notes.value[noteId].content
-	// set timeout to wait a tick to get it ready
-	setTimeout(() => { (document.querySelector('input#note-title') as HTMLInputElement)?.focus() }, 0)
+	// wait a tick and focus the input field
+	nextTick(() => { (document.querySelector('input#note-title') as HTMLInputElement)?.focus() })
 }
 
 // persist state
@@ -99,13 +110,22 @@ watchEffect(() => {
 					id="note-title"
 					class="block w-full text-3xl pb-2 font-bold border-b-2 border-gray-500 focus:border-white outline-none transition-colors duration-200"
 				/>
-				<textarea
+				<!--textarea
 					v-model="input_content"
 					@input="update_note"
 					name="note-content"
 					id="note-content"
-					class="block w-full h-full mt-4 text-lg outline-none flex-1"
-				></textarea>
+					class="block w-full h-full mt-4 text-lg flex-1"
+				></textarea-->
+
+				<MarkdownEditor
+					:active_note="active_note"
+					v-model="input_content"
+					@update-note-content="update_note_content"
+					name="note-content"
+					id="note-content"
+					class="block w-full h-full mt-4 text-lg flex-1"
+				/>
 			</div>
 		</main>
 	</div>

src/assets/markdown-test.md

@@ -0,0 +1,61 @@
+This is a long note for my test of the local persitents. This is the extended version.
+
+# maybe with some headlines?
+
+* list item 1
+* list item 2
+* list item 3
+* list item 4
+
+This is also very interesting. This for example is **bold** , and this**is**also bold and __this__ also.
+But this *is italic* and this is also _italic_ and if I want to make something ***bold and italic*** than this is.
+
+I am a bit hesitant that the next will work
+> because this is a quote
+
+but it works. Even the quote in a quote??
+> so this is a quote
+>> also is this...
+
+After the unsorted lists, there are some sorted lists as well:
+1. list item 1
+2. list item 2
+3. list item 3
+
+maybe we can mix them?
+1. list item 1
+    - list item 1.1
+1. list item
+
+---
+
+What about code?
+`` console.log('hello world') ``
+
+for code I want to extend the renderer.
+
+---
+
+lets test links:
+
+* [Duck Duck Go](https://duckduckgo.com)
+* <https://nisch.codes>
+* <info@nisch.codes>
+
+Links should also be extended
+
+---
+
+Next lets try reference links:
+
+* [Project Repository of nisch][1]
+* [License of JANE][2]
+
+[1]: https://projects.nisch.codes "gitea Server"
+[2]: https://projects.nisch.codes/nischcodes/JANE/src/branch/main/LICENSE
+
+---
+
+Images:
+
+[![An old rock in the desert](images/testimage-4k.jpg "Shiprock, New Mexico by Beau Rogers")](https://www.flickr.com/photos/beaurogers/31833779864/in/photolist-Qv3rFw-34mt9F-a9Cmfy-5Ha3Zi-9msKdv-o3hgjr-hWpUte-4WMsJ1-KUQ8N-deshUb-vssBD-6CQci6-8AFCiD-zsJWT-nNfsgB-dPDwZJ-bn9JGn-5HtSXY-6CUhAL-a4UTXB-ugPum-KUPSo-fBLNm-6CUmpy-4WMsc9-8a7D3T-83KJev-6CQ2bK-nNusHJ-a78rQH-nw3NvT-7aq2qf-8wwBso-3nNceh-ugSKP-4mh4kh-bbeeqH-a7biME-q3PtTf-brFpgb-cg38zw-bXMZc-nJPELD-f58Lmo-bXMYG-bz8AAi-bxNtNT-bXMYi-bXMY6-bXMYv)

src/components/MarkdownEditor.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref, computed, nextTick } from 'vue'
+import { marked } from 'marked'
+import DOMPurify from 'dompurify'
+
+//const model = defineModel({ default: '' })
+const props = defineProps(['active_note'])
+const emit = defineEmits(['update-note-content'])
+const markdownInput = defineModel({ default: '' })
+
+const isEditing = ref(false)
+
+// render the markdown and sanitize the result
+const renderedMarkdown = computed(() => {
+	// parse raw text into markdown
+	const rawHTML = marked.parse(markdownInput.value)
+	// sanitize the raw html from marked
+	return DOMPurify.sanitize(rawHTML as string)
+})
+
+// function to start the edit state
+function startEditing() {
+	// set the edit state to true
+	isEditing.value = true
+	// wait a tick and focus the input field
+	nextTick(() => { (document.querySelector('textarea#editor') as HTMLTextAreaElement)?.focus() })
+}
+
+// function to stop the edit state
+function stopEditing() {
+	// set the edit state to false
+	isEditing.value = false
+	// update the prop outside this component
+	emit('update-note-content', {id: props.active_note, content: markdownInput.value})
+}
+</script>
+
+<template>
+	<div>
+		<div 
+			v-if="!isEditing"
+			class="prose max-w-none w-full h-full text-lg cursor-pointer text-white prose-headings:text-white"
+			v-html="renderedMarkdown"
+			@click="startEditing"
+		></div>
+		<textarea
+			v-else
+			id="editor"
+			v-model="markdownInput"
+			@blur="stopEditing"
+			@keydown.esc.prevent="stopEditing"
+			class="w-full h-full text-lg outline-none"
+		></textarea>
+	</div>
+</template>

src/style.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 @layer components {
 	.button {