Pluto with json editor (draft)

pluto_json_editor.jl

### A Pluto.jl notebook ###
# v0.12.2

using Markdown
using InteractiveUtils

# This Pluto notebook uses @bind for interactivity. When running this notebook outside of Pluto, the following 'mock version' of @bind gives bound variables a default value (instead of an error).
macro bind(def, element)
    quote
        local el = $(esc(element))
        global $(esc(def)) = Core.applicable(Base.get, el) ? Base.get(el) : missing
        el
    end
end

# ╔═╡ ca36f1e0-0abc-11eb-1cac-d53f4924ecdb
# note: for better integration into Pluto, bootstrap should be scoped, s.t. the Pluto CSS is not overwritten. Anyway, to keep everything in one file I just include a non-scoped bootstrap

html"""
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
"""

# ╔═╡ 419cabb0-0abf-11eb-1735-8b0aab19f427
@bind param_dict html"""
<span id="editor_holder_span">
	<div id="editor_holder"></div>
</span>

<script>
const element = document.getElementById('editor_holder');

const editor = new JSONEditor(element, {
    schema: {
          type: "object",
          title: "Car",
          properties: {
            make: {
              type: "string",
              enum: [
                "Toyota",
                "BMW",
                "Honda",
                "Ford",
                "Chevy",
                "VW"
              ]
            },
            model: {
              type: "string"
            },
            year: {
              type: "integer",
              enum: [
                1995,1996,1997,1998,1999,
                2000,2001,2002,2003,2004,
                2005,2006,2007,2008,2009,
                2010,2011,2012,2013,2014
              ],
              default: 2008
            },
            safety: {
              type: "integer",
              format: "rating",
              maximum: "5",
              exclusiveMaximum: false,
              readonly: false
            }
          }
        },
  theme: 'bootstrap4'});


const span = document.getElementById('editor_holder_span');

	editor.on('change',() => {
		span.value = editor.getValue();
		span.dispatchEvent(new CustomEvent("input"));
	});

	span.value = editor.getValue();
	span.dispatchEvent(new CustomEvent("input"));


</script>
"""

# ╔═╡ ec6deb30-0abf-11eb-05a9-3f6db254a7f6
param_dict

# ╔═╡ Cell order:
# ╟─ca36f1e0-0abc-11eb-1cac-d53f4924ecdb
# ╟─419cabb0-0abf-11eb-1735-8b0aab19f427
# ╠═ec6deb30-0abf-11eb-05a9-3f6db254a7f6