pd4d10 / hashmd

Hackable Markdown Editor and Viewer

HashMD

Working in progress, see v2 roadmap

License

MIT

hashmd's Issues

Please include index.scss in npm package

I use Sass imports to import styles from npm packages, e.g.:

<style lang="scss" global>
@import "bytemd/dist/index.min";

.bytemd {
  border: none;
}
.bytemd-editor {
  .CodeMirror {
    background: transparent;
    padding: 0;
    font-size: 17px;
  }
  .CodeMirror-cursor {
    border-width: 2px;
    border-color: #2DBDEC;
    height: 25px !important;
  }
}
</style>

My rollup config contains:

import { scss, globalStyle } from 'svelte-preprocess';

// snip

      svelte({
        generate: 'dom',
        hydratable: true,
        // enable run-time checks when not in production
        dev: !production,
        css: css => {
          css.write('css/app.css');
        },
        preprocess: [
          scss(),
          globalStyle()
        ],
      }),

// snip

For some reason, Svelte keeps complaining that it can't find the file. I've tried using "bytemd/dist/index.min", "bytemd/dist/index.min.css", "bytemd/dist/index.css" to no avail.

It'd be great if you could include the Sass in the npm package dist/ directory as well as the CSS, as this would solve my problem (node-sass / svelte-preprocess has no trouble importing .sass files).

EDIT: It's actually due to this issue, but through testing I found that importing the bytemd .scss file directly still wouldn't work because it itself imports .css files. I'm just gonna find another solution for the time-being and hope that this bug is fixed in svelte-preprocess eventually.

EDIT: Ok, I resolved this issue in my codebase by using atImport():

// rollup.config.js
import sveltePreprocess from 'svelte-preprocess';
import atImport from 'postcss-import';

// snip

        preprocess: sveltePreprocess({
          sourceMap: !production,
          defaults: {
            style: 'scss'
          },
          sass: {
            includePaths: ['src'],
          },
          postcss: {
            plugins: [atImport({path: ['src/styles']})],
          },
        }),

// snip

Built-in dark mode

generated structure(toc) with code in heading

### `go run`
## `go run`
# `go run`

上传图片的插件是哪个？具体怎么用？

想给上传图片增加后端接口，有相关自定义文档吗？

firebox MacOS TypeError: entries[0].borderBoxSize[0] is undefined

Upload file plugin

bytemd needs an upload file plugin.

TOC: handle nested text in heading

# *nested* text

How to get catalog

Any get catalog api had been exported? I saw catelog in editor toolbar, but how can I get catalog without editor? Just like in a post detail page.

My html string get by getProcessor api, it imported from bytemd, so I want to ask that did you exported get catelog api like getProcessor.

Thanks.

Mermaid rendering problems

[Error] 复制黏贴 Copy and Paste

https://bytemd.netlify.app/

How to reproduce

select any text and copy or use the existed pasteboard content, paste anywhere, additional space appears

Screen.Recording.2021-03-10.at.7.41.06.PM_1615376478379820.mp4

Problem found in Juejin.

new feature: codepen

what if adding a codepen to bytemd, with special html element tag or --- tag?

no need for executing the code, but just for tab-like and foldable layout...

Multiple bytemd invocations on page confuse mermaid plugin.

Hello,

I have a CMS engine, that lists posts with bytemd and mermaid plugin.

Bytemd uses div with a fixed id bytemd-mermaid-${i} where i is the ordinal of mermaid within that bytemd block.

The problem is when there are multiple bytemd-based posts on the same html page they are given the same (conflicting) sequence of div ids. which causes the rendering of mermaid drawings to be badly broken.

My initial fix was to add randomizatoin to that div id as follows bytemd-mermaid-${Math.floor(Math.random()*1000)}-${i}

The problem was solved for me this way; but not sure if this is the best solution; if so would you please consider as a fix and accept the change?

Thanks.

只使用Viewer模块能展示导航菜单吗

源码里是用了dynamic import ?

发现打包出来的时候多了一份chunk文件

Who's using ByteMD?

It is appreciated to drop your company name/logo, website or any repos using ByteMD here.

[Help wanted] Improve translations

We use Weblate to do i18n works.

How to contribute

1. Go to Weblate, create an account, then log in
2. Improve current translations or add new translations with the web interface
3. The changes would be automatically committed and submitted via a pull request

Status

<detail> element rendering problem

well it should be a valid element in markdown.. but it seems like rendering the tag in editor is a problem...

and it will stop all the markdown code after it from rendering:

documentation: improve docs and deploy as a website.

• Scaffold the documentation site
• Describe the usages of different FE frameworks
• Describe how to write a plugin
• Full config and API descriptions

Writing plugins

I see "TODO: plugin API not stable yet" under the Writing Plugins section. What's the state regarding third parties being able to plugins?

能让他兼容IE吗 | IE compatiable issue

svelte 编译后的代码貌似稍微处理一下就行了，他没有使用像Vue一样无法转化的语言特性。

Is there a plan to use rightActions as an option here

Is there a plan to use toolbar actions as an option here，eg. fullscreen, help, toc, previewOnly and so on.

Or it's possible to extend actions

Update examples

• Installation and Usage instructions

For some reason it requires @icon-park/svg to be installed. This may be an issue related to the bundle manager.

• Fix Svelte/Sapper examples

They cannot compile, since it seems codebase imports dependencies which are not listed in the package.json...

Maybe any linked lib were used on localhost before code push?

• Provide an updated example with Rollup

1. It will require both JSON and CSS Rollup plugins.

2. As seen in #3:

This may require the introduction of rollup-plugin-node-globals and rollup-plugin-node-builtins to correctly handle some dependent Node.js built-in modules.

Installing rollup-plugin-node-polyfills and calling it as a plugin solves the issue.

掘金有准备支持思维导图吗？

掘金有准备支持思维导图

footnotes anchor click not working in vue and react wrappers

In the nuxt.js, highlight and math do not take effect, what should I do?

In the nuxt.js, highlight and math do not take effect, what should I do?

`

<script> import {Editor, Viewer} from '@bytemd/vue'; import gfm from '@bytemd/plugin-gfm'; import highlight from '@bytemd/plugin-highlight-ssr'; import mermaid from '@bytemd/plugin-mermaid'; import math from '@bytemd/plugin-math-ssr'; import footnotes from '@bytemd/plugin-footnotes'; export default { name: "drafts", components: {Editor}, data() { return { value: '' }; }, computed: { enabledPlugins() { return [ gfm(), highlight(), mermaid(), math(), footnotes() ]; }, }, methods: { handleChange(v) { this.value = v; }, }, }; </script>

`

Multiple editor/viewer instances

Suppose bytemd has to render SO question. There are multiple answers. But Viewer/Editor receive only one prop how would you render this multiple times.

AnyOne is using bytemd in React?

Are there any demo for using bytemd and plugins in React? i have tried it, with some error. who can help me? thank you.

https://codesandbox.io/s/condescending-lake-pes4x?file=/src/App.js

full screen writting (immersive mode)

Unhandled Rejection (TypeError): Cannot read property 'split' of undefined

not work right on antd Form.Item,get the Unhandled Rejection (TypeError): Cannot read property 'split' of undefined error.

gfm 依赖更新了

重新安装包，运行使用viewer会报错

examples/svelte-rollup/package.json does not depend on bytemd?

and even if i npm i bytemd in the directory, i still get Uncaught ReferenceError: bytemd is not defined in browser console.

Error when building project

I'm getting the errors below when I build my project. Everything seems to be working, I'm just wondering if I should be concerned. Svelte.

(!) Circular dependencies
node_modules/mdast-util-to-hast/lib/one.js -> node_modules/mdast-util-to-hast/lib/all.js -> node_modules/mdast-util-to-hast/lib/one.js
node_modules/mdast-util-to-hast/lib/one.js -> node_modules/mdast-util-to-hast/lib/all.js -> /Users/kimaldis/Documents/Dev/PeanutNotes/node_modules/mdast-util-to-hast/lib/one.js?commonjs-proxy -> node_modules/mdast-util-to-hast/lib/one.js
node_modules/hast-util-to-html/lib/one.js -> node_modules/hast-util-to-html/lib/element.js -> node_modules/hast-util-to-html/lib/all.js -> node_modules/hast-util-to-html/lib/one.js
node_modules/hast-util-to-html/lib/one.js -> node_modules/hast-util-to-html/lib/element.js -> node_modules/hast-util-to-html/lib/all.js -> /Users/kimaldis/Documents/Dev/PeanutNotes/node_modules/hast-util-to-html/lib/one.js?commonjs-proxy -> node_modules/hast-util-to-html/lib/one.js
(!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
created public/build/bundle.js in 1.9s

ReferenceError: navigator is not defined

我在Sapper中使用 bytemd ，将之引入组件内，编译时提示以下错误：

xxx\node_modules\codemirror\lib\codemirror.js:18
var userAgent = navigator.userAgent;

ReferenceError: navigator is not defined
at xxx\node_modules\codemirror\lib\codemirror.js:18:19
at userAgent (D:\cloud\frontend\node_modules\codemirror\lib\codemirror.js:11:83)
at Object. (D:\cloud\frontend\node_modules\codemirror\lib\codemirror.js:14:2)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)

项目所使用的依赖CodeMirror无法在SSR环境中运行，故尝试：

onMount(async () => {
const { Editor } = await import("bytemd")
new Editor({
target: document.getElementById("editor")
});
});

亦报错：

Uncaught (in promise) TypeError: Failed to resolve module specifier "path". Relative references must start with either "/", "./", or "../".

相关程序版本：

"rollup": "^1.20.0",
"svelte": "^3.22.0",
"sapper": "^0.27.12",
"bytemd": "0.0.11",

还望解决。

test: improve test coverage

Including Svelte, React, and Vue components.

Feature/Design Guideline: 设计不搭 Design are not following the same guideline

https://bytemd.netlify.app/

Top toolbar's icons are not the same style, and the first three icons should be smaller, eg GitHub Editor is much better:

可以添加针对大量主题和样式的搜索功能和回显功能吗

目前新版功能中添加了主题选择功能，但是由于数量较多，每次使用如果要更换主题都需要向下翻阅大量选项，希望能添加主题的关键字搜索功能和回显当前选中主题的功能

When to support angular?

When to support angular?

Theme 'smartblue' rendering area problem

How to reproduce

code:

---
theme: juejin
---

![color guide.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/59da92dc795d47dabe7b5d40eb496eb9~tplv-k3u1fbpfcp-watermark.image)

for any large image in theme smartblue will have the image rendered outside the wrapper

Svelte Rollup error

I installed Bytemd and when I try to run the example code ( for Svelte) I get a dependency error.
I have not tried to install the dependency yet, but the fact that this is not mentioned in the installation instructions is something that I thought you might like to take note of.

Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
@bytemd/plugin-gfm (imported by src/views/WorkflowEdit.svelte)
[!] Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)
node_modules/hast-util-sanitize/lib/github.json (2:9)
1: {
2:   "strip": [
            ^
3:     "script"
4:   ],
Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)
    at error (/home/wktdev/Desktop/svelte_workflow_magic_v2/app/node_modules/rollup/dist/shared/rollup.js:5265:30)
    at Module.error (/home/wktdev/Desktop/svelte_workflow_magic_v2/app/node_modules/rollup/dist/shared/rollup.js:9835:16)
    at tryParse (/home/wktdev/Desktop/svelte_workflow_magic_v2/app/node_modules/rollup/dist/shared/rollup.js:9716:23)
    at Module.setSource (/home/wktdev/Desktop/svelte_workflow_magic_v2/app/node_modules/rollup/dist/shared/rollup.js:10142:19)
    at ModuleLoader.addModuleSource (/home/wktdev/Desktop/svelte_workflow_magic_v2/app/node_modules/rollup/dist/shared/rollup.js:18312:20)

Okay, I tried to install the plug in and it devolved into a little mess but I eventually fixed it.
I went to install the plug in here:
https://www.npmjs.com/package/@rollup/plugin-json

I had to go to rollup.config and update the file to look like this:
...

export default {
	input: 'src/main.js',
	output: {

		sourcemap: true,
	    dir:"output",
		format: 'cjs',
		name: 'app',
		//file: 'public/build/bundle.js'
	},

	plugins: [
	    json(),
	
           .... ]

Oops, spoke too soon!

The errors are gone but the plug in doesn't actually display/work!

I reverted back to my old rollup.config. I have pasted it below in case you know how to edit it properly.
Thanks!

import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import css from 'rollup-plugin-css-only';

const production = !process.env.ROLLUP_WATCH;

function serve() {
	let server;

	function toExit() {
		if (server) server.kill(0);
	}

	return {
		writeBundle() {
			if (server) return;
			server = require('child_process').spawn('npm', ['run', 'start'], {
				stdio: ['ignore', 'inherit', 'inherit'],
				shell: true
			});

			process.on('SIGTERM', toExit);
			process.on('exit', toExit);
		}
	};
}

export default {
	input: 'src/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/build/bundle.js'
	},
	plugins: [
		svelte({
			compilerOptions: {
				// enable run-time checks when not in production
				dev: !production
			}
		}),
		// we'll extract any component CSS out into
		// a separate file - better for performance
		css({ output: 'bundle.css' }),

		// If you have external dependencies installed from
		// npm, you'll most likely need these plugins. In
		// some cases you'll need additional configuration -
		// consult the documentation for details:
		// https://github.com/rollup/plugins/tree/master/packages/commonjs
		resolve({
			browser: true,
			dedupe: ['svelte']
		}),
		commonjs(),

		// In dev mode, call `npm run start` once
		// the bundle has been generated
		!production && serve(),

		// Watch the `public` directory and refresh the
		// browser on changes when not in production
		!production && livereload('public'),

		// If we're building for production (npm run build
		// instead of npm run dev), minify
		production && terser()
	],
	watch: {
		clearScreen: false
	}
};

[Error] latex

https://juejin.cn/post/6844903862441082894

svelte example fails

I tried running the svelte example and it fails with an error,

Module not found: Error: Can't resolve 'svelte/internal'

Are there any specific build steps? I just ran npm i

Memory leak on Sapper dev (watch mode)

I use this component on sapper, this editor is awesome. But I think there is something wrong.

1. When I start Sapper on dev mode sapper dev, first this warning occure #41. Program still working like normal.
2. Then when I make some change to svelte component and Sapper doing the hot reload, my application is break due to high memory usage

<--- Last few GCs --->

[24940:0x1045f1000]   371975 ms: Mark-sweep 2039.0 (2051.8) -> 2038.8 (2052.3) MB, 2066.6 / 0.0 ms  (average mu = 0.116, current mu = 0.011) allocation failure scavenge might not succeed
[24940:0x1045f1000]   374597 ms: Mark-sweep 2039.4 (2052.3) -> 2039.2 (2052.5) MB, 2610.9 / 0.0 ms  (average mu = 0.056, current mu = 0.004) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x10123d2a5 node::Abort() (.cold.1) [/Users/axmad386/.nvm/versions/node/v14.4.0/bin/node]
 2: 0x10009dd29 node::Abort() [/Users/axmad386/.nvm/versions/node/v14.4.0/bin/node]
 3: 0x10009de8f node::OnFatalError(char const*, char const*) [/Users/axmad386/.nvm/versions/node/v14.4.0/bin/node]
 4: 0x1001d9db7 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/Users/axmad386/.nvm/versions/node/v14.4.0/bin/node]
 5: 0x1001d9d57 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/axmad386/.nvm/versions/node/v14.4.0/bin/node]
 6: 0x10036c885 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/Users/axmad386/.nvm/versions/node/v14.4.0/bin/node]
 7: 0x10036e11a v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/Users/axmad386/.nvm/versions/node/v14.4.0/bin/node]
 8: 0x10036a075 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/Users/axmad386/.nvm/versions/node/v14.4.0/bin/node]
 9: 0x100367afe v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/axmad386/.nvm/versions/node/v14.4.0/bin/node]
10: 0x100374e3a v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/axmad386/.nvm/versions/node/v14.4.0/bin/node]
11: 0x100374ec1 v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/axmad386/.nvm/versions/node/v14.4.0/bin/node]
12: 0x1003412a7 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/Users/axmad386/.nvm/versions/node/v14.4.0/bin/node]
13: 0x1006a7be8 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/Users/axmad386/.nvm/versions/node/v14.4.0/bin/node]
14: 0x1009f3899 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/Users/axmad386/.nvm/versions/node/v14.4.0/bin/node]
error Command failed with signal "SIGABRT".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

PS: node is still running on port 3000 (sapper default port), and I must force kill that port to re run my sapper application 😢

可以有上传图片和自定义添加导航栏选项的功能吗？

Where can I find the source code of https://bytedance.github.io/bytemd/?

Where can I find the source code of https://bytedance.github.io/bytemd/?

markdown parsing problem

see attachment

it should not be highlighted for the rest of the code in the editor, just like the rendering area on the right side

well in github:

首先，先在我们的编辑器中输入 **```mermaid**，然后敲一下回车键，在包含的代码段中输入 Mermaid 代码就可以使用 Mermaid > 啦～

首先，先在我们的编辑器中输入 ```mermaid，然后敲一下回车键，在包含的代码段中输入 Mermaid 代码就可以使用 Mermaid 啦～

it works well~

please move lodash-es to dependencies (from devDependencies)

lodash-es is listed in devDependencies in package.json

but is used in editor.svelte

this causes failure in projects not using lodash-es

Scroll sync improvement

Currently, the scroll sync feature is based on the scroll position of the total body. It is on the condition that each block has the same ratio (rendered height / content height), which is not always true in the actual cases.

It is better to do it based on the scroll position of blocks.

rendering on iPadOS

When trying out this component on my iPad (12.9", landscape mode), the top row doesn't show up properly.

[Error] 图像的复制黏贴 Image Copy and Paste

https://bytemd.netlify.app/

![image.png](https://picsum.photos/300)

## GFM Extended Syntax

Automatic URL Linking: https:

Pasteboard content: image content

select ](https://picsum.photos/300) and use the keyboard shortcut cmd+v or ctrl+v or click edit>paste, result in:

![image.png

![image.png](https://picsum.photos/300)
## GFM Extended Syntax

Automatic URL Linking: https:

Screen.Recording.2021-03-10.at.7.48.05.PM_1615377450372954.mp4

Scroll sync position NaN causes blank screen