const commandList =[ ['h'], ['d','d'] ]

import {isMobile} from '/api/code/takker/mobile版scrapboxの判定/script.js'; export class KeyStack { constructor() { if (isMobile()) { this._enabled = false; return; } this._enabled = true; this._stack = []; this._editor = document.getElementById('editor'); this.onstackupdate = undefined; this.onflush = undefined; } // keyの監視を開始。 start() { if (!this._enabled) return; this._editor.addEventListener('keydown', e =>{ const keymap = convertKeyCode(e.key, e); if (keymap === '') return; this.push(keymap); }); this._editor.addEventListener('stackupdate', e => this.onstackupdate(e)); this._editor.addEventListener('stackflush', e => this.onflush(e)); } stop(){} // keyをstackする // 配列を使って複数のkeysを一度に入れられる push(...keys) { this._stack.push(keys); // キーが追加されたというeventを発火する this._editor.dispatchEvent( new CustomEvent('stackupdate', { bubbles: true, detail: { stack: [...this._stack], newKeys: [...keys] } })); } // stackの中身を出しつつ、this_stackを空っぽにする flush() { this._editor.dispatchEvent( new CustomEvent('stackflush', { bubbles: true, detail: { stack: [...this._stack] } })); this._stack = []; } }

export function convertKeyCode(key, {ctrlKey,shiftKey,altKey}) { // 文字入力の場合 if (key.length === 1 && key !== ' ') { // どれか一つのmeta keyしか有効にしない if (altKey) return `<A-${key}>`; if (ctrlKey) return `<C-${key}>`; return key; // Shift keyの情報は文字に反映されているので何もしない } // 特殊なキー const specialKeys = { Backspace: 'BS', Tab: 'Tab', Enter: 'CR', Delete: 'Del', Escape: 'Esc', ' ': 'Space', PageUp: 'PageUp', PageDown: 'PageDown', End: 'End', Home: 'Home', ArrowLeft: 'Left', ArrowUp: 'Up', ArrowRight: 'Right', ArrowDown: 'Down', F1: 'F1', F2: 'F2', F3: 'F3', F4: 'F4', F5: 'F5', F6: 'F6', F7: 'F7', F8: 'F8', F9: 'F9', F10: 'F10', F11: 'F11', F12: 'F12', }; if (specialKeys[key]) { // どれか一つのmeta keyしか有効にしない if (altKey) return `<A-${specialKeys[key]}>`; if (ctrlKey) return `<C-${specialKeys[key]}>`; if (shiftKey) return `<S-${specialKeys[key]}>`; return `<${specialKeys[key]}>`; } return ''; }

#scrapvim-status-bar.status-bar { border: solid 1px #888; color: #b5b5b5; }

import {KeyStack} from '/api/code/takker/Stackを使ってscrapVimを作れないか/mock1.js'; const app = document.getElementsByClassName('app')[0]; app.insertAdjacentHTML('beforeend', ` <style> @import '/api/code/takker/Stackを使ってscrapVimを作れないか/mock1.css'; </style> `); const scrapVimStatusBar = document.createElement('div'); scrapVimStatusBar.id = 'scrapvim-status-bar'; scrapVimStatusBar.classList.add('status-bar'); app.appendChild(scrapVimStatusBar); const keyStack = new KeyStack(); keyStack.onstackupdate = e => { // Escapeを押したらflushする if (e.detail.newKeys.includes('<Esc>')) { keyStack.flush(); return; } console.log(e); scrapVimStatusBar.textContent = e.detail.stack.join(''); }; keyStack.onflush = e => { console.log(e); scrapVimStatusBar.textContent = ''; }; keyStack.start();