feat: added monaco as editor

priv/ui/app.css

@@ -1621,90 +1621,37 @@ button svg * {
   overflow: hidden;
 }
 
-.post-editor .post-editor-markdown-highlight,
-.post-editor .post-editor-content {
-  font-family: var(--vscode-editor-font-family, ui-monospace, SFMono-Regular, Menlo, monospace);
-  font-size: var(--vscode-editor-font-size, 13px);
-  line-height: 1.6;
-  tab-size: 2;
-}
-
-.post-editor .post-editor-markdown-highlight {
-  display: none;
-  position: absolute;
-  inset: 0;
-  margin: 0;
-  padding: 10px 12px;
-  overflow: hidden;
-  pointer-events: none;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: var(--vscode-editor-foreground);
-}
-
-.post-editor .post-editor-markdown-surface.is-enhanced .post-editor-markdown-highlight {
-  display: block;
-}
-
-.post-editor .post-editor-content {
+.post-editor .monaco-editor-shell,
+.scripts-monaco.monaco-editor-shell,
+.templates-monaco.monaco-editor-shell {
   position: relative;
-  z-index: 1;
-  flex: 1;
+}
+
+.monaco-editor-instance {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+}
+
+.post-editor .monaco-editor-instance {
   min-height: 380px;
-  margin: 0;
-  padding: 10px 12px;
-  border: none;
-  border-radius: 0;
-  background: transparent;
-  resize: none;
 }
 
-.post-editor .post-editor-markdown-surface.is-enhanced .post-editor-content {
-  color: transparent;
-  caret-color: var(--vscode-editor-foreground);
-  -webkit-text-fill-color: transparent;
+.scripts-monaco .monaco-editor-instance,
+.templates-monaco .monaco-editor-instance {
+  min-height: 420px;
 }
 
-.post-editor .post-editor-markdown-surface.is-enhanced .post-editor-content::selection {
-  background: rgba(97, 175, 239, 0.35);
-}
-
-.post-editor .md-heading-marker,
-.post-editor .md-list-marker,
-.post-editor .md-quote-marker,
-.post-editor .md-fence,
-.post-editor .token-keyword {
-  color: #c678dd;
-}
-
-.post-editor .md-heading-text,
-.post-editor .token-module {
-  color: #61afef;
-}
-
-.post-editor .md-inline-code,
-.post-editor .token-string {
-  color: #98c379;
-}
-
-.post-editor .md-link,
-.post-editor .token-atom {
-  color: #56b6c2;
-}
-
-.post-editor .md-emphasis,
-.post-editor .md-strong,
-.post-editor .token-number {
-  color: #e5c07b;
-}
-
-.post-editor .md-quote-text,
-.post-editor .token-comment {
-  color: var(--vscode-descriptionForeground);
-}
-
-.post-editor .md-code-line {
-  color: var(--vscode-editor-foreground);
+.monaco-editor-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: pre;
+  border: 0;
 }
 
 .post-editor .editor-footer {
@@ -3304,10 +3251,6 @@ button svg * {
 }
 
 .code-editor-textarea {
-  width: 100%;
-  height: 100%;
-  min-height: 420px;
-  resize: vertical;
   font: 13px/1.5 "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
 }