synthetic-markdown 0.0.8 → 0.0.10
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/dist/index.cjs.js +4 -2
- package/dist/index.esm.js +4 -2
- 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). |
|
package/dist/index.cjs.js
CHANGED
|
@@ -5873,13 +5873,14 @@ var select_default = Select;
|
|
|
5873
5873
|
|
|
5874
5874
|
// src/models/interaction.ts
|
|
5875
5875
|
var Interaction = class {
|
|
5876
|
-
constructor(rootElement, ast, select, editor, input, intent) {
|
|
5876
|
+
constructor(rootElement, ast, select, editor, input, intent, editable) {
|
|
5877
5877
|
this.rootElement = rootElement;
|
|
5878
5878
|
this.ast = ast;
|
|
5879
5879
|
this.select = select;
|
|
5880
5880
|
this.editor = editor;
|
|
5881
5881
|
this.input = input;
|
|
5882
5882
|
this.intent = intent;
|
|
5883
|
+
this.editable = editable;
|
|
5883
5884
|
this.isComposing = false;
|
|
5884
5885
|
this.onCompositionStart = () => {
|
|
5885
5886
|
this.isComposing = true;
|
|
@@ -6019,6 +6020,7 @@ var Interaction = class {
|
|
|
6019
6020
|
};
|
|
6020
6021
|
}
|
|
6021
6022
|
attach() {
|
|
6023
|
+
if (!this.editable) return;
|
|
6022
6024
|
this.rootElement.addEventListener("beforeinput", this.onBeforeInput);
|
|
6023
6025
|
this.rootElement.addEventListener("compositionstart", this.onCompositionStart);
|
|
6024
6026
|
this.rootElement.addEventListener("compositionend", this.onCompositionEnd);
|
|
@@ -7702,7 +7704,7 @@ var Element = class extends HTMLElement {
|
|
|
7702
7704
|
this.select.attach();
|
|
7703
7705
|
this.input = new input_default(this.ast, this.caret, this.select);
|
|
7704
7706
|
this.intent = new intent_default(this.ast, this.caret, this.select, this.render);
|
|
7705
|
-
this.interaction = new interaction_default(this.rootElement, this.ast, this.select, this.editor, this.input, this.intent);
|
|
7707
|
+
this.interaction = new interaction_default(this.rootElement, this.ast, this.select, this.editor, this.input, this.intent, this.editable);
|
|
7706
7708
|
this.interaction.attach();
|
|
7707
7709
|
this.renderDOM();
|
|
7708
7710
|
this.setAutoFocus();
|
package/dist/index.esm.js
CHANGED
|
@@ -5845,13 +5845,14 @@ var select_default = Select;
|
|
|
5845
5845
|
|
|
5846
5846
|
// src/models/interaction.ts
|
|
5847
5847
|
var Interaction = class {
|
|
5848
|
-
constructor(rootElement, ast, select, editor, input, intent) {
|
|
5848
|
+
constructor(rootElement, ast, select, editor, input, intent, editable) {
|
|
5849
5849
|
this.rootElement = rootElement;
|
|
5850
5850
|
this.ast = ast;
|
|
5851
5851
|
this.select = select;
|
|
5852
5852
|
this.editor = editor;
|
|
5853
5853
|
this.input = input;
|
|
5854
5854
|
this.intent = intent;
|
|
5855
|
+
this.editable = editable;
|
|
5855
5856
|
this.isComposing = false;
|
|
5856
5857
|
this.onCompositionStart = () => {
|
|
5857
5858
|
this.isComposing = true;
|
|
@@ -5991,6 +5992,7 @@ var Interaction = class {
|
|
|
5991
5992
|
};
|
|
5992
5993
|
}
|
|
5993
5994
|
attach() {
|
|
5995
|
+
if (!this.editable) return;
|
|
5994
5996
|
this.rootElement.addEventListener("beforeinput", this.onBeforeInput);
|
|
5995
5997
|
this.rootElement.addEventListener("compositionstart", this.onCompositionStart);
|
|
5996
5998
|
this.rootElement.addEventListener("compositionend", this.onCompositionEnd);
|
|
@@ -7674,7 +7676,7 @@ var Element = class extends HTMLElement {
|
|
|
7674
7676
|
this.select.attach();
|
|
7675
7677
|
this.input = new input_default(this.ast, this.caret, this.select);
|
|
7676
7678
|
this.intent = new intent_default(this.ast, this.caret, this.select, this.render);
|
|
7677
|
-
this.interaction = new interaction_default(this.rootElement, this.ast, this.select, this.editor, this.input, this.intent);
|
|
7679
|
+
this.interaction = new interaction_default(this.rootElement, this.ast, this.select, this.editor, this.input, this.intent, this.editable);
|
|
7678
7680
|
this.interaction.attach();
|
|
7679
7681
|
this.renderDOM();
|
|
7680
7682
|
this.setAutoFocus();
|