@opositatest/markdown-text-editor 1.0.6 → 1.1.1-canary.bc9b3d0
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 +109 -22
- package/dist/editor.css +1 -1
- package/dist/editor.js +13279 -12809
- package/dist/react/index.js +15271 -14828
- package/dist/react/markdown-text-editor.css +1 -1
- package/dist/react/{module-BNH92kHQ.js → module-CTSMhL_P.js} +98 -98
- package/dist/react/native-B_0ZyPxP.js +107 -0
- package/package.json +11 -2
- package/dist/react/native-PBRRnxaU.js +0 -107
package/README.md
CHANGED
|
@@ -81,19 +81,51 @@ Load via CDN (no build step required):
|
|
|
81
81
|
|
|
82
82
|
### Attributes
|
|
83
83
|
|
|
84
|
-
| Attribute
|
|
85
|
-
|
|
|
86
|
-
| `name`
|
|
87
|
-
| `value`
|
|
88
|
-
| `placeholder`
|
|
89
|
-
| `width`
|
|
90
|
-
| `height`
|
|
91
|
-
| `disabled`
|
|
92
|
-
| `readonly`
|
|
93
|
-
| `required`
|
|
84
|
+
| Attribute | Type | Description |
|
|
85
|
+
| --------------------------- | ------- | ------------------------------------------------ |
|
|
86
|
+
| `name` | string | Field name for form submission |
|
|
87
|
+
| `value` | string | Initial Markdown value |
|
|
88
|
+
| `placeholder` | string | Placeholder text shown when empty |
|
|
89
|
+
| `width` | string | CSS width for the editor container |
|
|
90
|
+
| `height` | string | CSS height for the editor container |
|
|
91
|
+
| `disabled` | boolean | Disables the editor |
|
|
92
|
+
| `readonly` | boolean | Makes the editor read-only |
|
|
93
|
+
| `required` | boolean | Participates in native form validation |
|
|
94
|
+
| `hidden-slash-menu-items` | string | JSON array of item titles to hide from slash menu |
|
|
94
95
|
|
|
95
96
|
`width` and `height` accept any valid CSS size, such as `320px`, `40rem`, or `100%`.
|
|
96
97
|
|
|
98
|
+
#### Available slash menu item titles
|
|
99
|
+
|
|
100
|
+
Use these exact titles in the `hidden-slash-menu-items` JSON array to hide specific items:
|
|
101
|
+
|
|
102
|
+
| Title | Group | Description |
|
|
103
|
+
| ---------------- | ------------ | ------------------------------ |
|
|
104
|
+
| `Heading 1` | Headings | Top-level heading |
|
|
105
|
+
| `Heading 2` | Headings | Key section heading |
|
|
106
|
+
| `Heading 3` | Headings | Subsection and group heading |
|
|
107
|
+
| `Paragraph` | Basic blocks | Plain text |
|
|
108
|
+
| `Bullet List` | Basic blocks | Create a simple bullet list |
|
|
109
|
+
| `Numbered List` | Basic blocks | Create a list with numbering |
|
|
110
|
+
| `Checklist` | Basic blocks | Track tasks with a checklist |
|
|
111
|
+
| `Blockquote` | Basic blocks | Capture a quote |
|
|
112
|
+
| `Code Block` | Basic blocks | Capture a code snippet |
|
|
113
|
+
| `Divider` | Basic blocks | Visually divide blocks |
|
|
114
|
+
| `Image` | Media | Fullscreen image |
|
|
115
|
+
| `Video` | Media | Resizable video with caption |
|
|
116
|
+
| `Audio` | Media | Embed audio |
|
|
117
|
+
| `File` | Media | Embed a file |
|
|
118
|
+
| `Table` | Media | Create a table |
|
|
119
|
+
| `Math Formula` | Media | Insert LaTeX formula |
|
|
120
|
+
|
|
121
|
+
**Example:** Hide Image, Video, Audio, File, Table, and Math Formula:
|
|
122
|
+
|
|
123
|
+
```html
|
|
124
|
+
<markdown-text-editor
|
|
125
|
+
hidden-slash-menu-items='["Image", "Video", "Audio", "File", "Table", "Math Formula"]'
|
|
126
|
+
></markdown-text-editor>
|
|
127
|
+
```
|
|
128
|
+
|
|
97
129
|
### Properties
|
|
98
130
|
|
|
99
131
|
| Property | Type | Description |
|
|
@@ -141,21 +173,24 @@ import "@opositatest/markdown-text-editor/style";
|
|
|
141
173
|
|
|
142
174
|
### Props
|
|
143
175
|
|
|
144
|
-
| Prop
|
|
145
|
-
|
|
|
146
|
-
| `value`
|
|
147
|
-
| `defaultValue`
|
|
148
|
-
| `onChange`
|
|
149
|
-
| `onReady`
|
|
150
|
-
| `placeholder`
|
|
151
|
-
| `width`
|
|
152
|
-
| `height`
|
|
153
|
-
| `disabled`
|
|
154
|
-
| `readonly`
|
|
155
|
-
| `className`
|
|
176
|
+
| Prop | Type | Description |
|
|
177
|
+
| ----------------------- | -------------------------------------------- | -------------------------------------------- |
|
|
178
|
+
| `value` | `string` | Controlled Markdown value |
|
|
179
|
+
| `defaultValue` | `string` | Uncontrolled initial value |
|
|
180
|
+
| `onChange` | `(value: string) => void` | Called on every content change |
|
|
181
|
+
| `onReady` | `(handle: MarkdownTextEditorHandle) => void` | Called once editor has initialized |
|
|
182
|
+
| `placeholder` | `string` | Placeholder text shown when empty |
|
|
183
|
+
| `width` | `string` | CSS width for the editor container |
|
|
184
|
+
| `height` | `string` | CSS height for the editor container |
|
|
185
|
+
| `disabled` | `boolean` | Disables the editor |
|
|
186
|
+
| `readonly` | `boolean` | Makes the editor read-only |
|
|
187
|
+
| `className` | `string` | Additional CSS class on the editor container |
|
|
188
|
+
| `hiddenSlashMenuItems` | `string[]` | Array of item titles to hide from slash menu |
|
|
156
189
|
|
|
157
190
|
`width` and `height` accept any valid CSS size, such as `320px`, `40rem`, or `100%`.
|
|
158
191
|
|
|
192
|
+
See the [Web Component section](#available-slash-menu-item-titles) for the list of available item titles.
|
|
193
|
+
|
|
159
194
|
### Imperative handle (via ref)
|
|
160
195
|
|
|
161
196
|
```tsx
|
|
@@ -175,6 +210,58 @@ const ref = useRef<TMarkdownTextEditorHandle>(null)
|
|
|
175
210
|
|
|
176
211
|
---
|
|
177
212
|
|
|
213
|
+
## Styling
|
|
214
|
+
|
|
215
|
+
The component does **not** use Shadow DOM, so all its elements are part of the regular DOM and can be targeted freely from the host page's CSS.
|
|
216
|
+
|
|
217
|
+
### CSS custom properties
|
|
218
|
+
|
|
219
|
+
These properties are defined on the `markdown-text-editor` element and can be overridden at any level:
|
|
220
|
+
|
|
221
|
+
| Property | Default | Description |
|
|
222
|
+
| ----------------- | -------------------------- | ---------------------------------- |
|
|
223
|
+
| `--border-color` | `rgba(15, 23, 42, 0.09)` | Border of the editor field |
|
|
224
|
+
| `--heading-color` | `#0f172a` | Text color inside the editor |
|
|
225
|
+
|
|
226
|
+
```css
|
|
227
|
+
/* Override for all instances */
|
|
228
|
+
markdown-text-editor {
|
|
229
|
+
--border-color: #d1d5db;
|
|
230
|
+
--heading-color: #1f2937;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
/* Override for a specific instance */
|
|
234
|
+
#my-editor {
|
|
235
|
+
--border-color: #6366f1;
|
|
236
|
+
}
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
### Targeting component classes
|
|
240
|
+
|
|
241
|
+
Use these stable class names to override layout, size, fonts, or other visual properties:
|
|
242
|
+
|
|
243
|
+
| Selector | Description |
|
|
244
|
+
| ------------------------------------- | ----------------------------------- |
|
|
245
|
+
| `.markdown-text-editor__field` | Editor container (border, radius, background) |
|
|
246
|
+
| `.markdown-text-editor__field .bn-editor` | Inner editing area (padding, min-height, font-size) |
|
|
247
|
+
| `.bn-container .bn-editor` | BlockNote root (font-family, line-height) |
|
|
248
|
+
|
|
249
|
+
```css
|
|
250
|
+
/* Adjust editor size and typography */
|
|
251
|
+
.markdown-text-editor__field .bn-editor {
|
|
252
|
+
min-height: 400px;
|
|
253
|
+
font-size: 15px;
|
|
254
|
+
line-height: 1.6;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/* Remove border radius */
|
|
258
|
+
.markdown-text-editor__field {
|
|
259
|
+
border-radius: 0.25rem;
|
|
260
|
+
}
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
---
|
|
264
|
+
|
|
178
265
|
## Package exports
|
|
179
266
|
|
|
180
267
|
| Export | Description |
|