change defaultValue programmatically about milkdown

[sytolk]

Works for React like that. Thanks @Saul-Mirone but this example miss me in docs

import { Slice } from "prosemirror-model";

const MilkdownEditor: React.FC = () => {
  const editorRef = useRef<EditorRef | null>(null);
  const [isContentLoaded, setContentLoaded] = useState<boolean>(false);

const editor = useEditor(
      (root) => {
        return new Editor()
            .config((ctx) => {
                ctx.set(rootCtx, root);
                ctx.set(defaultValueCtx, "Default value");
            })
            .use(commonmark)
            .use(clipboard)
            .use(listener)
            .use(history);
      },
      [],
  );

useEffect(() => {
   if (editorRef.current) {
      const editor = editorRef.current.get();
      if (editor) {
        editor.action((ctx: Ctx) => {
          const view = ctx.get(editorViewCtx);
          const parser = ctx.get(parserCtx);
          const doc = parser('Content changed !!!');
          if (!doc) return;
          const state = view.state;
          view.dispatch(
            state.tr.replace(
              0,
              state.doc.content.size,
              new Slice(doc.content, 0, 0)
            )
          );
        });
      }
    }
},[isContentLoaded])

  return <ReactEditor ref={editorRef} editor={editor} />;
};

export default MilkdownEditor;

[abhinandshibu]

You can use the action feature, you can find example here, and here for a very simple vue example.

Unfortunately these links don't work anymore, is it possible for them to be updated?

For anyone else coming across this and trying to extract and set the state for react:

import { replaceAll, getMarkdown } from '@milkdown/utils';

const { get } = useEditor(...);

let editor = get();
editor?.action(replaceAll('# The markdown I am replacing it with'));
let myContent = editor?.action(getMarkdown());

Also this is useful:
https://milkdown.dev/docs/api/utils#macros

[Saul-Mirone]

You can use the action feature, you can find example here, and here for a very simple vue example.

[Saul-Mirone]

Let me add this in doc.

[Saul-Mirone]

I found a problem with this method. It doesn't preserve new lines like \n\n\n\n\n. I think remark removes them.

Is there a known solution?

That's how markdown syntax works and handled by remark, if you want to change this behavior, you need to write a remark plugin to do this.

[danieldaeschle]

I found a problem with this method. It doesn't preserve new lines like \n\n\n\n\n. I think remark removes them.

Is there a known solution?

[sytolk]

@danieldaeschle its not a perfect solution (extra <div> is added) but you can try to create custom component for node: https://github.com/Saul-Mirone/milkdown/blob/main/gh-pages/pages/integrations/react/index.md#custom-component-for-node

with plugin is more complicated.. I have try to change onClick in link with a plugin without success: https://github.com/tagspaces/tagspaces-extensions/blob/Migrate-to-md-editor-extension-to-use-react/md-editor/src/App.tsx#L289

The problem is that plugin receive prosemirror nodes param and dont have access to DOM

[DogeVenci]

Is there an example of vue？

[Saul-Mirone]

Is there an example of vue？

Sure, here it is

https://codesandbox.io/s/milkdown-vue-update-ti4zb

[duhaime]

@sytolk in your example above where are editorViewCtx and parserCtx defined?

edit, oh:

import { editorViewCtx, parserCtx, serializerCtx } from '@milkdown/core';

[Saul-Mirone]

#288 Link for track

[solos]

Is there an example of angular？