Showing preview only (457K chars total). Download the full file or copy to clipboard to get everything.
Repository: mdnice/markdown-nice
Branch: master
Commit: 6525a5aba371
Files: 185
Total size: 416.6 KB
Directory structure:
gitextract_4y90a4ha/
├── .eslintignore
├── .eslintrc
├── .github/
│ └── ISSUE_TEMPLATE/
│ ├── bug_report.md
│ └── feature_request.md
├── .gitignore
├── .npmignore
├── .prettierrc
├── .storybook/
│ ├── .babelrc
│ └── config.js
├── CHANGELOG.md
├── LICENSE
├── README.md
├── config/
│ ├── env.js
│ ├── jest/
│ │ ├── cssTransform.js
│ │ └── fileTransform.js
│ ├── paths.js
│ ├── webpack.config.js
│ ├── webpack.config.lib.js
│ └── webpackDevServer.config.js
├── main.js
├── package.json
├── public/
│ ├── index.html
│ └── manifest.json
├── scripts/
│ ├── build.js
│ ├── start.js
│ └── test.js
├── src/
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── Lib.js
│ ├── component/
│ │ ├── Dialog/
│ │ │ ├── AboutDialog.js
│ │ │ ├── FormDialog.js
│ │ │ ├── HistoryDialog.js
│ │ │ ├── ImageDialog.js
│ │ │ ├── LinkDialog.js
│ │ │ ├── SitDownDialog.js
│ │ │ ├── TutorialDialog.js
│ │ │ ├── VersionDialog.css
│ │ │ └── VersionDialog.js
│ │ ├── ImageHosting/
│ │ │ ├── AliOSS.js
│ │ │ ├── GitHub.js
│ │ │ ├── Gitee.js
│ │ │ └── QiniuOSS.js
│ │ ├── LocalHistory/
│ │ │ ├── index.js
│ │ │ ├── indexdb.js
│ │ │ ├── localHistory.css
│ │ │ └── util.js
│ │ ├── MenuLeft/
│ │ │ ├── CodeTheme.css
│ │ │ ├── CodeTheme.js
│ │ │ ├── File/
│ │ │ │ ├── ExportMarkdown.js
│ │ │ │ ├── ExportPdf.js
│ │ │ │ └── ImportFile.js
│ │ │ ├── File.js
│ │ │ ├── Function/
│ │ │ │ ├── History.js
│ │ │ │ ├── Reset.js
│ │ │ │ ├── Search.js
│ │ │ │ └── SitDown.js
│ │ │ ├── Function.js
│ │ │ ├── Help/
│ │ │ │ ├── About.js
│ │ │ │ ├── Document.js
│ │ │ │ ├── Question.js
│ │ │ │ └── Version.js
│ │ │ ├── Help.js
│ │ │ ├── LogIn.js
│ │ │ ├── Login.css
│ │ │ ├── Paragraph.js
│ │ │ ├── Pattern/
│ │ │ │ ├── Bold.js
│ │ │ │ ├── Code.js
│ │ │ │ ├── Del.js
│ │ │ │ ├── Font.js
│ │ │ │ ├── Form.js
│ │ │ │ ├── Format.js
│ │ │ │ ├── Image.js
│ │ │ │ ├── InlineCode.js
│ │ │ │ ├── Italic.js
│ │ │ │ ├── Link.js
│ │ │ │ └── LinkToFoot.js
│ │ │ ├── Pattern.js
│ │ │ ├── Setting/
│ │ │ │ ├── ContainImgName.js
│ │ │ │ └── SyncScroll.js
│ │ │ ├── Setting.js
│ │ │ ├── Theme.css
│ │ │ ├── Theme.js
│ │ │ ├── Tutorial.js
│ │ │ ├── View/
│ │ │ │ ├── EditArea.js
│ │ │ │ ├── FullScreen.js
│ │ │ │ ├── PreviewArea.js
│ │ │ │ └── ThemeArea.js
│ │ │ ├── View.js
│ │ │ └── common.css
│ │ ├── SearchBox/
│ │ │ ├── SearchBox.css
│ │ │ └── index.js
│ │ └── Sidebar/
│ │ ├── Juejin.css
│ │ ├── Juejin.js
│ │ ├── PreviewType.css
│ │ ├── PreviewType.js
│ │ ├── Wechat.css
│ │ ├── Wechat.js
│ │ ├── Zhihu.css
│ │ └── Zhihu.js
│ ├── icon/
│ │ ├── Close.js
│ │ ├── Copy.js
│ │ ├── Down.js
│ │ ├── Environment.js
│ │ ├── FontCase.js
│ │ ├── GitHub.js
│ │ ├── Inbox.js
│ │ ├── Juejin.js
│ │ ├── Mobile.js
│ │ ├── More.js
│ │ ├── PC.js
│ │ ├── Rabbit.js
│ │ ├── Replace.js
│ │ ├── ReplaceAll.js
│ │ ├── Smile.js
│ │ ├── User.js
│ │ ├── Wechat.js
│ │ ├── Zhihu.js
│ │ ├── index.css
│ │ └── index.js
│ ├── index.css
│ ├── index.d.ts
│ ├── index.js
│ ├── layout/
│ │ ├── Dialog.js
│ │ ├── EditorMenu.css
│ │ ├── EditorMenu.js
│ │ ├── Footer.css
│ │ ├── Footer.js
│ │ ├── Navbar.css
│ │ ├── Navbar.js
│ │ ├── Sidebar.css
│ │ ├── Sidebar.js
│ │ └── StyleEditor.js
│ ├── serviceWorker.js
│ ├── store/
│ │ ├── content.js
│ │ ├── dialog.js
│ │ ├── footer.js
│ │ ├── imageHosting.js
│ │ ├── navbar.js
│ │ ├── title.js
│ │ ├── userInfo.js
│ │ └── view.js
│ ├── template/
│ │ ├── basic.js
│ │ ├── code/
│ │ │ ├── atomOneDark.js
│ │ │ ├── atomOneLight.js
│ │ │ ├── github.js
│ │ │ ├── monokai.js
│ │ │ ├── vs2015.js
│ │ │ └── xcode.js
│ │ ├── content.md
│ │ ├── index.js
│ │ ├── macCode/
│ │ │ ├── macAtomOneDark.js
│ │ │ ├── macAtomOneLight.js
│ │ │ ├── macGithub.js
│ │ │ ├── macMonokai.js
│ │ │ ├── macVs2015.js
│ │ │ └── macXcode.js
│ │ └── markdown/
│ │ ├── custom.js
│ │ └── normal.js
│ └── utils/
│ ├── appContext.js
│ ├── constant.js
│ ├── converter.js
│ ├── editorKeyEvents.js
│ ├── helper.js
│ ├── hotkey.js
│ ├── imageHosting.js
│ ├── langHighlight.js
│ ├── markdown-it-imageflow.js
│ ├── markdown-it-li.js
│ ├── markdown-it-linkfoot.js
│ ├── markdown-it-math.js
│ ├── markdown-it-multiquote.js
│ ├── markdown-it-removepre.js
│ ├── markdown-it-span.js
│ ├── markdown-it-table-container.js
│ ├── mdMirror.css
│ ├── pluginCenter.js
│ ├── sitdownConverter.js
│ └── styleMirror.css
├── stories/
│ ├── allImageHosting.js
│ ├── defaultImageHosting.js
│ ├── index.js
│ ├── noneImageHosting.js
│ └── online.js
└── watch.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintignore
================================================
/config/
/scripts/
*.test.*
/main.js
*.d.ts
================================================
FILE: .eslintrc
================================================
{
"extends": ["airbnb", "plugin:prettier/recommended"], // eslint扩展规则
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"parser": "babel-eslint", // 解决ES6 improt会报错
"env": {
// eg如果不配置browser，window就会被eslint报undefined的错
"es6": true,
"browser": true,
"node": true
},
"plugins": ["react", "jsx-a11y", "import"],
"rules": {
"quotes": [0, "double"],
"class-methods-use-this": 0,
"import/no-named-as-default": 0,
"react/jsx-filename-extension": [
"error",
{
"extensions": [".js", ".jsx"]
}
],
"react/prop-types": 0,
"react/destructuring-assignment": 0,
"react/no-array-index-key": 0,
"no-use-before-define": 0,
"no-restricted-syntax": 0,
"no-var": 0,
"vars-on-top": 0,
"no-plusplus": 0,
"no-continue": 0,
"prefer-template": 0,
"object-shorthand": 0,
"no-else-return": 0,
"no-param-reassign": 0,
"no-unused-vars": 1,
"jsx-a11y/anchor-is-valid": 0,
"react/jsx-props-no-spreading": 0,
"import/no-extraneous-dependencies": 0,
"import/order": 0,
"jsx-a11y/mouse-events-have-key-events": 0,
"no-lonely-if": 0,
"one-var": 0,
"react/prefer-stateless-function": 0,
"react/jsx-wrap-multilines": 0,
"no-unused-expressions": 0,
"react/no-danger": 0,
"no-console": 0,
"camelcase": 0,
"import/no-dynamic-require": 1,
"global-require": 1,
"react/forbid-prop-types": 1,
"jsx-a11y/accessible-emoji": 0,
"jsx-a11y/click-events-have-key-events": 0,
"jsx-a11y/no-static-element-interactions": 0
}
}
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: 提交 Bug
about: 提交 Bug 用于改进本项目
title: ''
labels: bug
assignees: guanpengchn
---
**运行环境：**
|操作系统|浏览器|
|---|---|
|macOS|Chrome|
**Markdown文本内容：**
例如：
```md
- 默认文本1
- 默认文本2
- 默认文本3
```
**错误详情：**
例如：块级公式转换错误，控制台报错A is undefined
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: 新特性
about: 有新特性的需要
title: ''
labels: feature
assignees: guanpengchn
---
**新特性描述：**
================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
dist
package-lock.json
lib
================================================
FILE: .npmignore
================================================
build
config
dist
node_modules
public
scripts
src
.eslintrc
.gitignore
.prettierrc
logo.png
main.js
package.json
package-lock.json
yarn.lock
.npmignore
================================================
FILE: .prettierrc
================================================
{
"printWidth": 120,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"jsxSingleQuote": false,
"trailingComma": "all",
"bracketSpacing": false,
"jsxBracketSameLine": false,
"arrowParens": "always"
}
================================================
FILE: .storybook/.babelrc
================================================
{
"presets": [
"@babel/env",
"@babel/preset-react"
]
}
================================================
FILE: .storybook/config.js
================================================
import { configure } from '@storybook/react';
function loadStories() {
require('../stories/index.js');
// You can require as many stories as you need.
}
configure(loadStories, module);
================================================
FILE: CHANGELOG.md
================================================
v1.8.22 发布日期：2020-09-29
- 控制编辑器字数
- 渲染节流
- gitee 和 github 图床进行 encodeURI 转码
v1.8.21 发布日期：2020-09-26
- 多级引用样式 bug
v1.8.20 发布日期：2020-09-25
- 增加多级引用示例和教程
v1.8.19 发布日期：2020-09-24
- 增加多级引用的样式支持
- 增加示例文本
v1.8.17 发布日期：2020-09-09
- 移除微信代码块，太丑了，还要做一堆兼容操作，拒绝
- 恢复稀土掘金支持，增加超过 60000 字符判断
- 增加 Markdown 语法教程
v1.8.15 发布日期：2020-08-26
- 新增 GitHub 图床支持
v1.8.14 发布日期：2020-08-25
- 解决 Gitee 图片粘贴名字重复问题
- 提示大小超过 1 MB
v1.8.13 发布日期：2020-08-24
- 新增 Gitee 图床支持
v1.8.12 发布日期：2020-08-08
- 切换图片为七牛云
v1.8.11 发布日期：2020-08-02
- 修复组件 bug
v1.8.10 发布日期：2020-08-02
- 加入 token 用于用户验证，移除 user 组件
- 因为掘金图床暂时无法自动转换，暂时移除掘金支持
v1.8.9 发布日期：2020-08-02
- 加入 style 相关监听函数
- 修改 content.md
v1.8.8 发布日期：2020-08-01
- 替换掉全部图壳图片
v1.8.7 发布日期：2020-08-01
- 支持 onBlur 和 onFocus
v1.8.6 发布日期：2020-07-02
- 新增表格外部容器，增加默认宽度，表格可滑动
- 支持图片链接
v1.8.5 发布日期：2020-06-15
- 增加默认代码块语言 bash
v1.8.4 发布日期：2020-06-06
- 修改 navbar 背景色
v1.8.2 发布日期：2020-06-04
- 更换文档地址
v1.8.1 发布日期：2020-05-17
- 加入账户系统
v1.7.11 发布日期：2020-05-15
- 导出 pdf 时底部 bar 隐藏
v1.7.10 发布日期：2020-05-09
- 修复掘金代码块 bug
v1.7.9 发布日期：2020-04-30
- 修复掘金代码块 bug
v1.7.7 发布日期：2020-04-30
- 修复掘金代码块粘贴后复制变为 1 行的情况
v1.7.6 发布日期：2020-04-26
- 修复掘金标题 padding 不为 0
v1.7.5 发布日期：2020-04-25
- 修复 bug
v1.7.4 发布日期：2020-04-19
- 增加底部栏
- 增加富文本转换 markdown 提示
v1.7.3 发布日期：2020-04-13
- 修复提示
v1.7.2 发布日期：2020-04-12
- 支持图片调整大小
- 滑动块添加下方注释
v1.7.1 发布日期：2020-04-05
- 对接主题系统
v1.6.12 发布日期：2020-04-03
- 修复代码换行和空格问题
v1.6.10 发布日期：2020-03-22
- 新增 Mac 代码风格主题
v1.6.9 发布日期：2020-03-21
- 新增我要提问
- 新增全栈蓝主题
v1.6.8 发布日期：2020-03-19
- 标题自定义能力无限增强
- 修复基础主题，调节头部空隙过大问题
v1.6.7 发布日期：2020-03-16
- 加入 id
- 修复 em strong
v1.6.5 发布日期：2020-03-08
- 修复主题
v1.6.4 发布日期：2020-03-07
- 回退 antd 版本
v1.6.3 发布日期：2020-03-07
- 新增稀土掘金支持
- 新增萌绿主题，作者 koala🐨
v1.6.2 发布日期：2020-03-01
- 修改微信 logo
- 修改主题图片自适应
- 修改蔷薇紫主题
- 更改 TOC 语法为[TOC]
- 升级 antd 3 至 antd 4
- 修复快捷键
v1.6.1 发布日期：2020-02-17
- 解决 build 内存溢出的问题。
v1.6.0 发布日期：2020-02-15
- 转发文章重排版，坐立不安？请 SitDown - html 转 markdown 神器（请在功能中查看）
v1.5.9 发布日期：2020-02-15
- 修复 mathjax 升级至 3.0.1 后的知乎死循环 bug
- 插件更新
v1.5.8 发布日期：2020-02-15
- 修复 mathjax 升级至 3.0.1 后的 bug
v1.5.7 发布日期：2020-02-15
- 优化主题
- 公式 Tex 保留，mathjax 升级至 3.0.1
v1.5.6 发布日期：2020-02-09
- 优化代码
- 浏览器插件草稿版，https://docs.mdnice.com/#/beta
v1.5.5 发布日期：2020-02-05
- 修复第一次进入后无默认图床问题
v1.5.4 发布日期：2020-01-30
- 修复微信外链转脚注问题
v1.5.3 发布日期：2020-01-30
- 新增搜索替换功能
- 新增导出 PDF
- 新增查看菜单
v1.5.2 发布日期：2020-01-21
- 临时恢复格式化
- 新增右键菜单
- 调整知乎复制提示
- 修复衬线字体
v1.5.1 发布日期：2020-01-20
- 整体视觉改版
- 新增蔷薇紫主题
- 本地历史优化
- 公式节流渲染
- 仅保留图壳图床
- 新增文件导入导出
v1.5.0 发布日期：2020-01-03
- 修复代码块换行问题
- 改动了本地历史和当前内容的对比界面
v1.4.9 发布日期：2019-12-28
- 修改 README
- 修复同步滚动和图片包含名称问题
v1.4.8 发布日期：2019-12-25
- 增加本地历史功能，浏览器刷新后以前版本不丢失
v1.4.7 发布日期：2019-12-21
- 修复代码块换行问题
- 新增 storybook 组件开发支持
- 新增 markdown 文件 wepack 和 babel 支持
- 新增上传时包含图片名选项
- 修复公式\tag 不居中的 bug
v1.4.6 发布日期：2019-12-08
- 新增「图壳」免费图床，可以长期存储并且排版成功率高！
- 下一个版本将移除其他图床的支持！仅提供组件配置项
v1.4.5 发布日期：2019-11-27
- 新增同步滚动开关（左上角设置按钮内）
- 新增组件自定义图床参数（详情见开发者文档）
v1.4.4 发布日期：2019-11-16
- 将内联 CSS 改为类选择器
- 新增全屏沉浸式编辑（点击全屏按钮可查看）
v1.4.3 发布日期：2019-11-13
- 修复知乎公式问题
- 修复横屏幻灯片渲染问题
v1.4.2 发布日期：2019-11-09
- 新增幻灯片横屏滑动语法，重置后查看
- 修改表格样式污染问题
- 新增拷贝到知乎，支持公式
- 新增 api: getWeChatHtml 和 getZhihuHtml
v1.4.1 发布日期：2019-11-04
- 补充 chalk 包
- 修改主题自定义编辑的提示
- 修改文档地址
- 新增表格添加功能
v1.4.0 发布日期：2019-11-02
- 新增 ref 函数 getHtml 获取富文本
- 新增 id 选择器 nice，防止全局 CSS 污染，break change！请将所有的自定义标签前面加上 #nice，否则将失效，可参考其他主题！
- “参考资料”四个字支持自定义修改内容
- 调整阅读文档
- 修复 Safari 无法复制问题
- 新增主题「极客黑」、「简」
- 修改主题「蓝山」为「前端之巅同款」
- 新增快捷键
v1.3.1 发布日期：2019-10-28
- 修复公式 bug
- 新增主题「蓝山」，请重置看查看效果
v1.3.0 发布日期：2019-10-27
- 组件化
- 新增预览模式
- 修改导航栏布局，关于和登录
v1.2.9 发布日期：2019-10-24
- 修复 PWA 中的 mdnice 图床 https 问题
- 添加图片拖拽提示
v1.2.8 发布日期：2019-10-23
- 支持 PWA
- 图片 svg 示例
v1.2.7 发布日期：2019-10-20
- 修复行内公式空格问题
- 代码滚动手感增强
- 修复微信代码行号
v1.2.6 发布日期：2019-10-18
- li 标签内加入 section 标签用于解决列表被微信重新渲染问题
- 新增自定义标签 ul 、ol 和 li section
- mathjax 公式支持全部
- 修复所有现有主题的 li
- 加入新主题山吹
v1.2.5 发布日期：2019-10-15
- 添加 a 标签提示
- 添加 CSS 编写错误提示
- 修改 README 说明
- 解决公式问题
v1.2.4 发布日期：2019-10-14
- 行间公式过长后可拉伸，开放公式配置 CSS
v1.2.3 发布日期：2019-10-13
- 修复公式 bug
v1.2.2 发布日期：2019-10-11
- 公式编写渲染为 svg，彻底解决微信公众号不支持公式的问题
- 组建钉钉用户群
- 解决阿里云图床中文多编码一次的问题
v1.2.1 发布日期：2019-10-07
- 支持图片粘贴和拖拽上传，格式化由用户手动操作
v1.1.11 发布日期：2019-10-06
- 新增蓝蓝、科技蓝、兰青主题
v1.1.10 发布日期：2019-10-02
- 新增复制时排版检测功能，规范排版格式
v1.1.9 发布日期：2019-09-24
- 修复行内公式存在除号问题，增加行内公式报错提示
v1.1.8 发布日期：2019-09-22
- 修复 sup 标签行高，减小应用体积
v1.1.7 发布日期：2019-09-21
- 新增七牛云图床配置文档
v1.1.6 发布日期：2019-09-19
- 自定义七牛云图床新增自定义域名和命名空间字段
- 新增 mdnice 用户群
v1.1.5 发布日期：2019-09-01
- 支持自定义「七牛云」做图床
- 提供 mdnice 自建免费图床，仅支持临时使用，一天后删除
- 示例请重置后查看「第 10 条」
v1.1.4 发布日期：2019-08-31
- 解决公式处理 bug
- 添加移动端提示页
- 支持注音符号
v1.1.3 发布日期：2019-08-27
- 解决微信代码不对齐问题
v1.1.2 发布日期：2019-08-26
- 完整支持公式处理，示例请重置后查看「第 16 条」
v1.1.1 发布日期：2019-08-24
- 新增主题「红绯」
v1.1.0 发布日期：2019-08-23
- 支持自定义「阿里云 OSS」做图床，示例请重置后查看「第 10 条」
v1.0.2 发布日期：2019-08-13
- 支持 TOC，示例请重置后查看「第 17 条」
v1.0.1 发布日期：2019-08-12
- 新增粘贴时语法检测功能
- 粘贴时转换微信外链
v1.0.0 发布日期：2019-08-07
- 稳定使用
- 新增主题「绿意」
- 新增主题「wechat-format」
v0.1.0 发布日期：2019-05-08
- 线上发布
v0.0.1 发布日期：2019-02-02
- 第一次提交
================================================
FILE: LICENSE
================================================
GNU GENERAL PUBLIC LICENSE
Version 3, 29 June 2007
Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
Everyone is permitted to copy and distribute verbatim copies
of this license document, but changing it is not allowed.
Preamble
The GNU General Public License is a free, copyleft license for
software and other kinds of works.
The licenses for most software and other practical works are designed
to take away your freedom to share and change the works. By contrast,
the GNU General Public License is intended to guarantee your freedom to
share and change all versions of a program--to make sure it remains free
software for all its users. We, the Free Software Foundation, use the
GNU General Public License for most of our software; it applies also to
any other work released this way by its authors. You can apply it to
your programs, too.
When we speak of free software, we are referring to freedom, not
price. Our General Public Licenses are designed to make sure that you
have the freedom to distribute copies of free software (and charge for
them if you wish), that you receive source code or can get it if you
want it, that you can change the software or use pieces of it in new
free programs, and that you know you can do these things.
To protect your rights, we need to prevent others from denying you
these rights or asking you to surrender the rights. Therefore, you have
certain responsibilities if you distribute copies of the software, or if
you modify it: responsibilities to respect the freedom of others.
For example, if you distribute copies of such a program, whether
gratis or for a fee, you must pass on to the recipients the same
freedoms that you received. You must make sure that they, too, receive
or can get the source code. And you must show them these terms so they
know their rights.
Developers that use the GNU GPL protect your rights with two steps:
(1) assert copyright on the software, and (2) offer you this License
giving you legal permission to copy, distribute and/or modify it.
For the developers' and authors' protection, the GPL clearly explains
that there is no warranty for this free software. For both users' and
authors' sake, the GPL requires that modified versions be marked as
changed, so that their problems will not be attributed erroneously to
authors of previous versions.
Some devices are designed to deny users access to install or run
modified versions of the software inside them, although the manufacturer
can do so. This is fundamentally incompatible with the aim of
protecting users' freedom to change the software. The systematic
pattern of such abuse occurs in the area of products for individuals to
use, which is precisely where it is most unacceptable. Therefore, we
have designed this version of the GPL to prohibit the practice for those
products. If such problems arise substantially in other domains, we
stand ready to extend this provision to those domains in future versions
of the GPL, as needed to protect the freedom of users.
Finally, every program is threatened constantly by software patents.
States should not allow patents to restrict development and use of
software on general-purpose computers, but in those that do, we wish to
avoid the special danger that patents applied to a free program could
make it effectively proprietary. To prevent this, the GPL assures that
patents cannot be used to render the program non-free.
The precise terms and conditions for copying, distribution and
modification follow.
TERMS AND CONDITIONS
0. Definitions.
"This License" refers to version 3 of the GNU General Public License.
"Copyright" also means copyright-like laws that apply to other kinds of
works, such as semiconductor masks.
"The Program" refers to any copyrightable work licensed under this
License. Each licensee is addressed as "you". "Licensees" and
"recipients" may be individuals or organizations.
To "modify" a work means to copy from or adapt all or part of the work
in a fashion requiring copyright permission, other than the making of an
exact copy. The resulting work is called a "modified version" of the
earlier work or a work "based on" the earlier work.
A "covered work" means either the unmodified Program or a work based
on the Program.
To "propagate" a work means to do anything with it that, without
permission, would make you directly or secondarily liable for
infringement under applicable copyright law, except executing it on a
computer or modifying a private copy. Propagation includes copying,
distribution (with or without modification), making available to the
public, and in some countries other activities as well.
To "convey" a work means any kind of propagation that enables other
parties to make or receive copies. Mere interaction with a user through
a computer network, with no transfer of a copy, is not conveying.
An interactive user interface displays "Appropriate Legal Notices"
to the extent that it includes a convenient and prominently visible
feature that (1) displays an appropriate copyright notice, and (2)
tells the user that there is no warranty for the work (except to the
extent that warranties are provided), that licensees may convey the
work under this License, and how to view a copy of this License. If
the interface presents a list of user commands or options, such as a
menu, a prominent item in the list meets this criterion.
1. Source Code.
The "source code" for a work means the preferred form of the work
for making modifications to it. "Object code" means any non-source
form of a work.
A "Standard Interface" means an interface that either is an official
standard defined by a recognized standards body, or, in the case of
interfaces specified for a particular programming language, one that
is widely used among developers working in that language.
The "System Libraries" of an executable work include anything, other
than the work as a whole, that (a) is included in the normal form of
packaging a Major Component, but which is not part of that Major
Component, and (b) serves only to enable use of the work with that
Major Component, or to implement a Standard Interface for which an
implementation is available to the public in source code form. A
"Major Component", in this context, means a major essential component
(kernel, window system, and so on) of the specific operating system
(if any) on which the executable work runs, or a compiler used to
produce the work, or an object code interpreter used to run it.
The "Corresponding Source" for a work in object code form means all
the source code needed to generate, install, and (for an executable
work) run the object code and to modify the work, including scripts to
control those activities. However, it does not include the work's
System Libraries, or general-purpose tools or generally available free
programs which are used unmodified in performing those activities but
which are not part of the work. For example, Corresponding Source
includes interface definition files associated with source files for
the work, and the source code for shared libraries and dynamically
linked subprograms that the work is specifically designed to require,
such as by intimate data communication or control flow between those
subprograms and other parts of the work.
The Corresponding Source need not include anything that users
can regenerate automatically from other parts of the Corresponding
Source.
The Corresponding Source for a work in source code form is that
same work.
2. Basic Permissions.
All rights granted under this License are granted for the term of
copyright on the Program, and are irrevocable provided the stated
conditions are met. This License explicitly affirms your unlimited
permission to run the unmodified Program. The output from running a
covered work is covered by this License only if the output, given its
content, constitutes a covered work. This License acknowledges your
rights of fair use or other equivalent, as provided by copyright law.
You may make, run and propagate covered works that you do not
convey, without conditions so long as your license otherwise remains
in force. You may convey covered works to others for the sole purpose
of having them make modifications exclusively for you, or provide you
with facilities for running those works, provided that you comply with
the terms of this License in conveying all material for which you do
not control copyright. Those thus making or running the covered works
for you must do so exclusively on your behalf, under your direction
and control, on terms that prohibit them from making any copies of
your copyrighted material outside their relationship with you.
Conveying under any other circumstances is permitted solely under
the conditions stated below. Sublicensing is not allowed; section 10
makes it unnecessary.
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
No covered work shall be deemed part of an effective technological
measure under any applicable law fulfilling obligations under article
11 of the WIPO copyright treaty adopted on 20 December 1996, or
similar laws prohibiting or restricting circumvention of such
measures.
When you convey a covered work, you waive any legal power to forbid
circumvention of technological measures to the extent such circumvention
is effected by exercising rights under this License with respect to
the covered work, and you disclaim any intention to limit operation or
modification of the work as a means of enforcing, against the work's
users, your or third parties' legal rights to forbid circumvention of
technological measures.
4. Conveying Verbatim Copies.
You may convey verbatim copies of the Program's source code as you
receive it, in any medium, provided that you conspicuously and
appropriately publish on each copy an appropriate copyright notice;
keep intact all notices stating that this License and any
non-permissive terms added in accord with section 7 apply to the code;
keep intact all notices of the absence of any warranty; and give all
recipients a copy of this License along with the Program.
You may charge any price or no price for each copy that you convey,
and you may offer support or warranty protection for a fee.
5. Conveying Modified Source Versions.
You may convey a work based on the Program, or the modifications to
produce it from the Program, in the form of source code under the
terms of section 4, provided that you also meet all of these conditions:
a) The work must carry prominent notices stating that you modified
it, and giving a relevant date.
b) The work must carry prominent notices stating that it is
released under this License and any conditions added under section
7. This requirement modifies the requirement in section 4 to
"keep intact all notices".
c) You must license the entire work, as a whole, under this
License to anyone who comes into possession of a copy. This
License will therefore apply, along with any applicable section 7
additional terms, to the whole of the work, and all its parts,
regardless of how they are packaged. This License gives no
permission to license the work in any other way, but it does not
invalidate such permission if you have separately received it.
d) If the work has interactive user interfaces, each must display
Appropriate Legal Notices; however, if the Program has interactive
interfaces that do not display Appropriate Legal Notices, your
work need not make them do so.
A compilation of a covered work with other separate and independent
works, which are not by their nature extensions of the covered work,
and which are not combined with it such as to form a larger program,
in or on a volume of a storage or distribution medium, is called an
"aggregate" if the compilation and its resulting copyright are not
used to limit the access or legal rights of the compilation's users
beyond what the individual works permit. Inclusion of a covered work
in an aggregate does not cause this License to apply to the other
parts of the aggregate.
6. Conveying Non-Source Forms.
You may convey a covered work in object code form under the terms
of sections 4 and 5, provided that you also convey the
machine-readable Corresponding Source under the terms of this License,
in one of these ways:
a) Convey the object code in, or embodied in, a physical product
(including a physical distribution medium), accompanied by the
Corresponding Source fixed on a durable physical medium
customarily used for software interchange.
b) Convey the object code in, or embodied in, a physical product
(including a physical distribution medium), accompanied by a
written offer, valid for at least three years and valid for as
long as you offer spare parts or customer support for that product
model, to give anyone who possesses the object code either (1) a
copy of the Corresponding Source for all the software in the
product that is covered by this License, on a durable physical
medium customarily used for software interchange, for a price no
more than your reasonable cost of physically performing this
conveying of source, or (2) access to copy the
Corresponding Source from a network server at no charge.
c) Convey individual copies of the object code with a copy of the
written offer to provide the Corresponding Source. This
alternative is allowed only occasionally and noncommercially, and
only if you received the object code with such an offer, in accord
with subsection 6b.
d) Convey the object code by offering access from a designated
place (gratis or for a charge), and offer equivalent access to the
Corresponding Source in the same way through the same place at no
further charge. You need not require recipients to copy the
Corresponding Source along with the object code. If the place to
copy the object code is a network server, the Corresponding Source
may be on a different server (operated by you or a third party)
that supports equivalent copying facilities, provided you maintain
clear directions next to the object code saying where to find the
Corresponding Source. Regardless of what server hosts the
Corresponding Source, you remain obligated to ensure that it is
available for as long as needed to satisfy these requirements.
e) Convey the object code using peer-to-peer transmission, provided
you inform other peers where the object code and Corresponding
Source of the work are being offered to the general public at no
charge under subsection 6d.
A separable portion of the object code, whose source code is excluded
from the Corresponding Source as a System Library, need not be
included in conveying the object code work.
A "User Product" is either (1) a "consumer product", which means any
tangible personal property which is normally used for personal, family,
or household purposes, or (2) anything designed or sold for incorporation
into a dwelling. In determining whether a product is a consumer product,
doubtful cases shall be resolved in favor of coverage. For a particular
product received by a particular user, "normally used" refers to a
typical or common use of that class of product, regardless of the status
of the particular user or of the way in which the particular user
actually uses, or expects or is expected to use, the product. A product
is a consumer product regardless of whether the product has substantial
commercial, industrial or non-consumer uses, unless such uses represent
the only significant mode of use of the product.
"Installation Information" for a User Product means any methods,
procedures, authorization keys, or other information required to install
and execute modified versions of a covered work in that User Product from
a modified version of its Corresponding Source. The information must
suffice to ensure that the continued functioning of the modified object
code is in no case prevented or interfered with solely because
modification has been made.
If you convey an object code work under this section in, or with, or
specifically for use in, a User Product, and the conveying occurs as
part of a transaction in which the right of possession and use of the
User Product is transferred to the recipient in perpetuity or for a
fixed term (regardless of how the transaction is characterized), the
Corresponding Source conveyed under this section must be accompanied
by the Installation Information. But this requirement does not apply
if neither you nor any third party retains the ability to install
modified object code on the User Product (for example, the work has
been installed in ROM).
The requirement to provide Installation Information does not include a
requirement to continue to provide support service, warranty, or updates
for a work that has been modified or installed by the recipient, or for
the User Product in which it has been modified or installed. Access to a
network may be denied when the modification itself materially and
adversely affects the operation of the network or violates the rules and
protocols for communication across the network.
Corresponding Source conveyed, and Installation Information provided,
in accord with this section must be in a format that is publicly
documented (and with an implementation available to the public in
source code form), and must require no special password or key for
unpacking, reading or copying.
7. Additional Terms.
"Additional permissions" are terms that supplement the terms of this
License by making exceptions from one or more of its conditions.
Additional permissions that are applicable to the entire Program shall
be treated as though they were included in this License, to the extent
that they are valid under applicable law. If additional permissions
apply only to part of the Program, that part may be used separately
under those permissions, but the entire Program remains governed by
this License without regard to the additional permissions.
When you convey a copy of a covered work, you may at your option
remove any additional permissions from that copy, or from any part of
it. (Additional permissions may be written to require their own
removal in certain cases when you modify the work.) You may place
additional permissions on material, added by you to a covered work,
for which you have or can give appropriate copyright permission.
Notwithstanding any other provision of this License, for material you
add to a covered work, you may (if authorized by the copyright holders of
that material) supplement the terms of this License with terms:
a) Disclaiming warranty or limiting liability differently from the
terms of sections 15 and 16 of this License; or
b) Requiring preservation of specified reasonable legal notices or
author attributions in that material or in the Appropriate Legal
Notices displayed by works containing it; or
c) Prohibiting misrepresentation of the origin of that material, or
requiring that modified versions of such material be marked in
reasonable ways as different from the original version; or
d) Limiting the use for publicity purposes of names of licensors or
authors of the material; or
e) Declining to grant rights under trademark law for use of some
trade names, trademarks, or service marks; or
f) Requiring indemnification of licensors and authors of that
material by anyone who conveys the material (or modified versions of
it) with contractual assumptions of liability to the recipient, for
any liability that these contractual assumptions directly impose on
those licensors and authors.
All other non-permissive additional terms are considered "further
restrictions" within the meaning of section 10. If the Program as you
received it, or any part of it, contains a notice stating that it is
governed by this License along with a term that is a further
restriction, you may remove that term. If a license document contains
a further restriction but permits relicensing or conveying under this
License, you may add to a covered work material governed by the terms
of that license document, provided that the further restriction does
not survive such relicensing or conveying.
If you add terms to a covered work in accord with this section, you
must place, in the relevant source files, a statement of the
additional terms that apply to those files, or a notice indicating
where to find the applicable terms.
Additional terms, permissive or non-permissive, may be stated in the
form of a separately written license, or stated as exceptions;
the above requirements apply either way.
8. Termination.
You may not propagate or modify a covered work except as expressly
provided under this License. Any attempt otherwise to propagate or
modify it is void, and will automatically terminate your rights under
this License (including any patent licenses granted under the third
paragraph of section 11).
However, if you cease all violation of this License, then your
license from a particular copyright holder is reinstated (a)
provisionally, unless and until the copyright holder explicitly and
finally terminates your license, and (b) permanently, if the copyright
holder fails to notify you of the violation by some reasonable means
prior to 60 days after the cessation.
Moreover, your license from a particular copyright holder is
reinstated permanently if the copyright holder notifies you of the
violation by some reasonable means, this is the first time you have
received notice of violation of this License (for any work) from that
copyright holder, and you cure the violation prior to 30 days after
your receipt of the notice.
Termination of your rights under this section does not terminate the
licenses of parties who have received copies or rights from you under
this License. If your rights have been terminated and not permanently
reinstated, you do not qualify to receive new licenses for the same
material under section 10.
9. Acceptance Not Required for Having Copies.
You are not required to accept this License in order to receive or
run a copy of the Program. Ancillary propagation of a covered work
occurring solely as a consequence of using peer-to-peer transmission
to receive a copy likewise does not require acceptance. However,
nothing other than this License grants you permission to propagate or
modify any covered work. These actions infringe copyright if you do
not accept this License. Therefore, by modifying or propagating a
covered work, you indicate your acceptance of this License to do so.
10. Automatic Licensing of Downstream Recipients.
Each time you convey a covered work, the recipient automatically
receives a license from the original licensors, to run, modify and
propagate that work, subject to this License. You are not responsible
for enforcing compliance by third parties with this License.
An "entity transaction" is a transaction transferring control of an
organization, or substantially all assets of one, or subdividing an
organization, or merging organizations. If propagation of a covered
work results from an entity transaction, each party to that
transaction who receives a copy of the work also receives whatever
licenses to the work the party's predecessor in interest had or could
give under the previous paragraph, plus a right to possession of the
Corresponding Source of the work from the predecessor in interest, if
the predecessor has it or can get it with reasonable efforts.
You may not impose any further restrictions on the exercise of the
rights granted or affirmed under this License. For example, you may
not impose a license fee, royalty, or other charge for exercise of
rights granted under this License, and you may not initiate litigation
(including a cross-claim or counterclaim in a lawsuit) alleging that
any patent claim is infringed by making, using, selling, offering for
sale, or importing the Program or any portion of it.
11. Patents.
A "contributor" is a copyright holder who authorizes use under this
License of the Program or a work on which the Program is based. The
work thus licensed is called the contributor's "contributor version".
A contributor's "essential patent claims" are all patent claims
owned or controlled by the contributor, whether already acquired or
hereafter acquired, that would be infringed by some manner, permitted
by this License, of making, using, or selling its contributor version,
but do not include claims that would be infringed only as a
consequence of further modification of the contributor version. For
purposes of this definition, "control" includes the right to grant
patent sublicenses in a manner consistent with the requirements of
this License.
Each contributor grants you a non-exclusive, worldwide, royalty-free
patent license under the contributor's essential patent claims, to
make, use, sell, offer for sale, import and otherwise run, modify and
propagate the contents of its contributor version.
In the following three paragraphs, a "patent license" is any express
agreement or commitment, however denominated, not to enforce a patent
(such as an express permission to practice a patent or covenant not to
sue for patent infringement). To "grant" such a patent license to a
party means to make such an agreement or commitment not to enforce a
patent against the party.
If you convey a covered work, knowingly relying on a patent license,
and the Corresponding Source of the work is not available for anyone
to copy, free of charge and under the terms of this License, through a
publicly available network server or other readily accessible means,
then you must either (1) cause the Corresponding Source to be so
available, or (2) arrange to deprive yourself of the benefit of the
patent license for this particular work, or (3) arrange, in a manner
consistent with the requirements of this License, to extend the patent
license to downstream recipients. "Knowingly relying" means you have
actual knowledge that, but for the patent license, your conveying the
covered work in a country, or your recipient's use of the covered work
in a country, would infringe one or more identifiable patents in that
country that you have reason to believe are valid.
If, pursuant to or in connection with a single transaction or
arrangement, you convey, or propagate by procuring conveyance of, a
covered work, and grant a patent license to some of the parties
receiving the covered work authorizing them to use, propagate, modify
or convey a specific copy of the covered work, then the patent license
you grant is automatically extended to all recipients of the covered
work and works based on it.
A patent license is "discriminatory" if it does not include within
the scope of its coverage, prohibits the exercise of, or is
conditioned on the non-exercise of one or more of the rights that are
specifically granted under this License. You may not convey a covered
work if you are a party to an arrangement with a third party that is
in the business of distributing software, under which you make payment
to the third party based on the extent of your activity of conveying
the work, and under which the third party grants, to any of the
parties who would receive the covered work from you, a discriminatory
patent license (a) in connection with copies of the covered work
conveyed by you (or copies made from those copies), or (b) primarily
for and in connection with specific products or compilations that
contain the covered work, unless you entered into that arrangement,
or that patent license was granted, prior to 28 March 2007.
Nothing in this License shall be construed as excluding or limiting
any implied license or other defenses to infringement that may
otherwise be available to you under applicable patent law.
12. No Surrender of Others' Freedom.
If conditions are imposed on you (whether by court order, agreement or
otherwise) that contradict the conditions of this License, they do not
excuse you from the conditions of this License. If you cannot convey a
covered work so as to satisfy simultaneously your obligations under this
License and any other pertinent obligations, then as a consequence you may
not convey it at all. For example, if you agree to terms that obligate you
to collect a royalty for further conveying from those to whom you convey
the Program, the only way you could satisfy both those terms and this
License would be to refrain entirely from conveying the Program.
13. Use with the GNU Affero General Public License.
Notwithstanding any other provision of this License, you have
permission to link or combine any covered work with a work licensed
under version 3 of the GNU Affero General Public License into a single
combined work, and to convey the resulting work. The terms of this
License will continue to apply to the part which is the covered work,
but the special requirements of the GNU Affero General Public License,
section 13, concerning interaction through a network will apply to the
combination as such.
14. Revised Versions of this License.
The Free Software Foundation may publish revised and/or new versions of
the GNU General Public License from time to time. Such new versions will
be similar in spirit to the present version, but may differ in detail to
address new problems or concerns.
Each version is given a distinguishing version number. If the
Program specifies that a certain numbered version of the GNU General
Public License "or any later version" applies to it, you have the
option of following the terms and conditions either of that numbered
version or of any later version published by the Free Software
Foundation. If the Program does not specify a version number of the
GNU General Public License, you may choose any version ever published
by the Free Software Foundation.
If the Program specifies that a proxy can decide which future
versions of the GNU General Public License can be used, that proxy's
public statement of acceptance of a version permanently authorizes you
to choose that version for the Program.
Later license versions may give you additional or different
permissions. However, no additional obligations are imposed on any
author or copyright holder as a result of your choosing to follow a
later version.
15. Disclaimer of Warranty.
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
16. Limitation of Liability.
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
SUCH DAMAGES.
17. Interpretation of Sections 15 and 16.
If the disclaimer of warranty and limitation of liability provided
above cannot be given local legal effect according to their terms,
reviewing courts shall apply local law that most closely approximates
an absolute waiver of all civil liability in connection with the
Program, unless a warranty or assumption of liability accompanies a
copy of the Program in return for a fee.
END OF TERMS AND CONDITIONS
How to Apply These Terms to Your New Programs
If you develop a new program, and you want it to be of the greatest
possible use to the public, the best way to achieve this is to make it
free software which everyone can redistribute and change under these terms.
To do so, attach the following notices to the program. It is safest
to attach them to the start of each source file to most effectively
state the exclusion of warranty; and each file should have at least
the "copyright" line and a pointer to where the full notice is found.
<one line to give the program's name and a brief idea of what it does.>
Copyright (C) <year> <name of author>
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
Also add information on how to contact you by electronic and paper mail.
If the program does terminal interaction, make it output a short
notice like this when it starts in an interactive mode:
<program> Copyright (C) <year> <name of author>
This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
This is free software, and you are welcome to redistribute it
under certain conditions; type `show c' for details.
The hypothetical commands `show w' and `show c' should show the appropriate
parts of the General Public License. Of course, your program's commands
might be different; for a GUI interface, you would use an "about box".
You should also get your employer (if you work as a programmer) or school,
if any, to sign a "copyright disclaimer" for the program, if necessary.
For more information on this, and how to apply and follow the GNU GPL, see
<http://www.gnu.org/licenses/>.
The GNU General Public License does not permit incorporating your program
into proprietary programs. If your program is a subroutine library, you
may consider it more useful to permit linking proprietary applications with
the library. If this is what you want to do, use the GNU Lesser General
Public License instead of this License. But first, please read
<http://www.gnu.org/philosophy/why-not-lgpl.html>.
================================================
FILE: README.md
================================================
<div align="center">
<a href="https://mdnice.com">
<img width="500" src="https://files.mdnice.com/logo.svg"/>
</a>
</div>
<h1 align="center">Markdown Nice</h1>
## 简介
- 支持自定义样式的 Markdown 编辑器
- 支持微信公众号、知乎和稀土掘金
- 欢迎[在线使用](https://mdnice.com/)
- 有疑问请参考 [如何有效的解决 mdnice 相关问题？](https://github.com/mdnice/markdown-nice/issues/163)
## 主题
[Markdown Nice 主题列表](https://product.mdnice.com/themes/)
> 欢迎提交主题，提供更多文章示例~~
## 关于
`mdnice`组建了**推文群**，欢迎反馈意见和公众号大佬们一起交流，关注公众号回复「排版」拉你入群。
| 入群码 |
| ------------------------------------------------------------------------------------------------ |
| <img width="360px" src="https://files.mdnice.com/pic/cd3ca20c-896f-4cfc-9bdd-c4c58e69ba26.jpg"/> |
## 友情链接
- [BlogHelper](https://github.com/ystcode/BlogHelper)：一键发布本地文章到主流博客平台的托盘助手
- [qrbtf](https://github.com/ciaochaos/qrbtf)：艺术二维码生成器
- [编程如画](https://draw.mdnice.com/)：「编程如画」博客
================================================
FILE: config/env.js
================================================
'use strict';
const fs = require('fs');
const path = require('path');
const paths = require('./paths');
// Make sure that including paths.js after env.js will read .env variables.
delete require.cache[require.resolve('./paths')];
const NODE_ENV = process.env.NODE_ENV;
if (!NODE_ENV) {
throw new Error(
'The NODE_ENV environment variable is required but was not specified.'
);
}
// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
var dotenvFiles = [
`${paths.dotenv}.${NODE_ENV}.local`,
`${paths.dotenv}.${NODE_ENV}`,
// Don't include `.env.local` for `test` environment
// since normally you expect tests to produce the same
// results for everyone
NODE_ENV !== 'test' && `${paths.dotenv}.local`,
paths.dotenv,
].filter(Boolean);
// Load environment variables from .env* files. Suppress warnings using silent
// if this file is missing. dotenv will never modify any environment variables
// that have already been set. Variable expansion is supported in .env files.
// https://github.com/motdotla/dotenv
// https://github.com/motdotla/dotenv-expand
dotenvFiles.forEach(dotenvFile => {
if (fs.existsSync(dotenvFile)) {
require('dotenv-expand')(
require('dotenv').config({
path: dotenvFile,
})
);
}
});
// We support resolving modules according to `NODE_PATH`.
// This lets you use absolute paths in imports inside large monorepos:
// https://github.com/facebook/create-react-app/issues/253.
// It works similar to `NODE_PATH` in Node itself:
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
// We also resolve them to make sure all tools using them work consistently.
const appDirectory = fs.realpathSync(process.cwd());
process.env.NODE_PATH = (process.env.NODE_PATH || '')
.split(path.delimiter)
.filter(folder => folder && !path.isAbsolute(folder))
.map(folder => path.resolve(appDirectory, folder))
.join(path.delimiter);
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in Webpack configuration.
const REACT_APP = /^REACT_APP_/i;
function getClientEnvironment(publicUrl) {
const raw = Object.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce(
(env, key) => {
env[key] = process.env[key];
return env;
},
{
// Useful for determining whether we’re running in production mode.
// Most importantly, it switches React into the correct mode.
NODE_ENV: process.env.NODE_ENV || 'development',
// Useful for resolving the correct path to static assets in `public`.
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// This should only be used as an escape hatch. Normally you would put
// images into the `src` and `import` them in code to get their paths.
PUBLIC_URL: publicUrl,
}
);
// Stringify all values so we can feed into Webpack DefinePlugin
const stringified = {
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
};
return { raw, stringified };
}
module.exports = getClientEnvironment;
================================================
FILE: config/jest/cssTransform.js
================================================
'use strict';
// This is a custom Jest transformer turning style imports into empty objects.
// http://facebook.github.io/jest/docs/en/webpack.html
module.exports = {
process() {
return 'module.exports = {};';
},
getCacheKey() {
// The output is always the same.
return 'cssTransform';
},
};
================================================
FILE: config/jest/fileTransform.js
================================================
'use strict';
const path = require('path');
// This is a custom Jest transformer turning file imports into filenames.
// http://facebook.github.io/jest/docs/en/webpack.html
module.exports = {
process(src, filename) {
const assetFilename = JSON.stringify(path.basename(filename));
if (filename.match(/\.svg$/)) {
return `module.exports = {
__esModule: true,
default: ${assetFilename},
ReactComponent: (props) => ({
$$typeof: Symbol.for('react.element'),
type: 'svg',
ref: null,
key: null,
props: Object.assign({}, props, {
children: ${assetFilename}
})
}),
};`;
}
return `module.exports = ${assetFilename};`;
},
};
================================================
FILE: config/paths.js
================================================
"use strict";
const path = require("path");
const fs = require("fs");
const url = require("url");
// Make sure any symlinks in the project folder are resolved:
// https://github.com/facebook/create-react-app/issues/637
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
const envPublicUrl = process.env.PUBLIC_URL;
function ensureSlash(inputPath, needsSlash) {
const hasSlash = inputPath.endsWith("/");
if (hasSlash && !needsSlash) {
return inputPath.substr(0, inputPath.length - 1);
} else if (!hasSlash && needsSlash) {
return `${inputPath}/`;
} else {
return inputPath;
}
}
const getPublicUrl = (appPackageJson) => envPublicUrl || require(appPackageJson).homepage;
// We use `PUBLIC_URL` environment variable or "homepage" field to infer
// "public path" at which the app is served.
// Webpack needs to know it to put the right <script> hrefs into HTML even in
// single-page apps that may serve index.html for nested URLs like /todos/42.
// We can't use a relative path in HTML because we don't want to load something
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : "/");
return ensureSlash(servedUrl, true);
}
const moduleFileExtensions = [
"web.mjs",
"mjs",
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
];
// Resolve file paths in the same order as webpack
const resolveModule = (resolveFn, filePath) => {
const extension = moduleFileExtensions.find((extension) => fs.existsSync(resolveFn(`${filePath}.${extension}`)));
if (extension) {
return resolveFn(`${filePath}.${extension}`);
}
return resolveFn(`${filePath}.js`);
};
// config after eject: we're in ./config/
module.exports = {
dotenv: resolveApp(".env"),
appPath: resolveApp("."),
appBuild: resolveApp("build"),
appPublic: resolveApp("public"),
appHtml: resolveApp("public/index.html"),
appIndexJs: resolveModule(resolveApp, "src/index"),
appLib: resolveModule(resolveApp, "src/Lib"),
appPackageJson: resolveApp("package.json"),
appSrc: resolveApp("src"),
appTsConfig: resolveApp("tsconfig.json"),
yarnLockFile: resolveApp("yarn.lock"),
testsSetup: resolveModule(resolveApp, "src/setupTests"),
proxySetup: resolveApp("src/setupProxy.js"),
appNodeModules: resolveApp("node_modules"),
publicUrl: getPublicUrl(resolveApp("package.json")),
servedPath: getServedPath(resolveApp("package.json")),
};
module.exports.moduleFileExtensions = moduleFileExtensions;
================================================
FILE: config/webpack.config.js
================================================
"use strict";
const fs = require("fs");
const path = require("path");
const webpack = require("webpack");
const resolve = require("resolve");
const PnpWebpackPlugin = require("pnp-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin");
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const safePostCssParser = require("postcss-safe-parser");
const ManifestPlugin = require("webpack-manifest-plugin");
const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin");
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
const WatchMissingNodeModulesPlugin = require("react-dev-utils/WatchMissingNodeModulesPlugin");
const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
const getCSSModuleLocalIdent = require("react-dev-utils/getCSSModuleLocalIdent");
const paths = require("./paths");
const getClientEnvironment = require("./env");
const ModuleNotFoundPlugin = require("react-dev-utils/ModuleNotFoundPlugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin-alt");
const typescriptFormatter = require("react-dev-utils/typescriptFormatter");
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== "false";
// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function(webpackEnv) {
const isEnvDevelopment = webpackEnv === "development";
const isEnvProduction = webpackEnv === "production";
// Webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
// In development, we always serve from the root. This makes config easier.
const publicPath = isEnvProduction ? paths.servedPath : isEnvDevelopment && "/";
// Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
const shouldUseRelativeAssetPaths = publicPath === "./";
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
const publicUrl = isEnvProduction ? publicPath.slice(0, -1) : isEnvDevelopment && "";
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve("style-loader"),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: Object.assign({}, shouldUseRelativeAssetPaths ? {publicPath: "../../"} : undefined),
},
{
loader: require.resolve("css-loader"),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve("postcss-loader"),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: "postcss",
plugins: () => [
require("postcss-flexbugs-fixes"),
require("postcss-preset-env")({
autoprefixer: {
flexbox: "no-2009",
},
stage: 3,
}),
],
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
});
}
return loaders;
};
return {
mode: isEnvProduction ? "production" : isEnvDevelopment && "development",
// Stop compilation early in production
bail: isEnvProduction,
devtool: isEnvProduction ? (shouldUseSourceMap ? "source-map" : false) : isEnvDevelopment && "eval-source-map",
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry: [
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
isEnvDevelopment && require.resolve("react-dev-utils/webpackHotDevClient"),
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
].filter(Boolean),
output: {
// The build folder.
path: isEnvProduction ? paths.appBuild : undefined,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction ? "static/js/[name].[chunkhash:8].js" : isEnvDevelopment && "static/js/bundle.js",
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? "static/js/[name].[chunkhash:8].chunk.js"
: isEnvDevelopment && "static/js/[name].chunk.js",
// We inferred the "public path" (such as / or /my-project) from homepage.
// We use "/" in development.
publicPath: publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction
? (info) => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, "/")
: isEnvDevelopment && ((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")),
},
optimization: {
minimize: isEnvProduction,
minimizer: [
// This is only used in production mode
new TerserPlugin({
terserOptions: {
parse: {
// we want terser to parse ecma 8 code. However, we don't want it
// to apply any minfication steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
// Disabled because of an issue with Terser breaking valid code:
// https://github.com/facebook/create-react-app/issues/5250
// Pending futher investigation:
// https://github.com/terser-js/terser/issues/120
inline: 2,
},
mangle: {
safari10: true,
},
output: {
ecma: 5,
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
},
},
// Use multi-process parallel running to improve the build speed
// Default number of concurrent runs: os.cpus().length - 1
parallel: true,
// Enable file caching
cache: true,
sourceMap: shouldUseSourceMap,
}),
// This is only used in production mode
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
parser: safePostCssParser,
map: shouldUseSourceMap
? {
// `inline: false` forces the sourcemap to be output into a
// separate file
inline: false,
// `annotation: true` appends the sourceMappingURL to the end of
// the css file, helping the browser find the sourcemap
annotation: true,
}
: false,
},
}),
],
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
splitChunks: {
chunks: "all",
name: false,
},
// Keep the runtime chunk separated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985
runtimeChunk: true,
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ["node_modules"].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebook/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: paths.moduleFileExtensions
.map((ext) => `.${ext}`)
.filter((ext) => useTypeScript || !ext.includes("ts")),
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
"react-native": "react-native-web",
},
plugins: [
// Adds support for installing with Plug'n'Play, leading to faster installs and adding
// guards against forgotten dependencies and such.
PnpWebpackPlugin,
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
resolveLoader: {
plugins: [
// Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
// from the current package.
PnpWebpackPlugin.moduleLoader(module),
],
},
module: {
strictExportPresence: true,
rules: [
// Disable require.ensure as it's not a standard language feature.
{parser: {requireEnsure: false}},
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve("url-loader"),
options: {
limit: 10000,
name: "static/media/[name].[hash:8].[ext]",
},
},
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve("babel-loader"),
options: {
customize: require.resolve("babel-preset-react-app/webpack-overrides"),
plugins: [
[
require.resolve("babel-plugin-named-asset-import"),
{
loaderMap: {
svg: {
ReactComponent: "@svgr/webpack?-svgo![path]",
},
},
},
],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
cacheCompression: isEnvProduction,
compact: isEnvProduction,
},
},
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve("babel-loader"),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [[require.resolve("babel-preset-react-app/dependencies"), {helpers: true}]],
cacheDirectory: true,
cacheCompression: isEnvProduction,
// If an error happens in a package, it's possible to be
// because it was compiled. Thus, we don't want the browser
// debugger to show the original code. Instead, the code
// being evaluated would be much more helpful.
sourceMaps: false,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
"sass-loader",
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
"sass-loader",
),
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
loader: require.resolve("file-loader"),
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx|md)$/, /\.html$/, /\.json$/],
options: {
name: "static/media/[name].[hash:8].[ext]",
},
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
{
loader: require.resolve("raw-loader"),
test: /\.md/i,
include: path.resolve('./src/template')
},
],
},
],
},
plugins: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined,
),
),
// Inlines the webpack runtime script. This script is too small to warrant
// a network request.
isEnvProduction && shouldInlineRuntimeChunk && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In production, it will be an empty string unless you specify "homepage"
// in `package.json`, in which case it will be the pathname of that URL.
// In development, this will be an empty string.
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// This gives some necessary context to module not found errors, such as
// the requesting resource.
new ModuleNotFoundPlugin(paths.appPath),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only):
isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240
isEnvDevelopment && new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebook/create-react-app/issues/186
isEnvDevelopment && new WatchMissingNodeModulesPlugin(paths.appNodeModules),
isEnvProduction &&
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "static/css/[name].[contenthash:8].css",
chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
}),
// Generate a manifest file which contains a mapping of all asset filenames
// to their corresponding output file so that tools can pick it up without
// having to parse `index.html`.
new ManifestPlugin({
fileName: "asset-manifest.json",
publicPath: publicPath,
}),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build.
isEnvProduction &&
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim: true,
skipWaiting: true,
exclude: [/\.map$/, /asset-manifest\.json$/],
importWorkboxFrom: 'local',
navigateFallback: publicUrl + '/index.html',
navigateFallbackBlacklist: [
// Exclude URLs starting with /_, as they're likely an API call
new RegExp("^/_"),
// Exclude URLs containing a dot, as they're likely a resource in
// public/ and not a SPA route
new RegExp("/[^/]+\\.[^/]+$"),
],
runtimeCaching: [
// 配置路由请求缓存 对应 workbox.routing.registerRoute
{
urlPattern: /.*\.js/, // 匹配文件
handler: "networkFirst", // 网络优先
},
{
urlPattern: /.*\.css/,
handler: "staleWhileRevalidate", // 缓存优先同时后台更新
options: {
// 这里可以设置 cacheName 和添加插件
plugins: [
{
cacheableResponse: {
statuses: [0, 200],
},
},
],
},
},
{
urlPattern: /.*\.(png|jpg|jpeg|svg|gif)/,
handler: "cacheFirst", // 缓存优先
options: {
cacheName: 'images',
expiration: {
maxAgeSeconds: 24 * 60 * 60, // 最长缓存时间,
maxEntries: 50, // 最大缓存图片数量
},
},
},
{
urlPattern: /.*\.html/,
handler: "networkFirst",
},
],
}),
// TypeScript type checking
useTypeScript &&
new ForkTsCheckerWebpackPlugin({
typescript: resolve.sync("typescript", {
basedir: paths.appNodeModules,
}),
async: false,
checkSyntacticErrors: true,
tsconfig: paths.appTsConfig,
compilerOptions: {
module: "esnext",
moduleResolution: "node",
resolveJsonModule: true,
isolatedModules: true,
noEmit: true,
jsx: "preserve",
},
reportFiles: [
"**",
"!**/*.json",
"!**/__tests__/**",
"!**/?(*.)(spec|test).*",
"!**/src/setupProxy.*",
"!**/src/setupTests.*",
],
watch: paths.appSrc,
silent: true,
formatter: typescriptFormatter,
}),
].filter(Boolean),
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
module: "empty",
dgram: "empty",
dns: "mock",
fs: "empty",
net: "empty",
tls: "empty",
child_process: "empty",
},
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
};
};
================================================
FILE: config/webpack.config.lib.js
================================================
"use strict";
const fs = require("fs");
const path = require("path");
const webpack = require("webpack");
const resolve = require("resolve");
const PnpWebpackPlugin = require("pnp-webpack-plugin");
const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const safePostCssParser = require("postcss-safe-parser");
const ManifestPlugin = require("webpack-manifest-plugin");
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
const WatchMissingNodeModulesPlugin = require("react-dev-utils/WatchMissingNodeModulesPlugin");
const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
const getCSSModuleLocalIdent = require("react-dev-utils/getCSSModuleLocalIdent");
const paths = require("./paths");
const getClientEnvironment = require("./env");
const ModuleNotFoundPlugin = require("react-dev-utils/ModuleNotFoundPlugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin-alt");
const typescriptFormatter = require("react-dev-utils/typescriptFormatter");
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== "false";
// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function(webpackEnv) {
const isEnvDevelopment = webpackEnv === "development";
const isEnvProduction = webpackEnv === "production";
// Webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
// In development, we always serve from the root. This makes config easier.
const publicPath = isEnvProduction ? paths.servedPath : isEnvDevelopment && "/";
// Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
const shouldUseRelativeAssetPaths = publicPath === "./";
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
const publicUrl = isEnvProduction ? publicPath.slice(0, -1) : isEnvDevelopment && "";
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve("style-loader"),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: Object.assign({}, shouldUseRelativeAssetPaths ? {publicPath: "../../"} : undefined),
},
{
loader: require.resolve("css-loader"),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve("postcss-loader"),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: "postcss",
plugins: () => [
require("postcss-flexbugs-fixes"),
require("postcss-preset-env")({
autoprefixer: {
flexbox: "no-2009",
},
stage: 3,
}),
],
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
});
}
return loaders;
};
return {
mode: isEnvProduction ? "production" : isEnvDevelopment && "development",
// Stop compilation early in production
bail: isEnvProduction,
devtool: isEnvProduction ? (shouldUseSourceMap ? "source-map" : false) : isEnvDevelopment && "eval-source-map",
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry: [
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
isEnvDevelopment && require.resolve("react-dev-utils/webpackHotDevClient"),
// Finally, this is your app's code:
paths.appLib,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
].filter(Boolean),
output: {
// The build folder.
path: isEnvProduction ? paths.appBuild : undefined,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction ? "static/js/[name].[chunkhash:8].js" : isEnvDevelopment && "static/js/bundle.js",
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? "static/js/[name].[chunkhash:8].chunk.js"
: isEnvDevelopment && "static/js/[name].chunk.js",
// We inferred the "public path" (such as / or /my-project) from homepage.
// We use "/" in development.
publicPath: publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction
? (info) => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, "/")
: isEnvDevelopment && ((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")),
},
optimization: {
minimize: isEnvProduction,
minimizer: [
// This is only used in production mode
new TerserPlugin({
terserOptions: {
parse: {
// we want terser to parse ecma 8 code. However, we don't want it
// to apply any minfication steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
// Disabled because of an issue with Terser breaking valid code:
// https://github.com/facebook/create-react-app/issues/5250
// Pending futher investigation:
// https://github.com/terser-js/terser/issues/120
inline: 2,
},
mangle: {
safari10: true,
},
output: {
ecma: 5,
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
},
},
// Use multi-process parallel running to improve the build speed
// Default number of concurrent runs: os.cpus().length - 1
parallel: true,
// Enable file caching
cache: true,
sourceMap: shouldUseSourceMap,
}),
// This is only used in production mode
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
parser: safePostCssParser,
map: shouldUseSourceMap
? {
// `inline: false` forces the sourcemap to be output into a
// separate file
inline: false,
// `annotation: true` appends the sourceMappingURL to the end of
// the css file, helping the browser find the sourcemap
annotation: true,
}
: false,
},
}),
],
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
splitChunks: {
chunks: "all",
name: false,
},
// Keep the runtime chunk separated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985
runtimeChunk: true,
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ["node_modules"].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebook/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: paths.moduleFileExtensions
.map((ext) => `.${ext}`)
.filter((ext) => useTypeScript || !ext.includes("ts")),
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
"react-native": "react-native-web",
},
plugins: [
// Adds support for installing with Plug'n'Play, leading to faster installs and adding
// guards against forgotten dependencies and such.
PnpWebpackPlugin,
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
resolveLoader: {
plugins: [
// Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
// from the current package.
PnpWebpackPlugin.moduleLoader(module),
],
},
module: {
strictExportPresence: true,
rules: [
// Disable require.ensure as it's not a standard language feature.
{parser: {requireEnsure: false}},
// First, run the linter.
// It's important to do this before Babel processes the JS.
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve("url-loader"),
options: {
limit: 10000,
name: "static/media/[name].[hash:8].[ext]",
},
},
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
use: [
"thread-loader",
{
loader: require.resolve("babel-loader"),
options: {
customize: require.resolve("babel-preset-react-app/webpack-overrides"),
plugins: [
[
require.resolve("babel-plugin-named-asset-import"),
{
loaderMap: {
svg: {
ReactComponent: "@svgr/webpack?-svgo![path]",
},
},
},
],
],
cacheDirectory: true,
cacheCompression: isEnvProduction,
compact: isEnvProduction,
},
},
],
},
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
use: [
"thread-loader",
{
loader: require.resolve("babel-loader"),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [[require.resolve("babel-preset-react-app/dependencies"), {helpers: true}]],
cacheDirectory: true,
cacheCompression: isEnvProduction,
sourceMaps: false,
},
},
],
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
"sass-loader",
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
"sass-loader",
),
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
loader: require.resolve("file-loader"),
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
options: {
name: "static/media/[name].[hash:8].[ext]",
},
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
],
},
],
},
plugins: [
// Generates an `index.html` file with the <script> injected.
// new HtmlWebpackPlugin(
// Object.assign(
// {},
// {
// inject: true,
// template: paths.appHtml,
// },
// isEnvProduction
// ? {
// minify: {
// removeComments: true,
// collapseWhitespace: true,
// removeRedundantAttributes: true,
// useShortDoctype: true,
// removeEmptyAttributes: true,
// removeStyleLinkTypeAttributes: true,
// keepClosingSlash: true,
// minifyJS: true,
// minifyCSS: true,
// minifyURLs: true,
// },
// }
// : undefined,
// ),
// ),
// Inlines the webpack runtime script. This script is too small to warrant
// a network request.
// isEnvProduction && shouldInlineRuntimeChunk && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In production, it will be an empty string unless you specify "homepage"
// in `package.json`, in which case it will be the pathname of that URL.
// In development, this will be an empty string.
// new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// This gives some necessary context to module not found errors, such as
// the requesting resource.
new ModuleNotFoundPlugin(paths.appPath),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only):
// isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240
isEnvDevelopment && new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebook/create-react-app/issues/186
isEnvDevelopment && new WatchMissingNodeModulesPlugin(paths.appNodeModules),
isEnvProduction &&
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "static/css/[name].[contenthash:8].css",
chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
}),
// Generate a manifest file which contains a mapping of all asset filenames
// to their corresponding output file so that tools can pick it up without
// having to parse `index.html`.
new ManifestPlugin({
fileName: "asset-manifest.json",
publicPath: publicPath,
}),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build.
isEnvProduction &&
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim: true,
exclude: [/\.map$/, /asset-manifest\.json$/],
importWorkboxFrom: "cdn",
navigateFallback: publicUrl + "/index.html",
navigateFallbackBlacklist: [
// Exclude URLs starting with /_, as they're likely an API call
new RegExp("^/_"),
// Exclude URLs containing a dot, as they're likely a resource in
// public/ and not a SPA route
new RegExp("/[^/]+\\.[^/]+$"),
],
}),
// TypeScript type checking
useTypeScript &&
new ForkTsCheckerWebpackPlugin({
typescript: resolve.sync("typescript", {
basedir: paths.appNodeModules,
}),
async: false,
checkSyntacticErrors: true,
tsconfig: paths.appTsConfig,
compilerOptions: {
module: "esnext",
moduleResolution: "node",
resolveJsonModule: true,
isolatedModules: true,
noEmit: true,
jsx: "preserve",
},
reportFiles: [
"**",
"!**/*.json",
"!**/__tests__/**",
"!**/?(*.)(spec|test).*",
"!**/src/setupProxy.*",
"!**/src/setupTests.*",
],
watch: paths.appSrc,
silent: true,
formatter: typescriptFormatter,
}),
].filter(Boolean),
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
module: "empty",
dgram: "empty",
dns: "mock",
fs: "empty",
net: "empty",
tls: "empty",
child_process: "empty",
},
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
};
};
================================================
FILE: config/webpackDevServer.config.js
================================================
'use strict';
const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
const ignoredFiles = require('react-dev-utils/ignoredFiles');
const paths = require('./paths');
const fs = require('fs');
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const host = process.env.HOST || '0.0.0.0';
module.exports = function(proxy, allowedHost) {
return {
// WebpackDevServer 2.4.3 introduced a security fix that prevents remote
// websites from potentially accessing local content through DNS rebinding:
// https://github.com/webpack/webpack-dev-server/issues/887
// https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
// However, it made several existing use cases such as development in cloud
// environment or subdomains in development significantly more complicated:
// https://github.com/facebook/create-react-app/issues/2271
// https://github.com/facebook/create-react-app/issues/2233
// While we're investigating better solutions, for now we will take a
// compromise. Since our WDS configuration only serves files in the `public`
// folder we won't consider accessing them a vulnerability. However, if you
// use the `proxy` feature, it gets more dangerous because it can expose
// remote code execution vulnerabilities in backends like Django and Rails.
// So we will disable the host check normally, but enable it if you have
// specified the `proxy` setting. Finally, we let you override it if you
// really know what you're doing with a special environment variable.
disableHostCheck:
!proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
// Enable gzip compression of generated files.
compress: true,
// Silence WebpackDevServer's own logs since they're generally not useful.
// It will still show compile warnings and errors with this setting.
clientLogLevel: 'none',
// By default WebpackDevServer serves physical files from current directory
// in addition to all the virtual build products that it serves from memory.
// This is confusing because those files won’t automatically be available in
// production build folder unless we copy them. However, copying the whole
// project directory is dangerous because we may expose sensitive files.
// Instead, we establish a convention that only files in `public` directory
// get served. Our build script will copy `public` into the `build` folder.
// In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
// Note that we only recommend to use `public` folder as an escape hatch
// for files like `favicon.ico`, `manifest.json`, and libraries that are
// for some reason broken when imported through Webpack. If you just want to
// use an image, put it in `src` and `import` it from JavaScript instead.
contentBase: paths.appPublic,
// By default files from `contentBase` will not trigger a page reload.
watchContentBase: true,
// Enable hot reloading server. It will provide /sockjs-node/ endpoint
// for the WebpackDevServer client so it can learn when the files were
// updated. The WebpackDevServer client is included as an entry point
// in the Webpack development configuration. Note that only changes
// to CSS are currently hot reloaded. JS changes will refresh the browser.
hot: true,
// It is important to tell WebpackDevServer to use the same "root" path
// as we specified in the config. In development, we always serve from /.
publicPath: '/',
// WebpackDevServer is noisy by default so we emit custom message instead
// by listening to the compiler events with `compiler.hooks[...].tap` calls above.
quiet: true,
// Reportedly, this avoids CPU overload on some systems.
// https://github.com/facebook/create-react-app/issues/293
// src/node_modules is not ignored to support absolute imports
// https://github.com/facebook/create-react-app/issues/1065
watchOptions: {
ignored: ignoredFiles(paths.appSrc),
},
// Enable HTTPS if the HTTPS environment variable is set to 'true'
https: protocol === 'https',
host,
overlay: false,
historyApiFallback: {
// Paths with dots should still use the history fallback.
// See https://github.com/facebook/create-react-app/issues/387.
disableDotRule: true,
},
public: allowedHost,
proxy,
before(app, server) {
if (fs.existsSync(paths.proxySetup)) {
// This registers user provided middleware for proxy reasons
require(paths.proxySetup)(app);
}
// This lets us fetch source contents from webpack for the error overlay
app.use(evalSourceMapMiddleware(server));
// This lets us open files from the runtime error overlay.
app.use(errorOverlayMiddleware());
// This service worker file is effectively a 'no-op' that will reset any
// previous service worker registered for the same host:port combination.
// We do this in development to avoid hitting the production cache if
// it used the same host and port.
// https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
app.use(noopServiceWorkerMiddleware());
},
};
};
================================================
FILE: main.js
================================================
// 引入electron并创建一个Browserwindow
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
// 保持window对象的全局引用,避免JavaScript对象被垃圾回收时,窗口被自动关闭.
let mainWindow
function createWindow () {
//创建浏览器窗口,宽高自定义具体大小你开心就好
mainWindow = new BrowserWindow({width: 800, height: 600})
// 加载应用----react 打包
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, './build/index.html'),
protocol: 'file:',
slashes: true
}))
// 加载应用----适用于 react 开发时项目
// mainWindow.loadURL('http://localhost:3000/');
// 打开开发者工具，默认不打开
// mainWindow.webContents.openDevTools()
// 关闭window时触发下列事件.
mainWindow.on('closed', function () {
mainWindow = null
})
}
// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.on('ready', createWindow)
// 所有窗口关闭时退出应用.
app.on('window-all-closed', function () {
// macOS中除非用户按下 `Cmd + Q` 显式退出,否则应用与菜单栏始终处于活动状态.
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// macOS中点击Dock图标时没有已打开的其余应用窗口时,则通常在应用中重建一个窗口
if (mainWindow === null) {
createWindow()
}
})
// 你可以在这个脚本中续写或者使用require引入独立的js文件.
================================================
FILE: package.json
================================================
{
"name": "markdown-nice",
"author": "mdnice",
"description": "a markdown editor with the function of style edition",
"version": "1.8.22",
"private": false,
"main": "lib/Lib.js",
"module": "lib/Lib.js",
"homepage": "https://www.mdnice.com",
"license": "GPL-3.0",
"typings": "./lib/index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/mdnice/markdown-nice"
},
"scripts": {
"start": "node scripts/start.js",
"watch": "node ./watch.js",
"build": "node --max_old_space_size=4096 scripts/build.js",
"test": "node scripts/test.js",
"analyze": "source-map-explorer build/static/js/*.js",
"lint": "eslint src --ext ts,tsx,js --fix",
"publish:npm": "cross-env NODE_ENV=production && rm -rf lib && mkdir lib && cross-env BABEL_ENV=production npx babel src --out-dir lib --copy-files",
"storybook": "npm run publish:npm && start-storybook -p 9001 -c .storybook"
},
"dependencies": {
"@sitdown/juejin": "^1.1.1",
"@sitdown/wechat": "^1.1.4",
"@sitdown/zhihu": "^1.1.2",
"@uiw/react-codemirror": "^1.0.28",
"ali-oss": "^6.1.1",
"antd": "^3.15.1",
"axios": "^0.18.0",
"diff-match-patch": "^1.0.4",
"highlight.js": "^9.15.6",
"juice": "^5.2.0",
"lodash.debounce": "^4.0.8",
"lodash.throttle": "^4.1.1",
"markdown-it": "^8.4.2",
"markdown-it-deflist": "^2.0.3",
"markdown-it-footnote": "^3.0.1",
"markdown-it-implicit-figures": "^0.9.0",
"markdown-it-imsize": "^2.0.1",
"markdown-it-katex": "^2.0.3",
"markdown-it-ruby": "^0.1.1",
"markdown-it-table-of-contents": "^0.4.4",
"mathjax": "^3.0.1",
"mobx": "^5.9.0",
"mobx-react": "^5.4.3",
"prettier": "^1.19.1",
"qiniu-js": "^2.5.4",
"react": "16.10.2",
"react-dom": "16.10.2",
"react-helmet": "^5.2.1",
"sitdown": "^1.1.3"
},
"devDependencies": {
"@babel/cli": "^7.6.2",
"@babel/core": "7.2.2",
"@storybook/react": "^4.1.11",
"@svgr/webpack": "^4.1.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^9.0.0",
"babel-jest": "23.6.0",
"babel-loader": "8.0.5",
"babel-plugin-inline-import": "^3.0.0",
"babel-plugin-named-asset-import": "^0.3.1",
"babel-preset-react-app": "^7.0.1",
"bfj": "6.1.1",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"chalk": "^2.4.2",
"chokidar": "^3.2.1",
"cross-env": "^6.0.3",
"css-loader": "^2.1.1",
"dotenv": "6.0.0",
"dotenv-expand": "4.2.0",
"eslint": "^6.5.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.3.0",
"eslint-config-react-app": "^3.0.7",
"eslint-loader": "^2.1.1",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-flowtype": "2.50.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-react": "^7.12.4",
"file-loader": "2.0.0",
"fork-ts-checker-webpack-plugin-alt": "0.4.14",
"fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-alpha.2",
"husky": "^3.0.7",
"identity-obj-proxy": "3.0.0",
"jest": "23.6.0",
"jest-pnp-resolver": "1.0.2",
"jest-resolve": "23.6.0",
"jest-watch-typeahead": "^0.2.1",
"lint-staged": "^9.4.0",
"mini-css-extract-plugin": "0.5.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.2.1",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.5.0",
"postcss-safe-parser": "4.0.1",
"pretty-quick": "^1.11.1",
"raw-loader": "^4.0.0",
"react-app-polyfill": "^0.2.1",
"react-dev-utils": "^7.0.3",
"resolve": "1.10.0",
"sass-loader": "7.1.0",
"shelljs": "^0.8.3",
"source-map-explorer": "^2.0.1",
"style-loader": "0.23.1",
"styled-jsx": "^3.2.1",
"terser-webpack-plugin": "1.2.2",
"thread-loader": "^2.1.3",
"to-string-loader": "^1.1.5",
"url-loader": "1.1.2",
"webpack": "4.28.3",
"webpack-dev-server": "3.1.14",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "3.6.3"
},
"build": {
"productName": "Markdown Nice",
"appId": "com.mdnice.www",
"mac": {
"target": [
"dmg",
"zip"
]
},
"win": {
"target": [
"nsis",
"zip"
]
},
"files": [
"build",
"main.js",
"package.json"
]
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"resolver": "jest-pnp-resolver",
"setupFiles": [
"react-app-polyfill/jsdom"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
],
"testEnvironment": "jsdom",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": []
},
"babel": {
"presets": [
"@babel/react"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
],
"env": {
"production": {
"plugins": [
[
"babel-plugin-inline-import",
{
"extensions": [
".md"
]
}
]
]
}
}
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{jsx,txs,ts,js,json}": [
"prettier --write",
"eslint --fix",
"git add"
]
}
}
================================================
FILE: public/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>让微信排版变Nice</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
================================================
FILE: public/manifest.json
================================================
{
"short_name": "Markdown Nice",
"name": "Markdown Nice",
"icons": [
{
"sizes": "128x128",
"type": "image/png"
},
{
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
================================================
FILE: scripts/build.js
================================================
'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
throw err;
});
// Ensure environment variables are read.
require('../config/env');
const path = require('path');
const chalk = require('react-dev-utils/chalk');
const fs = require('fs-extra');
const webpack = require('webpack');
const bfj = require('bfj');
const configFactory = require('../config/webpack.config');
const paths = require('../config/paths');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
const printBuildError = require('react-dev-utils/printBuildError');
const measureFileSizesBeforeBuild =
FileSizeReporter.measureFileSizesBeforeBuild;
const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
const useYarn = fs.existsSync(paths.yarnLockFile);
// These sizes are pretty large. We'll warn for bundles exceeding them.
const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
const isInteractive = process.stdout.isTTY;
// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
process.exit(1);
}
// Process CLI arguments
const argv = process.argv.slice(2);
const writeStatsJson = argv.indexOf('--stats') !== -1;
// Generate configuration
const config = configFactory('production');
// We require that you explicitly set browsers and do not fall back to
// browserslist defaults.
const { checkBrowsers } = require('react-dev-utils/browsersHelper');
checkBrowsers(paths.appPath, isInteractive)
.then(() => {
// First, read the current file sizes in build directory.
// This lets us display how much they changed later.
return measureFileSizesBeforeBuild(paths.appBuild);
})
.then(previousFileSizes => {
// Remove all content but keep the directory so that
// if you're in it, you don't end up in Trash
fs.emptyDirSync(paths.appBuild);
// Merge with the public folder
copyPublicFolder();
// Start the webpack build
return build(previousFileSizes);
})
.then(
({ stats, previousFileSizes, warnings }) => {
if (warnings.length) {
console.log(chalk.yellow('Compiled with warnings.\n'));
console.log(warnings.join('\n\n'));
console.log(
'\nSearch for the ' +
chalk.underline(chalk.yellow('keywords')) +
' to learn more about each warning.'
);
console.log(
'To ignore, add ' +
chalk.cyan('// eslint-disable-next-line') +
' to the line before.\n'
);
} else {
console.log(chalk.green('Compiled successfully.\n'));
}
console.log('File sizes after gzip:\n');
printFileSizesAfterBuild(
stats,
previousFileSizes,
paths.appBuild,
WARN_AFTER_BUNDLE_GZIP_SIZE,
WARN_AFTER_CHUNK_GZIP_SIZE
);
console.log();
const appPackage = require(paths.appPackageJson);
const publicUrl = paths.publicUrl;
const publicPath = config.output.publicPath;
const buildFolder = path.relative(process.cwd(), paths.appBuild);
printHostingInstructions(
appPackage,
publicUrl,
publicPath,
buildFolder,
useYarn
);
},
err => {
console.log(chalk.red('Failed to compile.\n'));
printBuildError(err);
process.exit(1);
}
)
.catch(err => {
if (err && err.message) {
console.log(err.message);
}
process.exit(1);
});
// Create the production build and print the deployment instructions.
function build(previousFileSizes) {
console.log('Creating an optimized production build...');
let compiler = webpack(config);
return new Promise((resolve, reject) => {
compiler.run((err, stats) => {
let messages;
if (err) {
if (!err.message) {
return reject(err);
}
messages = formatWebpackMessages({
errors: [err.message],
warnings: [],
});
} else {
messages = formatWebpackMessages(
stats.toJson({ all: false, warnings: true, errors: true })
);
}
if (messages.errors.length) {
// Only keep the first error. Others are often indicative
// of the same problem, but confuse the reader with noise.
if (messages.errors.length > 1) {
messages.errors.length = 1;
}
return reject(new Error(messages.errors.join('\n\n')));
}
if (
process.env.CI &&
(typeof process.env.CI !== 'string' ||
process.env.CI.toLowerCase() !== 'false') &&
messages.warnings.length
) {
console.log(
chalk.yellow(
'\nTreating warnings as errors because process.env.CI = true.\n' +
'Most CI servers set it automatically.\n'
)
);
return reject(new Error(messages.warnings.join('\n\n')));
}
const resolveArgs = {
stats,
previousFileSizes,
warnings: messages.warnings,
};
if (writeStatsJson) {
return bfj
.write(paths.appBuild + '/bundle-stats.json', stats.toJson())
.then(() => resolve(resolveArgs))
.catch(error => reject(new Error(error)));
}
return resolve(resolveArgs);
});
});
}
function copyPublicFolder() {
fs.copySync(paths.appPublic, paths.appBuild, {
dereference: true,
filter: file => file !== paths.appHtml,
});
}
================================================
FILE: scripts/start.js
================================================
'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
throw err;
});
// Ensure environment variables are read.
require('../config/env');
const fs = require('fs');
const chalk = require('react-dev-utils/chalk');
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const clearConsole = require('react-dev-utils/clearConsole');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const {
choosePort,
createCompiler,
prepareProxy,
prepareUrls,
} = require('react-dev-utils/WebpackDevServerUtils');
const openBrowser = require('react-dev-utils/openBrowser');
const paths = require('../config/paths');
const configFactory = require('../config/webpack.config');
const createDevServerConfig = require('../config/webpackDevServer.config');
const useYarn = fs.existsSync(paths.yarnLockFile);
const isInteractive = process.stdout.isTTY;
// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
process.exit(1);
}
// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';
if (process.env.HOST) {
console.log(
chalk.cyan(
`Attempting to bind to HOST environment variable: ${chalk.yellow(
chalk.bold(process.env.HOST)
)}`
)
);
console.log(
`If this was unintentional, check that you haven't mistakenly set it in your shell.`
);
console.log(
`Learn more here: ${chalk.yellow('http://bit.ly/CRA-advanced-config')}`
);
console.log();
}
// We require that you explictly set browsers and do not fall back to
// browserslist defaults.
const { checkBrowsers } = require('react-dev-utils/browsersHelper');
checkBrowsers(paths.appPath, isInteractive)
.then(() => {
// We attempt to use the default port but if it is busy, we offer the user to
// run on a different port. `choosePort()` Promise resolves to the next free port.
return choosePort(HOST, DEFAULT_PORT);
})
.then(port => {
if (port == null) {
// We have not found a port.
return;
}
const config = configFactory('development');
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const appName = require(paths.appPackageJson).name;
const urls = prepareUrls(protocol, HOST, port);
// Create a webpack compiler that is configured with custom messages.
const compiler = createCompiler(webpack, config, appName, urls, useYarn);
// Load proxy config
const proxySetting = require(paths.appPackageJson).proxy;
const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
// Serve webpack assets generated by the compiler over a web server.
const serverConfig = createDevServerConfig(
proxyConfig,
urls.lanUrlForConfig
);
const devServer = new WebpackDevServer(compiler, serverConfig);
// Launch WebpackDevServer.
devServer.listen(port, HOST, err => {
if (err) {
return console.log(err);
}
if (isInteractive) {
clearConsole();
}
console.log(chalk.cyan('Starting the development server...\n'));
openBrowser(urls.localUrlForBrowser);
});
['SIGINT', 'SIGTERM'].forEach(function(sig) {
process.on(sig, function() {
devServer.close();
process.exit();
});
});
})
.catch(err => {
if (err && err.message) {
console.log(err.message);
}
process.exit(1);
});
================================================
FILE: scripts/test.js
================================================
'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'test';
process.env.NODE_ENV = 'test';
process.env.PUBLIC_URL = '';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
throw err;
});
// Ensure environment variables are read.
require('../config/env');
const jest = require('jest');
const execSync = require('child_process').execSync;
let argv = process.argv.slice(2);
function isInGitRepository() {
try {
execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
return true;
} catch (e) {
return false;
}
}
function isInMercurialRepository() {
try {
execSync('hg --cwd . root', { stdio: 'ignore' });
return true;
} catch (e) {
return false;
}
}
// Watch unless on CI, in coverage mode, explicitly adding `--no-watch`,
// or explicitly running all tests
if (
!process.env.CI &&
argv.indexOf('--coverage') === -1 &&
argv.indexOf('--no-watch') === -1 &&
argv.indexOf('--watchAll') === -1
) {
// https://github.com/facebook/create-react-app/issues/5210
const hasSourceControl = isInGitRepository() || isInMercurialRepository();
argv.push(hasSourceControl ? '--watch' : '--watchAll');
}
// Jest doesn't have this option so we'll remove it
if (argv.indexOf('--no-watch') !== -1) {
argv = argv.filter(arg => arg !== '--no-watch');
}
jest.run(argv);
================================================
FILE: src/App.css
================================================
.nice-app {
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
font-family: "PingFang SC", BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serifhtml, body;
font-size: 16px;
}
.nice-text-container {
display: flex;
height: calc(100vh - 50px);
width: 100%;
}
.nice-text-container-immersive {
display: flex;
height: 100vh;
width: 100%;
}
.nice-md-editing-immersive {
padding: 0px;
width: 100%;
}
.nice-md-editing-immersive .CodeMirror-lines {
padding: 20px;
}
@media screen and (min-width: 768px) {
.nice-md-editing-immersive .CodeMirror-lines {
padding: 20px 10%;
}
}
@media screen and (min-width: 1024px) {
.nice-md-editing-immersive .CodeMirror-lines {
padding: 20px 15%;
}
}
/* 编辑器最多会被分成三份width:33.3%，当两份时根据flex-grow:1伸展 */
.nice-md-editing,
.nice-style-editing {
position: relative;
width: 33.3%;
flex-grow: 1;
word-wrap: break-word;
z-index: 1;
}
.nice-marked-text {
display: flex;
justify-content: center;
width: 33.3%;
flex-grow: 1;
padding: 20px;
word-wrap: break-word;
position: relative;
}
.nice-marked-text-pc {
padding: 0;
}
.nice-wx-box {
overflow-y: auto;
padding: 25px 20px;
height: 100%;
width: 375px;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
}
.nice-wx-box-pc {
width: 100%;
padding: 20px 35px 20px 20px;
box-shadow: none;
}
.nice-style-editing-hide {
display: none;
}
.nice-md-editing-hide {
display: none;
}
.nice-marked-text-hide {
display: none;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
border-radius: 3px;
background: rgba(0, 0, 0, 0.06);
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
}
::-webkit-scrollbar-thumb {
border-radius: 3px;
background: rgba(0, 0, 0, 0.12);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}
@media print {
.nice-md-editing {
display: none;
}
.nice-navbar {
display: none;
}
.nice-sidebar {
display: none;
}
.nice-wx-box {
overflow: visible;
box-shadow: none;
width: 100%;
}
.nice-style-editing {
display: none;
}
#nice-rich-text {
padding: 0 !important;
}
.nice-footer-container {
display: none;
}
}
================================================
FILE: src/App.js
================================================
import React, {Component} from "react";
import CodeMirror from "@uiw/react-codemirror";
import "codemirror/addon/search/searchcursor";
import "codemirror/keymap/sublime";
import "antd/dist/antd.css";
import {observer, inject} from "mobx-react";
import classnames from "classnames";
import throttle from "lodash.throttle";
import Dialog from "./layout/Dialog";
import Navbar from "./layout/Navbar";
import Footer from "./layout/Footer";
import Sidebar from "./layout/Sidebar";
import StyleEditor from "./layout/StyleEditor";
import EditorMenu from "./layout/EditorMenu";
import SearchBox from "./component/SearchBox";
import "./App.css";
import "./utils/mdMirror.css";
import {
LAYOUT_ID,
BOX_ID,
IMAGE_HOSTING_NAMES,
IMAGE_HOSTING_TYPE,
MJX_DATA_FORMULA,
MJX_DATA_FORMULA_TYPE,
MAX_MD_NUMBER,
THROTTLE_MATHJAX_TIME,
THROTTLE_MD_RENDER_TIME,
} from "./utils/constant";
import {markdownParser, updateMathjax} from "./utils/helper";
import pluginCenter from "./utils/pluginCenter";
import appContext from "./utils/appContext";
import {uploadAdaptor} from "./utils/imageHosting";
import bindHotkeys, {betterTab, rightClick} from "./utils/hotkey";
import {message} from "antd";
@inject("content")
@inject("navbar")
@inject("footer")
@inject("view")
@inject("dialog")
@inject("imageHosting")
@observer
class App extends Component {
constructor(props) {
super(props);
this.scale = 1;
this.handleUpdateMathjax = throttle(updateMathjax, THROTTLE_MATHJAX_TIME);
this.handleThrottleChange = throttle(this.handleChange, THROTTLE_MD_RENDER_TIME);
this.state = {
focus: false,
};
}
componentDidMount() {
document.addEventListener("fullscreenchange", this.solveScreenChange);
document.addEventListener("webkitfullscreenchange", this.solveScreenChange);
document.addEventListener("mozfullscreenchange", this.solveScreenChange);
document.addEventListener("MSFullscreenChange", this.solveScreenChange);
try {
window.MathJax = {
tex: {
inlineMath: [["$", "$"]],
displayMath: [["$$", "$$"]],
tags: "ams",
},
svg: {
fontCache: "none",
},
options: {
renderActions: {
addMenu: [0, "", ""],
addContainer: [
190,
(doc) => {
for (const math of doc.math) {
this.addContainer(math, doc);
}
},
this.addContainer,
],
},
},
};
// eslint-disable-next-line
require("mathjax/es5/tex-svg-full");
pluginCenter.mathjax = true;
} catch (e) {
console.log(e);
}
this.setEditorContent();
this.setCustomImageHosting();
}
componentDidUpdate() {
if (pluginCenter.mathjax) {
this.handleUpdateMathjax();
}
}
componentWillUnmount() {
document.removeEventListener("fullscreenchange", this.solveScreenChange);
document.removeEventListener("webkitfullscreenchange", this.solveScreenChange);
document.removeEventListener("mozfullscreenchange", this.solveScreenChange);
document.removeEventListener("MSFullscreenChange", this.solveScreenChange);
}
setCustomImageHosting = () => {
if (this.props.useImageHosting === undefined) {
return;
}
const {url, name, isSmmsOpen, isQiniuyunOpen, isAliyunOpen, isGiteeOpen, isGitHubOpen} = this.props.useImageHosting;
if (name) {
this.props.imageHosting.setHostingUrl(url);
this.props.imageHosting.setHostingName(name);
this.props.imageHosting.addImageHosting(name);
}
if (isSmmsOpen) {
this.props.imageHosting.addImageHosting(IMAGE_HOSTING_NAMES.smms);
}
if (isAliyunOpen) {
this.props.imageHosting.addImageHosting(IMAGE_HOSTING_NAMES.aliyun);
}
if (isQiniuyunOpen) {
this.props.imageHosting.addImageHosting(IMAGE_HOSTING_NAMES.qiniuyun);
}
if (isGiteeOpen) {
this.props.imageHosting.addImageHosting(IMAGE_HOSTING_NAMES.gitee);
}
if (isGitHubOpen) {
this.props.imageHosting.addImageHosting(IMAGE_HOSTING_NAMES.github);
}
// 第一次进入没有默认图床时
if (window.localStorage.getItem(IMAGE_HOSTING_TYPE) === null) {
let type;
if (name) {
type = name;
} else if (isSmmsOpen) {
type = IMAGE_HOSTING_NAMES.smms;
} else if (isAliyunOpen) {
type = IMAGE_HOSTING_NAMES.aliyun;
} else if (isQiniuyunOpen) {
type = IMAGE_HOSTING_NAMES.qiniuyun;
} else if (isGiteeOpen) {
type = IMAGE_HOSTING_NAMES.isGitee;
}
this.props.imageHosting.setType(type);
window.localStorage.setItem(IMAGE_HOSTING_TYPE, type);
}
};
setEditorContent = () => {
const {defaultText} = this.props;
if (defaultText) {
this.props.content.setContent(defaultText);
}
};
setCurrentIndex(index) {
this.index = index;
}
solveScreenChange = () => {
const {isImmersiveEditing} = this.props.view;
this.props.view.setImmersiveEditing(!isImmersiveEditing);
};
getInstance = (instance) => {
instance.editor.on("inputRead", function(cm, event) {
if (event.origin === "paste") {
var text = event.text[0]; // pasted string
var new_text = ""; // any operations here
cm.refresh();
const {length} = cm.getSelections();
// my first idea was
// note: for multiline strings may need more complex calculations
cm.replaceRange(new_text, event.from, {line: event.from.line, ch: event.from.ch + text.length});
// first solution did'nt work (before i guess to call refresh) so i tried that way, works too
if (length === 1) {
cm.execCommand("undo");
}
// cm.setCursor(event.from);
cm.replaceSelection(new_text);
}
});
if (instance) {
this.props.content.setMarkdownEditor(instance.editor);
}
};
handleScroll = () => {
if (this.props.navbar.isSyncScroll) {
const {markdownEditor} = this.props.content;
const cmData = markdownEditor.getScrollInfo();
const editorToTop = cmData.top;
const editorScrollHeight = cmData.height - cmData.clientHeight;
this.scale = (this.previewWrap.offsetHeight - this.previewContainer.offsetHeight + 55) / editorScrollHeight;
if (this.index === 1) {
this.previewContainer.scrollTop = editorToTop * this.scale;
} else {
this.editorTop = this.previewContainer.scrollTop / this.scale;
markdownEditor.scrollTo(null, this.editorTop);
}
}
};
handleChange = (editor) => {
if (this.state.focus) {
const content = editor.getValue();
if (content.length > MAX_MD_NUMBER) {
message.error(`字符数超过 ${MAX_MD_NUMBER}`);
return;
}
this.props.content.setContent(content);
this.props.onTextChange && this.props.onTextChange(content);
}
};
handleFocus = (editor) => {
this.setState({
focus: true,
});
this.props.onTextFocus && this.props.onTextFocus(editor.getValue());
};
handleBlur = (editor) => {
this.setState({
focus: false,
});
this.props.onTextBlur && this.props.onTextBlur(editor.getValue());
};
getStyleInstance = (instance) => {
if (instance) {
this.styleEditor = instance.editor;
this.styleEditor.on("keyup", (cm, e) => {
if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) {
cm.showHint(e);
}
});
}
};
handleDrop = (instance, e) => {
// e.preventDefault();
// console.log(e.dataTransfer.files[0]);
if (!(e.dataTransfer && e.dataTransfer.files)) {
return;
}
for (let i = 0; i < e.dataTransfer.files.length; i++) {
// console.log(e.dataTransfer.files[i]);
uploadAdaptor({file: e.dataTransfer.files[i], content: this.props.content});
}
};
handlePaste = (instance, e) => {
const cbData = e.clipboardData;
const insertPasteContent = (cm, content) => {
const {length} = cm.getSelections();
cm.replaceSelections(Array(length).fill(content));
this.setState(
{
focus: true,
},
() => {
this.handleThrottleChange(cm);
},
);
};
if (e.clipboardData && e.clipboardData.files) {
for (let i = 0; i < e.clipboardData.files.length; i++) {
uploadAdaptor({file: e.clipboardData.files[i], content: this.props.content});
}
}
if (cbData) {
const html = cbData.getData("text/html");
const text = cbData.getData("TEXT");
insertPasteContent(instance, text);
if (html) {
this.props.footer.setPasteHtmlChecked(true);
this.props.footer.setPasteHtml(html);
this.props.footer.setPasteText(text);
} else {
this.props.footer.setPasteHtmlChecked(false);
}
}
};
addContainer(math, doc) {
const tag = "span";
const spanClass = math.display ? "span-block-equation" : "span-inline-equation";
const cls = math.display ? "block-equation" : "inline-equation";
math.typesetRoot.className = cls;
math.typesetRoot.setAttribute(MJX_DATA_FORMULA, math.math);
math.typesetRoot.setAttribute(MJX_DATA_FORMULA_TYPE, cls);
math.typesetRoot = doc.adaptor.node(tag, {class: spanClass, style: "cursor:pointer"}, [math.typesetRoot]);
}
render() {
const {previewType} = this.props.navbar;
const {isEditAreaOpen, isPreviewAreaOpen, isStyleEditorOpen, isImmersiveEditing} = this.props.view;
const {isSearchOpen} = this.props.dialog;
const parseHtml = markdownParser.render(this.props.content.content);
const mdEditingClass = classnames({
"nice-md-editing": !isImmersiveEditing,
"nice-md-editing-immersive": isImmersiveEditing,
"nice-md-editing-hide": !isEditAreaOpen,
});
const styleEditingClass = classnames({
"nice-style-editing": true,
"nice-style-editing-hide": isImmersiveEditing,
});
const richTextClass = classnames({
"nice-marked-text": true,
"nice-marked-text-pc": previewType === "pc",
"nice-marked-text-hide": isImmersiveEditing || !isPreviewAreaOpen,
});
const richTextBoxClass = classnames({
"nice-wx-box": true,
"nice-wx-box-pc": previewType === "pc",
});
const textContainerClass = classnames({
"nice-text-container": !isImmersiveEditing,
"nice-text-container-immersive": isImmersiveEditing,
});
return (
<appContext.Consumer>
{({defaultTitle, onStyleChange, onStyleBlur, onStyleFocus, token}) => (
<div className="nice-app">
<Navbar title={defaultTitle} token={token} />
<div className={textContainerClass}>
<div id="nice-md-editor" className={mdEditingClass} onMouseOver={(e) => this.setCurrentIndex(1, e)}>
{isSearchOpen && <SearchBox />}
<CodeMirror
value={this.props.content.content}
options={{
theme: "md-mirror",
keyMap: "sublime",
mode: "markdown",
lineWrapping: true,
lineNumbers: false,
extraKeys: {
...bindHotkeys(this.props.content, this.props.dialog),
Tab: betterTab,
RightClick: rightClick,
},
}}
onChange={this.handleThrottleChange}
onScroll={this.handleScroll}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
onDrop={this.handleDrop}
onPaste={this.handlePaste}
ref={this.getInstance}
/>
</div>
<div id="nice-rich-text" className={richTextClass} onMouseOver={(e) => this.setCurrentIndex(2, e)}>
<Sidebar />
<div
id={BOX_ID}
className={richTextBoxClass}
onScroll={this.handleScroll}
ref={(node) => {
this.previewContainer = node;
}}
>
<section
id={LAYOUT_ID}
data-tool="mdnice编辑器"
data-website="https://www.mdnice.com"
dangerouslySetInnerHTML={{
__html: parseHtml,
}}
ref={(node) => {
this.previewWrap = node;
}}
/>
</div>
</div>
{isStyleEditorOpen && (
<div id="nice-style-editor" className={styleEditingClass}>
<StyleEditor onStyleChange={onStyleChange} onStyleBlur={onStyleBlur} onStyleFocus={onStyleFocus} />
</div>
)}
<Dialog />
<EditorMenu />
</div>
<Footer />
</div>
)}
</appContext.Consumer>
);
}
}
export default App;
================================================
FILE: src/App.test.js
================================================
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
================================================
FILE: src/Lib.js
================================================
import React, {Component} from "react";
import PropTypes from "prop-types";
import {Result} from "antd";
import {Provider} from "mobx-react";
import "./index.css";
import App from "./App";
import content from "./store/content";
import userInfo from "./store/userInfo";
import navbar from "./store/navbar";
import footer from "./store/footer";
import dialog from "./store/dialog";
import imageHosting from "./store/imageHosting";
import view from "./store/view";
import {isPC} from "./utils/helper";
import appContext from "./utils/appContext";
import SvgIcon from "./icon";
import {solveWeChatMath, solveZhihuMath, solveHtml} from "./utils/converter";
import {LAYOUT_ID} from "./utils/constant";
class Lib extends Component {
getWeChatHtml() {
const layout = document.getElementById(LAYOUT_ID); // 保护现场
const html = layout.innerHTML;
solveWeChatMath();
const res = solveHtml();
layout.innerHTML = html; // 恢复现场
return res;
}
getZhihuHtml() {
const layout = document.getElementById(LAYOUT_ID); // 保护现场
const html = layout.innerHTML;
solveZhihuMath();
const res = solveHtml();
layout.innerHTML = html; // 恢复现场
return res;
}
render() {
const {
defaultTitle,
defaultText,
onTextChange,
onTextBlur,
onTextFocus,
onStyleChange,
onStyleBlur,
onStyleFocus,
token,
useImageHosting,
} = this.props;
const appCtx = {
defaultTitle,
defaultText,
onTextChange,
onTextBlur,
onTextFocus,
onStyleChange,
onStyleBlur,
onStyleFocus,
token,
useImageHosting,
};
return (
<Provider
content={content}
userInfo={userInfo}
navbar={navbar}
footer={footer}
dialog={dialog}
imageHosting={imageHosting}
view={view}
>
{isPC() ? (
<appContext.Provider value={appCtx}>
<App
defaultText={defaultText}
onTextChange={onTextChange}
onTextBlur={onTextBlur}
onTextFocus={onTextFocus}
onStyleChange={onStyleChange}
onStyleBlur={onStyleBlur}
onStyleFocus={onStyleFocus}
useImageHosting={useImageHosting}
token={token}
/>
</appContext.Provider>
) : (
<Result
icon={<SvgIcon name="smile" style={style.svgIcon} />}
title="请使用 PC 端打开排版工具"
subTitle="更多 Markdown Nice 信息，请扫码关注公众号「编程如画」"
extra={<img alt="" style={{width: "100%"}} src="https://my-wechat.mdnice.com/wechat.jpg" />}
/>
)}
</Provider>
);
}
}
const style = {
svgIcon: {
width: "72px",
height: "72px",
},
};
Lib.defaultProps = {
defaultTitle: "",
defaultText: "",
onTextChange: () => {},
onTextBlur: () => {},
onTextFocus: () => {},
onStyleChange: () => {},
onStyleBlur: () => {},
onStyleFocus: () => {},
token: "",
// eslint-disable-next-line react/default-props-match-prop-types
useImageHosting: {
url: "",
name: "",
isSmmsOpen: true,
isQiniuyunOpen: true,
isAliyunOpen: true,
isGiteeOpen: true,
isGitHubOpen: true,
},
};
Lib.propTypes = {
defaultTitle: PropTypes.string,
defaultText: PropTypes.string,
onTextChange: PropTypes.func,
onTextBlur: PropTypes.func,
onTextFocus: PropTypes.func,
onStyleChange: PropTypes.func,
onStyleBlur: PropTypes.func,
onStyleFocus: PropTypes.func,
token: PropTypes.string,
// eslint-disable-next-line react/require-default-props
useImageHosting: PropTypes.shape({
url: PropTypes.string,
name: PropTypes.string,
isSmmsOpen: PropTypes.bool,
isQiniuyunOpen: PropTypes.bool,
isAliyunOpen: PropTypes.bool,
isGiteeOpen: PropTypes.bool,
isGitHubOpen: PropTypes.bool,
}),
};
export default Lib;
================================================
FILE: src/component/Dialog/AboutDialog.js
================================================
import React, {Component} from "react";
import {observer, inject} from "mobx-react";
import {Modal, Button} from "antd";
@inject("dialog")
@observer
class AboutDialog extends Component {
handleOk = () => {
this.props.dialog.setAboutOpen(false);
};
handleCancel = () => {
this.props.dialog.setAboutOpen(false);
};
handleVersion = () => {
this.props.dialog.setAboutOpen(false);
this.props.dialog.setVersionOpen(true);
};
render() {
return (
<Modal
title="关于"
okText="确认"
cancelText="取消"
visible={this.props.dialog.isAboutOpen}
onOk={this.handleOk}
onCancel={this.handleCancel}
footer={[
<Button key="version" onClick={this.handleVersion}>
更新记录
</Button>,
<Button key="submit" type="primary" onClick={this.handleOk}>
确认
</Button>,
]}
bodyStyle={{
paddingTop: "5px",
}}
>
<h3 style={style.headerMargin}>
Markdown Nice
<a
id="nice-about-dialog-star"
rel="noopener noreferrer"
target="_blank"
href="https://github.com/mdnice/markdown-nice"
style={style.noBorder}
>
<img alt="" style={style.img} src="https://badgen.net/github/stars/mdnice/markdown-nice" />
</a>
</h3>
<p style={style.lineHeight}>支持自定义样式的 Markdown 编辑器；</p>
<p style={style.lineHeight}>支持微信公众号、知乎和稀土掘金；</p>
<h3 style={style.headerMargin}>我们</h3>
<p style={style.lineHeight}>
如果你喜欢我们的工具，欢迎关注
<a
id="nice-about-dialog-github"
rel="noopener noreferrer"
target="_blank"
href="https://github.com/mdnice/markdown-nice"
>
GitHub
</a>
、
<a
id="nice-about-dialog-gitee"
rel="noopener noreferrer"
target="_blank"
href="https://gitee.com/zhning12/markdown-nice"
>
Gitee
</a>
和新项目
<a
id="nice-about-dialog-resume"
style={style.a}
rel="noopener noreferrer"
target="_blank"
href="https://github.com/guanpengchn/markdown-resume"
>
Markdown 简历
</a>
，同时我们也组建了「
<strong style={style.strong}>微信群</strong>
」，右下角关注公众号回复「排版」拉你入群，愿意
<strong style={style.strong}>微信打赏</strong>
就更好啦。
</p>
<div style={{display: "flex", alignItems: "center"}}>
<img alt="图片描述" style={style.leftImgWidth} src="https://my-wechat.mdnice.com/bonus.png" />
<img alt="图片描述" style={style.rightImgWidth} src="https://my-wechat.mdnice.com/wechat.jpg" />
</div>
</Modal>
);
}
}
const style = {
leftImgWidth: {
width: "40%",
height: "100%",
},
rightImgWidth: {
width: "60%",
height: "100%",
},
headerMargin: {
marginTop: "5px",
marginBottom: "5px",
color: "black",
},
lineHeight: {
lineHeight: "26px",
color: "black",
padding: 0,
margin: 0,
},
img: {
width: "70px",
marginLeft: "10px",
display: "inline-block",
},
noBorder: {
border: "none",
},
};
export default AboutDialog;
================================================
FILE: src/component/Dialog/FormDialog.js
================================================
import React from "react";
import {observer, inject} from "mobx-react";
import {Modal, InputNumber, Form} from "antd";
@inject("dialog")
@inject("content")
@observer
class FormDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
...initialState,
};
}
buildRow = (rowNum, columnNum) => {
let appendText = "|";
if (rowNum === 1) {
appendText += " --- |";
for (let i = 0; i < columnNum - 1; i++) {
appendText += " --- |";
}
} else {
appendText += " |";
for (let i = 0; i < columnNum - 1; i++) {
appendText += " |";
}
}
return appendText + (/windows|win32/i.test(navigator.userAgent) ? "\r\n" : "\n");
};
buildFormFormat = (rowNum, columnNum) => {
let formFormat = "";
for (let i = 0; i < 3; i++) {
formFormat += this.buildRow(i, columnNum);
}
for (let i = 3; i <= rowNum; i++) {
formFormat += this.buildRow(i, columnNum);
}
return formFormat;
};
handleOk = () => {
const {markdownEditor} = this.props.content;
const cursor = markdownEditor.getCursor();
const text = this.buildFormFormat(this.state.rowNum, this.state.columnNum);
markdownEditor.replaceSelection(text, cursor);
const content = markdownEditor.getValue();
this.props.content.setContent(content);
this.handleCancel();
cursor.ch += 2;
markdownEditor.setCursor(cursor);
markdownEditor.focus();
};
handleCancel = () => {
this.setState(initialState);
this.props.dialog.setFormOpen(false);
};
render() {
return (
<Modal
title="添加表格"
okText="确认"
cancelText="取消"
visible={this.props.dialog.isFormOpen}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<Form.Item label="行数" labelCol={{span: 4}}>
<InputNumber
min={2}
max={10}
value={this.state.rowNum}
defaultValue={1}
onChange={(value) => this.setState({rowNum: value})}
/>
</Form.Item>
<Form.Item label="列数" labelCol={{span: 4}}>
<InputNumber
min={1}
max={10}
value={this.state.columnNum}
defaultValue={1}
onChange={(value) => this.setState({columnNum: value})}
/>
</Form.Item>
</Modal>
);
}
}
const initialState = {
columnNum: 1,
rowNum: 2,
};
export default FormDialog;
================================================
FILE: src/component/Dialog/HistoryDialog.js
================================================
import React, {Component} from "react";
import {observer, inject} from "mobx-react";
import {Modal, Empty, message} from "antd";
import LocalHistory from "../LocalHistory";
import {AutoSaveInterval, getLocalDocuments, setLocalDocuments, setLocalDraft} from "../LocalHistory/util";
import IndexDB from "../LocalHistory/indexdb";
import debouce from "lodash.debounce";
const DocumentID = 1;
@inject("dialog")
@inject("content")
@observer
class HistoryDialog extends Component {
timer = null;
db = null;
constructor(props) {
super(props);
this.state = {
documents: [],
};
}
async componentDidMount() {
await this.initIndexDB();
}
componentWillUnmount() {
clearInterval(this.timer);
}
get editor() {
return this.props.content.markdownEditor;
}
//
// async UNSAFE_componentWillReceiveProps(nextProps) {
// // 文档 id 变更
// if (this.props.documentID !== nextProps.documentID && nextProps.documentID != null) {
// if (this.db) {
// await this.overrideLocalDocuments(nextProps.documentID);
// }
// }
// }
//
closeDialog = () => {
this.props.dialog.setHistoryOpen(false);
};
editLocalDocument = (content) => {
this.props.content.setContent(content);
message.success("恢复成功！");
this.closeDialog();
};
autoSave = async (isRecent = false) => {
const Content = this.props.content.markdownEditor.getValue();
if (Content.trim() !== "") {
const document = {
Content,
DocumentID: this.props.documentID,
SaveTime: new Date(),
};
const setLocalDocumentMethod = isRecent && this.state.documents.length > 0 ? setLocalDraft : setLocalDocuments;
await setLocalDocumentMethod(this.db, this.state.documents, document);
await this.overrideLocalDocuments(this.props.documentID);
}
};
async initIndexDB() {
try {
const indexDB = new IndexDB({
name: "mdnice-local-history",
storeName: "customers",
storeOptions: {keyPath: "id", autoIncrement: true},
storeInit: (objectStore) => {
objectStore.createIndex("DocumentID", "DocumentID", {unique: false});
objectStore.createIndex("SaveTime", "SaveTime", {unique: false});
},
});
this.db = await indexDB.init();
if (this.db && this.props.documentID) {
await this.overrideLocalDocuments(this.props.documentID);
}
// 每隔一段时间自动保存
this.timer = setInterval(async () => {
await this.autoSave();
}, AutoSaveInterval);
// 每改变内容自动保存最近的一条
this.editor.on &&
this.editor.on(
"change",
debouce(async () => {
await this.autoSave(true);
}, 1000),
);
} catch (e) {
console.error(e);
}
}
// 刷新本地历史文档
async overrideLocalDocuments(documentID) {
const localDocuments = await getLocalDocuments(this.db, +documentID);
// console.log('refresh local',localDocuments);
this.setState({
documents: localDocuments,
});
}
render() {
return (
<Modal
className="nice-md-local-history"
title="本地历史"
centered
width={1080}
visible={this.props.dialog.isHistoryOpen}
onCancel={this.closeDialog}
footer={null}
>
{this.state.documents && this.state.documents.length > 0 ? (
<LocalHistory
content={this.props.content.content}
documents={this.state.documents}
documentID={this.props.documentID}
onEdit={this.editLocalDocument}
onCancel={this.closeDialog}
/>
) : (
<Empty style={{width: "100%"}} description="暂无本地历史" />
)}
</Modal>
);
}
}
HistoryDialog.defaultProps = {
documentID: DocumentID,
};
export default HistoryDialog;
================================================
FILE: src/component/Dialog/ImageDialog.js
================================================
import React, {Component} from "react";
import {observer, inject} from "mobx-react";
import {Modal, Upload, Tabs, Select} from "antd";
import SvgIcon from "../../icon";
import AliOSS from "../ImageHosting/AliOSS";
import QiniuOSS from "../ImageHosting/QiniuOSS";
import Gitee from "../ImageHosting/Gitee";
import GitHub from "../ImageHosting/GitHub";
import {uploadAdaptor} from "../../utils/imageHosting";
import {SM_MS_PROXY, IMAGE_HOSTING_TYPE, IMAGE_HOSTING_NAMES} from "../../utils/constant";
import appContext from "../../utils/appContext";
const {Dragger} = Upload;
const {TabPane} = Tabs;
const {Option} = Select;
@inject("dialog")
@inject("content")
@inject("imageHosting")
@inject("navbar")
@observer
class ImageDialog extends Component {
constructor(props) {
super(props);
this.images = [];
}
// 确认后将内容更新到编辑器上
handleOk = () => {
let text = "";
// 成功后添加url
if (this.props.navbar.isContainImgName) {
this.images.forEach((value) => {
text += `\n`;
});
} else {
this.images.forEach((value) => {
text += `\n`;
});
}
// 重新初始化
this.images = [];
const {markdownEditor} = this.props.content;
const cursor = markdownEditor.getCursor();
markdownEditor.replaceSelection(text, cursor);
// 上传后实时更新内容
const content = markdownEditor.getValue();
this.props.content.setContent(content);
this.props.dialog.setImageOpen(false);
cursor.ch += 2;
markdownEditor.setCursor(cursor);
markdownEditor.focus();
};
handleCancel = () => {
this.props.dialog.setImageOpen(false);
};
customRequest = ({action, data, file, headers, onError, onProgress, onSuccess, withCredentials}) => {
const formData = new FormData();
const {images} = this;
if (data) {
Object.keys(data).forEach((key) => {
formData.append(key, data[key]);
});
}
// 使用阿里云图床
if (this.props.imageHosting.type === "阿里云") {
uploadAdaptor({file, onSuccess, onError, images});
}
// 使用七牛云图床
else if (this.props.imageHosting.type === "七牛云") {
uploadAdaptor({file, onSuccess, onError, onProgress, images});
}
// 使用SM.MS图床
else if (this.props.imageHosting.type === "SM.MS") {
uploadAdaptor({formData, file, action, onProgress, onSuccess, onError, headers, withCredentials});
}
// 使用Gitee图床
else if (this.props.imageHosting.type === "Gitee") {
uploadAdaptor({formData, file, action, onProgress, onSuccess, onError, headers, withCredentials, images});
}
// 使用GitHub图床
else if (this.props.imageHosting.type === "GitHub") {
uploadAdaptor({formData, file, action, onProgress, onSuccess, onError, headers, withCredentials, images});
}
// 使用用户提供的图床或是默认mdnice图床
else {
uploadAdaptor({formData, file, onSuccess, onError, images});
}
return {
abort() {
console.log("upload progress is aborted.");
},
};
};
typeChange = (type) => {
this.props.imageHosting.setType(type);
window.localStorage.setItem(IMAGE_HOSTING_TYPE, type);
};
render() {
const {hostingList, type} = this.props.imageHosting;
const columns = hostingList.map((option, index) => (
<Option key={index} value={option.value}>
{option.label}
</Option>
));
const imageHostingSwitch = (
<Select style={{width: "90px"}} value={type} onChange={this.typeChange}>
{columns}
</Select>
);
return (
<Modal
title="本地上传"
okText="确认"
cancelText="取消"
visible={this.props.dialog.isImageOpen}
onOk={this.handleOk}
onCancel={this.handleCancel}
bodyStyle={{paddingTop: "10px"}}
>
<appContext.Consumer>
{({useImageHosting}) => (
<Tabs tabBarExtraContent={imageHostingSwitch} type="card">
<TabPane tab="图片上传" key="1">
<Dragger name="file" multiple action={SM_MS_PROXY} customRequest={this.customRequest}>
<p className="ant-upload-drag-icon">
<SvgIcon name="inbox" style={style.svgIcon} fill="#40a9ff" />
</p>
<p className="ant-upload-text">点击或拖拽一张或多张照片上传</p>
<p className="ant-upload-hint">{"正在使用" + type + "图床"}</p>
</Dragger>
</TabPane>
{useImageHosting.isAliyunOpen ? (
<TabPane tab={IMAGE_HOSTING_NAMES.aliyun} key="2">
<AliOSS />
</TabPane>
) : null}
{useImageHosting.isQiniuyunOpen ? (
<TabPane tab={IMAGE_HOSTING_NAMES.qiniuyun} key="3">
<QiniuOSS />
</TabPane>
) : null}
{useImageHosting.isGiteeOpen ? (
<TabPane tab={IMAGE_HOSTING_NAMES.gitee} key="4">
<Gitee />
</TabPane>
) : null}
{useImageHosting.isGitHubOpen ? (
<TabPane tab={IMAGE_HOSTING_NAMES.github} key="5">
<GitHub />
</TabPane>
) : null}
</Tabs>
)}
</appContext.Consumer>
</Modal>
);
}
}
const style = {
svgIcon: {
width: "48px",
height: "48px",
},
};
export default ImageDialog;
================================================
FILE: src/component/Dialog/LinkDialog.js
================================================
import React, {Component} from "react";
import {observer, inject} from "mobx-react";
import {Modal, Input, Form} from "antd";
@inject("dialog")
@inject("content")
@observer
class LinkDialog extends Component {
constructor(props) {
super(props);
this.state = {
link: "",
};
}
handleOk = () => {
const {markdownEditor} = this.props.content;
const cursor = markdownEditor.getCursor();
const selection = markdownEditor.getSelection();
const text = `[${selection}](${this.state.link})`;
markdownEditor.replaceSelection(text, cursor);
// 上传后实时更新内容
const content = markdownEditor.getValue();
this.props.content.setContent(content);
this.setState({link: ""});
this.props.dialog.setLinkOpen(false);
cursor.ch += 1;
markdownEditor.setCursor(cursor);
markdownEditor.focus();
};
handleCancel = () => {
this.setState({link: ""});
this.props.dialog.setLinkOpen(false);
};
handleChange = (e) => {
this.setState({link: e.target.value});
};
render() {
return (
<Modal
title="添加链接"
okText="确认"
cancelText="取消"
visible={this.props.dialog.isLinkOpen}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<Form.Item label="链接地址">
<Input placeholder="请输入链接地址" value={this.state.link} onChange={this.handleChange} />
</Form.Item>
</Modal>
);
}
}
export default LinkDialog;
================================================
FILE: src/component/Dialog/SitDownDialog.js
================================================
import React, {Component} from "react";
import {observer, inject} from "mobx-react";
import {Modal, Input, Select, message} from "antd";
import SitDownConverter from "../../utils/sitdownConverter";
import {SITDOWN_OPTIONS} from "../../utils/constant";
const {Option} = Select;
const {TextArea} = Input;
@inject("dialog")
@inject("content")
@observer
class SitDownDialog extends Component {
constructor(props) {
super(props);
this.state = {
platform: "default",
sourceCode: "",
};
}
handleOk = () => {
try {
const {platform, sourceCode} = this.state;
const domParser = new DOMParser();
const sourceCodeDom = domParser.parseFromString(sourceCode, "text/html");
let content = "";
if (platform === "csdn") {
const articleDom = sourceCodeDom.getElementById("content_views");
content = SitDownConverter.CSDN(articleDom);
} else if (platform === "juejin") {
const articleDom = sourceCodeDom.getElementsByClassName("article-content");
content = SitDownConverter.Juejin(articleDom[0]);
} else if (platform === "zhihu") {
const articleDom = sourceCodeDom.getElementsByClassName("Post-RichText");
content = SitDownConverter.Zhihu(articleDom[0]);
} else if (platform === "wechat") {
const articleDom = sourceCodeDom.getElementById("js_content");
content = SitDownConverter.Wechat(articleDom);
} else {
content = SitDownConverter.GFM(sourceCodeDom);
}
this.props.content.setContent(content);
this.props.dialog.setSitDownOpen(false);
const {markdownEditor} = this.props.content;
// const cursor = markdownEditor.getCursor();
// cursor.ch += 1;
// markdownEditor.setCursor(cursor);
markdownEditor.focus();
} catch (e) {
message.error("源代码与已选平台的文章域名不符");
}
};
handleCancel = () => {
this.props.dialog.setSitDownOpen(false);
};
handlePlatform = (value) => {
this.setState({platform: value});
};
handleSourceCode = (e) => {
this.setState({sourceCode: e.target.value});
};
render() {
const {sourceCode, platform} = this.state;
return (
<Modal
title="SitDown：html 转 markdown 神器"
okText="转换"
cancelText="取消"
visible={this.props.dialog.isSitDownOpen}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<Select value={platform} style={{width: 300, marginBottom: "20px"}} onChange={this.handlePlatform}>
{SITDOWN_OPTIONS.map((option) => (
<Option key={option.key} value={option.key}>
{option.value}
</Option>
))}
</Select>
<TextArea
rows={4}
style={{marginBottom: "5px"}}
value={sourceCode}
onChange={this.handleSourceCode}
placeholder="请放入网页源代码"
/>
<span>提示：右键->显示网页源代码->全选->复制粘贴。</span>
<a
id="nice-sitdown-dialog-doc"
rel="noopener noreferrer"
target="_blank"
href="https://preview.mdnice.com/article/user/sitdown/"
>
详细文档
</a>
</Modal>
);
}
}
export default SitDownDialog;
================================================
FILE: src/component/Dialog/TutorialDialog.js
================================================
import React, {Component} from "react";
import {observer, inject} from "mobx-react";
import {Modal, Button, message} from "antd";
@inject("dialog")
@observer
class TutorialDialog extends Component {
handleOk = () => {
this.props.dialog.setTutorialOpen(false);
const {tutorialContent} = this.props.dialog;
// 复制触发
document.addEventListener("copy", function copyCall(e) {
e.preventDefault();
e.clipboardData.setData("text/html", tutorialContent);
e.clipboardData.setData("text/plain", tutorialContent);
document.removeEventListener("copy", copyCall);
});
document.execCommand("copy");
message.success("拷贝成功，请在左侧编辑器粘贴");
};
handleCancel = () => {
this.props.dialog.setTutorialOpen(false);
};
render() {
return (
<Modal
title={this.props.dialog.tutorialTitle}
okText="确认"
cancelText="取消"
visible={this.props.dialog.isTutorialOpen}
onOk={this.handleOk}
onCancel={this.handleCancel}
footer={[
<Button key="submit" type="primary" onClick={this.handleOk}>
拷贝 Markdown 并在编辑器中实验
</Button>,
]}
bodyStyle={{
paddingTop: "5px",
}}
>
<p style={style.lineHeight}>左侧为 Markdown 可编辑文本，右侧为渲染效果</p>
<div style={{display: "flex", alignItems: "center"}}>
<img alt="图片描述" style={style.imgWidth} src={this.props.dialog.tutorialPicture} />
</div>
</Modal>
);
}
}
const style = {
imgWidth: {
width: "100%",
height: "100%",
},
lineHeight: {
lineHeight: "40px",
color: "black",
padding: 0,
marginBottom: 10,
},
};
export default TutorialDialog;
================================================
FILE: src/component/Dialog/VersionDialog.css
================================================
.specialInfo > * {
width: 100%;
}
================================================
FILE: src/component/Dialog/VersionDialog.js
================================================
import React, {Component} from "react";
import {observer, inject} from "mobx-react";
import {Modal, Timeline, Button} from "antd";
import axios from "axios";
import {NEWEST_VERSION} from "../../utils/constant";
import SvgIcon from "../../icon";
import "./VersionDialog.css";
@inject("dialog")
@observer
class VersionDialog extends Component {
constructor(props) {
super(props);
this.state = {
// eslint-disable-next-line react/no-unused-state
versionNumber: 0,
versionTimeline: [],
recommend: null,
specialInfo: "",
};
}
handleOk = () => {
this.props.dialog.setVersionOpen(false);
};
handleCancel = () => {
this.props.dialog.setVersionOpen(false);
};
handleMore = () => {
const w = window.open("about:blank");
w.location.href = "https://github.com/mdnice/markdown-nice/blob/master/CHANGELOG.md";
};
handleDocs = () => {
const w = window.open("about:blank");
w.location.href = "https://preview.mdnice.com/articles/";
};
componentDidMount = async () => {
try {
const {
data: response,
data: {data},
} = await axios.get("https://api.mdnice.com/versions/newest");
if (!response.success) {
throw new Error();
}
const newestVersion = localStorage.getItem(NEWEST_VERSION);
if (data.versionNumber !== newestVersion) {
this.props.dialog.setVersionOpen(true);
localStorage.setItem(NEWEST_VERSION, data.versionNumber);
}
this.setState({...data});
} catch (err) {
console.error("读取最新Mdnice版本信息错误");
}
};
render() {
return (
<Modal
title="版本更新"
visible={this.props.dialog.isVersionOpen}
onOk={this.handleOk}
onCancel={this.handleCancel}
footer={[
<Button key="submit" type="primary" onClick={this.handleOk}>
确认
</Button>,
]}
destroyOnClose
>
<Timeline>
{this.state.versionTimeline.map((version, index) => {
if (index === 0) {
return (
<Timeline.Item key={index} dot={<SvgIcon name="environment" style={style.svgIcon} />}>
<strong>{version}</strong>
</Timeline.Item>
);
} else {
return <Timeline.Item key={index}>{version}</Timeline.Item>;
}
})}
<Timeline.Item>
了解更多，请查看
<a
id="nice-version-dialog-doc"
style={{fontWeight: "bold"}}
alt=""
href="https://preview.mdnice.com/articles/"
rel="noopener noreferrer"
target="_blank"
>
用户与开发者文档
</a>
</Timeline.Item>
{this.state.recommend && (
<Timeline.Item dot={<SvgIcon name="more" style={style.svgIcon} />}>
<a
id="nice-version-dialog-recommend"
style={{fontWeight: "bold", borderBottom: "double"}}
alt=""
href={this.state.recommend.link}
rel="noopener noreferrer"
target="_blank"
>
{this.state.recommend.mainInfo}
</a>
</Timeline.Item>
)}
</Timeline>
{this.state.specialInfo && (
<div
id="nice-version-dialog-special"
dangerouslySetInnerHTML={{__html: this.state.specialInfo}}
className="specialInfo"
/>
)}
</Modal>
);
}
}
const style = {
svgIcon: {
width: "16px",
height: "16px",
},
};
export default VersionDialog;
================================================
FILE: src/component/ImageHosting/AliOSS.js
================================================
import React, {Component} from "react";
import {observer, inject} from "mobx-react";
import {Input, Form} from "antd";
import {ALIOSS_IMAGE_HOSTING} from "../../utils/constant";
const formItemLayout = {
labelCol: {
xs: {span: 6},
},
wrapperCol: {
xs: {span: 16},
},
};
@inject("imageHosting")
@observer
class AliOSS extends Component {
constructor(props) {
super(props);
// 从localstorage里面读取
const imageHosting = JSON.parse(localStorage.getItem(ALIOSS_IMAGE_HOSTING));
this.state = {
imageHosting,
};
}
regionChange = (e) => {
const {imageHosting} = this.state;
imageHosting.region = e.target.value;
this.setState({imageHosting});
localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
accessKeyIdChange = (e) => {
const {imageHosting} = this.state;
imageHosting.accessKeyId = e.target.value;
this.setState({imageHosting});
localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
accessKeySecretChange = (e) => {
const {imageHosting} = this.state;
imageHosting.accessKeySecret = e.target.value;
this.setState({imageHosting});
localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
bucketChange = (e) => {
const {imageHosting} = this.state;
imageHosting.bucket = e.target.value;
this.setState({imageHosting});
localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
render() {
const {region, accessKeyId, accessKeySecret, bucket} = this.state.imageHosting;
return (
<Form {...formItemLayout}>
<Form.Item label="Bucket" style={style.formItem}>
<Input value={bucket} onChange={this.bucketChange} placeholder="例如：my-wechat" />
</Form.Item>
<Form.Item label="Region" style={style.formItem}>
<Input value={region} onChange={this.regionChange} placeholder="例如：oss-cn-hangzhou" />
</Form.Item>
<Form.Item label="AccessKey ID" style={style.formItem}>
<Input value={accessKeyId} onChange={this.accessKeyIdChange} placeholder="例如：qweASDF1234zxcvb" />
</Form.Item>
<Form.Item label="AccessKey Secret" style={style.formItem}>
<Input
value={accessKeySecret}
onChange={this.accessKeySecretChange}
placeholder="例如：qweASDF1234zxcvbqweASD"
/>
</Form.Item>
<Form.Item label="提示" style={style.formItem}>
<span>配置后请在右上角进行切换，</span>
<a
rel="noopener noreferrer"
target="_blank"
href="https://preview.mdnice.com/article/developer/aliyun-image-hosting/"
>
阿里云图床配置文档
</a>
</Form.Item>
</Form>
);
}
}
const style = {
formItem: {
marginBottom: "10px",
},
};
export default AliOSS;
================================================
FILE: src/component/ImageHosting/GitHub.js
================================================
import React, {Component} from "react";
import {observer, inject} from "mobx-react";
import {Input, Form, Checkbox} from "antd";
import {GITHUB_IMAGE_HOSTING} from "../../utils/constant";
const formItemLayout = {
labelCol: {
xs: {span: 6},
},
wrapperCol: {
xs: {span: 16},
},
};
@inject("imageHosting")
@observer
class Gitee extends Component {
constructor(props) {
super(props);
// 从localstorage里面读取
const imageHosting = JSON.parse(localStorage.getItem(GITHUB_IMAGE_HOSTING));
this.state = {
imageHosting,
};
}
usernameChange = (e) => {
const {imageHosting} = this.state;
imageHosting.username = e.target.value;
this.setState({imageHosting});
localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
repoChange = (e) => {
const {imageHosting} = this.state;
imageHosting.repo = e.target.value;
this.setState({imageHosting});
localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
tokenChange = (e) => {
const {imageHosting} = this.state;
imageHosting.token = e.target.value;
this.setState({imageHosting});
localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
jsdelivrChange = (e) => {
const {imageHosting} = this.state;
imageHosting.jsdelivr = e.target.checked ? "true" : "false";
console.log(imageHosting);
this.setState({imageHosting});
localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
render() {
const {username, repo, token, jsdelivr} = this.state.imageHosting;
return (
<Form {...formItemLayout}>
<Form.Item label="用户名" style={style.formItem}>
<Input value={username} onChange={this.usernameChange} placeholder="例如：mdnice" />
</Form.Item>
<Form.Item label="仓库名" style={style.formItem}>
<Input value={repo} onChange={this.repoChange} placeholder="例如：picture" />
</Form.Item>
<Form.Item label="token" style={style.formItem}>
<Input value={token} onChange={this.tokenChange} placeholder="例如：qweASDF1234zxcvb" />
</Form.Item>
<Form.Item label="jsDelivr CDN" style={style.formItem}>
<Checkbox checked={jsdelivr === "true"} onChange={this.jsdelivrChange}>
（强烈建议开启，加速图片）
</Checkbox>
</Form.Item>
<Form.Item label="提示" style={style.formItem}>
<span>配置后请在右上角进行切换，</span>
<a
rel="noopener noreferrer"
target="_blank"
href="https://preview.mdnice.com/article/developer/github-image-hosting/"
>
GitHub图床配置文档
</a>
</Form.Item>
</Form>
);
}
}
const style = {
formItem: {
marginBottom: "10px",
},
};
export default Gitee;
================================================
FILE: src/component/ImageHosting/Gitee.js
================================================
import React, {Component} from "react";
import {observer, inject} from "mobx-react";
import {Input, Form} from "antd";
import {GITEE_IMAGE_HOSTING} from "../../utils/constant";
const formItemLayout = {
labelCol: {
xs: {span: 6},
},
wrapperCol: {
xs: {span: 16},
},
};
@inject("imageHosting")
@observer
class Gitee extends Component {
constructor(props) {
super(props);
// 从localstorage里面读取
const imageHosting = JSON.parse(localStorage.getItem(GITEE_IMAGE_HOSTING));
this.state = {
imageHosting,
};
}
usernameChange = (e) => {
const {imageHosting} = this.state;
imageHosting.username = e.target.value;
this.setState({imageHosting});
localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
repoChange = (e) => {
const {imageHosting} = this.state;
imageHosting.repo = e.target.value;
this.setState({imageHosting});
localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
tokenChange = (e) => {
const {imageHosting} = this.state;
imageHosting.token = e.target.value;
this.setState({imageHosting});
localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
render() {
const {username, repo, token} = this.state.imageHosting;
return (
<Form {...formItemLayout}>
<Form.Item label="用户名" style={style.formItem}>
<Input value={username} onChange={this.usernameChange} placeholder="例如：mdnice" />
</Form.Item>
<Form.Item label="仓库名" style={style.formItem}>
<Input value={repo} onChange={this.repoChange} placeholder="例如：picture" />
</Form.Item>
<Form.Item label="token" style={style.formItem}>
<Input value={token} onChange={this.tokenChange} placeholder="例如：qweASDF1234zxcvb" />
</Form.Item>
<Form.Item label="提示" style={style.formItem}>
<span>配置后请在右上角进行切换，</span>
<a
rel="noopener noreferrer"
target="_blank"
href="https://preview.mdnice.com/article/developer/gitee-image-hosting/"
>
Gitee 图床配置文档
</a>
</Form.Item>
</Form>
);
}
}
const style = {
formItem: {
marginBottom: "10px",
},
};
export default Gitee;
================================================
FILE: src/component/ImageHosting/QiniuOSS.js
================================================
import React, {Component} from "react";
import {observer, inject} from "mobx-react";
import {Input, Select, Form} from "antd";
import {QINIUOSS_IMAGE_HOSTING} from "../../utils/constant";
const {Option} = Select;
const formItemLayout = {
labelCol: {
xs: {span: 6},
},
wrapperCol: {
xs: {span: 16},
},
};
@inject("imageHosting")
@observer
class QiniuOSS extends Component {
constructor(props) {
super(props);
// 从localstorage里面读取
const imageHosting = JSON.parse(localStorage.getItem(QINIUOSS_IMAGE_HOSTING));
const link = imageHosting.domain.split("://")[1];
this.state = {
imageHosting,
link,
};
}
regionChange = (value) => {
const {imageHosting} = this.state;
imageHosting.region = value;
this.setState({imageHosting});
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
accessKeyChange = (e) => {
const {imageHosting} = this.state;
imageHosting.accessKey = e.target.value;
this.setState({imageHosting});
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
secretKeyChange = (e) => {
const {imageHosting} = this.state;
imageHosting.secretKey = e.target.value;
this.setState({imageHosting});
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
bucketChange = (e) => {
const {imageHosting} = this.state;
imageHosting.bucket = e.target.value;
this.setState({imageHosting});
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
linkChange = (e) => {
this.setState({link: e.target.value});
const {imageHosting} = this.state;
imageHosting.domain = "https://" + e.target.value;
this.setState({imageHosting});
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
namespaceChange = ({target: {value}}) => {
const {imageHosting} = this.state;
imageHosting.namespace = value;
this.setState({imageHosting});
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
render() {
const {region, accessKey, secretKey, bucket, namespace} = this.state.imageHosting;
const {link} = this.state;
return (
<Form {...formItemLayout}>
<Form.Item label="存储空间名称" style={style.formItem}>
<Input value={bucket} onChange={this.bucketChange} placeholder="例如：my-wechat" />
</Form.Item>
<Form.Item label="存储区域" style={style.formItem}>
<Select value={region} onChange={this.regionChange} placeholder="例如：qiniu.region.z2">
<Option value="z0">华东</Option>
<Option value="z1">华北</Option>
<Option value="z2">华南</Option>
<Option value="na0">北美</Option>
<Option value="as0">东南亚</Option>
</Select>
</Form.Item>
<Form.Item label="AccessKey" style={style.formItem}>
<Input value={accessKey} onChange={this.accessKeyChange} placeholder="例如：qweASDF1234zxcvb" />
</Form.Item>
<Form.Item label="SecretKey" style={style.formItem}>
<Input value={secretKey} onChange={this.secretKeyChange} placeholder="例如：qweASDF1234zxcvbqweASD" />
</Form.Item>
<Form.Item label="自定义域名" style={style.formItem}>
<Input value={link} onChange={this.linkChange} addonBefore="https://" placeholder="例如：qiniu.mdnice.com" />
</Form.Item>
<Form.Item label="自定义命名空间" style={style.formItem}>
<Input value={namespace} onChange={this.namespaceChange} placeholder="例如：image/" />
</Form.Item>
<Form.Item label="提示" style={style.formItem}>
<span>配置后请在右上角进行切换，</span>
<a
rel="noopener noreferrer"
target="_blank"
href="https://preview.mdnice.com/article/developer/qiniu-image-hosting/"
>
七牛云图床配置文档
</a>
</Form.Item>
</Form>
);
}
}
const style = {
formItem: {
marginBottom: "10px",
},
};
export default QiniuOSS;
================================================
FILE: src/component/LocalHistory/index.js
================================================
import * as React from "react";
import {Menu, Button, Radio} from "antd";
import CodeMirror from "@uiw/react-codemirror";
import {diff_match_patch as DiffMatchPath} from "diff-match-patch";
import "./localHistory.css";
const NOOP = () => {};
const prefix = "nice-md-local-history";
const diff = new DiffMatchPath();
class LocalHistory extends React.Component {
constructor(props) {
super(props);
const {documents} = this.props;
this.state = {
content: documents[0].Content,
selectedKeys: String(documents[0].id),
mode: "all",
};
}
getDiffHtml = () => {
// eslint-disable-next-line no-underscore-dangle
var a = diff.diff_linesToChars_(this.state.content, this.props.content);
var lineText1 = a.chars1;
var lineText2 = a.chars2;
var diffs = diff.diff_main(lineText1, lineText2, false);
// eslint-disable-next-line no-underscore-dangle
diff.diff_charsToLines_(diffs, a.lineArray);
const html = diff
.diff_prettyHtml(diffs)
.replace(/¶/g, "")
.replace(/<br>/g, "​<br>​");
return html;
};
selectNav = ({selectedKeys}) => {
const {Content: content} = this.props.documents.find((doc) => String(doc.id) === String(selectedKeys[0])) || {};
this.setState({
content,
selectedKeys,
});
};
handleModeChange = (e) => {
this.setState({
mode: e.target.value,
});
};
render() {
const {documents} = this.props;
return (
<>
<Menu className={`${prefix}-nav`} onSelect={this.selectNav} selectedKeys={this.state.selectedKeys}>
{documents.map((d) => (
<Menu.Item key={d.id}>{d.SaveTime.toLocaleString()}</Menu.Item>
))}
</Menu>
{this.state.content && (
<div className={`${prefix}-preview`}>
{this.state.mode === "all" ? (
<CodeMirror
key="local-history"
value={this.state.content}
height="calc(100% - 56px)"
options={{
readOnly: true,
theme: "md-mirror",
mode: "markdown",
lineWrapping: true,
lineNumbers: false,
}}
/>
) : (
<div dangerouslySetInnerHTML={{__html: this.getDiffHtml()}} className={`${prefix}-diff-content`} />
)}
<div className={`${prefix}-btn-group`}>
<Radio.Group onChange={this.handleModeChange} value={this.state.mode}>
<Radio value="all">全文</Radio>
<Radio value="diff">和当前内容对比</Radio>
</Radio.Group>
<div>
<Button onClick={this.props.onCancel}>取消</Button>
<Button
id="nice-local-history-review"
type="primary"
onClick={() => {
this.props.onEdit(this.state.content);
}}
>
恢复此版本
</Button>
</div>
</div>
</div>
)}
</>
);
}
}
LocalHistory.defaultProps = {
visible: false,
document: [{}],
onEdit: NOOP,
onCancel: NOOP,
};
export default LocalHistory;
================================================
FILE: src/component/LocalHistory/indexdb.js
================================================
import {message} from "antd";
// In the following line, you should include the prefixes of implementations you want to test.
const indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
// DON'T use "var indexedDB = ..." if you're not in a function.
// Moreover, you may need references to some window.IDB* objects:
// const IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
// const IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
// (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)
export default class IndexDB {
constructor(options = {}) {
this.options = options;
}
async init() {
if (!indexedDB) {
message.error("初始化 indexdb 失败！浏览器不支持");
throw Error("浏览器不支持 indexdb");
}
const {name, storeName = "", storeOptions = {}, storeInit = () => {}} = this.options;
this.storeName = storeName;
this.storeOptions = storeOptions;
this.storeInit = storeInit;
const request = indexedDB.open(name);
const result = await this.initEvent(request);
return result;
}
initEvent(request) {
return new Promise((resolve, reject) => {
request.onerror = (event) => {
// Do something with request.errorCode!
message.error("初始化数据库失败！", event.target.errorCode);
reject(new Error("初始化数据库失败！"));
};
request.onsuccess = (event) => {
const db = event.target.result;
console.log("成功初始化数据库");
// this.db = db;
resolve(db);
};
// 该事件仅在较新的浏览器中被实现
request.onupgradeneeded = (event) => {
// 更新对象存储空间和索引 ....
const db = event.target.result;
this.initStore(db, this.storeName, this.storeOptions, this.storeInit);
};
});
}
initStore(db, name, options, func) {
// 创建一个对象存储空间来持有信息。
const objectStore = db.createObjectStore(name, options);
if (func) func(objectStore);
}
}
================================================
FILE: src/component/LocalHistory/localHistory.css
================================================
.nice-md-local-history .ant-modal-body {
display: flex;
height: calc(100vh - 112px);
}
.nice-md-local-history .CodeMirror-merge,
.nice-md-local-history .CodeMirror-merge .CodeMirror {
height: calc(100vh - 216px);
}
.nice-md-local-history .CodeMirror-merge-copy {
display: none;
}
.nice-md-local-history-preview {
width: 100%;
max-width: 776px;
}
.nice-md-local-history-btn-group {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 20px;
}
.nice-md-local-history-btn-group button {
margin: 25px 10px;
}
.nice-md-local-history-btn-group button:last-child {
margin-right: 0;
}
.nice-md-local-history-nav {
width: 256px;
flex: 0 0 auto;
background: #fff;
border-radius: 4px 0 0 4px;
position: relative;
overflow-y: auto;
}
.nice-md-local-history-nav .ant-list-item {
border-bottom: 0;
padding: 17px 24px;
}
.nice-md-local-history-diff-content {
width: inherit;
background-color: rg
gitextract_4y90a4ha/ ├── .eslintignore ├── .eslintrc ├── .github/ │ └── ISSUE_TEMPLATE/ │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── .npmignore ├── .prettierrc ├── .storybook/ │ ├── .babelrc │ └── config.js ├── CHANGELOG.md ├── LICENSE ├── README.md ├── config/ │ ├── env.js │ ├── jest/ │ │ ├── cssTransform.js │ │ └── fileTransform.js │ ├── paths.js │ ├── webpack.config.js │ ├── webpack.config.lib.js │ └── webpackDevServer.config.js ├── main.js ├── package.json ├── public/ │ ├── index.html │ └── manifest.json ├── scripts/ │ ├── build.js │ ├── start.js │ └── test.js ├── src/ │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Lib.js │ ├── component/ │ │ ├── Dialog/ │ │ │ ├── AboutDialog.js │ │ │ ├── FormDialog.js │ │ │ ├── HistoryDialog.js │ │ │ ├── ImageDialog.js │ │ │ ├── LinkDialog.js │ │ │ ├── SitDownDialog.js │ │ │ ├── TutorialDialog.js │ │ │ ├── VersionDialog.css │ │ │ └── VersionDialog.js │ │ ├── ImageHosting/ │ │ │ ├── AliOSS.js │ │ │ ├── GitHub.js │ │ │ ├── Gitee.js │ │ │ └── QiniuOSS.js │ │ ├── LocalHistory/ │ │ │ ├── index.js │ │ │ ├── indexdb.js │ │ │ ├── localHistory.css │ │ │ └── util.js │ │ ├── MenuLeft/ │ │ │ ├── CodeTheme.css │ │ │ ├── CodeTheme.js │ │ │ ├── File/ │ │ │ │ ├── ExportMarkdown.js │ │ │ │ ├── ExportPdf.js │ │ │ │ └── ImportFile.js │ │ │ ├── File.js │ │ │ ├── Function/ │ │ │ │ ├── History.js │ │ │ │ ├── Reset.js │ │ │ │ ├── Search.js │ │ │ │ └── SitDown.js │ │ │ ├── Function.js │ │ │ ├── Help/ │ │ │ │ ├── About.js │ │ │ │ ├── Document.js │ │ │ │ ├── Question.js │ │ │ │ └── Version.js │ │ │ ├── Help.js │ │ │ ├── LogIn.js │ │ │ ├── Login.css │ │ │ ├── Paragraph.js │ │ │ ├── Pattern/ │ │ │ │ ├── Bold.js │ │ │ │ ├── Code.js │ │ │ │ ├── Del.js │ │ │ │ ├── Font.js │ │ │ │ ├── Form.js │ │ │ │ ├── Format.js │ │ │ │ ├── Image.js │ │ │ │ ├── InlineCode.js │ │ │ │ ├── Italic.js │ │ │ │ ├── Link.js │ │ │ │ └── LinkToFoot.js │ │ │ ├── Pattern.js │ │ │ ├── Setting/ │ │ │ │ ├── ContainImgName.js │ │ │ │ └── SyncScroll.js │ │ │ ├── Setting.js │ │ │ ├── Theme.css │ │ │ ├── Theme.js │ │ │ ├── Tutorial.js │ │ │ ├── View/ │ │ │ │ ├── EditArea.js │ │ │ │ ├── FullScreen.js │ │ │ │ ├── PreviewArea.js │ │ │ │ └── ThemeArea.js │ │ │ ├── View.js │ │ │ └── common.css │ │ ├── SearchBox/ │ │ │ ├── SearchBox.css │ │ │ └── index.js │ │ └── Sidebar/ │ │ ├── Juejin.css │ │ ├── Juejin.js │ │ ├── PreviewType.css │ │ ├── PreviewType.js │ │ ├── Wechat.css │ │ ├── Wechat.js │ │ ├── Zhihu.css │ │ └── Zhihu.js │ ├── icon/ │ │ ├── Close.js │ │ ├── Copy.js │ │ ├── Down.js │ │ ├── Environment.js │ │ ├── FontCase.js │ │ ├── GitHub.js │ │ ├── Inbox.js │ │ ├── Juejin.js │ │ ├── Mobile.js │ │ ├── More.js │ │ ├── PC.js │ │ ├── Rabbit.js │ │ ├── Replace.js │ │ ├── ReplaceAll.js │ │ ├── Smile.js │ │ ├── User.js │ │ ├── Wechat.js │ │ ├── Zhihu.js │ │ ├── index.css │ │ └── index.js │ ├── index.css │ ├── index.d.ts │ ├── index.js │ ├── layout/ │ │ ├── Dialog.js │ │ ├── EditorMenu.css │ │ ├── EditorMenu.js │ │ ├── Footer.css │ │ ├── Footer.js │ │ ├── Navbar.css │ │ ├── Navbar.js │ │ ├── Sidebar.css │ │ ├── Sidebar.js │ │ └── StyleEditor.js │ ├── serviceWorker.js │ ├── store/ │ │ ├── content.js │ │ ├── dialog.js │ │ ├── footer.js │ │ ├── imageHosting.js │ │ ├── navbar.js │ │ ├── title.js │ │ ├── userInfo.js │ │ └── view.js │ ├── template/ │ │ ├── basic.js │ │ ├── code/ │ │ │ ├── atomOneDark.js │ │ │ ├── atomOneLight.js │ │ │ ├── github.js │ │ │ ├── monokai.js │ │ │ ├── vs2015.js │ │ │ └── xcode.js │ │ ├── content.md │ │ ├── index.js │ │ ├── macCode/ │ │ │ ├── macAtomOneDark.js │ │ │ ├── macAtomOneLight.js │ │ │ ├── macGithub.js │ │ │ ├── macMonokai.js │ │ │ ├── macVs2015.js │ │ │ └── macXcode.js │ │ └── markdown/ │ │ ├── custom.js │ │ └── normal.js │ └── utils/ │ ├── appContext.js │ ├── constant.js │ ├── converter.js │ ├── editorKeyEvents.js │ ├── helper.js │ ├── hotkey.js │ ├── imageHosting.js │ ├── langHighlight.js │ ├── markdown-it-imageflow.js │ ├── markdown-it-li.js │ ├── markdown-it-linkfoot.js │ ├── markdown-it-math.js │ ├── markdown-it-multiquote.js │ ├── markdown-it-removepre.js │ ├── markdown-it-span.js │ ├── markdown-it-table-container.js │ ├── mdMirror.css │ ├── pluginCenter.js │ ├── sitdownConverter.js │ └── styleMirror.css ├── stories/ │ ├── allImageHosting.js │ ├── defaultImageHosting.js │ ├── index.js │ ├── noneImageHosting.js │ └── online.js └── watch.js
SYMBOL INDEX (281 symbols across 101 files)
FILE: .storybook/config.js
function loadStories (line 3) | function loadStories() {
FILE: config/env.js
constant NODE_ENV (line 10) | const NODE_ENV = process.env.NODE_ENV;
constant REACT_APP (line 61) | const REACT_APP = /^REACT_APP_/i;
function getClientEnvironment (line 63) | function getClientEnvironment(publicUrl) {
FILE: config/jest/cssTransform.js
method process (line 7) | process() {
method getCacheKey (line 10) | getCacheKey() {
FILE: config/jest/fileTransform.js
method process (line 9) | process(src, filename) {
FILE: config/paths.js
function ensureSlash (line 14) | function ensureSlash(inputPath, needsSlash) {
function getServedPath (line 33) | function getServedPath(appPackageJson) {
FILE: config/webpackDevServer.config.js
method before (line 85) | before(app, server) {
FILE: main.js
function createWindow (line 9) | function createWindow () {
FILE: scripts/build.js
constant WARN_AFTER_BUNDLE_GZIP_SIZE (line 37) | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
constant WARN_AFTER_CHUNK_GZIP_SIZE (line 38) | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
function build (line 127) | function build(previousFileSizes) {
function copyPublicFolder (line 187) | function copyPublicFolder() {
FILE: scripts/start.js
constant DEFAULT_PORT (line 44) | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
constant HOST (line 45) | const HOST = process.env.HOST || '0.0.0.0';
FILE: scripts/test.js
function isInGitRepository (line 23) | function isInGitRepository() {
function isInMercurialRepository (line 32) | function isInMercurialRepository() {
FILE: src/App.js
class App (line 39) | @inject("content")
method constructor (line 47) | constructor(props) {
method componentDidMount (line 57) | componentDidMount() {
method componentDidUpdate (line 97) | componentDidUpdate() {
method componentWillUnmount (line 103) | componentWillUnmount() {
method setCurrentIndex (line 162) | setCurrentIndex(index) {
method addContainer (line 295) | addContainer(math, doc) {
method render (line 305) | render() {
FILE: src/Lib.js
class Lib (line 24) | class Lib extends Component {
method getWeChatHtml (line 25) | getWeChatHtml() {
method getZhihuHtml (line 34) | getZhihuHtml() {
method render (line 43) | render() {
FILE: src/component/Dialog/AboutDialog.js
class AboutDialog (line 5) | @inject("dialog")
method render (line 21) | render() {
FILE: src/component/Dialog/FormDialog.js
class FormDialog (line 5) | @inject("dialog")
method constructor (line 9) | constructor(props) {
method render (line 64) | render() {
FILE: src/component/Dialog/HistoryDialog.js
class HistoryDialog (line 11) | @inject("dialog")
method constructor (line 19) | constructor(props) {
method componentDidMount (line 26) | async componentDidMount() {
method componentWillUnmount (line 30) | componentWillUnmount() {
method editor (line 34) | get editor() {
method initIndexDB (line 73) | async initIndexDB() {
method overrideLocalDocuments (line 107) | async overrideLocalDocuments(documentID) {
method render (line 115) | render() {
FILE: src/component/Dialog/ImageDialog.js
class ImageDialog (line 20) | @inject("dialog")
method constructor (line 26) | constructor(props) {
method abort (line 97) | abort() {
method render (line 108) | render() {
FILE: src/component/Dialog/LinkDialog.js
class LinkDialog (line 5) | @inject("dialog")
method constructor (line 9) | constructor(props) {
method render (line 43) | render() {
FILE: src/component/Dialog/SitDownDialog.js
class SitDownDialog (line 11) | @inject("dialog")
method constructor (line 15) | constructor(props) {
method render (line 74) | render() {
FILE: src/component/Dialog/TutorialDialog.js
class TutorialDialog (line 5) | @inject("dialog")
method render (line 26) | render() {
FILE: src/component/Dialog/VersionDialog.js
class VersionDialog (line 10) | @inject("dialog")
method constructor (line 13) | constructor(props) {
method render (line 62) | render() {
FILE: src/component/ImageHosting/AliOSS.js
class AliOSS (line 15) | @inject("imageHosting")
method constructor (line 18) | constructor(props) {
method render (line 55) | render() {
FILE: src/component/ImageHosting/GitHub.js
class Gitee (line 15) | @inject("imageHosting")
method constructor (line 18) | constructor(props) {
method render (line 56) | render() {
FILE: src/component/ImageHosting/Gitee.js
class Gitee (line 15) | @inject("imageHosting")
method constructor (line 18) | constructor(props) {
method render (line 48) | render() {
FILE: src/component/ImageHosting/QiniuOSS.js
class QiniuOSS (line 16) | @inject("imageHosting")
method constructor (line 19) | constructor(props) {
method render (line 74) | render() {
FILE: src/component/LocalHistory/index.js
class LocalHistory (line 13) | class LocalHistory extends React.Component {
method constructor (line 14) | constructor(props) {
method render (line 53) | render() {
FILE: src/component/LocalHistory/indexdb.js
class IndexDB (line 12) | class IndexDB {
method constructor (line 13) | constructor(options = {}) {
method init (line 17) | async init() {
method initEvent (line 34) | initEvent(request) {
method initStore (line 58) | initStore(db, name, options, func) {
FILE: src/component/LocalHistory/util.js
function saveTimeSort (line 3) | function saveTimeSort(a, b) {
FILE: src/component/MenuLeft/CodeTheme.js
class CodeTheme (line 8) | @inject("navbar")
method render (line 29) | render() {
FILE: src/component/MenuLeft/File.js
class File (line 23) | class File extends Component {
method render (line 24) | render() {
FILE: src/component/MenuLeft/File/ExportMarkdown.js
class ExportMarkdown (line 9) | @inject("content")
method render (line 22) | render() {
FILE: src/component/MenuLeft/File/ExportPdf.js
class ExportPdf (line 5) | class ExportPdf extends Component {
method render (line 12) | render() {
FILE: src/component/MenuLeft/File/ImportFile.js
class ImportFile (line 7) | @inject("content")
method render (line 20) | render() {
FILE: src/component/MenuLeft/Function.js
class Function (line 31) | class Function extends Component {
method render (line 32) | render() {
FILE: src/component/MenuLeft/Function/History.js
class History (line 6) | @inject("dialog")
method render (line 13) | render() {
FILE: src/component/MenuLeft/Function/Reset.js
class Reset (line 8) | @inject("content")
method onCancel (line 26) | onCancel() {}
method render (line 30) | render() {
FILE: src/component/MenuLeft/Function/Search.js
class Search (line 8) | @inject("dialog")
method render (line 15) | render() {
FILE: src/component/MenuLeft/Function/SitDown.js
class SitDownFunction (line 6) | @inject("dialog")
method render (line 13) | render() {
FILE: src/component/MenuLeft/Help.js
class Help (line 28) | class Help extends Component {
method render (line 29) | render() {
FILE: src/component/MenuLeft/Help/About.js
class About (line 6) | @inject("dialog")
method render (line 13) | render() {
FILE: src/component/MenuLeft/Help/Document.js
class Document (line 5) | class Document extends Component {
method render (line 11) | render() {
FILE: src/component/MenuLeft/Help/Question.js
class Question (line 5) | class Question extends Component {
method render (line 11) | render() {
FILE: src/component/MenuLeft/Help/Version.js
class Version (line 6) | @inject("dialog")
method render (line 13) | render() {
FILE: src/component/MenuLeft/LogIn.js
class LogIn (line 10) | @inject("userInfo")
method constructor (line 13) | constructor(props) {
method render (line 49) | render() {
FILE: src/component/MenuLeft/Paragraph.js
class Paragraph (line 26) | class Paragraph extends Component {
method render (line 27) | render() {
FILE: src/component/MenuLeft/Pattern.js
class Pattern (line 62) | class Pattern extends Component {
method render (line 63) | render() {
FILE: src/component/MenuLeft/Pattern/Bold.js
class Bold (line 9) | @inject("content")
method render (line 23) | render() {
FILE: src/component/MenuLeft/Pattern/Code.js
class Code (line 9) | @inject("content")
method render (line 23) | render() {
FILE: src/component/MenuLeft/Pattern/Del.js
class Del (line 9) | @inject("content")
method render (line 23) | render() {
FILE: src/component/MenuLeft/Pattern/Font.js
class Font (line 8) | class Font extends Component {
method constructor (line 9) | constructor(props) {
method render (line 31) | render() {
FILE: src/component/MenuLeft/Pattern/Form.js
class Form (line 8) | @inject("dialog")
method render (line 15) | render() {
FILE: src/component/MenuLeft/Pattern/Format.js
class Format (line 9) | @inject("content")
method render (line 17) | render() {
FILE: src/component/MenuLeft/Pattern/Image.js
class Image (line 8) | @inject("dialog")
method render (line 15) | render() {
FILE: src/component/MenuLeft/Pattern/InlineCode.js
class InlineCode (line 9) | @inject("content")
method render (line 23) | render() {
FILE: src/component/MenuLeft/Pattern/Italic.js
class Italic (line 9) | @inject("content")
method render (line 23) | render() {
FILE: src/component/MenuLeft/Pattern/Link.js
class Link (line 8) | @inject("dialog")
method render (line 15) | render() {
FILE: src/component/MenuLeft/Pattern/LinkToFoot.js
class Format (line 9) | @inject("content")
method render (line 17) | render() {
FILE: src/component/MenuLeft/Setting.js
class Setting (line 20) | class Setting extends Component {
method render (line 21) | render() {
FILE: src/component/MenuLeft/Setting/ContainImgName.js
class SyncScroll (line 7) | @inject("navbar")
method render (line 15) | render() {
FILE: src/component/MenuLeft/Setting/SyncScroll.js
class SyncScroll (line 7) | @inject("navbar")
method render (line 15) | render() {
FILE: src/component/MenuLeft/Theme.js
class Theme (line 11) | @inject("content")
method render (line 98) | render() {
FILE: src/component/MenuLeft/Tutorial.js
class Tutorial (line 8) | @inject("dialog")
method render (line 18) | render() {
FILE: src/component/MenuLeft/View.js
class View (line 31) | class View extends Component {
method render (line 32) | render() {
FILE: src/component/MenuLeft/View/EditArea.js
class EditArea (line 7) | @inject("view")
method render (line 15) | render() {
FILE: src/component/MenuLeft/View/FullScreen.js
class FullScreen (line 6) | @inject("navbar")
method render (line 34) | render() {
FILE: src/component/MenuLeft/View/PreviewArea.js
class PreviewArea (line 7) | @inject("view")
method render (line 15) | render() {
FILE: src/component/MenuLeft/View/ThemeArea.js
class ThemeArea (line 7) | @inject("view")
method render (line 15) | render() {
FILE: src/component/SearchBox/index.js
function WrappedButton (line 13) | function WrappedButton(props) {
class SearchBox (line 24) | @inject("content")
method constructor (line 28) | constructor(props) {
method render (line 165) | render() {
FILE: src/component/Sidebar/Juejin.js
class Juejin (line 10) | @inject("content")
method constructor (line 16) | constructor(props) {
method render (line 37) | render() {
FILE: src/component/Sidebar/PreviewType.js
class PreviewType (line 9) | @inject("navbar")
method render (line 16) | render() {
FILE: src/component/Sidebar/Wechat.js
class Wechat (line 10) | @inject("content")
method constructor (line 16) | constructor(props) {
method render (line 31) | render() {
FILE: src/component/Sidebar/Zhihu.js
class Zhihu (line 10) | @inject("content")
method constructor (line 16) | constructor(props) {
method render (line 31) | render() {
FILE: src/index.d.ts
type MarkdownNiceProps (line 7) | interface MarkdownNiceProps {
class MarkdownNice (line 62) | class MarkdownNice extends React.Component<MarkdownNiceProps, any> {}
FILE: src/layout/Dialog.js
class Dialog (line 11) | class Dialog extends Component {
method render (line 12) | render() {
FILE: src/layout/EditorMenu.js
class EditorMenu (line 9) | class EditorMenu extends Component {
method render (line 10) | render() {
FILE: src/layout/Footer.js
class Footer (line 11) | @inject("content")
method constructor (line 16) | constructor(props) {
method render (line 64) | render() {
FILE: src/layout/Navbar.js
class Navbar (line 17) | @inject("view")
method render (line 20) | render() {
FILE: src/layout/Sidebar.js
class Sidebar (line 12) | @inject("view")
method render (line 15) | render() {
FILE: src/layout/StyleEditor.js
class StyleEditor (line 15) | @inject("content")
method constructor (line 19) | constructor(props) {
method render (line 79) | render() {
FILE: src/serviceWorker.js
function register (line 21) | function register(config) {
function registerValidSW (line 55) | function registerValidSW(swUrl, config) {
function checkValidServiceWorker (line 99) | function checkValidServiceWorker(swUrl, config) {
function unregister (line 122) | function unregister() {
FILE: src/store/content.js
class Content (line 6) | class Content {
FILE: src/store/dialog.js
class Dialog (line 3) | class Dialog {
FILE: src/store/footer.js
class Footer (line 3) | class Footer {
FILE: src/store/imageHosting.js
class ImageHosting (line 10) | class ImageHosting {
FILE: src/store/navbar.js
class Navbar (line 15) | class Navbar {
FILE: src/store/title.js
class Title (line 4) | class Title {
FILE: src/store/userInfo.js
class UserInfo (line 4) | class UserInfo {
FILE: src/store/view.js
class View (line 3) | class View {
FILE: src/utils/constant.js
constant CLIENT_ID (line 1) | const CLIENT_ID = process.env.NODE_ENV === "development" ? "e791aa2a7a64...
constant CLIENT_SECRET (line 2) | const CLIENT_SECRET =
constant PROXY (line 7) | const PROXY = "https://cors-anywhere.herokuapp.com/https://github.com/lo...
constant SM_MS_PROXY (line 8) | const SM_MS_PROXY = "https://cors-anywhere.herokuapp.com/https://sm.ms/a...
constant ACCESS_TOKEN (line 9) | const ACCESS_TOKEN = "ACCESS_TOKEN";
constant USERNAME (line 11) | const USERNAME = "username";
constant AVATAR (line 12) | const AVATAR = "avatar";
constant USERID (line 13) | const USERID = "userId";
constant EMAIL (line 14) | const EMAIL = "email";
constant TOKEN (line 15) | const TOKEN = "token";
constant MJX_DATA_FORMULA (line 17) | const MJX_DATA_FORMULA = "data-formula";
constant MJX_DATA_FORMULA_TYPE (line 18) | const MJX_DATA_FORMULA_TYPE = "data-formula-type";
constant CONTENT (line 20) | const CONTENT = "content";
constant STYLE (line 21) | const STYLE = "style";
constant TEMPLATE_NUM (line 22) | const TEMPLATE_NUM = "template_num";
constant CODE_NUM (line 23) | const CODE_NUM = "code_num";
constant THEME_LIST (line 24) | const THEME_LIST = "theme_list";
constant PREVIEW_TYPE (line 25) | const PREVIEW_TYPE = "preview_type";
constant IS_SYNC_SCROLL (line 26) | const IS_SYNC_SCROLL = "is_sync_scroll";
constant IS_CONTAIN_IMG_NAME (line 27) | const IS_CONTAIN_IMG_NAME = "is_contain_img_name";
constant IS_MAC_CODE (line 28) | const IS_MAC_CODE = "is_mac_code";
constant NEWEST_VERSION (line 29) | const NEWEST_VERSION = "newest_version";
constant ALIOSS_IMAGE_HOSTING (line 30) | const ALIOSS_IMAGE_HOSTING = "alioss_image_hosting";
constant GITEE_IMAGE_HOSTING (line 31) | const GITEE_IMAGE_HOSTING = "gitee_image_hosting";
constant GITHUB_IMAGE_HOSTING (line 32) | const GITHUB_IMAGE_HOSTING = "github_image_hosting";
constant QINIUOSS_IMAGE_HOSTING (line 33) | const QINIUOSS_IMAGE_HOSTING = "qiniuoss_image_hosting";
constant IMAGE_HOSTING_TYPE (line 34) | const IMAGE_HOSTING_TYPE = "image_hosting_type";
constant BASIC_THEME_ID (line 35) | const BASIC_THEME_ID = "basic-theme";
constant CODE_THEME_ID (line 36) | const CODE_THEME_ID = "code-theme";
constant MARKDOWN_THEME_ID (line 37) | const MARKDOWN_THEME_ID = "markdown-theme";
constant FONT_THEME_ID (line 38) | const FONT_THEME_ID = "font-theme";
constant LAYOUT_ID (line 39) | const LAYOUT_ID = "nice";
constant BOX_ID (line 40) | const BOX_ID = "nice-rich-text-box";
constant IMAGE_HOSTING_NAMES (line 41) | const IMAGE_HOSTING_NAMES = {
constant RIGHT_SYMBOL (line 49) | const RIGHT_SYMBOL = "✔️";
constant EXPORT_FILENAME_SUFFIX (line 50) | const EXPORT_FILENAME_SUFFIX = ".md";
constant STYLE_LABELS (line 52) | const STYLE_LABELS = ["basic-theme", "markdown-theme", "code-theme", "fo...
constant ENTER_DELAY (line 54) | const ENTER_DELAY = 0.5;
constant LEAVE_DELAY (line 55) | const LEAVE_DELAY = 0.0;
constant MAX_MD_NUMBER (line 57) | const MAX_MD_NUMBER = 100000;
constant THROTTLE_MATHJAX_TIME (line 58) | const THROTTLE_MATHJAX_TIME = 1500;
constant THROTTLE_MD_RENDER_TIME (line 59) | const THROTTLE_MD_RENDER_TIME = 100;
constant CODE_OPTIONS (line 61) | const CODE_OPTIONS = [
constant SITDOWN_OPTIONS (line 94) | const SITDOWN_OPTIONS = [
constant TUTORIALS (line 122) | const TUTORIALS = [
FILE: src/utils/helper.js
function getBase64Image (line 179) | function getBase64Image(img) {
FILE: src/utils/imageHosting.js
function showUploadNoti (line 22) | function showUploadNoti() {
function uploadError (line 26) | function uploadError(description = "图片上传失败") {
function hideUploadNoti (line 30) | function hideUploadNoti() {
function writeToEditor (line 35) | function writeToEditor({content, image}) {
FILE: src/utils/markdown-it-li.js
function makeRule (line 1) | function makeRule(md) {
FILE: src/utils/markdown-it-linkfoot.js
function renderFootnoteAnchorName (line 1) | function renderFootnoteAnchorName(tokens, idx, options, env) {
function renderFootnoteCaption (line 12) | function renderFootnoteCaption(tokens, idx) {
function renderFootnoteWord (line 23) | function renderFootnoteWord(tokens, idx, options, env, slf) {
function renderFootnoteRef (line 27) | function renderFootnoteRef(tokens, idx, options, env, slf) {
function renderFootnoteBlockOpen (line 34) | function renderFootnoteBlockOpen(tokens, idx, options) {
function renderFootnoteBlockClose (line 38) | function renderFootnoteBlockClose() {
function renderFootnoteOpen (line 42) | function renderFootnoteOpen(tokens, idx, options, env, slf) {
function renderFootnoteClose (line 52) | function renderFootnoteClose() {
function isSpace (line 57) | function isSpace(code) {
function normalizeReference (line 67) | function normalizeReference(str) {
function linkFoot (line 77) | function linkFoot(state, silent) {
function footnoteTail (line 269) | function footnoteTail(state) {
FILE: src/utils/markdown-it-math.js
function isValidDelim (line 13) | function isValidDelim(state, pos) {
function math_inline (line 42) | function math_inline(state, silent) {
function math_block (line 117) | function math_block(state, start, end, silent) {
FILE: src/utils/markdown-it-multiquote.js
function makeRule (line 1) | function makeRule() {
FILE: src/utils/markdown-it-span.js
function slugify (line 1) | function slugify(s, md) {
function makeRule (line 7) | function makeRule(md, options) {
FILE: src/utils/markdown-it-table-container.js
function makeRule (line 1) | function makeRule() {
FILE: stories/allImageHosting.js
function App (line 18) | function App() {
FILE: stories/defaultImageHosting.js
function App (line 9) | function App() {
FILE: stories/noneImageHosting.js
function App (line 16) | function App() {
FILE: stories/online.js
function App (line 15) | function App() {
FILE: watch.js
function debounce (line 5) | function debounce(func, wait, immediate) {
function build (line 32) | function build() {
function setupWatch (line 41) | function setupWatch() {
Condensed preview — 185 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (459K chars).
[
{
"path": ".eslintignore",
"chars": 43,
"preview": "/config/\n/scripts/\n*.test.*\n/main.js\n*.d.ts"
},
{
"path": ".eslintrc",
"chars": 1654,
"preview": "{\n \"extends\": [\"airbnb\", \"plugin:prettier/recommended\"], // eslint扩展规则\n \"parserOptions\": {\n \"ecmaVersion\": 7,\n \""
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 240,
"preview": "---\nname: 提交 Bug \nabout: 提交 Bug 用于改进本项目\ntitle: ''\nlabels: bug\nassignees: guanpengchn\n\n---\n\n**运行环境：**\n\n|操作系统|浏览器|\n|---|--"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 94,
"preview": "---\nname: 新特性\nabout: 有新特性的需要\ntitle: ''\nlabels: feature\nassignees: guanpengchn\n\n---\n\n**新特性描述：**"
},
{
"path": ".gitignore",
"chars": 337,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": ".npmignore",
"chars": 151,
"preview": "build\nconfig\ndist\nnode_modules\npublic\nscripts\nsrc\n.eslintrc\n.gitignore\n.prettierrc\nlogo.png\nmain.js\npackage.json\npackage"
},
{
"path": ".prettierrc",
"chars": 238,
"preview": "{\n \"printWidth\": 120,\n \"tabWidth\": 2,\n \"useTabs\": false,\n \"semi\": true,\n \"singleQuote\": false,\n \"jsxSingleQuote\": "
},
{
"path": ".storybook/.babelrc",
"chars": 67,
"preview": "{\n \"presets\": [\n \"@babel/env\",\n \"@babel/preset-react\"\n ]\n}\n"
},
{
"path": ".storybook/config.js",
"chars": 190,
"preview": "import { configure } from '@storybook/react';\n\nfunction loadStories() {\n require('../stories/index.js');\n // You can r"
},
{
"path": "CHANGELOG.md",
"chars": 5060,
"preview": "v1.8.22 发布日期：2020-09-29\n\n- 控制编辑器字数\n- 渲染节流\n- gitee 和 github 图床进行 encodeURI 转码\n\nv1.8.21 发布日期：2020-09-26\n\n- 多级引用样式 bug\n\nv1."
},
{
"path": "LICENSE",
"chars": 35146,
"preview": " GNU GENERAL PUBLIC LICENSE\n Version 3, 29 June 2007\n\n Copyright (C) 2007 Free "
},
{
"path": "README.md",
"chars": 959,
"preview": "<div align=\"center\">\n<a href=\"https://mdnice.com\">\n<img width=\"500\" src=\"https://files.mdnice.com/logo.svg\"/>\n</a>\n</div"
},
{
"path": "config/env.js",
"chars": 3487,
"preview": "'use strict';\n\nconst fs = require('fs');\nconst path = require('path');\nconst paths = require('./paths');\n\n// Make sure t"
},
{
"path": "config/jest/cssTransform.js",
"chars": 314,
"preview": "'use strict';\n\n// This is a custom Jest transformer turning style imports into empty objects.\n// http://facebook.github."
},
{
"path": "config/jest/fileTransform.js",
"chars": 755,
"preview": "'use strict';\n\nconst path = require('path');\n\n// This is a custom Jest transformer turning file imports into filenames.\n"
},
{
"path": "config/paths.js",
"chars": 2727,
"preview": "\"use strict\";\n\nconst path = require(\"path\");\nconst fs = require(\"fs\");\nconst url = require(\"url\");\n\n// Make sure any sym"
},
{
"path": "config/webpack.config.js",
"chars": 27195,
"preview": "\"use strict\";\n\nconst fs = require(\"fs\");\nconst path = require(\"path\");\nconst webpack = require(\"webpack\");\nconst resolve"
},
{
"path": "config/webpack.config.lib.js",
"chars": 25693,
"preview": "\"use strict\";\n\nconst fs = require(\"fs\");\nconst path = require(\"path\");\nconst webpack = require(\"webpack\");\nconst resolve"
},
{
"path": "config/webpackDevServer.config.js",
"chars": 5646,
"preview": "'use strict';\n\nconst errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');\nconst evalSourceMapMidd"
},
{
"path": "main.js",
"chars": 1124,
"preview": "// 引入electron并创建一个Browserwindow\nconst {app, BrowserWindow} = require('electron')\nconst path = require('path')\nconst url "
},
{
"path": "package.json",
"chars": 6454,
"preview": "{\n \"name\": \"markdown-nice\",\n \"author\": \"mdnice\",\n \"description\": \"a markdown editor with the function of style editio"
},
{
"path": "public/index.html",
"chars": 1574,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <link rel=\"shortcut icon\" href=\"%PUBLIC_URL%/"
},
{
"path": "public/manifest.json",
"chars": 329,
"preview": "{\n \"short_name\": \"Markdown Nice\",\n \"name\": \"Markdown Nice\",\n \"icons\": [\n {\n \"sizes\": \"128x128\",\n \"type\":"
},
{
"path": "scripts/build.js",
"chars": 6062,
"preview": "'use strict';\n\n// Do this as the first thing so that any code reading it knows the right env.\nprocess.env.BABEL_ENV = 'p"
},
{
"path": "scripts/start.js",
"chars": 3857,
"preview": "'use strict';\n\n// Do this as the first thing so that any code reading it knows the right env.\nprocess.env.BABEL_ENV = 'd"
},
{
"path": "scripts/test.js",
"chars": 1586,
"preview": "'use strict';\n\n// Do this as the first thing so that any code reading it knows the right env.\nprocess.env.BABEL_ENV = 't"
},
{
"path": "src/App.css",
"chars": 2193,
"preview": ".nice-app {\n height: 100vh;\n width: 100%;\n display: flex;\n flex-direction: column;\n font-family: \"PingFang SC\", Bli"
},
{
"path": "src/App.js",
"chars": 13139,
"preview": "import React, {Component} from \"react\";\nimport CodeMirror from \"@uiw/react-codemirror\";\nimport \"codemirror/addon/search/"
},
{
"path": "src/App.test.js",
"chars": 248,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nit('renders without crashing', ()"
},
{
"path": "src/Lib.js",
"chars": 3902,
"preview": "import React, {Component} from \"react\";\nimport PropTypes from \"prop-types\";\nimport {Result} from \"antd\";\nimport {Provide"
},
{
"path": "src/component/Dialog/AboutDialog.js",
"chars": 3380,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\nimport {Modal, Button} from \"antd\";"
},
{
"path": "src/component/Dialog/FormDialog.js",
"chars": 2495,
"preview": "import React from \"react\";\nimport {observer, inject} from \"mobx-react\";\nimport {Modal, InputNumber, Form} from \"antd\";\n\n"
},
{
"path": "src/component/Dialog/HistoryDialog.js",
"chars": 3843,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\nimport {Modal, Empty, message} from"
},
{
"path": "src/component/Dialog/ImageDialog.js",
"chars": 5389,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\nimport {Modal, Upload, Tabs, Select"
},
{
"path": "src/component/Dialog/LinkDialog.js",
"chars": 1459,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\nimport {Modal, Input, Form} from \"a"
},
{
"path": "src/component/Dialog/SitDownDialog.js",
"chars": 3231,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\nimport {Modal, Input, Select, messa"
},
{
"path": "src/component/Dialog/TutorialDialog.js",
"chars": 1704,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\nimport {Modal, Button, message} fro"
},
{
"path": "src/component/Dialog/VersionDialog.css",
"chars": 35,
"preview": ".specialInfo > * {\n width: 100%;\n}"
},
{
"path": "src/component/Dialog/VersionDialog.js",
"chars": 3685,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\nimport {Modal, Timeline, Button} fr"
},
{
"path": "src/component/ImageHosting/AliOSS.js",
"chars": 2865,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\nimport {Input, Form} from \"antd\";\ni"
},
{
"path": "src/component/ImageHosting/GitHub.js",
"chars": 2811,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\nimport {Input, Form, Checkbox} from"
},
{
"path": "src/component/ImageHosting/Gitee.js",
"chars": 2288,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\nimport {Input, Form} from \"antd\";\ni"
},
{
"path": "src/component/ImageHosting/QiniuOSS.js",
"chars": 4048,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\nimport {Input, Select, Form} from \""
},
{
"path": "src/component/LocalHistory/index.js",
"chars": 3267,
"preview": "import * as React from \"react\";\nimport {Menu, Button, Radio} from \"antd\";\nimport CodeMirror from \"@uiw/react-codemirror\""
},
{
"path": "src/component/LocalHistory/indexdb.js",
"chars": 2013,
"preview": "import {message} from \"antd\";\n\n// In the following line, you should include the prefixes of implementations you want to "
},
{
"path": "src/component/LocalHistory/localHistory.css",
"chars": 1721,
"preview": ".nice-md-local-history .ant-modal-body {\n display: flex;\n height: calc(100vh - 112px);\n}\n\n.nice-md-local-history ."
},
{
"path": "src/component/LocalHistory/util.js",
"chars": 2862,
"preview": "import {message} from \"antd\";\n\nfunction saveTimeSort(a, b) {\n return new Date(b.SaveTime).getTime() - new Date(a.SaveTi"
},
{
"path": "src/component/MenuLeft/CodeTheme.css",
"chars": 226,
"preview": ".nice-codetheme-item {\n display: flex;\n justify-content: space-between;\n padding: 5px 12px 5px 6px;\n}\n.nice-codetheme"
},
{
"path": "src/component/MenuLeft/CodeTheme.js",
"chars": 2118,
"preview": "import React from \"react\";\nimport {Menu, Dropdown} from \"antd\";\nimport {observer, inject} from \"mobx-react\";\n\nimport {CO"
},
{
"path": "src/component/MenuLeft/File/ExportMarkdown.js",
"chars": 971,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\nimport {message} from \"antd\";\n\nimpo"
},
{
"path": "src/component/MenuLeft/File/ExportPdf.js",
"chars": 495,
"preview": "import React, {Component} from \"react\";\n\nimport \"../common.css\";\n\nclass ExportPdf extends Component {\n handleClick = ()"
},
{
"path": "src/component/MenuLeft/File/ImportFile.js",
"chars": 987,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport \"../common.css\";\nimport {me"
},
{
"path": "src/component/MenuLeft/File.js",
"chars": 731,
"preview": "import React, {Component} from \"react\";\nimport {Menu, Dropdown} from \"antd\";\n\nimport ExportMarkdown from \"./File/ExportM"
},
{
"path": "src/component/MenuLeft/Function/History.js",
"chars": 545,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport \"../common.css\";\n\n@inject(\""
},
{
"path": "src/component/MenuLeft/Function/Reset.js",
"chars": 1054,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\nimport {Modal, message} from \"antd\""
},
{
"path": "src/component/MenuLeft/Function/Search.js",
"chars": 683,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport {hotKeys} from \"../../../ut"
},
{
"path": "src/component/MenuLeft/Function/SitDown.js",
"chars": 564,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport \"../common.css\";\n\n@inject(\""
},
{
"path": "src/component/MenuLeft/Function.js",
"chars": 827,
"preview": "import React, {Component} from \"react\";\nimport {Menu, Dropdown} from \"antd\";\n\nimport Reset from \"./Function/Reset\";\nimpo"
},
{
"path": "src/component/MenuLeft/Help/About.js",
"chars": 535,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport \"../common.css\";\n\n@inject(\""
},
{
"path": "src/component/MenuLeft/Help/Document.js",
"chars": 535,
"preview": "import React, {Component} from \"react\";\n\nimport \"../common.css\";\n\nclass Document extends Component {\n handleClick = () "
},
{
"path": "src/component/MenuLeft/Help/Question.js",
"chars": 545,
"preview": "import React, {Component} from \"react\";\n\nimport \"../common.css\";\n\nclass Question extends Component {\n handleClick = () "
},
{
"path": "src/component/MenuLeft/Help/Version.js",
"chars": 545,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport \"../common.css\";\n\n@inject(\""
},
{
"path": "src/component/MenuLeft/Help.js",
"chars": 785,
"preview": "import React, {Component} from \"react\";\nimport {Menu, Dropdown} from \"antd\";\n\nimport About from \"./Help/About\";\nimport V"
},
{
"path": "src/component/MenuLeft/LogIn.js",
"chars": 1683,
"preview": "import React from \"react\";\nimport {Tooltip, Button} from \"antd\";\nimport {observer, inject} from \"mobx-react\";\nimport axi"
},
{
"path": "src/component/MenuLeft/Login.css",
"chars": 123,
"preview": ".nice-btn-login {\n border: none;\n width: 24px;\n height: 24px;\n}\n\n.nice-btn-login-icon {\n width: 24px;\n height: 24px"
},
{
"path": "src/component/MenuLeft/Paragraph.js",
"chars": 766,
"preview": "import React, {Component} from \"react\";\nimport {Menu, Dropdown} from \"antd\";\n\nimport \"./common.css\";\n\nconst menu = (\n <"
},
{
"path": "src/component/MenuLeft/Pattern/Bold.js",
"chars": 936,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport {bold} from \"../../../utils"
},
{
"path": "src/component/MenuLeft/Pattern/Code.js",
"chars": 935,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport {code} from \"../../../utils"
},
{
"path": "src/component/MenuLeft/Pattern/Del.js",
"chars": 930,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport {del} from \"../../../utils/"
},
{
"path": "src/component/MenuLeft/Pattern/Font.js",
"chars": 1299,
"preview": "import React, {Component} from \"react\";\nimport {message} from \"antd\";\n\nimport {FONT_THEME_ID, RIGHT_SYMBOL} from \"../../"
},
{
"path": "src/component/MenuLeft/Pattern/Form.js",
"chars": 642,
"preview": "import React, {Component} from \"react\";\nimport {inject, observer} from \"mobx-react\";\n\nimport {hotKeys} from \"../../../ut"
},
{
"path": "src/component/MenuLeft/Pattern/Format.js",
"chars": 763,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport {formatDoc} from \"../../../"
},
{
"path": "src/component/MenuLeft/Pattern/Image.js",
"chars": 647,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport {hotKeys} from \"../../../ut"
},
{
"path": "src/component/MenuLeft/Pattern/InlineCode.js",
"chars": 974,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport {inlineCode} from \"../../.."
},
{
"path": "src/component/MenuLeft/Pattern/Italic.js",
"chars": 947,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport {italic} from \"../../../uti"
},
{
"path": "src/component/MenuLeft/Pattern/Link.js",
"chars": 642,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport {hotKeys} from \"../../../ut"
},
{
"path": "src/component/MenuLeft/Pattern/LinkToFoot.js",
"chars": 787,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport {parseLinkToFoot} from \"../"
},
{
"path": "src/component/MenuLeft/Pattern.js",
"chars": 1445,
"preview": "import React, {Component} from \"react\";\nimport {Menu, Dropdown} from \"antd\";\n\nimport Bold from \"./Pattern/Bold\";\nimport "
},
{
"path": "src/component/MenuLeft/Setting/ContainImgName.js",
"chars": 757,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport {RIGHT_SYMBOL} from \"../../"
},
{
"path": "src/component/MenuLeft/Setting/SyncScroll.js",
"chars": 731,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport {RIGHT_SYMBOL} from \"../../"
},
{
"path": "src/component/MenuLeft/Setting.js",
"chars": 652,
"preview": "import React, {Component} from \"react\";\nimport {Menu, Dropdown} from \"antd\";\n\nimport SyncScroll from \"./Setting/SyncScro"
},
{
"path": "src/component/MenuLeft/Theme.css",
"chars": 1011,
"preview": ".nice-themeselect-md-cutom-menu {\n margin-left: 8px;\n border: 1px dashed #1890ff;\n}\n.nice-themeselect-md-menu {\n marg"
},
{
"path": "src/component/MenuLeft/Theme.js",
"chars": 4921,
"preview": "import React from \"react\";\nimport {Menu, Dropdown} from \"antd\";\nimport {observer, inject} from \"mobx-react\";\n\nimport {RI"
},
{
"path": "src/component/MenuLeft/Tutorial.js",
"chars": 1329,
"preview": "import React, {Component} from \"react\";\nimport {Menu, Dropdown} from \"antd\";\nimport {observer, inject} from \"mobx-react\""
},
{
"path": "src/component/MenuLeft/View/EditArea.js",
"chars": 725,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport {RIGHT_SYMBOL} from \"../../"
},
{
"path": "src/component/MenuLeft/View/FullScreen.js",
"chars": 1172,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport \"../common.css\";\n\n@inject(\""
},
{
"path": "src/component/MenuLeft/View/PreviewArea.js",
"chars": 746,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport {RIGHT_SYMBOL} from \"../../"
},
{
"path": "src/component/MenuLeft/View/ThemeArea.js",
"chars": 743,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\n\nimport {RIGHT_SYMBOL} from \"../../"
},
{
"path": "src/component/MenuLeft/View.js",
"chars": 838,
"preview": "import React, {Component} from \"react\";\nimport {Menu, Dropdown} from \"antd\";\n\nimport FullScreen from \"./View/FullScreen\""
},
{
"path": "src/component/MenuLeft/common.css",
"chars": 810,
"preview": ".nice-menu-item {\n display: flex;\n justify-content: space-between;\n width: 100%;\n padding: 5px 12px 5px 6px;\n}\n\n.nic"
},
{
"path": "src/component/SearchBox/SearchBox.css",
"chars": 1859,
"preview": ".mdnice-searchbox {\n position: absolute;\n right: 20px;\n top: 20px;\n z-index: 20;\n transition: all 0.15s ease-in-out"
},
{
"path": "src/component/SearchBox/index.js",
"chars": 6462,
"preview": "/* eslint-disable react/no-did-update-set-state */\n/* eslint-disable react/no-unused-state */\nimport React, {createRef} "
},
{
"path": "src/component/Sidebar/Juejin.css",
"chars": 144,
"preview": ".nice-btn-juejin {\n padding: 0;\n margin-bottom: 10px;\n}\n\n.nice-btn-juejin-icon {\n padding: 5px 5px 5px 2px;\n width: "
},
{
"path": "src/component/Sidebar/Juejin.js",
"chars": 1388,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\nimport {message, Tooltip} from \"ant"
},
{
"path": "src/component/Sidebar/PreviewType.css",
"chars": 142,
"preview": ".nice-btn-previewtype {\n padding: 0;\n margin-bottom: 10px;\n}\n\n.nice-btn-previewtype-icon {\n padding: 7px;\n width: 30"
},
{
"path": "src/component/Sidebar/PreviewType.js",
"chars": 869,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\nimport {Tooltip} from \"antd\";\n\nimpo"
},
{
"path": "src/component/Sidebar/Wechat.css",
"chars": 132,
"preview": ".nice-btn-wechat {\n padding: 0;\n margin-bottom: 10px;\n}\n\n.nice-btn-wechat-icon {\n padding: 6px;\n width: 30px;\n heig"
},
{
"path": "src/component/Sidebar/Wechat.js",
"chars": 1166,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\nimport {message, Tooltip} from \"ant"
},
{
"path": "src/component/Sidebar/Zhihu.css",
"chars": 130,
"preview": ".nice-btn-zhihu {\n padding: 0;\n margin-bottom: 10px;\n}\n\n.nice-btn-zhihu-icon {\n padding: 5px;\n width: 30px;\n height"
},
{
"path": "src/component/Sidebar/Zhihu.js",
"chars": 1150,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\nimport {message, Tooltip} from \"ant"
},
{
"path": "src/icon/Close.js",
"chars": 765,
"preview": "import React from \"react\";\nimport \"./index.css\";\n\nexport default ({fill = \"rgba(0,0,0,0.65)\", style = {}, className = \"i"
},
{
"path": "src/icon/Copy.js",
"chars": 1137,
"preview": "import React from \"react\";\nimport \"./index.css\";\n\nexport default ({fill = \"rgba(0,0,0,0.65)\", style = {}, className = \"i"
},
{
"path": "src/icon/Down.js",
"chars": 565,
"preview": "import React from \"react\";\nimport \"./index.css\";\n\nexport default ({style = {}, className = \"icon\", viewBox = \"0 0 1024 1"
},
{
"path": "src/icon/Environment.js",
"chars": 2197,
"preview": "import React from \"react\";\nimport \"./index.css\";\n\nexport default ({fill = \"#1890ff\", style = {}, className = \"icon\", vie"
},
{
"path": "src/icon/FontCase.js",
"chars": 801,
"preview": "import React from \"react\";\nimport \"./index.css\";\n\nexport default ({fill = \"rgba(0,0,0,0.65)\", style = {}, className = \"i"
},
{
"path": "src/icon/GitHub.js",
"chars": 1970,
"preview": "import React from \"react\";\nimport \"./index.css\";\n\nexport default ({fill = \"rgba(0,0,0,0.65)\", style = {}, className = \"i"
},
{
"path": "src/icon/Inbox.js",
"chars": 1505,
"preview": "import React from \"react\";\nimport \"./index.css\";\n\nexport default ({fill = \"rgba(0,0,0,0.65)\", style = {}, className = \"i"
},
{
"path": "src/icon/Juejin.js",
"chars": 937,
"preview": "import React from \"react\";\nimport \"./index.css\";\n\nexport default ({fill = \"rgba(0,0,0,0.65)\", style = {}, className = \"i"
},
{
"path": "src/icon/Mobile.js",
"chars": 631,
"preview": "import React from \"react\";\nimport \"./index.css\";\n\nexport default ({fill = \"rgba(0,0,0,0.65)\", style = {}, className = \"i"
},
{
"path": "src/icon/More.js",
"chars": 1220,
"preview": "import React from \"react\";\nimport \"./index.css\";\n\nexport default ({fill = \"#1890ff\", style = {}, className = \"icon\", vie"
},
{
"path": "src/icon/PC.js",
"chars": 646,
"preview": "import React from \"react\";\nimport \"./index.css\";\n\nexport default ({fill = \"rgba(0,0,0,0.65)\", style = {}, className = \"i"
},
{
"path": "src/icon/Rabbit.js",
"chars": 6276,
"preview": "import React from \"react\";\nimport \"./index.css\";\n\nexport default ({fill = \"#333333\", style = {}, className = \"icon\", vie"
},
{
"path": "src/icon/Replace.js",
"chars": 2122,
"preview": "import React from \"react\";\nimport \"./index.css\";\n\nexport default ({fill = \"rgba(0,0,0,0.65)\", style = {}, className = \"i"
},
{
"path": "src/icon/ReplaceAll.js",
"chars": 2144,
"preview": "import React from \"react\";\nimport \"./index.css\";\n\nexport default ({fill = \"rgba(0,0,0,0.65)\", style = {}, className = \"i"
},
{
"path": "src/icon/Smile.js",
"chars": 1305,
"preview": "import React from \"react\";\nimport \"./index.css\";\n\nexport default ({fill = \"rgba(0,0,0,0.65)\", style = {}, className = \"i"
},
{
"path": "src/icon/User.js",
"chars": 1029,
"preview": "import React from \"react\";\nimport \"./index.css\";\n\nexport default ({fill = \"rgba(0,0,0,0.65)\", style = {}, className = \"i"
},
{
"path": "src/icon/Wechat.js",
"chars": 1844,
"preview": "import React from \"react\";\nimport \"./index.css\";\n\nexport default ({fill = \"rgba(0,0,0,0.65)\", style = {}, className = \"i"
},
{
"path": "src/icon/Zhihu.js",
"chars": 1349,
"preview": "import React from \"react\";\nimport \"./index.css\";\n\nexport default ({fill = \"rgba(0,0,0,0.65)\", style = {}, className = \"i"
},
{
"path": "src/icon/index.css",
"chars": 69,
"preview": ".icon {\n transition: fill 0.5s;\n}\n\n.icon:hover {\n fill: #40a9ff;\n}\n"
},
{
"path": "src/icon/index.js",
"chars": 1655,
"preview": "import React from \"react\";\n\nimport Copy from \"./Copy\";\nimport Down from \"./Down\";\nimport Environment from \"./Environment"
},
{
"path": "src/index.css",
"chars": 409,
"preview": "body {\n margin: 0;\n padding: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n "
},
{
"path": "src/index.d.ts",
"chars": 1184,
"preview": "import * as React from \"react\";\n\n// declare const PreviewTypes: [\"pc\", \"mobile\"];\n\n// export declare type PreviewType = "
},
{
"path": "src/index.js",
"chars": 698,
"preview": "import React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport Lib from \"./Lib\";\nimport * as serviceWorker from \"."
},
{
"path": "src/layout/Dialog.js",
"chars": 847,
"preview": "import React, {Component} from \"react\";\nimport ImageDialog from \"../component/Dialog/ImageDialog\";\nimport LinkDialog fro"
},
{
"path": "src/layout/EditorMenu.css",
"chars": 591,
"preview": ".nice-editor-menu {\n position: absolute;\n z-index: 1000;\n display: none;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) "
},
{
"path": "src/layout/EditorMenu.js",
"chars": 755,
"preview": "import React, {Component} from \"react\";\nimport {Menu} from \"antd\";\n\nimport LinkToFoot from \"../component/MenuLeft/Patter"
},
{
"path": "src/layout/Footer.css",
"chars": 1060,
"preview": ".nice-footer-container {\n display: flex;\n align-items: center;\n position: fixed;\n bottom: 0;\n width: 100%;\n height"
},
{
"path": "src/layout/Footer.js",
"chars": 3441,
"preview": "import React, {Component} from \"react\";\nimport {Menu, Dropdown, message} from \"antd\";\nimport {observer, inject} from \"mo"
},
{
"path": "src/layout/Navbar.css",
"chars": 834,
"preview": ".nice-navbar {\n height: 30px;\n display: flex;\n align-items: center;\n /* justify-content: space-between; */\n flex: n"
},
{
"path": "src/layout/Navbar.js",
"chars": 1454,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\nimport classnames from \"classnames\""
},
{
"path": "src/layout/Sidebar.css",
"chars": 175,
"preview": ".nice-sidebar {\n display: flex;\n position: absolute;\n top: 20px;\n right: 15px;\n flex-direction: column;\n align-ite"
},
{
"path": "src/layout/Sidebar.js",
"chars": 812,
"preview": "import React, {Component} from \"react\";\nimport {observer, inject} from \"mobx-react\";\nimport classnames from \"classnames\""
},
{
"path": "src/layout/StyleEditor.js",
"chars": 2696,
"preview": "import React, {Component} from \"react\";\nimport {Modal} from \"antd\";\n\nimport CodeMirror from \"@uiw/react-codemirror\";\nimp"
},
{
"path": "src/serviceWorker.js",
"chars": 4909,
"preview": "// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the ap"
},
{
"path": "src/store/content.js",
"chars": 1892,
"preview": "import {observable, action} from \"mobx\";\nimport {CONTENT, STYLE, MARKDOWN_THEME_ID, BASIC_THEME_ID, STYLE_LABELS, THEME_"
},
{
"path": "src/store/dialog.js",
"chars": 1670,
"preview": "import {observable, action} from \"mobx\";\n\nclass Dialog {\n @observable isImageOpen = false;\n\n @observable isLinkOpen = "
},
{
"path": "src/store/footer.js",
"chars": 536,
"preview": "import {observable, action} from \"mobx\";\n\nclass Footer {\n // 是否检测到富文本粘贴\n @observable isPasteHtmlChecked = false;\n\n //"
},
{
"path": "src/store/imageHosting.js",
"chars": 1816,
"preview": "import {observable, action} from \"mobx\";\nimport {\n IMAGE_HOSTING_TYPE,\n ALIOSS_IMAGE_HOSTING,\n QINIUOSS_IMAGE_HOSTING"
},
{
"path": "src/store/navbar.js",
"chars": 3222,
"preview": "import {observable, action} from \"mobx\";\nimport {\n TEMPLATE_NUM,\n CODE_NUM,\n CODE_THEME_ID,\n CODE_OPTIONS,\n PREVIEW"
},
{
"path": "src/store/title.js",
"chars": 218,
"preview": "// mobx\nimport {observable, action} from \"mobx\";\n\nclass Title {\n // 观察值\n @observable title = \"\";\n\n @action\n setTitle"
},
{
"path": "src/store/userInfo.js",
"chars": 361,
"preview": "// mobx\nimport {observable, action} from \"mobx\";\n\nclass UserInfo {\n // 观察值\n @observable userInfo = {};\n\n @observable "
},
{
"path": "src/store/view.js",
"chars": 710,
"preview": "import {observable, action} from \"mobx\";\n\nclass View {\n @observable isEditAreaOpen = true;\n\n @observable isPreviewArea"
},
{
"path": "src/template/basic.js",
"chars": 6712,
"preview": "export default `/*默认样式，最佳实践*/\n\n/*全局属性*/\n#nice {\n font-size: 16px;\n color: black;\n padding: 0 10px;\n line-height: 1.6"
},
{
"path": "src/template/code/atomOneDark.js",
"chars": 1283,
"preview": "export default `/*\n\nAtom One Dark by Daniel Gamage\nOriginal One Dark Syntax theme from https://github.com/atom/one-dark-"
},
{
"path": "src/template/code/atomOneLight.js",
"chars": 1286,
"preview": "export default `/*\n\nAtom One Light by Daniel Gamage\nOriginal One Light Syntax theme from https://github.com/atom/one-lig"
},
{
"path": "src/template/code/github.js",
"chars": 1165,
"preview": "export default `/*\n\ngithub.com style (c) Vasily Polovnyov <vast@whiteants.net>\n\n*/\n\n.hljs {\n display: block;\n overflow"
},
{
"path": "src/template/code/monokai.js",
"chars": 955,
"preview": "export default `/*\nMonokai style - ported by Luigi Maselli - http://grigio.org\n*/\n\n.hljs {\n display: block;\n overflow-"
},
{
"path": "src/template/code/vs2015.js",
"chars": 1442,
"preview": "export default `/*\n * Visual Studio 2015 dark style\n * Author: Nicolas LLOBERA <nllobera@gmail.com>\n */\n\n.hljs {\n displ"
},
{
"path": "src/template/code/xcode.js",
"chars": 1231,
"preview": "export default `/*\n\nXCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>\n\n*/\n\n.hljs {\n display: block;\n overflow-"
},
{
"path": "src/template/content.md",
"chars": 5564,
"preview": "\n\n请使用 **Chrome** 浏览器。\n\n请阅读下方文本熟悉工具使用方法，本文可直接拷贝到微信中预览。\n\n## 1 Markdown Nice 简介\n\n"
},
{
"path": "src/template/index.js",
"chars": 939,
"preview": "import custom from \"./markdown/custom\";\nimport normal from \"./markdown/normal\";\n\nimport content from \"./content.md\";\n\nim"
},
{
"path": "src/template/macCode/macAtomOneDark.js",
"chars": 1774,
"preview": "export default `/*\n\nAtom One Dark by Daniel Gamage\nOriginal One Dark Syntax theme from https://github.com/atom/one-dark-"
},
{
"path": "src/template/macCode/macAtomOneLight.js",
"chars": 1777,
"preview": "export default `/*\n\nAtom One Light by Daniel Gamage\nOriginal One Light Syntax theme from https://github.com/atom/one-lig"
},
{
"path": "src/template/macCode/macGithub.js",
"chars": 1656,
"preview": "export default `/*\n\ngithub.com style (c) Vasily Polovnyov <vast@whiteants.net>\n\n*/\n\n.hljs {\n display: block;\n overflow"
},
{
"path": "src/template/macCode/macMonokai.js",
"chars": 1446,
"preview": "export default `/*\nMonokai style - ported by Luigi Maselli - http://grigio.org\n*/\n\n.hljs {\n display: block;\n overflow-"
},
{
"path": "src/template/macCode/macVs2015.js",
"chars": 1933,
"preview": "export default `/*\n * Visual Studio 2015 dark style\n * Author: Nicolas LLOBERA <nllobera@gmail.com>\n */\n\n.hljs {\n displ"
},
{
"path": "src/template/macCode/macXcode.js",
"chars": 1716,
"preview": "export default `/*\n\nXCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>\n\n*/\n\n.hljs {\n display: block;\n overflow-"
},
{
"path": "src/template/markdown/custom.js",
"chars": 2443,
"preview": "export default `/* 自定义样式，实时生效，浏览器实时缓存 */\n\n/* 全局属性\n * 页边距 padding: 30px;\n * 全文字体 font-family: ptima-Regular;\n * 英文换行 word"
},
{
"path": "src/template/markdown/normal.js",
"chars": 2444,
"preview": "export default `/* 全局属性\n * 页边距 padding: 30px;\n * 全文字体 font-family: ptima-Regular;\n * 英文换行 word-break: break-all;\n */\n#ni"
},
{
"path": "src/utils/appContext.js",
"chars": 102,
"preview": "import React from \"react\";\n\nconst appContext = React.createContext(null);\n\nexport default appContext;\n"
},
{
"path": "src/utils/constant.js",
"chars": 7674,
"preview": "export const CLIENT_ID = process.env.NODE_ENV === \"development\" ? \"e791aa2a7a64b3f766a2\" : \"b3a3c46bd66318367efa\";\nexpor"
},
{
"path": "src/utils/converter.js",
"chars": 4986,
"preview": "import juice from \"juice\";\nimport {message} from \"antd\";\nimport {\n BASIC_THEME_ID,\n CODE_THEME_ID,\n MARKDOWN_THEME_ID"
},
{
"path": "src/utils/editorKeyEvents.js",
"chars": 4077,
"preview": "import {message} from \"antd\";\nimport prettier from \"prettier/standalone\";\nimport prettierMarkdown from \"prettier/parser-"
},
{
"path": "src/utils/helper.js",
"chars": 8090,
"preview": "import axios from \"axios\";\nimport MarkdownIt from \"markdown-it\";\nimport markdownItMath from \"./markdown-it-math\";\nimport"
},
{
"path": "src/utils/hotkey.js",
"chars": 5377,
"preview": "import * as keyEvents from \"./editorKeyEvents\";\nimport {isPlatformWindows} from \"./helper\";\n\nconst handlePressHotkey = ("
},
{
"path": "src/utils/imageHosting.js",
"chars": 13892,
"preview": "/**\n * 图片上传\n */\nimport * as qiniu from \"qiniu-js\";\nimport {message} from \"antd\";\nimport axios from \"axios\";\nimport OSS f"
},
{
"path": "src/utils/langHighlight.js",
"chars": 4244,
"preview": "// 缩小highlight包大小，按需引入，900kb->90kb\nimport highlightjs from \"highlight.js/lib/highlight\";\n\nimport bash from \"highlight.js"
},
{
"path": "src/utils/markdown-it-imageflow.js",
"chars": 1591,
"preview": "const defaultOption = {\n limitless: false, // 限制图片数量\n limit: 10, // 图片数量上限\n};\n\nconst imageFlowPlugin = (md, opt) => {\n"
},
{
"path": "src/utils/markdown-it-li.js",
"chars": 354,
"preview": "function makeRule(md) {\n return function replaceListItem() {\n md.renderer.rules.list_item_open = function replaceOpe"
},
{
"path": "src/utils/markdown-it-linkfoot.js",
"chars": 9270,
"preview": "function renderFootnoteAnchorName(tokens, idx, options, env) {\n const n = Number(tokens[idx].meta.id + 1).toString();\n "
},
{
"path": "src/utils/markdown-it-math.js",
"chars": 5621,
"preview": "/* Process inline math */\n/*\nLike markdown-it-simplemath, this is a stripped down, simplified version of:\nhttps://github"
},
{
"path": "src/utils/markdown-it-multiquote.js",
"chars": 622,
"preview": "function makeRule() {\n return function addTableContainer(state) {\n let count = 0;\n let outerQuoteToekn;\n for ("
},
{
"path": "src/utils/markdown-it-removepre.js",
"chars": 492,
"preview": "// 用来移除微信自定义代码前方的 pre code\nexport default (md) => {\n const oldFence = md.renderer.rules.fence;\n md.renderer.rules.fenc"
},
{
"path": "src/utils/markdown-it-span.js",
"chars": 1410,
"preview": "function slugify(s, md) {\n // Unicode-friendly\n var spaceRegex = new RegExp(md.utils.lib.ucmicro.Z.source, \"g\");\n ret"
},
{
"path": "src/utils/markdown-it-table-container.js",
"chars": 850,
"preview": "function makeRule() {\n return function addTableContainer(state) {\n var arr = [];\n for (var i = 0; i < state.token"
},
{
"path": "src/utils/mdMirror.css",
"chars": 2390,
"preview": "/*\n\n Name: Base16 Default Light\n Author: Chris Kempson (http://chriskempson.com)\n\n CodeMirror templat"
},
{
"path": "src/utils/pluginCenter.js",
"chars": 50,
"preview": "// 检测插件是否安装\nexport default {\n mathjax: false,\n};\n"
},
{
"path": "src/utils/sitdownConverter.js",
"chars": 1328,
"preview": "import {Sitdown, RootNode} from \"sitdown/dist/src.esm\";\nimport {applyJuejinRule} from \"@sitdown/juejin/dist/src.esm\";\nim"
},
{
"path": "src/utils/styleMirror.css",
"chars": 2782,
"preview": "/*\n\n Name: Base16 Default Light\n Author: Chris Kempson (http://chriskempson.com)\n\n CodeMirror templat"
},
{
"path": "stories/allImageHosting.js",
"chars": 568,
"preview": "import React from \"react\";\nimport MarkdownNice from \"../lib/Lib\";\n\n// 编辑器默认的内容\nconst defaultText = `编辑器默认的内容`;\n// 标题，是一个"
},
{
"path": "stories/defaultImageHosting.js",
"chars": 362,
"preview": "import React from \"react\";\nimport MarkdownNice from \"../lib/Lib\";\n\n// 编辑器默认的内容\nconst defaultText = `编辑器默认的内容`;\n// 标题，是一个"
},
{
"path": "stories/index.js",
"chars": 473,
"preview": "import React from \"react\";\nimport {storiesOf} from \"@storybook/react\";\nimport Online from \"./online\";\nimport AllImageHos"
},
{
"path": "stories/noneImageHosting.js",
"chars": 512,
"preview": "import React from \"react\";\nimport MarkdownNice from \"../lib/Lib\";\n\n// 编辑器默认的内容\nconst defaultText = `编辑器默认的内容`;\n// 标题，是一个"
},
{
"path": "stories/online.js",
"chars": 678,
"preview": "import React from \"react\";\nimport MarkdownNice from \"../lib/Lib\";\n\n// 编辑器默认的内容\nconst defaultText = `编辑器默认的内容`;\n// 标题，是一个"
},
{
"path": "watch.js",
"chars": 1507,
"preview": "const chalk = require(\"chalk\");\nconst shelljs = require(\"shelljs\");\nconst chokidar = require(\"chokidar\");\n\nfunction debo"
}
]
About this extraction
This page contains the full source code of the mdnice/markdown-nice GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 185 files (416.6 KB), approximately 126.7k tokens, and a symbol index with 281 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.