Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
dark-flames committed Jul 15, 2018
2 parents 429b7c9 + 63654ff commit 37274f4
Show file tree
Hide file tree
Showing 37 changed files with 3,851 additions and 1,977 deletions.
28 changes: 28 additions & 0 deletions .after-build.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
#!/bin/bash

set -e

src=dist/MarkdownPalettes.umd.min.js
dist=dist/markdown-palettes.js
vue=https://cdn.jsdelivr.net/npm/[email protected]

wget $vue -O $dist
echo >> $dist
cat $src >> $dist
cat - >> $dist << EOF
(function(mp){
'use strict'
class MarkdownPalettes {
constructor (el, config = {}) {
this.config = config
this.editor = new Vue(mp)
this.editor.\$mount(el)
}
getContentParaser () {
return this.editor.contentParser
}
}
window.MarkdownPalettes = MarkdownPalettes
})(MarkdownPalettes)
EOF
15 changes: 10 additions & 5 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
{
"presets": [
["env", { "modules": false }],
"stage-3"
],
"plugins": ["lodash", "transform-runtime"]
"presets": [
["modern-browsers", {
"modules": false
}],
"@babel/preset-stage-3"
],
"plugins": [
"transform-vue-jsx",
"lodash"
]
}
28 changes: 14 additions & 14 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
{
"extends": ["standard"],
"plugins": ["html"],
"settings": {
"html/indent": "0",
"html/report-bad-indent": "error"
},
"rules": {
"indent": ["error", 4],
"prefer-const": ["warn"]
},
"env": {
"browser": true
},
"parser": "babel-eslint"
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"@vue/standard"
],
"rules": {
"indent": ["error", 4]
},
"parserOptions": {
"parser": "babel-eslint"
}
}
23 changes: 17 additions & 6 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,10 +1,21 @@
#npm
.DS_Store
node_modules
/dist

#macOS
.DS_Store
# local env files
.env.local
.env.*.local

#webstorm
.idea
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

dist
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
141 changes: 115 additions & 26 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,43 +2,132 @@

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

### Usage
## Usage

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

Get the latest [release](https://github.com/luogu-dev/markdown-palettes/releases).
```html
<!DOCTYPE html>
<meta charset="utf-8">
```

### With Build Tools (webpack, rollup, etc)

First install our npm package:

```console
$ yarn add markdown-palettes
```

````html
<div id="editor"></div>
Since **Markdown*Palettes** is a Vue component, we assume you're familiar with Vue.

#### Use the ES6 Module

If you use webpack v2+ or rollup, you can use the ES6 module:

```html
<template>
<div style="height: 700px;">
<markdown-palettes v-model="value"/>
</div>
</template>
<script>
var markdownEditor = new MarkdownPalettes("#editor");
markdownEditor.editor.setCode("# 233");
var code = markdownEditor.editor.getCode();
import MarkdownPalettes from 'markdown-palettes'
export default {
components: [MarkdownPalettes],
data: () => { value: 'Hello, **Markdown*Palettes**!' }
}
</script>
````
```

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.

#### Use the CommonJS Module

Replacing the ES6 'import' statement with CommonJS 'require' function:

```javascript
const MarkdownPalettes = require('markdown-palettes')
require('markdown-palettes/dist/MarkdownPalettes.css')
```

The CommonJS module resolved its dependencies and packed them inside.

### Without Build Tools (use directly in HTML)

It's OK to use **Markdown*Palettes** without build tools, if you're not so familiar with Vue and Node.js toolchain.
Copy the items in `dist` directory into your project.

#### Use with Vue

This is recommended if you use other Vue components in your HTML page.

#### Use as a Vue component
````html
<div>
<markdown-palettes v-model="code"></markdown-palettes>
```html
<link rel="stylesheet" href="MarkdownPalettes.css">
<div id="editor-container" style="height: 700px;">
<markdown-palettes v-model="value"></markdown-palettes>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="MarkdownPalettes.umd.min.js"></script>
<script>
var app = new Vue({
el: '#editor-container',
components: [MarkdownPalettes],
data: () => { value: 'Hello, **Markdown*Palettes**!' }
})
</script>
```

#### Use without Vue

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.

```html
<link rel="stylesheet" href="MarkdownPalettes.css">
<script src="markdown-palettes.js"></script>
<div id="editor-container" style="height: 700px;">
<div id="editor"></div>
</div>
<script>
import Editor from 'markdown-palettes'
export default {
components: {
Editor
}
}
var markdownEditor = new MarkdownPalettes("#editor");
markdownEditor.editor.setCode("Hello, **Markdown*Palettes**!");
var code = markdownEditor.editor.getCode();
</script>
````
```

### External Resources

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:

#### Development
```bash
$ npm install
$ npm run dev
```javascript
// register languages for hljs
import hljs from 'highlight.js/lib/highlight'
import cpp from 'highlight.js/lib/languages/cpp'
hljs.registerLanguage('cpp', cpp)

// register languages for CodeMirror
import 'codemirror/mode/clike/clike'
```

### Credits
## Documentation

_TODO_

## Development

First checkout this repo.

```console
$ yarn # install dependencies
$ yarn dev # start dev server
$ yarn build # build dist
```

### Release

Please upload `dist` directory to npm together.

## Credits

Developed by @darkflames and @lin_toto of the Luogu Dev Team
Developed by @darkflames and @lin_toto of the Luogu Dev Team
24 changes: 24 additions & 0 deletions demo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>luogu-markdown-editor</title>
<link rel="stylesheet" href="MarkdownPalettes.css">
</head>
<body>
<div id="editor-container" style="height: 700px;">
<div id="editor"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="MarkdownPalettes.umd.js"></script>
<script>
var app = new Vue({
functional: true,
el: '#editor',
render: h => h(MarkdownPalettes)
})
</script>
</body>
</html>
8 changes: 2 additions & 6 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,14 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>luogu-markdown-editor</title>
<link rel="stylesheet" href="/dist/markdown-palettes.css" />
</head>
<body>
<div id="editor-container" style="height: 700px;">
<div id="editor"></div>
</div>

<script src="/dist/markdown-palettes.js"></script>
<script>
var editor = new MarkdownPalettes("#editor")
</script>
<!-- built files will be auto injected -->
</body>
</html>
Loading

0 comments on commit 37274f4

Please sign in to comment.