Hackathon - Better Markdown Editor (#11540)

* Hackathon - better markdown editor - modified Bold to wrap selection in HTML. Split Image button into two new options: embed and link. Made preview container contentEditable.

* Removed the new dropdown from Image button -- it is not necessary since we are adding a context panel instead.

* Modified preview icons

* Set code-component dimensions so it is not visible. It is still being used to pass markdown changes to however.

* add turndown and save markdown

* update model on UI when source changes

* Added conditional that sets element attribute contentEditable when it is in edit mode.

* Added textView component that can be used for editing.

* update source on MD view not on every keystroke

* Added markdown editor buttons that allow user to swap editor, preview views.

* Cleaning up implementation

* Setting base value of _showPreview to false.

* don't allow html edit on split view

* Update editor automagically

* Add an image picking dialog to notebook toolbar.

* Await transformText()

* revert pushEditOperations to fix cursor issue

* Implemented radio buttons for three view toggles.

* Added new, optional properties to radioButton: name, icon class and tooltip. This allows for display as toggleable icon. Updated styles and theme accordingly.

* Style tweaks.

* Added new ViewAction file where the RadioButton action will reside.

* Removed radio button implementation in exchange for native button instantiation. Adjusted CSS and theme accordingly.

* Styles, component and template changes to handle view toggle between text, markdownn an splitview. Includes reverting of radioButton as this is no longer used.

* WYSIWYG 3 Modes

* Ensure one action active at a time

* Setting Text View button active by default. Cleaned up styles. Moved toolbar element to prevent code cell layout overflow.

* Ensure we respect editMode, add showMarkdown

* hiding overflow on code-cell

* Empty text container needs 100% width. Eliminates weird selection border too.

* Initialize _previewMode

* Actions Compatibility

* Further toolbar enhancements

* Update yarn lock after merge

* Slim down changes

* Remove commented out code

* Added margins around notebook-preview container for more visual space for text

* Add turndown to workbench html

* Tweak import

* Add types/turndown

* Remove workbench.html fix

* Import cjs modules directly for turndown

* Leverage solution from github

* browser umd

* non browser umd

* welp dependency

* Modified updatePreview to insert a p tag only when text cell is empty.

* add listener for undo

* add turndown to remote and web

* Fix workbench, check in plugin

* PR comment

Co-authored-by: maddydev <makoripa@microsoft.com>
Co-authored-by: chlafreniere <hichise@gmail.com>
Co-authored-by: Cory Rivera <corivera@microsoft.com>
Co-authored-by: Lucy Zhang <luczhan@microsoft.com>
This commit is contained in:
Hale Rankin
2020-09-11 00:22:07 -07:00
committed by GitHub
parent 0f8fa0ccef
commit 6670289057
25 changed files with 2206 additions and 138 deletions

View File

@@ -61,9 +61,12 @@ export class CellModel extends Disposable implements ICellModel {
private _isCollapsed: boolean;
private _onCollapseStateChanged = new Emitter<boolean>();
private _modelContentChangedEvent: IModelContentChangedEvent;
private _showPreview: boolean = true;
private _onCellPreviewChanged = new Emitter<boolean>();
private _onCellMarkdownChanged = new Emitter<boolean>();
private _isCommandExecutionSettingEnabled: boolean = false;
private _showPreview: boolean = true;
private _showMarkdown: boolean = false;
private _cellSourceChanged: boolean = false;
private _gridDataConversionComplete: Promise<void>[] = [];
constructor(cellData: nb.ICellContents,
@@ -243,6 +246,7 @@ export class CellModel extends Disposable implements ICellModel {
if (this._source !== newSource) {
this._source = newSource;
this.sendChangeToNotebook(NotebookChangeType.CellSourceUpdated);
this.cellSourceChanged = true;
}
this._modelContentChangedEvent = undefined;
}
@@ -309,16 +313,35 @@ export class CellModel extends Disposable implements ICellModel {
}
public set showPreview(val: boolean) {
if (val !== this._showPreview) {
this._showPreview = val;
this._onCellPreviewChanged.fire(this._showPreview);
}
this._showPreview = val;
this._onCellPreviewChanged.fire(this._showPreview);
}
public get onCellPreviewChanged(): Event<boolean> {
public get showMarkdown(): boolean {
return this._showMarkdown;
}
public set showMarkdown(val: boolean) {
this._showMarkdown = val;
this._onCellMarkdownChanged.fire(this._showMarkdown);
}
public get cellSourceChanged(): boolean {
return this._cellSourceChanged;
}
public set cellSourceChanged(val: boolean) {
this._cellSourceChanged = val;
}
public get onCellPreviewModeChanged(): Event<boolean> {
return this._onCellPreviewChanged.event;
}
public get onCellMarkdownModeChanged(): Event<boolean> {
return this._onCellMarkdownChanged.event;
}
private notifyExecutionComplete(): void {
if (this._notebookService) {
this._notebookService.serializeNotebookStateChange(this.notebookModel.notebookUri, NotebookChangeType.CellExecuted, this)

View File

@@ -482,8 +482,11 @@ export interface ICellModel {
modelContentChangedEvent: IModelContentChangedEvent;
isEditMode: boolean;
showPreview: boolean;
readonly onCellPreviewChanged: Event<boolean>;
showMarkdown: boolean;
readonly onCellPreviewModeChanged: Event<boolean>;
readonly onCellMarkdownModeChanged: Event<boolean>;
sendChangeToNotebook(change: NotebookChangeType): void;
cellSourceChanged: boolean;
gridDataConversionComplete: Promise<void>;
addGridDataConversionPromise(complete: Promise<void>): void;
updateOutputData(batchId: number, id: number, data: any): void;