Smooth Inline Editing JavaScript Library – Malle

Preview:

Description:

Mmalle is a robust edit in place JavaScript library that transforms any text element into an editable field for your edits.

Can be useful in scenarios like content management systems, where quick edits are frequent, or in interactive educational platforms where users might need to fill in or change text on the go.

How to use it:

1. Install and import the Mmalle components.

# Yarn
$ yarn @deltablot/malle
# NPM
$ npm i @deltablot/malle

// Minimal
import { Malle } from '@deltablot/malle';
// all modules
import { InputType, EventType, Action, SelectOptions, Options, Malle } from 'malle';

2. Add the data-malleable='true' attribute to your text element which should be editable.

<div data-malleable='true'>
  Text Here
</div>

3. More HTML data attributes to customize the editable field:

• data-ma-type=’text’
• data-ma-type=’number’
• data-ma-type=’email’
• data-ma-type=’url’
• data-ma-type=’datetime-local’
• data-ma-blur=’cancel’
• data-ma-blur=’submit’
• data-ma-blur=’ignore’
• data-ma-enter=’cancel’
• data-ma-enter=’submit’
• data-ma-enter=’ignore’
• data-ma-escape=’ignore’
• data-ma-escape=’cancel’
• data-ma-placeholder=’[email protected]’

4. Create a new Malle instance and use the fun function to process the updated value after editing. This usually involves making an API call to persist the changes on the server. The function receives the new value, original element, event, and input element as arguments.

const malle = new Malle({
  fun: (value, original, event, input) => {
    console.log(`New text: ${value}`);
    console.log(`Original element:`);
    console.log(original);
    // your function for POSTing the new value
    return myFunctionReturingAPromiseString();
  },
}).listen();

5. All possible options and events.

const malle = new Malle({
  // customize the cancel button
  cancel: 'Cancel',
  cancelClasses: ['btn', 'btn-danger'],
  
  // customize the submit button
  submit: 'OK',
  submitClasses: ['btn', 'btn-primary'],
  // additional form class(es)
  formClasses: ['col-md-12'],
  // additional input class(es)
  inputClasses: ['form-control', 'mb-2'],
  // set focus on the input
  focus: true, 
  // enable debug mode
  debug: true,
  // trigger event:
  // 'click', 'mouseenter', 'mouseover'
  event: 'click',
  // input type:
  // 'email', 'number', 'select'
  // 'text', 'textarea', 'url'
  inputType: 'text',
  // options for select
  selectOptions:  {
    value: '',
    text: '',
    selected: false,
  },
  // start listening on events after init instead of calling the listen() method
  listenNow: false,
  // listening on this element
  listenOn: '[data-malleable='true']',
  // content to display on hover
  tooltip: 'Click this to edit',
  // action to take when the user clicks outside the input
  // 'submit', 'cancel', 'ignore'
  onBlur: 'submit',
  // action to take when the user presses Enter key
  // 'submit', 'cancel', 'ignore'
  onEnter: 'submit',
  // action to take when the user presses Escape key
  onEscape: 'cancel',
  // set to false to always call fun regardless of input.
  requireDiff: true,
  // if true, innerHTML is used instead of innerText with the returned value from the server
  returnedValueIsTrustedHtml: false,
  // events
  onEdit: (original, event, input) => {
    // ...
  },
  onCancel: (original, event, input) => {
    // ...
  },
  before: (original, event) => {
    // ...
  },
  after: (original, event) => {
    // ...
  },
  
}).listen();

Changelog:

v2.7.2 (05/30/2025)

• bug/minor: avoid double event handle on Chromium.

v2.7.1 (05/06/2025)

• bugfixes

v2.7.0 (05/04/2025)

• bugfixes

v2.6.2 (11/14/2024)

• update dependencies
• bugfixes

v2.6.1 (08/20/2024)

• update dependencies

v2.6.0 (03/24/2024)

• add onCancel option