Sample plugin manifest for Inliner

ToDo.js

{
		"id": "in.ToDo",
		name:"Todo list",
		"data": {
			"cmd": "",
			"filter": ["All"],
			"editor": {
				"_id": "",
				"name": "",
				"type": "todo",
				"stamp": "",
				"creator": "",
				"parent": "cw-Demo-ToDo-1ccd",
				"top": {
					"done": "",
					"text": "",
					"stamp": ""
				},
				"list": [{
					"done": "",
					"text": "",
					"stamp": "",
					"isnew": true
				}],
				"log": []
			},
			"key": "_"
		},
		"init": function ($o,form) {

			var that=this, d = form.data;
			$o.html(that.FormHTML);
			//enc key
			form.data.key= form.data.editor.crypto||"_";

		},
		"ui": {
			"#list": {
				"bind": "editor.list",
				"manifest": "ToDoLine",
				"list": "<div class=\"todo\"></div>",
				"init": function ($o,form) {

					$o.sortable();			// make items draggable

				}
			},
			"#filter": {
				"bind": function (d,v,$o) {

					if (v!=null) d.filter=v;
					$o.my("find","#list")
					.removeClass("todoAll todoDone todoActive")
					.addClass("todo"+d.filter);
					return d.filter;

				},
				"init": function ($o) {

					$o.tags({tags:[["Active","Done"]], empty:{"All":"All"}});

				}
			}
		},
		"FormHTML": "<div id=\"cont\" class=\"w700 oh dib vat\">\n\t\t<div  class=\"w170 vat dib fs80 tar\" style=\"position:absolute; top:3px;right:0;z-index:+50\">\n\t\t\t<span id=\"filter\"></span>\n\t\t</div>\n\t<div id=\"list\"></div>\n</div>",
		"ToDoLine": {
			"id": "TodoLine",
			"data": {
				"done": "",
				"text": "",
				"stamp": "",
				"isnew": true
			},
			"init": function ($o,form) {

				$o.html('<div id="isdone"></div>'
								+'<textarea id="text" placeholder='
								+'"What need to be done?"></textarea>');
				if (!form.data.stamp) form.data.stamp=Date.now();

			},
			"ui": {
				"#isdone": {
					"bind": function (d,v,$o) {

						if (v!=null) d.done = d.done?"":"done";
						$o.toggleClass("fi-checkbox green o80", !!d.done)
						.toggleClass("fi-check lgray", !d.done)
						.parent().toggleClass("done", !!d.done);

					},
					"events": "click"
				},
				"#text": {
					"bind": function (d,v,$o) {

						if (v!=null) {
							d.text = v.replace(/^-\s/,"— ");
							var idx = $o.my("index")+1, 
									$list=$o.parents(".my-form-list:eq(0)");
							if (!d.text && !d.isnew 
									&& $list.find(">div").size()>1
								 ) {
								// focus back after delay
								(function(){
									$list.find(">div:eq("+(idx-2).clamp(0,1e5)+") #text").focus();
									$o.trigger("remove");
								}).delay(100);

							}
							if (v.length) d.isnew=false;
							// we have split
							if (/[\r\n]/.test(v)) {
								var a = v.split(/[\r\n]/);

								d.text=a[0];

								if (!a[0].compact()) {
									d.text=a[1];  idx-=1;
									$o.trigger("insert","before");
								} 
								else if (!a[1].compact()) $o.trigger("insert","after");
								else $o.trigger("insert",{where:"after", what:{text:a[1]}});

								// focus back after delay
								(function(){
									$list.find(">div:eq("+idx+") #text").focus();
								}).delay(100);
							}
						}
						if ($o.is(":visible")) (function(){$o.height(0).height($o[0].scrollHeight);}).delay(40);
						return d.text;

					},
					"css": {
						"sub": function (d) {
							return /^(—.|–.|\*.|--)$/.test(d.text.to(2))
						},
						"imp1": function (d) {
							return /[^!]!$/.test(d.text)
						},
						"imp2": function (d) {
							return /!!$/.test(d.text)
						},
						"imp3": function (d) {
							return /^\d+\./.test(d.text)
						}
					}
				}
			}
		},
		"style": {
			" textarea": "border:none;min-height:0!important;font-size:16pt;transition: color 0.3s;resize:none;",
			" .todo": "width:700px;overflow:hidden;cursor:move;padding:4px 0 4px 10px;",
			" #isdone": "width:30px;display:inline-block;vertical-align:top;padding:1px 10px 3px 0;font-size:120%;opacity:0.7",
			" #text": "margin:0;height:35px;width:660px;padding:0;display:inline-block;vertical-align:top;",
			" .fi-checkbox+#text": "text-decoration:line-through;opacity:0.7;color:inherit;",
			" .sub": "padding:0px 0 2px 10px;",
			" .sub #isdone": "opacity:0.4",
			" .sub textarea": "font-size:15pt;height: 1.2em;",
			" .imp1 textarea": "color:#05a;",
			" .imp2 textarea": "color:#c02;",
			" .imp3 textarea": "font-weight:bold;",
			" .button": "border-radius:100px",
			" .todoActive>.done": "display:none",
			" .todoDone>div:not(.done)": "display:none"
		}
	}