@cherry-markdown/cherry-markdown-dev 0.9.0-dev.202504110650.834443a → 0.9.0-dev.202504160300.d23d141

package/src/sass/themes/violet.scss

@@ -1,410 +0,0 @@
-@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

@@ -1,84 +0,0 @@
-//基础样式
-
-$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

@@ -1,234 +0,0 @@
-/**
- * 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);
-    });
-  }
-}