Added markdown

package.json

@@ -26,23 +26,23 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@milkdown/core": "^7.3.0",
-    "@milkdown/plugin-clipboard": "^7.3.0",
-    "@milkdown/plugin-diagram": "^7.3.0",
-    "@milkdown/plugin-emoji": "^7.3.0",
-    "@milkdown/plugin-history": "^7.3.0",
-    "@milkdown/plugin-indent": "^7.3.0",
-    "@milkdown/plugin-listener": "^7.3.0",
-    "@milkdown/plugin-math": "^7.3.0",
-    "@milkdown/plugin-prism": "^7.3.0",
-    "@milkdown/plugin-tooltip": "^7.3.0",
-    "@milkdown/plugin-upload": "^7.3.0",
-    "@milkdown/preset-commonmark": "^7.3.0",
-    "@milkdown/preset-gfm": "^7.3.0",
-    "@milkdown/prose": "^7.3.0",
-    "@milkdown/theme-nord": "^7.3.0",
+    "@milkdown/core": "^7.5.0",
+    "@milkdown/plugin-clipboard": "^7.5.0",
+    "@milkdown/plugin-diagram": "^7.5.0",
+    "@milkdown/plugin-emoji": "^7.5.0",
+    "@milkdown/plugin-history": "^7.5.0",
+    "@milkdown/plugin-indent": "^7.5.0",
+    "@milkdown/plugin-listener": "^7.5.0",
+    "@milkdown/plugin-math": "^7.5.0",
+    "@milkdown/plugin-prism": "^7.5.0",
+    "@milkdown/plugin-tooltip": "^7.5.0",
+    "@milkdown/plugin-upload": "^7.5.0",
+    "@milkdown/preset-commonmark": "^7.5.0",
+    "@milkdown/preset-gfm": "^7.5.0",
+    "@milkdown/prose": "^7.5.0",
+    "@milkdown/theme-nord": "^7.5.0",
     "@milkdown/transformer": "^7.5.0",
-    "@milkdown/vue": "^7.3.0",
+    "@milkdown/vue": "^7.5.0",
     "vee-validate": "^4.13.2",
     "vue": "^3.3.4",
     "vue-i18n": "^9.13.1"

src/components/Controls/SlideControl/SlideControl.vue

@@ -240,7 +240,6 @@
         let value = ratio * (props.max - props.min) + props.min;
         value = Math.round(value / props.step) * props.step;
         value = Math.min(Math.max(value, props.min), props.max);
-        console.log('value', value);
         emit('update:modelValue', value);
     }
 

src/components/Display/Markdown/Markdown.stories.ts

@@ -11,9 +11,7 @@ export default meta;
 
 type Story = StoryObj<typeof Markdown>;
 
-export const Default: Story = {
-    args: {
-        data: `
+const content = `
 ## Header
 
 ---
@@ -50,7 +48,26 @@ A final paragraph.
 
 [1]: http://www.google.com
 [2]: http://www.google.com/intl/en_ALL/images/logo.gif
-    `,
+`;
+
+export const Default: Story = {
+    args: {
+        data: content,
+        // Add props here
+    },
+    render: (args) => ({
+        components: { Markdown },
+        setup() {
+            return { args };
+        },
+        template: '<Markdown v-bind="args" />',
+    }),
+};
+
+export const ReadOnly: Story = {
+    args: {
+        data: content,
+        readonly: true,
         // Add props here
     },
     render: (args) => ({

src/components/Display/Markdown/Markdown.vue

@@ -9,14 +9,14 @@
         />
     </MilkdownProvider>
 </template>
-  
+
 <script lang="ts">
     import {
         ref,
         watch,
     } from 'vue';
     import MilkdownEditor from './MarkdownEditor.vue';
-    import { MilkdownProvider } from '@milkdown/vue'; 
+    import { MilkdownProvider } from '@milkdown/vue';
 
     export default {
         components: {
@@ -41,17 +41,18 @@
         },
         emits: ['update'],
         setup(props, context) {
-            const getEditorMarkdown = _ => {
-                return editorRef.value.getMarkdown();
+            const getEditorMarkdown = () => {
+                if (editorRef.value) {return editorRef.value.getMarkdown();}
+                return '';
             };
 
-            const emitUpdate = data => {
+            const emitUpdate = (data: string) => {
                 context.emit('update', data);
             };
 
-            const editorRef = ref({});
-            watch(_ => props.data, (newData, oldData) => {
-                if(editorRef.value && editorRef.value.setMarkdown) {
+            const editorRef = ref<InstanceType<typeof MilkdownEditor>>();
+            watch(() => props.data, (newData, oldData) => {
+                if (editorRef.value && editorRef.value.setMarkdown) {
                     editorRef.value.setMarkdown(newData);
                 }
             });

src/components/Display/Markdown/MarkdownEditor.vue

@@ -1,18 +1,18 @@
 <template>
     <div class="bg-white rounded overflow-auto">
         <MarkdownToolbar
-            v-if="!readonly"
+            v-show="!readonly"
             class="rounded pb-0 m-2 mb-0"
             :editor="editor"
             @toggle="setEditorType"
         />
         <Milkdown
-            v-if="state.type == 'md'"
+            v-show="state.type == 'md'"
             :class="state.editModeClasses"
             :editor="editor"
         />
         <textarea
-            v-else
+            v-show="state.type !== 'md'"
             v-model="state.markdownString"
             class="font-monospace border-0 px-5 p-4 flex-grow-1 w-100 rounded-3 bg-transparent"
             style="resize: none; outline: none;"
@@ -86,6 +86,7 @@
                 readonly,
             } = toRefs(props);
 
+            const editor = ref({});
 
             const state = reactive({
                 dirty: false,
@@ -104,19 +105,21 @@
             });
 
             // FUNCTIONS
-            const getMarkdown = _ => {
+            const getMarkdown = () => {
                 return state.markdownString;
             };
-            const setMarkdown = markdown => {
+            const setMarkdown = (markdown: string) => {
                 if (editor.value) {
+                    const markdown = getMarkdown();
                     editor.value.action(replaceAll(markdown));
                 }
             };
             const setEditorType = _ => {
                 if (state.type == 'md') {
                     state.type = 'raw';
                 } else {
-                    setMarkdown(getMarkdown());
+                    const markdown = getMarkdown();
+                    setMarkdown(markdown);
                     state.type = 'md';
                 }
             };
@@ -128,8 +131,6 @@
                 emojiSchema,
             ].flat();
 
-            const editor = ref({});
-
             useEditor((root) =>
                 editor.value = Editor.make()
                     .config((ctx) => {
@@ -165,7 +166,7 @@
             // in preview mode.
             if (!readonly.value) { usePreventNavigation(_ => state.dirty); }
 
-            watch(_ => state.markdownString, markdownString => {
+            watch(() => state.markdownString, (markdownString: string) => {
                 state.dirty = markdownString != data.value;
                 context.emit('update', markdownString);
             }

src/components/Display/Markdown/MarkdownToolbar.vue

@@ -67,6 +67,7 @@
 
     import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
     import { fa1, fa2, fa3, fa4, faBold, faH, faIndent, faItalic, faListOl, faListUl, faOutdent, faParagraph, faRedo, faStrikethrough, faUndo } from '@fortawesome/free-solid-svg-icons'
+    import { faMarkdown } from '@fortawesome/free-brands-svg-icons'
 
     import Separator from '@/components/Visuals/Separator.vue';
 
@@ -93,17 +94,17 @@
     });
 
     // FUNCTIONS
-    const command = (action, data) => {
+    const command = (action :string, data = {}) => {
         state.mde.action(callCommand(action, data));
     };
 
     const heading = i => {
         command(wrapInHeadingCommand.key, i);
     };
 
-    const toggleEditmode = _ => {
+    const toggleEditmode = () => {
         state.editMode = !state.editMode;
-        context.emit('toggle', state.editMode);
+        emit('toggle', state.editMode);
     };
 
     // As we need to dynamically change classes
@@ -223,7 +224,7 @@
         {
             name: 'editmode',
             command: _ => toggleEditmode(),
-            icon: 'fab fa-fw fa-markdown',
+            icon:  faMarkdown,
             class: markdownClass
         },
     ];

src/components/Login/Login.vue

@@ -144,7 +144,6 @@
     }
 
     const login = () => {
-        console.log('login')
         emit('login', {
             username: username.value,
             password: password.value,