+
diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts
index b58d8d8fee..081e78d255 100644
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts
@@ -31,7 +31,6 @@ import { IColorTheme } from 'vs/platform/theme/common/themeService';
export const TEXT_SELECTOR: string = 'text-cell-component';
const USER_SELECT_CLASS = 'actionselect';
-
@Component({
selector: TEXT_SELECTOR,
templateUrl: decodeURI(require.toUrl('./textCell.component.html'))
diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.css b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.css
index 236b314921..c03714eb82 100644
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.css
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.css
@@ -7,6 +7,12 @@ text-cell-component {
display: block;
}
+.notebookEditor .notebook-cell.active text-cell-component code-component {
+ border-color: transparent;
+ border-bottom-width: 1px;
+ border-style: solid;
+}
+
text-cell-component .notebook-preview {
user-select: none;
padding-left: 8px;
@@ -17,6 +23,16 @@ text-cell-component .notebook-preview {
user-select: text;
}
+text-cell-component code-component .monaco-scrollable-element.editor-scrollable.vs {
+ left: 16px!important;
+}
+text-cell-component .monaco-editor .margin,
+text-cell-component code-component .monaco-editor,
+text-cell-component code-component .monaco-editor-background,
+text-cell-component code-component .monaco-editor .inputarea.ime-input {
+ background-color: transparent;
+}
+
.vs .notebook-preview .rangeHighlight {
background-color: rgba(255, 255, 0, 0.2)
}
diff --git a/src/sql/workbench/contrib/notebook/browser/markdownToolbarActions.ts b/src/sql/workbench/contrib/notebook/browser/markdownToolbarActions.ts
new file mode 100644
index 0000000000..257ed782e7
--- /dev/null
+++ b/src/sql/workbench/contrib/notebook/browser/markdownToolbarActions.ts
@@ -0,0 +1,344 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { Action } from 'vs/base/common/actions';
+
+import { INotebookEditor, INotebookService } from 'sql/workbench/services/notebook/browser/notebookService';
+import { CodeEditorWidget } from 'vs/editor/browser/widget/codeEditorWidget';
+import { IRange } from 'vs/editor/common/core/range';
+import { IIdentifiedSingleEditOperation } from 'vs/editor/common/model';
+import { TextModel } from 'vs/editor/common/model/textModel';
+import { ICellModel } from 'sql/workbench/services/notebook/browser/models/modelInterfaces';
+import { QueryTextEditor } from 'sql/workbench/browser/modelComponents/queryTextEditor';
+import { Selection } from 'vs/editor/common/core/selection';
+
+
+
+// Action to decorate markdown
+export class TransformMarkdownAction extends Action {
+
+ constructor(
+ id: string,
+ label: string,
+ cssClass: string,
+ tooltip: string,
+ private _cellModel: ICellModel,
+ private _type: MarkdownButtonType,
+ @INotebookService private _notebookService: INotebookService
+ ) {
+ super(id, label, cssClass);
+ this._tooltip = tooltip;
+ }
+ public run(context: any): Promise {
+ return new Promise((resolve, reject) => {
+ try {
+ let markdownTextTransformer = new MarkdownTextTransformer(this._notebookService, this._cellModel);
+ markdownTextTransformer.transformText(this._type);
+ resolve(true);
+ } catch (e) {
+ reject(e);
+ }
+ });
+ }
+}
+
+export class MarkdownTextTransformer {
+
+ private _notebookEditor: INotebookEditor;
+ constructor(private _notebookService: INotebookService, private _cellModel: ICellModel) { }
+
+ public transformText(type: MarkdownButtonType): void {
+ let editorControl = this.getEditorControl();
+ if (editorControl) {
+ let selections = editorControl.getSelections();
+ // TODO: Support replacement for multiple selections
+ let selection = selections[0];
+ let nothingSelected = this.editorHasNoSelection(selection);
+ let startRange: IRange = {
+ startColumn: selection.startColumn,
+ endColumn: selection.startColumn,
+ startLineNumber: selection.startLineNumber,
+ endLineNumber: selection.startLineNumber
+ };
+
+ // Get text to insert before selection
+ let beginInsertedCode = this.getStartTextToInsert(type);
+ // Get text to insert after selection
+ let endInsertedCode = this.getEndTextToInsert(type);
+
+ // endInsertedCode can be an empty string (e.g. for unordered list), so no need to check for that as well
+ if (beginInsertedCode) {
+ let endRange: IRange = {
+ startColumn: selection.endColumn,
+ endColumn: selection.endColumn,
+ startLineNumber: selection.endLineNumber,
+ endLineNumber: selection.endLineNumber
+ };
+ let editorModel = editorControl.getModel() as TextModel;
+ let isUndo = false;
+ if (editorModel) {
+ let markdownLineType = this.getMarkdownLineType(type);
+ isUndo = this.isUndoOperation(selection, type, markdownLineType, editorModel);
+ if (isUndo) {
+ if (markdownLineType === MarkdownLineType.BEGIN_AND_END_LINES) {
+ startRange = this.getIRangeWithOffsets(startRange, -1 * beginInsertedCode.length, 0, 0, 0);
+ endRange = this.getIRangeWithOffsets(endRange, 0, 0, endInsertedCode.length, 0);
+ editorModel.pushEditOperations(selections, [{ range: endRange, text: '' }, { range: startRange, text: '' }], null);
+ } else {
+ let operations: IIdentifiedSingleEditOperation[] = [];
+ startRange = this.getIRangeWithOffsets(startRange, 0, 0, beginInsertedCode.length, 0);
+ for (let i = 0; i < selection.endLineNumber - selection.startLineNumber + 1; i++) {
+ operations.push({ range: this.transformRangeByLineOffset(startRange, i), text: '' });
+ }
+ editorModel.pushEditOperations(selections, operations, null);
+ }
+ } else {
+ // If the markdown we're inserting only needs to be added to the begin and end lines, add those edit operations directly
+ if (markdownLineType === MarkdownLineType.BEGIN_AND_END_LINES) {
+ editorModel.pushEditOperations(selections, [{ range: startRange, text: beginInsertedCode }, { range: endRange, text: endInsertedCode }], null);
+ } else { // Otherwise, add an operation per line (plus the operation at the last column + line)
+ let operations: IIdentifiedSingleEditOperation[] = [];
+ for (let i = 0; i < selection.endLineNumber - selection.startLineNumber + 1; i++) {
+ operations.push({ range: this.transformRangeByLineOffset(startRange, i), text: beginInsertedCode });
+ }
+ operations.push({ range: endRange, text: endInsertedCode });
+ editorModel.pushEditOperations(selections, operations, null);
+ }
+ }
+ }
+
+ // If selection end is on same line as beginning, need to add offset for number of characters inserted
+ // Otherwise, the selection will not be correct after the transformation
+ let offset = selection.startLineNumber === selection.endLineNumber ? beginInsertedCode.length : 0;
+ endRange = this.getIRangeWithOffsets(endRange, offset, 0, offset, 0);
+ this.setEndSelection(endRange, type, editorControl, nothingSelected, isUndo);
+ }
+ // Always give focus back to the editor after pressing the button
+ editorControl.focus();
+ }
+ }
+
+ // For items like lists (where we need to insert a character at the beginning of each line), create
+ // range object for that range
+ private transformRangeByLineOffset(range: IRange, lineOffset: number): IRange {
+ return {
+ startColumn: lineOffset === 0 ? range.startColumn : 1,
+ endColumn: range.endColumn,
+ startLineNumber: range.endLineNumber + lineOffset,
+ endLineNumber: range.endLineNumber + lineOffset
+ };
+ }
+
+ private getStartTextToInsert(type: MarkdownButtonType): string {
+ switch (type) {
+ case MarkdownButtonType.BOLD:
+ return '**';
+ case MarkdownButtonType.ITALIC:
+ return '_';
+ case MarkdownButtonType.CODE:
+ return '```\n';
+ case MarkdownButtonType.LINK:
+ return '[';
+ case MarkdownButtonType.UNORDERED_LIST:
+ return '- ';
+ case MarkdownButtonType.ORDERED_LIST:
+ return '1. ';
+ case MarkdownButtonType.IMAGE:
+ return '![';
+ case MarkdownButtonType.HIGHLIGHT:
+ return '';
+ default:
+ return '';
+ }
+ }
+
+ private getEndTextToInsert(type: MarkdownButtonType): string {
+ switch (type) {
+ case MarkdownButtonType.BOLD:
+ return '**';
+ case MarkdownButtonType.ITALIC:
+ return '_';
+ case MarkdownButtonType.CODE:
+ return '\n```';
+ case MarkdownButtonType.LINK:
+ case MarkdownButtonType.IMAGE:
+ return ']()';
+ case MarkdownButtonType.HIGHLIGHT:
+ return '';
+ case MarkdownButtonType.UNORDERED_LIST:
+ case MarkdownButtonType.ORDERED_LIST:
+ default:
+ return '';
+ }
+ }
+
+ private getMarkdownLineType(type: MarkdownButtonType): MarkdownLineType {
+ switch (type) {
+ case MarkdownButtonType.UNORDERED_LIST:
+ case MarkdownButtonType.ORDERED_LIST:
+ return MarkdownLineType.EVERY_LINE;
+ default:
+ return MarkdownLineType.BEGIN_AND_END_LINES;
+ }
+ }
+
+ // Get offset from the end column for editor selection
+ // For example, when inserting a link, we want to have the cursor be present in between the brackets
+ private getColumnOffsetForSelection(type: MarkdownButtonType, nothingSelected: boolean): number {
+ if (nothingSelected) {
+ return 0;
+ }
+ switch (type) {
+ case MarkdownButtonType.LINK:
+ return 2;
+ case MarkdownButtonType.IMAGE:
+ return 2;
+ // -1 is considered as having no explicit offset, so do not do anything with selection
+ default: return -1;
+ }
+ }
+
+ private getEditorControl(): CodeEditorWidget | undefined {
+ if (!this._notebookEditor) {
+ this._notebookEditor = this._notebookService.findNotebookEditor(this._cellModel.notebookModel.notebookUri);
+ }
+ if (this._notebookEditor?.cellEditors?.length > 0) {
+ // Find cell editor provider via cell guid
+ let cellEditorProvider = this._notebookEditor.cellEditors.find(e => e.cellGuid() === this._cellModel.cellGuid);
+ if (cellEditorProvider) {
+ let editor = cellEditorProvider.getEditor() as QueryTextEditor;
+ if (editor) {
+ let editorControl = editor.getControl() as CodeEditorWidget;
+ return editorControl;
+ }
+ }
+ }
+ return undefined;
+ }
+
+ private editorHasNoSelection(selection: Selection): boolean {
+ return !selection || (selection.startLineNumber === selection.endLineNumber && selection.startColumn === selection.endColumn);
+ }
+
+ /**
+ * Sets the end selection state after the transform has occurred
+ * @param endRange range for end text that was inserted
+ * @param type MarkdownButtonType
+ * @param editorControl code editor widget
+ * @param noSelection controls whether there was no previous selection in the editor
+ */
+ private setEndSelection(endRange: IRange, type: MarkdownButtonType, editorControl: CodeEditorWidget, noSelection: boolean, isUndo: boolean): void {
+ if (!endRange || !editorControl || isUndo) {
+ return;
+ }
+ let offset = this.getColumnOffsetForSelection(type, noSelection);
+ if (offset > -1) {
+ let newRange: IRange = {
+ startColumn: endRange.startColumn + offset,
+ startLineNumber: endRange.startLineNumber,
+ endColumn: endRange.startColumn + offset,
+ endLineNumber: endRange.endLineNumber
+ };
+ editorControl.setSelection(newRange);
+ } else {
+ if (this.getMarkdownLineType(type) === MarkdownLineType.BEGIN_AND_END_LINES) {
+ let currentSelection = editorControl.getSelection();
+ editorControl.setSelection({
+ startColumn: currentSelection.startColumn + this.getStartTextToInsert(type).length,
+ startLineNumber: currentSelection.startLineNumber,
+ endColumn: currentSelection.endColumn - this.getEndTextToInsert(type).length,
+ endLineNumber: currentSelection.endLineNumber
+ });
+ }
+ }
+ }
+
+ /**
+ * Determine if user wants to perform an undo operation
+ * @param selection current user selection
+ * @param type markdown button type
+ * @param lineType markdown line type
+ * @param editorModel text model for the cell
+ */
+ private isUndoOperation(selection: Selection, type: MarkdownButtonType, lineType: MarkdownLineType, editorModel: TextModel): boolean {
+ if (lineType === MarkdownLineType.BEGIN_AND_END_LINES) {
+ let selectedText = this.getExtendedSelectedText(selection, type, lineType, editorModel);
+ return selectedText && selectedText.startsWith(this.getStartTextToInsert(type)) && selectedText.endsWith(this.getEndTextToInsert(type));
+ } else {
+ return this.everyLineMatchesBeginString(selection, type, editorModel);
+ }
+ }
+
+ /**
+ * Gets the extended selected text (current selection + potential beginning + ending transformed text)
+ * @param selection Current selection in editor
+ * @param type Markdown Button Type
+ * @param lineType Markdown Line Type
+ * @param editorModel TextModel
+ */
+ private getExtendedSelectedText(selection: Selection, type: MarkdownButtonType, lineType: MarkdownLineType, editorModel: TextModel): string {
+ if (lineType === MarkdownLineType.BEGIN_AND_END_LINES) {
+ return editorModel.getValueInRange({
+ startColumn: selection.startColumn - this.getStartTextToInsert(type).length,
+ startLineNumber: selection.startLineNumber,
+ endColumn: selection.endColumn + this.getEndTextToInsert(type).length,
+ endLineNumber: selection.endLineNumber
+ });
+ }
+ return '';
+ }
+
+ /**
+ * Returns whether all lines start with the expected transformed text for actions that match the EVERY_LINE line type
+ * @param selection Current selection in editor
+ * @param type Markdown Button Type
+ * @param editorModel TextModel
+ */
+ private everyLineMatchesBeginString(selection: Selection, type: MarkdownButtonType, editorModel: TextModel): boolean {
+ if (this.getMarkdownLineType(type) !== MarkdownLineType.EVERY_LINE) {
+ return false;
+ }
+ for (let selectionLine = selection.startLineNumber; selectionLine <= selection.endLineNumber; selectionLine++) {
+ if (!editorModel.getLineContent(selectionLine).startsWith(this.getStartTextToInsert(type))) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+ /**
+ * Create new IRange object with arbitrary offsets
+ * @param initialRange range object
+ * @param startColumnOffset
+ * @param startLineNumberOffset
+ * @param endColumnOffset
+ * @param endLineNumberOffset
+ */
+ private getIRangeWithOffsets(initialRange: IRange, startColumnOffset = 0, startLineNumberOffset = 0, endColumnOffset = 0, endLineNumberOffset = 0): IRange {
+ return {
+ startColumn: initialRange.startColumn + startColumnOffset,
+ startLineNumber: initialRange.startLineNumber + startLineNumberOffset,
+ endColumn: initialRange.endColumn + endColumnOffset,
+ endLineNumber: initialRange.endLineNumber + endLineNumberOffset
+ };
+ }
+}
+
+export enum MarkdownButtonType {
+ BOLD,
+ ITALIC,
+ CODE,
+ HIGHLIGHT,
+ LINK,
+ UNORDERED_LIST,
+ ORDERED_LIST,
+ IMAGE
+}
+
+// If ALL_LINES, we need to insert markdown at each line (e.g. lists)
+export enum MarkdownLineType {
+ BEGIN_AND_END_LINES,
+ EVERY_LINE
+}
diff --git a/src/sql/workbench/contrib/notebook/browser/notebook.component.html b/src/sql/workbench/contrib/notebook/browser/notebook.component.html
index bd3626aa07..723fe18a20 100644
--- a/src/sql/workbench/contrib/notebook/browser/notebook.component.html
+++ b/src/sql/workbench/contrib/notebook/browser/notebook.component.html
@@ -9,17 +9,6 @@