react-terminal-plus
Advanced tools
Comparing version
@@ -1,614 +0,1 @@ | ||
import * as React from 'react'; | ||
import { CancelablePromise } from 'cancelable-promise'; | ||
/****************************************************************************** | ||
Copyright (c) Microsoft Corporation. | ||
Permission to use, copy, modify, and/or distribute this software for any | ||
purpose with or without fee is hereby granted. | ||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH | ||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY | ||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, | ||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM | ||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR | ||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR | ||
PERFORMANCE OF THIS SOFTWARE. | ||
***************************************************************************** */ | ||
/* global Reflect, Promise */ | ||
var __assign = function() { | ||
__assign = Object.assign || function __assign(t) { | ||
for (var s, i = 1, n = arguments.length; i < n; i++) { | ||
s = arguments[i]; | ||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; | ||
} | ||
return t; | ||
}; | ||
return __assign.apply(this, arguments); | ||
}; | ||
function __awaiter(thisArg, _arguments, P, generator) { | ||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
return new (P || (P = Promise))(function (resolve, reject) { | ||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } | ||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } | ||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } | ||
step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
}); | ||
} | ||
function __generator(thisArg, body) { | ||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; | ||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; | ||
function verb(n) { return function (v) { return step([n, v]); }; } | ||
function step(op) { | ||
if (f) throw new TypeError("Generator is already executing."); | ||
while (g && (g = 0, op[0] && (_ = 0)), _) try { | ||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; | ||
if (y = 0, t) op = [op[0] & 2, t.value]; | ||
switch (op[0]) { | ||
case 0: case 1: t = op; break; | ||
case 4: _.label++; return { value: op[1], done: false }; | ||
case 5: _.label++; y = op[1]; op = [0]; continue; | ||
case 7: op = _.ops.pop(); _.trys.pop(); continue; | ||
default: | ||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } | ||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } | ||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } | ||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } | ||
if (t[2]) _.ops.pop(); | ||
_.trys.pop(); continue; | ||
} | ||
op = body.call(thisArg, _); | ||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } | ||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; | ||
} | ||
} | ||
function __spreadArray(to, from, pack) { | ||
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { | ||
if (ar || !(i in from)) { | ||
if (!ar) ar = Array.prototype.slice.call(from, 0, i); | ||
ar[i] = from[i]; | ||
} | ||
} | ||
return to.concat(ar || Array.prototype.slice.call(from)); | ||
} | ||
function styleInject(css, ref) { | ||
if ( ref === void 0 ) ref = {}; | ||
var insertAt = ref.insertAt; | ||
if (!css || typeof document === 'undefined') { return; } | ||
var head = document.head || document.getElementsByTagName('head')[0]; | ||
var style = document.createElement('style'); | ||
style.type = 'text/css'; | ||
if (insertAt === 'top') { | ||
if (head.firstChild) { | ||
head.insertBefore(style, head.firstChild); | ||
} else { | ||
head.appendChild(style); | ||
} | ||
} else { | ||
head.appendChild(style); | ||
} | ||
if (style.styleSheet) { | ||
style.styleSheet.cssText = css; | ||
} else { | ||
style.appendChild(document.createTextNode(css)); | ||
} | ||
} | ||
var css_248z = "@import url(\"https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap\");\n#index_terminalContainer__4seT6 {\n --control-default-bg-color: #ccc;\n --control-close-bg-color: #fc5b57;\n --control-minimize-bg-color: #e5bf3c;\n --control-maximize-bg-color: #57c038;\n}\n\n.index_controls__sXDjs {\n text-align: left;\n height: 26px;\n position: relative;\n top: 4px;\n margin-left: 4px;\n}\n.index_controls__sXDjs .index_consoleCtrl__DI2H1 {\n display: inline-block;\n width: 13px;\n height: 13px;\n margin: 0 3px;\n border-radius: 50%;\n background: var(--control-default-bg-color);\n}\n.index_controls__sXDjs .index_close__XGN9U {\n background: var(--control-close-bg-color);\n}\n.index_controls__sXDjs .index_minimize__pZYTU {\n background: var(--control-minimize-bg-color);\n}\n.index_controls__sXDjs .index_maximize__szRK7 {\n background: var(--control-maximize-bg-color);\n}\n\n.index_editor__JoDSg {\n text-align: left;\n height: 100%;\n padding: 10px 15px;\n overflow-wrap: break-word;\n overflow-y: scroll;\n outline: none;\n font-family: \"Source Code Pro\", monospace;\n font-size: 18px;\n line-height: 22px;\n border-bottom-left-radius: 5px;\n border-bottom-right-radius: 5px;\n}\n.index_editor__JoDSg .index_lineText__j6qNj {\n display: inline;\n position: relative;\n top: -1px;\n margin-left: 8px;\n}\n.index_editor__JoDSg .index_preWhiteSpace__7KwuG {\n white-space: pre-wrap;\n}\n.index_editor__JoDSg .index_caret__VS4iV {\n position: relative;\n}\n.index_editor__JoDSg .index_caret__VS4iV .index_caretAfter__6aXPx {\n content: \"\";\n position: absolute;\n top: 2px;\n width: 10px;\n height: 22px;\n z-index: 10;\n}\n@-moz-keyframes index_blink__FJp0- {\n 0% {\n opacity: 0;\n -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n filter: alpha(opacity=0);\n }\n 100% {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n }\n}\n@-webkit-keyframes index_blink__FJp0- {\n 0% {\n opacity: 0;\n -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n filter: alpha(opacity=0);\n }\n 100% {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n }\n}\n@-o-keyframes index_blink__FJp0- {\n 0% {\n opacity: 0;\n -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n filter: alpha(opacity=0);\n }\n 100% {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n }\n}\n@keyframes index_blink__FJp0- {\n 0% {\n opacity: 0;\n -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n filter: alpha(opacity=0);\n }\n 100% {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n }\n}\n.index_editor__JoDSg a {\n color: #1a87b5;\n}\n\n.index_editorWithTopBar__L6XKw {\n height: calc(100% - 46px);\n}\n\n.index_curvedTop__LX9XS {\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n}\n\n#index_terminalContainer__4seT6 {\n height: 100%;\n}\n\n.index_terminal__teubZ {\n height: 100%;\n width: 100%;\n margin: auto;\n border-radius: 5px;\n}"; | ||
var index$1 = {"terminalContainer":"index_terminalContainer__4seT6","controls":"index_controls__sXDjs","consoleCtrl":"index_consoleCtrl__DI2H1","close":"index_close__XGN9U","minimize":"index_minimize__pZYTU","maximize":"index_maximize__szRK7","editor":"index_editor__JoDSg","lineText":"index_lineText__j6qNj","preWhiteSpace":"index_preWhiteSpace__7KwuG","caret":"index_caret__VS4iV","caretAfter":"index_caretAfter__6aXPx","editorWithTopBar":"index_editorWithTopBar__L6XKw","curvedTop":"index_curvedTop__LX9XS","terminal":"index_terminal__teubZ","blink":"index_blink__FJp0-"}; | ||
styleInject(css_248z); | ||
var styles = index$1; | ||
var StyleContext = React.createContext(null); | ||
var StyleContextProvider = function (props) { | ||
var children = props.children; | ||
return (React.createElement(StyleContext.Provider, { value: styles }, children)); | ||
}; | ||
var darkTheme = { | ||
themeBGColor: "#022833", | ||
themeToolbarColor: "#131519", | ||
themeColor: "#839496", | ||
themePromptColor: "#a917a8" | ||
}; | ||
var lightTheme = { | ||
themeBGColor: "#fdf6e4", | ||
themeToolbarColor: "#d8d8d8", | ||
themeColor: "#333333", | ||
themePromptColor: "#a917a8" | ||
}; | ||
var draculaTheme = { | ||
themeBGColor: "#272B36", | ||
themeToolbarColor: "#DBDBDB", | ||
themeColor: "#FFFEFC", | ||
themePromptColor: "#a917a8" | ||
}; | ||
var materialDarkTheme = { | ||
themeBGColor: "#151515", | ||
themeToolbarColor: "#424242", | ||
themeColor: "#fff", | ||
themePromptColor: "#42A5F5" | ||
}; | ||
var materialLightTheme = { | ||
themeBGColor: '#fafafa', | ||
themeToolbarColor: '#424242', | ||
themeColor: '#151515', | ||
themePromptColor: '#42A5F5', | ||
}; | ||
var materialOceanTheme = { | ||
themeBGColor: '#263238', | ||
themeToolbarColor: '#37474F', | ||
themeColor: '#fff', | ||
themePromptColor: '#C3D82C', | ||
}; | ||
var matrixTheme = { | ||
themeBGColor: "#0D0208", | ||
themeToolbarColor: "#0D0208", | ||
themeColor: "#00FF41", | ||
themePromptColor: "#008F11" | ||
}; | ||
var defaultThemes = { | ||
"dark": darkTheme, | ||
"light": lightTheme, | ||
"dracula": draculaTheme, | ||
"material-dark": materialDarkTheme, | ||
"material-light": materialLightTheme, | ||
"material-ocean": materialOceanTheme, | ||
"matrix": matrixTheme | ||
}; | ||
var ThemeContext = React.createContext(null); | ||
var ThemeContextProvider = function (props) { | ||
var children = props.children; | ||
var themes = __assign(__assign({}, defaultThemes), (children.props.themes || {})); | ||
var currentTheme = themes[children.props.theme] || themes["light"]; | ||
return (React.createElement(ThemeContext.Provider, { value: currentTheme }, children)); | ||
}; | ||
var useClickOutsideEvent = function (ref, clickedInside, setClickedInside) { | ||
var handleClickOutside = function (event) { | ||
if (ref.current && !ref.current.contains(event.target)) { | ||
setClickedInside(false); | ||
} | ||
else { | ||
setClickedInside(true); | ||
} | ||
}; | ||
React.useEffect(function () { | ||
// Bind the event listener | ||
document.addEventListener("mousedown", handleClickOutside); | ||
return function () { | ||
// Unbind the event listener on clean up | ||
document.removeEventListener("mousedown", handleClickOutside); | ||
}; | ||
}); | ||
}; | ||
function Controls(props) { | ||
var style = React.useContext(StyleContext); | ||
var controlButtonLabels = props.controlButtonLabels; | ||
var showControlButtons = props.showControlButtons; | ||
var controlButtons = showControlButtons | ||
? controlButtonLabels.map(function (buttonLabel) { return (React.createElement("div", { key: buttonLabel, className: "".concat(style.consoleCtrl, " ").concat(style[buttonLabel]) })); }) | ||
: null; | ||
return React.createElement("div", { className: style.controls }, controlButtons); | ||
} | ||
var Utils = /** @class */ (function () { | ||
function Utils() { | ||
} | ||
Utils.splitStringAtIndex = function (value, index) { | ||
if (!value) { | ||
return ["", ""]; | ||
} | ||
return [value.substring(0, index), value.substring(index)]; | ||
}; | ||
return Utils; | ||
}()); | ||
var TerminalContext = React.createContext(null); | ||
function terminalReducer(state, action) { | ||
switch (action.type) { | ||
case "CLEAR": { | ||
return __assign(__assign({}, state), { bufferedContent: null, editorInput: "", currentLineStatus: "idle", caretPosition: 0, textBeforeCaret: "", textAfterCaret: "" }); | ||
} | ||
case "CANCEL": { | ||
return __assign(__assign({}, state), { bufferedContent: action.cancelNode, editorInput: "", currentLineStatus: "idle", caretPosition: 0, textBeforeCaret: "", textAfterCaret: "" }); | ||
} | ||
case "SUBMIT": { | ||
var command = action.command; | ||
var newCommands = command ? __spreadArray(__spreadArray([], state.commandsHistory, true), [command], false) : state.commandsHistory; | ||
return __assign(__assign({}, state), { commandsHistory: newCommands, bufferedContent: action.loaderNode, currentLineStatus: "processing", editorInput: "", caretPosition: 0, textBeforeCaret: "", textAfterCaret: "" }); | ||
} | ||
case "SUBMIT_SUCCESS": { | ||
return __assign(__assign({}, state), { bufferedContent: action.successNode, currentLineStatus: "success", editorInput: "", caretPosition: 0, textBeforeCaret: "", textAfterCaret: "" }); | ||
} | ||
case "TYPE": { | ||
var _a = caretTextBeforeUpdate(state), oldCaretTextBefore = _a[0], oldCaretTextAfter = _a[1]; | ||
var newEditorInput = oldCaretTextBefore + action.text + oldCaretTextAfter; | ||
var newCaretPosition = state.caretPosition + 1; | ||
var _b = caretTextAfterUpdate(newEditorInput, newCaretPosition), newCaretTextBefore = _b[0], newCaretTextAfter = _b[1]; | ||
return __assign(__assign({}, state), { caretPosition: newCaretPosition, editorInput: newEditorInput, textAfterCaret: newCaretTextAfter, textBeforeCaret: newCaretTextBefore }); | ||
} | ||
case "DELETE": { | ||
var _c = caretTextBeforeUpdate(state), oldCaretTextBefore = _c[0], oldCaretTextAfter = _c[1]; | ||
var newEditorInput = oldCaretTextBefore.slice(0, -1) + oldCaretTextAfter; | ||
var newCaretPosition = state.caretPosition - 1; | ||
var _d = caretTextAfterUpdate(newEditorInput, newCaretPosition), newCaretTextBefore = _d[0], newCaretTextAfter = _d[1]; | ||
return __assign(__assign({}, state), { editorInput: newEditorInput, caretPosition: newCaretPosition, textAfterCaret: newCaretTextAfter, textBeforeCaret: newCaretTextBefore }); | ||
} | ||
case "COPY": { | ||
return state; | ||
} | ||
case "PASTE": { | ||
var _e = caretTextBeforeUpdate(state), oldCaretTextBefore = _e[0], oldCaretTextAfter = _e[1]; | ||
var newEditorInput = oldCaretTextBefore + action.text + oldCaretTextAfter; | ||
var newCaretPosition = state.caretPosition + action.text.length; | ||
var _f = caretTextAfterUpdate(newEditorInput, newCaretPosition), newCaretTextBefore = _f[0], newCaretTextAfter = _f[1]; | ||
return __assign(__assign({}, state), { editorInput: newEditorInput, caretPosition: newCaretPosition, textAfterCaret: newCaretTextAfter, textBeforeCaret: newCaretTextBefore }); | ||
} | ||
case "ARROW_UP": { | ||
var newEditorInput = action.previousCommand; | ||
var newCaretPosition = action.previousCommand.length; | ||
var _g = caretTextAfterUpdate(newEditorInput, newCaretPosition), newCaretTextBefore = _g[0], newCaretTextAfter = _g[1]; | ||
return __assign(__assign({}, state), { editorInput: newEditorInput, caretPosition: newCaretPosition, textAfterCaret: newCaretTextAfter, textBeforeCaret: newCaretTextBefore }); | ||
} | ||
case "ARROW_DOWN": { | ||
var newEditorInput = action.nextCommand; | ||
var newCaretPosition = action.nextCommand.length; | ||
var _h = caretTextAfterUpdate(newEditorInput, newCaretPosition), newCaretTextBefore = _h[0], newCaretTextAfter = _h[1]; | ||
return __assign(__assign({}, state), { editorInput: newEditorInput, caretPosition: newCaretPosition, textAfterCaret: newCaretTextAfter, textBeforeCaret: newCaretTextBefore }); | ||
} | ||
case "RESET_CARET_POSITION": { | ||
return __assign(__assign({}, state), { textBeforeCaret: "", textAfterCaret: "", caretPosition: 0 }); | ||
} | ||
case "ARROW_LEFT": { | ||
var newCaretPosition = state.caretPosition - 1; | ||
var _j = caretTextAfterUpdate(state.editorInput, newCaretPosition), newCaretTextBefore = _j[0], newCaretTextAfter = _j[1]; | ||
return __assign(__assign({}, state), { caretPosition: newCaretPosition, textAfterCaret: newCaretTextAfter, textBeforeCaret: newCaretTextBefore }); | ||
} | ||
case "ARROW_RIGHT": { | ||
var newCaretPosition = state.caretPosition + 1; | ||
var _k = caretTextAfterUpdate(state.editorInput, newCaretPosition), newCaretTextBefore = _k[0], newCaretTextAfter = _k[1]; | ||
return __assign(__assign({}, state), { caretPosition: newCaretPosition, textAfterCaret: newCaretTextAfter, textBeforeCaret: newCaretTextBefore }); | ||
} | ||
default: { | ||
throw new Error("Unhandled action type: ".concat(JSON.stringify(action))); | ||
} | ||
} | ||
} | ||
function caretTextBeforeUpdate(state) { | ||
var _a = Utils.splitStringAtIndex(state.editorInput, state.caretPosition), caretTextBefore = _a[0], caretTextAfter = _a[1]; | ||
return [caretTextBefore, caretTextAfter]; | ||
} | ||
function caretTextAfterUpdate(newEditorInput, newCaretPosition) { | ||
var _a = Utils.splitStringAtIndex(newEditorInput, newCaretPosition), caretTextBefore = _a[0], caretTextAfter = _a[1]; | ||
return [caretTextBefore, caretTextAfter]; | ||
} | ||
var initialState = { | ||
bufferedContent: null, | ||
commandsHistory: [], | ||
editorInput: "", | ||
currentLineStatus: "idle", | ||
caretPosition: 0, | ||
textBeforeCaret: "", | ||
textAfterCaret: "", | ||
}; | ||
function TerminalContextProvider$1(props) { | ||
var children = props.children; | ||
var _a = React.useState(null), historyPointer = _a[0], setHistoryPointer = _a[1]; | ||
var _b = React.useReducer(terminalReducer, initialState), store = _b[0], send = _b[1]; | ||
React.useEffect(function () { | ||
setHistoryPointer(store.commandsHistory.length); | ||
}, [store.commandsHistory]); | ||
var contextValue = React.useMemo(function () { | ||
var getPreviousCommand = function () { | ||
if (historyPointer === 0) { | ||
if (store.commandsHistory.length === 0) { | ||
return ""; | ||
} | ||
return store.commandsHistory[0]; | ||
} | ||
var command = store.commandsHistory[historyPointer - 1]; | ||
if (historyPointer > 0) { | ||
setHistoryPointer(historyPointer - 1); | ||
} | ||
return command; | ||
}; | ||
var getNextCommand = function () { | ||
if (historyPointer + 1 <= store.commandsHistory.length) { | ||
var command = store.commandsHistory[historyPointer + 1]; | ||
setHistoryPointer(historyPointer + 1); | ||
return command; | ||
} | ||
return ""; | ||
}; | ||
return { | ||
send: send, | ||
store: store, | ||
getPreviousCommand: getPreviousCommand, | ||
getNextCommand: getNextCommand | ||
}; | ||
}, [historyPointer, store]); | ||
return (React.createElement(TerminalContext.Provider, { value: contextValue }, children)); | ||
} | ||
function useTerminal() { | ||
var context = React.useContext(TerminalContext); | ||
if (context === undefined) { | ||
throw new Error("useTerminal must be used within a TerminalContextProvider"); | ||
} | ||
return context; | ||
} | ||
var useEditorInput = function (_a) { | ||
var consoleFocused = _a.consoleFocused, enableInput = _a.enableInput, commands = _a.commands, defaultHandler = _a.defaultHandler, errorMessage = _a.errorMessage, prompt = _a.prompt; | ||
var style = React.useContext(StyleContext); | ||
var themeStyles = React.useContext(ThemeContext); | ||
var _b = useTerminal(), getPreviousCommand = _b.getPreviousCommand, getNextCommand = _b.getNextCommand, store = _b.store, send = _b.send; | ||
var runningPromiseRef = React.useRef(null); | ||
var cancelCommand = React.useCallback(function () { | ||
if (runningPromiseRef.current) { | ||
runningPromiseRef.current.cancel(); | ||
} | ||
var nextBufferedContent = (React.createElement(React.Fragment, null, | ||
store.bufferedContent, | ||
React.createElement("span", { style: { color: themeStyles.themePromptColor } }, prompt), | ||
React.createElement("span", { className: "".concat(style.lineText, " ").concat(style.preWhiteSpace) }, store.editorInput), | ||
React.createElement("br", null))); | ||
send({ type: "CANCEL", cancelNode: nextBufferedContent }); | ||
}, [prompt, send, store.bufferedContent, store.editorInput, style.lineText, style.preWhiteSpace, themeStyles.themePromptColor]); | ||
var runCommand = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () { | ||
var _a, command, rest, output, waiting, commandArguments_1, executor_1, nextBufferedContent; | ||
return __generator(this, function (_b) { | ||
switch (_b.label) { | ||
case 0: | ||
_a = store.editorInput.trim().split(" "), command = _a[0], rest = _a.slice(1); | ||
output = ""; | ||
if (command === "clear" || command === "cls") { | ||
send({ type: "CLEAR" }); | ||
return [2 /*return*/]; | ||
} | ||
waiting = (React.createElement(React.Fragment, null, | ||
store.bufferedContent, | ||
React.createElement("span", { style: { color: themeStyles.themePromptColor } }, prompt), | ||
React.createElement("span", { className: "".concat(style.lineText, " ").concat(style.preWhiteSpace) }, store.editorInput), | ||
React.createElement("br", null))); | ||
send({ type: "SUBMIT", loaderNode: waiting, command: command }); | ||
if (!store.editorInput) return [3 /*break*/, 9]; | ||
commandArguments_1 = rest.join(" "); | ||
if (!(command && commands[command])) return [3 /*break*/, 4]; | ||
executor_1 = commands[command]; | ||
if (!(typeof executor_1 === "function")) return [3 /*break*/, 2]; | ||
runningPromiseRef.current = new CancelablePromise(function (resolve) { | ||
resolve(executor_1(commandArguments_1)); | ||
}); | ||
return [4 /*yield*/, runningPromiseRef.current]; | ||
case 1: | ||
output = _b.sent(); | ||
return [3 /*break*/, 3]; | ||
case 2: | ||
output = executor_1; | ||
_b.label = 3; | ||
case 3: return [3 /*break*/, 9]; | ||
case 4: | ||
if (!(typeof defaultHandler === "function")) return [3 /*break*/, 6]; | ||
runningPromiseRef.current = new CancelablePromise(function (resolve) { | ||
resolve(defaultHandler(command, commandArguments_1)); | ||
}); | ||
return [4 /*yield*/, runningPromiseRef.current]; | ||
case 5: | ||
output = _b.sent(); | ||
return [3 /*break*/, 9]; | ||
case 6: | ||
if (!(typeof errorMessage === "function")) return [3 /*break*/, 8]; | ||
runningPromiseRef.current = new CancelablePromise(function (resolve) { | ||
resolve(errorMessage(command, commandArguments_1)); | ||
}); | ||
return [4 /*yield*/, runningPromiseRef.current]; | ||
case 7: | ||
output = _b.sent(); | ||
return [3 /*break*/, 9]; | ||
case 8: | ||
output = errorMessage; | ||
_b.label = 9; | ||
case 9: | ||
nextBufferedContent = (React.createElement(React.Fragment, null, | ||
store.bufferedContent, | ||
React.createElement("span", { style: { color: themeStyles.themePromptColor } }, prompt), | ||
React.createElement("span", { className: "".concat(style.lineText, " ").concat(style.preWhiteSpace) }, store.editorInput), | ||
output ? (React.createElement("span", null, | ||
React.createElement("br", null), | ||
output)) : null, | ||
React.createElement("br", null))); | ||
send({ type: "SUBMIT_SUCCESS", successNode: nextBufferedContent }); | ||
return [2 /*return*/]; | ||
} | ||
}); | ||
}); }, [send, store.bufferedContent, store.editorInput]); | ||
var handleKeyDownEvent = React.useCallback(function (event) { | ||
if (!consoleFocused) { | ||
return; | ||
} | ||
// checks the value of enableInput and returns if its false | ||
if (!enableInput) { | ||
return; | ||
} | ||
event.preventDefault(); | ||
var eventKey = event.key; | ||
if (eventKey === "Enter") { | ||
runCommand(); | ||
return; | ||
} | ||
var nextInput = null; | ||
if (eventKey === "Backspace") { | ||
if (store.editorInput && store.editorInput.length !== 0) { | ||
send({ type: "DELETE" }); | ||
} | ||
} | ||
else if (eventKey === "ArrowUp") { | ||
nextInput = getPreviousCommand(); | ||
if (nextInput) { | ||
send({ type: "ARROW_UP", previousCommand: nextInput }); | ||
} | ||
} | ||
else if (eventKey === "ArrowDown") { | ||
nextInput = getNextCommand(); | ||
if (nextInput) { | ||
send({ type: "ARROW_DOWN", nextCommand: nextInput }); | ||
} | ||
else { | ||
send({ type: "RESET_CARET_POSITION" }); | ||
} | ||
} | ||
else if (eventKey === "ArrowLeft") { | ||
if (store.caretPosition > 0) { | ||
send({ type: "ARROW_LEFT" }); | ||
} | ||
nextInput = store.editorInput; | ||
} | ||
else if (eventKey === "ArrowRight") { | ||
if (store.caretPosition < store.editorInput.length) { | ||
send({ type: "ARROW_RIGHT" }); | ||
} | ||
nextInput = store.editorInput; | ||
} | ||
else if ((event.metaKey || event.ctrlKey) | ||
&& eventKey.toLowerCase() === "l") { | ||
send({ type: "CLEAR" }); | ||
} | ||
else if ((event.metaKey || event.ctrlKey) | ||
&& event.shiftKey | ||
&& eventKey.toLowerCase() === "v") { | ||
navigator.clipboard.readText().then(function (pastedText) { | ||
send({ type: "PASTE", text: pastedText }); | ||
}); | ||
} | ||
else if ((event.metaKey || event.ctrlKey) | ||
&& event.shiftKey | ||
&& eventKey.toLowerCase() === "c") { | ||
var selectedText = window.getSelection().toString(); | ||
navigator.clipboard.writeText(selectedText).then(function () { | ||
send({ type: "COPY" }); | ||
}); | ||
} | ||
else if ((event.metaKey || event.ctrlKey) | ||
&& eventKey.toLowerCase() === "c") { | ||
if (runningPromiseRef.current) { | ||
runningPromiseRef.current.cancel(); | ||
} | ||
cancelCommand(); | ||
} | ||
else { | ||
if (eventKey && eventKey.length === 1) { | ||
send({ type: "TYPE", text: eventKey }); | ||
} | ||
} | ||
}, [cancelCommand, consoleFocused, enableInput, getNextCommand, getPreviousCommand, runCommand, send, store.caretPosition, store.editorInput]); | ||
React.useEffect(function () { | ||
// Bind the event listener | ||
document.addEventListener("keydown", handleKeyDownEvent); | ||
return function () { | ||
// Unbind the event listener on clean up | ||
document.removeEventListener("keydown", handleKeyDownEvent); | ||
}; | ||
}, [handleKeyDownEvent]); | ||
}; | ||
var useCurrentLine = function (caret, consoleFocused, prompt, commands, errorMessage, enableInput, defaultHandler) { | ||
var style = React.useContext(StyleContext); | ||
var themeStyles = React.useContext(ThemeContext); | ||
var store = useTerminal().store; | ||
var currentLine = store.currentLineStatus !== "processing" ? (React.createElement(React.Fragment, null, | ||
React.createElement("span", { style: { color: themeStyles.themePromptColor } }, prompt), | ||
React.createElement("div", { className: style.lineText }, | ||
React.createElement("span", { className: style.preWhiteSpace }, store.textBeforeCaret), | ||
consoleFocused && caret ? ( // if caret isn't true, caret won't be displayed | ||
React.createElement("span", { className: style.caret }, | ||
React.createElement("span", { className: style.caretAfter, style: { background: themeStyles.themeColor } }))) : null, | ||
React.createElement("span", { className: style.preWhiteSpace }, store.textAfterCaret)))) : (React.createElement(React.Fragment, null, | ||
React.createElement("div", { className: style.lineText }, consoleFocused && caret ? ( // if caret isn't true, caret won't be displayed | ||
React.createElement("span", { className: style.caret }, | ||
React.createElement("span", { className: style.caretAfter, style: { background: themeStyles.themeColor } }))) : null))); | ||
useEditorInput({ | ||
commands: commands, | ||
errorMessage: errorMessage, | ||
defaultHandler: defaultHandler, | ||
enableInput: enableInput, | ||
prompt: prompt, | ||
consoleFocused: consoleFocused | ||
}); | ||
return currentLine; | ||
}; | ||
var useScrollToBottom = function (changesToWatch, wrapperRef) { | ||
React.useEffect(function () { | ||
if (!wrapperRef.current) { | ||
return; | ||
} | ||
// eslint-disable-next-line no-param-reassign | ||
wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight; | ||
}, [changesToWatch]); | ||
}; | ||
function Editor(props) { | ||
var wrapperRef = React.useRef(null); | ||
var style = React.useContext(StyleContext); | ||
var themeStyles = React.useContext(ThemeContext); | ||
var store = useTerminal().store; | ||
useScrollToBottom(store.bufferedContent, wrapperRef); | ||
var enableInput = props.enableInput, caret = props.caret, consoleFocused = props.consoleFocused, prompt = props.prompt, commands = props.commands, welcomeMessage = props.welcomeMessage, errorMessage = props.errorMessage, showControlBar = props.showControlBar, defaultHandler = props.defaultHandler; | ||
var currentLine = useCurrentLine(caret, consoleFocused, prompt, commands, errorMessage, enableInput, defaultHandler); | ||
return (React.createElement("div", { id: "terminalEditor", ref: wrapperRef, className: "".concat(style.editor, " ").concat(!showControlBar ? style.curvedTop : null, " ").concat(showControlBar ? style.editorWithTopBar : null), style: { background: themeStyles.themeBGColor } }, | ||
welcomeMessage, | ||
store.bufferedContent, | ||
currentLine)); | ||
} | ||
function Terminal(props) { | ||
var wrapperRef = React.useRef(null); | ||
var _a = React.useState(true), consoleFocused = _a[0], setConsoleFocused = _a[1]; | ||
var style = React.useContext(StyleContext); | ||
var themeStyles = React.useContext(ThemeContext); | ||
useClickOutsideEvent(wrapperRef, consoleFocused, setConsoleFocused); | ||
// Get all props destructively | ||
var _b = props.caret, caret = _b === void 0 ? true : _b, _c = props.theme, theme = _c === void 0 ? "light" : _c, _d = props.showControlBar, showControlBar = _d === void 0 ? true : _d, _e = props.showControlButtons, showControlButtons = _e === void 0 ? true : _e, _f = props.controlButtonLabels, controlButtonLabels = _f === void 0 ? ["close", "minimize", "maximize"] : _f, _g = props.prompt, prompt = _g === void 0 ? ">>>" : _g, _h = props.commands, commands = _h === void 0 ? {} : _h, _j = props.welcomeMessage, welcomeMessage = _j === void 0 ? "" : _j, _k = props.errorMessage, errorMessage = _k === void 0 ? "not found!" : _k, _l = props.enableInput, enableInput = _l === void 0 ? true : _l, _m = props.defaultHandler, defaultHandler = _m === void 0 ? null : _m; | ||
var controls = showControlBar ? React.createElement(Controls, { consoleFocused: consoleFocused, showControlButtons: showControlButtons, controlButtonLabels: controlButtonLabels }) : null; | ||
var editor = React.createElement(Editor, { caret: caret, consoleFocused: consoleFocused, prompt: prompt, commands: commands, welcomeMessage: welcomeMessage, errorMessage: errorMessage, enableInput: enableInput, showControlBar: showControlBar, defaultHandler: (defaultHandler) }); | ||
return (React.createElement("div", { ref: wrapperRef, id: style.terminalContainer, className: style["theme--".concat(theme)], "data-testid": "terminal" }, | ||
React.createElement("div", { className: "".concat(style.terminal), style: { background: themeStyles.themeToolbarColor, color: themeStyles.themeColor } }, | ||
controls, | ||
editor))); | ||
} | ||
function ContextProvider(props) { | ||
var children = props.children; | ||
return (React.createElement(StyleContextProvider, null, | ||
React.createElement(ThemeContextProvider, null, children))); | ||
} | ||
function ReactTerminal(props) { | ||
return (React.createElement(ContextProvider, null, | ||
React.createElement(Terminal, __assign({}, props)))); | ||
} | ||
var TerminalContextProvider = TerminalContextProvider$1; | ||
var index = { | ||
ReactTerminal: ReactTerminal, | ||
TerminalContextProvider: TerminalContextProvider | ||
}; | ||
export { ReactTerminal, TerminalContextProvider, index as default }; | ||
import*as e from"react";import{CancelablePromise as t}from"cancelable-promise";var n=function(){return n=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},n.apply(this,arguments)};function r(e,t,n,r){return new(n||(n=Promise))((function(o,a){function i(e){try{c(r.next(e))}catch(e){a(e)}}function l(e){try{c(r.throw(e))}catch(e){a(e)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(i,l)}c((r=r.apply(e,t||[])).next())}))}function o(e,t){var n,r,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function l(l){return function(c){return function(l){if(n)throw new TypeError("Generator is already executing.");for(;a&&(a=0,l[0]&&(i=0)),i;)try{if(n=1,r&&(o=2&l[0]?r.return:l[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,l[1])).done)return o;switch(r=0,o&&(l=[2&l[0],o.value]),l[0]){case 0:case 1:o=l;break;case 4:return i.label++,{value:l[1],done:!1};case 5:i.label++,r=l[1],l=[0];continue;case 7:l=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==l[0]&&2!==l[0])){i=0;continue}if(3===l[0]&&(!o||l[1]>o[0]&&l[1]<o[3])){i.label=l[1];break}if(6===l[0]&&i.label<o[1]){i.label=o[1],o=l;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(l);break}o[2]&&i.ops.pop(),i.trys.pop();continue}l=t.call(e,i)}catch(e){l=[6,e],r=0}finally{n=o=0}if(5&l[0])throw l[1];return{value:l[0]?l[1]:void 0,done:!0}}([l,c])}}}function a(e,t,n){if(n||2===arguments.length)for(var r,o=0,a=t.length;o<a;o++)!r&&o in t||(r||(r=Array.prototype.slice.call(t,0,o)),r[o]=t[o]);return e.concat(r||Array.prototype.slice.call(t))}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}('@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap");\n#index_terminalContainer__4seT6 {\n --control-default-bg-color: #ccc;\n --control-close-bg-color: #fc5b57;\n --control-minimize-bg-color: #e5bf3c;\n --control-maximize-bg-color: #57c038;\n}\n\n.index_controls__sXDjs {\n text-align: left;\n height: 26px;\n position: relative;\n top: 4px;\n margin-left: 4px;\n}\n.index_controls__sXDjs .index_consoleCtrl__DI2H1 {\n display: inline-block;\n width: 13px;\n height: 13px;\n margin: 0 3px;\n border-radius: 50%;\n background: var(--control-default-bg-color);\n}\n.index_controls__sXDjs .index_close__XGN9U {\n background: var(--control-close-bg-color);\n}\n.index_controls__sXDjs .index_minimize__pZYTU {\n background: var(--control-minimize-bg-color);\n}\n.index_controls__sXDjs .index_maximize__szRK7 {\n background: var(--control-maximize-bg-color);\n}\n\n.index_editor__JoDSg {\n text-align: left;\n height: 100%;\n padding: 10px 15px;\n overflow-wrap: break-word;\n overflow-y: scroll;\n outline: none;\n font-family: "Source Code Pro", monospace;\n font-size: 18px;\n line-height: 22px;\n border-bottom-left-radius: 5px;\n border-bottom-right-radius: 5px;\n}\n.index_editor__JoDSg .index_lineText__j6qNj {\n display: inline;\n position: relative;\n top: -1px;\n margin-left: 8px;\n}\n.index_editor__JoDSg .index_preWhiteSpace__7KwuG {\n white-space: pre-wrap;\n}\n.index_editor__JoDSg .index_caret__VS4iV {\n position: relative;\n}\n.index_editor__JoDSg .index_caret__VS4iV .index_caretAfter__6aXPx {\n content: "";\n position: absolute;\n top: 2px;\n width: 10px;\n height: 22px;\n z-index: 10;\n}\n@-moz-keyframes index_blink__FJp0- {\n 0% {\n opacity: 0;\n -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";\n filter: alpha(opacity=0);\n }\n 100% {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n }\n}\n@-webkit-keyframes index_blink__FJp0- {\n 0% {\n opacity: 0;\n -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";\n filter: alpha(opacity=0);\n }\n 100% {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n }\n}\n@-o-keyframes index_blink__FJp0- {\n 0% {\n opacity: 0;\n -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";\n filter: alpha(opacity=0);\n }\n 100% {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n }\n}\n@keyframes index_blink__FJp0- {\n 0% {\n opacity: 0;\n -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";\n filter: alpha(opacity=0);\n }\n 100% {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n }\n}\n.index_editor__JoDSg a {\n color: #1a87b5;\n}\n\n.index_editorWithTopBar__L6XKw {\n height: calc(100% - 46px);\n}\n\n.index_curvedTop__LX9XS {\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n}\n\n#index_terminalContainer__4seT6 {\n height: 100%;\n}\n\n.index_terminal__teubZ {\n height: 100%;\n width: 100%;\n margin: auto;\n border-radius: 5px;\n}');var i={terminalContainer:"index_terminalContainer__4seT6",controls:"index_controls__sXDjs",consoleCtrl:"index_consoleCtrl__DI2H1",close:"index_close__XGN9U",minimize:"index_minimize__pZYTU",maximize:"index_maximize__szRK7",editor:"index_editor__JoDSg",lineText:"index_lineText__j6qNj",preWhiteSpace:"index_preWhiteSpace__7KwuG",caret:"index_caret__VS4iV",caretAfter:"index_caretAfter__6aXPx",editorWithTopBar:"index_editorWithTopBar__L6XKw",curvedTop:"index_curvedTop__LX9XS",terminal:"index_terminal__teubZ",blink:"index_blink__FJp0-"},l=e.createContext(null),c=function(t){var n=t.children;return e.createElement(l.Provider,{value:i},n)},s={dark:{themeBGColor:"#022833",themeToolbarColor:"#131519",themeColor:"#839496",themePromptColor:"#a917a8"},light:{themeBGColor:"#fdf6e4",themeToolbarColor:"#d8d8d8",themeColor:"#333333",themePromptColor:"#a917a8"},dracula:{themeBGColor:"#272B36",themeToolbarColor:"#DBDBDB",themeColor:"#FFFEFC",themePromptColor:"#a917a8"},"material-dark":{themeBGColor:"#151515",themeToolbarColor:"#424242",themeColor:"#fff",themePromptColor:"#42A5F5"},"material-light":{themeBGColor:"#fafafa",themeToolbarColor:"#424242",themeColor:"#151515",themePromptColor:"#42A5F5"},"material-ocean":{themeBGColor:"#263238",themeToolbarColor:"#37474F",themeColor:"#fff",themePromptColor:"#C3D82C"},matrix:{themeBGColor:"#0D0208",themeToolbarColor:"#0D0208",themeColor:"#00FF41",themePromptColor:"#008F11"}},u=e.createContext(null),d=function(t){var r=t.children,o=n(n({},s),r.props.themes||{}),a=o[r.props.theme]||o.light;return e.createElement(u.Provider,{value:a},r)},m=function(t,n,r){var o=function(e){t.current&&!t.current.contains(e.target)?r(!1):r(!0)};e.useEffect((function(){return document.addEventListener("mousedown",o),function(){document.removeEventListener("mousedown",o)}}))};function p(t){var n=e.useContext(l),r=t.controlButtonLabels,o=t.showControlButtons?r.map((function(t){return e.createElement("div",{key:t,className:"".concat(n.consoleCtrl," ").concat(n[t])})})):null;return e.createElement("div",{className:n.controls},o)}var f=function(){function e(){}return e.splitStringAtIndex=function(e,t){return e?[e.substring(0,t),e.substring(t)]:["",""]},e}(),x=e.createContext(null);function h(e,t){switch(t.type){case"CLEAR":return n(n({},e),{bufferedContent:null,editorInput:"",currentLineStatus:"idle",caretPosition:0,textBeforeCaret:"",textAfterCaret:""});case"CANCEL":return n(n({},e),{bufferedContent:t.cancelNode,editorInput:"",currentLineStatus:"idle",caretPosition:0,textBeforeCaret:"",textAfterCaret:""});case"SUBMIT":var r=t.command,o=r?a(a([],e.commandsHistory,!0),[r],!1):e.commandsHistory;return n(n({},e),{commandsHistory:o,bufferedContent:t.loaderNode,currentLineStatus:"processing",editorInput:"",caretPosition:0,textBeforeCaret:"",textAfterCaret:""});case"SUBMIT_SUCCESS":return n(n({},e),{bufferedContent:t.successNode,currentLineStatus:"success",editorInput:"",caretPosition:0,textBeforeCaret:"",textAfterCaret:""});case"TYPE":var i=C(e),l=i[0],c=i[1],s=_(v=l+t.text+c,g=e.caretPosition+1),u=s[0],d=s[1];return n(n({},e),{caretPosition:g,editorInput:v,textAfterCaret:d,textBeforeCaret:u});case"DELETE":var m=C(e),p=(l=m[0],c=m[1],_(v=l.slice(0,-1)+c,g=e.caretPosition-1));u=p[0],d=p[1];return n(n({},e),{editorInput:v,caretPosition:g,textAfterCaret:d,textBeforeCaret:u});case"COPY":return e;case"PASTE":var f=C(e),x=(l=f[0],c=f[1],_(v=l+t.text+c,g=e.caretPosition+t.text.length));u=x[0],d=x[1];return n(n({},e),{editorInput:v,caretPosition:g,textAfterCaret:d,textBeforeCaret:u});case"ARROW_UP":var h=_(v=t.previousCommand,g=t.previousCommand.length);u=h[0],d=h[1];return n(n({},e),{editorInput:v,caretPosition:g,textAfterCaret:d,textBeforeCaret:u});case"ARROW_DOWN":var v,y=_(v=t.nextCommand,g=t.nextCommand.length);u=y[0],d=y[1];return n(n({},e),{editorInput:v,caretPosition:g,textAfterCaret:d,textBeforeCaret:u});case"RESET_CARET_POSITION":return n(n({},e),{textBeforeCaret:"",textAfterCaret:"",caretPosition:0});case"ARROW_LEFT":var g=e.caretPosition-1,b=_(e.editorInput,g);u=b[0],d=b[1];return n(n({},e),{caretPosition:g,textAfterCaret:d,textBeforeCaret:u});case"ARROW_RIGHT":g=e.caretPosition+1;var E=_(e.editorInput,g);u=E[0],d=E[1];return n(n({},e),{caretPosition:g,textAfterCaret:d,textBeforeCaret:u});default:throw new Error("Unhandled action type: ".concat(JSON.stringify(t)))}}function C(e){var t=f.splitStringAtIndex(e.editorInput,e.caretPosition);return[t[0],t[1]]}function _(e,t){var n=f.splitStringAtIndex(e,t);return[n[0],n[1]]}var v={bufferedContent:null,commandsHistory:[],editorInput:"",currentLineStatus:"idle",caretPosition:0,textBeforeCaret:"",textAfterCaret:""};function y(){var t=e.useContext(x);if(void 0===t)throw new Error("useTerminal must be used within a TerminalContextProvider");return t}var g=function(n,a,i,c,s,d,m){var p=e.useContext(l),f=e.useContext(u),x=y().store,h="processing"!==x.currentLineStatus?e.createElement(e.Fragment,null,e.createElement("span",{style:{color:f.themePromptColor}},i),e.createElement("div",{className:p.lineText},e.createElement("span",{className:p.preWhiteSpace},x.textBeforeCaret),a&&n?e.createElement("span",{className:p.caret},e.createElement("span",{className:p.caretAfter,style:{background:f.themeColor}})):null,e.createElement("span",{className:p.preWhiteSpace},x.textAfterCaret))):e.createElement(e.Fragment,null,e.createElement("div",{className:p.lineText},a&&n?e.createElement("span",{className:p.caret},e.createElement("span",{className:p.caretAfter,style:{background:f.themeColor}})):null));return function(n){var a=n.consoleFocused,i=n.enableInput,c=n.commands,s=n.defaultHandler,d=n.errorMessage,m=n.prompt,p=e.useContext(l),f=e.useContext(u),x=y(),h=x.getPreviousCommand,C=x.getNextCommand,_=x.store,v=x.send,g=e.useRef(null),b=e.useCallback((function(){g.current&&g.current.cancel();var t=e.createElement(e.Fragment,null,_.bufferedContent,e.createElement("span",{style:{color:f.themePromptColor}},m),e.createElement("span",{className:"".concat(p.lineText," ").concat(p.preWhiteSpace)},_.editorInput),e.createElement("br",null));v({type:"CANCEL",cancelNode:t})}),[m,v,_.bufferedContent,_.editorInput,p.lineText,p.preWhiteSpace,f.themePromptColor]),E=e.useCallback((function(){return r(void 0,void 0,void 0,(function(){var n,r,a,i,l,u,x,h;return o(this,(function(o){switch(o.label){case 0:return n=_.editorInput.trim().split(" "),r=n[0],a=n.slice(1),i="","clear"===r||"cls"===r?(v({type:"CLEAR"}),[2]):(l=e.createElement(e.Fragment,null,_.bufferedContent,e.createElement("span",{style:{color:f.themePromptColor}},m),e.createElement("span",{className:"".concat(p.lineText," ").concat(p.preWhiteSpace)},_.editorInput),e.createElement("br",null)),v({type:"SUBMIT",loaderNode:l,command:r}),_.editorInput?(u=a.join(" "),r&&c[r]?"function"!=typeof(x=c[r])?[3,2]:(g.current=new t((function(e){e(x(u))})),[4,g.current]):[3,4]):[3,9]);case 1:return i=o.sent(),[3,3];case 2:i=x,o.label=3;case 3:return[3,9];case 4:return"function"!=typeof s?[3,6]:(g.current=new t((function(e){e(s(r,u))})),[4,g.current]);case 5:return i=o.sent(),[3,9];case 6:return"function"!=typeof d?[3,8]:(g.current=new t((function(e){e(d(r,u))})),[4,g.current]);case 7:return i=o.sent(),[3,9];case 8:i=d,o.label=9;case 9:return h=e.createElement(e.Fragment,null,_.bufferedContent,e.createElement("span",{style:{color:f.themePromptColor}},m),e.createElement("span",{className:"".concat(p.lineText," ").concat(p.preWhiteSpace)},_.editorInput),i?e.createElement("span",null,e.createElement("br",null),i):null,e.createElement("br",null)),v({type:"SUBMIT_SUCCESS",successNode:h}),[2]}}))}))}),[v,_.bufferedContent,_.editorInput]),T=e.useCallback((function(e){if(a&&i){e.preventDefault();var t=e.key;if("Enter"!==t){var n=null;if("Backspace"===t)_.editorInput&&0!==_.editorInput.length&&v({type:"DELETE"});else if("ArrowUp"===t)(n=h())&&v({type:"ARROW_UP",previousCommand:n});else if("ArrowDown"===t)n=C(),v(n?{type:"ARROW_DOWN",nextCommand:n}:{type:"RESET_CARET_POSITION"});else if("ArrowLeft"===t)_.caretPosition>0&&v({type:"ARROW_LEFT"}),n=_.editorInput;else if("ArrowRight"===t)_.caretPosition<_.editorInput.length&&v({type:"ARROW_RIGHT"}),n=_.editorInput;else if((e.metaKey||e.ctrlKey)&&"l"===t.toLowerCase())v({type:"CLEAR"});else if((e.metaKey||e.ctrlKey)&&e.shiftKey&&"v"===t.toLowerCase())navigator.clipboard.readText().then((function(e){v({type:"PASTE",text:e})}));else if((e.metaKey||e.ctrlKey)&&e.shiftKey&&"c"===t.toLowerCase()){var r=window.getSelection().toString();navigator.clipboard.writeText(r).then((function(){v({type:"COPY"})}))}else(e.metaKey||e.ctrlKey)&&"c"===t.toLowerCase()?(g.current&&g.current.cancel(),b()):t&&1===t.length&&v({type:"TYPE",text:t})}else E()}}),[b,a,i,C,h,E,v,_.caretPosition,_.editorInput]);e.useEffect((function(){return document.addEventListener("keydown",T),function(){document.removeEventListener("keydown",T)}}),[T])}({commands:c,errorMessage:s,defaultHandler:m,enableInput:d,prompt:i,consoleFocused:a}),h},b=function(t,n){e.useEffect((function(){n.current&&(n.current.scrollTop=n.current.scrollHeight)}),[t])};function E(t){var n=e.useRef(null),r=e.useContext(l),o=e.useContext(u),a=y().store;b(a.bufferedContent,n);var i=t.enableInput,c=t.caret,s=t.consoleFocused,d=t.prompt,m=t.commands,p=t.welcomeMessage,f=t.errorMessage,x=t.showControlBar,h=t.defaultHandler,C=g(c,s,d,m,f,i,h);return e.createElement("div",{id:"terminalEditor",ref:n,className:"".concat(r.editor," ").concat(x?null:r.curvedTop," ").concat(x?r.editorWithTopBar:null),style:{background:o.themeBGColor}},p,a.bufferedContent,C)}function T(t){var n=e.useRef(null),r=e.useState(!0),o=r[0],a=r[1],i=e.useContext(l),c=e.useContext(u);m(n,o,a);var s=t.caret,d=void 0===s||s,f=t.theme,x=void 0===f?"light":f,h=t.showControlBar,C=void 0===h||h,_=t.showControlButtons,v=void 0===_||_,y=t.controlButtonLabels,g=void 0===y?["close","minimize","maximize"]:y,b=t.prompt,T=void 0===b?">>>":b,w=t.commands,P=void 0===w?{}:w,S=t.welcomeMessage,A=void 0===S?"":S,I=t.errorMessage,B=void 0===I?"not found!":I,N=t.enableInput,k=void 0===N||N,R=t.defaultHandler,D=void 0===R?null:R,L=C?e.createElement(p,{consoleFocused:o,showControlButtons:v,controlButtonLabels:g}):null,F=e.createElement(E,{caret:d,consoleFocused:o,prompt:T,commands:P,welcomeMessage:A,errorMessage:B,enableInput:k,showControlBar:C,defaultHandler:D});return e.createElement("div",{ref:n,id:i.terminalContainer,className:i["theme--".concat(x)],"data-testid":"terminal"},e.createElement("div",{className:"".concat(i.terminal),style:{background:c.themeToolbarColor,color:c.themeColor}},L,F))}function w(t){var n=t.children;return e.createElement(c,null,e.createElement(d,null,n))}function P(t){return e.createElement(w,null,e.createElement(T,n({},t)))}var S=function(t){var n=t.children,r=e.useState(null),o=r[0],a=r[1],i=e.useReducer(h,v),l=i[0],c=i[1];e.useEffect((function(){a(l.commandsHistory.length)}),[l.commandsHistory]);var s=e.useMemo((function(){return{send:c,store:l,getPreviousCommand:function(){if(0===o)return 0===l.commandsHistory.length?"":l.commandsHistory[0];var e=l.commandsHistory[o-1];return o>0&&a(o-1),e},getNextCommand:function(){if(o+1<=l.commandsHistory.length){var e=l.commandsHistory[o+1];return a(o+1),e}return""}}}),[o,l]);return e.createElement(x.Provider,{value:s},n)},A={ReactTerminal:P,TerminalContextProvider:S};export{P as ReactTerminal,S as TerminalContextProvider,A as default}; |
@@ -1,639 +0,1 @@ | ||
'use strict'; | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
var React = require('react'); | ||
var cancelablePromise = require('cancelable-promise'); | ||
function _interopNamespaceDefault(e) { | ||
var n = Object.create(null); | ||
if (e) { | ||
Object.keys(e).forEach(function (k) { | ||
if (k !== 'default') { | ||
var d = Object.getOwnPropertyDescriptor(e, k); | ||
Object.defineProperty(n, k, d.get ? d : { | ||
enumerable: true, | ||
get: function () { return e[k]; } | ||
}); | ||
} | ||
}); | ||
} | ||
n.default = e; | ||
return Object.freeze(n); | ||
} | ||
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React); | ||
/****************************************************************************** | ||
Copyright (c) Microsoft Corporation. | ||
Permission to use, copy, modify, and/or distribute this software for any | ||
purpose with or without fee is hereby granted. | ||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH | ||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY | ||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, | ||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM | ||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR | ||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR | ||
PERFORMANCE OF THIS SOFTWARE. | ||
***************************************************************************** */ | ||
/* global Reflect, Promise */ | ||
var __assign = function() { | ||
__assign = Object.assign || function __assign(t) { | ||
for (var s, i = 1, n = arguments.length; i < n; i++) { | ||
s = arguments[i]; | ||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; | ||
} | ||
return t; | ||
}; | ||
return __assign.apply(this, arguments); | ||
}; | ||
function __awaiter(thisArg, _arguments, P, generator) { | ||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
return new (P || (P = Promise))(function (resolve, reject) { | ||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } | ||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } | ||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } | ||
step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
}); | ||
} | ||
function __generator(thisArg, body) { | ||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; | ||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; | ||
function verb(n) { return function (v) { return step([n, v]); }; } | ||
function step(op) { | ||
if (f) throw new TypeError("Generator is already executing."); | ||
while (g && (g = 0, op[0] && (_ = 0)), _) try { | ||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; | ||
if (y = 0, t) op = [op[0] & 2, t.value]; | ||
switch (op[0]) { | ||
case 0: case 1: t = op; break; | ||
case 4: _.label++; return { value: op[1], done: false }; | ||
case 5: _.label++; y = op[1]; op = [0]; continue; | ||
case 7: op = _.ops.pop(); _.trys.pop(); continue; | ||
default: | ||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } | ||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } | ||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } | ||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } | ||
if (t[2]) _.ops.pop(); | ||
_.trys.pop(); continue; | ||
} | ||
op = body.call(thisArg, _); | ||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } | ||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; | ||
} | ||
} | ||
function __spreadArray(to, from, pack) { | ||
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { | ||
if (ar || !(i in from)) { | ||
if (!ar) ar = Array.prototype.slice.call(from, 0, i); | ||
ar[i] = from[i]; | ||
} | ||
} | ||
return to.concat(ar || Array.prototype.slice.call(from)); | ||
} | ||
function styleInject(css, ref) { | ||
if ( ref === void 0 ) ref = {}; | ||
var insertAt = ref.insertAt; | ||
if (!css || typeof document === 'undefined') { return; } | ||
var head = document.head || document.getElementsByTagName('head')[0]; | ||
var style = document.createElement('style'); | ||
style.type = 'text/css'; | ||
if (insertAt === 'top') { | ||
if (head.firstChild) { | ||
head.insertBefore(style, head.firstChild); | ||
} else { | ||
head.appendChild(style); | ||
} | ||
} else { | ||
head.appendChild(style); | ||
} | ||
if (style.styleSheet) { | ||
style.styleSheet.cssText = css; | ||
} else { | ||
style.appendChild(document.createTextNode(css)); | ||
} | ||
} | ||
var css_248z = "@import url(\"https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap\");\n#index_terminalContainer__4seT6 {\n --control-default-bg-color: #ccc;\n --control-close-bg-color: #fc5b57;\n --control-minimize-bg-color: #e5bf3c;\n --control-maximize-bg-color: #57c038;\n}\n\n.index_controls__sXDjs {\n text-align: left;\n height: 26px;\n position: relative;\n top: 4px;\n margin-left: 4px;\n}\n.index_controls__sXDjs .index_consoleCtrl__DI2H1 {\n display: inline-block;\n width: 13px;\n height: 13px;\n margin: 0 3px;\n border-radius: 50%;\n background: var(--control-default-bg-color);\n}\n.index_controls__sXDjs .index_close__XGN9U {\n background: var(--control-close-bg-color);\n}\n.index_controls__sXDjs .index_minimize__pZYTU {\n background: var(--control-minimize-bg-color);\n}\n.index_controls__sXDjs .index_maximize__szRK7 {\n background: var(--control-maximize-bg-color);\n}\n\n.index_editor__JoDSg {\n text-align: left;\n height: 100%;\n padding: 10px 15px;\n overflow-wrap: break-word;\n overflow-y: scroll;\n outline: none;\n font-family: \"Source Code Pro\", monospace;\n font-size: 18px;\n line-height: 22px;\n border-bottom-left-radius: 5px;\n border-bottom-right-radius: 5px;\n}\n.index_editor__JoDSg .index_lineText__j6qNj {\n display: inline;\n position: relative;\n top: -1px;\n margin-left: 8px;\n}\n.index_editor__JoDSg .index_preWhiteSpace__7KwuG {\n white-space: pre-wrap;\n}\n.index_editor__JoDSg .index_caret__VS4iV {\n position: relative;\n}\n.index_editor__JoDSg .index_caret__VS4iV .index_caretAfter__6aXPx {\n content: \"\";\n position: absolute;\n top: 2px;\n width: 10px;\n height: 22px;\n z-index: 10;\n}\n@-moz-keyframes index_blink__FJp0- {\n 0% {\n opacity: 0;\n -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n filter: alpha(opacity=0);\n }\n 100% {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n }\n}\n@-webkit-keyframes index_blink__FJp0- {\n 0% {\n opacity: 0;\n -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n filter: alpha(opacity=0);\n }\n 100% {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n }\n}\n@-o-keyframes index_blink__FJp0- {\n 0% {\n opacity: 0;\n -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n filter: alpha(opacity=0);\n }\n 100% {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n }\n}\n@keyframes index_blink__FJp0- {\n 0% {\n opacity: 0;\n -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n filter: alpha(opacity=0);\n }\n 100% {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n }\n}\n.index_editor__JoDSg a {\n color: #1a87b5;\n}\n\n.index_editorWithTopBar__L6XKw {\n height: calc(100% - 46px);\n}\n\n.index_curvedTop__LX9XS {\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n}\n\n#index_terminalContainer__4seT6 {\n height: 100%;\n}\n\n.index_terminal__teubZ {\n height: 100%;\n width: 100%;\n margin: auto;\n border-radius: 5px;\n}"; | ||
var index$1 = {"terminalContainer":"index_terminalContainer__4seT6","controls":"index_controls__sXDjs","consoleCtrl":"index_consoleCtrl__DI2H1","close":"index_close__XGN9U","minimize":"index_minimize__pZYTU","maximize":"index_maximize__szRK7","editor":"index_editor__JoDSg","lineText":"index_lineText__j6qNj","preWhiteSpace":"index_preWhiteSpace__7KwuG","caret":"index_caret__VS4iV","caretAfter":"index_caretAfter__6aXPx","editorWithTopBar":"index_editorWithTopBar__L6XKw","curvedTop":"index_curvedTop__LX9XS","terminal":"index_terminal__teubZ","blink":"index_blink__FJp0-"}; | ||
styleInject(css_248z); | ||
var styles = index$1; | ||
var StyleContext = React__namespace.createContext(null); | ||
var StyleContextProvider = function (props) { | ||
var children = props.children; | ||
return (React__namespace.createElement(StyleContext.Provider, { value: styles }, children)); | ||
}; | ||
var darkTheme = { | ||
themeBGColor: "#022833", | ||
themeToolbarColor: "#131519", | ||
themeColor: "#839496", | ||
themePromptColor: "#a917a8" | ||
}; | ||
var lightTheme = { | ||
themeBGColor: "#fdf6e4", | ||
themeToolbarColor: "#d8d8d8", | ||
themeColor: "#333333", | ||
themePromptColor: "#a917a8" | ||
}; | ||
var draculaTheme = { | ||
themeBGColor: "#272B36", | ||
themeToolbarColor: "#DBDBDB", | ||
themeColor: "#FFFEFC", | ||
themePromptColor: "#a917a8" | ||
}; | ||
var materialDarkTheme = { | ||
themeBGColor: "#151515", | ||
themeToolbarColor: "#424242", | ||
themeColor: "#fff", | ||
themePromptColor: "#42A5F5" | ||
}; | ||
var materialLightTheme = { | ||
themeBGColor: '#fafafa', | ||
themeToolbarColor: '#424242', | ||
themeColor: '#151515', | ||
themePromptColor: '#42A5F5', | ||
}; | ||
var materialOceanTheme = { | ||
themeBGColor: '#263238', | ||
themeToolbarColor: '#37474F', | ||
themeColor: '#fff', | ||
themePromptColor: '#C3D82C', | ||
}; | ||
var matrixTheme = { | ||
themeBGColor: "#0D0208", | ||
themeToolbarColor: "#0D0208", | ||
themeColor: "#00FF41", | ||
themePromptColor: "#008F11" | ||
}; | ||
var defaultThemes = { | ||
"dark": darkTheme, | ||
"light": lightTheme, | ||
"dracula": draculaTheme, | ||
"material-dark": materialDarkTheme, | ||
"material-light": materialLightTheme, | ||
"material-ocean": materialOceanTheme, | ||
"matrix": matrixTheme | ||
}; | ||
var ThemeContext = React__namespace.createContext(null); | ||
var ThemeContextProvider = function (props) { | ||
var children = props.children; | ||
var themes = __assign(__assign({}, defaultThemes), (children.props.themes || {})); | ||
var currentTheme = themes[children.props.theme] || themes["light"]; | ||
return (React__namespace.createElement(ThemeContext.Provider, { value: currentTheme }, children)); | ||
}; | ||
var useClickOutsideEvent = function (ref, clickedInside, setClickedInside) { | ||
var handleClickOutside = function (event) { | ||
if (ref.current && !ref.current.contains(event.target)) { | ||
setClickedInside(false); | ||
} | ||
else { | ||
setClickedInside(true); | ||
} | ||
}; | ||
React__namespace.useEffect(function () { | ||
// Bind the event listener | ||
document.addEventListener("mousedown", handleClickOutside); | ||
return function () { | ||
// Unbind the event listener on clean up | ||
document.removeEventListener("mousedown", handleClickOutside); | ||
}; | ||
}); | ||
}; | ||
function Controls(props) { | ||
var style = React__namespace.useContext(StyleContext); | ||
var controlButtonLabels = props.controlButtonLabels; | ||
var showControlButtons = props.showControlButtons; | ||
var controlButtons = showControlButtons | ||
? controlButtonLabels.map(function (buttonLabel) { return (React__namespace.createElement("div", { key: buttonLabel, className: "".concat(style.consoleCtrl, " ").concat(style[buttonLabel]) })); }) | ||
: null; | ||
return React__namespace.createElement("div", { className: style.controls }, controlButtons); | ||
} | ||
var Utils = /** @class */ (function () { | ||
function Utils() { | ||
} | ||
Utils.splitStringAtIndex = function (value, index) { | ||
if (!value) { | ||
return ["", ""]; | ||
} | ||
return [value.substring(0, index), value.substring(index)]; | ||
}; | ||
return Utils; | ||
}()); | ||
var TerminalContext = React__namespace.createContext(null); | ||
function terminalReducer(state, action) { | ||
switch (action.type) { | ||
case "CLEAR": { | ||
return __assign(__assign({}, state), { bufferedContent: null, editorInput: "", currentLineStatus: "idle", caretPosition: 0, textBeforeCaret: "", textAfterCaret: "" }); | ||
} | ||
case "CANCEL": { | ||
return __assign(__assign({}, state), { bufferedContent: action.cancelNode, editorInput: "", currentLineStatus: "idle", caretPosition: 0, textBeforeCaret: "", textAfterCaret: "" }); | ||
} | ||
case "SUBMIT": { | ||
var command = action.command; | ||
var newCommands = command ? __spreadArray(__spreadArray([], state.commandsHistory, true), [command], false) : state.commandsHistory; | ||
return __assign(__assign({}, state), { commandsHistory: newCommands, bufferedContent: action.loaderNode, currentLineStatus: "processing", editorInput: "", caretPosition: 0, textBeforeCaret: "", textAfterCaret: "" }); | ||
} | ||
case "SUBMIT_SUCCESS": { | ||
return __assign(__assign({}, state), { bufferedContent: action.successNode, currentLineStatus: "success", editorInput: "", caretPosition: 0, textBeforeCaret: "", textAfterCaret: "" }); | ||
} | ||
case "TYPE": { | ||
var _a = caretTextBeforeUpdate(state), oldCaretTextBefore = _a[0], oldCaretTextAfter = _a[1]; | ||
var newEditorInput = oldCaretTextBefore + action.text + oldCaretTextAfter; | ||
var newCaretPosition = state.caretPosition + 1; | ||
var _b = caretTextAfterUpdate(newEditorInput, newCaretPosition), newCaretTextBefore = _b[0], newCaretTextAfter = _b[1]; | ||
return __assign(__assign({}, state), { caretPosition: newCaretPosition, editorInput: newEditorInput, textAfterCaret: newCaretTextAfter, textBeforeCaret: newCaretTextBefore }); | ||
} | ||
case "DELETE": { | ||
var _c = caretTextBeforeUpdate(state), oldCaretTextBefore = _c[0], oldCaretTextAfter = _c[1]; | ||
var newEditorInput = oldCaretTextBefore.slice(0, -1) + oldCaretTextAfter; | ||
var newCaretPosition = state.caretPosition - 1; | ||
var _d = caretTextAfterUpdate(newEditorInput, newCaretPosition), newCaretTextBefore = _d[0], newCaretTextAfter = _d[1]; | ||
return __assign(__assign({}, state), { editorInput: newEditorInput, caretPosition: newCaretPosition, textAfterCaret: newCaretTextAfter, textBeforeCaret: newCaretTextBefore }); | ||
} | ||
case "COPY": { | ||
return state; | ||
} | ||
case "PASTE": { | ||
var _e = caretTextBeforeUpdate(state), oldCaretTextBefore = _e[0], oldCaretTextAfter = _e[1]; | ||
var newEditorInput = oldCaretTextBefore + action.text + oldCaretTextAfter; | ||
var newCaretPosition = state.caretPosition + action.text.length; | ||
var _f = caretTextAfterUpdate(newEditorInput, newCaretPosition), newCaretTextBefore = _f[0], newCaretTextAfter = _f[1]; | ||
return __assign(__assign({}, state), { editorInput: newEditorInput, caretPosition: newCaretPosition, textAfterCaret: newCaretTextAfter, textBeforeCaret: newCaretTextBefore }); | ||
} | ||
case "ARROW_UP": { | ||
var newEditorInput = action.previousCommand; | ||
var newCaretPosition = action.previousCommand.length; | ||
var _g = caretTextAfterUpdate(newEditorInput, newCaretPosition), newCaretTextBefore = _g[0], newCaretTextAfter = _g[1]; | ||
return __assign(__assign({}, state), { editorInput: newEditorInput, caretPosition: newCaretPosition, textAfterCaret: newCaretTextAfter, textBeforeCaret: newCaretTextBefore }); | ||
} | ||
case "ARROW_DOWN": { | ||
var newEditorInput = action.nextCommand; | ||
var newCaretPosition = action.nextCommand.length; | ||
var _h = caretTextAfterUpdate(newEditorInput, newCaretPosition), newCaretTextBefore = _h[0], newCaretTextAfter = _h[1]; | ||
return __assign(__assign({}, state), { editorInput: newEditorInput, caretPosition: newCaretPosition, textAfterCaret: newCaretTextAfter, textBeforeCaret: newCaretTextBefore }); | ||
} | ||
case "RESET_CARET_POSITION": { | ||
return __assign(__assign({}, state), { textBeforeCaret: "", textAfterCaret: "", caretPosition: 0 }); | ||
} | ||
case "ARROW_LEFT": { | ||
var newCaretPosition = state.caretPosition - 1; | ||
var _j = caretTextAfterUpdate(state.editorInput, newCaretPosition), newCaretTextBefore = _j[0], newCaretTextAfter = _j[1]; | ||
return __assign(__assign({}, state), { caretPosition: newCaretPosition, textAfterCaret: newCaretTextAfter, textBeforeCaret: newCaretTextBefore }); | ||
} | ||
case "ARROW_RIGHT": { | ||
var newCaretPosition = state.caretPosition + 1; | ||
var _k = caretTextAfterUpdate(state.editorInput, newCaretPosition), newCaretTextBefore = _k[0], newCaretTextAfter = _k[1]; | ||
return __assign(__assign({}, state), { caretPosition: newCaretPosition, textAfterCaret: newCaretTextAfter, textBeforeCaret: newCaretTextBefore }); | ||
} | ||
default: { | ||
throw new Error("Unhandled action type: ".concat(JSON.stringify(action))); | ||
} | ||
} | ||
} | ||
function caretTextBeforeUpdate(state) { | ||
var _a = Utils.splitStringAtIndex(state.editorInput, state.caretPosition), caretTextBefore = _a[0], caretTextAfter = _a[1]; | ||
return [caretTextBefore, caretTextAfter]; | ||
} | ||
function caretTextAfterUpdate(newEditorInput, newCaretPosition) { | ||
var _a = Utils.splitStringAtIndex(newEditorInput, newCaretPosition), caretTextBefore = _a[0], caretTextAfter = _a[1]; | ||
return [caretTextBefore, caretTextAfter]; | ||
} | ||
var initialState = { | ||
bufferedContent: null, | ||
commandsHistory: [], | ||
editorInput: "", | ||
currentLineStatus: "idle", | ||
caretPosition: 0, | ||
textBeforeCaret: "", | ||
textAfterCaret: "", | ||
}; | ||
function TerminalContextProvider$1(props) { | ||
var children = props.children; | ||
var _a = React__namespace.useState(null), historyPointer = _a[0], setHistoryPointer = _a[1]; | ||
var _b = React__namespace.useReducer(terminalReducer, initialState), store = _b[0], send = _b[1]; | ||
React__namespace.useEffect(function () { | ||
setHistoryPointer(store.commandsHistory.length); | ||
}, [store.commandsHistory]); | ||
var contextValue = React__namespace.useMemo(function () { | ||
var getPreviousCommand = function () { | ||
if (historyPointer === 0) { | ||
if (store.commandsHistory.length === 0) { | ||
return ""; | ||
} | ||
return store.commandsHistory[0]; | ||
} | ||
var command = store.commandsHistory[historyPointer - 1]; | ||
if (historyPointer > 0) { | ||
setHistoryPointer(historyPointer - 1); | ||
} | ||
return command; | ||
}; | ||
var getNextCommand = function () { | ||
if (historyPointer + 1 <= store.commandsHistory.length) { | ||
var command = store.commandsHistory[historyPointer + 1]; | ||
setHistoryPointer(historyPointer + 1); | ||
return command; | ||
} | ||
return ""; | ||
}; | ||
return { | ||
send: send, | ||
store: store, | ||
getPreviousCommand: getPreviousCommand, | ||
getNextCommand: getNextCommand | ||
}; | ||
}, [historyPointer, store]); | ||
return (React__namespace.createElement(TerminalContext.Provider, { value: contextValue }, children)); | ||
} | ||
function useTerminal() { | ||
var context = React__namespace.useContext(TerminalContext); | ||
if (context === undefined) { | ||
throw new Error("useTerminal must be used within a TerminalContextProvider"); | ||
} | ||
return context; | ||
} | ||
var useEditorInput = function (_a) { | ||
var consoleFocused = _a.consoleFocused, enableInput = _a.enableInput, commands = _a.commands, defaultHandler = _a.defaultHandler, errorMessage = _a.errorMessage, prompt = _a.prompt; | ||
var style = React__namespace.useContext(StyleContext); | ||
var themeStyles = React__namespace.useContext(ThemeContext); | ||
var _b = useTerminal(), getPreviousCommand = _b.getPreviousCommand, getNextCommand = _b.getNextCommand, store = _b.store, send = _b.send; | ||
var runningPromiseRef = React__namespace.useRef(null); | ||
var cancelCommand = React__namespace.useCallback(function () { | ||
if (runningPromiseRef.current) { | ||
runningPromiseRef.current.cancel(); | ||
} | ||
var nextBufferedContent = (React__namespace.createElement(React__namespace.Fragment, null, | ||
store.bufferedContent, | ||
React__namespace.createElement("span", { style: { color: themeStyles.themePromptColor } }, prompt), | ||
React__namespace.createElement("span", { className: "".concat(style.lineText, " ").concat(style.preWhiteSpace) }, store.editorInput), | ||
React__namespace.createElement("br", null))); | ||
send({ type: "CANCEL", cancelNode: nextBufferedContent }); | ||
}, [prompt, send, store.bufferedContent, store.editorInput, style.lineText, style.preWhiteSpace, themeStyles.themePromptColor]); | ||
var runCommand = React__namespace.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () { | ||
var _a, command, rest, output, waiting, commandArguments_1, executor_1, nextBufferedContent; | ||
return __generator(this, function (_b) { | ||
switch (_b.label) { | ||
case 0: | ||
_a = store.editorInput.trim().split(" "), command = _a[0], rest = _a.slice(1); | ||
output = ""; | ||
if (command === "clear" || command === "cls") { | ||
send({ type: "CLEAR" }); | ||
return [2 /*return*/]; | ||
} | ||
waiting = (React__namespace.createElement(React__namespace.Fragment, null, | ||
store.bufferedContent, | ||
React__namespace.createElement("span", { style: { color: themeStyles.themePromptColor } }, prompt), | ||
React__namespace.createElement("span", { className: "".concat(style.lineText, " ").concat(style.preWhiteSpace) }, store.editorInput), | ||
React__namespace.createElement("br", null))); | ||
send({ type: "SUBMIT", loaderNode: waiting, command: command }); | ||
if (!store.editorInput) return [3 /*break*/, 9]; | ||
commandArguments_1 = rest.join(" "); | ||
if (!(command && commands[command])) return [3 /*break*/, 4]; | ||
executor_1 = commands[command]; | ||
if (!(typeof executor_1 === "function")) return [3 /*break*/, 2]; | ||
runningPromiseRef.current = new cancelablePromise.CancelablePromise(function (resolve) { | ||
resolve(executor_1(commandArguments_1)); | ||
}); | ||
return [4 /*yield*/, runningPromiseRef.current]; | ||
case 1: | ||
output = _b.sent(); | ||
return [3 /*break*/, 3]; | ||
case 2: | ||
output = executor_1; | ||
_b.label = 3; | ||
case 3: return [3 /*break*/, 9]; | ||
case 4: | ||
if (!(typeof defaultHandler === "function")) return [3 /*break*/, 6]; | ||
runningPromiseRef.current = new cancelablePromise.CancelablePromise(function (resolve) { | ||
resolve(defaultHandler(command, commandArguments_1)); | ||
}); | ||
return [4 /*yield*/, runningPromiseRef.current]; | ||
case 5: | ||
output = _b.sent(); | ||
return [3 /*break*/, 9]; | ||
case 6: | ||
if (!(typeof errorMessage === "function")) return [3 /*break*/, 8]; | ||
runningPromiseRef.current = new cancelablePromise.CancelablePromise(function (resolve) { | ||
resolve(errorMessage(command, commandArguments_1)); | ||
}); | ||
return [4 /*yield*/, runningPromiseRef.current]; | ||
case 7: | ||
output = _b.sent(); | ||
return [3 /*break*/, 9]; | ||
case 8: | ||
output = errorMessage; | ||
_b.label = 9; | ||
case 9: | ||
nextBufferedContent = (React__namespace.createElement(React__namespace.Fragment, null, | ||
store.bufferedContent, | ||
React__namespace.createElement("span", { style: { color: themeStyles.themePromptColor } }, prompt), | ||
React__namespace.createElement("span", { className: "".concat(style.lineText, " ").concat(style.preWhiteSpace) }, store.editorInput), | ||
output ? (React__namespace.createElement("span", null, | ||
React__namespace.createElement("br", null), | ||
output)) : null, | ||
React__namespace.createElement("br", null))); | ||
send({ type: "SUBMIT_SUCCESS", successNode: nextBufferedContent }); | ||
return [2 /*return*/]; | ||
} | ||
}); | ||
}); }, [send, store.bufferedContent, store.editorInput]); | ||
var handleKeyDownEvent = React__namespace.useCallback(function (event) { | ||
if (!consoleFocused) { | ||
return; | ||
} | ||
// checks the value of enableInput and returns if its false | ||
if (!enableInput) { | ||
return; | ||
} | ||
event.preventDefault(); | ||
var eventKey = event.key; | ||
if (eventKey === "Enter") { | ||
runCommand(); | ||
return; | ||
} | ||
var nextInput = null; | ||
if (eventKey === "Backspace") { | ||
if (store.editorInput && store.editorInput.length !== 0) { | ||
send({ type: "DELETE" }); | ||
} | ||
} | ||
else if (eventKey === "ArrowUp") { | ||
nextInput = getPreviousCommand(); | ||
if (nextInput) { | ||
send({ type: "ARROW_UP", previousCommand: nextInput }); | ||
} | ||
} | ||
else if (eventKey === "ArrowDown") { | ||
nextInput = getNextCommand(); | ||
if (nextInput) { | ||
send({ type: "ARROW_DOWN", nextCommand: nextInput }); | ||
} | ||
else { | ||
send({ type: "RESET_CARET_POSITION" }); | ||
} | ||
} | ||
else if (eventKey === "ArrowLeft") { | ||
if (store.caretPosition > 0) { | ||
send({ type: "ARROW_LEFT" }); | ||
} | ||
nextInput = store.editorInput; | ||
} | ||
else if (eventKey === "ArrowRight") { | ||
if (store.caretPosition < store.editorInput.length) { | ||
send({ type: "ARROW_RIGHT" }); | ||
} | ||
nextInput = store.editorInput; | ||
} | ||
else if ((event.metaKey || event.ctrlKey) | ||
&& eventKey.toLowerCase() === "l") { | ||
send({ type: "CLEAR" }); | ||
} | ||
else if ((event.metaKey || event.ctrlKey) | ||
&& event.shiftKey | ||
&& eventKey.toLowerCase() === "v") { | ||
navigator.clipboard.readText().then(function (pastedText) { | ||
send({ type: "PASTE", text: pastedText }); | ||
}); | ||
} | ||
else if ((event.metaKey || event.ctrlKey) | ||
&& event.shiftKey | ||
&& eventKey.toLowerCase() === "c") { | ||
var selectedText = window.getSelection().toString(); | ||
navigator.clipboard.writeText(selectedText).then(function () { | ||
send({ type: "COPY" }); | ||
}); | ||
} | ||
else if ((event.metaKey || event.ctrlKey) | ||
&& eventKey.toLowerCase() === "c") { | ||
if (runningPromiseRef.current) { | ||
runningPromiseRef.current.cancel(); | ||
} | ||
cancelCommand(); | ||
} | ||
else { | ||
if (eventKey && eventKey.length === 1) { | ||
send({ type: "TYPE", text: eventKey }); | ||
} | ||
} | ||
}, [cancelCommand, consoleFocused, enableInput, getNextCommand, getPreviousCommand, runCommand, send, store.caretPosition, store.editorInput]); | ||
React__namespace.useEffect(function () { | ||
// Bind the event listener | ||
document.addEventListener("keydown", handleKeyDownEvent); | ||
return function () { | ||
// Unbind the event listener on clean up | ||
document.removeEventListener("keydown", handleKeyDownEvent); | ||
}; | ||
}, [handleKeyDownEvent]); | ||
}; | ||
var useCurrentLine = function (caret, consoleFocused, prompt, commands, errorMessage, enableInput, defaultHandler) { | ||
var style = React__namespace.useContext(StyleContext); | ||
var themeStyles = React__namespace.useContext(ThemeContext); | ||
var store = useTerminal().store; | ||
var currentLine = store.currentLineStatus !== "processing" ? (React__namespace.createElement(React__namespace.Fragment, null, | ||
React__namespace.createElement("span", { style: { color: themeStyles.themePromptColor } }, prompt), | ||
React__namespace.createElement("div", { className: style.lineText }, | ||
React__namespace.createElement("span", { className: style.preWhiteSpace }, store.textBeforeCaret), | ||
consoleFocused && caret ? ( // if caret isn't true, caret won't be displayed | ||
React__namespace.createElement("span", { className: style.caret }, | ||
React__namespace.createElement("span", { className: style.caretAfter, style: { background: themeStyles.themeColor } }))) : null, | ||
React__namespace.createElement("span", { className: style.preWhiteSpace }, store.textAfterCaret)))) : (React__namespace.createElement(React__namespace.Fragment, null, | ||
React__namespace.createElement("div", { className: style.lineText }, consoleFocused && caret ? ( // if caret isn't true, caret won't be displayed | ||
React__namespace.createElement("span", { className: style.caret }, | ||
React__namespace.createElement("span", { className: style.caretAfter, style: { background: themeStyles.themeColor } }))) : null))); | ||
useEditorInput({ | ||
commands: commands, | ||
errorMessage: errorMessage, | ||
defaultHandler: defaultHandler, | ||
enableInput: enableInput, | ||
prompt: prompt, | ||
consoleFocused: consoleFocused | ||
}); | ||
return currentLine; | ||
}; | ||
var useScrollToBottom = function (changesToWatch, wrapperRef) { | ||
React__namespace.useEffect(function () { | ||
if (!wrapperRef.current) { | ||
return; | ||
} | ||
// eslint-disable-next-line no-param-reassign | ||
wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight; | ||
}, [changesToWatch]); | ||
}; | ||
function Editor(props) { | ||
var wrapperRef = React__namespace.useRef(null); | ||
var style = React__namespace.useContext(StyleContext); | ||
var themeStyles = React__namespace.useContext(ThemeContext); | ||
var store = useTerminal().store; | ||
useScrollToBottom(store.bufferedContent, wrapperRef); | ||
var enableInput = props.enableInput, caret = props.caret, consoleFocused = props.consoleFocused, prompt = props.prompt, commands = props.commands, welcomeMessage = props.welcomeMessage, errorMessage = props.errorMessage, showControlBar = props.showControlBar, defaultHandler = props.defaultHandler; | ||
var currentLine = useCurrentLine(caret, consoleFocused, prompt, commands, errorMessage, enableInput, defaultHandler); | ||
return (React__namespace.createElement("div", { id: "terminalEditor", ref: wrapperRef, className: "".concat(style.editor, " ").concat(!showControlBar ? style.curvedTop : null, " ").concat(showControlBar ? style.editorWithTopBar : null), style: { background: themeStyles.themeBGColor } }, | ||
welcomeMessage, | ||
store.bufferedContent, | ||
currentLine)); | ||
} | ||
function Terminal(props) { | ||
var wrapperRef = React__namespace.useRef(null); | ||
var _a = React__namespace.useState(true), consoleFocused = _a[0], setConsoleFocused = _a[1]; | ||
var style = React__namespace.useContext(StyleContext); | ||
var themeStyles = React__namespace.useContext(ThemeContext); | ||
useClickOutsideEvent(wrapperRef, consoleFocused, setConsoleFocused); | ||
// Get all props destructively | ||
var _b = props.caret, caret = _b === void 0 ? true : _b, _c = props.theme, theme = _c === void 0 ? "light" : _c, _d = props.showControlBar, showControlBar = _d === void 0 ? true : _d, _e = props.showControlButtons, showControlButtons = _e === void 0 ? true : _e, _f = props.controlButtonLabels, controlButtonLabels = _f === void 0 ? ["close", "minimize", "maximize"] : _f, _g = props.prompt, prompt = _g === void 0 ? ">>>" : _g, _h = props.commands, commands = _h === void 0 ? {} : _h, _j = props.welcomeMessage, welcomeMessage = _j === void 0 ? "" : _j, _k = props.errorMessage, errorMessage = _k === void 0 ? "not found!" : _k, _l = props.enableInput, enableInput = _l === void 0 ? true : _l, _m = props.defaultHandler, defaultHandler = _m === void 0 ? null : _m; | ||
var controls = showControlBar ? React__namespace.createElement(Controls, { consoleFocused: consoleFocused, showControlButtons: showControlButtons, controlButtonLabels: controlButtonLabels }) : null; | ||
var editor = React__namespace.createElement(Editor, { caret: caret, consoleFocused: consoleFocused, prompt: prompt, commands: commands, welcomeMessage: welcomeMessage, errorMessage: errorMessage, enableInput: enableInput, showControlBar: showControlBar, defaultHandler: (defaultHandler) }); | ||
return (React__namespace.createElement("div", { ref: wrapperRef, id: style.terminalContainer, className: style["theme--".concat(theme)], "data-testid": "terminal" }, | ||
React__namespace.createElement("div", { className: "".concat(style.terminal), style: { background: themeStyles.themeToolbarColor, color: themeStyles.themeColor } }, | ||
controls, | ||
editor))); | ||
} | ||
function ContextProvider(props) { | ||
var children = props.children; | ||
return (React__namespace.createElement(StyleContextProvider, null, | ||
React__namespace.createElement(ThemeContextProvider, null, children))); | ||
} | ||
function ReactTerminal(props) { | ||
return (React__namespace.createElement(ContextProvider, null, | ||
React__namespace.createElement(Terminal, __assign({}, props)))); | ||
} | ||
var TerminalContextProvider = TerminalContextProvider$1; | ||
var index = { | ||
ReactTerminal: ReactTerminal, | ||
TerminalContextProvider: TerminalContextProvider | ||
}; | ||
exports.ReactTerminal = ReactTerminal; | ||
exports.TerminalContextProvider = TerminalContextProvider; | ||
exports.default = index; | ||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("cancelable-promise");function n(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var r=n(e),o=function(){return o=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},o.apply(this,arguments)};function a(e,t,n,r){return new(n||(n=Promise))((function(o,a){function i(e){try{c(r.next(e))}catch(e){a(e)}}function l(e){try{c(r.throw(e))}catch(e){a(e)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(i,l)}c((r=r.apply(e,t||[])).next())}))}function i(e,t){var n,r,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function l(l){return function(c){return function(l){if(n)throw new TypeError("Generator is already executing.");for(;a&&(a=0,l[0]&&(i=0)),i;)try{if(n=1,r&&(o=2&l[0]?r.return:l[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,l[1])).done)return o;switch(r=0,o&&(l=[2&l[0],o.value]),l[0]){case 0:case 1:o=l;break;case 4:return i.label++,{value:l[1],done:!1};case 5:i.label++,r=l[1],l=[0];continue;case 7:l=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==l[0]&&2!==l[0])){i=0;continue}if(3===l[0]&&(!o||l[1]>o[0]&&l[1]<o[3])){i.label=l[1];break}if(6===l[0]&&i.label<o[1]){i.label=o[1],o=l;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(l);break}o[2]&&i.ops.pop(),i.trys.pop();continue}l=t.call(e,i)}catch(e){l=[6,e],r=0}finally{n=o=0}if(5&l[0])throw l[1];return{value:l[0]?l[1]:void 0,done:!0}}([l,c])}}}function l(e,t,n){if(n||2===arguments.length)for(var r,o=0,a=t.length;o<a;o++)!r&&o in t||(r||(r=Array.prototype.slice.call(t,0,o)),r[o]=t[o]);return e.concat(r||Array.prototype.slice.call(t))}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}('@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap");\n#index_terminalContainer__4seT6 {\n --control-default-bg-color: #ccc;\n --control-close-bg-color: #fc5b57;\n --control-minimize-bg-color: #e5bf3c;\n --control-maximize-bg-color: #57c038;\n}\n\n.index_controls__sXDjs {\n text-align: left;\n height: 26px;\n position: relative;\n top: 4px;\n margin-left: 4px;\n}\n.index_controls__sXDjs .index_consoleCtrl__DI2H1 {\n display: inline-block;\n width: 13px;\n height: 13px;\n margin: 0 3px;\n border-radius: 50%;\n background: var(--control-default-bg-color);\n}\n.index_controls__sXDjs .index_close__XGN9U {\n background: var(--control-close-bg-color);\n}\n.index_controls__sXDjs .index_minimize__pZYTU {\n background: var(--control-minimize-bg-color);\n}\n.index_controls__sXDjs .index_maximize__szRK7 {\n background: var(--control-maximize-bg-color);\n}\n\n.index_editor__JoDSg {\n text-align: left;\n height: 100%;\n padding: 10px 15px;\n overflow-wrap: break-word;\n overflow-y: scroll;\n outline: none;\n font-family: "Source Code Pro", monospace;\n font-size: 18px;\n line-height: 22px;\n border-bottom-left-radius: 5px;\n border-bottom-right-radius: 5px;\n}\n.index_editor__JoDSg .index_lineText__j6qNj {\n display: inline;\n position: relative;\n top: -1px;\n margin-left: 8px;\n}\n.index_editor__JoDSg .index_preWhiteSpace__7KwuG {\n white-space: pre-wrap;\n}\n.index_editor__JoDSg .index_caret__VS4iV {\n position: relative;\n}\n.index_editor__JoDSg .index_caret__VS4iV .index_caretAfter__6aXPx {\n content: "";\n position: absolute;\n top: 2px;\n width: 10px;\n height: 22px;\n z-index: 10;\n}\n@-moz-keyframes index_blink__FJp0- {\n 0% {\n opacity: 0;\n -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";\n filter: alpha(opacity=0);\n }\n 100% {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n }\n}\n@-webkit-keyframes index_blink__FJp0- {\n 0% {\n opacity: 0;\n -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";\n filter: alpha(opacity=0);\n }\n 100% {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n }\n}\n@-o-keyframes index_blink__FJp0- {\n 0% {\n opacity: 0;\n -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";\n filter: alpha(opacity=0);\n }\n 100% {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n }\n}\n@keyframes index_blink__FJp0- {\n 0% {\n opacity: 0;\n -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";\n filter: alpha(opacity=0);\n }\n 100% {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n }\n}\n.index_editor__JoDSg a {\n color: #1a87b5;\n}\n\n.index_editorWithTopBar__L6XKw {\n height: calc(100% - 46px);\n}\n\n.index_curvedTop__LX9XS {\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n}\n\n#index_terminalContainer__4seT6 {\n height: 100%;\n}\n\n.index_terminal__teubZ {\n height: 100%;\n width: 100%;\n margin: auto;\n border-radius: 5px;\n}');var c={terminalContainer:"index_terminalContainer__4seT6",controls:"index_controls__sXDjs",consoleCtrl:"index_consoleCtrl__DI2H1",close:"index_close__XGN9U",minimize:"index_minimize__pZYTU",maximize:"index_maximize__szRK7",editor:"index_editor__JoDSg",lineText:"index_lineText__j6qNj",preWhiteSpace:"index_preWhiteSpace__7KwuG",caret:"index_caret__VS4iV",caretAfter:"index_caretAfter__6aXPx",editorWithTopBar:"index_editorWithTopBar__L6XKw",curvedTop:"index_curvedTop__LX9XS",terminal:"index_terminal__teubZ",blink:"index_blink__FJp0-"},s=r.createContext(null),u=function(e){var t=e.children;return r.createElement(s.Provider,{value:c},t)},d={dark:{themeBGColor:"#022833",themeToolbarColor:"#131519",themeColor:"#839496",themePromptColor:"#a917a8"},light:{themeBGColor:"#fdf6e4",themeToolbarColor:"#d8d8d8",themeColor:"#333333",themePromptColor:"#a917a8"},dracula:{themeBGColor:"#272B36",themeToolbarColor:"#DBDBDB",themeColor:"#FFFEFC",themePromptColor:"#a917a8"},"material-dark":{themeBGColor:"#151515",themeToolbarColor:"#424242",themeColor:"#fff",themePromptColor:"#42A5F5"},"material-light":{themeBGColor:"#fafafa",themeToolbarColor:"#424242",themeColor:"#151515",themePromptColor:"#42A5F5"},"material-ocean":{themeBGColor:"#263238",themeToolbarColor:"#37474F",themeColor:"#fff",themePromptColor:"#C3D82C"},matrix:{themeBGColor:"#0D0208",themeToolbarColor:"#0D0208",themeColor:"#00FF41",themePromptColor:"#008F11"}},m=r.createContext(null),p=function(e){var t=e.children,n=o(o({},d),t.props.themes||{}),a=n[t.props.theme]||n.light;return r.createElement(m.Provider,{value:a},t)},f=function(e,t,n){var o=function(t){e.current&&!e.current.contains(t.target)?n(!1):n(!0)};r.useEffect((function(){return document.addEventListener("mousedown",o),function(){document.removeEventListener("mousedown",o)}}))};function x(e){var t=r.useContext(s),n=e.controlButtonLabels,o=e.showControlButtons?n.map((function(e){return r.createElement("div",{key:e,className:"".concat(t.consoleCtrl," ").concat(t[e])})})):null;return r.createElement("div",{className:t.controls},o)}var C=function(){function e(){}return e.splitStringAtIndex=function(e,t){return e?[e.substring(0,t),e.substring(t)]:["",""]},e}(),h=r.createContext(null);function _(e,t){switch(t.type){case"CLEAR":return o(o({},e),{bufferedContent:null,editorInput:"",currentLineStatus:"idle",caretPosition:0,textBeforeCaret:"",textAfterCaret:""});case"CANCEL":return o(o({},e),{bufferedContent:t.cancelNode,editorInput:"",currentLineStatus:"idle",caretPosition:0,textBeforeCaret:"",textAfterCaret:""});case"SUBMIT":var n=t.command,r=n?l(l([],e.commandsHistory,!0),[n],!1):e.commandsHistory;return o(o({},e),{commandsHistory:r,bufferedContent:t.loaderNode,currentLineStatus:"processing",editorInput:"",caretPosition:0,textBeforeCaret:"",textAfterCaret:""});case"SUBMIT_SUCCESS":return o(o({},e),{bufferedContent:t.successNode,currentLineStatus:"success",editorInput:"",caretPosition:0,textBeforeCaret:"",textAfterCaret:""});case"TYPE":var a=v(e),i=a[0],c=a[1],s=y(h=i+t.text+c,b=e.caretPosition+1),u=s[0],d=s[1];return o(o({},e),{caretPosition:b,editorInput:h,textAfterCaret:d,textBeforeCaret:u});case"DELETE":var m=v(e),p=(i=m[0],c=m[1],y(h=i.slice(0,-1)+c,b=e.caretPosition-1));u=p[0],d=p[1];return o(o({},e),{editorInput:h,caretPosition:b,textAfterCaret:d,textBeforeCaret:u});case"COPY":return e;case"PASTE":var f=v(e),x=(i=f[0],c=f[1],y(h=i+t.text+c,b=e.caretPosition+t.text.length));u=x[0],d=x[1];return o(o({},e),{editorInput:h,caretPosition:b,textAfterCaret:d,textBeforeCaret:u});case"ARROW_UP":var C=y(h=t.previousCommand,b=t.previousCommand.length);u=C[0],d=C[1];return o(o({},e),{editorInput:h,caretPosition:b,textAfterCaret:d,textBeforeCaret:u});case"ARROW_DOWN":var h,_=y(h=t.nextCommand,b=t.nextCommand.length);u=_[0],d=_[1];return o(o({},e),{editorInput:h,caretPosition:b,textAfterCaret:d,textBeforeCaret:u});case"RESET_CARET_POSITION":return o(o({},e),{textBeforeCaret:"",textAfterCaret:"",caretPosition:0});case"ARROW_LEFT":var b=e.caretPosition-1,g=y(e.editorInput,b);u=g[0],d=g[1];return o(o({},e),{caretPosition:b,textAfterCaret:d,textBeforeCaret:u});case"ARROW_RIGHT":b=e.caretPosition+1;var E=y(e.editorInput,b);u=E[0],d=E[1];return o(o({},e),{caretPosition:b,textAfterCaret:d,textBeforeCaret:u});default:throw new Error("Unhandled action type: ".concat(JSON.stringify(t)))}}function v(e){var t=C.splitStringAtIndex(e.editorInput,e.caretPosition);return[t[0],t[1]]}function y(e,t){var n=C.splitStringAtIndex(e,t);return[n[0],n[1]]}var b={bufferedContent:null,commandsHistory:[],editorInput:"",currentLineStatus:"idle",caretPosition:0,textBeforeCaret:"",textAfterCaret:""};function g(){var e=r.useContext(h);if(void 0===e)throw new Error("useTerminal must be used within a TerminalContextProvider");return e}var E=function(e,n,o,l,c,u,d){var p=r.useContext(s),f=r.useContext(m),x=g().store,C="processing"!==x.currentLineStatus?r.createElement(r.Fragment,null,r.createElement("span",{style:{color:f.themePromptColor}},o),r.createElement("div",{className:p.lineText},r.createElement("span",{className:p.preWhiteSpace},x.textBeforeCaret),n&&e?r.createElement("span",{className:p.caret},r.createElement("span",{className:p.caretAfter,style:{background:f.themeColor}})):null,r.createElement("span",{className:p.preWhiteSpace},x.textAfterCaret))):r.createElement(r.Fragment,null,r.createElement("div",{className:p.lineText},n&&e?r.createElement("span",{className:p.caret},r.createElement("span",{className:p.caretAfter,style:{background:f.themeColor}})):null));return function(e){var n=e.consoleFocused,o=e.enableInput,l=e.commands,c=e.defaultHandler,u=e.errorMessage,d=e.prompt,p=r.useContext(s),f=r.useContext(m),x=g(),C=x.getPreviousCommand,h=x.getNextCommand,_=x.store,v=x.send,y=r.useRef(null),b=r.useCallback((function(){y.current&&y.current.cancel();var e=r.createElement(r.Fragment,null,_.bufferedContent,r.createElement("span",{style:{color:f.themePromptColor}},d),r.createElement("span",{className:"".concat(p.lineText," ").concat(p.preWhiteSpace)},_.editorInput),r.createElement("br",null));v({type:"CANCEL",cancelNode:e})}),[d,v,_.bufferedContent,_.editorInput,p.lineText,p.preWhiteSpace,f.themePromptColor]),E=r.useCallback((function(){return a(void 0,void 0,void 0,(function(){var e,n,o,a,s,m,x,C;return i(this,(function(i){switch(i.label){case 0:return e=_.editorInput.trim().split(" "),n=e[0],o=e.slice(1),a="","clear"===n||"cls"===n?(v({type:"CLEAR"}),[2]):(s=r.createElement(r.Fragment,null,_.bufferedContent,r.createElement("span",{style:{color:f.themePromptColor}},d),r.createElement("span",{className:"".concat(p.lineText," ").concat(p.preWhiteSpace)},_.editorInput),r.createElement("br",null)),v({type:"SUBMIT",loaderNode:s,command:n}),_.editorInput?(m=o.join(" "),n&&l[n]?"function"!=typeof(x=l[n])?[3,2]:(y.current=new t.CancelablePromise((function(e){e(x(m))})),[4,y.current]):[3,4]):[3,9]);case 1:return a=i.sent(),[3,3];case 2:a=x,i.label=3;case 3:return[3,9];case 4:return"function"!=typeof c?[3,6]:(y.current=new t.CancelablePromise((function(e){e(c(n,m))})),[4,y.current]);case 5:return a=i.sent(),[3,9];case 6:return"function"!=typeof u?[3,8]:(y.current=new t.CancelablePromise((function(e){e(u(n,m))})),[4,y.current]);case 7:return a=i.sent(),[3,9];case 8:a=u,i.label=9;case 9:return C=r.createElement(r.Fragment,null,_.bufferedContent,r.createElement("span",{style:{color:f.themePromptColor}},d),r.createElement("span",{className:"".concat(p.lineText," ").concat(p.preWhiteSpace)},_.editorInput),a?r.createElement("span",null,r.createElement("br",null),a):null,r.createElement("br",null)),v({type:"SUBMIT_SUCCESS",successNode:C}),[2]}}))}))}),[v,_.bufferedContent,_.editorInput]),T=r.useCallback((function(e){if(n&&o){e.preventDefault();var t=e.key;if("Enter"!==t){var r=null;if("Backspace"===t)_.editorInput&&0!==_.editorInput.length&&v({type:"DELETE"});else if("ArrowUp"===t)(r=C())&&v({type:"ARROW_UP",previousCommand:r});else if("ArrowDown"===t)r=h(),v(r?{type:"ARROW_DOWN",nextCommand:r}:{type:"RESET_CARET_POSITION"});else if("ArrowLeft"===t)_.caretPosition>0&&v({type:"ARROW_LEFT"}),r=_.editorInput;else if("ArrowRight"===t)_.caretPosition<_.editorInput.length&&v({type:"ARROW_RIGHT"}),r=_.editorInput;else if((e.metaKey||e.ctrlKey)&&"l"===t.toLowerCase())v({type:"CLEAR"});else if((e.metaKey||e.ctrlKey)&&e.shiftKey&&"v"===t.toLowerCase())navigator.clipboard.readText().then((function(e){v({type:"PASTE",text:e})}));else if((e.metaKey||e.ctrlKey)&&e.shiftKey&&"c"===t.toLowerCase()){var a=window.getSelection().toString();navigator.clipboard.writeText(a).then((function(){v({type:"COPY"})}))}else(e.metaKey||e.ctrlKey)&&"c"===t.toLowerCase()?(y.current&&y.current.cancel(),b()):t&&1===t.length&&v({type:"TYPE",text:t})}else E()}}),[b,n,o,h,C,E,v,_.caretPosition,_.editorInput]);r.useEffect((function(){return document.addEventListener("keydown",T),function(){document.removeEventListener("keydown",T)}}),[T])}({commands:l,errorMessage:c,defaultHandler:d,enableInput:u,prompt:o,consoleFocused:n}),C},T=function(e,t){r.useEffect((function(){t.current&&(t.current.scrollTop=t.current.scrollHeight)}),[e])};function P(e){var t=r.useRef(null),n=r.useContext(s),o=r.useContext(m),a=g().store;T(a.bufferedContent,t);var i=e.enableInput,l=e.caret,c=e.consoleFocused,u=e.prompt,d=e.commands,p=e.welcomeMessage,f=e.errorMessage,x=e.showControlBar,C=e.defaultHandler,h=E(l,c,u,d,f,i,C);return r.createElement("div",{id:"terminalEditor",ref:t,className:"".concat(n.editor," ").concat(x?null:n.curvedTop," ").concat(x?n.editorWithTopBar:null),style:{background:o.themeBGColor}},p,a.bufferedContent,h)}function w(e){var t=r.useRef(null),n=r.useState(!0),o=n[0],a=n[1],i=r.useContext(s),l=r.useContext(m);f(t,o,a);var c=e.caret,u=void 0===c||c,d=e.theme,p=void 0===d?"light":d,C=e.showControlBar,h=void 0===C||C,_=e.showControlButtons,v=void 0===_||_,y=e.controlButtonLabels,b=void 0===y?["close","minimize","maximize"]:y,g=e.prompt,E=void 0===g?">>>":g,T=e.commands,w=void 0===T?{}:T,S=e.welcomeMessage,A=void 0===S?"":S,I=e.errorMessage,B=void 0===I?"not found!":I,N=e.enableInput,k=void 0===N||N,R=e.defaultHandler,D=void 0===R?null:R,L=h?r.createElement(x,{consoleFocused:o,showControlButtons:v,controlButtonLabels:b}):null,O=r.createElement(P,{caret:u,consoleFocused:o,prompt:E,commands:w,welcomeMessage:A,errorMessage:B,enableInput:k,showControlBar:h,defaultHandler:D});return r.createElement("div",{ref:t,id:i.terminalContainer,className:i["theme--".concat(p)],"data-testid":"terminal"},r.createElement("div",{className:"".concat(i.terminal),style:{background:l.themeToolbarColor,color:l.themeColor}},L,O))}function S(e){var t=e.children;return r.createElement(u,null,r.createElement(p,null,t))}function A(e){return r.createElement(S,null,r.createElement(w,o({},e)))}var I=function(e){var t=e.children,n=r.useState(null),o=n[0],a=n[1],i=r.useReducer(_,b),l=i[0],c=i[1];r.useEffect((function(){a(l.commandsHistory.length)}),[l.commandsHistory]);var s=r.useMemo((function(){return{send:c,store:l,getPreviousCommand:function(){if(0===o)return 0===l.commandsHistory.length?"":l.commandsHistory[0];var e=l.commandsHistory[o-1];return o>0&&a(o-1),e},getNextCommand:function(){if(o+1<=l.commandsHistory.length){var e=l.commandsHistory[o+1];return a(o+1),e}return""}}}),[o,l]);return r.createElement(h.Provider,{value:s},t)},B={ReactTerminal:A,TerminalContextProvider:I};exports.ReactTerminal=A,exports.TerminalContextProvider=I,exports.default=B; |
{ | ||
"name": "react-terminal-plus", | ||
"version": "0.0.1", | ||
"np": { | ||
"tests": false | ||
}, | ||
"version": "0.0.2", | ||
"description": "A fork of the the 'react-terminal' package, with some extra features - react-terminal-plus", | ||
@@ -11,3 +14,5 @@ "main": "dist/index.js", | ||
"watch": "rollup -cw", | ||
"test": "jest" | ||
"test": "jest", | ||
"prepublishOnly": "npm run build", | ||
"release": "npx np" | ||
}, | ||
@@ -103,3 +108,6 @@ "files": [ | ||
"cancelable-promise": "^4.3.1" | ||
}, | ||
"engines": { | ||
"node": ">=16" | ||
} | ||
} |
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
26
4%46402
-42.95%357
-75.24%3
200%1
Infinity%