Last active
August 8, 2016 18:00
-
-
Save mike-ward/f33b669370240baa0f40d8511e5d4da4 to your computer and use it in GitHub Desktop.
Mithril Markdown editor with debounce (using Mithril rewrite branch)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Markdown Editor</title> | |
| <style> | |
| html,body {height:100%;margin:0;} | |
| h1,h2,h3,h4,h5,h6,p {margin:0 0 10px;} | |
| #editor {display:flex;height:100%;} | |
| .editor-input,.editor-preview {box-sizing:border-box;height:100%;margin:0;padding:10px;width:50%;} | |
| .editor-input {border:0;border-right:1px solid #ccc;outline:none;resize:none;} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="editor"></div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> | |
| <script src="../../module/module.js"></script> | |
| <script src="../../render/vnode.js"></script> | |
| <script src="../../render/hyperscript.js"></script> | |
| <script src="../../render/render.js"></script> | |
| <script src="../../render/trust.js"></script> | |
| <script> | |
| var m = require("../../render/hyperscript") | |
| var renderer = require("../../render/render")(window) | |
| renderer.setEventCallback(run) | |
| var trust = require("../../render/trust") | |
| function debounce(func) { | |
| var i = 0; | |
| return function (arg) { | |
| var ii = ++i; | |
| setTimeout(function (timeout) { | |
| if (ii === i) return func(arg); | |
| clearTimeout(timeout); | |
| }, 400); | |
| } | |
| } | |
| var Editor = { | |
| data: "# Markdown Editor\n\nType on the left panel and see the result on the right panel", | |
| markup: "", | |
| debounced: debounce(function (state) { state.markup = marked(state.data); run(); }), | |
| view: function(vnode) { | |
| return [ | |
| m("textarea.editor-input", { | |
| oninput: function(e) { | |
| vnode.state.data = e.target.value; | |
| vnode.state.debounced(vnode.state); | |
| }}, vnode.state.data), | |
| m(".editor-preview", trust(vnode.state.markup)), | |
| ] | |
| } | |
| } | |
| function run() { | |
| renderer.render(document.getElementById("editor"), m(Editor)) | |
| } | |
| Editor.markup = marked(Editor.data); | |
| run() | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment