noteloom 0.1.3 → 0.1.5
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 +26 -0
- package/dist/noteloom.cjs +2045 -1887
- package/dist/noteloom.cjs.map +1 -1
- package/dist/noteloom.es.js +5500 -4900
- package/dist/noteloom.es.js.map +1 -1
- package/dist/style.css +2037 -1879
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -151,6 +151,32 @@ import { DocumentExportButton } from 'noteloom';
|
|
|
151
151
|
|
|
152
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
153
|
|
|
154
|
+
## Mobile / touch support
|
|
155
|
+
|
|
156
|
+
Typing "/"/"@" still works on a phone keyboard, but it's not a reliable or discoverable primary path there (autocorrect, awkward key access, nothing to discover it by) — so on a coarse (touch) pointer, mount `MobileActionBar` alongside your other trigger hooks and it takes over as the touch-first equivalent, pinned above the on-screen keyboard:
|
|
157
|
+
|
|
158
|
+
```jsx
|
|
159
|
+
import { MobileActionBar } from 'noteloom';
|
|
160
|
+
|
|
161
|
+
// next to your other trigger hooks/components, same containerRef:
|
|
162
|
+
<MobileActionBar containerRef={containerRef} />
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
It renders nothing on a mouse/trackpad, and nothing until focus is actually inside the editor. Its contents swap based on context:
|
|
166
|
+
|
|
167
|
+
- **Block options** (shown whenever the caret/selection is inside any block) → Duplicate/Move up/Move down/Hide-Show/Delete, in `MobileBlockOptionsSheet` — the mobile home for the desktop per-block gutter's own grip-handle menu. The gutter itself is hidden entirely on touch input (no hover state exists to reveal it by, and its desktop position sits in a page margin that doesn't exist on a narrow viewport), so both of its actions ("+" and the options menu) live in this bar instead of the gutter on touch.
|
|
168
|
+
- **Text selected** → formatting actions (bold/italic/underline/link) — the desktop `FloatingToolbar` bubble also disables itself on touch, so this is the single formatting surface either way (both share the same `useTextFormattingActions` hook, not two copies).
|
|
169
|
+
- **Collapsed caret, table cell** → insert row/column.
|
|
170
|
+
- **Collapsed caret, code block** → language picker.
|
|
171
|
+
- **Collapsed caret, callout** → color picker.
|
|
172
|
+
- **Collapsed caret, everywhere else** → "+" (opens `MobileBlockPickerSheet`, a tap-friendly bottom sheet listing every insertable block, same commands "/" already offers), Undo/Redo, dismiss-keyboard.
|
|
173
|
+
|
|
174
|
+
Trigger-menu and `Select` popovers reposition above the caret instead of below it when there isn't room before the keyboard, via `useVirtualKeyboardInset()` (also exported, in case you're positioning your own UI against the keyboard).
|
|
175
|
+
|
|
176
|
+
**Touch detection deliberately isn't a static `matchMedia('(pointer: coarse)')` check** (see `useCoarsePointer`, also exported) — a touchscreen laptop reports its trackpad as the "primary" pointer even though the touchscreen sitting right there can be used at any moment, so a pure media-query check would never show touch UI on that class of device. Instead, the media query only supplies the *initial* guess (correct pre-interaction, SSR-safe); every real `pointerdown` afterward overrides it with that event's own `pointerType`, so a 2-in-1 laptop correctly shows desktop UI while the trackpad is in use and mobile UI the instant the screen is tapped, live, no reload needed. The same signal is mirrored onto `<html class="be-touch-input">` so plain CSS (the gutter-hiding rule above) reacts to it too, not just `MobileActionBar` itself.
|
|
177
|
+
|
|
178
|
+
**Not included**: a touch equivalent for dragging in the block gutter to select a range of blocks — Notion, TipTap, and Editor.js all keep that gesture desktop/mouse-only too.
|
|
179
|
+
|
|
154
180
|
## Built-in block types
|
|
155
181
|
|
|
156
182
|
`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`.
|