azfx · January 22, 2017 22:39 · Jan 19, 2017
diff --git a/Unordered List<>JSON b/Unordered List<>JSON
@@ -0,0 +1 @@
+https://bountify.co/un-ordered-list-to-json-and-vice-versa
diff --git a/fiddle.html b/fiddle.html
@@ -0,0 +1,2 @@
+<textarea id="list_input"></textarea>
+<textarea id="json_input"></textarea>
diff --git a/fiddle.js b/fiddle.js
@@ -0,0 +1,72 @@
+tinymce.init({
+    selector: "#list_input",
+    menubar: false,
+    statusbar: false,
+    toolbar: "undo redo | bullist outdent indent | tojson",
+    plugins: ["lists"],
+    valid_elements: "ul,li",
+    invalid_elements: "p",
+
+    setup: function(editor) {
+        editor.addButton("tojson", {
+            icon: false,
+            tooltip: "Convert to JSON",
+            text: "Convert to JSON",
+            onclick: function() {
+                var html = editor.getContent();
+                var result = parseList($(html));
+                tinyMCE.get("json_input").setContent(result);
+            },
+        });
+    },
+});
+
+function parseList(list) {
+    var contents = [];
+    list.children().each(function(index, element) {
+        contents[index] = parseItem(element);
+    });
+    return "[" + contents.join(", ") + "]";
+}
+
+function parseItem(element){
+    return "{ \"text\": \"" + $(element).contents().get(0).nodeValue + "\", \"children\": " + parseList($(element).children("ul")) + "}";
+}
+
+tinymce.init({
+    selector: "#json_input",
+    menubar: false,
+    statusbar: false,
+    toolbar: "tolist",
+    setup: function(editor) {
+        editor.addButton("tolist", {
+            icon: false,
+            tooltip: "Convert to Unordered List",
+            text: "Convert to Unordered List",
+            onclick: function() {
+                try {
+                    var json = $.parseJSON(editor.getContent({format : 'text'}));
+                } catch (err) {
+                    window.alert("Invalid JSON!");
+                }
+                var result = formatArray(json);
+                tinyMCE.get('list_input').setContent(result);
+            },
+        });
+    },
+});
+
+function formatArray(array) {
+    if (array.length == 0)
+        return "";
+
+    var result = "<ul>";
+    $.each(array, function(i, value) {
+        result += formatElement(value);
+    });
+    return result + "</ul>";
+}
+
+function formatElement(json) {
+    return "<li>" + json.text + formatArray(json.children) + "</li>";
+}
diff --git a/fiddle.manifest b/fiddle.manifest
@@ -0,0 +1,8 @@
+name: DraftJS based list<>JSON converter
+description: As requested at https://bountify.co/un-ordered-list-to-json-and-vice-versa
+authors:
+  - Gabriel Silva Simões
+resources:
+  - https://code.jquery.com/jquery-3.1.1.min.js
+  - https://cdn.tinymce.com/4/tinymce.min.js
+normalize_css: no
diff --git a/test.html b/test.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>InlineListEditor</title>
+<style>
+  .editing {
+    display: none;
+  }
+</style>
+</head>
+<body>
+  <ul class="editable-list">
+    <li class="item"><span class="value">one</span></li>   
+    <li class="item"><span class="value">two</span></li>
+  </ul>
+<script>
+  console.log('loading');
+  function editView (value,callBack) {
+    var div = document.createElement('div'),
+        input = document.createElement('input'),
+        value = value;
+
+    input.addEventListener('keydown', function (event) {
+      if (event.keyCode === 13) {
+        value = this.value;
+        this.parentElement.removeChild(this);
+        callBack.call(null,[value]);
+      }
+    });
+    input.setAttribute('type',"text");
+    input.value = value;
+    div.appendChild(input);
+    return div;
+
+  }
+  function dblClick (event) {
+    var element = event.srcElement.parentElement,
+        value,
+        edit;
+    if (element.tagName === "LI") {
+      value = element.getElementsByClassName('value')[0];
+      value.classList.toggle('editing');
+      edit = editView(value.innerHTML,function (text) {
+        value.innerHTML = text;
+        value.classList.toggle('editing');
+      });
+
+      element.appendChild(edit);
+    }
+    console.dir(event.srcElement);
+  }
+
+  var el = document.getElementsByClassName('editable-list')[0];
+  el.addEventListener('dblclick',dblClick,false);
+
+ </script>
+ </body>
+ </html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		https://bountify.co/un-ordered-list-to-json-and-vice-versa
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<textarea id="list_input"></textarea>
		<textarea id="json_input"></textarea>