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>

src/sql/media/icons/common-icons.css

@@ -405,10 +405,14 @@ Includes non-masked style declarations. */
 	mask-image: url("toolbar-preview-toggle-off.svg");
 }
 
-.codicon.markdown {
+.codicon.masked-icon.show-markdown::before {
 	-webkit-mask-image: url("markdown.svg");
 	mask-image: url("markdown.svg");
 }
+.codicon.masked-icon.show-text::before{
+	-webkit-mask-image: url("eye.svg");
+	mask-image: url("eye.svg");
+}
 
 .codicon:not(.masked-icon).icon-expand-cells {
 	background-image: url("action-expand.svg");

src/sql/media/icons/eye.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.04102 10C1.04102 6.1 4.14102 3 8.04102 3C11.941 3 15.041 6.1 15.041 10H14.041C14.041 6.7 11.341 4 8.04102 4C4.74102 4 2.04102 6.7 2.04102 10H1.04102ZM5.04102 10C5.04102 8.3 6.34102 7 8.04102 7C9.74102 7 11.041 8.3 11.041 10C11.041 11.7 9.74102 13 8.04102 13C6.34102 13 5.04102 11.7 5.04102 10ZM6.04102 10C6.04102 11.1 6.94102 12 8.04102 12C9.14102 12 10.041 11.1 10.041 10C10.041 8.9 9.14102 8 8.04102 8C6.94102 8 6.04102 8.9 6.04102 10Z" fill="#323130"/>
+</svg>