How to clear / change markdown input content

[underdoeg]

How can you set markdown or just clear all data after the editor was created? setting defaultValueCtx again does not set the content. (which makes sense)

[Saul-Mirone]

https://codesandbox.io/s/milkdown-vue-update-ti4zb
Here is a simple example.

[underdoeg]

thank you

[echarles]

Here is a simple example.

Would it be possible to get similar example for react? (the linked on is for vue).

BTW I have seen other project linking to codesandbox, which is great, but at the end, those very useful example are getting lost, or not findable, after some time. Would it make sense to start at least listing them in the main repository?

[axsann]

The original link seems to have been deleted. I found a fork so I put it on.

https://codesandbox.io/s/ew54e2?file=/src/components/Milkdown.vue

<template>
  hi
  <VueEditor :editor="editor" :editorRef="editorRef" />
  <button @click="onClick">click to update</button>
</template>

<script>
import { defineComponent, ref } from "vue";
import {
  Editor,
  rootCtx,
  defaultValueCtx,
  editorViewCtx,
  parserCtx,
} from "@milkdown/core";
import { nord } from "@milkdown/theme-nord";
import { VueEditor, useEditor } from "@milkdown/vue";
import { commonmark } from "@milkdown/preset-commonmark";
import { Slice } from "prosemirror-model";

export default defineComponent({
  name: "Milkdown",
  components: {
    VueEditor,
  },
  setup: () => {
    const editorRef = ref({});

    const editor = useEditor((root) =>
      Editor.make()
        .config((ctx) => {
          ctx.set(rootCtx, root);
          ctx.set(defaultValueCtx, "# Milkdown 💖 Vue");
        })
        .use(nord)
        .use(commonmark)
    );

    return {
      editor,
      editorRef,
    };
  },
  methods: {
    onClick() {
      console.log(this.editorRef.value);
      const editor = this.editorRef.value.get();
      editor.action((ctx) => {
        const view = ctx.get(editorViewCtx);
        const parser = ctx.get(parserCtx);
        const doc = parser("# Anothor markdown content");
        if (!doc) return;
        const state = view.state;
        view.dispatch(
          state.tr.replace(
            0,
            state.doc.content.size,
            new Slice(doc.content, 0, 0)
          )
        );
      });
    },
  },
});
</script>
<style>
</style>