cherry-muse 1.0.1

package/src/toolbars/hooks/Badge.js

@@ -0,0 +1,80 @@
+/**
+ * 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 Badge extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('badge', 'app_badging');
+    this.subMenuConfig = [
+      {
+        iconName: 'notification_important',
+        name: 'badgeImportant',
+        onclick: this.bindSubClick.bind(this, 'important'),
+      },
+      {
+        iconName: 'info_i',
+        name: 'badgeInfo',
+        onclick: this.bindSubClick.bind(this, 'info'),
+      },
+      {
+        iconName: 'priority_high',
+        name: 'badgeWarn',
+        onclick: this.bindSubClick.bind(this, 'warning'),
+      },
+      {
+        iconName: 'close',
+        name: 'badgeDanger',
+        onclick: this.bindSubClick.bind(this, 'danger'),
+      },
+      {
+        iconName: 'emoji_objects',
+        name: 'badgeTip',
+        onclick: this.bindSubClick.bind(this, 'tip'),
+      },
+      {
+        iconName: 'align_flex_start',
+        name: 'badgeTop',
+        onclick: this.bindSubClick.bind(this, ['info', 'top']),
+      },
+      {
+        iconName: 'align_center',
+        name: 'badgeCenter',
+        onclick: this.bindSubClick.bind(this, ['info', 'center']),
+      },
+      {
+        iconName: 'align_flex_end',
+        name: 'badgeBottom',
+        onclick: this.bindSubClick.bind(this, ['info', 'bottom']),
+      },
+    ];
+  }
+
+  /**
+   * 响应点击事件
+   * @param {string} selection 被用户选中的文本内容
+   * @param {string} shortKey 快捷键参数
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    const keys = typeof shortKey === 'string' ? [shortKey] : shortKey;
+    const $selection = getSelection(this.editor.editor, selection, 'line', true) || '内容';
+    return `[[${$selection}:${keys[0]},${keys.length > 1 ? keys[1] : 'center'}]]`;
+  }
+}

package/src/toolbars/hooks/BarTable.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 BarTable extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('barTable', 'table_chart');
+  }
+
+  /**
+   * 响应点击事件
+   * @param {string} selection 被用户选中的文本内容
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    // 插入带折线图的表格
+    return `${selection}\n\n${[
+      '| :bar: {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/Bold.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 Bold extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('bold', 'format_bold');
+  }
+
+  /**
+   * 是不是包含加粗语法
+   * @param {String} selection
+   * @returns {Boolean}
+   */
+  $testIsBold(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.bold;
+    // 如果是单选，并且选中内容的开始结束内没有加粗语法，则扩大选中范围
+    if (!this.isSelections && !this.$testIsBold($selection)) {
+      this.getMoreSelection('**', '**', () => {
+        const newSelection = this.editor.editor.getSelection();
+        const isBold = this.$testIsBold(newSelection);
+        if (isBold) {
+          $selection = newSelection;
+        }
+        return isBold;
+      });
+    }
+    // 如果选中的文本中已经有加粗语法了，则去掉加粗语法
+    if (this.$testIsBold($selection)) {
+      return $selection.replace(/(^)(\s*)(\*\*|__)([^\n]+)(\3)(\s*)($)/gm, '$1$4$7');
+    }
+    this.registerAfterClickCb(() => {
+      this.setLessSelection('**', '**');
+    });
+    return $selection.replace(/(^)([^\n]+)($)/gm, '$1**$2**$3');
+  }
+
+  /**
+   * 声明绑定的快捷键，快捷键触发onClick
+   */
+  get shortcutKeys() {
+    return ['Ctrl-b'];
+  }
+}

package/src/toolbars/hooks/Br.js

@@ -0,0 +1,34 @@
+/**
+ * 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 Br extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('br', 'format_text_wrap');
+  }
+
+  /**
+   * 响应点击事件
+   * @param {string} selection 被用户选中的文本内容
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    return `${selection}<br>`;
+  }
+}

package/src/toolbars/hooks/Card.js

@@ -0,0 +1,64 @@
+/**
+ * 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 Card extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('card', 'credit_card');
+    this.subMenuConfig = [
+      {
+        name: 'normalCard',
+        iconName: 'card_membership',
+        onclick: this.bindSubClick.bind(
+          this,
+          `
+#list
+![](图片)[标题](链接) 描述
+`,
+        ),
+      },
+      {
+        name: 'noImageCard',
+        iconName: 'space_dashboard',
+        onclick: this.bindSubClick.bind(
+          this,
+          `
+#list/1
+[标题](链接) 描述
+`,
+        ),
+      },
+      {
+        name: 'imageCard',
+        iconName: 'badge',
+        onclick: this.bindSubClick.bind(
+          this,
+          `
+#image/3
+![标题](图片)[查看详情](链接) 描述内容
+`,
+        ),
+      },
+    ];
+  }
+
+  onClick(selection, shortKey) {
+    return `\`\`\`card${shortKey}\`\`\`\n`;
+  }
+}

package/src/toolbars/hooks/CheckList.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 Checklist extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('checklist', 'done_outline');
+  }
+
+  /**
+   *
+   * @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, 'checklist')}${after}`;
+  }
+}

package/src/toolbars/hooks/Code.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 Code extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('code', 'code');
+  }
+
+  /**
+   * 响应点击事件
+   * @param {string} selection 被用户选中的文本内容
+   * @param {string} shortKey 快捷键参数，本函数不处理这个参数
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    const code = selection ? selection : 'code...';
+    this.registerAfterClickCb(() => {
+      this.setLessSelection(`\n\`\`\` \n`, `\n\`\`\`\n`);
+    });
+    return `\n\`\`\` \n${code}\n\`\`\`\n`;
+  }
+
+  /**
+   * 声明绑定的快捷键，快捷键触发onClick
+   */
+  get shortcutKeys() {
+    return ['Ctrl-k'];
+  }
+}

package/src/toolbars/hooks/Color.js

@@ -0,0 +1,285 @@
+/**
+ * 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 Event from '@/Event';
+/**
+ * 插入字体颜色或者字体背景颜色的按钮
+ */
+export default class Color extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('color', 'format_color_fill');
+    // this.bubbleMenu = true;
+    this.bubbleColor = new BubbleColor($cherry);
+  }
+
+  $testIsColor(type, selection) {
+    const textReg = /^\s*!![^\s]+ [\s\S]+!!\s*$/;
+    const bgReg = /^\s*!!![^\s]+ [\s\S]+!!!\s*$/;
+    if (type === 'text') {
+      return textReg.test(selection) && !bgReg.test(selection);
+    }
+    return bgReg.test(selection);
+  }
+
+  /**
+   * 响应点击事件
+   * @param {string} selection 被用户选中的文本内容
+   * @param {string} shortKey 快捷键参数，本函数不处理这个参数
+   * @param {Event & {target:HTMLElement}} event 点击事件，用来从被点击的调色盘中获得对应的颜色
+   * @returns 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '', event) {
+    let $selection = getSelection(this.editor.editor, selection) || this.locale.color;
+    if (this.hasCacheOnce()) {
+      // @ts-ignore
+      const { type, color } = this.getAndCleanCacheOnce();
+      const begin = type === 'text' ? `!!${color} ` : `!!!${color} `;
+      const end = type === 'text' ? '!!' : '!!!';
+      if (!this.isSelections && !this.$testIsColor(type, $selection)) {
+        this.getMoreSelection(begin, end, () => {
+          const newSelection = this.editor.editor.getSelection();
+          if (this.$testIsColor(type, newSelection)) {
+            $selection = newSelection;
+            return true;
+          }
+          return false;
+        });
+      }
+      if (this.$testIsColor(type, $selection)) {
+        const reg = new RegExp(`(^\\s*${end})([^\\s]+) ([\\s\\S]+${end}\\s*$)`, 'gm');
+        let needClean = true;
+        const tmp = $selection.replace(reg, (w, m1, m2, m3) => {
+          needClean = needClean ? m2 === color : false;
+          return `${m1}${color} ${m3}`;
+        });
+        if (needClean) {
+          return $selection.replace(reg, '$3').replace(/!+\s*$/gm, '');
+        }
+        this.registerAfterClickCb(() => {
+          this.setLessSelection(begin, end);
+        });
+        return tmp;
+      }
+      this.registerAfterClickCb(() => {
+        this.setLessSelection(begin, end);
+      });
+      return `${begin}${$selection}${end}`;
+    }
+
+    // 定位调色盘应该出现的位置
+    // 该按钮可能出现在顶部工具栏，
+    // 也可能出现在选中文字时出现的bubble工具栏，
+    // 也可能出现在新行出现的float工具栏
+    let top = 0;
+    let left = 0;
+    if (event.target.closest('.cherry-bubble')) {
+      const $colorDom = /** @type {HTMLElement}*/ (event.target.closest('.cherry-bubble'));
+      const clientRect = $colorDom.getBoundingClientRect();
+      top = clientRect.top + $colorDom.offsetHeight;
+      left =
+        /** @type {HTMLElement}*/ (event.target.closest('.cherry-toolbar-format_color_fill')).offsetLeft +
+        clientRect.left;
+    } else {
+      const $colorDom = /** @type {HTMLElement}*/ (event.target.closest('.cherry-toolbar-format_color_fill'));
+      const clientRect = $colorDom.getBoundingClientRect();
+      top = clientRect.top + $colorDom.offsetHeight;
+      left = clientRect.left;
+    }
+    this.updateMarkdown = false;
+    // 【TODO】需要增加getMoreSelection的逻辑
+    this.bubbleColor.show({
+      left,
+      top,
+      $color: this,
+    });
+  }
+}
+
+/**
+ * 调色盘
+ */
+class BubbleColor {
+  constructor($cherry) {
+    this.editor = $cherry.editor;
+    this.$cherry = $cherry;
+    this.init();
+    this.initAction();
+  }
+
+  /**
+   * 定义调色盘每个色块的颜色值
+   */
+  colorStack = [
+    '#000000',
+    '#444444',
+    '#666666',
+    '#999999',
+    '#cccccc',
+    '#eeeeee',
+    '#f3f3f3',
+    '#ffffff',
+    '#ff0000',
+    '#ff9900',
+    '#ffff00',
+    '#00ff00',
+    '#00ffff',
+    '#0000ff',
+    '#9900ff',
+    '#ff00ff',
+    '#f4cccc',
+    '#fce5cd',
+    '#fff2cc',
+    '#d9ead3',
+    '#d0e0e3',
+    '#cfe2f3',
+    '#d9d2e9',
+    '#ead1dc',
+    '#ea9999',
+    '#f9cb9c',
+    '#ffe599',
+    '#b6d7a8',
+    '#a2c4c9',
+    '#9fc5e8',
+    '#b4a7d6',
+    '#d5a6bd',
+    '#e06666',
+    '#f6b26b',
+    '#ffd966',
+    '#93c47d',
+    '#76a5af',
+    '#6fa8dc',
+    '#8e7cc3',
+    '#c27ba0',
+    '#cc0000',
+    '#e69138',
+    '#f1c232',
+    '#6aa84f',
+    '#45818e',
+    '#3d85c6',
+    '#674ea7',
+    '#a64d79',
+    '#990000',
+    '#b45f06',
+    '#bf9000',
+    '#38761d',
+    '#134f5c',
+    '#0b5394',
+    '#351c75',
+    '#741b47',
+    '#660000',
+    '#783f04',
+    '#7f6000',
+    '#274e13',
+    '#0c343d',
+    '#073763',
+    '#20124d',
+    '#4c1130',
+  ];
+
+  /**
+   * 用来暂存选中的内容
+   * @param {string} selection 编辑区选中的文本内容
+   */
+  setSelection(selection) {
+    this.selection = selection;
+  }
+
+  getFontColorDom(title) {
+    const colorStackDOM = this.colorStack
+      .map(
+        (color) =>
+          `<span class="cherry-color-item cherry-color-item__${color.replace(
+            '#',
+            '',
+          )}" unselectable="on" data-val="${color}"
+                  style="background-color:${color}"></span>`,
+      )
+      .join('');
+    return `<h3>${title}</h3>${colorStackDOM}`;
+  }
+
+  getDom() {
+    const $colorWrap = document.createElement('div');
+
+    $colorWrap.classList.add('cherry-dropdown');
+    $colorWrap.classList.add('cherry-color-wrap');
+    const $textWrap = document.createElement('div');
+    $textWrap.classList.add('cherry-color-text');
+    $textWrap.innerHTML = this.getFontColorDom('文本颜色');
+    $colorWrap.appendChild($textWrap);
+
+    const $bgWrap = document.createElement('div');
+    $bgWrap.classList.add('cherry-color-bg');
+    $bgWrap.innerHTML = this.getFontColorDom('背景颜色');
+    $colorWrap.appendChild($bgWrap);
+
+    return $colorWrap;
+  }
+
+  init() {
+    this.dom = this.getDom();
+    this.editor.options.wrapperDom.appendChild(this.dom);
+  }
+
+  onClick() {
+    if (this.type === 'text') {
+      if (/^!!#\S+ [\s\S]+?!!/.test(this.selection)) {
+        return this.selection.replace(/^!!#\S+ ([\s\S]+?)!!/, `!!${this.colorValue} $1!!`);
+      }
+      return `!!${this.colorValue} ${this.selection}!!`;
+    }
+    if (/^!!!#\S+ [\s\S]+?!!!/.test(this.selection)) {
+      return this.selection.replace(/^!!!#\S+ ([\s\S]+?)!!!/, `!!!${this.colorValue} $1!!!`);
+    }
+    return `!!!${this.colorValue} ${this.selection}!!!`;
+  }
+
+  initAction() {
+    // const self = this;
+    this.dom.addEventListener(
+      'click',
+      (evt) => {
+        const { target } = /** @type {MouseEvent & {target:HTMLElement}}*/ (evt);
+        this.colorValue = target.getAttribute('data-val');
+        if (!this.colorValue) {
+          return false;
+        }
+        this.type = target.closest('.cherry-color-text') ? 'text' : 'bg';
+        this.$color.setCacheOnce({ type: this.type, color: this.colorValue });
+        this.$color.fire(null);
+      },
+      false,
+    );
+    this.dom.addEventListener('EditorHideToolbarSubMenu', () => {
+      if (this.dom.style.display !== 'none') {
+        this.dom.style.display = 'none';
+      }
+    });
+  }
+
+  /**
+   * 在对应的坐标展示调色盘
+   * @param {Object} 坐标
+   */
+  show({ left, top, $color }) {
+    this.dom.style.left = `${left}px`;
+    this.dom.style.top = `${top}px`;
+    this.dom.style.display = 'block';
+    this.$color = $color;
+  }
+}