removing unused code in terminal.js and adding props to remix-ui-terminal.ts

apps/remix-ide/src/app/panels/terminal.js

@@ -1,10 +1,9 @@
-/* global Node, requestAnimationFrame */
+/* global Node, requestAnimationFrame */   // eslint-disable-line
 import React from 'react' // eslint-disable-line
 import ReactDOM from 'react-dom'
-import { RemixUiTerminal } from '@remix-ui/terminal'
+import { RemixUiTerminal } from '@remix-ui/terminal' // eslint-disable-line
 import { Plugin } from '@remixproject/engine'
 import * as packageJson from '../../../../../package.json'
-import * as remixBleach from '../../lib/remixBleach'
 
 var yo = require('yo-yo')
 var javascriptserialize = require('javascript-serialize')
@@ -15,9 +14,6 @@ var EventManager = require('../../lib/events')
 
 var CommandInterpreterAPI = require('../../lib/cmdInterpreterAPI')
 var AutoCompletePopup = require('../ui/auto-complete-popup')
-var TxLogger = require('../../app/ui/txLogger')
-
-var csjs = require('csjs-inject')
 
 var css = require('./styles/terminal-styles')
 
@@ -25,8 +21,6 @@ var KONSOLES = []
 
 function register (api) { KONSOLES.push(api) }
 
-var ghostbar = yo`<div class=${css.ghostbar} bg-secondary></div>`
-
 const profile = {
   displayName: 'Terminal',
   name: 'terminal',
@@ -41,623 +35,84 @@ class Terminal extends Plugin {
     super(profile)
     this.element = document.createElement('div')
     this.element.setAttribute('id', 'terminalView')
-    var self = this
+    this.event = new EventManager()
-    self.event = new EventManager()
+    this.blockchain = opts.blockchain
-    self.blockchain = opts.blockchain
+    this._api = api
-    self._api = api
+    this._opts = opts
-    self._opts = opts
+    this.data = {
-    self.data = {
       lineLength: opts.lineLength || 80, // ????
       session: [],
       activeFilters: { commands: {}, input: '' },
       filterFns: {}
     }
-    self._view = { el: null, bar: null, input: null, term: null, journal: null, cli: null }
+    this._view = { el: null, bar: null, input: null, term: null, journal: null, cli: null }
-    self._components = {}
+    this._components = {}
-    self._components.cmdInterpreter = new CommandInterpreterAPI(this, null, self.blockchain)
+    this._components.cmdInterpreter = new CommandInterpreterAPI(this, null, this.blockchain)
-    self._components.autoCompletePopup = new AutoCompletePopup(self._opts)
+    this._components.autoCompletePopup = new AutoCompletePopup(this._opts)
-    self._components.autoCompletePopup.event.register('handleSelect', function (input) {
+    this._components.autoCompletePopup.event.register('handleSelect', function (input) {
-      const textList = self._view.input.innerText.split(' ')
+      const textList = this._view.input.innerText.split(' ')
       textList.pop()
       textList.push(input)
-      self._view.input.innerText = textList
+      this._view.input.innerText = textList
-      self._view.input.focus()
+      this._view.input.focus()
-      self.putCursor2End(self._view.input)
+      this.putCursor2End(this._view.input)
     })
-    self._commands = {}
+    this._commands = {}
-    self.commands = {}
+    this.commands = {}
-    self._JOURNAL = []
+    this._JOURNAL = []
-    self._jobs = []
+    this._jobs = []
-    self._INDEX = {}
+    this._INDEX = {}
-    self._INDEX.all = []
+    this._INDEX.all = []
-    self._INDEX.allMain = []
+    this._INDEX.allMain = []
-    self._INDEX.commands = {}
+    this._INDEX.commands = {}
-    self._INDEX.commandsMain = {}
+    this._INDEX.commandsMain = {}
-    self.registerCommand('html', self._blocksRenderer('html'), { activate: true })
+    this.registerCommand('html', this._blocksRenderer('html'), { activate: true })
-    self.registerCommand('log', self._blocksRenderer('log'), { activate: true })
+    this.registerCommand('log', this._blocksRenderer('log'), { activate: true })
-    self.registerCommand('info', self._blocksRenderer('info'), { activate: true })
+    this.registerCommand('info', this._blocksRenderer('info'), { activate: true })
-    self.registerCommand('warn', self._blocksRenderer('warn'), { activate: true })
+    this.registerCommand('warn', this._blocksRenderer('warn'), { activate: true })
-    self.registerCommand('error', self._blocksRenderer('error'), { activate: true })
+    this.registerCommand('error', this._blocksRenderer('error'), { activate: true })
-    self.registerCommand('script', function execute (args, scopedCommands, append) {
+    this.registerCommand('script', function execute (args, scopedCommands, append) {
       var script = String(args[0])
-      self._shell(script, scopedCommands, function (error, output) {
+      this._shell(script, scopedCommands, function (error, output) {
         if (error) scopedCommands.error(error)
         else if (output) scopedCommands.log(output)
       })
     }, { activate: true })
     function basicFilter (value, query) { try { return value.indexOf(query) !== -1 } catch (e) { return false } }
 
-    self.registerFilter('log', basicFilter)
+    this.registerFilter('log', basicFilter)
-    self.registerFilter('info', basicFilter)
+    this.registerFilter('info', basicFilter)
-    self.registerFilter('warn', basicFilter)
+    this.registerFilter('warn', basicFilter)
-    self.registerFilter('error', basicFilter)
+    this.registerFilter('error', basicFilter)
-    self.registerFilter('script', basicFilter)
+    this.registerFilter('script', basicFilter)
 
-    if (opts.shell) self._shell = opts.shell // ???
+    if (opts.shell) this._shell = opts.shell // ???
-    register(self)
+    register(this)
   }
 
   onActivation () {
     this.renderComponent()
   }
 
-  // onActivation () {
-  //   this.on('scriptRunner', 'log', (msg) => {
-  //     this.commands.log.apply(this.commands, msg.data)
-  //   })
-  //   this.on('scriptRunner', 'info', (msg) => {
-  //     this.commands.info.apply(this.commands, msg.data)
-  //   })
-  //   this.on('scriptRunner', 'warn', (msg) => {
-  //     this.commands.warn.apply(this.commands, msg.data)
-  //   })
-  //   this.on('scriptRunner', 'error', (msg) => {
-  //     this.commands.error.apply(this.commands, msg.data)
-  //   })
-  // }
-
-  // onDeactivation () {
-  //   this.off('scriptRunner', 'log')
-  //   this.off('scriptRunner', 'info')
-  //   this.off('scriptRunner', 'warn')
-  //   this.off('scriptRunner', 'error')
-  // }
-
-  // log (message) {
-  //   var command = this.commands[message.type]
-  //   if (typeof command === 'function') {
-  //     if (typeof message.value === 'string' && message.type === 'html') {
-  //       var el = document.createElement('div')
-  //       el.innerHTML = remixBleach.sanitize(message.value, {
-  //         list: [
-  //           'a',
-  //           'b',
-  //           'p',
-  //           'em',
-  //           'strong',
-  //           'div',
-  //           'span',
-  //           'ul',
-  //           'li',
-  //           'ol',
-  //           'hr'
-  //         ]
-  //       })
-  //       message.value = el
-  //     }
-  //     command(message.value)
-  //   };
-  // }
-
-  // logHtml (html) {
-  //   var command = this.commands.html
-  //   if (typeof command === 'function') command(html)
-  // }
-
-  // focus () {
-  //   if (this._view.input) this._view.input.focus()
-  // }
-
   render () {
-    // var self = this
-    // if (self._view.el) return self._view.el
-    //self._view.journal = yo`<div id="journal" class=${css.journal} data-id="terminalJournal"></div>`
-    // self._view.input = yo`
-    //   <span class=${css.input} onload=${() => { this.focus() }} onpaste=${paste} onkeydown=${change}></span>
-    // `
-   // self._view.input.setAttribute('spellcheck', 'false')
-    // self._view.input.setAttribute('contenteditable', 'true')
-    // self._view.input.setAttribute('id', 'terminalCliInput')
-    // self._view.input.setAttribute('data-id', 'terminalCliInput')
-
-    // self._view.input.innerText = '\n'
-    // self._view.cli = yo`
-    //   <div id="terminalCli" data-id="terminalCli" class="${css.cli}" onclick=${focusinput}>
-    //     <span class=${css.prompt}>${'>'}</span>
-    //     ${self._view.input}
-    //   </div>
-    // `
-
-    // self._view.icon = yo`
-    //   <i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize}
-    //   class="mx-2 ${css.toggleTerminal} fas fa-angle-double-down" data-id="terminalToggleIcon"></i>`
-    // self._view.dragbar = yo`
-    //   <div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
-
-    // self._view.pendingTxCount = yo`<div class="mx-2" title='Pending Transactions'>0</div>`
-    // self._view.inputSearch = yo`<input
-    //   spellcheck="false"
-    //   type="text"
-    //   class="border ${css.filter} form-control"
-    //   id="searchInput"
-    //   onkeydown=${filter}
-    //   placeholder="Search with transaction hash or address"
-    //   data-id="terminalInputSearch">
-    // </input>`
-    // self._view.bar = yo`
-    //   <div class="${css.bar}">
-    //     ${self._view.dragbar}
-    //     <div class="${css.menu} border-top border-dark bg-light" data-id="terminalToggleMenu">
-    //       ${self._view.icon}
-    //       <div class="mx-2" id="clearConsole" data-id="terminalClearConsole" onclick=${clear}>
-    //         <i class="fas fa-ban" aria-hidden="true" title="Clear console"
-    //         onmouseenter=${hover} onmouseleave=${hover}></i>
-    //       </div>
-    //       ${self._view.pendingTxCount}
-    //       <div class=${css.verticalLine}></div>
-    //       <div class="pt-1 h-80 mx-3 align-items-center ${css.listenOnNetwork} custom-control custom-checkbox">
-    //         <input
-    //           class="custom-control-input"
-    //           id="listenNetworkCheck"
-    //           onchange=${listenOnNetwork}
-    //           type="checkbox"
-    //           title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
-    //         >
-    //         <label
-    //           class="pt-1 form-check-label custom-control-label text-nowrap""
-    //           title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
-    //           for="listenNetworkCheck"
-    //         >
-    //           listen on network
-    //         </label>
-    //       </div>
-    //       <div class=${css.search}>
-    //         <i class="fas fa-search ${css.searchIcon} bg-light" aria-hidden="true"></i>
-    //         ${self._view.inputSearch}
-    //       </div>
-    //     </div>
-    //   </div>
-    // `
-    // self._view.term = yo`
-    //   <div class="${css.terminal_container}" tabindex="-1" data-id="terminalContainer" onscroll=${throttle(reattach, 10)} onkeydown=${focusinput}>
-    //     ${self._components.autoCompletePopup.render()}
-    //     <div data-id="terminalContainerDisplay" style="
-    //       position: absolute;
-    //       height: 100%;
-    //       width: 100%;
-    //       opacity: 0.1;
-    //       z-index: -1;
-    //     "></div>
-    //     <div class=${css.terminal}>
-    //         ${self._view.journal}
-    //         ${self._view.cli}
-    //     </div>
-    //   </div>
-    // `
-    // self._view.el = yo`
-    //   <div class="${css.panel}" style="height: 180px;">
-    //     ${self._view.bar}
-    //     ${self._view.term}
-    //   </div>
-    // `
-    // setInterval(async () => {
-    //   try {
-    //     self._view.pendingTxCount.innerHTML = await self.call('udapp', 'pendingTransactionsCount')
-    //   } catch (err) {}
-    // }, 1000)
-
-    // function listenOnNetwork (ev) {
-    //   self.event.trigger('listenOnNetWork', [ev.currentTarget.checked])
-    // }
-    //function paste (event) {
-      // const selection = window.getSelection()
-      // if (!selection.rangeCount) return false
-      // event.preventDefault()
-      // event.stopPropagation()
-      // var clipboard = (event.clipboardData || window.clipboardData)
-      // var text = clipboard.getData('text/plain')
-      // text = text.replace(/[^\x20-\xFF]/gi, '') // remove non-UTF-8 characters
-      // var temp = document.createElement('div')
-      // temp.innerHTML = text
-      // var textnode = document.createTextNode(temp.textContent)
-      // selection.getRangeAt(0).insertNode(textnode)
-      // selection.empty()
-      // self.scroll2bottom()
-      // placeCaretAtEnd(event.currentTarget)
-    //}
-    //function placeCaretAtEnd (el) {
-      // el.focus()
-      // var range = document.createRange()
-      // range.selectNodeContents(el)
-      // range.collapse(false)
-      // var sel = window.getSelection()
-      // sel.removeAllRanges()
-      // sel.addRange(range)
-   // }
-   // function throttle (fn, wait) {
-      // var time = Date.now()
-      // return function debounce () {
-      //   if ((time + wait - Date.now()) < 0) {
-      //     fn.apply(this, arguments)
-      //     time = Date.now()
-      //   }
-      // }
-   // }
-    // var css2 = csjs`
-    //   .anchor            {
-    //     position         : static;
-    //     border-top       : 2px dotted blue;
-    //     height           : 10px;
-    //   }
-    //   .overlay           {
-    //     position         : absolute;
-    //     width            : 100%;
-    //     display          : flex;
-    //     align-items      : center;
-    //     justify-content  : center;
-    //     bottom           : 0;
-    //     right            : 15px;
-    //     min-height       : 20px;
-    //   }
-    //   .text              {
-    //     z-index          : 2;
-    //     color            : black;
-    //     font-weight      : bold;
-    //     pointer-events   : none;
-    //   }
-    //   .background        {
-    //     z-index          : 1;
-    //     opacity          : 0.8;
-    //     background-color : #a6aeba;
-    //     cursor           : pointer;
-    //   }
-    //   .ul                 {
-    //     padding-left     : 20px;
-    //     padding-bottom   : 5px;
-    //   }
-    // `
-    // var text = yo`<div class="${css2.overlay} ${css2.text}"></div>`
-    // var background = yo`<div class="${css2.overlay} ${css2.background}"></div>`
-    // var placeholder = yo`<div class=${css2.anchor}>${background}${text}</div>`
-    // var inserted = false
-
-    // window.addEventListener('resize', function (event) {
-    //   self.event.trigger('resize', [])
-    //   self.event.trigger('resize', [])
-    // })
-
-    //function focusinput (event) {
-      // if (
-      //   event.altKey ||
-      //   event.ctrlKey ||
-      //   event.metaKey ||
-      //   event.shiftKey ||
-      //   event.key === 'Down' ||
-      //   event.key === 'ArrowDown' ||
-      //   event.key === 'Up' ||
-      //   event.key === 'ArrowUp' ||
-      //   event.key === 'Left' ||
-      //   event.key === 'ArrowLeft' ||
-      //   event.key === 'Right' ||
-      //   event.key === 'ArrowRight' ||
-      //   event.key === 'Esc' ||
-      //   event.key === 'Escape'
-      // ) return
-
-      // refocus()
-    //}
-
-    // function refocus () {
-    //   self._view.input.focus()
-    //   reattach({ currentTarget: self._view.term })
-    //   delete self.scroll2bottom
-    //   self.scroll2bottom()
-    // }
-    //function reattach (event) {
-      // var el = event.currentTarget
-      // var isBottomed = el.scrollHeight - el.scrollTop - el.clientHeight < 30
-      // if (isBottomed) {
-      //   if (inserted) {
-      //     text.innerText = ''
-      //     background.onclick = undefined
-      //     if (placeholder.parentElement) self._view.journal.removeChild(placeholder)
-      //   }
-      //   inserted = false
-      //   delete self.scroll2bottom
-      // } else {
-      //   if (!inserted) self._view.journal.appendChild(placeholder)
-      //   inserted = true
-      //   check()
-      //   if (!placeholder.nextElementSibling) {
-      //     placeholder.style.display = 'none'
-      //   } else {
-      //     placeholder.style = ''
-      //   }
-      //   self.scroll2bottom = function () {
-      //     var next = placeholder.nextElementSibling
-      //     if (next) {
-      //       placeholder.style = ''
-      //       check()
-      //       var messages = 1
-      //       while ((next = next.nextElementSibling)) messages += 1
-      //       text.innerText = `${messages} new unread log entries`
-      //     } else {
-      //       placeholder.style.display = 'none'
-      //     }
-      //   }
-      // }
-    //}
-    //function check () {
-      // var pos1 = self._view.term.offsetHeight + self._view.term.scrollTop - (self._view.el.offsetHeight * 0.15)
-      // var pos2 = placeholder.offsetTop
-      // if ((pos1 - pos2) > 0) {
-      //   text.style.display = 'none'
-      //   background.style.position = 'relative'
-      //   background.style.opacity = 0.3
-      //   background.style.right = 0
-      //   background.style.borderBox = 'content-box'
-      //   background.style.padding = '2px'
-      //   background.style.height = (self._view.journal.offsetHeight - (placeholder.offsetTop + placeholder.offsetHeight)) + 'px'
-      //   background.onclick = undefined
-      //   background.style.cursor = 'default'
-      //   background.style.pointerEvents = 'none'
-      // } else {
-      //   background.style = ''
-      //   text.style = ''
-      //   background.onclick = function (event) {
-      //     placeholder.scrollIntoView()
-      //     check()
-      //   }
-      // }
-    //}
-    //function hover (event) { event.currentTarget.classList.toggle(css.hover) }
-    //function minimize (event) {
-      // event.preventDefault()
-      // event.stopPropagation()
-      // if (event.button === 0) {
-      //   var classList = self._view.icon.classList
-      //   classList.toggle('fa-angle-double-down')
-      //   classList.toggle('fa-angle-double-up')
-      //   self.event.trigger('resize', [])
-      // }
-    //}
-   // var filtertimeout = null
-    //function filter (event) {
-      // if (filtertimeout) {
-      //   clearTimeout(filtertimeout)
-      // }
-      // filtertimeout = setTimeout(() => {
-      //   self.updateJournal({ type: 'search', value: self._view.inputSearch.value })
-      //   self.scroll2bottom()
-      // }, 500)
-   // }
-    // function clear (event) {
-    //   refocus()
-    //   self._view.journal.innerHTML = ''
-    // }
-    // ----------------- resizeable ui ---------------
-    //function mousedown (event) {
-      // event.preventDefault()
-      // if (event.which === 1) {
-      //   moveGhostbar(event)
-      //   document.body.appendChild(ghostbar)
-      //   document.addEventListener('mousemove', moveGhostbar)
-      //   document.addEventListener('mouseup', removeGhostbar)
-      //   document.addEventListener('keydown', cancelGhostbar)
-      // }
-    //}
-    //function cancelGhostbar (event) {
-      // if (event.keyCode === 27) {
-      //   document.body.removeChild(ghostbar)
-      //   document.removeEventListener('mousemove', moveGhostbar)
-      //   document.removeEventListener('mouseup', removeGhostbar)
-      //   document.removeEventListener('keydown', cancelGhostbar)
-      // }
-   // }
-    // function moveGhostbar (event) { // @NOTE HORIZONTAL ghostbar
-    //   ghostbar.style.top = self._api.getPosition(event) + 'px'
-    // }
-    // function removeGhostbar (event) {
-    //   if (self._view.icon.classList.contains('fa-angle-double-up')) {
-    //     self._view.icon.classList.toggle('fa-angle-double-down')
-    //     self._view.icon.classList.toggle('fa-angle-double-up')
-    //   }
-    //   document.body.removeChild(ghostbar)
-    //   document.removeEventListener('mousemove', moveGhostbar)
-    //   document.removeEventListener('mouseup', removeGhostbar)
-    //   document.removeEventListener('keydown', cancelGhostbar)
-    //   self.event.trigger('resize', [self._api.getPosition(event)])
-    // }
-
-    // self._cmdHistory = []
-    // self._cmdIndex = -1
-    // self._cmdTemp = ''
-
-    // var intro = yo`
-    //   <div><div> - Welcome to Remix ${packageJson.version} - </div><br>
-    //   <div>You can use this terminal to: </div>
-    //   <ul class=${css2.ul}>
-    //     <li>Check transactions details and start debugging.</li>
-    //     <li>Execute JavaScript scripts:
-    //       <br />
-    //       <i> - Input a script directly in the command line interface </i>
-    //       <br />
-    //       <i> - Select a Javascript file in the file explorer and then run \`remix.execute()\` or \`remix.exeCurrent()\`  in the command line interface  </i>
-    //       <br />
-    //       <i> - Right click on a JavaScript file in the file explorer and then click \`Run\` </i>
-    //     </li>
-    //   </ul>
-    //   <div>The following libraries are accessible:</div>
-    //   <ul class=${css2.ul}>
-    //     <li><a target="_blank" href="https://web3js.readthedocs.io/en/1.0/">web3 version 1.0.0</a></li>
-    //     <li><a target="_blank" href="https://docs.ethers.io">ethers.js</a> </li>
-    //     <li><a target="_blank" href="https://www.npmjs.com/package/swarmgw">swarmgw</a> </li>
-    //     <li>remix (run remix.help() for more info)</li>
-    //   </ul>
-    //   </div>
-    // `
-
-    //self._shell('remix.help()', self.commands, () => {})
-    //self.commands.html(intro)
-
-    //self._components.txLogger = new TxLogger(this, self.blockchain)
-    // self._components.txLogger.event.register('debuggingRequested', async (hash) => {
-    //   // TODO should probably be in the run module
-    //   if (!await self._opts.appManager.isActive('debugger')) await self._opts.appManager.activatePlugin('debugger')
-    //   this.call('menuicons', 'select', 'debugger')
-    //   this.call('debugger', 'debug', hash)
-    // })
-
-   // return self._view.el
     return this.element
-    // function wrapScript (script) {
-    //   const isKnownScript = ['remix.', 'git'].some(prefix => script.trim().startsWith(prefix))
-    //   if (isKnownScript) return script
-    //   return `
-    //     try {
-    //       const ret = ${script};
-    //       if (ret instanceof Promise) {
-    //         ret.then((result) => { console.log(result) }).catch((error) => { console.log(error) })
-    //       } else {
-    //         console.log(ret)
-    //       }   
-    //     } catch (e) {
-    //       console.log(e.message)
-    //     }
-    //     `
-    // }
-    //function change (event) {
-    //   if (self._components.autoCompletePopup.handleAutoComplete(
-    //     event,
-    //     self._view.input.innerText)) return
-    //   if (self._view.input.innerText.length === 0) self._view.input.innerText += '\n'
-    //   if (event.which === 13) {
-    //     if (event.ctrlKey) { // <ctrl+enter>
-    //       self._view.input.innerText += '\n'
-    //       self.putCursor2End(self._view.input)
-    //       self.scroll2bottom()
-    //       self._components.autoCompletePopup.removeAutoComplete()
-    //     } else { // <enter>
-    //       self._cmdIndex = -1
-    //       self._cmdTemp = ''
-    //       event.preventDefault()
-    //       var script = self._view.input.innerText.trim()
-    //       self._view.input.innerText = '\n'
-    //       if (script.length) {
-    //         self._cmdHistory.unshift(script)
-    //         self.commands.script(wrapScript(script))
-    //       }
-    //       self._components.autoCompletePopup.removeAutoComplete()
-    //     }
-    //   } else if (event.which === 38) { // <arrowUp>
-    //     var len = self._cmdHistory.length
-    //     if (len === 0) return event.preventDefault()
-    //     if (self._cmdHistory.length - 1 > self._cmdIndex) {
-    //       self._cmdIndex++
-    //     }
-    //     self._view.input.innerText = self._cmdHistory[self._cmdIndex]
-    //     self.putCursor2End(self._view.input)
-    //     self.scroll2bottom()
-    //   } else if (event.which === 40) { // <arrowDown>
-    //     if (self._cmdIndex > -1) {
-    //       self._cmdIndex--
-    //     }
-    //     self._view.input.innerText = self._cmdIndex >= 0 ? self._cmdHistory[self._cmdIndex] : self._cmdTemp
-    //     self.putCursor2End(self._view.input)
-    //     self.scroll2bottom()
-    //   } else {
-    //     self._cmdTemp = self._view.input.innerText
-    //   }
-    //}
   }
 
   renderComponent () {
     ReactDOM.render(
-      <RemixUiTerminal />,
+      <RemixUiTerminal
+        event = {this.event}
+        autoCompletePopupEvent = {this._components.autoCompletePopup.event}
+        blockchain = {this.blockchain}
+        api = {this._api}
+        options = {this.opts}
+        data = {this.data}
+        cmdInterpreter = {this._components.cmdInterpreter}
+        autoCompletePopup = {this._components.autoCompletePopup}/>,
       this.element
     )
   }
 
-  // putCursor2End (editable) {
-  //   var range = document.createRange()
-  //   range.selectNode(editable)
-  //   var child = editable
-  //   var chars
-
-  //   while (child) {
-  //     if (child.lastChild) child = child.lastChild
-  //     else break
-  //     if (child.nodeType === Node.TEXT_NODE) {
-  //       chars = child.textContent.length
-  //     } else {
-  //       chars = child.innerHTML.length
-  //     }
-  //   }
-
-  //   range.setEnd(child, chars)
-  //   var toStart = true
-  //   var toEnd = !toStart
-  //   range.collapse(toEnd)
-
-  //   var sel = window.getSelection()
-  //   sel.removeAllRanges()
-  //   sel.addRange(range)
-
-  //   editable.focus()
-  // }
-
-  //updateJournal (filterEvent) {
-    // var self = this
-    // var commands = self.data.activeFilters.commands
-    // var value = filterEvent.value
-    // if (filterEvent.type === 'select') {
-    //   commands[value] = true
-    //   if (!self._INDEX.commandsMain[value]) return
-    //   self._INDEX.commandsMain[value].forEach(item => {
-    //     item.root.steps.forEach(item => { self._JOURNAL[item.gidx] = item })
-    //     self._JOURNAL[item.gidx] = item
-    //   })
-    // } 
-    // else if (filterEvent.type === 'deselect') {
-    //   commands[value] = false
-    //   if (!self._INDEX.commandsMain[value]) return
-    //   self._INDEX.commandsMain[value].forEach(item => {
-    //     item.root.steps.forEach(item => { self._JOURNAL[item.gidx].hide = true })
-    //     self._JOURNAL[item.gidx].hide = true
-    //   })
-    // } else if (filterEvent.type === 'search') {
-    //   if (value !== self.data.activeFilters.input) {
-    //     var query = self.data.activeFilters.input = value
-    //     var items = self._JOURNAL
-    //     for (var gidx = 0, len = items.length; gidx < len; gidx++) {
-    //       var item = items[gidx]
-    //       if (item && self.data.filterFns[item.cmd]) {
-    //         var show = query.length ? self.data.filterFns[item.cmd](item.args, query) : true
-    //         item.hide = !show
-    //       }
-    //     }
-    //   }
-    // }
-    // var df = document.createDocumentFragment()
-    // self._JOURNAL.forEach(item => {
-    //   if (item && item.el && !item.hide) df.appendChild(item.el)
-    // })
-    // self._view.journal.innerHTML = ''
-    // requestAnimationFrame(function updateDOM () {
-    //   self._view.journal.appendChild(df)
-    // })
-  //}
-
   _appendItem (item) {
     var self = this
     var { el, gidx } = item
@@ -785,7 +240,7 @@ class Terminal extends Plugin {
     if (script.indexOf('remix.') === 0) {
       // we keep the old feature. This will basically only be called when the command is querying the "remix" object.
       // for all the other case, we use the Code Executor plugin
-      var context = domTerminalFeatures(self, scopedCommands, self.blockchain)
+      var context = domTerminalFeatures(scopedCommands, self.blockchain)
       try {
         var cmds = vm.createContext(context)
         var result = vm.runInContext(script, cmds)
@@ -809,11 +264,11 @@ class Terminal extends Plugin {
   }
 }
 
-// function domTerminalFeatures (self, scopedCommands, blockchain) {
+function domTerminalFeatures (scopedCommands, blockchain) {
-//   return {
+  return {
-//     remix: self._components.cmdInterpreter
+    remix: this._components.cmdInterpreter
-//   }
+  }
-// }
+}
 
 function blockify (el) { return yo`<div class="px-4 ${css.block}" data-id="block_${el.getAttribute ? el.getAttribute('id') : ''}">${el}</div>` }
 

libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx

@@ -1,30 +1,53 @@
-import React, { useState } from 'react' // eslint-disable-line
+import React, { useState, useEffect } from 'react' // eslint-disable-line
 
 import './remix-ui-terminal.css'
 
 /* eslint-disable-next-line */
 export interface RemixUiTerminalProps {
   propterties: any
+  event: any
+  autoCompletePopupEvent: any
+  autoCompletePopup: any
+  blockchain: any
+  api: any
+  options: any
+  data: any
+  cmdInterpreter: any
 }
 
 export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
 
   const [toggleDownUp, setToggleDownUp] = useState('fa-angle-double-down')
 
+  // events
+  useEffect(() => {
+    // window.addEventListener('resize', function () {
+    //   props.event.trigger('resize', [])
+    //   props.event.trigger('resize', [])
+    // })
+    // return () => {
+    //   window.removeEventListener('resize', function () {
+    //     props.event.trigger('resize', [])
+    //     props.event.trigger('resize', [])
+    //   })
+    // }
+  }, [])
+
   const handleMinimizeTerminal = (event) => {
-    console.log('clikced')
+    console.log('clikced', props.event)
     if (toggleDownUp === 'fa-angle-double-down') {
       console.log('clikced down')
       setToggleDownUp('fa-angle-double-up')
+      props.event.trigger.resize('resize', [])
     } else {
       console.log('clikced up')
       // event.trigger('resize', [])
       setToggleDownUp('fa-angle-double-down')
     }
+    console.log(props.event, 'event.trigger')
   }
   return (
     <div>
-      {console.log({ toggleDownUp })}
       <div className="bar">
         {/* ${self._view.dragbar} */}
         <div className="dragbarHorizontal"></div>
@@ -68,7 +91,20 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
           </div>
         </div>
       </div>
-      Welcome to remix-ui-terminal {console.log(props.propterties, ' properties david')}
+      <div className="terminal_container" data-id="terminalContainer" > 
+        {/* onScroll=${throttle(reattach, 10)} onkeydown=${focusinput} */}
+        {/* {props.autoCompletePopup.render()} */}
+        {console.log({ props })}
+        <div data-id="terminalContainerDisplay" style = {{
+          position: 'absolute',
+          height: '100',
+          width: '100',
+          opacity: '0.1',
+          zIndex: -1
+        }}></div>
+        <div className="terminal">
+        </div>
+      </div>
     </div>
   )
 }