@lyfie/luthor-headless 2.3.3 → 2.3.4
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 +83 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,23 @@
|
|
|
1
|
-
|
|
1
|
+
<div align="center">
|
|
2
|
+
<img src="https://raw.githubusercontent.com/lyfie-app/luthor/main/apps/web/public/luthor-logo-horizontal.png" alt="Luthor" width="360" />
|
|
3
|
+
<h1>@lyfie/luthor-headless</h1>
|
|
4
|
+
<p><strong>Headless, extension-first rich text editor runtime for React on top of Lexical.</strong></p>
|
|
5
|
+
</div>
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
<div align="center">
|
|
8
|
+
|
|
9
|
+
[](https://www.npmjs.com/package/@lyfie/luthor-headless)
|
|
10
|
+
[](https://www.npmjs.com/package/@lyfie/luthor-headless)
|
|
11
|
+
[](https://bundlephobia.com/package/@lyfie/luthor-headless)
|
|
12
|
+
[](https://www.npmjs.com/package/@lyfie/luthor-headless)
|
|
13
|
+
[](https://github.com/lyfie-app/luthor/blob/main/LICENSE)
|
|
14
|
+
[](https://github.com/lyfie-app/luthor/commits/main)
|
|
15
|
+
|
|
16
|
+
</div>
|
|
17
|
+
|
|
18
|
+
<p align="center">
|
|
19
|
+
:jigsaw: Build your own editor UI | :shield: Typed command/state API | :zap: Lexical performance
|
|
20
|
+
</p>
|
|
4
21
|
|
|
5
22
|
## Install
|
|
6
23
|
|
|
@@ -14,7 +31,68 @@ Optional:
|
|
|
14
31
|
pnpm add highlight.js @emoji-mart/data
|
|
15
32
|
```
|
|
16
33
|
|
|
17
|
-
##
|
|
34
|
+
## Quick Usage
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import {
|
|
38
|
+
createEditorSystem,
|
|
39
|
+
richTextExtension,
|
|
40
|
+
boldExtension,
|
|
41
|
+
italicExtension,
|
|
42
|
+
RichText,
|
|
43
|
+
} from "@lyfie/luthor-headless";
|
|
44
|
+
|
|
45
|
+
const extensions = [richTextExtension, boldExtension, italicExtension] as const;
|
|
46
|
+
const { Provider, useEditor } = createEditorSystem<typeof extensions>();
|
|
47
|
+
|
|
48
|
+
function Toolbar() {
|
|
49
|
+
const { commands, activeStates } = useEditor();
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<div>
|
|
53
|
+
<button onClick={() => commands.toggleBold()} aria-pressed={activeStates.bold}>Bold</button>
|
|
54
|
+
<button onClick={() => commands.toggleItalic()} aria-pressed={activeStates.italic}>Italic</button>
|
|
55
|
+
</div>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
export function Editor() {
|
|
60
|
+
return (
|
|
61
|
+
<Provider extensions={extensions} config={{ namespace: "MyEditor" }}>
|
|
62
|
+
<Toolbar />
|
|
63
|
+
<RichText placeholder="Write something..." />
|
|
64
|
+
</Provider>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Highlights
|
|
70
|
+
|
|
71
|
+
- :gear: Extension-first architecture with configurable behaviors
|
|
72
|
+
- :brain: Type-safe command and active-state surface
|
|
73
|
+
- :building_construction: Compose only what your product needs
|
|
74
|
+
- :floppy_disk: JSON/JSONB-first import/export workflow
|
|
75
|
+
- :art: Bring your own toolbar and design system
|
|
76
|
+
|
|
77
|
+
## Compatibility
|
|
78
|
+
|
|
79
|
+
- Node: `>=20` (workspace development)
|
|
80
|
+
- React: `^18.0.0 || ^19.0.0`
|
|
81
|
+
- Lexical + `@lexical/*`: `>=0.40.0`
|
|
82
|
+
- Optional `highlight.js`: `>=11.0.0`
|
|
83
|
+
|
|
84
|
+
## Documentation
|
|
85
|
+
|
|
86
|
+
- Docs landing: [luthor.fyi/docs/getting-started/luthor-headless](https://www.luthor.fyi/docs/getting-started/luthor-headless)
|
|
87
|
+
- Features docs: [luthor.fyi/docs/luthor-headless/features](https://www.luthor.fyi/docs/luthor-headless/features)
|
|
88
|
+
- User guide (repo): [documentation/user/headless/getting-started.md](https://github.com/lyfie-app/luthor/blob/main/documentation/user/headless/getting-started.md)
|
|
89
|
+
- Extensions/config: [documentation/user/headless/extensions-and-configuration.md](https://github.com/lyfie-app/luthor/blob/main/documentation/user/headless/extensions-and-configuration.md)
|
|
90
|
+
- Import/export: [documentation/user/headless/import-export.md](https://github.com/lyfie-app/luthor/blob/main/documentation/user/headless/import-export.md)
|
|
91
|
+
|
|
92
|
+
## Related Packages
|
|
93
|
+
|
|
94
|
+
- Plug-and-play presets: [`@lyfie/luthor`](https://www.npmjs.com/package/@lyfie/luthor)
|
|
95
|
+
|
|
96
|
+
## License
|
|
18
97
|
|
|
19
|
-
|
|
20
|
-
- https://luthor-editor.vercel.app/docs/luthor-headless/features/
|
|
98
|
+
MIT (c) Luthor Team
|