feat: moved markdown file with all supported stylings to public and add global keyhandle for markdown easter egg

package.json

@@ -3,25 +3,28 @@
 	"private": true,
 	"version": "1.0.1",
 	"type": "module",
-    "description": "Just another note editor written in VUE.js for learning purposes.",
-    "homepage": "https://projects.nisch.codes/nischcodes/JANE#readme",
-    "author": "nisch.codes <nischcodes@noreply.projects.nisch.codes>",
-    "license": "GPL-3.0",
-    "keywords": [],
-    "repository": {
-        "type": "git",
-        "url": "https://projects.nisch.codes/nischcodes/JANE.git"
-    },
+	"description": "Just another note editor written in VUE.js for learning purposes.",
+	"homepage": "https://projects.nisch.codes/nischcodes/JANE#readme",
+	"author": "nisch.codes <nischcodes@noreply.projects.nisch.codes>",
+	"license": "GPL-3.0",
+	"keywords": [],
+	"repository": {
+		"type": "git",
+		"url": "https://projects.nisch.codes/nischcodes/JANE.git"
+	},
 	"bugs": {
-        "url": "https://projects.nisch.codes/nischcodes/JANE/issues"
-    },
+		"url": "https://projects.nisch.codes/nischcodes/JANE/issues"
+	},
 	"scripts": {
 		"dev": "vite",
 		"build": "vue-tsc -b && vite build",
 		"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"
 	},

public/data/markdown-test.md

@@ -0,0 +1,72 @@
+This is the testing Note for all the Markdown features.
+
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+
+---
+
+This is some text which includes **bold** text and some more __bold__ text. But also some *italic* text and more _italic_ text. There is even text with a mixture of ***bold and italic*** text.
+
+---
+
+Must texts have some quotes included, so this note also have some quotes...
+
+> This is a single quote
+
+...and quotes in quotes.
+> This is the outer quote
+>> This is a inner quote
+
+---
+
+When it comes to lists, there are quite a few.
+
+First there is the unsorted list:
+
+* list item 1
+* list item 2
+* list item 3
+
+Second there are the sorted lists:
+
+1. list item 1
+2. list item 2
+3. list item 3
+
+Lastly you can combine both types of lists:
+
+1. list item 1
+    - list item 1.1
+1. list item
+
+---
+
+Another big topic is links. You can specify the link text, or not and you can use mail-addresses to generate a mailto link.
+
+* [Nisch's projects and git server](https://projects.nisch.codes)
+* <https://nisch.codes>
+* <info@nisch.codes>
+
+Next reference links:
+
+* [JANE's Repository][1]
+* [JANE's License][2]
+
+[1]: https://projects.nisch.codes/nischcodes/JANE "JANE - git repository"
+[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)
+
+---
+
+At the end, there is Code:
+
+`` console.log('hello world') ``

src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import {ref, watchEffect} from 'vue'
+import {ref, watchEffect, nextTick, onMounted, onUnmounted} 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'
@@ -12,20 +13,48 @@ const active_note = ref(null)
 const input_title = ref('')
 const input_content = ref('')
 
+const loadMarkdown = async () => {
+	// load markdown file
+	const response = await fetch('/data/markdown-test.md')
+	// save the content
+  	let markdown = await response.text()
+    // create a new note
+	create_note('Markdown Test Note', markdown)
+}
+
+const handleKeydown = (event:any) => {
+	if (event.ctrlKey && event.shiftKey && event.key.toLowerCase() === 'm') {
+    	// prevent the default behaviour
+		event.preventDefault()
+		// some messages for the easter egg
+    	console.log('CTRL + SHIFT + M pressed!')
+		// call the load function
+		loadMarkdown()
+  	}
+}
+
+onMounted(() => { window.addEventListener('keydown', handleKeydown) })
+onUnmounted(() => { window.removeEventListener('keydown', handleKeydown) })
+
 // find note Index by Id
 function findNoteIndexById(id:any):any {
 	return notes.value.findIndex((note:any) => note.id === id)
 }
 
+// create random id
+function createRandomId():string {
+	return Math.random().toString(36).substring(2,9)
+}
+
 // create note
-function create_note() {
+function create_note(title:string = 'Untitled', content:string = '') {
 	// generate random id
-	const id = Math.random().toString(36).substring(2,9)
+	const id = createRandomId()
 	// push new note to notes array
 	notes.value.push({
 		id,
-		title: 'Untitled',
-		content: ''
+		title: title,
+		content: content
 	})
 	// set active note to id
 	set_active_note(id)
@@ -54,6 +83,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 +102,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 +138,15 @@ 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
+				
+				<MarkdownEditor
+					:active_note="active_note"
 					v-model="input_content"
-					@input="update_note"
+					@update-note-content="update_note_content"
 					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"
+				/>
 			</div>
 		</main>
 	</div>

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 prose-strong:text-white prose-em:text-white prose-blockquote:text-white prose-code:text-white prose-a:text-white marker: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 {