cherry-muse 1.0.1

package/src/core/hooks/Underline.js

@@ -0,0 +1,37 @@
+/**
+ * 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 SyntaxBase from '@/core/SyntaxBase';
+
+export default class Underline extends SyntaxBase {
+  static HOOK_NAME = 'underline';
+
+  // constructor() {
+  //     super();
+  // }
+
+  makeHtml(str) {
+    if (!this.test(str)) {
+      return str;
+    }
+    return str.replace(this.RULE.reg, '$1<span style="text-decoration: underline;">$2</span>$3');
+  }
+
+  rule() {
+    const ret = { begin: '(^| )\\/', end: '\\/( |$)', content: '([^\\n]+?)' };
+    ret.reg = new RegExp(ret.begin + ret.content + ret.end, 'g');
+    return ret;
+  }
+}

package/src/index.core.js

@@ -0,0 +1,29 @@
+/**
+ * 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 Cherry from './Cherry';
+
+import SyntaxHookBase from './core/SyntaxBase';
+import MenuHookBase from './toolbars/MenuBase';
+
+// in browser
+if (window) {
+  // @ts-ignore
+  window.Cherry = Cherry;
+}
+
+export { SyntaxHookBase, MenuHookBase };
+
+export default Cherry;

package/src/index.engine.core.js

@@ -0,0 +1,62 @@
+/**
+ * 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 Engine from './Engine';
+import { CherryStatic } from './CherryStatic';
+import SyntaxHookBase from './core/SyntaxBase';
+import MenuHookBase from './toolbars/MenuBase';
+import defaultConfig from './Cherry.config';
+import { customizer } from './utils/config';
+import cloneDeep from 'lodash/cloneDeep';
+import { urlProcessorProxy } from './UrlCache';
+
+class CherryEngine extends CherryStatic {
+  /**
+   * @private
+   */
+  static initialized = false;
+  // TODO: 共用config
+  /**
+   * @readonly
+   */
+  static config = {
+    defaults: defaultConfig,
+  };
+
+  /**
+   * @param {any} options
+   */
+  constructor(options) {
+    super();
+    CherryEngine.initialized = true;
+    const defaultConfigCopy = cloneDeep(CherryEngine.config.defaults);
+    const opts = mergeWith({}, defaultConfigCopy, options, customizer);
+
+    if (typeof opts.engine.global.urlProcessor === 'function') {
+      opts.engine.global.urlProcessor = urlProcessorProxy(opts.engine.global.urlProcessor);
+    }
+
+    // @ts-ignore hack Cherry Instance
+    return new Engine(opts, { options: opts });
+  }
+}
+
+export { SyntaxHookBase, MenuHookBase };
+
+const CherryEngineExport = CherryEngine;
+
+export default CherryEngineExport;

package/src/index.engine.js

@@ -0,0 +1,30 @@
+/**
+ * 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 CherryEngine from './index.engine.core';
+import MermaidCodeEngine from './addons/cherry-code-block-mermaid-plugin';
+import Cherry from '@/index.core';
+import EChartsCodeEngine from '@/addons/cherry-code-block-echarts-plugin';
+import CardCodeEngine from '@/addons/cherry-code-block-card-plugin';
+
+CherryEngine.usePlugin(MermaidCodeEngine, {
+  theme: 'default',
+  sequence: { useMaxWidth: false, showSequenceNumbers: true },
+});
+
+Cherry.usePlugin(EChartsCodeEngine, {});
+Cherry.usePlugin(CardCodeEngine, {});
+export * from './index.engine.core';
+export default CherryEngine;

package/src/index.js

@@ -0,0 +1,28 @@
+/**
+ * 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 Cherry from './index.core';
+import MermaidCodeEngine from '@/addons/cherry-code-block-mermaid-plugin';
+import EChartsCodeEngine from '@/addons/cherry-code-block-echarts-plugin';
+import CardCodeEngine from '@/addons/cherry-code-block-card-plugin';
+
+Cherry.usePlugin(MermaidCodeEngine, {
+  theme: 'default',
+  sequence: { useMaxWidth: false },
+});
+Cherry.usePlugin(EChartsCodeEngine, {});
+Cherry.usePlugin(CardCodeEngine, {});
+export * from './index.core';
+export default Cherry;

package/src/locales/index.js

@@ -0,0 +1,21 @@
+/**
+ * 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 zhCn from './zh_CN';
+
+export default {
+  zh_CN: zhCn,
+};

package/src/locales/zh_CN.js

@@ -0,0 +1,170 @@
+/**
+ * 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.
+ */
+export default {
+  switchModel: '模式切换',
+  switchEdit: '返回编辑',
+
+  pastePlain: '粘贴为纯文本格式',
+  pasteMarkdown: '粘贴为markdown格式',
+  hide: '隐藏(ctrl+0)',
+
+  //
+  audio: '音频',
+
+  badge: '徽章',
+  badgeTip: '提示徽章',
+  badgeInfo: '信息徽章',
+  badgeWarn: '警告徽章',
+  badgeDanger: '危险徽章',
+  badgeImportant: '重要徽章',
+  badgeTop: '上标徽章',
+  badgeCenter: '居中徽章',
+  badgeBottom: '下标徽章',
+
+  barTable: '柱状图表格',
+
+  bold: '加粗',
+
+  card: '卡片',
+  normalCard: '普通卡片',
+  noImageCard: '无图卡片',
+  imageCard: '图文卡片',
+
+  checklist: '清单',
+  //
+  code: '行内代码',
+  codeBlock: '代码块',
+  color: '颜色',
+  //
+  copy: '复制内容',
+  detail: '详情',
+
+  detailOpen: '默认展开详情',
+  detailClose: '默认关闭详情',
+
+  echarts: '图表',
+  basicBarChart: '基本柱状图',
+  stackedBarChart: '堆叠柱状图',
+  basicLineChart: '基础折线图',
+  stackedLineChart: '堆叠折线图',
+  areaChart: '区域面积图',
+  smoothCurveChart: '平滑曲线图',
+  ladderLineDiagram: '阶梯线图',
+  pieChart: '基础饼图',
+  circleDiagram: '圆环图',
+  roseChart: '玫瑰图',
+  scatterPlot: '基础散点图',
+  //
+  export: '导出',
+  exportToPdf: '导出PDF',
+  exportMarkdownFile: '导出MD',
+  exportHTMLFile: '导出HTML',
+
+  fullScreen: '全屏',
+
+  graph: '画图',
+
+  insertFlow: '流程图',
+  insertSeq: '时序图',
+  insertState: '状态图',
+  insertClass: '类图',
+  insertPie: '饼图',
+  insertGantt: '甘特图',
+  insertErDiagram: '实体关系图',
+  insertJourney: '用户旅程图',
+  insertQuadrantChart: '象限图',
+  insertRequirementDiagram: '需求图',
+  insertGitGraph: 'Git提交图',
+  insertC4Dynamic: 'C4 图',
+  insertMindmap: '思维导图',
+  insertXyChart: 'XY 图表',
+  insertTimeline: '时间线',
+  insertSankey: '桑基图',
+
+  header: '标题',
+  h1: '一级标题',
+  h2: '二级标题',
+  h3: '三级标题',
+  h4: '四级标题',
+  h5: '五级标题',
+
+  hr: '分隔线',
+
+  image: '图片',
+  insert: '插入',
+  br: '换行',
+  formula: '行内公式',
+  toc: '目录',
+
+  video: '视频',
+  link: '超链接',
+  file: '文件',
+  table: '表格',
+  'line-table': '折线表格',
+  'bar-table': '柱状表格',
+  headlessTable: '无头表格',
+  ruby: '拼音',
+
+  italic: '斜体',
+  list: '列表',
+  ol: '有序列表',
+  ul: '无序列表',
+
+  panel: '面板',
+  panelTip: '提示面板',
+  panelInfo: '信息面板',
+  panelWarn: '警告面板',
+  panelDanger: '危险面板',
+  panelImportant: '重要面板',
+  panelTop: '偏左面板',
+  panelCenter: '居中面板',
+  panelBottom: '偏右面板',
+
+  quote: '引用',
+  undo: '撤销',
+  redo: '恢复',
+
+  size: '大小',
+  'size-1': '小',
+  'size-2': '中',
+  'size-3': '大',
+  'size-4': '特大',
+
+  strikethrough: '删除线',
+  sub: '下标',
+  sup: '上标',
+
+  switchPreview: '预览',
+  tocListShow: '显示目录',
+  tocListHide: '隐藏目录',
+
+  previewClose: '关闭预览',
+  togglePreview: '预览',
+
+  underline: '下划线',
+
+  latexFormula: 'Latex公式',
+  latexFormulaInline: 'Latex行内公式',
+  highlight: '高亮',
+  footNoteTitle: '脚注标题',
+  footNoteText: '脚注内容',
+  wordCount: '字数',
+  wordParagraphs: '段落',
+  wordWords: '字数',
+  wordCharacters: '字符',
+  iframe: '嵌入网页',
+  emoji: `表情`,
+};

package/src/sass/cherry.scss

@@ -0,0 +1,122 @@
+@use "variables/colors";
+@use "google-fonts" as *;
+
+@use "components/bubble";
+@use "components/toolbar" as *;
+@use "components/dropdown" as *;
+@use "components/codemirror" as *;
+@use "components/editor" as *;
+@use "components/preview" as *;
+@use "components/toc" as *;
+@use "components/stats" as * ;
+.cherry {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: stretch;
+  align-content: flex-start;
+  height: 100%;
+  min-height: 100px;
+  position: relative;
+  &.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2000;
+  }
+  .cherry-editor,
+  .cherry-previewer {
+    max-height: calc(100% - var(--toolbar-height));
+    min-height: calc(100% - var(--toolbar-height));
+  }
+
+  .CodeMirror {
+    height: 100%;
+  }
+
+  &.cherry--no-toolbar {
+    .cherry-toolbar,
+    .cherry-sidebar {
+      height: 0;
+      display: none;
+    }
+
+    .cherry-editor,
+    .cherry-previewer {
+      max-height: 100%;
+      min-height: 100%;
+    }
+  }
+
+  line-height: var(--line-height);
+  color: var(--text-color);
+  background: var(--bg-color);
+
+  font-size: var(--font-size);
+  font-family: var(--font-family), serif;
+
+  .cherry-drag {
+    width: 1rem;
+    cursor: ew-resize;
+    position: absolute;
+    z-index: 12;
+    background: transparent;
+
+    &.cherry-drag--show {
+      width: 0.5rem;
+      display: block;
+      background: var(--drag-bg-color);
+    }
+
+    &.cherry-drag--hidden {
+      display: none;
+    }
+  }
+
+  .cherry-editor-mask {
+    z-index: 10;
+    position: absolute;
+    display: none;
+    background: var(--editor-mask-bg);
+
+    &.cherry-editor-mask--show {
+      display: block;
+    }
+  }
+
+  .cherry-previewer-mask {
+    z-index: 10;
+    position: absolute;
+    display: none;
+    background: var(--previewer-mask-bg);
+
+    &.cherry-previewer-mask--show {
+      display: block;
+    }
+  }
+
+  *::-webkit-scrollbar {
+    height: 0.5rem;
+    width: 0.5rem;
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar:hover {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: var(--hover-bg-color);
+    -webkit-border-radius: var(--border-radius);
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background: var(--panel-border-color);
+  }
+
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+}

package/src/sass/components/bubble.scss

@@ -0,0 +1,122 @@
+$bubble-min-height: 2.1875rem; // 35px converted to rem (35 / 16)
+
+.cherry-bubble {
+  position: absolute;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+
+  font-size: 0.875rem; // 14px converted to rem (14 / 16)
+
+  // min-height for overflow wrap
+  min-height: $bubble-min-height;
+  min-width: 3.125rem; // 50px converted to rem (50 / 16)
+
+  border: var(--border);
+  background-color: var(--bg-color);
+  box-shadow: 0 0.125rem 0.9375rem -0.3125rem rgba(0, 0, 0, 0.5); // 0 2px 15px -5px converted to rem
+  border-radius: var(--border-radius);
+  z-index: 8;
+
+  &.cherry-bubble--centered {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  // triangle
+  .cherry-bubble-top,
+  .cherry-bubble-bottom {
+    position: absolute;
+    left: 50%;
+
+    width: 0;
+    height: 0;
+
+    margin-left: -0.5rem; // 8px converted to rem (8 / 16)
+    border-left: 0.5rem solid rgba(0, 0, 0, 0); // 8px converted to rem
+    border-right: 0.5rem solid rgba(0, 0, 0, 0); // 8px converted to rem
+  }
+
+  .cherry-bubble-top {
+    top: 0;
+    transform: translateY(-100%);
+    border-bottom: 0.5rem solid var(--bg-color); // 8px converted to rem
+  }
+
+  .cherry-bubble-bottom {
+    bottom: 0;
+    transform: translateY(100%);
+    border-top: 0.5rem solid var(--bg-color); // 8px converted to rem
+  }
+
+  .cherry-toolbar-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    // FIXME: remove fixed height
+    height: $bubble-min-height;
+
+    // line-height: calc($bubble-min-height - 0.125rem); // border 2px
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      border-color: var(--active-file-border-color);
+      background-color: var(--hover-bg-color);
+
+    }
+
+    &.cherry-toolbar-split {
+      height: 65%;
+      min-height: calc(0.65 * #{$bubble-min-height});
+    }
+  }
+
+}
+
+.cherry-switch-paste {
+  .switch-btn--bg {
+    position: absolute;
+    width: 50%;
+    height: 100%;
+    box-sizing: border-box;
+    z-index: -1;
+    left: 0;
+    top: 0;
+    opacity: 0.3;
+    background-color: var(--active-file-border-color);
+    border-radius: var(--border-radius);
+    transition: all 0.3s;
+  }
+  .cherry-toolbar-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 5rem; // 80px converted to rem (80 / 16)
+    text-align: center;
+    &:hover {
+      border-color: transparent;
+    }
+  }
+  &[data-type='text'] {
+    .cherry-text-btn {
+      color: var(--text-color);
+    }
+    .cherry-md-btn {
+      color: var(--hover-text-color);
+    }
+  }
+  &[data-type='md'] {
+    .cherry-md-btn {
+      color: var(--text-color);
+    }
+    .cherry-text-btn {
+      color: var(--hover-text-color);
+    }
+    .switch-btn--bg {
+      left: 50%;
+    }
+  }
+}