@cherry-markdown/cherry-markdown-dev 0.8.58-dev

package/src/sass/themes/violet.scss

@@ -0,0 +1,410 @@
+@import '../variable.scss';
+
+$VIOLET0: #f3f0ff;
+$VIOLET1: #e5dbff;
+$VIOLET2: #d0bfff;
+$VIOLET3: #b197fc;
+$VIOLET4: #9775fa;
+$VIOLET5: #845ef7;
+$VIOLET6: #7950f2;
+$VIOLET7: #7048e8;
+$VIOLET8: #6741d9;
+$VIOLET9: #5f3dc4;
+
+/** 工具栏样式 */
+$toolbarBg: #FFF;
+$toolbarBtnColor: $VIOLET9;
+$toolbarBtnBgHover: $VIOLET5;
+$toolbarBtnHoverColor: $VIOLET0;
+$toolbarColorItemHoverBorderColor: $VIOLET9;
+$sidebarShadow: $shadow;
+/** 编辑区域样式 */
+$editorBg: #FFF;
+$editorColor: $VIOLET9;
+$editorSelectedBg: $VIOLET2;
+$editorUrlBg: $VIOLET0;
+$editorCursorColor: $VIOLET9;
+$editorImportantColor: $VIOLET7;
+$editorCodeColor: $VIOLET6;
+/** 预览区域样式 */
+$previewBg: #FFF;
+$previewMobileBgColor: #FFF;
+/** markdown样式 */
+$mdColor: $editorColor;
+$mdHeaderColor: $editorImportantColor;
+$mdLineColor: $VIOLET8;
+$mdAColor: $editorCodeColor;
+$mdAHoverColor: $editorImportantColor;
+$mdInlineCodeColor: $editorCodeColor;
+$mdInlineCodeBg: $VIOLET1;
+$mdBlockquoteBg: $VIOLET1;
+
+/** 编辑器样式 */
+.cherry.theme__violet {
+
+  /** 顶部按钮, 选中文字时弹出的按钮, 光标focus到空行时联想出的按钮, 侧边栏按钮 */
+  .cherry-toolbar,
+  .cherry-floatmenu,
+  .cherry-bubble,
+  .cherry-sidebar {
+    background: $toolbarBg;
+    border-color: $toolbarBg;
+
+    .cherry-toolbar-button {
+      color: $toolbarBtnColor;
+
+      i {
+        color: $toolbarBtnColor;
+      }
+
+      &:hover {
+        background-color: $toolbarBtnBgHover;
+        color: $toolbarBtnHoverColor !important;
+        border-color: $toolbarBg;
+
+        i {
+          color: $toolbarBtnHoverColor !important;
+        }
+      }
+    }
+  }
+
+  /** 二级菜单 */
+  .cherry-dropdown {
+    background: $toolbarBg;
+
+    .cherry-dropdown-item {
+      color: $toolbarBtnColor;
+
+      // 选中子菜单高亮
+      &__selected {
+        background-color: $toolbarBtnBgHover;
+        color: $toolbarBtnHoverColor;
+      }
+
+      &:hover {
+        background-color: $toolbarBtnBgHover;
+        color: $toolbarBtnHoverColor;
+      }
+    }
+
+    /** 选择颜色的按钮 */
+    &.cherry-color-wrap {
+
+      /** 色盘的标题 */
+      h3 {
+        color: $toolbarBtnColor;
+      }
+
+      /** 色盘里的每一个色块 */
+      .cherry-color-item {
+        // width: 15px;
+        // border: none;
+        border-color: $toolbarBtnBgHover;
+
+        &:hover {
+          border-color: $toolbarColorItemHoverBorderColor;
+        }
+      }
+    }
+
+    /** 选择表格的按钮 */
+    .cherry-insert-table-menu-item {
+      border-color: $toolbarBtnBgHover;
+    }
+  }
+
+  /** 选中文字时弹出的按钮 */
+  .cherry-bubble {
+    .cherry-bubble-bottom {
+      border-top-color: $toolbarBg;
+    }
+
+    .cherry-bubble-top {
+      border-bottom-color: $toolbarBg;
+    }
+
+    /** 粘贴HTML内容时弹出的选择按钮 */
+    &.cherry-switch-paste {}
+  }
+
+
+  /** 光标focus到空行时联想出的按钮 */
+
+  .cherry-editor {
+    background-color: $editorBg;
+
+    .CodeMirror {
+      background-color: $editorBg;
+
+      .CodeMirror-cursor {
+        border-left: 1px solid $editorCursorColor;
+      }
+
+      .CodeMirror-scroll {
+
+        span,
+        .cm-variable-2,
+        .cm-string,
+        .cm-strong,
+        .cm-em,
+        .cm-meta {
+          color: $editorColor;
+        }
+
+        .cm-image-marker,
+        .cm-quote,
+        .cm-header,
+        .cm-atom {
+          color: $editorImportantColor;
+        }
+
+        .cm-url {
+          background-color: $editorUrlBg;
+        }
+
+        .cm-comment,
+        .cm-url {
+          color: $editorCodeColor;
+        }
+      }
+
+      .CodeMirror-selected {
+        background-color: $editorSelectedBg;
+      }
+    }
+  }
+
+  .cherry-sidebar {
+    box-shadow: $sidebarShadow;
+  }
+
+  .cherry-previewer {
+    background-color: $previewBg;
+
+    .cherry-mobile-previewer-content {
+      background-color: $previewMobileBgColor;
+    }
+  }
+
+  .cherry-previewer-table-content-handler {
+    .cherry-previewer-table-content-handler__input {
+      textarea {
+        background-color: $editorBg;
+        color: $editorColor;
+        outline-color: $editorImportantColor;
+      }
+    }
+  }
+
+}
+
+/** 预览区域样式 */
+.cherry-markdown.theme__violet {
+  color: $mdColor;
+  background-color: $previewBg;
+
+  p,
+  div {}
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    color: $mdHeaderColor;
+    text-align: center;
+    margin-bottom: 35px;
+  }
+
+  h1 {}
+
+  h2 {}
+
+  h3 {}
+
+  h4 {}
+
+  h5 {}
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+
+    /** 标题前面的锚点或序号 */
+    .anchor {}
+  }
+
+  ul {
+    &.cherry-list__upper-roman {
+      list-style: upper-roman;
+    }
+
+    &.cherry-list__lower-greek {
+      list-style: lower-greek;
+    }
+
+    &.cherry-list__lower-alpha {
+      list-style: lower-alpha;
+    }
+
+    &.cherry-list__cjk-ideographic {
+      list-style: cjk-ideographic;
+    }
+
+    &.cherry-list__circle {
+      list-style: circle;
+    }
+
+    &.cherry-list__square {
+      list-style: square;
+    }
+
+    &.cherry-list__default {}
+
+    /** checklist 模式，未勾选时 */
+    .ch-icon-square {}
+
+    /** checklist 模式，勾选时 */
+    .ch-icon-check {}
+  }
+
+  ol {
+    li {}
+  }
+
+
+  blockquote {
+    color: $mdColor;
+    background-color: $mdBlockquoteBg;
+    border-color: $mdLineColor;
+  }
+
+  a {
+    text-decoration: none;
+    color: $mdAColor;
+
+    &:hover {
+      text-decoration: underline;
+      color: $mdAHoverColor;
+    }
+  }
+
+  strong {}
+
+  em {}
+
+  del {}
+
+  sup {}
+
+  sub {}
+
+  hr {
+    border-color: $mdLineColor;
+  }
+
+  img {}
+
+  video {}
+
+  audio {}
+
+  /** 行内代码 */
+  p code,
+  li code {
+    background-color: $mdInlineCodeBg;
+    color: $mdInlineCodeColor;
+    border: 1px solid $mdLineColor;
+  }
+
+  /** 
+  * 代码块
+  */
+  pre code {}
+
+  /** 
+  * 表格
+  */
+  table,
+  .cherry-table {
+    color: $mdColor;
+
+    th {
+      background-color: $mdInlineCodeBg;
+    }
+
+    tr,
+    th,
+    td {
+      border-color: $mdLineColor;
+    }
+  }
+
+  /** 可以理解为上下结构的音标，下部是文字，上部是对应的拼音 */
+  ruby {
+
+    /** 上部的拼音 */
+    rt {}
+  }
+
+  /** 脚注 */
+  .footnote {
+    border-color: $mdLineColor;
+
+    .footnote-title {
+      background-color: $mdInlineCodeBg;
+    }
+
+    .one-footnote {
+      color: $mdColor;
+      border-color: $mdLineColor;
+
+      a.footnote-ref {
+        padding: 5px;
+      }
+    }
+  }
+
+  /** 行间公式 */
+  .Cherry-InlineMath {}
+
+  /** 段落公式 */
+  .Cherry-Math {}
+
+  /** 目录 */
+  .toc {
+    border-bottom: 1px solid $mdLineColor;
+    padding-bottom: 15px;
+    margin-bottom: 30px;
+
+    .toc-title {
+      text-align: center;
+      padding-bottom: 15px;
+      margin-top: 30px;
+      margin-bottom: 15px;
+      border-bottom: 1px solid $mdLineColor;
+    }
+
+    .toc-li {
+      border: none;
+
+      .level-1 {}
+
+      .level-2 {}
+
+      .level-3 {}
+
+      a {
+        color: $mdColor;
+
+        &:hover {
+          color: $mdAHoverColor;
+        }
+      }
+    }
+  }
+}

package/src/sass/variable.scss

@@ -0,0 +1,84 @@
+//基础样式
+
+$fontFamily: "Helvetica Neue",
+Arial,
+"Hiragino Sans GB",
+"STHeiti",
+"Microsoft YaHei",
+"WenQuanYi Micro Hei",
+sans-serif;
+$monospaceFont: 'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
+$fontSize: 16px;
+$fontSizeLarge: 18px;
+$lineHeight: 27px;
+$editorBg: #FFF;
+$previewBg: #FFF;
+$fontColor: #3f4a56;
+$linkColor: #3582fb;
+$linkHoverColor: #056bad;
+$borderColor: #dfe6ee;
+$toolbarSplitColor: #dfe6ee;
+$fullWidthColor: #d71616;
+$toolbarFontSize: 14px;
+$toolbarHeight: 48px;
+$elementGap: 16px;
+$elementLittleGap: 12px;
+$borderRadius: 3px;
+
+$errorColor: #f85353;
+$warnColor: #ffaf21;
+
+$shadow: 0 0 10px rgba(128, 145, 165, 0.2);
+
+// 标题
+$subTitle: #6d6e6f;
+// 滚动条
+
+// 列表
+
+// 代码块
+$codeBackground: #e5e5e5;
+$codeColor: $errorColor;
+$codeBlockBg: #00212b;
+
+
+// 引用
+$quoteBorderColor: #D6DBDF;
+$quoteBackground: rgba(102, 128, 153, .05);
+$quoteColor: $subTitle;
+
+// 公式
+
+
+// 编辑器主题
+
+$editorHeaderColor: $fontColor;
+$editorCommentColor: $linkColor;
+$editorQuoteColor: $editorCommentColor;
+$editorStringColor: $fontColor;
+$editorLinkColor: $linkColor;
+$editorUrlBgColor: #d7e6fe;
+
+$editorV2Color: $fontColor;
+$editorV3Color: $fontColor;
+$editorKeywordColor: $fontColor;
+
+
+// 工具栏
+// 暗色
+$toolbarBgDark: #20304b;
+$toolbarShadowDark: $shadow;
+$toolbarBtnBgDark: transparent;
+$toolbarBtnColorDark: #d7e6fe;
+$toolbarBtnBgHoverDark: rgba(255, 255, 255, 0.1);
+$toolbarBtnHoverColorDark: #fff;
+$toolbarBtnDisabledDark: #ccc;
+
+// 亮色
+$toolbarBgLight: white;
+$toolbarShadowLight: $shadow;
+$toolbarBtnBgLight: transparent;
+$toolbarBtnColorLight: #3f4a56;
+$toolbarBtnBgHoverLight: #ebf3ff;
+$toolbarBtnHoverColorLight: #5d9bfc;
+$toolbarBtnDisabledLight: #ccc;

package/src/toolbars/Bubble.js

@@ -0,0 +1,234 @@
+/**
+ * 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 Toolbar from './Toolbar';
+/**
+ * 在编辑区域选中文本时浮现的bubble工具栏
+ */
+export default class Bubble extends Toolbar {
+  /**
+   * @type {'flex' | 'block'}
+   */
+  static displayType = 'flex';
+  // constructor(options) {
+  //     super(options);
+  // }
+
+  set visible(visible) {
+    const bubbleStyle = window.getComputedStyle(this.bubbleDom);
+    if (visible) {
+      bubbleStyle.display === 'none' && (this.bubbleDom.style.display = Bubble.displayType);
+      // bubbleStyle.visibility !== 'visible' && (this.bubbleBottom.style.visibility = 'visible');
+    } else {
+      bubbleStyle.display !== 'none' && (this.bubbleDom.style.display = 'none');
+      // bubbleStyle.visibility !== 'hidden' && (this.bubbleBottom.style.visibility = 'hidden');
+    }
+  }
+
+  get visible() {
+    const bubbleStyle = window.getComputedStyle(this.bubbleDom);
+    return bubbleStyle.display !== 'none' && bubbleStyle.visibility !== 'hidden';
+  }
+
+  init() {
+    this.options.editor = this.$cherry.editor;
+    this.addSelectionChangeListener();
+    this.bubbleDom = this.options.dom;
+    this.editorDom = this.options.editor.getEditorDom();
+    this.initBubbleDom();
+    this.editorDom.querySelector('.CodeMirror').appendChild(this.bubbleDom);
+    Object.entries(this.shortcutKeyMap).forEach(([key, value]) => {
+      this.$cherry.toolbar.shortcutKeyMap[key] = value;
+    });
+  }
+
+  appendMenusToDom(menus) {
+    this.options.dom.appendChild(menus);
+  }
+
+  /**
+   * 计算编辑区域的偏移量
+   * @returns {number} 编辑区域的滚动区域
+   */
+  getScrollTop() {
+    return this.options.editor.editor.getScrollInfo().top;
+  }
+
+  /**
+   * 当编辑区域滚动的时候自动隐藏bubble工具栏和子工具栏
+   */
+  updatePositionWhenScroll() {
+    if (this.bubbleDom.style.display === Bubble.displayType) {
+      this.bubbleDom.style.marginTop = `${parseFloat(this.bubbleDom.dataset.scrollTop) - this.getScrollTop()}px`;
+    }
+  }
+
+  /**
+   * 根据高度计算bubble工具栏出现的位置的高度
+   * 根据宽度计算bubble工具栏出现的位置的left值，以及bubble工具栏三角箭头的left值
+   * @param {number} top 高度
+   * @param {number} width 选中文本内容的宽度
+   */
+  showBubble(top, width) {
+    if (!this.visible) {
+      this.visible = true;
+      this.bubbleDom.style.marginTop = '0';
+      this.bubbleDom.dataset.scrollTop = String(this.getScrollTop());
+    }
+    const positionLimit = this.editorDom.querySelector('.CodeMirror-lines').firstChild.getBoundingClientRect();
+    const editorPosition = this.editorDom.getBoundingClientRect();
+    const minLeft = positionLimit.left - editorPosition.left;
+    const maxLeft = positionLimit.width + minLeft;
+    const minTop = this.bubbleDom.offsetHeight * 2;
+    let $top = top;
+    if ($top < minTop) {
+      // 如果高度小于编辑器的顶部，则让bubble工具栏出现在选中文本的下放
+      $top += this.bubbleDom.offsetHeight - this.bubbleTop.getBoundingClientRect().height;
+      this.bubbleTop.style.display = 'block';
+      this.bubbleBottom.style.display = 'none';
+    } else {
+      // 反之出现在选中文本内容的上方
+      $top -= this.bubbleDom.offsetHeight + 2 * this.bubbleBottom.getBoundingClientRect().height;
+      this.bubbleTop.style.display = 'none';
+      this.bubbleBottom.style.display = 'block';
+    }
+    this.bubbleDom.style.top = `${$top}px`;
+    let left = width - this.bubbleDom.offsetWidth / 2;
+    if (left < minLeft) {
+      // 如果位置超过了编辑器的最左边，则控制bubble工具栏不超出编辑器最左边
+      // 同时bubble工具栏上的箭头尽量指向选中文本内容的中间位置
+      left = minLeft;
+      this.$setBubbleCursorPosition(`${width - minLeft}px`);
+    } else if (left + this.bubbleDom.offsetWidth > maxLeft) {
+      // 如果位置超过了编辑器的最右边，则控制bubble工具栏不超出编辑器最右边
+      // 同时bubble工具栏上的箭头尽量指向选中文本内容的中间位置
+      left = maxLeft - this.bubbleDom.offsetWidth;
+      this.$setBubbleCursorPosition(`${width - left}px`);
+    } else {
+      // 让bubble工具栏的箭头处于工具栏的中间位置
+      this.$setBubbleCursorPosition('50%');
+    }
+    // 安全边距 20px
+    this.bubbleDom.style.left = `${Math.max(20, left)}px`;
+  }
+
+  hideBubble() {
+    this.visible = false;
+  }
+
+  /**
+   * 控制bubble工具栏的箭头的位置
+   * @param {string} left 左偏移量
+   */
+  $setBubbleCursorPosition(left = '50%') {
+    if (left === '50%') {
+      this.bubbleTop.style.left = '50%';
+      this.bubbleBottom.style.left = '50%';
+    } else {
+      const $left = parseFloat(left) < 10 ? '10px' : left;
+      this.bubbleTop.style.left = $left;
+      this.bubbleBottom.style.left = $left;
+    }
+  }
+
+  initBubbleDom() {
+    const top = document.createElement('div');
+    top.className = 'cherry-bubble-top';
+    const bottom = document.createElement('div');
+    bottom.className = 'cherry-bubble-bottom';
+    this.bubbleTop = top;
+    this.bubbleBottom = bottom;
+    this.bubbleDom.appendChild(top);
+    this.bubbleDom.appendChild(bottom);
+    // 默认不可见
+    this.visible = false;
+  }
+
+  getBubbleDom() {
+    return this.bubbleDom;
+  }
+
+  addSelectionChangeListener() {
+    this.options.editor.addListener('change', (codemirror) => {
+      // 当编辑区内容变更时自动隐藏bubble工具栏
+      this.hideBubble();
+    });
+    this.options.editor.addListener('refresh', (codemirror) => {
+      // 当编辑区内容刷新时自动隐藏bubble工具栏
+      this.hideBubble();
+    });
+    this.options.editor.addListener('scroll', (codemirror) => {
+      // 当编辑区滚动时，需要实时同步bubble工具栏的位置
+      this.updatePositionWhenScroll();
+    });
+    this.options.editor.addListener('beforeSelectionChange', (codemirror, info) => {
+      setTimeout(() => {
+        const selections = codemirror.getSelections();
+        const selectionStr = selections.join('');
+        if (selectionStr !== this.lastSelectionsStr && (selectionStr || this.lastSelectionsStr)) {
+          this.lastSelections = !this.lastSelections ? [] : this.lastSelections;
+          this.$cherry.$event.emit('selectionChange', { selections, lastSelections: this.lastSelections, info });
+          this.lastSelections = selections;
+          this.lastSelectionsStr = selectionStr;
+        }
+      }, 10);
+      // 当编辑区选中内容改变时，需要展示/隐藏bubble工具栏，并计算工具栏位置
+      if (info.origin !== '*mouse' && (info.origin !== null || typeof info.origin === 'undefined')) {
+        return true;
+      }
+      if (!info.ranges[0]) {
+        return true;
+      }
+      const anchor = info.ranges[0].anchor.line * 1000000 + info.ranges[0].anchor.ch;
+      const head = info.ranges[0].head.line * 1000000 + info.ranges[0].head.ch;
+      let direction = 'asc';
+      if (anchor > head) {
+        direction = 'desc';
+      }
+      setTimeout(() => {
+        const selections = codemirror.getSelections();
+        if (selections.join('').length <= 0) {
+          this.hideBubble();
+          return;
+        }
+        const selectedObjs = codemirror.getWrapperElement().getElementsByClassName('CodeMirror-selected');
+        const editorPosition = this.editorDom.getBoundingClientRect();
+        let width = 0;
+        let top = 0;
+        if (typeof selectedObjs !== 'object' || selectedObjs.length <= 0) {
+          this.hideBubble();
+          return;
+        }
+        for (let key = 0; key < selectedObjs.length; key++) {
+          const one = selectedObjs[key];
+          const position = one.getBoundingClientRect();
+          const targetTop = position.top - editorPosition.top;
+          if (direction === 'asc') {
+            if (targetTop >= top) {
+              top = targetTop;
+              width = position.left - editorPosition.left + position.width / 2;
+            }
+          } else {
+            if (targetTop <= top || top <= 0) {
+              top = targetTop;
+              width = position.left - editorPosition.left + position.width / 2;
+            }
+          }
+        }
+        this.showBubble(top, width);
+      }, 10);
+    });
+  }
+}