Editor

SketchSystems.spec

Editor
  Cursor
    focus -> Cursor and Caret
  Cursor and Caret
    blur -> Cursor
    type -> Caret
  Caret
    blur -> Cursor
    mousemove -> Cursor and Caret
    

SketchSystems_prototype.js

function render(model) {
  mod = model;
  const state = model.active_states[0].name;
  const onMouseMove = () => model.emit("mousemove");
  const onFocus = () => model.emit("focus");
  const onBlur = () => model.emit("blur");
  const onInput = () => model.emit("type");
  
  return $("div", { onMouseMove, style: { padding: 12 }}, [
    $("div", { style: { display: 'flex', alignItems: 'middle', marginBottom: 20 }}, [
      cursor(state),
      $("h1", { style: { margin: 0 } }, state),
    ]),
    $("textarea", { onFocus, onBlur, onInput }),
  ]);
}

function cursor(state) {
  switch (state) {
    case 'Cursor':
      return [$("img", { style: { display: "inline-block", height: 30 }, src: "https://pronto-core-cdn.prontomarketing.com/2/wp-content/uploads/sites/1256/2015/09/cursor1.png" })]
    case 'Caret':
      return [$("img", { style: { display: "inline-block", height: 25 }, src: "https://pronto-core-cdn.prontomarketing.com/2/wp-content/uploads/sites/1256/2015/09/cursor2.png" })];
    case 'Cursor and Caret':
      return [
        $("img", { style: { display: "inline-block", height: 30 }, src: "https://pronto-core-cdn.prontomarketing.com/2/wp-content/uploads/sites/1256/2015/09/cursor1.png" }),
        $("img", { style: { display: "inline-block", height: 25 }, src: "https://pronto-core-cdn.prontomarketing.com/2/wp-content/uploads/sites/1256/2015/09/cursor2.png" })
      ]
  }
}