Add Milkdown editor

package.json

@@ -9,6 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@milkdown/core": "^7.1.0",
+    "@milkdown/ctx": "^7.1.0",
+    "@milkdown/preset-commonmark": "^7.1.0",
+    "@milkdown/prose": "^7.1.0",
+    "@milkdown/theme-nord": "^7.1.0",
+    "@milkdown/transformer": "^7.1.0",
+    "@milkdown/vue": "^7.1.0",
     "masto": "^5.10.0",
     "vue": "^3.2.45"
   },

src/App.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+import Milkdown from './components/Milkdown/MilkdownEditor.vue'
+import { MilkdownProvider } from '@milkdown/vue';
+</script>
+
 <template>
-  <h2>App</h2>
+  <MilkdownProvider>
+    <Milkdown />
+  </MilkdownProvider>
 </template>

src/components/Milkdown/MilkdownEditor.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Milkdown, useEditor } from '@milkdown/vue';
+import { defaultValueCtx, Editor, rootCtx } from '@milkdown/core';
+import { nord } from '@milkdown/theme-nord'
+import { commonmark } from '@milkdown/preset-commonmark'
+
+const markdown =
+`# Milkdown Vue Commonmark
+
+> You're scared of a world where you're needed.
+
+This is a demo for using Milkdown with **Vue**.`
+
+useEditor((root) => {
+  return Editor.make()
+    .config(nord)
+    .config((ctx) => {
+      ctx.set(rootCtx, root)
+      ctx.set(defaultValueCtx, markdown)
+    })
+    .use(commonmark)
+})
+</script>
+
+<template>
+  <Milkdown />
+</template>

src/components/Milkdown/MilkdownEditorWrapper.vue

@@ -0,0 +1,20 @@
+<script>
+import { defineComponent } from 'vue'
+import { MilkdownProvider } from '@milkdown/vue'
+
+export default defineComponent({
+  name: 'MilkdownEditorWrapper',
+  components: {
+    MilkdownProvider,
+    MilkdownEditor,
+  },
+  setup: () => {},
+})
+</script>
+
+<template>
+  <MilkdownProvider>
+    <MilkdownEditor />
+  </MilkdownProvider>
+</template>
+

src/style.css

@@ -1,80 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

vite.config.ts

@@ -5,3 +5,4 @@ import vue from '@vitejs/plugin-vue'
 export default defineConfig({
   plugins: [vue()],
 })
+