math-rich-editor-pack 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +78 -21
- package/dist-lib/_commonjs-dynamic-modules-BpilXLfW.js +6 -0
- package/dist-lib/_commonjsHelpers-DaMA6jEr.js +8 -0
- package/dist-lib/bundle.min-CEUqCCZb.js +2013 -0
- package/dist-lib/index-5tjFLyrA.js +3775 -0
- package/dist-lib/index-DZyciQQE.js +3989 -0
- package/dist-lib/jszip.min-CXlgo5iS.js +2341 -0
- package/dist-lib/mammoth.browser-CC2H3L7a.js +14915 -0
- package/dist-lib/math-rich-editor-pack.css +1 -1
- package/dist-lib/math-rich-editor.cjs +389 -133
- package/dist-lib/math-rich-editor.js +13205 -11194
- package/package.json +10 -2
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
# Math Rich Editor Pack
|
|
2
2
|
|
|
3
|
-
Reusable React editor
|
|
3
|
+
Reusable React editor for rich text and math equations in the same flow.
|
|
4
4
|
|
|
5
5
|
## Install
|
|
6
6
|
|
|
@@ -8,63 +8,120 @@ Reusable React editor with rich-text + inline math insertion.
|
|
|
8
8
|
npm install math-rich-editor-pack
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
```jsx
|
|
12
|
+
import { MathRichEditor } from 'math-rich-editor-pack'
|
|
13
|
+
import 'math-rich-editor-pack/style.css'
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Quick Start
|
|
12
17
|
|
|
13
18
|
```jsx
|
|
19
|
+
import { useRef } from 'react'
|
|
14
20
|
import { MathRichEditor } from 'math-rich-editor-pack'
|
|
15
21
|
import 'math-rich-editor-pack/style.css'
|
|
16
22
|
|
|
17
23
|
export default function QuestionForm() {
|
|
24
|
+
const editorRef = useRef(null)
|
|
25
|
+
|
|
18
26
|
return (
|
|
19
27
|
<MathRichEditor
|
|
28
|
+
ref={editorRef}
|
|
29
|
+
placeholder="Write question text and equations..."
|
|
20
30
|
onChange={({ html, json, text, latexList }) => {
|
|
21
|
-
// Save
|
|
31
|
+
// Save any format you need
|
|
22
32
|
}}
|
|
23
33
|
/>
|
|
24
34
|
)
|
|
25
35
|
}
|
|
26
36
|
```
|
|
27
37
|
|
|
38
|
+
## Built-In Features
|
|
39
|
+
|
|
40
|
+
- Rich text editing (bold, italic, underline, headings, lists, undo/redo)
|
|
41
|
+
- Equation insertion with MathLive keyboard and hardware keyboard
|
|
42
|
+
- Inline math output with KaTeX rendering
|
|
43
|
+
- Table support with clean UX:
|
|
44
|
+
- Main toolbar has one `Table` button
|
|
45
|
+
- Table controls appear only when cursor is inside a table
|
|
46
|
+
- Advanced table actions are under `More`
|
|
47
|
+
- Load content from HTML
|
|
48
|
+
- Load content from DOCX (with equation conversion + warning reporting)
|
|
49
|
+
|
|
28
50
|
## Callback API
|
|
29
51
|
|
|
30
52
|
- `onChange(payload)`
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
53
|
+
- `payload.html`
|
|
54
|
+
- `payload.json`
|
|
55
|
+
- `payload.text`
|
|
56
|
+
- `payload.latexList`
|
|
35
57
|
- `onHtmlChange(html)`
|
|
36
58
|
- `onJsonChange(json)`
|
|
37
59
|
- `onTextChange(text)`
|
|
38
60
|
- `onLatexChange(latexList)`
|
|
39
61
|
- `onMathInsert(latex)`
|
|
62
|
+
- `onLoadResult(result)`
|
|
63
|
+
- `result.source`: `'html' | 'docx'`
|
|
64
|
+
- `result.success`: `boolean`
|
|
65
|
+
- `result.warnings`: `string[]`
|
|
66
|
+
- `result.error`: `string | null`
|
|
67
|
+
|
|
68
|
+
## Ref Methods (Imperative API)
|
|
69
|
+
|
|
70
|
+
Use `ref` on `MathRichEditor`:
|
|
71
|
+
|
|
72
|
+
```jsx
|
|
73
|
+
const editorRef = useRef(null)
|
|
74
|
+
```
|
|
40
75
|
|
|
41
|
-
|
|
76
|
+
Available methods:
|
|
42
77
|
|
|
43
|
-
- `
|
|
44
|
-
- `
|
|
45
|
-
- `
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
78
|
+
- `loadFromHtml(html: string): boolean`
|
|
79
|
+
- `loadFromDocx(fileOrBuffer: File | Blob | ArrayBuffer): Promise<{ source, success, warnings, error }>`
|
|
80
|
+
- `getContent(): { html, json, text, latexList } | null`
|
|
81
|
+
|
|
82
|
+
Example:
|
|
83
|
+
|
|
84
|
+
```jsx
|
|
85
|
+
editorRef.current?.loadFromHtml('<p>Hello <strong>world</strong></p>')
|
|
86
|
+
|
|
87
|
+
const file = input.files?.[0]
|
|
88
|
+
if (file) {
|
|
89
|
+
const result = await editorRef.current?.loadFromDocx(file)
|
|
90
|
+
console.log(result)
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
const current = editorRef.current?.getContent()
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## Props
|
|
97
|
+
|
|
98
|
+
- `initialContent`: HTML string or Tiptap JSON doc
|
|
99
|
+
- `placeholder`: editor placeholder text
|
|
100
|
+
- `toolbarOptions`: custom visible tools
|
|
101
|
+
- Default: `['bold', 'italic', 'underline', 'h1', 'h2', 'ul', 'ol', 'table', 'undo', 'redo', 'math']`
|
|
102
|
+
- `mathShortcutEnabled`: enable `Ctrl/Cmd + key` shortcut for equation composer
|
|
103
|
+
- `mathShortcutKey`: shortcut key, default `'m'`
|
|
49
104
|
- `className`, `toolbarClassName`, `editorClassName`
|
|
50
105
|
- `composerTitle`, `composerDescription`, `composerInsertLabel`, `composerCancelLabel`
|
|
51
106
|
|
|
52
|
-
## Local
|
|
107
|
+
## Local Development
|
|
53
108
|
|
|
54
109
|
```bash
|
|
55
110
|
npm install
|
|
56
111
|
npm run dev
|
|
57
112
|
```
|
|
58
113
|
|
|
59
|
-
## Build
|
|
114
|
+
## Build
|
|
60
115
|
|
|
61
116
|
```bash
|
|
62
117
|
npm run build
|
|
63
118
|
```
|
|
64
119
|
|
|
65
|
-
##
|
|
120
|
+
## Publish Checklist
|
|
66
121
|
|
|
67
122
|
```bash
|
|
68
|
-
npm run
|
|
69
|
-
|
|
70
|
-
|
|
123
|
+
npm run build
|
|
124
|
+
npm pack
|
|
125
|
+
npm publish --access public
|
|
126
|
+
```
|
|
127
|
+
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
var o = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
|
|
2
|
+
function l(e) {
|
|
3
|
+
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
|
|
4
|
+
}
|
|
5
|
+
export {
|
|
6
|
+
o as c,
|
|
7
|
+
l as g
|
|
8
|
+
};
|