editable-content v3.2.0

Editable Content

A custom element that makes its contents editable by changing itself into an text field, when a user clicks on it.

This library was created to support features missing in the contenteditable property specification and to alleviate its inconsistent browser implementations.

Installation

npm i editable-content

Usage

<script src="node_modules/editable-content/dist/editable-content.js"></script>
<editable-content>Change Me</editable-content>

Then, when clicking anywhere on the element, a text field will show allowing the user to change the text.

API

Attributes

Events

You can listen in on when the text field contents have changed.

const element = document.querySelector('editable-content');
element.addEventListener('edit', (e) => {
    console.log(e.target.innerHTML); // the new value
    console.log(e.target.previousInnerHTML); // old value
});

Of course, all of the other events supported by any HTMLElement are still available.

Styling

An editing attribute is applied to the element when the text inside of the element is in focus. So you can style based on this attribute. The following turns the element's background to blue when it is being edited.

editable-content[editing] {
    background-color: blue;
}

Formatting whitespace

If you would like for line breaks or any other formatting to be respected, just apply white-space css property.

editable-content {
    white-space: pre;
}