Add Markdown

package.json

@@ -14,6 +14,7 @@
 	},
 	"devDependencies": {
 		"@material/material-color-utilities": "^0.2.7",
+		"@traptitech/markdown-it-katex": "^3.6.0",
 		"@types/wicg-file-system-access": "^2020.9.6",
 		"@typescript-eslint/eslint-plugin": "^6.7.0",
 		"@typescript-eslint/parser": "^6.7.0",
@@ -29,6 +30,11 @@
 		"eslint-plugin-unused-imports": "^3.0.0",
 		"eslint-plugin-vue": "^9.17.0",
 		"fast-fuzzy": "^1.12.0",
+		"markdown-it": "^13.0.2",
+		"markdown-it-anchor": "^8.6.7",
+		"markdown-it-deflist": "^2.1.0",
+		"markdown-it-footnote": "^3.0.3",
+		"markdown-it-toc-done-right": "^4.2.0",
 		"monaco-editor": "^0.43.0",
 		"monaco-themes": "^0.4.4",
 		"paper": "^0.12.17",

src/components/App.vue

@@ -338,7 +338,7 @@ window.addEventListener('drop', async e => {
 
 <template>
 	<div class="App">
-		<CommandPalette />
+		<Tq.CommandPalette />
 		<Tq.TitleBar name="Paper.js Editor" class="title" icon="favicon.svg">
 			<template #left>
 				{{ title }}

src/tweeq/Markdown/Markdown.vue

@@ -0,0 +1,92 @@
+<script lang="ts">
+// Forked from: https://github.com/JanGuillermo/vue3-markdown-it
+
+import './katex.css'
+
+import MarkdownItKatex from '@traptitech/markdown-it-katex'
+import MarkdownIt from 'markdown-it'
+import MarkdownItAnchor from 'markdown-it-anchor'
+import MarkdownItDeflist from 'markdown-it-deflist'
+import MarkdownItFootnote from 'markdown-it-footnote'
+import MarkdownItTOC, {TocOptions} from 'markdown-it-toc-done-right'
+import {defineComponent, h, onMounted, PropType, ref, watch} from 'vue'
+
+// import MarkdownItMonacoHighlight from './markdown-it-monaco-highlight'
+
+export default defineComponent({
+	name: 'MarkdownIt',
+	props: {
+		source: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Options for MarkdownItAnchor plugin
+		 */
+		anchor: {
+			type: Object as PropType<MarkdownItAnchor.AnchorOptions>,
+			default: () => ({}),
+		},
+		/**
+		 * Convert '\n' in paragraphs into <br>
+		 */
+		breaks: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Enable HTML tags in source
+		 */
+		html: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * CSS language prefix for fenced blocks. Can be useful for external highlighters.
+		 */
+		langPrefix: {
+			type: String,
+			default: 'language-',
+		},
+		/**
+		 * Autoconvert URL-like text to links
+		 */
+		linkify: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Options for MarkdownItTOC plugin
+		 */
+		toc: {
+			type: Object as PropType<TocOptions>,
+			default: () => ({}),
+		},
+	},
+	setup(props: any) {
+		const md = ref()
+		const renderMarkdown = () => {
+			const markdown = new MarkdownIt()
+				.use(MarkdownItAnchor, props.anchor)
+				.use(MarkdownItDeflist)
+				.use(MarkdownItFootnote)
+				.use(MarkdownItKatex)
+				// .use(MarkdownItMonacoHighlight)
+				.use(MarkdownItTOC, props.toc)
+				.set({
+					breaks: props.breaks,
+					html: props.html,
+					langPrefix: props.langPrefix,
+					linkify: props.linkify,
+				})
+
+			md.value = markdown.render(props.source)
+		}
+
+		onMounted(() => renderMarkdown())
+		watch(props, renderMarkdown)
+
+		return () => h('entry', {class: ['MarkdownIt'], innerHTML: md.value})
+	},
+})
+</script>

src/tweeq/Markdown/MarkdownItMonacoHighlight.ts

@@ -0,0 +1,33 @@
+// import {invoke} from '@vueuse/core'
+// import _ from 'lodash'
+// import MarkdownIt from 'markdown-it'
+// import {editor} from 'monaco-editor'
+
+// import {useMonacoEditor} from '../MonacoEditor'
+
+// const MarkdownItMonacoHighlight = (md: MarkdownIt) => {
+// 	useMonacoEditor()
+
+// 	const temp = md.renderer.rules.fence?.bind(md.renderer.rules)
+
+// 	if (!temp) throw new Error('Cannot retrieve fence function from MarkdownIt')
+
+// 	md.renderer.rules.fence = (tokens, idx, options, env, slf) => {
+// 		const token = tokens[idx]
+// 		const code = token.content.trim()
+
+// 		const uid = _.uniqueId('Markdown__highlight_')
+// 		token.attrPush(['id', uid])
+
+// 		invoke(async () => {
+// 			editor.setTheme('custom-theme')
+// 			const html = await editor.colorize(code, 'glsl', {})
+// 			const el = document.getElementById(uid)
+// 			if (el) el.innerHTML = html
+// 		})
+
+// 		return temp(tokens, idx, options, env, slf)
+// 	}
+// }
+
+// export default MarkdownItMonacoHighlight

src/tweeq/Markdown/index.ts

@@ -0,0 +1,3 @@
+import Markdown from './Markdown.vue'
+
+export default Markdown