maerkchen 1.0.0 → 1.0.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 +39 -13
- package/dist/main.d.ts +2 -2
- package/dist/main.js +219 -1095
- package/package.json +1 -4
package/README.md
CHANGED
|
@@ -1,28 +1,54 @@
|
|
|
1
1
|
# Märkchen Editor
|
|
2
2
|
|
|
3
|
-
A tiny web component for creating a markdown editor
|
|
3
|
+
A tiny web component for creating a markdown editor, powered by Rust with WebAssembly (wasm-bindgen/wasm-pack).
|
|
4
4
|
|
|
5
5
|
## Component: `<maerkchen-editor>`
|
|
6
6
|
|
|
7
|
-
Simple
|
|
7
|
+
Simple editor with toolbar for common formatting actions (bold, italic, lists, etc.) and an automatic preview window.
|
|
8
|
+
|
|
9
|
+
## Rationale
|
|
10
|
+
|
|
11
|
+
Most JS Rich Text or Markdown editors are massive, have huge amounts of enterprise functionality and include tens to hundreds of NPM dependencies. I built this for my personal projects to keep it really simple.
|
|
12
|
+
|
|
13
|
+
- no external dependencies
|
|
14
|
+
- renders a `<textarea>` with a preview and not much more
|
|
15
|
+
- drop it in a `<form>` and it might work (will test in production later)
|
|
16
|
+
- alternatively, use as web component and read the reactive value with your favorite JS framework
|
|
17
|
+
- toolbar does nothing fancy, just helps with formatting a bit
|
|
18
|
+
|
|
19
|
+
## Non-features
|
|
20
|
+
|
|
21
|
+
- Syntax highlighting for the markdown source
|
|
22
|
+
- ultra fancy styling for the output
|
|
23
|
+
|
|
24
|
+
## things to improve / caveats
|
|
25
|
+
|
|
26
|
+
- markdown handling and HTML sanitizing happens in Wasm, so the bundle is unfortunately not that tiny - TODO
|
|
27
|
+
- more outside styling possibilities
|
|
8
28
|
|
|
9
29
|
### Properties
|
|
10
30
|
|
|
11
|
-
| Property
|
|
12
|
-
|
|
13
|
-
| `markdownText`
|
|
14
|
-
| `label`
|
|
15
|
-
| `formElementName` | `string`
|
|
16
|
-
| `required`
|
|
31
|
+
| Property | Type | Description |
|
|
32
|
+
| ----------------- | --------- | --------------------------------------------------- |
|
|
33
|
+
| `markdownText` | `string` | The raw markdown content. (Reflected) |
|
|
34
|
+
| `label` | `string` | The label text displayed above the editor. |
|
|
35
|
+
| `formElementName` | `string` | The `name` attribute for the internal textarea. |
|
|
36
|
+
| `required` | `boolean` | Sets whether the input field is marked as required. |
|
|
17
37
|
|
|
18
38
|
## Basic Usage
|
|
19
39
|
|
|
20
40
|
Include the script and use the element in your HTML:
|
|
21
41
|
|
|
22
42
|
```html
|
|
23
|
-
<maerkchen-editor
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
43
|
+
<maerkchen-editor
|
|
44
|
+
label="Write a story"
|
|
45
|
+
markdownText="Welcome to the world of **Märkchen**!"
|
|
46
|
+
formElementName="story_content"
|
|
47
|
+
required
|
|
48
|
+
>
|
|
28
49
|
</maerkchen-editor>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Why "Märkchen"?
|
|
53
|
+
|
|
54
|
+
All English combinations for "small/tiny" and "Mark" were taken, so I used the diminutive form of my mother tongue German. Nur echt mit dem Umlaut.
|
package/dist/main.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { MaerkchenEditor } from './maerkchen-editor';
|
|
2
|
-
import { parse_markdown, sanitize_html } from 'wasm-md';
|
|
3
|
-
export { MaerkchenEditor, parse_markdown, sanitize_html };
|
|
2
|
+
import { parse_markdown, sanitize_html, default as init } from 'wasm-md';
|
|
3
|
+
export { MaerkchenEditor, parse_markdown, sanitize_html, init };
|