mithril-contenteditable
TypeScript icon, indicating that this package has built-in type declarations

0.1.4 • Public • Published

mithril-contenteditable

Mithril component for a div with editable contents. It is loosely inspired by react-contenteditable and Tania Rascia's content-editable tutorial.

Installation

Pull it from npm.

npm i mithril mithril-contenteditable
# Also install the typings if you use TypeScript 
npm i --save-dev @types/mithril

Playground

There is a small playground on flems.io.

Usage example

import { ContentEditable } from 'mithril-contenteditable';
import m from 'mithril';
 
...
 
    m(ContentEditable, {
      // Original HTML input
      html: state.html,
      // Returns the updated HTML code
      onchange: html => {
        state.html = html;
        console.log(html);
      },
      // Example to prevent the user from entering commas
      onkeydown: e => {
        if (e.key === ',') {
          e.preventDefault();
        }
      },
      // Replace the base tag, if needed
      tagName: 'div',
      // By default, & etc are replaced by their normal counterpart when losing focus.
      // cleanupHtml: false,
      // By default, don't allow the user to enter newlines
      // preventNewline: false,
      // By default, select all text when the element receives focus
      // selectAllOnFocus: false,
      // By default, when pasting text, remove all HTML and keep the plain text.
      // pasteAsPlainText: false,
    })
 

Build instructions

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

pnpm m i
npm start

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
0.1.41latest

Version History

VersionDownloads (Last 7 Days)Published
0.1.41
0.1.30
0.1.20
0.1.10
0.1.00
0.0.11

Package Sidebar

Install

npm i mithril-contenteditable

Weekly Downloads

2

Version

0.1.4

License

MIT

Unpacked Size

11 kB

Total Files

5

Last publish

Collaborators

  • erikvullings