Skip to content

Commit f28b7d9

Browse files
TitanSnowdark-flames
TitanSnow
authored and
dark-flames
committed
Refactor (#18)
* refactor * update README.md * update i18n
1 parent 22c1291 commit f28b7d9

37 files changed

+3851
-1977
lines changed

‎.after-build.sh‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
#!/bin/bash
2+
3+
set -e
4+
5+
src=dist/MarkdownPalettes.umd.min.js
6+
dist=dist/markdown-palettes.js
7+
vue=https://cdn.jsdelivr.net/npm/[email protected]
8+
9+
wget $vue -O $dist
10+
echo >> $dist
11+
cat $src >> $dist
12+
cat - >> $dist << EOF
13+
14+
(function(mp){
15+
'use strict'
16+
class MarkdownPalettes {
17+
constructor (el, config = {}) {
18+
this.config = config
19+
this.editor = new Vue(mp)
20+
this.editor.\$mount(el)
21+
}
22+
getContentParaser () {
23+
return this.editor.contentParser
24+
}
25+
}
26+
window.MarkdownPalettes = MarkdownPalettes
27+
})(MarkdownPalettes)
28+
EOF

‎.babelrc‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
{
2-
"presets": [
3-
["env", { "modules": false }],
4-
"stage-3"
5-
],
6-
"plugins": ["lodash", "transform-runtime"]
2+
"presets": [
3+
["modern-browsers", {
4+
"modules": false
5+
}],
6+
"@babel/preset-stage-3"
7+
],
8+
"plugins": [
9+
"transform-vue-jsx",
10+
"lodash"
11+
]
712
}

‎.eslintrc‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
{
2-
"extends": ["standard"],
3-
"plugins": ["html"],
4-
"settings": {
5-
"html/indent": "0",
6-
"html/report-bad-indent": "error"
7-
},
8-
"rules": {
9-
"indent": ["error", 4],
10-
"prefer-const": ["warn"]
11-
},
12-
"env": {
13-
"browser": true
14-
},
15-
"parser": "babel-eslint"
2+
"root": true,
3+
"env": {
4+
"node": true
5+
},
6+
"extends": [
7+
"plugin:vue/essential",
8+
"@vue/standard"
9+
],
10+
"rules": {
11+
"indent": ["error", 4]
12+
},
13+
"parserOptions": {
14+
"parser": "babel-eslint"
15+
}
1616
}

‎.gitignore‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
1-
#npm
1+
.DS_Store
22
node_modules
3+
/dist
34

4-
#macOS
5-
.DS_Store
5+
# local env files
6+
.env.local
7+
.env.*.local
68

7-
#webstorm
8-
.idea
9+
# Log files
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
913

10-
dist
14+
# Editor directories and files
15+
.idea
16+
.vscode
17+
*.suo
18+
*.ntvs*
19+
*.njsproj
20+
*.sln
21+
*.sw*

‎README.md‎

Lines changed: 115 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,43 +2,132 @@
22

33
**Markdown*Palettes** is an open-source Markdown editor for the modern web.
44

5-
### Usage
5+
## Usage
66

7-
#### Directly use js release
7+
We have four bundle schemes. Choose what you prefer.
8+
Note that to use **Markdown*Palettes**, your web page must be in standard mode and use UTF-8 encoding. e.g.:
89

9-
Get the latest [release](https://github.com/luogu-dev/markdown-palettes/releases).
10+
```html
11+
<!DOCTYPE html>
12+
<meta charset="utf-8">
13+
```
14+
15+
### With Build Tools (webpack, rollup, etc)
16+
17+
First install our npm package:
18+
19+
```console
20+
$ yarn add markdown-palettes
21+
```
1022

11-
````html
12-
<div id="editor"></div>
23+
Since **Markdown*Palettes** is a Vue component, we assume you're familiar with Vue.
24+
25+
#### Use the ES6 Module
26+
27+
If you use webpack v2+ or rollup, you can use the ES6 module:
28+
29+
```html
30+
<template>
31+
<div style="height: 700px;">
32+
<markdown-palettes v-model="value"/>
33+
</div>
34+
</template>
1335
<script>
14-
var markdownEditor = new MarkdownPalettes("#editor");
15-
markdownEditor.editor.setCode("# 233");
16-
var code = markdownEditor.editor.getCode();
36+
import MarkdownPalettes from 'markdown-palettes'
37+
export default {
38+
components: [MarkdownPalettes],
39+
data: () => { value: 'Hello, **Markdown*Palettes**!' }
40+
}
1741
</script>
18-
````
42+
```
43+
44+
Note that the ES6 module didn't resolve its dependencies and pack them inside. It doesn't matter if you configure your webpack or rollup to resolve into `node_modules`, which is the common practice. As a fallback, you can use the CommonJS module.
45+
46+
#### Use the CommonJS Module
47+
48+
Replacing the ES6 'import' statement with CommonJS 'require' function:
49+
50+
```javascript
51+
const MarkdownPalettes = require('markdown-palettes')
52+
require('markdown-palettes/dist/MarkdownPalettes.css')
53+
```
54+
55+
The CommonJS module resolved its dependencies and packed them inside.
56+
57+
### Without Build Tools (use directly in HTML)
58+
59+
It's OK to use **Markdown*Palettes** without build tools, if you're not so familiar with Vue and Node.js toolchain.
60+
Copy the items in `dist` directory into your project.
61+
62+
#### Use with Vue
63+
64+
This is recommended if you use other Vue components in your HTML page.
1965

20-
#### Use as a Vue component
21-
````html
22-
<div>
23-
<markdown-palettes v-model="code"></markdown-palettes>
66+
```html
67+
<link rel="stylesheet" href="MarkdownPalettes.css">
68+
<div id="editor-container" style="height: 700px;">
69+
<markdown-palettes v-model="value"></markdown-palettes>
2470
</div>
71+
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
72+
<script src="MarkdownPalettes.umd.min.js"></script>
73+
<script>
74+
var app = new Vue({
75+
el: '#editor-container',
76+
components: [MarkdownPalettes],
77+
data: () => { value: 'Hello, **Markdown*Palettes**!' }
78+
})
79+
</script>
80+
```
81+
82+
#### Use without Vue
83+
84+
This is suitable if you don't have other Vue components in your HTML page or you 'dislike' Vue. Note that this bundle includes Vue inside so it's larger.
2585

86+
```html
87+
<link rel="stylesheet" href="MarkdownPalettes.css">
88+
<script src="markdown-palettes.js"></script>
89+
<div id="editor-container" style="height: 700px;">
90+
<div id="editor"></div>
91+
</div>
2692
<script>
27-
import Editor from 'markdown-palettes'
28-
export default {
29-
components: {
30-
Editor
31-
}
32-
}
93+
var markdownEditor = new MarkdownPalettes("#editor");
94+
markdownEditor.editor.setCode("Hello, **Markdown*Palettes**!");
95+
var code = markdownEditor.editor.getCode();
3396
</script>
34-
````
97+
```
98+
99+
### External Resources
100+
101+
By default bundle don't contain syntax highlighting for programming languages. If you use the bundles other than ES6 module, unfortunately you have to build it by yourself to get extra language support. If you use ES6 module, you can easily import them:
35102

36-
#### Development
37-
```bash
38-
$ npm install
39-
$ npm run dev
103+
```javascript
104+
// register languages for hljs
105+
import hljs from 'highlight.js/lib/highlight'
106+
import cpp from 'highlight.js/lib/languages/cpp'
107+
hljs.registerLanguage('cpp', cpp)
108+
109+
// register languages for CodeMirror
110+
import 'codemirror/mode/clike/clike'
40111
```
41112

42-
### Credits
113+
## Documentation
114+
115+
_TODO_
116+
117+
## Development
118+
119+
First checkout this repo.
120+
121+
```console
122+
$ yarn # install dependencies
123+
$ yarn dev # start dev server
124+
$ yarn build # build dist
125+
```
126+
127+
### Release
128+
129+
Please upload `dist` directory to npm together.
130+
131+
## Credits
43132

44-
Developed by @darkflames and @lin_toto of the Luogu Dev Team
133+
Developed by @darkflames and @lin_toto of the Luogu Dev Team

‎demo.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<title>luogu-markdown-editor</title>
8+
<link rel="stylesheet" href="MarkdownPalettes.css">
9+
</head>
10+
<body>
11+
<div id="editor-container" style="height: 700px;">
12+
<div id="editor"></div>
13+
</div>
14+
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
15+
<script src="MarkdownPalettes.umd.js"></script>
16+
<script>
17+
var app = new Vue({
18+
functional: true,
19+
el: '#editor',
20+
render: h => h(MarkdownPalettes)
21+
})
22+
</script>
23+
</body>
24+
</html>

‎index.html‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,14 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
56
<meta name="viewport" content="width=device-width,initial-scale=1.0">
67
<title>luogu-markdown-editor</title>
7-
<link rel="stylesheet" href="/dist/markdown-palettes.css" />
88
</head>
99
<body>
1010
<div id="editor-container" style="height: 700px;">
1111
<div id="editor"></div>
1212
</div>
13-
14-
<script src="/dist/markdown-palettes.js"></script>
15-
<script>
16-
var editor = new MarkdownPalettes("#editor")
17-
</script>
13+
<!-- built files will be auto injected -->
1814
</body>
1915
</html>

0 commit comments

Comments
 (0)