在react里引入

class ClipperFullPagePreiview extends React.Component<ClipperFullPagePreiviewProps> {


    onDataChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
        const { value } = e.target;
        this.props.data.setFullPage(value);
    }

    componentDidMount = () => {
        console.log(document.querySelector('#myyyyy'));
        let myTextarea = document.getElementById('myyyyy') as HTMLTextAreaElement;
        HyperMD.fromTextArea(myTextarea, {
            /* 在此添加其他编辑器选项 */
            hmdModeLoader: false, // 见下面的备注
        });
    }
    render() {
        return (
            <div className={styles.preview}>
                <div className={styles.previewContent}>
                    <textarea id="myyyyy"></textarea>
                </div>
            </div>
        );
    }
}

webpack

{
                exclude: /node_modules/,
                test: [/\.scss$/, /\.css$/],
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'typings-for-css-modules-loader',
                        options: {
                            modules: true,
                            namedExport: true,
                            camelCase: true,
                            localIdentName: '[path][name]__[local]--[hash:base64:5]'
                        }
                    },

                    {
                        loader: 'sass-loader'
                    }
                ]
            }

First of all, thank 圆伞科技 for sponsoring HyperMD! I have some plan to make HyperMD much better:

Markdown AST

• Parse content and get AST (via CodeMirror Mode? or other libs like marked ?)
• AST APIs for HyperMD users
  • Read
  • Write
• Use AST to improve hide-token, shortkeys' performance and user experience, also for #43

Separated Packges

• Separate PowerPacks into NPM Packages.
• A toolchain (or project boilerplate), for the separated npm packages.

Style / Theme

• By default, hide line numbers, or make them less eye-catching
  • Move [Go back] button of addon/click to somewhere else.
• Rewrite the theme .scss, make it more configurable (eg. dark mode?)
  • Add more color schemes.
  • Add themes for wide screens ( eg. #28 )
• Find a better way to deal with external resources. (web fonts and icon images)
• Remove all require("xxx.css") from source, so that we can make HyperMD less opinioned?

Marketing

• Better doc and README
• SEO? some articles? no idea yet.

UX Improving

• hide-token shall
  • NOT hide tokens that are inside a selection.
  • NOT hide link address while editing an image/link.

However, for now, I'm too busy to maintain HyperMD. The plan also need further discussion. Feel free to leave comments. I think this can start in late October.

I think this will be a very good change for paste-image.

我在代码里只找到一个sm.ms写死的ajaxupload路径，不能配置吗？

If I use CM's placeholder addon to display a placeholder inside HyperMD, it appears as raw Markdown, like "# This title rocks!". However, it would be nicer to have HyperMD render it.

Can we support rendering placeholder as well?

Thanks!

或者提供一个展示写出的markdown的模式
否则恐怕因为一些歧义导致写的时候和看的时候效果有差异

Error:

<path>/node_modules/hypermd/powerpack/paste-with-turndown.d.ts
(1,22): File '<path>/node_modules/hypermd/src/powerpack/typings/turndown.d.ts' not found.

This is because the paste-with-turndown.d.ts file is referencing a file not included in the npm package:

/// <reference path="../src/powerpack/typings/turndown.d.ts" />

I'm hoping these issues will turn more into PR's as I become familiar with HyperMD, but I've found another weird bug that I'm not sure what the cause is:

It is ok to upload image via drag but when i Upload Images and files via clipboard, it don't work. And I got

Spaces near highlighted elements (bold, italic, code, strikethrough, etc.) are missing when pasting with the turndown plugin enabled. I've confirmed that this is not a bug with Turndown by pasting the same html into their example

See reproduction below:

When using the following markdown:

You can combine them

the folding is incorrect.

It displays this:

• 🏠 HyperMD Core
• ⚡️ HyperMD mode
• 🔌 Addons
  • InsertFile
  • Click
  • CursorDebounce
  • FoldMath
  • Fold
  • HideToken
  • Hover
  • ModeLoader
  • Paste
  • ReadLink
  • TableAlign
• ⚙️ Bundler config (with rollup.js)
• 📑 Interfaces Declaration
• 🙃 Deal with the poorly-typed @types/codemirror
• 📘 Documentation
  • CONTRIBUTING.md
  • Doc generator with TypeScript
• 📦 Pack-up script
• 🚢 First Release! Publish to npm

Hi
I'm trying to use the Katex math renderer in my HyperMD editor, but I must be missing something.

I've imported the powerpack:

import * as katex from 'hypermd/powerpack/fold-math-with-katex';

and I'm instantiating my editor as follows:

          var editor = hyp.fromTextArea(el, {
            mode: {
              name: "hypermd",
              theme: "hypermd-light"
            },
            foldGutter: false,
            lineNumbers: false,
            hmdFold: {
              image: false,
              link: false,
              math: true
            },
            hmdHideToken: true,
            hmdCursorDebounce: true,
            hmdClick: true,
            hmdHover: true,
            hmdModeLoader: false
          });

If I then type

$\Gamma^2 = \Alpha^2+\Beta^2$

in my editor, I get the uppercase Gamma, but neither of the uppercase Alpha nor Beta.

How do I force the editor to use Katex rather than the default math renderer?

Thanks
Tony

Thanks for making this awesome markdown editor! Heads down the best I've seen so far, and I've seen 30+.

Do you have plans to add it to npm so that we can install it through jsdelivr's CDN? That would make it faster to load from different parts of the world and speed up adoption.

for example:
https://www.jsdelivr.com/?query=hypermd

感觉这东西需要多语言文档呀！

There is a minor issue I observed with your demo page, HyperMD

Steps to reproduce

Environment: Chrome 71.0.3578.80 (Win64)

1. Open the demo page
2. Click "Normal" mode
3. Click "HyperMD" mode
4. The sections beneath "特别感谢" failing to render

Screenshot

I really like the new mode where the bold, etc markers (the star * symbols) appear without offsetting the text.
Here's a suggestion of how to do similar improvement for headings: add whitespace to the left, then paint the "##" symbols there (perhaps a hack with codemirror's renderline() or something else?)

What do you think?

当然，我是指编辑的时候自动加入空格。不知道是否有什么代码是可以实现的。

For instance, on here (and also in commonmark)

This:

[hi] [hello]

[hi]: http://google.com 

Renders as

hi [hello]

[hello] is not substituted because no link is provided. This is helpful when you're just using [...] in text without using links

But in HyperMD everything in [...] is treated as linked text. e.g

Hi. This is how the following markdown code renders (and it renders the same in commonmark as well, afaik)

- > What about blockquotes?
   
   > What about them here?
  
  A comment about the quote
  

• What about blockquotes?

  What about them here?

  A comment about the quote

But on HyperMD, the quote doesn't render properly. It renders like the following:

I think gmail looks nicer because it shows preview of the file while uploading.
Would be good if HyperMD also does something similar:

1. Copy-paste image, during uploading see "frosted image" like this:
   

2. After upload the unfrosted image shows up:
   

This will eliminate the need for the extra upload URL and also for blinking.

https://demo.laobubu.net/ 的 ```javascript 没有被正常识别好像。

I have found that some Github Flavored Mode (GFW) features are not supported:

1. Automatic linking for URLs;
2. SHA references;
3. Some emoji's are not displayed.

Are these known issues?

I've found a scenario where Ctrl+A does not cover all the text. See below :
Here is a text without any style. Ctrl+A renders well.

After adding a first style to the text (**), Ctrl+A does not cover the first line anymore.

However, Ctrl+A considered the whole text anyway. E.g.: If I want to delete the whole text here is the result:

So it seems to "just" be a display bug.

I notice this behavior of HyperMD:

When a document's first line is something like this #Some Title, and the page is first loaded, that line is first rendered as Markdown, then "collapses" into plain text. That is, the line is not rendered as Markdown, instead, it appears as plain "#Some Title".

This creates a flicker on the first load, which might not be the smoothest UX possible.

Actually this is reproducible on the official demo: simply navigate to that page, and you will notice that the first "#HyperMD" line is collapsed, right after the page is loaded.

Is there a way to disable this behavior, so that everything is rendered on the first load?

Thank you!

Reproduced in the basic example:

Hi guys,

Thank you for this awesome project.

As I was saying in #21 I cannot get HyperMD (the typescript version) to work with react-codemirror.

I made a really simple test case to investigate but I couldn't find the issue.

Demo:
https://github.com/cgestes/react-hypermd-demo

Any idea how I can find what is wrong with this demo?

期待支持表格的版本

像Bear里面这种：

h1标题

与h1标题不同之处是'#'与文字之间没有空格，例如：

#标签

就形成了一个标签，是否可以增加这个插件？fold-tags？
这个标签最好可以扩展事件，例如点击标签后的事件可以自定义。
我对typescript不熟，文档里也没有写应该怎样开发插件。

See demo below:

I would be interested in contributing. Not sure where to start with this though.

我按照快速开始中的代码：

var HyperMD = require("hypermd")
// hypermd 模块会引入 codemirror 和一堆 css 文件

// 如果需要为特殊元素添加语法高亮，请载入对应的模式
require("codemirror/mode/htmlmixed/htmlmixed") // Markdown 内嵌HTML
require("codemirror/mode/stex/stex") // TeX 数学公式
require("codemirror/mode/yaml/yaml") // Front Matter

// 如果需要用第三方库增强 HyperMD 功能，请载入所需的 PowerPacks
require("hypermd/powerpack/fold-math-with-katex") // 将会自动引入 "katex"
require("hypermd/powerpack/hover-with-marked") // 将会自动引入 "marked"
// 你还可以再此添加其他 power packs...
// Power packs 需要第三方库，别忘记安装它们！

var myTextarea = document.getElementById("myTextarea")
var cm = HyperMD.fromTextArea(myTextarea, {
  /* 在此添加其他编辑器选项 */
  hmdModeLoader: false, // 见下面的备注
})

发现html的表格不能渲染：

错误的渲染：

正确的渲染：

In fold.js supports Ctrl+click to open links, and "break mark" for images.

// current behavior: around line 214 in fold.js:
    img.addEventListener("click", function (ev) {
      if (ev.ctrlKey || ev.altKey) {
        window.open(url, "_blank")
        ev.preventDefault()
        return
      }
      breakMark(cm, marker, 1)
      cm.focus()
    }, false)

With small extension in fold.js, it will make it possible to support thumbnail scenarios.
For example I'm looking to support this:

1. Person drag-drops BigFile.jpg into code editor
2. Using the new insert-file.ts addon we discussed, I create BigFile__thumb__.jpg and BigFile.jpg
   I upload both files to server, but in markdown show:
3. Person clicks on bigfile__thumb__.jpg's image in HyperMD --> the editor opens full resolution BigFile.jpg
   If person uses Ctrl+click, we show the text.

To have universal solution, perhaps we add the option to have click handled in options like this?

const cm = CodeMirror(myDiv, {
...
   hmdFold: {
      click: (type: "link" | "image", url: string, ev: KeyboardEvent): boolean
   }

click() handler will return true if it handles the event, and no further processing is needed
click() handler returns false to show codemirror test (the "breakMark(...)" code will execute)

Example click handler:

function click(type: "link" | "image", url: string, ev: KeyboardEvent): boolean {
    if (ev.ctrlKey || ev.altKey) {
        return false; // let editor handle, will show markdown text
    }

    if (type === "image") {
        url = url.replace("__thumb__", ""); // switch to full size image
    }

    // open link or full image in new tab
    window.open(url, "_tab");
    ev.preventDefault();
    return true;
}

To reproduce:

1. Use HyperMD per documentation except set hmdPasteImage to false or remove it altogether. See sample source code below at this line:

            hmdPasteImage: false, // **----> set to true to remove error**

Expected:
Loads OK

Actual:
Error on load
Uncaught TypeError: Cannot create property 'enabled' on boolean 'false'
at Object.hmdPasteImage (paste-image.js:233)
at new CodeMirror$1 (codemirror.js:7826)
at CodeMirror$1 (codemirror.js:7771)
at hypermdtest.html:64

Note: I have two editors side-by-side, I want to allow pasting images in one, but disallow in the other. However, when I disallow pasting, I'm seeing the issue above.

Sample HTML to see the issue

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HyperMD Test</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/addon/fold/foldgutter.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/addon/dialog/dialog.css">


    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/addon/fold/foldgutter.min.css">
    <link rel="stylesheet" href="https://demo.laobubu.net/hypermd/theme/hypermd-light.css">
    <link rel="stylesheet" href="https://demo.laobubu.net/hypermd/mode/hypermd.css">


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/addon/mode/simple.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/addon/search/searchcursor.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/addon/dialog/dialog.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/addon/fold/foldcode.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/addon/fold/foldgutter.js"></script>


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/addon/fold/markdown-fold.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/addon/mode/overlay.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/addon/edit/continuelist.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/mode/meta.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/mode/xml/xml.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/mode/markdown/markdown.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/mode/gfm/gfm.min.js"></script>

    <script src="https://demo.laobubu.net/hypermd/mode/hypermd.js"></script>
    <script src="https://demo.laobubu.net/hypermd//addon/hide-token.js"></script>
    <script src="https://demo.laobubu.net/hypermd//addon/cursor-debounce.js"></script>
    <script src="https://demo.laobubu.net/hypermd//addon/fold.js"></script>
    <script src="https://demo.laobubu.net/hypermd//addon/readlink.js"></script>
    <script src="https://demo.laobubu.net/hypermd//addon/click.js"></script>
    <script src="https://demo.laobubu.net/hypermd//addon/hover.js"></script>
    <script src="https://demo.laobubu.net/hypermd//addon/paste.js"></script>
    <script src="https://demo.laobubu.net/hypermd//addon/paste-image.js"></script>
    <script src="https://demo.laobubu.net/hypermd//addon/mode-loader.js"></script>
    <script src="https://demo.laobubu.net/hypermd/hypermd.js"></script>

    <style>
        .test {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <div class="test" id="panelNotes"></div>

    <script>
        var panelNotes = document.getElementById("panelNotes");
        panelNotes.innerHTML = "";
        var editor = CodeMirror(panelNotes, {
            lineNumbers: false,
            lineWrapping: true,
            showCursorWhenSelecting: true,
            cursorHeight: 0.95,
            theme: "hypermd-light",
            mode: "text/x-hypermd",
            tabSize: 4,
            foldGutter: true,
            gutters: [
                "CodeMirror-linenumbers",
                "CodeMirror-foldgutter",
                "HyperMD-goback"
            ],
            extraKeys: {
                "Ctrl-Q": function (cm) { cm.foldCode(cm.getCursor()); },
                "Ctrl-.": "findNext",
                "Ctrl-,": "findPrev",
                "Esc": "clearSearch",
                "Enter": "newlineAndIndentContinueMarkdownList"
            },
            hmdHideToken: "(profile-1)",
            hmdCursorDebounce: true,
            hmdAutoFold: 200,
            // (addon) paste
            // copy and paste HTML content
            hmdPaste: true,
            // (addon) paste-image
            // copy, paste and upload image
            hmdPasteImage: false, // **----> set to true to remove error**
        });
        editor.hmdHoverInit()       // tooltips on footnotes
        editor.hmdClickInit(); // open link, toggle todo item etc.
    </script>
</body>

</html>

表格里面渲染代码块是会有错位的,以及在表格里面的代码块无法换行，表格里面使用单 ` 符号代码块是没问题的，表格里面好像无法渲染列表,除此之外，这个编辑器简直完美，所写即所见

你提供的文档中的快速开始案例：http://laobubu.net/HyperMD/?directOpen#./docs/zh-CN/index.md
我使用的用parcel打包的方法，运行效果：

查看网页源代码：

<!DOCTYPE HTML>
<html>
  <head>
    <title>绝赞编辑器</title>
  <link rel="stylesheet" href="/web-editor.60694ee1.css"></head>
  <body>
    <textarea id="myTextarea" height="1000px"># Hello World</textarea>

    <script src="/web-editor.60694ee1.js"></script>
  </body>
</html>

点击链接查看 /web-editor.60694ee1.css 发现文件开头：

/* BASICS */

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 300px;
  color: black;
  direction: ltr;
}

这个高度300px应该不合理吧？你能在云端改下这个css文件吗？
或者请问我在本地可以通过什么方法改变文本框高度吗？（我刚刚入门，不是很懂）

webpack.config.js

const path = require('path');
module.exports = {
  entry: './index.js',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.(woff|woff2|eot|ttf)$/i,
        loader: "file-loader?name=./static/fonts/[name]-[hash].[ext]"
       },
       {
          test: /\.(png|jpg|gif)$/,
          loader: 'url-loader?limit=8192&name=./static/img/[hash].[ext]',
        }
    ]
  },
  output: {
      path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

index.js

var HyperMD = require("hypermd")
require("codemirror/mode/htmlmixed/htmlmixed") // Markdown 内嵌HTML
require("codemirror/mode/stex/stex") 
require("codemirror/mode/yaml/yaml")
require("hypermd/powerpack/fold-math-with-katex") 
require("hypermd/powerpack/hover-with-marked") 
var myTextarea = document.getElementById("myTextarea")
var cm = HyperMD.fromTextArea(myTextarea, {
  hmdModeLoader: false,
})

打包后访问页面控制台报错Uncaught Error: Cannot find module 'codemirror'

I tried on https://laobubu.net/HyperMD/#./docs/zh-CN/README.md with the following text:

# 1

1.1
------

## 1.2

The result is:

Great project! I've been looking for something like this to fork for a while ;-) Any chance you'll add multi-caret editing? This is one of the main functionalities I miss in most MD editors.

I read codemirror's manual and hopefully it would be working on hyperMD since it work side by side with codemirror

code snippet from docs with lineNumber option (added)

var cm = HyperMD.fromTextArea(myTextarea, {
  /* ...other editor options */

  mode: {
    name: "hypermd",
    lineNumbers: false,
    hashtag: true, // example. enable hashtag
  }
})

It seems not working.

First, thank you for such an innovative library.

Currently, the markdown support is amazing, and for those of us that know markdown syntax well, this library works really well. However, for those not familiar with markdown, they may feel lost.

A toolbar can be as simple as the toolbar in Github, or something like Notion.io where you type in the @ symbol to reveal a list of options to add, although the list of options doesn't work that great with marking up existing text.

Just moving the discussion here from the closed PR.

I make a simple working insert-file.ts addon, as we discussed above. Here it is: https://gist.github.com/nokola/f11f91b15ee4acdd17588334e1b57f78

I won't have time to extend it yet, because I have to work on other parts of my project (the actual file upload...)

I think it's best that it's part of HyperMD, but I wanted the addon today to continue with my project, so I made this quick/simple one.

I'm not sure the best way to interact with CodeMirror, perhaps you have a better idea.
Please feel free to use as you wish/copy/etc. or just use the .js output!

作者有兴趣加上吗？

我知道HyperMD有个getValue()方法可以获取到Markdown内容，那请问如何获取到markdown渲染后的HTML内容呢？

按照你github上面的demo页面代码拷贝到本地，控制器也没有报错，还是没有跑起来

2e4cffe

Unfortunately, I'm not sure where it is causing this problem.

Do you need a refactoring to TypeScript?

Seems you are a TypeScript user too, I'm willing to PR if you need it.

Steps to reproduce:

1. Open https://laobubu.net/HyperMD/
2. Paste:

# Test folding indent
1. Ensure test cert in player settings is not expired. Create new one if needed

3. Fold top heading

Expected:
All OK

Actual:
heading is folded but also offsets incorrectly