Working in progress, see v2 roadmap
MIT
Hackable Markdown Editor and Viewer (WIP)
License: MIT License
Working in progress, see v2 roadmap
MIT
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
掘金有准备支持思维导图
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.
Where can I find the source code of https://bytedance.github.io/bytemd/?
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
bytemd needs an upload file plugin.
For some reason it requires @icon-park/svg
to be installed. This may be an issue related to the bundle manager.
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?
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.
lodash-es is listed in devDependencies in package.json
but is used in editor.svelte
this causes failure in projects not using lodash-es
我在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",
还望解决。
目前新版功能中添加了主题选择功能,但是由于数量较多,每次使用如果要更换主题都需要向下翻阅大量选项,希望能添加主题的关键字搜索功能和回显当前选中主题的功能
I use this component on sapper, this editor is awesome. But I think there is something wrong.
sapper dev
, first this warning occure #41. Program still working like normal.<--- 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 😢
Top toolbar's icons are not the same style, and the first three icons should be smaller, eg GitHub Editor is much better:
Including Svelte, React, and Vue components.
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.
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
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...
It is appreciated to drop your company name/logo, website or any repos using ByteMD here.
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
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.
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~
When to support angular?
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.
# *nested* text
not work right on antd Form.Item,get the Unhandled Rejection (TypeError): Cannot read property 'split' of undefined
error.
svelte 编译后的代码貌似稍微处理一下就行了,他没有使用像Vue一样无法转化的语言特性。
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
}
};
发现打包出来的时候多了一份chunk文件
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
想给上传图片增加后端接口,有相关自定义文档吗?
and even if i npm i bytemd
in the directory, i still get Uncaught ReferenceError: bytemd is not defined
in browser console.
I see "TODO: plugin API not stable yet" under the Writing Plugins section. What's the state regarding third parties being able to plugins?
![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:
In the nuxt.js, highlight and math do not take effect, what should I do?
`
`
select any text and copy or use the existed pasteboard content, paste anywhere, additional space appears
Problem found in Juejin.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.