cherry-muse 1.0.1

package/src/Sanitizer.js

@@ -0,0 +1,4 @@
+import createDOMPurify from 'dompurify';
+
+// for browser
+export const sanitizer = createDOMPurify(window);

package/src/Sanitizer.node.js

@@ -0,0 +1,7 @@
+import createDOMPurify from 'dompurify';
+import { JSDOM } from 'jsdom';
+
+const { window } = new JSDOM('');
+
+// @ts-expect-error
+export const sanitizer = createDOMPurify(window);

package/src/Stats.js

@@ -0,0 +1,101 @@
+import Event from '@/Event';
+
+export default class Stats {
+  constructor(options) {
+    this.$cherry = options.$cherry;
+    console.log(options);
+    if (!this.$cherry.options.stats) return;
+    this.container = null;
+    this.stats = {
+      characters: 0,
+      words: 0,
+      paragraphs: 0,
+    };
+    this.init();
+    this.bindEvents();
+  }
+
+  init() {
+    // 创建统计信息容器
+    this.container = document.createElement('div');
+    this.container.className = 'cherry-editor-stats';
+    const { editorDom } = this.$cherry.editor.options;
+    editorDom.appendChild(this.container);
+    this.update(this.$cherry.getValue());
+  }
+
+  bindEvents() {
+    const cm = this.$cherry.editor.editor; // 你得确认这里能拿到 CodeMirror 实例
+    cm.on('change', (instance, changeObj) => {
+      const addedText = changeObj.text.join('\n');
+      const removedText = (changeObj.removed || []).join('\n');
+
+      this.incrementalUpdate(removedText, addedText);
+      this.render();
+    });
+  }
+
+  incrementalUpdate(removed, added) {
+    const addedStats = this.wordCount(added);
+    const removedStats = this.wordCount(removed);
+
+    this.stats.characters += addedStats.characters - removedStats.characters;
+    this.stats.words += addedStats.words - removedStats.words;
+    this.stats.paragraphs += addedStats.paragraphs - removedStats.paragraphs;
+
+    Object.keys(this.stats).forEach((key) => {
+      this.stats[key] = Math.max(0, this.stats[key]);
+    });
+  }
+
+  update(markdown) {
+    this.stats = this.wordCount(markdown);
+    this.render();
+  }
+
+  render() {
+    if (this.container) {
+      this.container.innerHTML = `
+          <span class="cherry-stats-item">
+            <span class="material-symbols-outlined">counter_1</span>
+            ${this.stats.characters} 字符
+          </span>
+          <span class="cherry-stats-item">
+            <span class="material-symbols-outlined">description</span>
+            ${this.stats.words} 词
+          </span>
+          <span class="cherry-stats-item">
+            <span class="material-symbols-outlined">segment</span>
+            ${this.stats.paragraphs} 段落
+          </span>
+        `;
+    }
+  }
+
+  wordCount(markdown) {
+    // 匹配中文和标点符号
+    const pattern =
+      /[\u4e00-\u9fa5]|[\u3001\u3002\uff01\uff0c\uff1b\uff1a\u201c\u201d\u2018\u2019\u300a\u300b\u3008\u3009\u3010\u3011\u300e\u300f\u300c\u300d\uff08\uff09\u2014\u2026\u2013\uff0e]/g;
+    // 统计字符数量，排除换行和空格
+    const characters = markdown.replace(/\n|\s/g, '').length;
+    // 统计中文和标点符号
+    const chineseWords = (markdown.match(pattern) || []).length;
+    // 统计英文单词
+    const englishWords = markdown
+      .replace(pattern, ' ')
+      .split(/[\s\n]+/)
+      .filter(Boolean).length;
+    const words = chineseWords + englishWords;
+    // 统计段落数量，使用至少两个连续换行符分割段落
+    const paragraphs = markdown.split(/\n{2,}/).filter((line) => line.trim() !== '').length;
+    return { characters, words, paragraphs };
+  }
+
+  destroy() {
+    if (this.container) {
+      Event.off('editor', 'change');
+      this.container.remove();
+      this.container = null;
+    }
+  }
+}

package/src/Theme.js

@@ -0,0 +1,46 @@
+// 总共就两种颜色：light dark
+import { changeTheme } from './utils/config';
+import Event from './Event';
+
+export const Theme = {
+  /**
+   * @param {Cherry} $cherry
+   */
+  init($cherry) {
+    const savedTheme = localStorage.getItem('cherry-theme') || 'auto';
+    Theme.setTheme($cherry, savedTheme);
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      if (Theme.getTheme() === 'auto') {
+        const systemPrefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        Theme.applyTheme($cherry, systemPrefersDarkScheme ? 'dark' : 'light');
+      }
+    });
+  },
+  isDark() {
+    const theme = Theme.getTheme();
+    return theme === 'dark' || (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+  },
+  getTheme() {
+    return localStorage.getItem('cherry-theme') || 'auto';
+  },
+  setTheme($cherry, theme) {
+    localStorage.setItem('cherry-theme', theme);
+    if (theme === 'auto') {
+      const systemPrefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      Theme.applyTheme($cherry, systemPrefersDarkScheme ? 'dark' : 'light');
+    } else {
+      Theme.applyTheme($cherry, theme);
+    }
+  },
+  applyTheme($cherry, theme) {
+    changeTheme($cherry, theme);
+    document.querySelectorAll('.cherry').forEach(function (elem) {
+      elem.setAttribute('data-code-block-theme', theme);
+    });
+    document.querySelectorAll(`.cherry__theme__${theme === 'dark' ? 'light' : 'dark'}`).forEach(function (elem) {
+      elem.classList.replace(`cherry__theme__${theme === 'dark' ? 'light' : 'dark'}`, `cherry__theme__${theme}`);
+    });
+    Event.emit('Theme', 'change', theme === 'dark');
+  },
+};

package/src/UrlCache.js

@@ -0,0 +1,98 @@
+/**
+ * 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 md5 from 'md5';
+
+let urlCache = {};
+const cherryInnerLinkRegex = /^cherry-inner:\/\/([0-9a-f]+)$/i;
+
+export function urlProcessorProxy(urlProcessor) {
+  return function (url, srcType) {
+    if (UrlCache.isInnerLink(url)) {
+      const newUrl = urlProcessor(UrlCache.get(url), srcType);
+      return UrlCache.replace(url, newUrl);
+    }
+    return urlProcessor(url, srcType);
+  };
+}
+
+export default class UrlCache {
+  /**
+   * 判断url是否Cherry的内部链接
+   * @param {string} url 要检测的URL
+   * @returns
+   */
+  static isInnerLink(url) {
+    return cherryInnerLinkRegex.test(url);
+  }
+
+  /**
+   * 缓存url为内部链接，主要用于缩短超长链接，避免正则超时
+   * @param {string} url 要转换为内部链接的URL
+   * @returns
+   */
+  static set(url) {
+    const urlSign = md5(url);
+    urlCache[urlSign] = url;
+    return `cherry-inner://${urlSign}`;
+  }
+
+  /**
+   * 获取原始链接
+   * @param {string} innerUrl 内部链接
+   * @returns
+   */
+  static get(innerUrl) {
+    const [, urlSign] = innerUrl.match(cherryInnerLinkRegex) ?? [];
+    if (!urlSign) {
+      return;
+    }
+    return urlCache[urlSign];
+  }
+
+  /**
+   * 替换指定内部链接的真实地址
+   * @param {string} innerUrl 原始内部链接
+   * @param {string} newUrl 需要替换的链接
+   */
+  static replace(innerUrl, newUrl) {
+    const [, urlSign] = innerUrl.match(cherryInnerLinkRegex) ?? [];
+    if (!urlSign) {
+      return;
+    }
+    urlCache[urlSign] = newUrl;
+    return innerUrl;
+  }
+
+  /**
+   * 替换所有内部链接为原始的真实地址
+   * @param {string} html 包含 cherry-inner 协议地址的 html 文本
+   */
+  static restoreAll(html) {
+    const cherryInnerLinkRegex = /cherry-inner:\/\/([0-9a-f]+)/gi;
+    const $html = html.replace(cherryInnerLinkRegex, (match) => {
+      const originalUrl = UrlCache.get(match);
+      return originalUrl || match;
+    });
+    return $html;
+  }
+
+  /**
+   * 清空缓存
+   */
+  static clear() {
+    urlCache = {};
+  }
+}

package/src/addons/cherry-code-block-card-plugin.js

@@ -0,0 +1,213 @@
+// @ts-nocheck
+/**
+ * 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 mergeWith from 'lodash/mergeWith';
+export default class CardCodeEngine {
+  static install(cherryOptions, args) {
+    mergeWith(cherryOptions, {
+      engine: {
+        syntax: {
+          codeBlock: {
+            customRenderer: {
+              card: new CardCodeEngine(),
+            },
+          },
+        },
+      },
+    });
+  }
+
+  render(src, sign, $engine, config = {}) {
+    const parseCardSyntax = (text) => {
+      const lines = text.trim().split('\n');
+      const result = {
+        type: lines[0].startsWith('#image') ? 'image' : 'list',
+        count: 'auto',
+        data: []
+      };
+      
+      // 处理配置行
+      if (lines[0].startsWith('#')) {
+        const [type, count] = lines[0].slice(1).split('/');
+        result.type = type || 'list';
+        result.count = count ? parseInt(count) : 'auto';
+        lines.shift();
+      }
+
+      // 解析每行
+      lines.forEach(line => {
+        line = line.trim();
+        if (!line) return;
+
+        // 匹配模式：![alt](image)[title](link) description
+        const regex = /(?:!\[(.*?)\]\((.*?)\))?\s*\[(.*?)\]\((.*?)\)(?:\s+(.*))?/;
+        const match = line.match(regex);
+        if (match) {
+          const [_, imgAlt, imgUrl, title, link, desc] = match;
+          result.data.push({
+            title: title || '',
+            desc: desc || '',
+            image: imgUrl || '',
+            link: link || '',
+            bgColor: '',  // 支持默认值
+            textColor: '' // 支持默认值
+          });
+        }
+      });
+
+      return result;
+    };
+
+    try {
+      const json = parseCardSyntax(src);
+      let row = json.count;
+      if (row === 'auto') {
+        row = 3;
+        if (json.data.length < row) {
+          row = json.data.length;
+        }
+      }
+      if (!row || row > 4 || row < 1) {
+        row = 3; // 默认 3
+      }
+
+      const { type } = json;
+      let listDOM = ``;
+      if (type === 'list') {
+        // 普通卡片列表
+        listDOM = this.getListDOM(json.data, row);
+      } else if (type === 'image') {
+        // 卡片图片列表
+        listDOM = this.getImageDOM(json.data, row);
+      }
+      return `<div class="cherry-card cherry-card-${type}-container">${listDOM}</div>`;
+    } catch (e) {
+      console.warn('Card syntax parse error:', e);
+      return `<div class="cherry-card-error">卡片语法错误，请检查格式</div>`;
+    }
+  }
+  getRandomColor() {
+    const colors = [
+      { bg: '#34495E', text: '#BDC3C7' }, // 深蓝灰色背景，浅灰色文字
+      { bg: '#16A085', text: '#A3E4D7' }, // 绿松石色背景，浅绿松石色文字
+      { bg: '#27AE60', text: '#A9DFBF' }, // 绿色背景，浅绿色文字
+      { bg: '#2980B9', text: '#AED6F1' }, // 蓝色背景，浅蓝色文字
+      { bg: '#8E44AD', text: '#D2B4DE' }, // 紫色背景，浅紫色文字
+      { bg: '#2C3E50', text: '#ECF0F1' }, // 深蓝灰色背景，浅灰色文字
+      { bg: '#F39C12', text: '#FDEBD0' }, // 橙黄色背景，浅橙色文字
+      { bg: '#D35400', text: '#F5CBA7' }, // 深橙色背景，浅橙色文字
+      { bg: '#C0392B', text: '#F5B7B1' }, // 深红色背景，浅红色文字
+      { bg: '#7F8C8D', text: '#D5DBDB' }, // 灰青色背景，浅灰色文字
+      { bg: '#95A5A6', text: '#E5E8E8' }, // 浅青色背景，浅灰色文字
+      { bg: '#F4D03F', text: '#FCF3CF' }, // 明黄色背景，浅黄色文字
+      { bg: '#1ABC9C', text: '#A2D9CE' }, // 浅绿松石色背景，浅绿松石色文字
+      { bg: '#3498DB', text: '#D6EAF8' }, // 浅蓝色背景，浅蓝色文字
+      { bg: '#9B59B6', text: '#E8DAEF' }, // 浅紫色背景，浅紫色文字
+      { bg: '#34495E', text: '#AAB7B8' }, // 蓝灰色背景，浅灰色文字
+      { bg: '#E67E22', text: '#FAD7A0' }, // 橙色背景，浅橙色文字
+      { bg: '#E74C3C', text: '#F5B7B1' }, // 红色背景，浅红色文字
+      { bg: '#BDC3C7', text: '#2C3E50' }, // 浅灰色背景，深蓝灰色文字
+      { bg: '#7F8C8D', text: '#2C3E50' }, // 灰青色背景，深蓝灰色文字
+    ];
+
+    return colors[Math.floor(Math.random() * colors.length)];
+  }
+  getListDOM(dataList, row) {
+    let listDOM = '';
+    dataList.forEach((item) => {
+      const randomColor = this.getRandomColor();
+      let {
+        link = '',
+        image = '',
+        bgColor = randomColor.bg,
+        textColor = randomColor.text,
+        title = '',
+        desc = '',
+      } = item;
+
+      if (link === '') {
+        link = null;
+      }
+      if (image === '') {
+        image = null;
+      }
+      if (title === '') {
+        title = '';
+      }
+      if (desc === '') {
+        desc = '';
+      }
+      if (bgColor === '') {
+        bgColor = randomColor.bg;
+      }
+      if (textColor === '') {
+        textColor = randomColor.text;
+      }
+
+      listDOM += `
+      <${link ? `a href="${link}" target="_blank"` : 'span'} class="cherry-card-item ${
+        row ? `cherry-card-row-${row}` : ''
+      }"
+         style="padding:0;background-color:${bgColor};color:${textColor};"
+      >
+        ${image ? `<img src="${image}" class="cherry-card-image" alt="">` : ''}
+        <div class="cherry-card-body">
+          <p class="cherry-card-title">${title}</p>
+          <p class="cherry-card-desc">${desc}</p>
+        </div>
+      </${link ? 'a' : 'span'}>
+    `;
+    });
+    return listDOM;
+  }
+
+  getImageDOM(dataList, row) {
+    let listDOM = '';
+    dataList.forEach((item) => {
+      let { link = '', image = '', title = '', desc = '' } = item;
+
+      if (link === '') {
+        link = null;
+      }
+      if (image === '') {
+        image = '';
+      }
+      if (title === '') {
+        title = '';
+      }
+      if (desc === '') {
+        desc = null;
+      }
+
+      listDOM += `
+      <div class="cherry-card-item ${row ? `cherry-card-row-${row}` : ''}" >
+        <a href="${link}" target="_blank">
+          <div class="cherry-card-box-img">
+              <img src="${image}" class="cherry-card-image" style="object-fit: cover" alt="">
+          </div>
+          <div class="cherry-card-box-info">
+              <p class="cherry-card-title">${title}</p>
+              ${desc ? `<p class="cherry-card-desc" >${desc}</p>` : ''}
+          </div>
+
+    
+        </a>
+      </div>
+    `;
+    });
+    return listDOM;
+  }
+}

package/src/addons/cherry-code-block-echarts-plugin.js

@@ -0,0 +1,161 @@
+// @ts-nocheck
+/**
+ * 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 mergeWith from 'lodash/mergeWith';
+import Event from '../Event';
+import extraJSON from '@/utils/jsonUtils';
+export default class EChartsCodeEngine {
+  static install(cherryOptions, args) {
+    mergeWith(cherryOptions, {
+      engine: {
+        syntax: {
+          codeBlock: {
+            customRenderer: {
+              echarts: new EChartsCodeEngine({
+                ...args,
+                ...(cherryOptions.engine.syntax.echarts ?? {}),
+              }),
+            },
+          },
+        },
+      },
+    });
+  }
+
+  constructor(echartsOptions = {}) {
+    const { echarts, apiHost = 'https://echarts-api.vercel.app' } = echartsOptions;
+    this.api = !echarts && !window.echarts;
+    this.apiHost = apiHost;
+    this.echartsInstanceRef = echarts || window.echarts;
+    const that = this;
+    Event.on('previewer', 'beforeRenderDom', function ([sign, dom]) {
+      if (that.api) return;
+      const chartClazz = `echarts-${sign}`;
+      const echartsCanvas = dom.querySelectorAll(`.${chartClazz}`);
+      if (echartsCanvas) {
+        for (const echartsCanva of echartsCanvas) {
+          const echart = that.echartsInstanceRef.getInstanceByDom(echartsCanva);
+          if (echart) {
+            sessionStorage.setItem('chartWidth', echart.getWidth());
+            sessionStorage.setItem('chartHeight', echart.getHeight());
+            echart.dispose();
+            sessionStorage.removeItem(chartClazz);
+          }
+        }
+      }
+    });
+    Event.on('previewer', 'afterRenderDom', function ([sign, dom]) {
+      if (that.api) return;
+      const chartClazz = `echarts-${sign}`;
+      const item = sessionStorage.getItem(chartClazz);
+      if (!item) return;
+      const json = JSON.parse(item);
+      const echartsCanvas = document.querySelectorAll(`.${chartClazz}`);
+      if (!echartsCanvas) {
+        return;
+      }
+      for (const echartsCanva of echartsCanvas) {
+        let myChart = that.echartsInstanceRef.getInstanceByDom(echartsCanva);
+        if (!myChart) {
+          myChart = that.echartsInstanceRef.init(
+            echartsCanva,
+            window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : '',
+            {
+              renderer: 'svg',
+            },
+          );
+        }
+        myChart.setOption(json);
+      }
+
+      //  Event.off('previewer', 'afterRenderDom', afterRender);
+    });
+
+    function renderChart(isDark) {
+      const query = document.querySelectorAll('.echart-container');
+      if (!query) {
+        return;
+      }
+      for (const queryElement of query) {
+        if (that.api) {
+          if (isDark) {
+            queryElement.src = queryElement.src.replace('theme%22%3A%22%22', 'theme%22%3A%22dark%22');
+          } else {
+            queryElement.src = queryElement.src.replace('theme%22%3A%22dark%22', 'theme%22%3A%22%22');
+          }
+        } else {
+          const item = sessionStorage.getItem(queryElement.dataset.json);
+          if (!item) continue;
+          const json = JSON.parse(item);
+          let myChart = that.echartsInstanceRef.getInstanceByDom(queryElement);
+          if (myChart) {
+            myChart.dispose();
+          }
+          myChart = that.echartsInstanceRef.init(queryElement, isDark ? 'dark' : '', {
+            renderer: 'svg',
+          });
+          myChart.setOption(json);
+        }
+      }
+    }
+
+    window.addEventListener('resize', function () {
+      if (that.api) return;
+      const query = document.querySelectorAll('.echart-container');
+      if (!query) {
+        return;
+      }
+      for (const queryElement of query) {
+        const myChart = that.echartsInstanceRef.getInstanceByDom(queryElement);
+        if (myChart) {
+          myChart.resize();
+        }
+      }
+    });
+    Event.on('Theme', 'change', function ([isDark]) {
+      renderChart(isDark);
+    });
+  }
+
+  renderFromApi(json, isDark) {
+    const data = {
+      theme: isDark ? 'dark' : '',
+      width: 600,
+      height: 400,
+      options: json,
+    };
+    return `<img class='echart-container' style="max-width: 100%" src='${this.apiHost}?data=${encodeURIComponent(
+      JSON.stringify(data),
+    )}'  alt=""/>`;
+  }
+  render(src, sign, $engine, config = {}) {
+    let $sign = sign;
+    if (!$sign) {
+      $sign = Math.round(Math.random() * 100000000);
+    }
+
+    const graphId = `echarts-${$sign}`;
+
+    const json = extraJSON(src);
+
+    if (this.api) {
+      return this.renderFromApi(json, window.matchMedia('(prefers-color-scheme: dark)').matches);
+    }
+
+    sessionStorage.setItem(graphId, JSON.stringify(json));
+    return `<div class="${graphId} echart-container" data-json="${graphId}"  style="height: 400px;width: 100%"></div>`;
+  }
+}