Add virtualkey for iPad support

Author: chunqiuyiyu

app/components/MonacoEditor/state.js

@@ -18,6 +18,7 @@ import { findLanguageByextensions, findModeByName } from './utils/findLanguage'
 import ConditionWidget from './ConditionWidget'
 import initialOptions from './monacoDefaultOptions'
 import config from 'config'
+import { state as virtualKeyState } from '../VirtualKey'
 
 reaction(() => initialOptions.theme, (theme) => {
   monaco.editor.setTheme(theme)
@@ -95,6 +96,7 @@ class EditorInfo {
     state.editors.set(this.uri, monacoEditor)
 
     monacoEditor.onDidFocusEditorText(() => {
+      virtualKeyState.show = true
       state.activeMonacoEditor = monacoEditor
       if (state.activeEditorListeners && state.activeEditorListeners.length > 0) {
         for (const activeEditorListener of state.activeEditorListeners) {

app/components/VirtualKey/index.jsx

@@ -1,7 +1,12 @@
 import React, { Component } from 'react'
-import dispatchCommand from 'commands/dispatchCommand'
+import editorState from '../MonacoEditor/state'
+import { observable } from 'mobx'
+import { observer } from 'mobx-react'
 
 const keys = `{}()<>[]"';\/=+-:,.?&|!_\`$%*#@^~`
+const state = observable({
+  show: false
+})
 
 class VirtualKey extends Component {
   constructor(props) {
@@ -10,28 +15,67 @@ class VirtualKey extends Component {
   }
 
   emitterEvent(item) {
-    dispatchCommand('highlight_line')
-    const keyboardEvent = new KeyboardEvent('keypress', {bubbles:true}) 
-    Object.defineProperty(keyboardEvent, 'charCode', 
-      { get:() => this.charCodeVal }
-    )
-
-    keyboardEvent.charCodeVal = item.charCodeAt()
-    // console.log(ke)
-    document.querySelector('.monaco-editor').dispatchEvent(keyboardEvent)
+    const monacoEditor = editorState.activeMonacoEditor
+    if (!monacoEditor) return
+
+    if (item === 'Tab') {
+      item = '\t'
+    }
+
+    if (item === 'undo') {
+      monacoEditor.trigger('', 'undo')
+      return
+    }
+
+    if (item === 'redo') {
+      monacoEditor.trigger('', 'redo')
+      return
+    }
+
+    monacoEditor.trigger('', 'type', { text: item })
+    // Insert pair symbols
+    let nextSymbol = ''
+    switch (item) {
+      case '{': nextSymbol = '}'; break
+      case '(': nextSymbol = ')'; break
+      case '[': nextSymbol = ']'; break
+      case '"': nextSymbol = '"'; break
+      case `'`: nextSymbol = `'`; break
+      case '`': nextSymbol = '`'; break
+      default: break
+    }
+
+    monacoEditor.trigger('', 'type', { text: nextSymbol })
+    if (nextSymbol) {
+      const position = monacoEditor.cursor.getPosition()
+      monacoEditor.setPosition({
+        lineNumber : position.lineNumber, column: position.column - 1
+      })
+    }
   }
 
   render() {
-   return <div style={{ zIndex: '100' }}>
+   return <div className={'virtual-container'}
+               style={{ display: state.show ? 'flex' : 'none' }}>
       <ul className="virtual-keymap">
         {this.keymap.map(
           item => <li onClick={() => this.emitterEvent(item)}>{item}</li>
         )}
-        <li><i className="fa fa-undo" /></li>
-        <li><i className="fa fa-repeat" /></li>
       </ul>
+      <div className="icons">
+        <div onClick={() => this.emitterEvent('undo')}>
+          <i className="fa fa-undo" />
+        </div>
+        <div onClick={() => this.emitterEvent('redo')}>
+          <i className="fa fa-repeat" />
+        </div>
+        <div onClick={() => state.show = false}>
+          <i className="fa fa-times" />
+        </div>
+      </div>
     </div>
   }
 }
 
-export default VirtualKey
+export default observer(VirtualKey)
+export { state }

app/containers/IDE.jsx

@@ -39,7 +39,7 @@ class IDE extends Component {
         <GlobalPrompt />
         <PanelsContainer />
         <Utilities />
-        <VirtualKey />
+        {config.isPad && <VirtualKey />}
       </div>
     )
   }

app/styles/core-ui/PanelAndPane.styl

@@ -29,7 +29,6 @@ safariHeightFix() {
 
 .panel-container,
 .pane-container {
-  z-index: 4
   // not every .pane(l) need safariHeightFix, only children of .resizable do
   &.resizable {
     min-width: 30px;

app/styles/core-ui/VirtualKey.styl

@@ -1,11 +1,35 @@
-.virtual-keymap {
+.virtual-container {
   z-index: 100;
   display: flex;
-  height: 40px;
-  
-  li {
-    width: 40px;
+  position: sticky;
+  top: 0;
+  width: 100%;
+
+  .virtual-keymap {
+    overflow-x: scroll;
+    width: calc(100% - 80px);
     display: flex;
-    align-items: center
+    height: 40px;
+    
+    li {
+      width: 40px;
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .icons {
+    display: flex;
+     
+    i {
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 }

app/styles/dark/index.styl

@@ -20,6 +20,7 @@
 @import './styles/settings';
 @import './styles/plugin';
 @import './styles/search';
+@import './styles/virtualkey';
 
 // 插件用样式
 @import './styles/weapp';

app/styles/dark/styles/virtualkey.styl

@@ -0,0 +1,8 @@
+.virtual-container {
+  background: $tab-background-color;
+  color: $text-color;
+  
+  .icons {
+    background: $$tab-background-color-active;
+  }
+}

app/styles/light/index.styl

@@ -19,3 +19,4 @@
 @import './styles/search';
 @import './styles/plugin';
 @import './styles/menubar';
+@import './styles/virtualkey';

app/styles/light/styles/virtualkey.styl

@@ -0,0 +1,8 @@
+.virtual-container {
+  background: $tab-background-color;
+  color: $text-color;
+  
+  .icons {
+    background: $$tab-background-color-active;
+  }
+}

app/styles/main.styl

@@ -41,10 +41,6 @@
   z-index: z(utilities-container);
 }
 
-.iPadShowKeyboard {
-  display: none;
-}
-
 html,body {
   height: 100%
 }