noteloom 0.1.1 → 0.1.3
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 -0
- package/dist/noteloom.cjs +75 -8
- package/dist/noteloom.cjs.map +1 -1
- package/dist/noteloom.es.js +1882 -1733
- package/dist/noteloom.es.js.map +1 -1
- package/dist/style.css +67 -0
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# noteloom
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/noteloom)
|
|
4
|
+
[](https://www.npmjs.com/package/noteloom)
|
|
5
|
+
[](https://github.com/vishwakarmanikhil/noteloom/blob/master/LICENSE)
|
|
6
|
+
[](https://github.com/sponsors/vishwakarmanikhil)
|
|
7
|
+
|
|
8
|
+
**[Live site & docs →](https://noteloom.qusere.in)** · **[Play with the demo →](https://noteloom.qusere.in/playground/)**
|
|
9
|
+
|
|
3
10
|
A React-first, block-based rich text editor with **zero runtime dependencies** — the only things it expects from your app are `react` and `react-dom`. Everything else (undo/redo, clipboard, slash commands, tables, inline widgets) is built from scratch on top of a small normalized document store.
|
|
4
11
|
|
|
5
12
|
## Why this exists
|
|
@@ -112,6 +119,38 @@ No wrapper `<div>` is added unless you pass one of these props, so existing usag
|
|
|
112
119
|
|
|
113
120
|
`examples/basic/src/style.css` shows the extra page-level chrome (fonts, page width, the demo's own toolbar buttons) a host app typically adds around the editor — none of that is part of the default theme itself.
|
|
114
121
|
|
|
122
|
+
**Customize individual blocks**, not just the root, via `getBlockClassName`:
|
|
123
|
+
|
|
124
|
+
```jsx
|
|
125
|
+
<EditorProvider
|
|
126
|
+
store={store}
|
|
127
|
+
registry={registry}
|
|
128
|
+
getBlockClassName={(block) => (block.type === 'callout' ? 'my-callout' : undefined)}
|
|
129
|
+
>
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
Whatever string you return is appended onto that block's own root element's class list (`be-paragraph my-callout`, alongside the fixed base class) — `block` is the real block object (`type`, `id`, `props`), so you can target a type, a specific id, or a prop value (e.g. every red callout) as precisely as you like.
|
|
133
|
+
|
|
134
|
+
## Exporting the document (JSON / HTML / plain text)
|
|
135
|
+
|
|
136
|
+
```js
|
|
137
|
+
import { exportDocumentJSON, exportDocumentHTML, exportDocumentText } from 'noteloom';
|
|
138
|
+
|
|
139
|
+
exportDocumentJSON(store); // { rootId, blocks, runs } — feed straight back into `new EditorStore(...)`
|
|
140
|
+
exportDocumentHTML(store, registry, inlineRegistry);
|
|
141
|
+
exportDocumentText(store, registry, inlineRegistry);
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
Or mount the ready-made button + modal instead of wiring your own UI:
|
|
145
|
+
|
|
146
|
+
```jsx
|
|
147
|
+
import { DocumentExportButton } from 'noteloom';
|
|
148
|
+
|
|
149
|
+
<DocumentExportButton label="View source" />
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
It opens a modal with JSON/HTML/Text tabs (reading live from the store every time it opens) and a Copy button — useful for debugging, or as a starting point for a real "export" feature.
|
|
153
|
+
|
|
115
154
|
## Built-in block types
|
|
116
155
|
|
|
117
156
|
`paragraph`, `heading` (h1–h3), `listItem` (bulleted, numbered, and to-do — with Notion-style Tab/Shift+Tab nesting and Enter conventions), `table` (with row/column insert/delete), `layout` (multi-column), `divider`.
|