rizin-notebook/assets/templates/console.tmpl

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Rizin Notebook</title>
  <link rel="stylesheet" href="{{ .root }}static/spectre-icons.min.css">
  <link rel="stylesheet" href="{{ .root }}static/spectre.min.css">
  <link rel="stylesheet" href="{{ .root }}static/simplemde.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style type="text/css">
    html, body { width: 100%; height: 100%; margin: 0 }
    .button-edit { width: 75px ! important; margin-top: 9px; margin-right: 9px; }
    .nb-ac-wrap { position: relative; }
    .nb-ac-dropdown {
      position: absolute; top: 100%; left: 0; right: 0; z-index: 99999;
      background: white; border: 1px solid transparent; border-top: none;
      border-radius: 0 0 4px 4px; max-height: 260px; overflow-y: auto;
      display: none;
    }
    .nb-ac-item {
      padding: 5px 10px; cursor: pointer;
      font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .nb-ac-item:hover, .nb-ac-item.nb-ac-sel { font-weight: bold; }
    .nb-ac-cmd { color: #1447e6; font-weight: bold; font-family: Inconsolata, monospace; margin-right: 4px; }
    .nb-ac-args { color: #178236; font-style: italic; font-family: Inconsolata, monospace; margin-right: 6px; }
    .nb-ac-summ { font-size: 12px; font-style: normal; opacity: .7; }
  </style>
  <script>window.NOTEBOOK_KB={{ keybindings }};</script>
  <script>window.NB_ROOT="{{ .root }}";</script>
  <script>window.NB_AC_CONFIG={{ autocomplete_config }};</script>
  <script src="{{ .root }}static/shortcuts.js"></script>
  <script src="{{ .root }}static/autocomplete.js"></script>
</head>
<body>
  {{ if .message }}
  <div class="toast toast-success" style="margin: 12px 12px 0 12px;">{{ .message }}</div>
  {{ end }}
  {{ if .error }}
  <div class="toast toast-error" style="margin: 12px 12px 0 12px;">{{ .error }}</div>
  {{ end }}
  <form id="cmdform" style="margin-top: 15px; height: 100%;" action="{{ .root }}output/exec/{{ .unique }}" method="POST">
    <div class="form-group">
      <input type="text" class="form-input command-input" id="cmdinput" name="command" value="{{ .command }}" placeholder="Rizin command (e.g. pdf, aaa, ii)" autofocus/>
    </div>
    <div class="form-group">
      <button class="btn btn-primary" type="submit">Exec</button>
      <button class="btn" type="button" id="cancel-console" onclick="window.parent.postMessage({type:'iframe-remove'},'*')">Cancel</button>
      <span style="font-size:12px;margin-left:8px;opacity:.7;">Ctrl+Enter to execute</span>
    </div>
  </form>
  <script>
    var createdCellUnique = {{ if .cellUnique }}"{{ .cellUnique }}"{{ else }}""{{ end }};
    var createdCellLineCount = {{ if .lineCount }}{{ .lineCount }}{{ else }}0{{ end }};
    var createdCellWordCount = {{ if .wordCount }}{{ .wordCount }}{{ else }}0{{ end }};
    var createdCellActionTime = {{ if .actionTime }}"{{ .actionTime }}"{{ else }}""{{ end }};
    var input = document.getElementById('cmdinput');
    NotebookShortcuts.annotate(document.getElementById('cancel-console'), 'cancel');
    NotebookShortcuts.bind([
      { action: 'cancel', allowInInputs: true, handler: function() { document.getElementById('cancel-console').click(); } },
      { action: 'execute', allowInInputs: true, handler: function() { document.getElementById('cmdform').submit(); } }
    ]);
    input.addEventListener('keydown', function(e) {
      if (e.ctrlKey && e.key === 'Enter') { e.preventDefault(); document.getElementById('cmdform').submit(); }
    });
    document.getElementById('cmdform').addEventListener('submit', function(e) {
      if (!input.value.trim()) { e.preventDefault(); window.parent.postMessage({type:'iframe-remove'},'*'); }
    });
    (function(){
      if (createdCellUnique && window.parent !== window) {
        window.parent.postMessage({
          type:'iframe-add-cell',
          cellType:'command',
          cellUnique:createdCellUnique,
          content:input.value,
          lineCount:createdCellLineCount,
          wordCount:createdCellWordCount,
          actionTime:createdCellActionTime,
          outputUrl:'{{ .root }}output/view/{{ .unique }}/' + createdCellUnique,
          deleteUrl:'{{ .root }}output/delete/{{ .unique }}/' + createdCellUnique
        }, '*');
      }
      var h = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
      if (window.parent !== window) window.parent.postMessage({type:'iframe-resize',height:h},'*');
      input.focus();
      input.select();
    })();
    var acCfg = window.NB_AC_CONFIG || {};
    NotebookAutocomplete.attach(input, { apiUrl: '{{ .root }}api/v1/json/commands', maxResults: acCfg.max_results, minChars: acCfg.min_chars });
  </script>
</body>
</html>