cherry-muse 1.0.1

package/src/toolbars/hooks/Image.js

@@ -0,0 +1,60 @@
+/**
+ * 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 { handleUpload, handleParams } from '@/utils/file';
+/**
+ * 插入图片
+ */
+export default class Image extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('image', 'image');
+  }
+
+  /**
+   * 响应点击事件
+   * @param {string} selection 被用户选中的文本内容
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    if (this.hasCacheOnce()) {
+      // @ts-ignore
+      const { name, url, params } = this.getAndCleanCacheOnce();
+      const begin = '![';
+      const end = `](${url})`;
+      this.registerAfterClickCb(() => {
+        this.setLessSelection(begin, end);
+      });
+      const finalName = params.name ? params.name : name;
+      return `${begin}${finalName}${handleParams(params)}${end}`;
+    }
+    const accept = this.$cherry.options?.fileTypeLimitMap?.image ?? '*';
+    // 插入图片，调用上传文件逻辑
+    handleUpload(this.editor, 'image', accept, (name, url, params) => {
+      this.setCacheOnce({ name, url, params });
+      this.fire(null);
+    });
+    this.updateMarkdown = false;
+    return selection;
+  }
+
+  /**
+   * 声明绑定的快捷键，快捷键触发onClick
+   */
+  get shortcutKeys() {
+    return ['Ctrl-g'];
+  }
+}

package/src/toolbars/hooks/Insert.js

@@ -0,0 +1,36 @@
+/**
+ * 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 Insert extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('insert', 'arrow_insert');
+  }
+
+  /**
+   * 响应点击事件
+   * @param {string} selection 被用户选中的文本内容
+   * @param {string} shortKey 快捷键参数
+   * @param {Function} [callback] 回调函数
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '', callback) {
+    return '';
+  }
+}

package/src/toolbars/hooks/Italic.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';
+/**
+ * 插入斜体的按钮
+ */
+export default class Italic extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('italic', 'format_italic');
+  }
+
+  /**
+   * 是不是包含加粗语法
+   * @param {String} selection
+   * @returns {Boolean}
+   */
+  $testIsItalic(selection) {
+    return /^\s*(\*|_)[\s\S]+(\1)/.test(selection);
+  }
+
+  /**
+   * 响应点击事件
+   * @param {string} selection 被用户选中的文本内容
+   * @param {string} shortKey 快捷键参数，本函数不处理这个参数
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    let $selection = this.getSelection(selection) || this.locale.italic;
+    // 如果是单选，并且选中内容的开始结束内没有加粗语法，则扩大选中范围
+    if (!this.isSelections && !this.$testIsItalic($selection)) {
+      this.getMoreSelection('*', '*', () => {
+        const newSelection = this.editor.editor.getSelection();
+        const isItalic = this.$testIsItalic(newSelection);
+        if (isItalic) {
+          $selection = newSelection;
+        }
+        return isItalic;
+      });
+    }
+    if (this.$testIsItalic($selection)) {
+      return $selection.replace(/(^)(\s*)(\*|_)([^\n]+)(\3)(\s*)($)/gm, '$1$4$7');
+    }
+    this.registerAfterClickCb(() => {
+      this.setLessSelection('*', '*');
+    });
+    return $selection.replace(/(^)([^\n]+)($)/gm, '$1*$2*$3');
+  }
+
+  /**
+   * 获得监听的快捷键
+   * 在windows下是Ctrl+i，在mac下是cmd+i
+   */
+  get shortcutKeys() {
+    return ['Ctrl-i'];
+  }
+}

package/src/toolbars/hooks/LineTable.js

@@ -0,0 +1,41 @@
+/**
+ * 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 LineTable extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('line-table', 'table_chart_view');
+  }
+
+  /**
+   * 响应点击事件
+   * @param {string} selection 被用户选中的文本内容
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    // 插入带折线图的表格
+    return `${selection}\n\n${[
+      '| :line: {x,y} | a | b | c |',
+      '| :-: | :-: | :-: | :-: |',
+      '| x | 1 | 2 | 3 |',
+      '| y | 2 | 4 | 6 |',
+      '| z | 7 | 5 | 3 |',
+    ].join('\n')}\n\n`;
+  }
+}

package/src/toolbars/hooks/Link.js

@@ -0,0 +1,46 @@
+/**
+ * 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 Link extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('link', 'link');
+  }
+
+  /**
+   * 响应点击事件
+   * @param {string} selection 被用户选中的文本内容
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    // 插入图片，调用上传文件逻辑
+    if (/^http/.test(selection)) {
+      return `[${this.locale.link}](${selection})`;
+    }
+    const title = selection ? selection : this.locale.link;
+    return `[${title}](http://url.com) `;
+  }
+
+  /**
+   * 声明绑定的快捷键，快捷键触发onClick
+   */
+  get shortcutKeys() {
+    return ['Ctrl-l'];
+  }
+}

package/src/toolbars/hooks/List.js

@@ -0,0 +1,55 @@
+/**
+ * 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 { getSelection } from '@/utils/selection';
+import { getListFromStr } from '@/utils/regexp';
+/**
+ * 插入有序/无序/checklist列表的按钮
+ */
+export default class List extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('list', 'list');
+    this.subMenuConfig = [
+      { iconName: 'ol', name: 'ol', onclick: this.bindSubClick.bind(this, '1') },
+      { iconName: 'ul', name: 'ul', onclick: this.bindSubClick.bind(this, '2') },
+      { iconName: 'checklist', name: 'checklist', onclick: this.bindSubClick.bind(this, '3') },
+    ];
+  }
+
+  getSubMenuConfig() {
+    return this.subMenuConfig;
+  }
+
+  /**
+   * 响应点击事件
+   * @param {string} selection 编辑区选中的文本内容
+   * @param {1|2|3|'ol'|'1'|'2'|'3'|'ul'|'checklist'|''} shortKey 快捷键：ol(1)有序列表，ul(2)无序列表，checklist(3) 检查项
+   * @returns 对应markdown的源码
+   */
+  onClick(selection, shortKey = '') {
+    const listType = [null, 'ol', 'ul', 'checklist']; // 下标1, 2, 3生效
+    const $selection = getSelection(this.editor.editor, selection, 'line', true);
+    const [before] = $selection.match(/^\n*/);
+    const [after] = $selection.match(/\n*$/);
+    const type = listType[shortKey] ? listType[shortKey] : shortKey;
+
+    if (!type || !/^(ol|ul|checklist)$/.test(type)) {
+      return $selection;
+    }
+    return `${before}${getListFromStr($selection, type)}${after}`;
+  }
+}

package/src/toolbars/hooks/Ol.js

@@ -0,0 +1,41 @@
+/**
+ * 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 { getSelection } from '@/utils/selection';
+import { getListFromStr } from '@/utils/regexp';
+
+/**
+ * 下标的按钮
+ **/
+export default class Ol extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('ol', 'format_list_numbered');
+  }
+
+  /**
+   *
+   * @param {string} selection 被用户选中的文本内容
+   * @param {string} shortKey 快捷键参数，本函数不处理这个参数
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    const $selection = getSelection(this.editor.editor, selection, 'line', true) || 'Item 1\n    Item 1.1\nItem 2';
+    const [before] = $selection.match(/^\n*/);
+    const [after] = $selection.match(/\n*$/);
+    return `${before}${getListFromStr($selection, 'ol')}${after}`;
+  }
+}

package/src/toolbars/hooks/Panel.js

@@ -0,0 +1,155 @@
+/**
+ * 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 { getPanelRule } from '@/utils/regexp';
+import { getSelection } from '@/utils/selection';
+/**
+ * 插入面板
+ */
+export default class Panel extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('panel', 'dock_to_bottom');
+    this.panelRule = getPanelRule().reg;
+    this.subMenuConfig = [
+      {
+        iconName: 'notification_important',
+        name: 'panelImportant',
+        onclick: this.bindSubClick.bind(this, 'important'),
+      },
+      {
+        iconName: 'info_i',
+        name: 'panelInfo',
+        onclick: this.bindSubClick.bind(this, 'info'),
+      },
+      {
+        iconName: 'priority_high',
+        name: 'panelWarn',
+        onclick: this.bindSubClick.bind(this, 'warning'),
+      },
+      {
+        iconName: 'close',
+        name: 'panelDanger',
+        onclick: this.bindSubClick.bind(this, 'danger'),
+      },
+      {
+        iconName: 'emoji_objects',
+        name: 'panelTip',
+        onclick: this.bindSubClick.bind(this, 'tip'),
+      },
+      {
+        iconName: 'align_justify_flex_start',
+        name: 'panelTop',
+        onclick: this.bindSubClick.bind(this, 'left'),
+      },
+      {
+        iconName: 'align_justify_center',
+        name: 'panelCenter',
+        onclick: this.bindSubClick.bind(this, 'center'),
+      },
+      {
+        iconName: 'align_justify_flex_end',
+        name: 'panelBottom',
+        onclick: this.bindSubClick.bind(this, 'right'),
+      },
+    ];
+  }
+
+  /**
+   * 从字符串中找打面板的name
+   * @param {string} str
+   * @returns {string | false}
+   */
+  $getNameFromStr(str) {
+    let ret = false;
+    this.panelRule.lastIndex = 0;
+    str.replace(this.panelRule, (match, preLines, name, content) => {
+      const $name = /\s/.test(name.trim()) ? name.trim().replace(/\s.*$/, '') : name;
+      ret = $name ? $name.trim().toLowerCase() : '';
+      return match;
+    });
+    return ret;
+  }
+
+  $getTitle(str) {
+    this.panelRule.lastIndex = 0;
+    str.replace(this.panelRule, (match, preLines, name, content) => {
+      const $name = name.trim();
+      return /\s/.test($name) ? $name.replace(/[^\s]+\s/, '') : '';
+    });
+    return '';
+  }
+
+  /**
+   * 响应点击事件
+   * @param {string} selection 被用户选中的文本内容
+   * @param {string} shortKey 快捷键参数
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    let $selection = getSelection(this.editor.editor, selection, 'line', true) || '内容';
+    let currentName = this.$getNameFromStr($selection);
+    let title = this.$getTitle($selection);
+    if (currentName === false) {
+      // 如果没有命中面板语法，则尝试扩大选区
+      this.getMoreSelection('::: ', '\n', () => {
+        const newSelection = this.editor.editor.getSelection();
+        const isMatch = this.$getNameFromStr(newSelection);
+        if (isMatch !== false) {
+          $selection = newSelection;
+          currentName = isMatch;
+          title = this.$getTitle(newSelection);
+        }
+        return isMatch !== false;
+      });
+    }
+    if (currentName !== false) {
+      // 如果命中了面板语法，则尝试去掉语法或者变更语法
+      if (currentName === shortKey) {
+        // 去掉面板语法
+        this.panelRule.lastIndex = 0;
+        return $selection.replace(this.panelRule, (match, preLines, name, content) => {
+          const $name = name.trim();
+          const $title = /\s/.test($name) ? $name.replace(/[^\s]+\s/, '') : '';
+          return `${$title}\n${content}`;
+        });
+      }
+      // 修改name
+      this.registerAfterClickCb(() => {
+        this.setLessSelection('::: ', '\n');
+      });
+      this.panelRule.lastIndex = 0;
+      return $selection.replace(this.panelRule, (match, preLines, name, content) => {
+        const $name = name.trim();
+        const $title = /\s/.test($name) ? $name.replace(/[^\s]+\s/, '') : '';
+        return `::: ${shortKey} ${$title}\n${content.replace(/\n+$/, '')}\n:::`;
+      });
+    }
+    this.registerAfterClickCb(() => {
+      this.setLessSelection('::: ', '\n');
+    });
+    $selection = $selection.replace(/^\n+/, '');
+    if (/\n/.test($selection)) {
+      if (!title) {
+        title = $selection.replace(/\n[\w\W]+$/, '');
+        $selection = $selection.replace(/^[^\n]+\n/, '');
+      }
+    } else {
+      title = title ? title : '标题';
+    }
+    return `::: ${shortKey} ${title}\n${$selection}\n:::`.replace(/\n{2,}:::/g, '\n:::');
+  }
+}

package/src/toolbars/hooks/Quote.js

@@ -0,0 +1,45 @@
+/**
+ * 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 { getSelection } from '@/utils/selection';
+/**
+ * 插入“引用”的按钮
+ */
+export default class Quote extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('quote', 'format_quote');
+  }
+
+  /**
+   * click handler
+   * @param {string} selection selection in editor
+   * @returns
+   */
+  onClick(selection) {
+    const $selection = getSelection(this.editor.editor, selection, 'line', true) || this.locale.quote;
+    const isWrapped = $selection.split('\n').every((text) => /^\s*>[^\n]+$/.exec(text));
+    if (isWrapped) {
+      // 去掉>号
+      return $selection.replace(/(^\s*)>\s*([^\n]+)($)/gm, '$1$2$3').replace(/\n+$/, '\n\n');
+    }
+    this.registerAfterClickCb(() => {
+      this.setLessSelection('> ', '');
+    });
+    // 给每一行增加>号
+    return $selection.replace(/(^)([^\n]+)($)/gm, '$1> $2$3').replace(/\n+$/, '\n\n');
+  }
+}

package/src/toolbars/hooks/Redo.js

@@ -0,0 +1,33 @@
+/**
+ * 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';
+/**
+ * 撤销/重做 里的“重做”按键
+ * 依赖codemirror的undo接口
+ */
+export default class Redo extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('redo', 'redo');
+  }
+
+  /**
+   * 直接调用codemirror的redo方法就好了
+   */
+  onClick() {
+    this.editor.editor.redo();
+  }
+}

package/src/toolbars/hooks/Ruby.js

@@ -0,0 +1,59 @@
+/**
+ * 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 { getSelection } from '@/utils/selection';
+/**
+ * 生成ruby，使用场景：给中文增加拼音、给中文增加英文、给英文增加中文等等
+ */
+export default class Ruby extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('ruby', 'language_pinyin');
+  }
+
+  $testIsRuby(selection) {
+    return /^\s*\{[\s\S]+\|[\s\S]+\}/.test(selection);
+  }
+
+  /**
+   * 响应点击事件
+   * @param {string} selection 被用户选中的文本内容
+   * @param {string} shortKey 快捷键参数，本函数不处理这个参数
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    let $selection = getSelection(this.editor.editor, selection) || '拼音';
+    // 如果选中的文本中已经有ruby语法了，则去掉该语法
+    if (!this.isSelections && !this.$testIsRuby($selection)) {
+      this.getMoreSelection(' { ', ' } ', () => {
+        const newSelection = this.editor.editor.getSelection();
+        const isRuby = this.$testIsRuby(newSelection);
+        if (isRuby) {
+          $selection = newSelection;
+        }
+        return isRuby;
+      });
+    }
+    if (this.$testIsRuby($selection)) {
+      return $selection.replace(/^\s*\{\s*([\s\S]+?)\s*\|[\s\S]+\}\s*/gm, '$1');
+    }
+    const pinyin = (this.editor.$cherry.options.callback.changeString2Pinyin($selection) || 'pin yin').trim();
+    this.registerAfterClickCb(() => {
+      this.setLessSelection(' { ', ' } ');
+    });
+    return ` { ${$selection} | ${pinyin} } `;
+  }
+}