livebook/assets/js/content_editable.js
Jonatan Kłosko 80cd651b0f
Setup initial session UI (#9)
* Sync session data within LV client

* Add basic session UI

* Add operations for setting notebook and section name

* Update notebook and section name from the UI

* Some cleanup

* Return current data upon client registartion to avoid race conditions

* Small fixes
2021-01-17 22:03:03 +01:00

39 lines
1 KiB
JavaScript

/**
* A hook used on [contenteditable] elements to update the specified
* attribute with the element text.
*
* Configuration:
*
* * `data-update-attribute` - the name of the attribute to update when content changes
*/
const ContentEditable = {
mounted() {
this.attribute = this.el.dataset.updateAttribute;
this.__updateAttribute();
// Set the specified attribute on every content change
this.el.addEventListener("input", (event) => {
this.__updateAttribute();
});
// Make sure only plain text is pasted
this.el.addEventListener("paste", (event) => {
event.preventDefault();
const text = event.clipboardData.getData("text/plain");
document.execCommand("insertText", false, text);
});
},
updated() {
// The element has been re-rendered so we have to add the attribute back
this.__updateAttribute();
},
__updateAttribute() {
const value = this.el.innerText.trim();
this.el.setAttribute(this.attribute, value);
},
};
export default ContentEditable;