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

/mithril-contenteditable/

    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