Inline plain text editing webcomponent
See: Documentation, Demo.
npm install --save nega-editable-text<html>
<head>
<script type="module">
import 'nega-editable-text/nega-editable-text.js';
</script>
</head>
<body>
<nega-editable-text><span>This text can be editable.</span></nega-editable-text>
<button onclick="this.previousElementSibling.edit()">Edit</button>
</body>
</html>import {PolymerElement, html} from '@polymer/polymer';
import 'nega-autocomplete/nega-autocomplete.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
<nega-editable-text id="editalbe"><span id="text">This text can be editable.</span></nega-editable-text>
<button on-click="_handleEdit">Edit</button>
`;
}
_handleEdit(ev) {
this.$.editable.edit()
}
}
customElements.define('sample-element', SampleElement);Feel free to fork and send over PRs. Still a lot of places this can be improved, i.e. styling, more options, or better behaviors.
git clone https://github.com/kennethklee/nega-editable-text
cd nega-editable-text
npm install
$ npm start
$ npm test