2.0.1 • Published 9 months ago

edit-element v2.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
9 months ago

edit-element

A lightweight and flexible JavaScript/TypeScript library for adding in-place editing functionality to HTML elements.

Features

  • 🖊️ Make any HTML element in-place editable
  • ⚙️ CSM and ESM and TypeScript support
  • ⌨️ Configurable editing classname and submit shortcut key
  • ♿ Built-in accessibility support
  • 🔧 Flexible event callbacks

Installation

npm install edit-element

Basic Usage

import { EditElement } from 'edit-element';

// Make all elements with .editable class in-place editable
const editableElements = new EditElement('.editable');

Advanced Usage

import EditElement from 'edit-element';

// Make all elements with .editable class editable
const editableElements = new EditElement('.editable', {
  onEnter: (element) => {
    console.log('Editing started', element);
  },
  onSubmit: (element) => {
    console.log('Edit submitted', element.textContent);
  },
  onLeave: (element) => {
    console.log('Editing ended', element);
  },
  editingElementClassName: 'editing',
  submitKey: 'Enter',
});

Configuration Options

Options Interface

PropertyTypeRequiredDefaultDescription
onEnter(element: HTMLElement) => voidOptionalundefinedCallback function when editing starts
onSubmit(element: HTMLElement) => voidOptionalundefinedCallback function when edit is submitted
onLeave(element: HTMLElement) => voidOptionalundefinedCallback function when editing ends
editingElementClassNamestringOptionalundefinedCSS class name added during editing
submitKeystringOptional'Enter'Key to trigger submission

Methods

destroyAllEditable()

Remove all editable elements.

editableElements.destroyAllEditable();

destroyTargetEditable(selector: string)

Remove all editable elements by matching the specific querySelector query.

editableElements.destroyTargetEditable('.specific-editable');

License

MIT License

Contributing

Issues and pull requests are welcome!

2.0.1

9 months ago

2.0.0

9 months ago

1.0.0

9 months ago