JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<script src="https://get.mavo.io/mavo.js"></script>
<link rel="stylesheet" href="https://get.mavo.io/mavo.css">
<pre id="data">
{
	"firstName": "Lea",
	"lastName": "Verou",
	"fullName": "??"
}
</pre>

<div mv-app="elementStorage" mv-storage="#data" mv-mode="edit">

	<input type="text" property="firstName">
	<input type="text" property="lastName">
  <br>
  <input type="text" property="fullName" 
    value="[firstName] [lastName]"
    readonly mv-mode="read">

</div>

JavaScript

(function($, $$) {

Mavo.Plugins.register("saveAnyway", {
	init: function() {
		console.log('saveAnyway initialized');
  },
	hooks: {}
});

Mavo.Elements.register("saveAnyway", {
	default: true,
	selector: ".saveAnyway",
	init: function() {
		console.log('saveAnyway', this);
	},
	done: function() {
		console.log('saveAnyway', 'done', this);
		this.element.innerHTML = this.value;
	},
	setValue: function(element, value) {
		console.log('saveAnyway', 'setValue', value, element);
		this.element.innerHTML = value;
	}
});

})(Bliss, Bliss.$);