Milkdown Editor

• ProseMirror 기반의 WYSIWYG 에디터
• 플러그인 설치 후 해당 플러그인을 use로 갖다대는 방식으로 사용할 수 있게 만든다.

Plug-In

• history

  • undo, redo 가능하게 한다.

• commonmark

  • 드래그 후 cmd + b 등의 동작을 지원해준다.

milkdown 사용 방법

• ctx set

.config((ctx) => {
    ctx.set(rootCtx, document.querySelector('header'));
    
})

ctx를 적을? root를 설정한다. 설정하지 않으면 기본적으로 root가document.body로 설정된다.

• default value

import { defaultValueCtx } from '@milkdown/core';

const defaultValue = '# Hello milkdown';
Editor.make().config((ctx) => {
    ctx.set(defaultValueCtx, defaultValue);
});

에디터를 켰을 때 기본적으로 어떤 것이 나올지 설정해준다.

• rendering html

...

<div id="pre">
    <h1>Hello milkdown!</h1>
</div>

...

import { defaultValueCtx } from '@milkdown/core';

const defaultValue = {
    type: 'html',
    dom: document.querySelector('#pre'),
};
Editor.make().config((ctx) => {
    ctx.set(defaultValueCtx, defaultValue);
});

html도 위와 같이 렌더링이 가능하다.

• Markdown Listener

import { listener, listenerCtx } from '@milkdown/plugin-listener';

let output = '';

Editor.make()
    .config((ctx) => {
        ctx.get(listenerCtx).markdownUpdated((ctx, markdown, prevMarkdown) => {
            output = markdown;
        });
    })
    .use(listener);

markdown이 업데이트되면, 즉 사용자가 업데이트할 때마다 어떤 값이 적혀졌는지, 바로 앞 전의 값은 무엇이었는지 알 수 있게 된다.

• Doc Listener

import { listener, listenerCtx } from '@milkdown/plugin-listener';

let jsonOutput;

Editor.make()
    .config((ctx) => {
        ctx.get(listenerCtx).updated((ctx, doc, prevDoc) => {
            jsonOutput = doc.toJSON();
        });
    })
    .use(listener);

document node 값을 얻을 수 있다.

• ReadOnly Mode

import { editorViewOptionsCtx } from '@milkdown/core';

let readonly = false;

const editable = () => !readonly;

Editor.make().config((ctx) => {
    ctx.set(editorViewOptionsCtx, { editable });
});

// set to readonly after 5 secs.
setTimeout(() => {
    readonly = true;
}, 5000);

• editor를 readonly 모드로 변환한다.
  • 만드려는 editor의 속성에 editable을 추가한다.
  • 위 코드의 경우는, 5초 뒤 editable 함수를 실행하여 readonly를 true로 바꾼다.
• 이러면 변경은 불가하고 읽을 수 밖에 없는 editor가 된다.

• Using Action

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

async function playWithEditor() {
    const editor = await Editor.make().use(commonmark).create();

    const getMarkdown = () =>
        editor.action((ctx) => {
            const editorView = ctx.get(editorViewCtx);
            const serializer = ctx.get(serializerCtx);
            return serializer(editorView.state.doc);
        });

    // get markdown string:
    getMarkdown();
}

??? 어떻게 쓰는거지