Editor Exploration #pocketbook

readme.md

Click here to view this pocketbook

index.html

  <div class="metadata" style="display: none;"></div>
  <div data-lang="deps" data-source-visibility="visible" data-result-visibility="visible" data-autorun="true" class="block"><pre class="source hljs ruby" contenteditable="true"><span class="hljs-symbol">https:</span>/<span class="hljs-regexp">/cdnjs.cloudflare.com/ajax</span><span class="hljs-regexp">/libs/ace</span><span class="hljs-regexp">/1.4.1/ace</span>.js</pre><div class="result">[object Event]</div></div><div data-lang="js" data-visibility="source" data-autorun="true" class="block">
    <pre class="source hljs cs" contenteditable="true"><span class="hljs-keyword">var</span> div = document.createElement(<span class="hljs-string">'div'</span>);
div.style.width = <span class="hljs-string">"300px"</span>;
div.style.height = <span class="hljs-string">"400px"</span>;
div.innerHTML = <span class="hljs-string">"Hello"</span>
<span class="hljs-keyword">var</span> editor = ace.edit(div);
editor.setTheme(<span class="hljs-string">"ace/theme/monokai"</span>);
editor.session.setMode(<span class="hljs-string">"ace/mode/javascript"</span>);  
div
</pre>
    <div class="result"><div class=" ace_editor ace_hidpi ace-monokai ace_dark" style="width: 300px; height: 400px;"><textarea class="ace_text-input" wrap="off" autocorrect="off" autocapitalize="off" spellcheck="false" style="opacity: 0; font-size: 1px; height: 1px; width: 1px; transform: translate(80px, 16px);"></textarea><style id="ace-tm">.ace-tm .ace_gutter {background: #f0f0f0;color: #333;}.ace-tm .ace_print-margin {width: 1px;background: #e8e8e8;}.ace-tm .ace_fold {background-color: #6B72E6;}.ace-tm {background-color: #FFFFFF;color: black;}.ace-tm .ace_cursor {color: black;}.ace-tm .ace_invisible {color: rgb(191, 191, 191);}.ace-tm .ace_storage,.ace-tm .ace_keyword {color: blue;}.ace-tm .ace_constant {color: rgb(197, 6, 11);}.ace-tm .ace_constant.ace_buildin {color: rgb(88, 72, 246);}.ace-tm .ace_constant.ace_language {color: rgb(88, 92, 246);}.ace-tm .ace_constant.ace_library {color: rgb(6, 150, 14);}.ace-tm .ace_invalid {background-color: rgba(255, 0, 0, 0.1);color: red;}.ace-tm .ace_support.ace_function {color: rgb(60, 76, 114);}.ace-tm .ace_support.ace_constant {color: rgb(6, 150, 14);}.ace-tm .ace_support.ace_type,.ace-tm .ace_support.ace_class {color: rgb(109, 121, 222);}.ace-tm .ace_keyword.ace_operator {color: rgb(104, 118, 135);}.ace-tm .ace_string {color: rgb(3, 106, 7);}.ace-tm .ace_comment {color: rgb(76, 136, 107);}.ace-tm .ace_comment.ace_doc {color: rgb(0, 102, 255);}.ace-tm .ace_comment.ace_doc.ace_tag {color: rgb(128, 159, 191);}.ace-tm .ace_constant.ace_numeric {color: rgb(0, 0, 205);}.ace-tm .ace_variable {color: rgb(49, 132, 149);}.ace-tm .ace_xml-pe {color: rgb(104, 104, 91);}.ace-tm .ace_entity.ace_name.ace_function {color: #0000A2;}.ace-tm .ace_heading {color: rgb(12, 7, 255);}.ace-tm .ace_list {color:rgb(185, 6, 144);}.ace-tm .ace_meta.ace_tag {color:rgb(0, 22, 142);}.ace-tm .ace_string.ace_regex {color: rgb(255, 0, 0)}.ace-tm .ace_marker-layer .ace_selection {background: rgb(181, 213, 255);}.ace-tm.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px white;}.ace-tm .ace_marker-layer .ace_step {background: rgb(252, 255, 0);}.ace-tm .ace_marker-layer .ace_stack {background: rgb(164, 229, 101);}.ace-tm .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid rgb(192, 192, 192);}.ace-tm .ace_marker-layer .ace_active-line {background: rgba(0, 0, 0, 0.07);}.ace-tm .ace_gutter-active-line {background-color : #dcdcdc;}.ace-tm .ace_marker-layer .ace_selected-word {background: rgb(250, 250, 255);border: 1px solid rgb(200, 200, 250);}.ace-tm .ace_indent-guide {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;}
/*# sourceURL=ace/css/ace-tm */</style><div class="ace_gutter" aria-hidden="true" style="left: 0px; width: 41px;"><div class="ace_layer ace_gutter-layer ace_folding-enabled" style="height: 1000000px; transform: translate(0px, 0px); width: 41px;"><div class="ace_gutter-cell ace_gutter-active-line  ace_info" style="height: 16px; top: 0px;">1<span style="display: none;"></span></div></div></div><div class="ace_scroller" style="left: 40.203125px; right: 0px; bottom: 0px;"><div class="ace_content" style="transform: translate(0px, 0px); width: 259.796875px; height: 432px;"><div class="ace_layer ace_print-margin-layer"><div class="ace_print-margin" style="left: 580px; visibility: visible;"></div></div><div class="ace_layer ace_marker-layer"><div class="ace_active-line" style="height: 16px; top: 0px; left: 0px; right: 0px;"></div></div><div class="ace_layer ace_text-layer" style="height: 1000000px; margin: 0px 4px; transform: translate(0px, 0px);"><div class="ace_line" style="height: 16px; top: 0px;"><span class="ace_identifier">Hello</span></div></div><div class="ace_layer ace_marker-layer"></div><div class="ace_layer ace_cursor-layer ace_hidden-cursors"><div class="ace_cursor" style="display: block; transform: translate(40px, 0px); width: 7px; height: 16px; animation-duration: 1000ms;"></div></div></div></div><div class="ace_scrollbar ace_scrollbar-v" style="display: none; width: 20px; bottom: 0px;"><div class="ace_scrollbar-inner" style="width: 20px; height: 16px;"></div></div><div class="ace_scrollbar ace_scrollbar-h" style="display: none; height: 20px; left: 40.203125px; right: 0px;"><div class="ace_scrollbar-inner" style="height: 20px; width: 259.796875px;"></div></div><div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-caps: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; overflow: hidden;"><div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-caps: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; overflow: visible;">הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה</div><div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: inherit; overflow: visible;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div></div></div></div>
  </div><div data-lang="md" data-source-visibility="hidden" data-result-visibility="visible" data-autorun="false" class="block hide-source"><pre class="source hljs coffeescript" contenteditable="true">Whatever <span class="hljs-keyword">is</span> returned <span class="hljs-keyword">from</span> the last expression <span class="hljs-keyword">is</span> rendered <span class="hljs-keyword">in</span> the resulting output, so <span class="hljs-keyword">if</span> you <span class="hljs-keyword">return</span> a DOM Element, it will render inline:</pre><div class="result"><p>Whatever is returned from the last expression is rendered in the resulting output, so if you return a DOM Element, it will render inline:</p></div></div><div data-lang="js" data-source-visibility="visible" data-result-visibility="visible" data-autorun="true" class="block"><pre class="source hljs javascript" contenteditable="true"><span class="hljs-keyword">let</span> button = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'button'</span>);
button.innerHTML = <span class="hljs-string">'Click Me'</span>;
button.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ alert(<span class="hljs-string">'Hello!'</span>); };
button      
</pre><div class="result"><button>Click Me</button></div></div><div data-lang="md" data-source-visibility="hidden" data-result-visibility="visible" data-autorun="false" class="block hide-source"><pre class="source hljs cs" contenteditable="true">Now, <span class="hljs-keyword">let</span><span class="hljs-string">'s get a little fancy and add a new language. We'</span>ll <span class="hljs-keyword">add</span> my LISP <span class="hljs-keyword">using</span> a dependency block. A dependency block includes other scripts, <span class="hljs-function">one per each <span class="hljs-title">line</span> (<span class="hljs-params"><span class="hljs-keyword">in</span> parallel, but we only have one here</span>):</span></pre><div class="result"><p>Now, let's get a little fancy and add a new language. We'll add my LISP using a dependency block. A dependency block includes other scripts, one per each line (in parallel, but we only have one here):</p></div></div><div data-lang="deps" data-source-visibility="visible" data-result-visibility="hidden" data-autorun="true" class="block hide-result"><pre class="source hljs cpp" contenteditable="true">https:<span class="hljs-comment">//pocketbook.software/lib/blip-071718.js</span></pre><div class="result" style="display: none;">[object Event]</div></div><div data-lang="md" data-source-visibility="hidden" data-result-visibility="visible" data-autorun="false" class="block hide-source"><pre class="source hljs sql" contenteditable="true">Now let's <span class="hljs-keyword">use</span> the aforementioned <span class="hljs-keyword">self</span>-<span class="hljs-keyword">modification</span> <span class="hljs-keyword">to</span> wire up the <span class="hljs-string">`evaluate`</span> <span class="hljs-keyword">function</span> <span class="hljs-keyword">as</span> a separate runtime!</pre><div class="result"><p>Now let's use the aforementioned self-modification to wire up the <code>evaluate</code> function as a separate runtime!</p></div></div><div data-lang="js" data-source-visibility="visible" data-result-visibility="hidden" data-autorun="true" class="block hide-result"><pre class="source hljs php" contenteditable="true">PocketBook.Main.Languages[<span class="hljs-string">'blip'</span>] = {
  name: <span class="hljs-string">"Blip"</span>,
  <span class="hljs-keyword">eval</span>: evaluate <span class="hljs-comment">// This comes from the above script</span>
}  </pre><div class="result" style="display: none;">[object Object]</div></div><div data-lang="md" data-source-visibility="hidden" data-result-visibility="visible" data-autorun="false" class="block hide-source"><pre class="source hljs sql" contenteditable="true">Once this is run, we can <span class="hljs-keyword">use</span> a <span class="hljs-keyword">new</span> <span class="hljs-keyword">language</span> (selected <span class="hljs-keyword">at</span> the bottom <span class="hljs-keyword">of</span> the menu <span class="hljs-keyword">on</span> the <span class="hljs-keyword">left</span> <span class="hljs-keyword">to</span> run blocks <span class="hljs-keyword">of</span> code <span class="hljs-keyword">with</span>!)</pre><div class="result"><p>Once this is run, we can use a new language (selected at the bottom of the menu on the left to run blocks of code with!)</p></div></div><div data-lang="blip" data-source-visibility="visible" data-result-visibility="visible" data-autorun="false" class="block"><pre class="source hljs bash" contenteditable="true">(<span class="hljs-built_in">let</span> (x 2)
  (+ (* x x) (+ (* 3 x) 4)))    </pre><div class="result">14</div></div><div data-lang="md" data-source-visibility="hidden" data-result-visibility="visible" data-autorun="false" class="block hide-source"><pre class="source hljs markdown" contenteditable="true">---
<span class="hljs-code">      </span>
<span class="hljs-code">      # FAQ</span>
<span class="hljs-code">      </span>
<span class="hljs-code">      **Where are things saved?**</span>
<span class="hljs-code">      </span>
<span class="hljs-code">      By default, things are saved to local storage in your browser. If you'd like something more permanent, you can save to a Github Gist (see the menu in the top left corner). You'll need to make a personal access token to do so.</span>
<span class="hljs-code">      </span>
<span class="hljs-code">      **Why not fork Jupyter/Iodide/ObservableHQ?**</span>
<span class="hljs-code">      </span>
<span class="hljs-code">      A few different reasons:</span>
<span class="hljs-code">      - ObservableHQ isn't open source, as far as I can tell.</span>
<span class="hljs-code">      - I didn't to run servers (a la Jupyter): browsers are powerful these days! [https://pocketbook.software](https://pocketbook.software) is literally just an HTML page in an AWS S3 bucket (behind CloudFront for HTTPS).</span>
<span class="hljs-code">      - I wanted something tiny that made minimal assumptions about the front-end framework or transpiler de jour so that it had staying power.</span>
<span class="hljs-code">      </span>
<span class="hljs-code">      **Can I add X feature?**</span>
<span class="hljs-code">      </span>
<span class="hljs-code">      My first suggestion would be to try to add it inline: all of the PocketBook state is available for you to modify and the code should be pretty readable. If that doesn't work, send me a pull request! If it's good, I'll merge it.</span>
<span class="hljs-code">      </span>
If it's helpful, I wrote a little function that should dump out the latest layout of the global <span class="hljs-code">`PocketBook`</span> object. <span class="hljs-code">`PocketBook.Main`</span> refers to the main instance.</pre><div class="result"><hr>
<h1 id="faq">FAQ</h1>
<p><strong>Where are things saved?</strong></p>
<p>By default, things are saved to local storage in your browser. If you'd like something more permanent, you can save to a Github Gist (see the menu in the top left corner). You'll need to make a personal access token to do so.</p>
<p><strong>Why not fork Jupyter/Iodide/ObservableHQ?</strong></p>
<p>A few different reasons:</p>
<ul>
<li>ObservableHQ isn't open source, as far as I can tell.</li>
<li>I didn't to run servers (a la Jupyter): browsers are powerful these days! <a href="https://pocketbook.software">https://pocketbook.software</a> is literally just an HTML page in an AWS S3 bucket (behind CloudFront for HTTPS).</li>
<li>I wanted something tiny that made minimal assumptions about the front-end framework or transpiler de jour so that it had staying power.</li>
</ul>
<p><strong>Can I add X feature?</strong></p>
<p>My first suggestion would be to try to add it inline: all of the PocketBook state is available for you to modify and the code should be pretty readable. If that doesn't work, send me a pull request! If it's good, I'll merge it.</p>
<p>If it's helpful, I wrote a little function that should dump out the latest layout of the global <code>PocketBook</code> object. <code>PocketBook.Main</code> refers to the main instance.</p></div></div><div data-lang="js" data-source-visibility="visible" data-result-visibility="visible" data-autorun="false" class="block"><pre class="source hljs css" contenteditable="true"><span class="hljs-selector-tag">PocketBook</span><span class="hljs-selector-class">.Help</span>()</pre><div class="result"><pre>Storage [Object]
    LocalStorageBackingStore [Class]
    GistBackingStore [Class]
StorageManager [Class]
UI [Object]
    StatelessBlockAction [Class]
    ToggleBlockAction [Class]
    BlockController [Class]
    StatelessGlobalAction [Class]
    TopBarController [Class]
HotKeyManager [Class]
Main [PocketBook]
    Version [Array]
    Content [HTMLDivElement]
    Languages [Object]
    BlockController [BlockController]
        Parent [PocketBook]
        Actions [Array]
        LastBlock [HTMLDivElement]
    TopBarController [TopBarController]
        Parent [PocketBook]
        Actions [Array]
    StorageManager [StorageManager]
        Parent [PocketBook]
        Source [GistBackingStore]
            Id [String]
    HotKeyManager [HotKeyManager]
        Parent [PocketBook]
Help [Function]
</pre></div></div>