Skip to content

Commit d67b277

Browse files
c-wc-w
committed
Add ReactJS version of demo page
1 parent 12ee7f9 commit d67b277

13 files changed

+208
-43
lines changed

‎.github/workflows/cd.yaml

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
name: CD
2+
3+
on:
4+
push:
5+
branches:
6+
- master
7+
8+
jobs:
9+
cd:
10+
runs-on: ubuntu-latest
11+
steps:
12+
- uses: actions/checkout@v2
13+
- run: npm install
14+
- run: npm --prefix=reactjs install
15+
- run: npm run demo
16+
- uses: peaceiris/actions-gh-pages@v3
17+
with:
18+
github_token: ${{ secrets.GITHUB_TOKEN }}
19+
publish_dir: ./demo

‎.gitignore

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
/build
2-
/node_modules
1+
build
2+
node_modules
33
package-lock.json
44
chromedriver.log
55
/tests_output
6+
/demo

‎README.md

+4-34
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ This module adds support for rich math authoring to the [Quill](http://quilljs.c
1717

1818
### Plain Javascript
1919

20-
This module depends on [MathQuill][install-mathquill], [Quill](https://quilljs.com/docs/quickstart/) and [KaTeX][install-katex], so you'll need to add references to their JS and CSS files in addition to adding a reference to `mathquill4quill.js` and `mathquill4quill.css`. Official builds as well as minified assets can be found on the [releases page](https://github.com/c-w/mathquill4quill/releases).
20+
This module depends on [MathQuill](https://docs.mathquill.com/en/latest/Getting_Started/#download-and-load), [Quill](https://quilljs.com/docs/quickstart/) and [KaTeX](https://katex.org/docs/browser.html#starter-template), so you'll need to add references to their JS and CSS files in addition to adding a reference to `mathquill4quill.js` and `mathquill4quill.css`. Official builds as well as minified assets can be found on the [releases page](https://github.com/c-w/mathquill4quill/releases).
2121

2222
Next, initialize your Quill object and load the formula module:
2323

@@ -42,41 +42,11 @@ var enableMathQuillFormulaAuthoring = mathquill4quill();
4242
enableMathQuillFormulaAuthoring(quill);
4343
```
4444

45-
### React
46-
47-
To integrate this module with [react-quill](https://github.com/zenoamaro/react-quill), add references to the JS and CSS files of [MathQuill][install-mathquill] and [KaTeX][install-katex] to your application. Next, you can enable the mathquill formula editor on your ReactQuill component:
45+
A working demo application can be found [here](./index.html) ([live](https://justamouse.com/mathquill4quill)).
4846

49-
```javascript
50-
import React from 'react';
51-
import ReactQuill, { Quill } from 'react-quill';
52-
import mathquill4quill from 'mathquill4quill';
53-
import 'mathquill4quill/mathquill4quill.css';
54-
55-
class App extends React.Component {
56-
reactQuill = React.createRef();
57-
58-
componentDidMount() {
59-
const enableMathQuillFormulaAuthoring = mathquill4quill({ Quill });
60-
enableMathQuillFormulaAuthoring(this.reactQuill.current.editor);
61-
}
62-
63-
render() {
64-
return (
65-
<ReactQuill
66-
ref={this.reactQuill}
67-
modules={{
68-
formula: true,
69-
toolbar: [["formula", /* ... other toolbar items here ... */]]
70-
}}
71-
{/* ... other properties here ... */}
72-
/>
73-
);
74-
}
75-
}
76-
```
47+
### React
7748

78-
[install-mathquill]: http://docs.mathquill.com/en/latest/Getting_Started/#download-and-load
79-
[install-katex]: https://katex.org/docs/browser.html#starter-template
49+
A demo application integrating this module with [react-quill](https://github.com/zenoamaro/react-quill) can be found [here](./reactjs) ([live](https://justamouse.com/mathquill4quill/reactjs)).
8050

8151
## Optional features
8252

‎index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515

1616
<!-- MathQuill dependency -->
1717
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
18-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@edtr-io/mathquill@0.11.0/build/mathquill.css" integrity="sha256-Qy/E+9TDDKI7fQ+y2hHMCBV96QiZs9mXWMOrD+/14IU=" crossorigin="anonymous">
19-
<script src="https://cdn.jsdelivr.net/npm/@edtr-io/mathquill@0.11.0/build/mathquill.min.js" integrity="sha256-1XldAnavTLoExr6gc0l1JD8cIzqRYhbi1eksEWsYdpY=" crossorigin="anonymous"></script>
18+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mathquill@0.10.1/build/mathquill.css" integrity="sha256-d6u6FFcCwDum5poAR2ya2efvQXKfYC2RLjJtv+ODxTI=" crossorigin="anonymous">
19+
<script src="https://cdn.jsdelivr.net/npm/mathquill@0.10.1/build/mathquill.min.js" integrity="sha256-dxKVPdWCaZTdphHQqQEc0GSDAVZJCxshwn3ZrvHtqgo=" crossorigin="anonymous"></script>
2020

2121
<!-- mathquill4quill include -->
2222
<script src="mathquill4quill.js"></script>

‎package.json

+11-5
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,24 @@
33
"license": "Apache-2.0",
44
"scripts": {
55
"release": "release-it",
6+
"start.reactjs": "npm --prefix=reactjs start",
67
"start": "reload --port 8080 --browser --dir .",
78
"lint.js": "eslint --ext js .",
89
"lint.css": "stylelint \"*.css\"",
910
"lint.md": "markdownlint \"*.md\"",
1011
"lint.prettier": "prettier --check \"**/*.js\"",
1112
"lint": "run-s lint.js lint.css lint.md lint.prettier",
12-
"prebuild": "mkdirp build",
13+
"demo.vanillajs": "shx cp index.{html,js,css} mathquill4quill.{js,css} demo",
14+
"demo.reactjs": "npm --prefix=reactjs run build",
15+
"postdemo.reactjs": "shx mv reactjs/build demo/reactjs",
16+
"predemo": "shx mkdir -p demo",
17+
"demo": "run-s demo.vanillajs demo.reactjs",
18+
"prebuild": "shx mkdir -p build",
1319
"build.babel": "babel mathquill4quill.js > build/mathquill4quill.js",
1420
"build.uglify": "uglifyjs --compress --mangle -- build/mathquill4quill.js > build/mathquill4quill.min.js",
1521
"build.csso": "csso --input mathquill4quill.css --output build/mathquill4quill.min.css",
1622
"build": "run-s build.babel build.uglify build.csso",
17-
"postbuild": "rimraf build/mathquill4quill.js",
23+
"postbuild": "shx rm build/mathquill4quill.js",
1824
"test": "concurrently --kill-others --success first \"serve -n -l 8000\" \"nightwatch -e chrome tests\""
1925
},
2026
"devDependencies": {
@@ -24,16 +30,16 @@
2430
"chromedriver": "^89.0.0",
2531
"concurrently": "^4.1.1",
2632
"csso-cli": "^3.0.0",
27-
"eslint": "^5.16.0",
33+
"eslint": "^7.11.0",
34+
"eslint-plugin-react-app": "^6.2.2",
2835
"markdownlint-cli": "^0.22.0",
29-
"mkdirp": "^0.5.1",
3036
"nightwatch": "^1.1.12",
3137
"npm-run-all": "^4.1.5",
3238
"prettier": "^1.18.2",
3339
"release-it": "^12.4.3",
3440
"reload": "^3.0.1",
35-
"rimraf": "^3.0.2",
3641
"serve": "^11.0.2",
42+
"shx": "^0.3.3",
3743
"stylelint": "^13.2.0",
3844
"stylelint-config-standard": "^20.0.0",
3945
"uglify-js": "^3.6.0"

‎reactjs/.browserslistrc

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
[production]
2+
>0.2%
3+
not dead
4+
not op_mini all
5+
6+
[development]
7+
last 1 chrome version
8+
last 1 firefox version
9+
last 1 safari version

‎reactjs/.eslintrc.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/* eslint-env node */
2+
3+
module.exports = {
4+
rules: {
5+
"import/first": "off"
6+
},
7+
extends: ["react-app"]
8+
};

‎reactjs/package.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "reactjs",
3+
"version": "0.1.0",
4+
"homepage": "https://justamouse.com/mathquill4quill/reactjs",
5+
"private": true,
6+
"dependencies": {
7+
"jquery": "^3.4.1",
8+
"katex": "^0.13.2",
9+
"mathquill": "^0.10.1",
10+
"mathquill4quill": "file:..",
11+
"react": "^17.0.2",
12+
"react-dom": "^17.0.2",
13+
"react-quill": "^1.3.5",
14+
"react-scripts": "4.0.3"
15+
},
16+
"scripts": {
17+
"start": "react-scripts start",
18+
"build": "react-scripts build"
19+
}
20+
}

‎reactjs/public/index.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>mathquill4quill demo (React)</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
</body>
11+
</html>

‎reactjs/src/Editor.js

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
// KaTeX dependency
2+
import katex from "katex";
3+
window.katex = katex;
4+
import "katex/dist/katex.css";
5+
6+
// Quill dependency
7+
import ReactQuill, { Quill } from "react-quill";
8+
import "react-quill/dist/quill.snow.css";
9+
10+
// MathQuill dependency
11+
import "./jquery";
12+
import "mathquill/build/mathquill.js";
13+
import "mathquill/build/mathquill.css";
14+
15+
// mathquill4quill include
16+
import mathquill4quill from "mathquill4quill";
17+
import "mathquill4quill/mathquill4quill.css";
18+
19+
// demo page
20+
import React from "react";
21+
22+
export default class Editor extends React.Component {
23+
reactQuill = React.createRef();
24+
25+
componentDidMount() {
26+
const enableMathQuillFormulaAuthoring = mathquill4quill({ Quill, katex });
27+
enableMathQuillFormulaAuthoring(
28+
this.reactQuill.current.editor,
29+
this.props.options
30+
);
31+
}
32+
33+
render() {
34+
return (
35+
<ReactQuill
36+
ref={this.reactQuill}
37+
id="editor"
38+
modules={{
39+
formula: true,
40+
toolbar: [["video", "bold", "italic", "underline", "formula"]]
41+
}}
42+
placeholder="Type text here, or click on the formula button to enter math."
43+
theme="snow"
44+
/>
45+
);
46+
}
47+
}

‎reactjs/src/index.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../../index.css

‎reactjs/src/index.js

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React, { useState } from "react";
2+
import ReactDOM from "react-dom";
3+
import Editor from "./Editor";
4+
import "./index.css";
5+
6+
const CUSTOM_OPERATORS = [
7+
["\\pm", "\\pm"],
8+
["\\sqrt{x}", "\\sqrt"],
9+
["\\sqrt[n]{x}", "\\nthroot"],
10+
["\\frac{x}{y}", "\\frac"],
11+
["\\sum^{s}_{x}{d}", "\\sum"],
12+
["\\prod^{s}_{x}{d}", "\\prod"],
13+
["\\coprod^{s}_{x}{d}", "\\coprod"],
14+
["\\int^{s}_{x}{d}", "\\int"],
15+
["\\binom{n}{k}", "\\binom"]
16+
];
17+
18+
function Index() {
19+
const [operators, setOperators] = useState([]);
20+
const [displayHistory, setDisplayHistory] = useState(false);
21+
22+
const toggleDisplayHistory = event => {
23+
setDisplayHistory(event.target.checked);
24+
};
25+
26+
const toggleOperators = event => {
27+
setOperators(event.target.checked ? CUSTOM_OPERATORS : []);
28+
};
29+
30+
const options = { displayHistory, operators };
31+
32+
return (
33+
<main className="demo-container">
34+
<Editor options={options} key={JSON.stringify(options)} />
35+
36+
<label>
37+
Use custom operator buttons:
38+
<input type="checkbox" className="option" onChange={toggleOperators} />
39+
</label>
40+
41+
<label>
42+
Display formula history:
43+
<input
44+
type="checkbox"
45+
className="option"
46+
onChange={toggleDisplayHistory}
47+
/>
48+
</label>
49+
50+
<footer>
51+
<a href="https://github.com/c-w/mathquill4quill">
52+
<p>Fork me on Github</p>
53+
<img
54+
width="149"
55+
height="149"
56+
src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149"
57+
alt="Fork me on GitHub"
58+
/>
59+
</a>
60+
</footer>
61+
</main>
62+
);
63+
}
64+
65+
ReactDOM.render(
66+
<React.StrictMode>
67+
<Index />
68+
</React.StrictMode>,
69+
document.getElementById("root")
70+
);

‎reactjs/src/jquery.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import $ from "jquery";
2+
3+
window.jQuery = window.$ = $;

0 commit comments

Comments
 (0)