mithril-markdown

Mithril markdown editor component: click on the HTML to open the markdown editor, edit the markdown, and close it again to render the HTML. Requires a markdown parser to convert the markdown text into HTML. A popular and fast markdown parser is marked for markdown processing. Alternatively, a smaller (and simpler) markdown parser that works too is slimdown-js.

The latest version adds:

• Tooltips (can be turned of by setting tooltips: false, or you can add a localized version)
• Placeholder option, so even when there is no text, the placeholder is shown
• ButtonSize: you can set the default button size, was changed from 25x25 pixels to 16x16 pixels

Installation

Get it from npm.

npm i mithril mithril-markdown
# If you use TypeScript, also install the typings
npm i --save-dev @types/mithril

Playground

There is a small playground on flems.io.

Usage example

import m from 'mithril';
import { render } from 'slimdown-js';
// import marked from 'marked';
import { MarkdownEditor } from 'mithril-markdown';

...
  m(MarkdownEditor, {
    parse: render,
    // parse: marked,
    preview: 500,
    markdown: '# Hello, world',
    onchange: (markdown) => {
      console.log(markdown);
    },
  }),

Build instructions

Using pnpm (npm i -g pnpm), run the following commands:

pnpm m i
npm start