Git Product home page Git Product logo

cherry-markdown's Introduction

cherry logo

Cherry Markdown Writer

Wiki here

Cloud Studio Template

English | 简体中文

Introduction

Cherry Markdown Editor is a Javascript Markdown editor. It has the advantages such as out-of-the-box, lightweight and easy to extend. It can run in browser or server(with NodeJs).

Out-of-the-box

Developer can call and instantiate Cherry Markdown Editor in a very simple way. The instantiated Cherry Markdown Editor supports most commonly used markdown syntax (such as title, TOC, flowchart, formula, etc.) by default.

Easy to extend

When the syntax that Cherry Markdown editor support can not meet your needs, secondary development or function extention can be carried out quickly. At the same time, Cherry Markdown editor should be implemented by pure JavaScript, and should not rely on framework technology such as angular, vue and react. Framework only provide a container environment.

Feature

Syntax Feature

  1. Image zoom, alignment and reference
  2. Generate a chart based on the content of the table
  3. Adjust font color and size
  4. Font background color, superscript and subscript
  5. Insert checklist
  6. Insert audio or video

Multiple modes

  1. Live preview with Scroll Sync
  2. Preview-only mode
  3. No toolbar mode (minimalist editing mode)
  4. Mobile preview mode

Functional Feature

  1. Copy from rich text and paste as markdown text
  2. Classic line feed & regular line feed
  3. Multi-cursor editing
  4. Image size editing
  5. Export as image or pdf
  6. Float toolbar: appears at the beginning of a new line
  7. Bubble toolbar: appears when text is selected

Performance Feature

  1. partial rendering
  2. partial update

Security

Cherry Markdown has a built-in security Hook, by filtering the whitelist and DomPurify to do scan filter.

Style theme

Cherry Markdown has a variety of style themes to choose from.

Features show

click here for more details

Demos

Install

Via yarn

yarn add cherry-markdown

Via npm

npm install cherry-markdown --save

If you need to enable the functions of mermaid drawing and table-to-chart, you need to add mermaid and echarts packages at the same time.

Currently, the plug-in version Cherry recommend is [email protected] [email protected].

# Install mermaid, enable mermaid and drawing function
yarn add [email protected]
# Install echarts, turn on the table-to-chart function
yarn add [email protected]

Quick start

Browser

UMD

<link href="cherry-editor.min.css" />
<div id="markdown-container"></div>
<script src="cherry-editor.min.js"></script>
<script>
  new Cherry({
    id: 'markdown-container',
    value: '# welcome to cherry editor!',
  });
</script>

ESM

import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown';
const cherryInstance = new Cherry({
  id: 'markdown-container',
  value: '# welcome to cherry editor!',
});

Node

const { default: CherryEngine } = require('cherry-markdown/dist/cherry-markdown.engine.core.common');
const cherryEngineInstance = new CherryEngine();
const htmlContent = cherryEngineInstance.makeHtml('# welcome to cherry editor!');

Lite Version

Because the size of the mermaid library is very large, the cherry build product contains a core build package without built-in Mermaid. The core build can be imported in the following ways.

Full mode (With UI Interface)

import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
const cherryInstance = new Cherry({
  id: 'markdown-container',
  value: '# welcome to cherry editor!',
});

Engine Mode (Just Syntax Compile)

// Import Cherry engine core construction
// Engine configuration items are the same as Cherry configuration items, the following document content only introduces the Cherry core package
import CherryEngine from 'cherry-markdown/dist/cherry-markdown.engine.core';
const cherryEngineInstance = new CherryEngine();
const htmlContent = cherryEngineInstance.makeHtml('# welcome to cherry editor!');

// --> <h1>welcome to cherry editor!</h1>

⚠️ About mermaid

The core build package does not contain mermaid dependency, should import related plug-ins manually.

import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
import CherryMermaidPlugin from 'cherry-markdown/dist/addons/cherry-code-block-mermaid-plugin';
import mermaid from 'mermaid';

// Plug-in registration must be done before Cherry is instantiated
Cherry.usePlugin(CherryMermaidPlugin, {
  mermaid, // pass in mermaid object
  // mermaidAPI: mermaid.mermaidAPI, // Can also be passed in mermaid API
  // At the same time, you can configure mermaid's behavior here, please refer to the official mermaid document
  // theme: 'neutral',
  // sequence: { useMaxWidth: false, showSequenceNumbers: true }
});

const cherryInstance = new Cherry({
  id: 'markdown-container',
  value: '# welcome to cherry editor!',
});

Dynamic import

recommend Using Dynamic import, the following is an example of webpack Dynamic import.

import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown/dist/cherry-markdown.core';

const registerPlugin = async () => {
  const [{ default: CherryMermaidPlugin }, mermaid] = await Promise.all([
    import('cherry-markdown/src/addons/cherry-code-block-mermaid-plugin'),
    import('mermaid'),
  ]);
  Cherry.usePlugin(CherryMermaidPlugin, {
    mermaid, // pass in mermaid object
  });
};

registerPlugin().then(() => {
  //  Plug-in registration must be done before Cherry is instantiated
  const cherryInstance = new Cherry({
    id: 'markdown-container',
    value: '# welcome to cherry editor!',
  });
});

Configuration

see /src/Cherry.config.js or click here

Example

Click here for more examples.

Client

Under development, please stay tuned or see /client/

Extension

Customize Syntax

click here

Customize Toolbar

click here

Unit Test

Jest is selected as a unit testing tool for its assertion, asynchronous support and snapshot. Unit test includes CommonMark test and snapshot test.

CommonMark Test

Call yarn run test:commonmark to test the official CommonMark suites. This command runs fast.

Suites are located in test/suites/commonmark.spec.json, for example:

{
  "markdown": " \tfoo\tbaz\t\tbim\n",
  "html": "<pre><code>foo\tbaz\t\tbim\n</code></pre>\n",
  "example": 2,
  "start_line": 363,
  "end_line": 368,
  "section": "Tabs"
},

In this case, Jest will compare the html generated by Cherry.makeHtml(" \tfoo\tbaz\t\tbim\n") with the expected result "<pre><code>foo\tbaz\t \tbim\n</code></pre>\n". Cherry Markdown's matcher has ignored private attributes like data-line.

CommonMark specifications and suites are from: https://spec.commonmark.org/ .

Snapshot Test

Call yarn run test:snapshot to run snapshot test. You can write snapshot suite like test/core/hooks/List.spec.ts. At the first time, a snapshot will be automatically generated. After that, Jest can compare the snapshot with the generated HTML. If you need to regenerate a snapshot, delete the old snapshot under test/core/hooks/__snapshots__ and run this command again.

Snapshot test runs slower. It should only be used to test Hooks that are error-prone and contain Cherry Markdown special syntax.

Contributing

Welcome to join us to build a more powerful Markdown editor. Of course you can submit feature request to us. Please read me before you working on it.

Stargazers over time

Stargazers over time

License

Apache-2.0

cherry-markdown's People

Contributors

bai-xiaoguang avatar cainxcain avatar dependabot[bot] avatar eyebrowkang avatar h4kur31 avatar hanye9895 avatar humyfred avatar interestinglsy avatar jasonwang82 avatar jh244212647 avatar jiawei686 avatar jokerwyt avatar joriewong avatar kaed3mi avatar lllllllqw avatar lyngai avatar lyonbot avatar nenge123 avatar olafyou avatar peoro avatar richardji202 avatar rikukiix avatar rss1102 avatar serializedowen avatar sunsonliu avatar tangzixuan avatar ufec avatar wind416 avatar wuming-fu avatar yxkryptonite avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cherry-markdown's Issues

[Bug report]

Describe the bug
when config.customSyntax is undefined, throw Error:
Uncaught TypeError: Cannot read properties of undefined (reading 'htmlBlock')

Environment (please complete the following information):

  • OS: macOS
  • Browser: Chrome
  • Version: 0.5.15

希望可以支持嵌入块(比如 Draw.io)的能力

比如嵌入 draw.io 等,在文本形式下存储的可以是形如

```drawio
[base64 content]
```

这样的内容

为了避免在输入框里,base64的东西太长太乱,可以使用 CodeMirror 的 markText 方案,将其折叠并替换为一个占位符。点击占位符可以打开弹窗编辑内容

编辑区和效果展示区并非完全对齐

编辑区通常都比效果展示区篇幅短,导致在编辑区编辑时若要同步查看展示效果,有时候滚动操作并非能在水平对齐点查看到匹配的结果,通常展示区要更往下滚动多点,这样体验不是很好,所以cherry markdown能否支持编辑区对应的展示效果区始终与编辑区光标在同一水平线上

npm 包 404 了

error Couldn't find package "cherry-markdown" on the "npm" registry.

标签元素渲染不出来

在表格或者链接描述中,填写的标签元素渲染不出来。

举例1:

image

cherry效果
image

typora效果
image

举例2:

企业微信截图_16390430162413

cherry效果
企业微信截图_16390430227462

typora效果
企业微信截图_16390430347875

some straight line with space code seems not that straight

      ┏---r1----┓                ┏--------r3---------┓     ┏---r5----┓   
      ┃         ┃  ┏--------r2---┃-----┓      ┏---r4----┓  ┃         ┃   
▶─────╋──w██████┃██┃███x─────────╋─y███┃██████┃███z──╋──╋──╋─────────╋──◀
      ┃         ┃  ┃             ┃     ┃      ┃      ┃  ┃  ┃         ┃   
      A---------B  ┃             E------------┃------F  ┃  I---------J   
                   C-------------------D      G---------H                

Screen Shot 2021-11-16 at 8 03 20 PM

Screen Shot 2021-11-16 at 8 03 39 PM

Maybe word-spacing issue?

[Bug report]每一次调用setMarkdown或者setValue,光标都被重置到最前面了,对于封装成v-model形式的vue组件非常不友好

Describe the bug
每一次调用setMarkdown或者setValue,光标都被重置到最前面了,对于封装成v-model形式的vue组件非常不友好
image

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

  • OS: [e.g. Windows/macOS]
  • Browser [e.g. Chrome, Safari]
  • Version [e.g. 0.5.14]

Additional context
Add any other context about the problem here.

Bug report: '*' in unordered list was resolved to Italic mark

【Describe the bug】
'*' in unordered list was resolved to Italic mark,and break the list

【Expected behavior】
Resolve to an unordered list correctly

【To Reproduce】
Enter these content

* 用星号写无序列表,且前一行有星号 * ,后面文字被解析成斜体,且接不上无需列表
* 这是后面一行

【Screenshots】
image

latex代码和代码块冲突

demo

虽然图中的 markdown 语法不正确,但是当我复制代码块中的 latex 代码粘贴后,这个问题就会出现。

6VnhJNnXOc

局部渲染和局部更新相对于 Bytemd 来说在长文本处理时性能确实提升了不少。相对于typora这种所见即所得的编辑器,我还是更喜欢 markdown 代码和渲染分开,感觉能看见 markdown 源代码会有安全感。另外 katex 貌似比 mathjax 在初次渲染时效果会好。另外我在文档中看到某些功能pro 版本可用,请问后续是会收费吗?后面的话我还是挺想用这个替换我博客里用的bytemd的😺

wordpress的古腾堡编辑器很牛逼,建议抄一抄(借鉴)

https://github.com/WordPress/gutenberg

首先恭喜腾讯开源Markdown编辑器

另外,要提一点小建议。
目前看你们的编辑UI,可视化体验。还处于非常原始的阶段,咱们就不必继续挣扎在原始阶段,一步到位。直接借鉴wordpress 古腾堡的编辑体验。

这种所见即所得的体验,也是国内 语雀,飞书,等众多文档平台所采用的方案。极大地帮助人们快速编写文档,体验非常优秀。

[Bug report]工具栏-插入-[图片、视频等]功能失效

Describe the bug
插入-图片失效,没有选择文件的弹框

To Reproduce
Steps to reproduce the behavior:
1.点击工具栏-插入
2.点击图片

Expected behavior
弹出选择文件的弹框

Environment (please complete the following information):

  • OS: [macOS]
  • Browser [Chrome]
  • Version [0.5.16]

Additional context
这里的代码设置input类型的时候有问题,传入的['image', 'video', 'pdf']等是无效值,此时浏览器会将其设置为默认的'text',参考MDN文档所以不会出现选择文件的弹框。0.5.14版本中默认的就是'file',不知为何后来改掉了...另外目前没有限制指定类型的字段,希望加入限制,或添加相应的配置项。

[Bug report] Copy the pasted code will add extra tags

Describe the bug
Brought extra strange style when i pasted pieces of code, this feature is completely unable to use.
To Reproduce
Steps to reproduce the behavior:

  1. Copy code from xcode
    image

  2. Paste into the editor
    image

  3. See error

Expected behavior
It will add the '**' tag what I don't need in my statement.

Screenshots
image

Environment (please complete the following information):

  • OS: macOS
  • Browser Safari
  • Version 15.2

Additional context
Excess markers will appear from copying from Xcode.

[Bug report] 预览区和编辑区交替滚动时,编辑区无法滚动

Describe the bug
预览区和编辑区交替滚动时,编辑区无法滚动,无限回弹

To Reproduce

  1. 进入 demo 页 https://tencent.github.io/cherry-markdown/examples/index.html
  2. 滚动右侧预览区
  3. 惯性滚动持续时,滚动左侧编辑区
  4. 编辑区一直被弹回固定位置

Expected behavior
编辑区能正常滚动

Screenshots
iShot2021-12-09 21 04 23

Environment (please complete the following information):

  • OS: [macOS]
  • Browser [Chrome]
  • Version [0.5.14]

Basic demo weird scroll behaviour after phone mode

After disabling phone mode left edit side becomes unscrollable.

  1. Turn on phone mode
  2. Turn off phone mode
  3. Scroll left side
  4. ???

Browser: Edge Version 95.0.1020.30 (Official build) (64-bit)

llUiopcQh0.mp4

[Bug report]

Describe the bug
在vite下无法使用

To Reproduce
Steps to reproduce the behavior:

  1. npm install cherry-markdown
  2. import Cherry from 'cherry-markdown';

Expected behavior
可以正确import

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

  • OS: [e.g. Windows/macOS]
  • Browser [e.g. Chrome, Safari]
  • Version [e.g. 0.5.14]

Additional context
Add any other context about the problem here.

在React环境下,是如何在弹出框中加载编辑器的?

环境:React+AntDesign

代码

import React, { useEffect } from 'react';
import {  Modal } from 'antd';
import Cherry from 'cherry-markdown/dist/cherry-markdown.core';

useEffect(() => {
    if (visible) {
      const cherryInstance = new Cherry({
        id: 'markdown-container',
        value: '# welcome to cherry editor!',
      });
    }
  }, [visible]);


<Modal
  visible={visible}
  title="markdown"
  destroyOnClose
  maskClosable={false}
  width="80%"
>
  <div id="markdown-container"/>
</Modal>

问题描述:我本意是想在弹窗里面加载markdown编辑器的,但是目前好像是没有识别到Modal弹窗里面的DOM节点,直接在整个页面的根节点上面自动创建了一个ID为markdown-container的DIV容器。

问题:就是想请问,是如何将编辑器加载到弹出框中的目标容器的?

[Feature request] Plantuml support just like mermaid

For most cases, mermaid should be enough, but for some people, they would like to use plantuml

** What does the proposed API look like**
Just like mermaid:

import Cherry from 'cherry-markdown/dist/cherry-markdown.core';

const registerPlugin = async () => {
  const [{ default: CherryPlantumlPlugin }, plantuml] = await Promise.all([
    import('cherry-markdown/src/addons/cherry-code-block-plantuml-plugin'),
    import('plantuml'),
  ]);
  Cherry.usePlugin(CherryPlantumlPlugin, {
    plantuml, // pass in plantuml object
  });
};

registerPlugin().then(() => {
  //  Plug-in registration must be done before Cherry is instantiated
  const cherryInstance = new Cherry({
    id: 'markdown-container',
    value: '# welcome to cherry editor!',
  });
});

[Bug report]打字被输入法遮挡问题

基本信息

发现版本: [0.4.13]

是否稳定复现: [是]

运行环境及版本: [Chrome 96.0.4664.110(正式版本) (x86_64)]

详细描述
用户在使用过程中发现输入法对文字有遮挡
企业微信截图_16412652781590

在cherry官网试了下也存在同样的问题
wecom-temp-94a22c2dfe2d0d590261913f45129bcc

WritePreview

[Bug report] 0xA0 character not recognized as a space in table

Describe the bug
when pasting from another editor, table content not parse when paste form another md editor (contains 0xA0 as space)

To Reproduce
Steps to reproduce the behavior:
0xA0.md

  1. paste text from attachment
  2. no table show in preview

Expected behavior
can show the table in preview

Screenshots
Screen Shot 2022-01-05 at 9 35 10 AM

Environment (please complete the following information):

  • OS: macOS
  • Browser chrome
  • Version Version 96.0.4664.110 (Official Build) (x86_64)

[Bug report]编辑器重复引入MathJax导致控制台报错

Describe the bug
使用src引入MathJax时,多个实例切换时控制台会报错

To Reproduce

  1. 在Vue 2.x环境下使用Cherry封装编辑器组件
const options =  {
  ...
  engine: {
    ...
    syntax: {
      ...
      mathBlock: {
           engine: 'MathJax', // katex或MathJax
           src: './static/mathjax/text-svg.js'
      },
  ...
}
this.cherry = new Cherry(this.options)
  1. 外层页面引用封装的组件
  2. 外层页面切换不同的MD文档

Expected behavior
正常显示,控制台无报错

Screenshots
控制台报错:
控制台报错
多次重复引入:
多次重复引入

Environment (please complete the following information):

  • OS: macOS
  • Browser: Chrome
  • Version:0.5.14

Additional context
感觉像是Engine.js这里在动态加载script的时候没有做是否存在的判断,每次都会加载一遍对应的js文件,然后mathjax抛出了错误...

如果使用externals配置MathJax为window.MathJax同时设置mathBlock的src为空,此时可以自行控制引入js文件,但是插件(cherry配置默认引入的'input/asciimath', '[tex]/noerrors', '[tex]/cancel', '[tex]/color', '[tex]/boldsymbol')不会自动引入,需要手动一个一个去加载,感觉不太友好...

if (!window.MathJax) {
  loadScript(MATH_JAX_LIB).then(() => {
     this.initCherry()
  })
} else {
     this.initCherry()
}

设置externals时未自动加载plugins:
设置externals时未自动加载plugins
设置mathBlock.src时会自动加载同目录下的plugins:
设置mathBlock.src时会自动加载同目录下的plugins

sequenceDiagram 语法高亮支持

经常用Markdown画时序图,关键字有时候还是会写错,复杂的时候语法错了要排查好久。

期望能加强这方面能力

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.