diff --git a/apps/remix-ide/src/app/panels/terminal.js b/apps/remix-ide/src/app/panels/terminal.js index eb67e15e55..39c5c844b1 100644 --- a/apps/remix-ide/src/app/panels/terminal.js +++ b/apps/remix-ide/src/app/panels/terminal.js @@ -4,6 +4,7 @@ import ReactDOM from 'react-dom' 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') @@ -74,18 +75,18 @@ class Terminal extends Plugin { } 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) - }) + // 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) + // }) this.renderComponent() } @@ -96,6 +97,37 @@ class Terminal extends Plugin { 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) + } + render () { return this.element } diff --git a/libs/remix-ui/terminal/src/lib/actions/terminalAction.ts b/libs/remix-ui/terminal/src/lib/actions/terminalAction.ts index 4e14ac46c8..a986dd8ddc 100644 --- a/libs/remix-ui/terminal/src/lib/actions/terminalAction.ts +++ b/libs/remix-ui/terminal/src/lib/actions/terminalAction.ts @@ -101,3 +101,31 @@ export const filterFnAction = (name, filterFn, dispatch) => { data.filterFns[name] = filterFn dispatch({ type: name, payload: { data: data } }) } + +export const registerLogScriptRunnerAction = (event, commandName, commandFn, dispatch) => { + event.on('scriptRunner', commandName, (msg) => { + commandFn.log.apply(commandFn, msg.data) + dispatch({ type: commandName, payload: { commandFn, message: msg.data } }) + }) +} + +export const registerInfoScriptRunnerAction = (event, commandName, commandFn, dispatch) => { + event.on('scriptRunner', commandName, (msg) => { + commandFn.info.apply(commandFn, msg.data) + dispatch({ type: commandName, payload: { commandFn, message: msg.data } }) + }) +} + +export const registerWarnScriptRunnerAction = (event, commandName, commandFn, dispatch) => { + event.on('scriptRunner', commandName, (msg) => { + commandFn.warn.apply(commandFn, msg.data) + dispatch({ type: commandName, payload: { commandFn, message: msg.data } }) + }) +} + +export const registerErrorScriptRunnerAction = (event, commandName, commandFn, dispatch) => { + event.on('scriptRunner', commandName, (msg) => { + commandFn.error.apply(commandFn, msg.data) + dispatch({ type: commandName, payload: { commandFn, message: msg.data } }) + }) +} diff --git a/libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts b/libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts index 43fae4b344..5c422ead5e 100644 --- a/libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts +++ b/libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts @@ -17,7 +17,8 @@ export const initialState = { _INDEXall: [], _INDEXallMain: [], _INDEXcommands: {}, - _INDEXcommandsMain: {} + _INDEXcommandsMain: {}, + message: [] } export const registerCommandReducer = (state, action) => { @@ -118,3 +119,13 @@ export const addCommandHistoryReducer = (state, action) => { return { state } } } + +export const registerScriptRunnerReducer = (state, action) => { + console.log({ state }, { action }, 'register script runner reducer') + switch (action.type) { + case 'log': + return { + ...state + } + } +} diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css index 7bd2a9f90d..99a0a3927c 100644 --- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css +++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css @@ -123,6 +123,11 @@ element.style { cursor : row-resize; z-index : 999; } + + .dragbarHorizontal:hover { + background-color: #007AA6; + border:2px solid #007AA6; + } .listenOnNetwork { min-height: auto; } diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx index 9f2f421b09..2316173ede 100644 --- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx +++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx @@ -1,8 +1,8 @@ import React, { useState, useEffect, useReducer, useRef, SyntheticEvent, MouseEvent } from 'react' // eslint-disable-line import { useKeyPress } from './custom-hooks/useKeyPress' // eslint-disable-line import { useWindowResize } from 'beautiful-react-hooks' -import { registerCommandAction, filterFnAction } from './actions/terminalAction' -import { initialState, registerCommandReducer, registerFilterReducer, addCommandHistoryReducer } from './reducers/terminalReducer' +import { registerCommandAction, filterFnAction, registerLogScriptRunnerAction, registerInfoScriptRunnerAction, registerErrorScriptRunnerAction, registerWarnScriptRunnerAction } from './actions/terminalAction' +import { initialState, registerCommandReducer, registerFilterReducer, addCommandHistoryReducer, registerScriptRunnerReducer } from './reducers/terminalReducer' import javascriptserialize from 'javascript-serialize' import jsbeautify from 'js-beautify' @@ -51,6 +51,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => { const [newstate, dispatch] = useReducer(registerCommandReducer, initialState) const [filterState, filterDispatch] = useReducer(registerFilterReducer, initialState) const [cmdHistory, cmdHistoryDispatch] = useReducer(addCommandHistoryReducer, initialState) + const [scriptRunnserState, scriptRunnerDispatch] = useReducer(registerScriptRunnerReducer, initialState) const [state, setState] = useState({ journalBlocks: { @@ -110,6 +111,10 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => { const inputEl = useRef(null) // events useEffect(() => { + registerLogScriptRunnerAction(props.thisState, 'log', newstate.commands, scriptRunnerDispatch) + registerInfoScriptRunnerAction(props.thisState, 'info', newstate.commands, scriptRunnerDispatch) + registerWarnScriptRunnerAction(props.thisState, 'warn', newstate.commands, scriptRunnerDispatch) + registerErrorScriptRunnerAction(props.thisState, 'error', newstate.commands, scriptRunnerDispatch) registerCommandAction('html', _blocksRenderer('html'), { activate: true }, dispatch) registerCommandAction('log', _blocksRenderer('log'), { activate: true }, dispatch) registerCommandAction('info', _blocksRenderer('info'), { activate: true }, dispatch) @@ -127,6 +132,10 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => { filterFnAction('warn', basicFilter, filterDispatch) filterFnAction('error', basicFilter, filterDispatch) filterFnAction('script', basicFilter, filterDispatch) + registerLogScriptRunnerAction(props.thisState, 'log', newstate.commands, scriptRunnerDispatch) + registerInfoScriptRunnerAction(props.thisState, 'info', newstate.commands, scriptRunnerDispatch) + registerWarnScriptRunnerAction(props.thisState, 'warn', newstate.commands, scriptRunnerDispatch) + registerErrorScriptRunnerAction(props.thisState, 'error', newstate.commands, scriptRunnerDispatch) // console.log({ htmlresullt }, { logresult }) // dispatch({ type: 'html', payload: { commands: htmlresullt.commands } }) // dispatch({ type: 'log', payload: { _commands: logresult._commands } }) @@ -195,34 +204,34 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => { inputEl.current.focus() } - const putCursor2End = (editable) => { - var range = document.createRange() - console.log({ range }) - range.selectNode(editable) - var child = editable - var chars - console.log({ child }) - 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() - } + // const putCursor2End = (editable) => { + // var range = document.createRange() + // console.log({ range }) + // range.selectNode(editable) + // var child = editable + // var chars + // console.log({ child }) + // 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() + // } const wrapScript = (script) => { const isKnownScript = ['remix.', 'git'].some(prefix => script.trim().startsWith(prefix)) @@ -371,10 +380,26 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => { } useEffect(() => { + // document.addEventListener('mousemove', changeBg) + // function changeBg () { + // document.getElementById('dragId').style.backgroundColor = 'skyblue' + // } + // document.addEventListener('mouseup', changeBg2) + // function changeBg2 () { + // document.getElementById('dragId').style.backgroundColor = '' + // } document.addEventListener('mousemove', onMouseMove) document.addEventListener('mouseup', onMouseUp) return () => { + // document.addEventListener('mousemove', changeBg) + // function changeBg () { + // document.getElementById('dragId').style.backgroundColor = 'skyblue' + // } + // document.addEventListener('mouseup', changeBg2) + // function changeBg2 () { + // document.getElementById('dragId').style.backgroundColor = '' + // } document.removeEventListener('mousemove', onMouseMove) document.removeEventListener('mouseup', onMouseUp) } @@ -388,7 +413,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => { setLeftHeight(leftRef.offsetHeight) return } - leftRef.style.height = `${leftHeight}px` } }, [leftHeight, setLeftHeight]) @@ -447,7 +471,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => { {console.log({ newstate })}
{/* ${self._view.dragbar} */} -
+
{/* ${self._view.icon} */}