@openstage/glyph-element 0.2.0 → 0.2.1
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 +82 -0
- package/package.json +16 -4
package/README.md
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
# @openstage/glyph-element
|
|
2
|
+
|
|
3
|
+
The `<glyph-editor>` Web Component — [Glyph](https://codeberg.org/open-stage/glyph)'s
|
|
4
|
+
framework-agnostic block / rich-text editor. JSON is the canonical document
|
|
5
|
+
format; the editing engine is fully hidden behind a stable element API. Ships
|
|
6
|
+
as a self-contained ESM bundle (no peer dependencies).
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm i @openstage/glyph-element
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Quick start
|
|
13
|
+
|
|
14
|
+
```ts
|
|
15
|
+
import '@openstage/glyph-element'; // registers <glyph-editor> as a side effect
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
```html
|
|
19
|
+
<glyph-editor id="editor" placeholder="Write your article…"></glyph-editor>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
```ts
|
|
23
|
+
const editor = document.querySelector('glyph-editor')!;
|
|
24
|
+
|
|
25
|
+
editor.setContent(savedDocument); // load (e.g. fetched from your backend)
|
|
26
|
+
|
|
27
|
+
editor.addEventListener('content-change', (e) => {
|
|
28
|
+
const doc = (e as CustomEvent).detail; // an EditorDocument (plain JSON)
|
|
29
|
+
saveToBackend(doc);
|
|
30
|
+
});
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
`editor.getJSON()` returns the current document as plain JSON, safe to
|
|
34
|
+
`JSON.stringify` and store verbatim.
|
|
35
|
+
|
|
36
|
+
## Frameworks
|
|
37
|
+
|
|
38
|
+
It is a normal DOM element, so any framework can consume it. Two rules:
|
|
39
|
+
|
|
40
|
+
1. Set rich values (objects/arrays) as **JS properties**, not HTML attributes.
|
|
41
|
+
2. Listen for the custom events (`content-change`, `selection-change`,
|
|
42
|
+
`ready`, `focus`, `blur`).
|
|
43
|
+
|
|
44
|
+
## Configuration
|
|
45
|
+
|
|
46
|
+
Assign `editor.config` once per mount (assigning rebuilds the instance;
|
|
47
|
+
content is preserved):
|
|
48
|
+
|
|
49
|
+
```ts
|
|
50
|
+
editor.config = {
|
|
51
|
+
showHeader: true, // false = headless
|
|
52
|
+
floatingHeader: true, // sticky toolbar
|
|
53
|
+
bordered: true, // false = transparent outer border (seamless embed)
|
|
54
|
+
maxHeight: '70vh', // bounded internal scroll
|
|
55
|
+
enableSlashCommands: true, // the "/" menu
|
|
56
|
+
toolbar: ['bold', 'italic', 'link', 'spacer', 'status'],
|
|
57
|
+
icons: { bold: (d) => myIconNode(d, 'bold') },
|
|
58
|
+
};
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Configurable/orderable toolbar with custom icons, slash commands, CSS-variable
|
|
62
|
+
theming (light/dark), floating header, bounded height, and headless mode.
|
|
63
|
+
Overlays (slash menu, link UI) are positioned with Floating UI so they stay
|
|
64
|
+
anchored even inside `transform`/`filter`/`contain` ancestors.
|
|
65
|
+
|
|
66
|
+
To register under a different tag:
|
|
67
|
+
|
|
68
|
+
```ts
|
|
69
|
+
import { defineGlyphEditor, GlyphEditor } from '@openstage/glyph-element';
|
|
70
|
+
defineGlyphEditor('my-editor');
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
The public API exposes no third-party types.
|
|
74
|
+
|
|
75
|
+
## Documentation
|
|
76
|
+
|
|
77
|
+
Full configuration, theming, events, keyboard, and backend-integration
|
|
78
|
+
reference: <https://codeberg.org/open-stage/glyph#readme>
|
|
79
|
+
|
|
80
|
+
## License
|
|
81
|
+
|
|
82
|
+
MIT © Gabriel Bornea
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openstage/glyph-element",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Gabriel Bornea",
|
|
6
6
|
"repository": {
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
"prepublishOnly": "node ../../scripts/gen-notices.mjs --check"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@openstage/glyph-core": "0.2.
|
|
38
|
+
"@openstage/glyph-core": "0.2.1"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@floating-ui/dom": "^1.6.13",
|
|
42
|
-
"@openstage/glyph-renderer": "0.2.
|
|
42
|
+
"@openstage/glyph-renderer": "0.2.1",
|
|
43
43
|
"@tiptap/core": "^3.23.4",
|
|
44
44
|
"@tiptap/extension-code-block-lowlight": "^3.23.4",
|
|
45
45
|
"@tiptap/extension-link": "^3.23.4",
|
|
@@ -48,5 +48,17 @@
|
|
|
48
48
|
"@tiptap/starter-kit": "^3.23.4",
|
|
49
49
|
"typescript": "^6.0.3",
|
|
50
50
|
"vite": "^8.0.13"
|
|
51
|
-
}
|
|
51
|
+
},
|
|
52
|
+
"description": "Framework-agnostic <glyph-editor> Web Component: a JSON-canonical block/rich-text editor.",
|
|
53
|
+
"keywords": [
|
|
54
|
+
"editor",
|
|
55
|
+
"rich-text",
|
|
56
|
+
"wysiwyg",
|
|
57
|
+
"web-component",
|
|
58
|
+
"custom-element",
|
|
59
|
+
"tiptap",
|
|
60
|
+
"prosemirror",
|
|
61
|
+
"framework-agnostic",
|
|
62
|
+
"glyph"
|
|
63
|
+
]
|
|
52
64
|
}
|