{"analyzedAt":"2022-07-15T02:00:52.639Z","collected":{"metadata":{"name":"promarkdown","scope":"unscoped","version":"0.5.2","description":"A professional grade react markdown editor for programmers and professional tech document writters, based CodeMirror, supporting YAML / TOML /JSON front matters, search, replace, linenumber, and key maps, including Vims, Emacs, and Sublime.","keywords":["Markdown","Editor","Prefessional","Frontmatter","YAML","TOML","JSON","Extensible","React","Reactma"],"date":"2019-02-27T04:04:28.400Z","author":{"name":"Reactma"},"publisher":{"username":"reactma","email":"github@reactma.com"},"maintainers":[{"username":"reactma","email":"fqye@reactma.com"}],"repository":{"type":"git","url":"git+https://github.com/reactma/promarkdown.git"},"links":{"npm":"https://www.npmjs.com/package/promarkdown","homepage":"https://github.com/reactma/promarkdown.git","repository":"https://github.com/reactma/promarkdown","bugs":"https://github.com/reactma/promarkdown/issues"},"license":"MIT","dependencies":{"@fortawesome/fontawesome-svg-core":"^1.2.15","@fortawesome/free-regular-svg-icons":"^5.7.2","@fortawesome/free-solid-svg-icons":"^5.7.2","@fortawesome/react-fontawesome":"^0.1.4","@types/codemirror":"^0.0.72","@types/marked":"^0.6.1","@types/react":"^16.8.3","@types/react-dom":"^16.8.2","codemirror":"^5.43.0","html-to-react":"^1.3.4","marked":"^0.6.1","react":"^16.8.2","react-dom":"^16.8.2"},"devDependencies":{"@types/enzyme":"^3.9.0","@types/enzyme-adapter-react-16":"^1.0.5","@types/jest":"^24.0.6","@types/sinon":"^7.0.6","clean-webpack-plugin":"^1.0.1","cpx":"^1.5.0","css-loader":"^2.1.0","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.9.1","html-webpack-plugin":"^3.2.0","jest":"^24.1.0","jest-environment-enzyme":"^7.0.1","jest-enzyme":"^7.0.1","npm-run-all":"^4.1.5","prettier":"1.16.4","rimraf":"^2.6.3","sinon":"^7.2.4","style-loader":"^0.23.1","ts-jest":"^23.10.5","ts-loader":"^5.3.3","tslint":"^5.12.1","tslint-config-prettier":"^1.18.0","tslint-react":"^3.6.0","typedoc":"^0.14.2","typescript":"^3.3.3","webpack":"^4.29.4","webpack-cli":"^3.2.3","webpack-dev-server":"^3.1.14"},"releases":[{"from":"2022-06-15T00:00:00.000Z","to":"2022-07-15T00:00:00.000Z","count":0},{"from":"2022-04-16T00:00:00.000Z","to":"2022-07-15T00:00:00.000Z","count":1},{"from":"2022-01-16T00:00:00.000Z","to":"2022-07-15T00:00:00.000Z","count":1},{"from":"2021-07-15T00:00:00.000Z","to":"2022-07-15T00:00:00.000Z","count":1},{"from":"2020-07-15T00:00:00.000Z","to":"2022-07-15T00:00:00.000Z","count":1}],"hasTestScript":true,"hasSelectiveFiles":true,"readme":"**[English](#promarkdown)** **[中文](#中文)**\n\n# ProMarkdown\n\n## Introduction\n\nProMarkdown is a professional grade React markdown editor based on CodeMirror, for programmers and professional tech writters.\n\n[Github home](https://github.com/reactma/promarkdown)\n\nIt provides following features for more sophiscated markdown editing:\n\n- Frontmatters, YAML / TOML /JSON, which is the main reason for developing ProMarkdown\n- Keymap, Vim / Sublime / Emacs, and obviously default\n- Line numbers\n- Block folding\n- Preview / Fullscreen / Editing and live preview\n- Search and replace\n- I18n, with build zh-CN ( Simplified Chinese ) suppport. Developers can provide custom phrases for menu tips / search / replace labels.\n- Toolbar / menu: a default menu supporting major markdown formats\n- Extensible - it exposes underlying CodeMirror instance and allows you to plugin your own menu, custom preview and low level CodeMirror eventhandlers.\n\n## Built with Typescript\n\nProMarkdown is built with Typescript. But you don't need TS to use it as a library. Exported types are generated by TSC and provided with the library.\n\n## Demo\n\n### Default Editor with front matter highlighting\n\n\n\n### Bare editor - no menu and linenumbers\n\n\n\n### Live edit and preview\n\n\n\n### Custom menu\n\n\n\n### Search and replace\n\n\n\n## Quitck start\n\nClone the repo:\n\n`git clone https://github.com/reactma/promarkdown`\n\nEnter the repo:\n\n`cd promarkdown`\n\nInstall dependencies\n\n`yarn`\n\nRun demo:\n\n`yarn dev`\n\nBuild library:\n\n`yarn build`\n\n\n## Usage\n\n### Install\n\n```\nyarn add promarkdown\n```\n\nor\n\n```\nnpm install promarkdown\n```\n\n\n### Basic usage\n\n**Important: You must import style sheets or provide your own customization**\n\n```\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\n\n/*** Important : You must import style sheets or provide your own customization ***/\n\nimport 'codemirror/lib/codemirror.css'\nimport 'codemirror/addon/fold/foldgutter.css'\nimport 'codemirror/addon/scroll/simplescrollbars.css'\nimport 'codemirror/addon/dialog/dialog.css'\nimport 'codemirror/addon/search/matchesonscrollbar.css'\n\nimport 'promarkdown/matchhighlighter.css'\nimport 'promarkdown/promarkdown.css'\nimport 'promarkdown/gitmarkdown.css'\nimport 'promarkdown/keymapmenu.css'\n\n/*** End of Important ******************/\n\n\nimport ProMarkdown, { IProMarkdownProps } from 'promarkdown'\n\nconst initialValue = `\n---\nreceipt: Oz-Ware Purchase Invoice\ndate: 2007-08-06\ncustomer:\n given: Dorothy\n family: Gale\n\nspecialDelivery: >\n Follow the Yellow Brick\n Road to the Emerald City.\n Pay no attention to the\n man behind the curtain.\n---\n\nGitHub Flavored Markdown\n========================\n\nEverything from markdown plus GFM features:\n\n## URL autolinking\n\nUnderscores_are_allowed_between_words.\n\n## Strikethrough text\n\nGFM adds syntax to strikethrough text, which is missing from standard Markdown.\n\n~~Mistaken text.~~\n~~**works with other formatting**~~\n\n~~spans across\nlines~~\n\n## Fenced code blocks (and syntax highlighting)\n\n\\`\\`\\`javascript\nfor (var i = 0; i < items.length; i++) {\n console.log(items[i], i); // log them\n}\n\\`\\`\\`\n\n## Task Lists\n\n- [ ] Incomplete task list item\n- [x] **Completed** task list item\n\n## A bit of GitHub spice\n\n* SHA: be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2\n* User@SHA ref: mojombo@be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2\n* User/Project@SHA: mojombo/god@be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2\n* \\#Num: #1\n* User/#Num: mojombo#1\n* User/Project#Num: mojombo/god#1\n\nSee http://github.github.com/github-flavored-markdown/.\n`\n\nconst atChange = (\n editor: CodeMirror.Editor,\n change: CodeMirror.EditorChange,\n value: string // Changed value\n) => console.log(Editor changed >>>>>>>>', editor, change, value)\n\nReactDOM.render(, document.getElementById('root'))\n```\n\n### Advanced\n\n#### ProMarkdown Props\n\nAs defined in Typescript interface, follow the comments:\n\n```\ninterface IProMarkdownProps {\n className?: string // Your custom class name\n initialValue?: string // Editor initial value\n hideMenu?: boolean // Hidemenu or not, true - hide, false - show\n mode?: { // Editor mode\n name: 'yaml-frontmatter' | 'toml-frontmatter' | 'json-frontmatter' // Frontmatter name, must be one of thme\n base: 'markdown' | 'gfm' // base mode, either markdown or gfm ( Github Flavored Markdown )\n }\n menu?: IProMarkdownMenuItem[] // Your coustom value, continue for more details\n markdownTransformer?: (from: string) => string // Your comstom markdown transformer for preview, as the editor may contain front matter.\n renderPreview?: (props: { value: string }) => React.ComponentElement // Your custom preview component\n menuitemTips?: { //Menu item tips, for your local language\n [name: string]: string\n }\n locale?: string //Serach/replace/goto line/ menu tip locale, only support zh-CN and en-US now. Default en-US\n lineNumbers?: boolean // show linenumber or not\n helpLink?: string //Link to help page for Help menu item\n atMounted?: (editor: CodeMirror.Editor) => any // Your handler after Promarkdown is mounted. You can get your codemirror instance for lowlevel CodeMirror manipulation\n atUnmounted?: (editor: CodeMirror.Editor, value: string) => any // Your handler after Remardown is unmounted\n atChange?: (editor: CodeMirror.Editor, change: CodeMirror.EditorChange, value: string) => any // Your handler for editor change. \n codemirrorOptions?: any // Options that will be passed directly to codemirror\n}\n```\n\n#### Menu\n\nPromarkdown provides following built-in menus:\n\n```\nexport type ProMarkdownMenuNames =\n | 'bold' // Bold\n | 'br' // Horizontal ruler\n | 'code' // Code\n | 'eraser' //Erase format\n | 'fullscreen' //Fullscreen mode\n | 'heading' //Headings\n | 'help' //Help page\n | 'image' //Image\n | 'ordered-list' //Ordered list\n | 'quote' //Quote\n | 'italic' //Italic\n | 'link' //Link\n | 'preview' //Preview\n | 'strikethrough' //Strike through\n | 'splitpane' //Splitpane for live edit and preview\n | 'table' //Table\n | 'unordered-list' //Unordered list\n | '|' //Menu item break\n```\n\n#### Provide your custom tip for menu item \n\nProvide menuItemTips prop with following format:\n\n```\ninterface IMenuItemTips {\n [name: string]: string\n}\n```\n\nexample:\n\n```\n{\ntable: 'Insert table',\nbold: 'Set bold'\n}\n```\n\n#### Build your own custom menus\n\nProvide your own meu props to ProMarkdown\n\n```\nmenu?: IProMarkdownMenuItem[]\n```\n\nIProMarkdownMenuItem type is:\n\n```\ninterface IProMarkdownMenuItem {\n name: ProMarkdownMenuNames | string // name - if it is one of built-in menu item, your props will be merged to default\n tip: string // menu tip\n className?: string // custom class name\n render?: (props?: IMenuItemRenderProps) => any // Render prop that renders your custom menu item. Continue to find properties of IMenuItemprops\n onClick?: (editor: CodeMirror.Editor, name: string, state: string) => void // Your handler for the menu item if you want to replace the default one.\n link?: string // For help only\n}\n\n```\n\nIMenuItemRenderProps type is \n\n```\ninterface IMenuItemRenderProps {\n editor: CodeMirror.Editor // CodeMirror editor\n name: string // name of the menuitem.\n state: string // State of menuitem, if ProMarkdown is able to detect the state, applicable to built-in format menu items only. enabled / disabled / selected\n tip: string // Tip for the custom menu item\n}\n\n```\n\n#### Provide your own preview component\n\nYou need to provide your own render prop to ProMarkdown:\n\n```\nrenderPreview?: (props: { value: string, frontmatter: string }) => React.ComponentElement // Your custom preview component\n```\n\nThe value is the editor's entire content, including frontmatter. You need to parse the value on your own. The preset frontmatter is passed in, with values of `yaml-frontmatter` or `toml-frontmatter` or `json-frontmatter`\n\n\n# 中文\n\n## 简介\n\nProMarkdown是一款为专业程序员和文档写作者开发专业级的Markdown编辑器，基于CodeMirror和React。\n\n[Github主页](https://github.com/reactma/promarkdown)\n\n支持如下更加强大的Markdown编辑功能：\n\n- Frontmatters, 支持YAML / TOML /JSON\n- 键盘布局, Vim / Sublime / Emacs, 和默认\n- 行编号\n- 块折叠\n- 预览 / 全屏 / 编辑和实时预览\n- 搜索与替换\n- 国际化，已内置zh-CN。 开发者可以针对不同语言提供菜单提示/ 搜索/替换的对应语言。\n- 工具栏/菜单: 提供默认的菜单，支持常见的Markdown格式\n- 可扩展 - 对开发者开放CodeMirror，允许提供自己的菜单，自己的预览组件和底层CodeMirror事件处理器。\n\n## 使用TypeScript开发\n\n我们使用TypeScript开发，但是作为库使用，用JS也可以。\n\n## 演示\n\n### 带Frontmatter的默认编辑器\n\n\n\n### 裸编辑器 - 没有菜单和行号\n\n\n\n### 实时编辑与预览\n\n\n\n### 定制菜单\n\n\n\n### 搜索与替换\n\n\n\n## 快速上手\n\n克隆Github仓库：\n\n`git clone https://github.com/reactma/promarkdown`\n\n进入本地仓库:\n\n`cd promarkdown`\n\n安装依赖包\n\n`yarn`\n\n启动演示和开发环境:\n\n`yarn dev`\n\n编译库:\n\n`yarn build`\n\n\n## 用法\n\n### 安装\n\n```\nyarn add promarkdown\n```\n\n或\n\n```\nnpm install promarkdown\n```\n\n\n### 基本用户\n\n**重要: 必须导入CSS style sheets或提供自己定制的style sheets**\n\n```\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\n\n/*** *重要: 必须导入CSS style sheets或提供自己定制的style sheets *****/\n\nimport 'codemirror/lib/codemirror.css'\nimport 'codemirror/addon/fold/foldgutter.css'\nimport 'codemirror/addon/scroll/simplescrollbars.css'\nimport 'codemirror/addon/dialog/dialog.css'\nimport 'codemirror/addon/search/matchesonscrollbar.css'\n\nimport 'promarkdown/matchhighlighter.css'\nimport 'promarkdown/promarkdown.css'\nimport 'promarkdown/gitmarkdown.css'\nimport 'promarkdown/keymapmenu.css'\n\n/*** End of Important ******************/\n\n\nimport ProMarkdown, { IProMarkdownProps } from 'promarkdown'\n\nconst initialValue = `\n---\nreceipt: Oz-Ware Purchase Invoice\ndate: 2007-08-06\ncustomer:\n given: Dorothy\n family: Gale\n\nspecialDelivery: >\n Follow the Yellow Brick\n Road to the Emerald City.\n Pay no attention to the\n man behind the curtain.\n---\n\nGitHub Flavored Markdown\n========================\n\nEverything from markdown plus GFM features:\n\n## URL autolinking\n\nUnderscores_are_allowed_between_words.\n\n## Strikethrough text\n\nGFM adds syntax to strikethrough text, which is missing from standard Markdown.\n\n~~Mistaken text.~~\n~~**works with other formatting**~~\n\n~~spans across\nlines~~\n\n## Fenced code blocks (and syntax highlighting)\n\n\\`\\`\\`javascript\nfor (var i = 0; i < items.length; i++) {\n console.log(items[i], i); // log them\n}\n\\`\\`\\`\n\n## Task Lists\n\n- [ ] Incomplete task list item\n- [x] **Completed** task list item\n\n## A bit of GitHub spice\n\n* SHA: be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2\n* User@SHA ref: mojombo@be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2\n* User/Project@SHA: mojombo/god@be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2\n* \\#Num: #1\n* User/#Num: mojombo#1\n* User/Project#Num: mojombo/god#1\n\nSee http://github.github.com/github-flavored-markdown/.\n`\n\nconst atChange = (\n editor: CodeMirror.Editor,\n change: CodeMirror.EditorChange,\n value: string // Changed value\n) => console.log(Editor changed >>>>>>>>', editor, change, value)\n\nReactDOM.render(, document.getElementById('root'))\n```\n\n### 高级\n\n#### ProMarkdown Props\n\n见Typescript interface定义, 参考每个属性的comment:\n\n```\ninterface IProMarkdownProps {\n className?: string // 自定义 class name\n initialValue?: string // 初始值\n hideMenu?: boolean // 是否隐藏菜单, true - 隐藏, false - 现实\n mode?: { // Editor mode\n name: 'yaml-frontmatter' | 'toml-frontmatter' | 'json-frontmatter' // Frontmatter名称\n base: 'markdown' | 'gfm' // Markdown风格, 基本markdown 或者 gfm ( Github Flavored Markdown )\n }\n menu?: IProMarkdownMenuItem[] // 定制菜单\n markdownTransformer?: (from: string) => string // 定制Markdown转换器，用于将代Frontmatter的内容转化为适于预览的内容\n renderPreview?: (props: { value: string }) => React.ComponentElement // 定制的预览器\n menuitemTips?: { // 您的本地语言菜单项提示\n [name: string]: string\n }\n locale?: string //Serach/replace/goto line/ menu提示的 locale, 目前只zh-CN 和en-US，默认en-US\n lineNumbers?: boolean // 是否显示行号\n helpLink?: string // Help菜单项的页面链接\n atMounted?: (editor: CodeMirror.Editor) => any // ProMarkdown加载后处理器. 可以从这里获取CodeMirror实例，进行CodeMirror底层操作\n atUnmounted?: (editor: CodeMirror.Editor, value: string) => any // ProMarkdown卸载后处理器\n atChange?: (editor: CodeMirror.Editor, change: CodeMirror.EditorChange, value: string) => any // 编辑器内容变化处理器\n codemirrorOptions?: any // CodeMirror底层选项\n}\n```\n\n#### 菜单\n\nPromarkdown提供如下内置菜单\n\n```\nexport type ProMarkdownMenuNames =\n | 'bold' // Bold 加黑\n | 'br' // Horizontal ruler 水平分割\n | 'code' // Code 代码\n | 'eraser' //Erase format 清楚格式\n | 'fullscreen' //Fullscreen mode 全屏模式\n | 'heading' //Headings 标题\n | 'help' //Help page 帮助页面\n | 'image' //Image 图片\n | 'ordered-list' //Ordered list 有序列表\n | 'quote' //Quote 引用\n | 'italic' //Italic 斜体\n | 'link' //Link 链接\n | 'preview' //Preview 预览\n | 'strikethrough' //Strike through 删除\n | 'splitpane' //Splitpane for live edit and preview 实时编辑和预览\n | 'table' //Table 表格\n | 'unordered-list' //Unordered list 无序列表\n | '|' //Menu item break 菜单项分隔符\n```\n\n#### 提供自定义的菜单提示\n\n对ProMarkdown组件提供如下menuItemTips prop:\n\n```\ninterface IMenuItemTips {\n [name: string]: string\n}\n```\n\n例子:\n\n```\n{\ntable: '插入表格',\nbold: '设为黑体'\n}\n```\n\n#### 开发自定义菜单\n\n对ProMarkdown组件提供如下meu prop:\n\n```\nmenu?: IProMarkdownMenuItem[]\n```\n\nIProMarkdownMenuItem 类型定义:\n\n```\ninterface IProMarkdownMenuItem {\n name: ProMarkdownMenuNames | string // name - 如果名称为预定义菜单之一，您的菜单属性会与默认属性合并\n tip: string // 菜单提示\n className?: string // 菜单类名称\n render?: (props?: IMenuItemRenderProps) => any // 菜单渲染器\n onClick?: (editor: CodeMirror.Editor, name: string, state: string) => void // 自定义的点击处理器\n link?: string // 仅供Help菜单使用，帮助页面链接\n}\n\n```\n\nIMenuItemRenderProps类型定义\n\n```\ninterface IMenuItemRenderProps {\n editor: CodeMirror.Editor // CodeMirror编辑器示例\n name: string // 菜单项名称\n state: string // Menuitem状态，前提是ProMarkdown可以检测到，否则为enabled，适用于内建的菜单项，取值 enabled / disabled / selected\n tip: string // 菜单项提示\n}\n\n```\n\n#### 自定义预览组件\n\n为ProMarkdown组件提供如下render prop：\n\n```\nrenderPreview?: (props: { value: string, frontmatter: string }) => React.ComponentElement // 自定义预览组件渲染器\n```\n`value` : 编辑器的完整内容，包括frontmatter. `frontmatter` : 当前设置的frontmatter格式，为 `yaml-frontmatter` 或 `toml-frontmatter` 或 `json-frontmatter`"},"npm":{"downloads":[{"from":"2022-07-14T00:00:00.000Z","to":"2022-07-15T00:00:00.000Z","count":0},{"from":"2022-07-08T00:00:00.000Z","to":"2022-07-15T00:00:00.000Z","count":15},{"from":"2022-06-15T00:00:00.000Z","to":"2022-07-15T00:00:00.000Z","count":28},{"from":"2022-04-16T00:00:00.000Z","to":"2022-07-15T00:00:00.000Z","count":88},{"from":"2022-01-16T00:00:00.000Z","to":"2022-07-15T00:00:00.000Z","count":176},{"from":"2021-07-15T00:00:00.000Z","to":"2022-07-15T00:00:00.000Z","count":315}],"starsCount":0},"github":{"starsCount":10,"forksCount":2,"subscribersCount":2,"issues":{"count":2,"openCount":1,"distribution":{"3600":0,"10800":1,"32400":0,"97200":0,"291600":0,"874800":0,"2624400":0,"7873200":0,"23619600":0,"70858800":1,"212576400":0},"isDisabled":false},"contributors":[{"username":"reactma","commitsCount":39},{"username":"fangqiao","commitsCount":17}],"commits":[{"from":"2022-07-08T00:00:00.000Z","to":"2022-07-15T00:00:00.000Z","count":0},{"from":"2022-06-15T00:00:00.000Z","to":"2022-07-15T00:00:00.000Z","count":0},{"from":"2022-04-16T00:00:00.000Z","to":"2022-07-15T00:00:00.000Z","count":0},{"from":"2022-01-16T00:00:00.000Z","to":"2022-07-15T00:00:00.000Z","count":0},{"from":"2021-07-15T00:00:00.000Z","to":"2022-07-15T00:00:00.000Z","count":0}]},"source":{"files":{"readmeSize":15838,"testsSize":14149667},"linters":["prettier","tslint"],"outdatedDependencies":{"@types/react-dom":{"required":"^16.8.2","stable":"18.0.6","latest":"18.0.6"},"@types/codemirror":{"required":"^0.0.72","stable":"5.60.5","latest":"5.60.5"},"@fortawesome/free-solid-svg-icons":{"required":"^5.7.2","stable":"6.1.1","latest":"6.1.1"},"@fortawesome/fontawesome-svg-core":{"required":"^1.2.15","stable":"6.1.1","latest":"6.1.1"},"@fortawesome/free-regular-svg-icons":{"required":"^5.7.2","stable":"6.1.1","latest":"6.1.1"},"@fortawesome/react-fontawesome":{"required":"^0.1.4","stable":"0.2.0","latest":"0.2.0"},"marked":{"required":"^0.6.1","stable":"4.0.18","latest":"4.0.18"},"@types/react":{"required":"^16.8.3","stable":"18.0.15","latest":"18.0.15"},"codemirror":{"required":"^5.43.0","stable":"6.0.1","latest":"6.0.1"},"@types/marked":{"required":"^0.6.1","stable":"4.0.3","latest":"4.0.3"},"react-dom":{"required":"^16.8.2","stable":"18.2.0","latest":"18.3.0-next-02206099a-20220714"},"react":{"required":"^16.8.2","stable":"18.2.0","latest":"18.3.0-next-02206099a-20220714"}}}},"evaluation":{"quality":{"carefulness":0.45999999999999996,"tests":0.6,"health":0.5,"branding":0},"popularity":{"communityInterest":16,"downloadsCount":29.333333333333332,"downloadsAcceleration":0.046270928462709277,"dependentsCount":0},"maintenance":{"releasesFrequency":0.28664383561643836,"commitsFrequency":0,"openIssues":0.5,"issuesDistribution":0}},"score":{"final":0.5089204636709864,"detail":{"quality":0.6936826603449,"popularity":0.04686971529446449,"maintenance":0.8126036148984397}}}