cherry-muse 1.0.1

package/src/toolbars/hooks/Copy.js

@@ -0,0 +1,139 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import MenuBase from '@/toolbars/MenuBase';
+import { copyToClip } from '@/utils/copy';
+/**
+ * 复制按钮，用来复制预览区的html内容
+ * 该操作会将预览区的css样式以行内样式的形式插入到html内容里，从而保证粘贴时样式一致
+ */
+export default class Copy extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.previewer = $cherry.previewer;
+    this.isLoading = false;
+    this.updateMarkdown = false;
+    this.setName('copy', 'content_copy');
+  }
+
+  async adaptWechat(rawHtml) {
+    // 转化链接
+    // Array.from(document.querySelectorAll('a')).forEach((item) => {
+    //   item.removeAttribute('href');
+    // });
+    // 防止echarts标签被转成p时丢失样式
+    const figureRegex = /(<figure data-lines=.+?<)div(.+?<\/)div(>.*?<\/figure>)/g;
+    const html = rawHtml.replace(figureRegex, (match, prefix, content, suffix) => {
+      return `${prefix}p${content}p${suffix}`;
+    });
+    // 图片转base64，防止无法自动上传
+    const imgRegex = /(<img.+?src=")(.+?)(".*?>)/g;
+    /** @type {(Promise<string>)[]} */
+    const promises = [];
+    html.replace(imgRegex, (match, prefix, src) => {
+      promises.push(convertImgToBase64(src));
+    });
+    const urls = await Promise.all(promises);
+    return html.replace(imgRegex, (match, prefix, src, suffix) => prefix + urls.shift() + suffix);
+  }
+
+  getStyleFromSheets(keyword) {
+    const sheets = Array.from(document.styleSheets).filter(
+      (item) => item.cssRules[0] && item.cssRules[0].cssText.indexOf(keyword) > -1,
+    );
+    return `<style>${sheets.reduce((html, sheet) => {
+      return html + Array.from(sheet.cssRules).reduce((html, rule) => html + rule.cssText, '');
+    }, '')}</style>`;
+  }
+
+  computeStyle() {
+    // 计算需要append进富文本的style
+    const mathStyle = this.getStyleFromSheets('mjx-container');
+    const cherryStyle = this.getStyleFromSheets('cherry');
+    const echartStyle =
+      '<style>figure>p{overflow:hidden;position:relative;width:500px;height:300px;background:transparent;}</style>';
+    return {
+      mathStyle,
+      echartStyle,
+      cherryStyle,
+    };
+  }
+
+  /**
+   * 由于复制操作会随着预览区域的内容增加而耗时变长，所以需要增加“正在复制”的状态回显
+   * 同时该状态也用于限频
+   */
+  toggleLoading() {
+    // 切换loading状态
+    if (this.isLoading) {
+      this.dom.lastElementChild.outerHTML = this.lastIconOuterHtml;
+      this.lastIconOuterHtml = '';
+    } else {
+      this.lastIconOuterHtml = this.dom.lastElementChild.outerHTML;
+      this.dom.lastElementChild.outerHTML = '<div class="icon-loading loading"></div>';
+    }
+    this.isLoading = !this.isLoading;
+  }
+
+  /**
+   * 响应点击事件
+   * 该按钮不会引发编辑区域的内容改动，所以不用处理用户在编辑区域的选中内容
+   * @param {Event} e 点击事件
+   */
+  onClick(e) {
+    this.toggleLoading();
+    const inlineCodeTheme = document.querySelector('.cherry').getAttribute('data-inline-code-theme');
+    const codeBlockTheme = document.querySelector('.cherry').getAttribute('data-code-block-theme');
+    const { mathStyle, echartStyle, cherryStyle } = this.computeStyle();
+    const html = this.previewer.isPreviewerHidden()
+      ? this.previewer.options.previewerCache.html
+      : this.previewer.getValue();
+    // 将css样式以行内样式的形式插入到html内容里
+    this.adaptWechat(html).then((html) => {
+      copyToClip(
+        `${mathStyle + echartStyle + cherryStyle}
+        <div data-inline-code-theme="${inlineCodeTheme}" data-code-block-theme="${codeBlockTheme}">
+          <div class="cherry-markdown">${html}</div>
+        </div>`,
+      );
+      this.toggleLoading();
+    });
+  }
+}
+
+/**
+ * 将图片转成base64，防止出现由于图片防盗链功能导致图裂的情况
+ * @param {string} url 图片的地址
+ * @param {Function} [callback] 回调函数，本函数不处理该参数
+ * @param {string} [outputFormat]
+ * @returns {Promise<string>} img node
+ */
+function convertImgToBase64(url, callback, outputFormat) {
+  return new Promise((resolve) => {
+    let canvas = /** @type {HTMLCanvasElement}*/ (document.createElement('CANVAS'));
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+    img.crossOrigin = 'Anonymous';
+    img.onload = function () {
+      canvas.height = img.height;
+      canvas.width = img.width;
+      ctx.drawImage(img, 0, 0);
+      const dataURL = canvas.toDataURL(outputFormat || 'image/png');
+      resolve(dataURL);
+      canvas = null;
+    };
+    img.src = url;
+  });
+}

package/src/toolbars/hooks/Detail.js

@@ -0,0 +1,70 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import MenuBase from '@/toolbars/MenuBase';
+import { getDetailRule } from '@/utils/regexp';
+import { getSelection } from '@/utils/selection';
+/**
+ * 插入手风琴
+ */
+export default class Detail extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('detail', 'more_horiz');
+    this.detailRule = getDetailRule().reg;
+  }
+
+  /**
+   * 响应点击事件
+   * @param {string} selection 被用户选中的文本内容
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection) {
+    let $selection =
+      getSelection(this.editor.editor, selection, 'line', true) ||
+      '点击展开更多\n内容\n++- 默认展开\n内容\n++ 默认收起\n内容';
+    this.detailRule.lastIndex = 0;
+    if (!this.detailRule.test($selection)) {
+      // 如果没有命中手风琴语法，则尝试扩大选区
+      this.getMoreSelection('+++ ', '\n', () => {
+        const newSelection = this.editor.editor.getSelection();
+        this.detailRule.lastIndex = 0;
+        const isMatch = this.detailRule.test(newSelection);
+        if (isMatch !== false) {
+          $selection = newSelection;
+        }
+        return isMatch !== false;
+      });
+    }
+    this.detailRule.lastIndex = 0;
+    if (this.detailRule.test($selection)) {
+      // 如果命中了手风琴语法，则去掉手风琴语法
+      this.detailRule.lastIndex = 0;
+      return $selection.replace(this.detailRule, (match, preLines, isOpen, title, content) => {
+        return `${title}\n${content}`;
+      });
+    }
+    // 去掉开头的空格
+    $selection = $selection.replace(/^\s+/, '');
+    // 如果选中的内容不包含换行，则强制增加一个换行
+    if (!/\n/.test($selection)) {
+      $selection = `${$selection}\n${$selection}`;
+    }
+    this.registerAfterClickCb(() => {
+      this.setLessSelection('+++ ', '\n');
+    });
+    return `+++ ${$selection}\n+++`.replace(/\n{2,}\+\+\+/g, '\n+++');
+  }
+}

package/src/toolbars/hooks/ECharts.js

@@ -0,0 +1,303 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import MenuBase from '@/toolbars/MenuBase';
+/**
+ * 插入面板
+ */
+export default class ECharts extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('echarts', 'insert_chart');
+    this.subMenuConfig = [
+      {
+        name: 'basicBarChart',
+        iconName: 'bar_chart',
+        onclick: this.bindSubClick.bind(this, {
+          xAxis: {
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          },
+          yAxis: {},
+          series: [
+            {
+              type: 'bar',
+              data: [23, 24, 18, 25, 27, 28, 25],
+            },
+          ],
+        }),
+      },
+      {
+        name: 'stackedBarChart',
+        iconName: 'stacked_bar_chart',
+        onclick: this.bindSubClick.bind(this, {
+          xAxis: {
+            data: ['A', 'B', 'C', 'D', 'E'],
+          },
+          yAxis: {},
+          series: [
+            {
+              data: [10, 22, 28, 43, 49],
+              type: 'bar',
+              stack: 'x',
+            },
+            {
+              data: [5, 4, 3, 5, 10],
+              type: 'bar',
+              stack: 'x',
+            },
+          ],
+        }),
+      },
+      {
+        name: 'basicLineChart',
+        iconName: 'show_chart',
+        onclick: this.bindSubClick.bind(this, {
+          xAxis: {
+            type: 'category',
+            data: ['A', 'B', 'C'],
+          },
+          yAxis: {
+            type: 'value',
+          },
+          series: [
+            {
+              data: [120, 200, 150],
+              type: 'line',
+            },
+          ],
+        }),
+      },
+      {
+        name: 'stackedLineChart',
+
+        iconName: 'stacked_line_chart',
+        onclick: this.bindSubClick.bind(this, {
+          xAxis: {
+            data: ['A', 'B', 'C', 'D', 'E'],
+          },
+          yAxis: {},
+          series: [
+            {
+              data: [10, 22, 28, 43, 49],
+              type: 'line',
+              stack: 'x',
+            },
+            {
+              data: [5, 4, 3, 5, 10],
+              type: 'line',
+              stack: 'x',
+            },
+          ],
+        }),
+      },
+      {
+        name: 'areaChart',
+
+        iconName: 'area_chart',
+        onclick: this.bindSubClick.bind(this, {
+          xAxis: {
+            data: ['A', 'B', 'C', 'D', 'E'],
+          },
+          yAxis: {},
+          series: [
+            {
+              data: [10, 22, 28, 23, 19],
+              type: 'line',
+              areaStyle: {},
+            },
+            {
+              data: [25, 14, 23, 35, 10],
+              type: 'line',
+              areaStyle: {
+                color: '#ff0',
+                opacity: 0.5,
+              },
+            },
+          ],
+        }),
+      },
+      {
+        name: 'smoothCurveChart',
+        iconName: 'multiline_chart',
+        onclick: this.bindSubClick.bind(this, {
+          xAxis: {
+            data: ['A', 'B', 'C', 'D', 'E'],
+          },
+          yAxis: {},
+          series: [
+            {
+              data: [10, 22, 28, 23, 19],
+              type: 'line',
+              smooth: true,
+            },
+          ],
+        }),
+      },
+      {
+        name: 'ladderLineDiagram',
+        iconName: 'waterfall_chart',
+        onclick: this.bindSubClick.bind(this, {
+          xAxis: {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          },
+          yAxis: {
+            type: 'value',
+          },
+          series: [
+            {
+              name: 'Step Start',
+              type: 'line',
+              step: 'start',
+              data: [120, 132, 101, 134, 90, 230, 210],
+            },
+            {
+              name: 'Step Middle',
+              type: 'line',
+              step: 'middle',
+              data: [220, 282, 201, 234, 290, 430, 410],
+            },
+            {
+              name: 'Step End',
+              type: 'line',
+              step: 'end',
+              data: [450, 432, 401, 454, 590, 530, 510],
+            },
+          ],
+        }),
+      },
+      {
+        name: 'pieChart',
+
+        iconName: 'pie_chart',
+        onclick: this.bindSubClick.bind(this, {
+          series: [
+            {
+              type: 'pie',
+              data: [
+                {
+                  value: 335,
+                  name: '直接访问',
+                },
+                {
+                  value: 234,
+                  name: '联盟广告',
+                },
+                {
+                  value: 1548,
+                  name: '搜索引擎',
+                },
+              ],
+            },
+          ],
+        }),
+      },
+      {
+        name: 'circleDiagram',
+
+        iconName: 'donut_large',
+        onclick: this.bindSubClick.bind(this, {
+          title: {
+            text: '圆环图的例子',
+            left: 'center',
+            top: 'center',
+          },
+          series: [
+            {
+              type: 'pie',
+              data: [
+                {
+                  value: 335,
+                  name: 'A',
+                },
+                {
+                  value: 234,
+                  name: 'B',
+                },
+                {
+                  value: 1548,
+                  name: 'C',
+                },
+              ],
+              radius: ['40%', '70%'],
+            },
+          ],
+        }),
+      },
+      {
+        name: 'roseChart',
+
+        iconName: 'donut_small',
+        onclick: this.bindSubClick.bind(this, {
+          series: [
+            {
+              type: 'pie',
+              data: [
+                {
+                  value: 100,
+                  name: 'A',
+                },
+                {
+                  value: 200,
+                  name: 'B',
+                },
+                {
+                  value: 300,
+                  name: 'C',
+                },
+                {
+                  value: 400,
+                  name: 'D',
+                },
+                {
+                  value: 500,
+                  name: 'E',
+                },
+              ],
+              roseType: 'area',
+            },
+          ],
+        }),
+      },
+      {
+        name: 'scatterPlot',
+
+        iconName: 'scatter_plot',
+        onclick: this.bindSubClick.bind(this, {
+          xAxis: {
+            data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+          },
+          yAxis: {},
+          series: [
+            {
+              type: 'scatter',
+              data: [220, 182, 191, 234, 290, 330, 310],
+            },
+          ],
+        }),
+      },
+    ];
+  }
+
+  /**
+   * 响应点击事件
+   * @param {string} selection 被用户选中的文本内容
+
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey) {
+    return `\`\`\`echarts\n${JSON.stringify(shortKey, null, 2)}\n\`\`\`\n`;
+  }
+}