58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
|
import { defaultValueCtx, Editor, rootCtx } from '@milkdown/core';
|
||
|
|
import { html } from 'atomico';
|
||
|
|
import { listItemBlockComponent, listItemBlockConfig, ListItemBlockConfig, listItemBlockView } from '@milkdown/components/list-item-block'
|
||
|
|
import { commonmark } from '@milkdown/preset-commonmark';
|
||
|
|
import { gfm } from '@milkdown/preset-gfm';
|
||
|
|
import { nord } from '@milkdown/theme-nord'
|
||
|
|
import { listener, listenerCtx } from '@milkdown/plugin-listener';
|
||
|
|
import '@milkdown/theme-nord/style.css'
|
||
|
|
|
||
|
|
const markdown =
|
||
|
|
`# Milkdown Vanilla Commonmark
|
||
|
|
|
||
|
|
> You're scared of a world where you're needed.
|
||
|
|
|
||
|
|
This is a demo for using Milkdown with **Vanilla Typescript**.
|
||
|
|
|
||
|
|
- A list
|
||
|
|
- [ ] Something to do
|
||
|
|
- [x] Something done`
|
||
|
|
|
||
|
|
|
||
|
|
function configureListItem(ctx: Ctx) {
|
||
|
|
ctx.set(listItemBlockConfig.key, {
|
||
|
|
renderLabel: (label: string, listType, checked?: boolean) => {
|
||
|
|
if (checked == null) {
|
||
|
|
if (listType === 'bullet') {
|
||
|
|
return html`<span class='label'>•</span>`
|
||
|
|
}
|
||
|
|
|
||
|
|
return html`<span class='label'>${label}</span>`
|
||
|
|
} else {
|
||
|
|
return html`<input class='label' type="checkbox" checked=${checked} />`
|
||
|
|
}
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
Editor
|
||
|
|
.make()
|
||
|
|
.config(ctx => {
|
||
|
|
ctx.set(rootCtx, "#editor")
|
||
|
|
ctx.set(defaultValueCtx, markdown)
|
||
|
|
|
||
|
|
const listener = ctx.get(listenerCtx);
|
||
|
|
listener.markdownUpdated((ctx, markdown, prevMarkdown) => {
|
||
|
|
if (markdown !== prevMarkdown) {
|
||
|
|
console.log(markdown);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
.config(configureListItem)
|
||
|
|
.use(commonmark)
|
||
|
|
.use(gfm)
|
||
|
|
.use(nord)
|
||
|
|
.use(listener)
|
||
|
|
.use(listItemBlockComponent)
|
||
|
|
.create();
|