forge-edit 0.1.0-beta.0 → 0.1.0-beta.2
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
ADDED
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
# Forge Editor
|
|
2
|
+
|
|
3
|
+
A lightweight WYSIWYG editor built with Preact.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install forge-edit
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Basic HTML Usage
|
|
14
|
+
|
|
15
|
+
```html
|
|
16
|
+
<!DOCTYPE html>
|
|
17
|
+
<html lang="en">
|
|
18
|
+
<head>
|
|
19
|
+
<meta charset="UTF-8">
|
|
20
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
21
|
+
<title>Forge Editor</title>
|
|
22
|
+
</head>
|
|
23
|
+
<body>
|
|
24
|
+
<forge-editor
|
|
25
|
+
type="light"
|
|
26
|
+
placeholder="Write something..."
|
|
27
|
+
width="628px"
|
|
28
|
+
height="200px"
|
|
29
|
+
lang="en"
|
|
30
|
+
dir="ltr"></forge-editor>
|
|
31
|
+
|
|
32
|
+
<script type="module">
|
|
33
|
+
import ForgeEditor from 'forge-edit'
|
|
34
|
+
|
|
35
|
+
const element = document.querySelector('forge-editor')
|
|
36
|
+
const editor = ForgeEditor(element)
|
|
37
|
+
|
|
38
|
+
// Get HTML content
|
|
39
|
+
const html = editor.getHTML()
|
|
40
|
+
console.log(html)
|
|
41
|
+
|
|
42
|
+
// Set HTML content
|
|
43
|
+
editor.setHTML('<p>New content</p>')
|
|
44
|
+
|
|
45
|
+
// Get text content
|
|
46
|
+
const text = editor.getText()
|
|
47
|
+
console.log(text)
|
|
48
|
+
|
|
49
|
+
// Get selected text
|
|
50
|
+
const selection = editor.getSelection()
|
|
51
|
+
console.log(selection)
|
|
52
|
+
</script>
|
|
53
|
+
</body>
|
|
54
|
+
</html>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### React Usage
|
|
58
|
+
|
|
59
|
+
Create a wrapper component:
|
|
60
|
+
|
|
61
|
+
```jsx
|
|
62
|
+
import { useEffect, useRef, forwardRef, useImperativeHandle } from 'react'
|
|
63
|
+
|
|
64
|
+
const ReactForgeEditor = forwardRef(({
|
|
65
|
+
placeholder = 'Write something...',
|
|
66
|
+
width = '628px',
|
|
67
|
+
height = '200px',
|
|
68
|
+
lang = 'en',
|
|
69
|
+
dir = 'ltr',
|
|
70
|
+
onChange,
|
|
71
|
+
onInit
|
|
72
|
+
}, ref) => {
|
|
73
|
+
const containerRef = useRef(null)
|
|
74
|
+
const editorRef = useRef(null)
|
|
75
|
+
const apiRef = useRef(null)
|
|
76
|
+
|
|
77
|
+
useImperativeHandle(ref, () => ({
|
|
78
|
+
getHTML: () => apiRef.current?.getHTML?.() || '',
|
|
79
|
+
setHTML: (html) => apiRef.current?.setHTML?.(html),
|
|
80
|
+
getText: () => apiRef.current?.getText?.() || '',
|
|
81
|
+
getSelection: () => apiRef.current?.getSelection?.() || '',
|
|
82
|
+
getEditorElement: () => editorRef.current
|
|
83
|
+
}))
|
|
84
|
+
|
|
85
|
+
useEffect(() => {
|
|
86
|
+
if (!containerRef.current) return
|
|
87
|
+
|
|
88
|
+
const customElement = document.createElement('forge-editor')
|
|
89
|
+
customElement.setAttribute('type', 'light')
|
|
90
|
+
customElement.setAttribute('placeholder', placeholder)
|
|
91
|
+
customElement.setAttribute('width', width)
|
|
92
|
+
customElement.setAttribute('height', height)
|
|
93
|
+
customElement.setAttribute('lang', lang)
|
|
94
|
+
customElement.setAttribute('dir', dir)
|
|
95
|
+
|
|
96
|
+
containerRef.current.appendChild(customElement)
|
|
97
|
+
|
|
98
|
+
const initEditor = async () => {
|
|
99
|
+
try {
|
|
100
|
+
const ForgeEditor = await import('forge-edit')
|
|
101
|
+
const instance = ForgeEditor.default(customElement)
|
|
102
|
+
|
|
103
|
+
editorRef.current = instance.element
|
|
104
|
+
apiRef.current = {
|
|
105
|
+
getHTML: instance.getHTML,
|
|
106
|
+
setHTML: instance.setHTML,
|
|
107
|
+
getText: instance.getText,
|
|
108
|
+
getSelection: instance.getSelection
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
if (onInit) {
|
|
112
|
+
onInit(apiRef.current)
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
const contentElement = instance.element.querySelector('.forge-editor__content')
|
|
116
|
+
if (contentElement && onChange) {
|
|
117
|
+
const observer = new MutationObserver(() => {
|
|
118
|
+
onChange(apiRef.current?.getHTML?.() || '')
|
|
119
|
+
})
|
|
120
|
+
observer.observe(contentElement, {
|
|
121
|
+
childList: true,
|
|
122
|
+
subtree: true,
|
|
123
|
+
characterData: true
|
|
124
|
+
})
|
|
125
|
+
|
|
126
|
+
return () => observer.disconnect()
|
|
127
|
+
}
|
|
128
|
+
} catch (error) {
|
|
129
|
+
console.error('Failed to initialize forge-edit:', error)
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
initEditor()
|
|
134
|
+
|
|
135
|
+
return () => {
|
|
136
|
+
if (containerRef.current && customElement) {
|
|
137
|
+
containerRef.current.removeChild(customElement)
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}, [placeholder, width, height, lang, dir, onChange, onInit])
|
|
141
|
+
|
|
142
|
+
return <div ref={containerRef} />
|
|
143
|
+
})
|
|
144
|
+
|
|
145
|
+
ReactForgeEditor.displayName = 'ReactForgeEditor'
|
|
146
|
+
|
|
147
|
+
export default ReactForgeEditor
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
Use it in your app:
|
|
151
|
+
|
|
152
|
+
```jsx
|
|
153
|
+
import React, { useRef } from 'react'
|
|
154
|
+
import ReactForgeEditor from './ReactForgeEditor'
|
|
155
|
+
|
|
156
|
+
function App() {
|
|
157
|
+
const editorRef = useRef(null)
|
|
158
|
+
|
|
159
|
+
const handleInit = (api) => {
|
|
160
|
+
api.setHTML('<p>Hello from React!</p>')
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
return (
|
|
164
|
+
<div>
|
|
165
|
+
<ReactForgeEditor
|
|
166
|
+
ref={editorRef}
|
|
167
|
+
placeholder="Write something..."
|
|
168
|
+
width="628px"
|
|
169
|
+
height="200px"
|
|
170
|
+
onInit={handleInit}
|
|
171
|
+
onChange={(html) => console.log(html)}
|
|
172
|
+
/>
|
|
173
|
+
</div>
|
|
174
|
+
)
|
|
175
|
+
}
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
## API
|
|
179
|
+
|
|
180
|
+
### Attributes
|
|
181
|
+
|
|
182
|
+
| Attribute | Type | Default | Description |
|
|
183
|
+
|-----------|------|---------|-------------|
|
|
184
|
+
| `type` | string | `'light'` | Editor type |
|
|
185
|
+
| `placeholder` | string | `'Write something...'` | Placeholder text |
|
|
186
|
+
| `width` | string | `'628px'` | Editor width |
|
|
187
|
+
| `height` | string | `'200px'` | Editor height |
|
|
188
|
+
| `lang` | string | `'en'` | Language code |
|
|
189
|
+
| `dir` | string | `'ltr'` | Text direction (`'ltr'` or `'rtl'`) |
|
|
190
|
+
|
|
191
|
+
### Methods
|
|
192
|
+
|
|
193
|
+
| Method | Description |
|
|
194
|
+
|--------|-------------|
|
|
195
|
+
| `getHTML()` | Get editor HTML content |
|
|
196
|
+
| `setHTML(html)` | Set editor HTML content |
|
|
197
|
+
| `getText()` | Get plain text content |
|
|
198
|
+
| `getSelection()` | Get selected text |
|
|
199
|
+
|
|
200
|
+
## Features
|
|
201
|
+
|
|
202
|
+
- Lightweight WYSIWYG editor
|
|
203
|
+
- Built with Preact
|
|
204
|
+
- Custom web component
|
|
205
|
+
- Easy to integrate
|
|
206
|
+
- Supports multiple languages
|
|
207
|
+
- RTL support
|
|
208
|
+
- Rich text formatting
|
|
209
|
+
- Color picker
|
|
210
|
+
- Font selection
|
|
211
|
+
- Image insertion
|
|
212
|
+
- Table insertion
|
|
213
|
+
|
|
214
|
+
## License
|
|
215
|
+
|
|
216
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "forge-edit",
|
|
3
|
-
"version": "0.1.0-beta.
|
|
3
|
+
"version": "0.1.0-beta.2",
|
|
4
4
|
"description": "A lightweight WYSIWYG editor built with Preact",
|
|
5
|
-
"main": "./dist/index.js",
|
|
6
|
-
"module": "./dist/index.js",
|
|
5
|
+
"main": "./dist/main/index.js",
|
|
6
|
+
"module": "./dist/main/index.js",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"exports": {
|
|
9
9
|
".": {
|
|
10
|
-
"import": "./dist/index.js"
|
|
10
|
+
"import": "./dist/main/index.js"
|
|
11
11
|
},
|
|
12
|
-
"./style": "./dist/
|
|
12
|
+
"./style.css": "./dist/main/index.css"
|
|
13
13
|
},
|
|
14
14
|
"files": [
|
|
15
15
|
"dist"
|
|
File without changes
|
|
File without changes
|