diff --git a/news/1 Enhancements/7378.md b/news/1 Enhancements/7378.md new file mode 100644 index 00000000000..f156be307ec --- /dev/null +++ b/news/1 Enhancements/7378.md @@ -0,0 +1 @@ +Add middle toolbar to a native editor cell. diff --git a/package-lock.json b/package-lock.json index 6a672b6146b..bd199954fcf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4719,7 +4719,8 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -4743,13 +4744,15 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -4766,19 +4769,22 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -4909,7 +4915,8 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -4923,6 +4930,7 @@ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -4939,6 +4947,7 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -4947,13 +4956,15 @@ "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz", "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -4974,6 +4985,7 @@ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5062,7 +5074,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5076,6 +5089,7 @@ "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5171,7 +5185,8 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -5213,6 +5228,7 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5234,6 +5250,7 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5282,13 +5299,15 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz", "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "dev": true + "dev": true, + "optional": true } } }, @@ -9213,7 +9232,8 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -9235,12 +9255,14 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -9254,19 +9276,22 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -9384,7 +9409,8 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -9396,6 +9422,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -9410,6 +9437,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -9418,7 +9446,8 @@ "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", @@ -9439,6 +9468,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -9520,7 +9550,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -9532,6 +9563,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -9652,6 +9684,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -9671,6 +9704,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -9708,6 +9742,7 @@ "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz", "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -9727,7 +9762,8 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true + "dev": true, + "optional": true } } }, @@ -9750,7 +9786,8 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", @@ -13703,7 +13740,7 @@ "dependencies": { "buffer": { "version": "4.9.1", - "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", + "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=", "dev": true, "requires": { @@ -13726,7 +13763,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "dev": true, "requires": { @@ -14078,7 +14115,7 @@ }, "os-locale": { "version": "3.1.0", - "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz", + "resolved": "", "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==", "dev": true, "requires": { @@ -14095,7 +14132,7 @@ }, "resolve-from": { "version": "4.0.0", - "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "resolved": "", "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", "dev": true }, @@ -18694,7 +18731,7 @@ "dependencies": { "json5": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", + "resolved": "http://registry.npmjs.org/json5/-/json5-1.0.1.tgz", "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", "dev": true, "requires": { diff --git a/src/datascience-ui/interactive-common/cellInput.tsx b/src/datascience-ui/interactive-common/cellInput.tsx index d1a0e7f59ef..de86c6b3c1f 100644 --- a/src/datascience-ui/interactive-common/cellInput.tsx +++ b/src/datascience-ui/interactive-common/cellInput.tsx @@ -157,7 +157,7 @@ export class CellInput extends React.Component { unfocused={this.onMarkdownUnfocused} keyDown={this.onKeyDown} ref={this.markdownRef} - useQuickEdit={this.props.cellVM.useQuickEdit} + useQuickEdit={false} /> ); diff --git a/src/datascience-ui/interactive-common/cellOutput.tsx b/src/datascience-ui/interactive-common/cellOutput.tsx index 97d00a92fee..9367d9072d7 100644 --- a/src/datascience-ui/interactive-common/cellOutput.tsx +++ b/src/datascience-ui/interactive-common/cellOutput.tsx @@ -45,7 +45,6 @@ export class CellOutput extends React.Component { constructor(prop: ICellOutputProps) { super(prop); - this.state = { showingMarkdownEditor: false }; } private static getAnsiToHtmlOptions() : { fg: string; bg: string; colors: string [] } { diff --git a/src/datascience-ui/interactive-common/mainStateController.ts b/src/datascience-ui/interactive-common/mainStateController.ts index b302affc053..3d8882ed67b 100644 --- a/src/datascience-ui/interactive-common/mainStateController.ts +++ b/src/datascience-ui/interactive-common/mainStateController.ts @@ -479,11 +479,13 @@ export class MainStateController implements IMessageHandler { } public changeCellType = (cellId: string, newType: 'code' | 'markdown') => { - const cell = this.findCell(cellId); - if (cell && cell.cell.data.cell_type !== newType) { - cell.cell.data.cell_type = newType; - this.alterCellVM(cell, true, true); - this.setState({ cellVMs: this.state.cellVMs }); + const index = this.state.cellVMs.findIndex(c => c.cell.id === cellId); + if (index >= 0 && this.state.cellVMs[index].cell.data.cell_type !== newType) { + const newVM = cloneDeep(this.state.cellVMs[index]); + newVM.cell.data.cell_type = newType; + const cellVMs = [...this.state.cellVMs]; + cellVMs.splice(index, 1, newVM); + this.setState({ cellVMs }); } } diff --git a/src/datascience-ui/native-editor/nativeCell.tsx b/src/datascience-ui/native-editor/nativeCell.tsx index 90a6754a3aa..ce406e6abfa 100644 --- a/src/datascience-ui/native-editor/nativeCell.tsx +++ b/src/datascience-ui/native-editor/nativeCell.tsx @@ -16,7 +16,6 @@ import { ExecutionCount } from '../interactive-common/executionCount'; import { InformationMessages } from '../interactive-common/informationMessages'; import { ICellViewModel } from '../interactive-common/mainState'; import { IKeyboardEvent } from '../react-common/event'; -import { Flyout } from '../react-common/flyout'; import { Image, ImageName } from '../react-common/image'; import { ImageButton } from '../react-common/imageButton'; import { getLocString } from '../react-common/locReactSide'; @@ -91,6 +90,24 @@ export class NativeCell extends React.Component { + if (this.wrapperRef.current) { + const wasFocused = this.isFocused(); + const cellId = this.cellId; + this.props.stateController.moveCellUp(cellId); + setTimeout(() => this.props.focusCell(cellId, wasFocused ? true : false), 1); + } + } + + public moveCellDown = () => { + if (this.wrapperRef.current) { + const wasFocused = this.isFocused(); + const cellId = this.cellId; + this.props.stateController.moveCellDown(cellId); + setTimeout(() => this.props.focusCell(cellId, wasFocused ? true : false), 1); + } + } + private getCell = () => { return this.props.cellVM.cell; } @@ -121,15 +138,24 @@ export class NativeCell extends React.Component + {this.renderOutput()} + {this.renderMiddleToolbar()} + : +
+ {this.renderInput()} + {this.renderMiddleToolbar()} + {this.renderOutput()} +
; + return (
{this.renderControls()}
-
- {this.renderInput()} - {this.renderResultsDiv(this.renderResults())} -
+ {content}
@@ -446,52 +472,19 @@ export class NativeCell extends React.Component { - if (this.wrapperRef.current) { - const wasFocused = this.isFocused(); - const cellId = this.cellId; - this.props.stateController.moveCellUp(cellId); - setTimeout(() => this.props.focusCell(cellId, wasFocused ? true : false), 1); - } - } - - private moveCellDown = () => { - if (this.wrapperRef.current) { - const wasFocused = this.isFocused(); - const cellId = this.cellId; - this.props.stateController.moveCellDown(cellId); - setTimeout(() => this.props.focusCell(cellId, wasFocused ? true : false), 1); - } - } - private renderControls = () => { + private renderMiddleToolbar = () => { const cellId = this.props.cellVM.cell.id; - const busy = this.props.cellVM.cell.state === CellState.init || this.props.cellVM.cell.state === CellState.executing; - const executionCount = this.props.cellVM && this.props.cellVM.cell && this.props.cellVM.cell.data && this.props.cellVM.cell.data.execution_count ? - this.props.cellVM.cell.data.execution_count.toString() : '-'; - const flyoutClass = this.isFocused() ? 'native-editor-cellflyout native-editor-cellflyout-focused' - : 'native-editor-cellflyout native-editor-cellflyout-selected'; - const deleteCell = () => { + const cellToSelect = this.getPrevCellId() || this.getNextCellId(); this.props.stateController.deleteCell(cellId); this.props.stateController.sendCommand(NativeCommandType.DeleteCell, 'mouse'); + setTimeout(() => { + if (cellToSelect) { + this.moveSelection(cellToSelect); + } + }, 10); }; - const runCell = () => { - this.props.stateController.updateCellSource(cellId); - this.props.stateController.submitInput(concatMultilineString(this.props.cellVM.cell.data.source), this.props.cellVM); - this.props.focusCell(cellId, false); - this.props.stateController.sendCommand(NativeCommandType.Run, 'mouse'); - }; - const moveUp = () => { - this.moveCellUp(); - this.props.stateController.sendCommand(NativeCommandType.MoveCellUp, 'mouse'); - }; - const moveDown = () => { - this.moveCellDown(); - this.props.stateController.sendCommand(NativeCommandType.MoveCellDown, 'mouse'); - }; - const canMoveUp = this.props.stateController.canMoveUp(cellId); - const canMoveDown = this.props.stateController.canMoveDown(cellId); const runAbove = () => { this.props.stateController.runAbove(cellId); this.props.stateController.sendCommand(NativeCommandType.RunAbove, 'mouse'); @@ -502,15 +495,6 @@ export class NativeCell extends React.Component { - this.props.stateController.insertAbove(cellId, true); - this.props.stateController.sendCommand(NativeCommandType.InsertAbove, 'mouse'); - }; - const insertBelow = () => { - this.props.stateController.insertBelow(cellId, true); - this.props.stateController.sendCommand(NativeCommandType.InsertBelow, 'mouse'); - }; - const runCellHidden = !canRunBelow || this.isMarkdownCell(); const switchTooltip = this.props.cellVM.cell.data.cell_type === 'code' ? getLocString('DataScience.switchToMarkdown', 'Change to markdown') : getLocString('DataScience.switchToCode', 'Change to code'); const switchImage = this.props.cellVM.cell.data.cell_type === 'code' ? ImageName.SwitchToMarkdown : ImageName.SwitchToCode; @@ -522,38 +506,42 @@ export class NativeCell extends React.Component + + + + + + + + + + + + + + ); + } + + private renderControls = () => { + const cellId = this.props.cellVM.cell.id; + const busy = this.props.cellVM.cell.state === CellState.init || this.props.cellVM.cell.state === CellState.executing; + const executionCount = this.props.cellVM && this.props.cellVM.cell && this.props.cellVM.cell.data && this.props.cellVM.cell.data.execution_count ? + this.props.cellVM.cell.data.execution_count.toString() : '-'; + const runCell = () => { + this.props.stateController.updateCellSource(cellId); + this.props.stateController.submitInput(concatMultilineString(this.props.cellVM.cell.data.source), this.props.cellVM); + this.props.focusCell(cellId, false); + this.props.stateController.sendCommand(NativeCommandType.Run, 'mouse'); + }; + const canRunBelow = this.props.cellVM.cell.state === CellState.finished || this.props.cellVM.cell.state === CellState.error; + const runCellHidden = !canRunBelow || this.isMarkdownCell(); + return (
-
- ...} flyoutContainerName={flyoutClass}> - - - - - - - - - - - - - - - - - - - - - - - - - -
-
+
@@ -610,16 +598,7 @@ export class NativeCell extends React.Component { - - // Only render results if not an edit cell - if (this.props.cellVM.cell.id !== Identifiers.EditCellId) { - return results; - } - return null; - } - - private renderResults = (): JSX.Element | null => { + private renderOutput = (): JSX.Element | null => { if (this.shouldRenderOutput()) { return (