Syntax Highlighting

SketchSystems.spec

Syntax Highlighting
  None*
    set -> Has Focus?
  Has Focus?
    focus -> Synchronous
    blur -> Asynchronous
    unset -> None
  Synchronous
    unset -> None
    scroll -> Asynchronous
    blur -> Asynchronous
  Asynchronous
    unset -> None
    focus -> Synchronous
    change -> Synchronous
    request -> Highlighting
    receive -> Highlighted
    Init*
    Highlighting
    Highlighted

SketchSystems_prototype.js

function text(name) {
  switch (name) {
    case "Highlighted":
    case "Synchronous":
      return "Highlighted\n";
    default:
      return "Plain\n";
  }
}

function render(model) {
  const name = model.active_states[0].name;

  let focusDetection, highlightProgress, unsetDetection, syncHighlightProgress;

  const emit = (name) => {
    clearTimeout(focusDetection);
    clearTimeout(highlightProgress);
    clearTimeout(unsetDetection);
    clearTimeout(syncHighlightProgress);
    model.emit(name);
  };

  unsetDetection = setTimeout(() => {
    const select = document.querySelector("select");
    const unset = select && select.value === "unset";
    if (unset && current_state_name !== "None") {
      emit("unset");
    }
  });

  if (name === "Has Focus?") {
    const textarea = document.querySelector("textarea");
    const focused = textarea === document.activeElement;
    focusDetection = setTimeout(() => emit(focused ? "focus" : "blur"), 1000);
  }

  if (name === "Init") {
    highlightProgress = setTimeout(() => emit("request"), 1000);
  }

  if (name === "Highlighting") {
    highlightProgress = setTimeout(() => emit("receive"), 1000);
  }

  return $("div", { style: { color: "darkBlue", padding: 10 } }, [
    $("h1", {}, [name]),
    $(
      "select",
      {
        onChange(e) {
          emit(e.target.value);
        },
        value: name === "None" ? "unset" : "set",
      },
      [$("option", {}, ["unset"]), $("option", {}, ["set"])]
    ),
    $("hr"),
    $(
      "textarea",
      {
        value: text(name).repeat(50),
        onBlur() {
          emit("blur");
        },
        onFocus() {
          emit("focus");
        },
        onScroll() {
          emit("scroll");
        },
        onChange() {
          emit("change");
        },
      },
      []
    ),
  ]);
}