Wondering what’s next for npm?Check out our public roadmap! »

    content-editable
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    Build Status npm version Coverage Status

    <content-editable>

    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 content-editable

    Usage

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

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

    API

    Attributes

    Attribute Type Default Description
    readonly Boolean false Whether the text should be editable or not.
    multiline Boolean false Whether pressing enter should create a newline. If this is set to true, pressing enter will update the value to the new one.

    Events

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

    const element = document.querySelector('content-editable');
    element.addEventListener('edit', (e) => {
        console.log(e.target.innerHTML); // the new value
        console.log(e.target.previousInnerHTML); // old value
    });
    Event Type Description
    edit CustomEvent Fired with a custom event when the text value has been successfully changed to a new value. The event detail will include both a textContent field that contains the updated value and a previousTextContent field that contains the last-known 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.

    content-editable[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.

    content-editable {
        white-space: pre;
    }

    Development

    Run tests

    npm test

    Run static server in examples directory

    npm start

    Install

    npm i content-editable

    DownloadsWeekly Downloads

    1

    Version

    1.2.0

    License

    ISC

    Unpacked Size

    37.3 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar