laobubu / hypermd Goto Github PK

View Code? Open in Web Editor NEW

1.5K 32.0 133.0 1.11 MB

A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.

License: MIT License

JavaScript 6.72% CSS 6.93% HTML 2.55% TypeScript 83.81%

markdown codemirror markdown-editor wysiwyg typescript editor

hypermd's People

Contributors

Stargazers

Watchers

Forkers

satouriko luzhaung seekwe ahnan4arch fuermosi777 williamyf ytoh coast-team anyyang restmad hbuexinxin renhuailin anmige kindy djp518 wozzup cncuckoo yedeapp nokola cgestes zen9073 ltriks zooyoo fengweijp hguomin laiweiwei 0ps michalczaplinski michaelgmcd dylanleung sten-h thetrevoradams tedeum my-markdown chaiphol changsongyang linanxi zhennanwu codesanook haxine equalma zyeoman stanwmusic res876ttb coreparadox productinfo maria-go github-pan klavinski my-mdeditor-learning lobj northseeberg jianjianxiaole tennisbearcrazy jianghan0 gandalf2014 jieerliansan lookbackintherain banben 0xgg fwfx1234 kschroder49 ludvikwoo fallowu openyeap r-nmt000 alexey-kanashevich nonomal geekhuyang jiangge ethernal hedaai fastee wmet lotharthesavior egoist-bot zhangxixi0904 resources-zhangyw taeyeson nudjur ggice higoribeiro ryooo sound1ab wheesys laydone asetz dreambuildor fairread kingavatar qintang roterob noteplan lingyi-j zaxtax acorisoft isahamawan amirhosseindavoody salvage0707 malmz

hypermd's Issues

How do I use the Katex math renderer?

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

hiding lineNumbers on editor not working

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.

demo 没有跑起来

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

如果获取到渲染后的HTML内容

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

HyperMD + react-codemirror

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?

paste-image plugin throws exception if hmdPasteImage is not used or false

To reproduce:

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>

Module parse failed: Unexpected character '@'

在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'
                    }
                ]
            }

多语言帮助文档

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

能否配套一个markdown的渲染工具

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

Support Markdown rendering on placeholder.

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!

A UI glitch?

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!

Bold followed by a hyphen on the next line becomes a header

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:

Refactor to TypeScript

Do you need a refactoring to TypeScript?

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

想问一下，有办法能在MD编辑界面输入的时候自动实现中英混排自动加入空格么。

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

Don't render text in [...] as links unless a link is provided

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

根据文档使用webpack打包报错

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'

GFM partially supported?

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

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

Are these known issues?

能支持到Google Keep上吗

Extensible Toolbar

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.

Addon: insert-file with support for drag-drop, paste

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!

Folding issue

When using the following markdown:

You can combine them

the folding is incorrect.

It displays this:

表格渲染的问题

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

Demo page failing to render

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

Steps to reproduce

Environment: Chrome 71.0.3578.80 (Win64)

Open the demo page
Click "Normal" mode
Click "HyperMD" mode
The sections beneath "特别感谢" failing to render

Screenshot

Suggestion: have ability to render heading (h1, h2, ...) in gutter to avoid offsetting them

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?

Indenting multiple items in a list doesn't work if indentation is different

Reproduced in the basic example:

Markdown AST, Improve UX and refactor ?

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.

File not found error when using the "Pasting with Turndown" powerpack with TypeScript

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" />

表示期待🌝

Refactor to TypeScript, Documentation, NPM and More

Bug: Blockquote as first item of the list not rendered properly

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:

Add #hashtag syntax & clicking event support, like Bear the app

像Bear里面这种：

h1标题

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

#标签

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

1. 能支持表格吗，markdown的表格一直不好用，不所见即所得 2. 可以弄成tinymce的插件吗

Feature: Allow drag-drop any file (.zip, .txt, .apk) not just image

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

Safari cashed because of this commit: 2e4cffec20f46a7adb54cf8fff69fd2d6928a437

2e4cffe

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

can‘t upload Images and files via clipboard

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

Line is not highlighted with Shift+Up if it ends with bold text

See demo below:

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

Suggestion: Attach files with "frosted" preview similar to gmail

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

Copy-paste image, during uploading see "frosted image" like this:
After upload the unfrosted image shows up:

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

Spaces missing in Paste with Turndown powerpack

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:

Indentation broken when folding heading followed by list

Steps to reproduce:

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

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

Fold top heading

Expected:
All OK

Actual:
heading is folded but also offsets incorrectly

我觉得 eslint 是个好东西

作者有兴趣加上吗？

怎么自定义图片上传url啊，我想上传到自己的服务器

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

fold addon: be able to do custom action on click

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:

Person drag-drops BigFile.jpg into code editor
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:
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;
}

讲真，这个要是支持表格的话那就真的太完美了

期待支持表格的版本

code block好像失效了。

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

Submit HyperMD to npm to enable fast references through CDNs

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

Sometimes Ctrl+A shortcut does not cover all the text

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.

[BUG] underline style header does not appear in TOC

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

# 1

1.1
------

## 1.2

The result is:

快速开始案例中使用打包器的方法中引用的你的css文件的高度固定为300px

你提供的文档中的快速开始案例：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文件吗？
或者请问我在本地可以通过什么方法改变文本框高度吗？（我刚刚入门，不是很懂）

Multi-caret (like in modern IDEs)

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.