blixify-ui-web-mcp 0.1.56 → 0.1.57
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.
|
@@ -118,10 +118,20 @@ On error the editor draws a red outline (`border border-red-500 rounded`) — th
|
|
|
118
118
|
|
|
119
119
|
> **`heightClassName` in borderless mode must be a `min-h-*` class**, not a fixed `h-*`. Borderless has no inner `overflow-y-auto`, so a fixed height clips content instead of scrolling it. Leave it unset unless you need a taller empty state.
|
|
120
120
|
|
|
121
|
-
Selecting text in borderless mode shows a floating toolbar above the selection — Bold, Italic, Underline, Strikethrough, Inline code, Link and Clear formatting. It works inside table cells, and does not show in read-only mode, in a code block, or when an image or embed is selected. The boxed editor keeps its static toolbar instead.
|
|
121
|
+
Selecting text in borderless mode shows a floating toolbar above the selection — Bold, Italic, Underline, Strikethrough, Inline code, Colour, Link and Clear formatting. It works inside table cells, and does not show in read-only mode, in a code block, or when an image or embed is selected. The boxed editor keeps its static toolbar instead.
|
|
122
122
|
|
|
123
123
|
> **Note:** hiding the toolbar also hides its media-upload button. In borderless mode insert images and videos by **dragging or pasting** into the editor, or supply your own control via `customElement`.
|
|
124
124
|
|
|
125
|
+
##### Text colour and highlight
|
|
126
|
+
|
|
127
|
+
The **A** button — in the boxed editor's toolbar and in the selection toolbar — opens a palette of nine text colours and nine highlights (gray, brown, orange, yellow, green, blue, purple, pink, red), each with a Default that takes it off. Markdown has no colour, so coloured text is stored as a small inline tag, the way underline is stored as `<u>`:
|
|
128
|
+
|
|
129
|
+
```markdown
|
|
130
|
+
<span data-text-color="red" style="color: #dc2626">late</span> and <mark data-highlight="yellow" style="background-color: rgba(250, 204, 21, 0.4); color: inherit">due</mark>
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
The editor reads back only the palette's names and always rewrites the style from the palette, so a note saved through the editor carries no other style through these tags, and an unknown colour name is saved as plain text. `MarkdownStatic` renders stored HTML as it is, so a note written by another route (an API, an import) is not cleaned by this. Colour pasted from Notion or Google Docs is not kept — only colour copied from another of these editors, which carries the palette names. Highlights are see-through, so they read on light and dark pages; text colours are picked for a white page, and blue, purple and brown are faint on the dark editor. Anything reading a note as plain markdown (an AI, a search snippet) sees the tags.
|
|
134
|
+
|
|
125
135
|
##### Read-Only Mode (Preview)
|
|
126
136
|
|
|
127
137
|
```tsx
|
|
@@ -350,6 +360,29 @@ moving away closes it, but opening is gated on the document actually changing
|
|
|
350
360
|
otherwise clicking anywhere after a slash already sitting in the prose would pop
|
|
351
361
|
the menu open unasked.
|
|
352
362
|
|
|
363
|
+
##### Tables
|
|
364
|
+
|
|
365
|
+
How a table is stored depends on what is in it (`tableMarkdown.ts`):
|
|
366
|
+
|
|
367
|
+
- **Simple**: a header row of `th`, one line of inline text per cell, and no
|
|
368
|
+
merged cells. These stay a GFM pipe table. Inline marks are kept and `|` is
|
|
369
|
+
escaped.
|
|
370
|
+
- **Rich**: lists, several paragraphs, line breaks, merged cells, or no header
|
|
371
|
+
row. These are stored as one line of `<table>` html. markdown-it runs with
|
|
372
|
+
`html: true`, so it reads back exactly as written. Tables pasted from Notion
|
|
373
|
+
usually land here.
|
|
374
|
+
|
|
375
|
+
In borderless mode, `TableControls` (`tableControls.tsx`) adds controls to the
|
|
376
|
+
hovered table, or to the table holding the caret on touch and keyboard:
|
|
377
|
+
|
|
378
|
+
- a `+` bar on the right edge adds a column
|
|
379
|
+
- a `+` bar on the bottom edge adds a row
|
|
380
|
+
- a row grip and a column grip each open a menu (insert, duplicate, clear,
|
|
381
|
+
delete, header row)
|
|
382
|
+
|
|
383
|
+
Embedded databases are left alone. While the caret is in a table, the slash menu
|
|
384
|
+
also lists add and delete commands for rows and columns.
|
|
385
|
+
|
|
353
386
|
##### Spacing
|
|
354
387
|
|
|
355
388
|
Tailwind Typography is tuned for articles, which leaves 20px between paragraphs
|