update cherry-markdown and update editormd code block style (#888)

* fix: first open document, cherryMarkdown not have theme

* fix: modify prismjs style and improve image clarity

* update cherry-markdown

* optimiztion: cherry-markdown

* feat: cherry-markdown add auto-save and update icon

---------

Co-authored-by: zhangsheng.93 <zhangsheng.93@bytedance.com>

controllers/DocumentController.go

@@ -68,6 +68,10 @@ func (c *DocumentController) Index() {
 			c.Data["Description"] = utils.AutoSummary(doc.Release, 120)
 			c.Data["FoldSetting"] = "first"
 
+			if bookResult.Editor == EditorCherryMarkdown {
+				c.Data["MarkdownTheme"] = doc.MarkdownTheme
+			}
+
 			if bookResult.IsDisplayComment {
 				// 获取评论、分页
 				comments, count, _ := models.NewComment().QueryCommentByDocumentId(doc.DocumentId, 1, conf.PageSize, c.Member)

static/cherry/drawio-demo.js

@@ -53,7 +53,7 @@ function addPostMessageListener(graphEditor) {
       case 'getData':
         editorUIInstance.editor.graph.stopEditing();
         var xmlData = mxUtils.getXml(editorUIInstance.editor.getGraphXml());
-        editorUIInstance.exportImage(1, "#ffffff", true, null, true, 50, null, "png", function (base64, filename) {
+        editorUIInstance.exportImage(2, "#ffffff", true, null, true, 50, null, "png", function (base64, filename) {
           window.parent.postMessage({
             mceAction: 'getData:success',
             eventName: 'getData:success',

static/js/cherry_markdown.js

@@ -106,27 +106,28 @@ $(function () {
      * 定义一个空壳，用于自行规划cherry已有工具栏的层级结构
      */
     var customMenuB = Cherry.createMenuHook('发布', {
-        iconName: '',
+        iconName: 'publish',
         onClick: releaseDocument,
     });
 
     var customMenuC = Cherry.createMenuHook("返回", {
-        iconName: '',
+        iconName: 'back',
         onClick: backWard,
     })
 
     var customMenuD = Cherry.createMenuHook('保存', {
-        iconName: '',
+        id: "markdown-save",
+        iconName: 'save',
         onClick: saveDocument,
     });
 
     var customMenuE = Cherry.createMenuHook('边栏', {
-        iconName: '',
+        iconName: 'sider',
         onClick: siderChange,
     });
 
     var customMenuF = Cherry.createMenuHook('历史', {
-        iconName: '',
+        iconName: 'history',
         onClick: showHistory,
     });
 
@@ -191,6 +192,9 @@ $(function () {
         toolbars: {
             toolbar: [
                 'customMenuCName',
+                'customMenuDName',
+                'customMenuBName',
+                'customMenuEName',
                 'undo',
                 'redo',
                 'bold',
@@ -219,16 +223,11 @@ $(function () {
                 'togglePreview',
                 'settings',
                 'switchModel',
-                'codeTheme',
                 'export',
-                'customMenuDName',
-                'customMenuBName',
-                'customMenuEName',
                 'customMenuFName',
-                'theme'
             ],
             bubble: ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'quote', 'ruby', '|', 'size', 'color'], // array or false
-            sidebar: ['mobilePreview', 'copy', 'theme'],
+            sidebar: ['mobilePreview', 'copy', 'codeTheme', 'theme'],
             customMenu: {
                 customMenuAName: customMenuA,
                 customMenuBName: customMenuB,
@@ -258,6 +257,9 @@ $(function () {
         //var markdownarea = document.getElementById("markdown_area").value
         var config = Object.assign({}, basicConfig);// { value: markdownarea });// { value: value });不显示获取的初始化值
         window.editor = new Cherry(config);
+        window.editor.getCodeMirror().on('change', (e, detail)=>{
+            resetEditorChanged(true);
+        });
         openLastSelectedNode();
         uploadImage("manualEditorContainer", function ($state, $res) {
             console.log("注册上传图片")
@@ -274,20 +276,6 @@ $(function () {
         });
     });
 
-    function insertToMarkdown(body) {
-        window.isLoad = true;
-        window.editor.insertValue(body);
-        window.editor.setCursor({ line: 0, ch: 0 });
-        resetEditorChanged(true);
-    }
-    function insertAndClearToMarkdown(body) {
-        window.isLoad = true;
-        window.editor.clear();
-        window.editor.insertValue(body);
-        window.editor.setCursor({ line: 0, ch: 0 });
-        resetEditorChanged(true);
-    }
-
     /***
      * 加载指定的文档到编辑器中
      * @param $node
@@ -424,7 +412,12 @@ $(function () {
      * 返回上一个页面
      */
     function backWard() {
-        history.back();
+        if (document.referrer == "") { // 没有上一级
+            var homepage = window.location.origin;
+            window.location.href = homepage; // 返回首页
+            return;
+        }
+        window.location.href = document.referrer;
     }
 
     /**

static/prismjs/prismjs.css

@@ -1,10 +1,9 @@
-/* PrismJS 1.28.0
+/* PrismJS 1.29.0
-https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+bash+dart+go+java+kotlin+latex+markup-templating+matlab+mongodb+php+python+ruby+rust+sql+swift+systemd+typoscript+yaml&plugins=line-numbers+toolbar+copy-to-clipboard */
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript */
 code[class*=language-],
 pre[class*=language-] {
-    color: #f90505;
+    color: #ccc;
     background: 0 0;
-    text-shadow: 0 1px #fff;
     font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
     font-size: 1em;
     text-align: left;
@@ -22,6 +21,12 @@ pre[class*=language-] {
     hyphens: none
 }
 
+pre[class*=language-] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto
+}
+
 code[class*=language-] ::-moz-selection,
 code[class*=language-]::-moz-selection,
 pre[class*=language-] ::-moz-selection,
@@ -46,15 +51,9 @@ pre[class*=language-]::selection {
     }
 }
 
-pre[class*=language-] {
-    padding: 1em;
-    margin: .5em 0;
-    overflow: auto
-}
-
 :not(pre)>code[class*=language-],
 pre[class*=language-] {
-    background: #f5f2f0
+    background: #2d2d2d
 }
 
 :not(pre)>code[class*=language-] {
@@ -63,47 +62,79 @@ pre[class*=language-] {
     white-space: normal
 }
 
+.token.block-comment,
 .token.cdata,
 .token.comment,
 .token.doctype,
 .token.prolog {
-    color: #708090
-}
-
-.token.punctuation {
     color: #999
 }
 
-.token.namespace {
+.token.punctuation {
-    opacity: .7
+    color: #ccc
-}
-
-.token.boolean,
-.token.constant,
-.token.deleted,
-.token.number,
-.token.property,
-.token.symbol,
-.token.tag {
-    color: #905
 }
 
 .token.attr-name,
-.token.builtin,
+.token.deleted,
-.token.char,
+.token.namespace,
-.token.inserted,
+.token.tag {
-.token.selector,
+    color: #e2777a
-.token.string {
+}
-    color: #690
+
+.token.function-name {
+    color: #6196cc
+}
+
+.token.boolean,
+.token.function,
+.token.number {
+    color: #f08d49
+}
+
+.token.class-name,
+.token.constant,
+.token.property,
+.token.symbol {
+    color: #f8c555
+}
+
+.token.atrule,
+.token.builtin,
+.token.important,
+.token.keyword,
+.token.selector {
+    color: #cc99cd
+}
+
+.token.attr-value,
+.token.char,
+.token.regex,
+.token.string,
+.token.variable {
+    color: #7ec699
 }
 
-.language-css .token.string,
-.style .token.string,
 .token.entity,
 .token.operator,
 .token.url {
-    color: #9a6e3a;
+    color: #67cdcc
-    background: hsla(0, 0%, 100%, .5)
+}
+
+.token.bold,
+.token.important {
+    font-weight: 700
+}
+
+.token.italic {
+    font-style: italic
+}
+
+.token.entity {
+    cursor: help
+}
+
+.token.inserted {
+    color: green
 }
 
 .token.atrule,
@@ -123,19 +154,6 @@ pre[class*=language-] {
     color: #e90
 }
 
-.token.bold,
-.token.important {
-    font-weight: 700
-}
-
-.token.italic {
-    font-style: italic
-}
-
-.token.entity {
-    cursor: help
-}
-
 pre[class*=language-].line-numbers {
     position: relative;
     padding-left: 3.8em !important;
@@ -241,4 +259,4 @@ div.code-toolbar>.toolbar>.toolbar-item>span:hover {
 .cherry div.code-toolbar>.toolbar>.toolbar-item>button:focus,
 div.code-toolbar>.toolbar>.toolbar-item>button:hover {
     color: #1fa9e0be !important;
-}
+}