synthetic-markdown 0.0.8 → 0.0.9
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 +24 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
# Synthetic Markdown
|
|
2
2
|
|
|
3
|
+
A WYSIWYG Markdown editor built as a composable UI component
|
|
4
|
+
|
|
5
|
+
### Usage
|
|
6
|
+
|
|
3
7
|
```
|
|
8
|
+
<!doctype html>
|
|
4
9
|
<html>
|
|
5
10
|
<body>
|
|
6
11
|
<synthetic-markdown />
|
|
7
|
-
|
|
8
|
-
<script type="module">
|
|
12
|
+
<script type='module'>
|
|
9
13
|
import 'synthetic-markdown'
|
|
10
14
|
|
|
11
15
|
const element = document.querySelector('synthetic-markdown')
|
|
@@ -13,10 +17,27 @@
|
|
|
13
17
|
let value = ''
|
|
14
18
|
element.value = value
|
|
15
19
|
|
|
16
|
-
element.addEventListener('change', (event) => {
|
|
20
|
+
element.addEventListener('change', (event: Event) => {
|
|
17
21
|
value = event.target.value
|
|
18
22
|
})
|
|
19
23
|
</script>
|
|
20
24
|
</body>
|
|
21
25
|
</html>
|
|
22
26
|
```
|
|
27
|
+
|
|
28
|
+
### API
|
|
29
|
+
|
|
30
|
+
#### Attributes & Properties
|
|
31
|
+
|
|
32
|
+
| Name | Type | Default | Description |
|
|
33
|
+
|------------|----------|---------|-------------|
|
|
34
|
+
| **class** | `string` | `-` | Class name to apply to the host element (`element.className`) |
|
|
35
|
+
| **value** | `string` | `-` | Value of the editor. Set via `element.value` or initial `value` attribute |
|
|
36
|
+
| **editable** | `boolean` | `true` | If set, the editor will be editable (`element.editable`) |
|
|
37
|
+
| **autofocus** | `boolean` | `false` | If set, the editor will be focused on mount (`element.autofocus` or `autofocus` attribute) |
|
|
38
|
+
|
|
39
|
+
#### Events
|
|
40
|
+
|
|
41
|
+
| Name | Description |
|
|
42
|
+
|---------|-------------|
|
|
43
|
+
| **change** | Fired when the value changes. Use `element.addEventListener('change', handler)`.<br><br>The new value is available as `event.target.value` (string). |
|