@atom-forge/brickee 0.0.2 → 0.0.3

package/dist/plugins/YouTube.svelte

@@ -15,38 +15,10 @@
 </script>
 
 {#if id}
-	<div class="yt">
-		<img src="https://i.ytimg.com/vi/{id}/hqdefault.jpg" alt={props.title} draggable="false" />
-		<span class="play"><Play size={22} /></span>
+	<div class="relative overflow-hidden rounded-[10px] bg-black">
+		<img class="block aspect-video w-full object-cover opacity-85" src="https://i.ytimg.com/vi/{id}/hqdefault.jpg" alt={props.title} draggable="false" />
+		<span class="absolute inset-0 m-auto grid h-10 w-14 place-items-center rounded-[10px] bg-red-600 text-white"><Play size={22} /></span>
 	</div>
 {:else}
 	<Empty icon={SquarePlay} text="Paste a YouTube link above" />
 {/if}
-
-<style>
-	.yt {
-		position: relative;
-		border-radius: 10px;
-		overflow: hidden;
-		background: #000;
-	}
-	img {
-		display: block;
-		width: 100%;
-		aspect-ratio: 16 / 9;
-		object-fit: cover;
-		opacity: 0.85;
-	}
-	.play {
-		position: absolute;
-		inset: 0;
-		margin: auto;
-		width: 56px;
-		height: 40px;
-		display: grid;
-		place-items: center;
-		border-radius: 10px;
-		background: #dc2626;
-		color: #fff;
-	}
-</style>

package/dist/plugins/YouTubePreview.svelte

@@ -31,46 +31,48 @@
 	</figure>
 {/if}
 
-<style>
-	.yt {
-		margin: 0 0 1em;
-	}
-	iframe,
-	button {
-		display: block;
-		width: 100%;
-		aspect-ratio: 16 / 9;
-		border: 0;
-		border-radius: 8px;
-	}
-	button {
-		position: relative;
-		padding: 0;
-		overflow: hidden;
-		background: #000;
-		cursor: pointer;
-	}
-	img {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-	.play {
-		position: absolute;
-		inset: 0;
-		margin: auto;
-		width: 64px;
-		height: 44px;
-		display: grid;
-		place-items: center;
-		border-radius: 12px;
-		background: #dc2626;
-		color: #fff;
-		font-size: 20px;
-	}
-	figcaption {
-		margin-top: 0.4em;
-		color: color-mix(in srgb, currentColor 65%, transparent);
-		font: 13px/1.4 system-ui, sans-serif;
-	}
-</style>
+<style>.yt {
+  margin: 0 0 1em;
+}
+
+iframe,
+button {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16/9;
+  border: 0;
+  border-radius: 8px;
+}
+
+button {
+  position: relative;
+  padding: 0;
+  overflow: hidden;
+  background: #000;
+  cursor: pointer;
+}
+button img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.play {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 64px;
+  height: 44px;
+  display: grid;
+  place-items: center;
+  border-radius: 12px;
+  background: #dc2626;
+  color: #fff;
+  font-size: 20px;
+}
+
+figcaption {
+  margin-top: 0.4em;
+  color: color-mix(in srgb, currentColor 65%, transparent);
+  font: 13px/1.4 system-ui, sans-serif;
+}</style>

package/dist/plugins/index.js

@@ -7,7 +7,7 @@ import Gap, { GAP_LINES } from './Gap.svelte';
 import GapPreview from './GapPreview.svelte';
 import MapView, {} from './Map.svelte';
 import MapPreview from './MapPreview.svelte';
-import TableView, { tableHeads } from './Table.svelte';
+import TableView, { square, tableHeads } from './Table.svelte';
 import TablePreview from './TablePreview.svelte';
 import YouTube, {} from './YouTube.svelte';
 import YouTubePreview from './YouTubePreview.svelte';
@@ -55,6 +55,8 @@ export const table = {
     ],
     tag: (p) => `table · ${p.rows?.length ?? 0}×${p.rows?.[0]?.length ?? 0}`,
     content: 'none',
+    // A pasted or imported GFM table: its first row is the header.
+    fromTable: ({ rows, align }) => ({ rows: square(rows), heads: ['top'], ...(align.some((a) => a !== 'left') ? { align } : {}) }),
     markdown: (p) => {
         const rows = p.rows ?? [];
         if (!rows.length)

package/dist/types.d.ts

@@ -83,6 +83,12 @@ export interface PluginPreviewProps<P extends Props = Props> {
     plugins: BlockPlugin[];
 }
 /** A custom block for the slash menu. */
+/** A GFM table read from markdown: the cells as inline markdown, row by row (the first row is the header), and the
+ * alignment of each column. */
+export interface MarkdownTable {
+    rows: string[][];
+    align: ('left' | 'center' | 'right')[];
+}
 /** What a plugin's `markdown` gets beside its props. */
 export interface MarkdownContext {
     /** The nested blocks as markdown ('' when it has none). */
@@ -120,13 +126,25 @@ export interface BlockPlugin<P extends Props = Props> {
      * when it gives '', the block is left out of the markdown.
      */
     markdown?(props: P, ctx: MarkdownContext): string;
-    /** At most one per document, and only at the top level (e.g. the supporters-only divider). */
+    /**
+     * Takes a GFM table when markdown is pasted or imported (`fromMarkdown(src, { plugins })`): returns the block's props
+     * from the table's cells (inline markdown, the first row is the header) and its column alignments. The first plugin
+     * that has it gets the table; without one, the table stays text.
+     */
+    fromTable?(table: MarkdownTable): P;
+    /**
+     * Takes files pasted into the editor or dropped on it (an image, a PDF…): returns the new block's props, or null to
+     * leave them to the next plugin. Uploading and storing them is the plugin's own business; it may take its time (a
+     * promise). The first plugin the editor offers that takes them gets one block.
+     */
+    fromFiles?(files: File[]): P | null | Promise<P | null>;
+    /** At most one per document, and only at the top level (e.g. a table of contents). */
     unique?: boolean;
-    /** The blocks after it are gated (e.g. for supporters only): the preview marks them. Implies nothing about `unique`. */
-    gate?: boolean;
 }
 export { MAX_INDENT } from './model';
 export declare const uid: () => string;
 export declare const newBlock: (type?: BlockType, html?: string, extra?: Partial<Block>) => Block;
+/** The start number a numbered list's first item carries (`props.start`), or 1. */
+export declare const olStart: (props: Record<string, unknown> | undefined) => number;
 /** Ordinal for every `ol` block, restarting after interruptions and per indent level. */
 export declare function numbering(blocks: Block[]): Record<string, number>;

package/dist/types.js

@@ -25,14 +25,21 @@ export const newBlock = (type = 'p', html = '', extra = {}) => ({
     indent: 0,
     ...extra
 });
+/** The start number a numbered list's first item carries (`props.start`), or 1. */
+export const olStart = (props) => {
+    const n = Math.floor(Number(props?.start));
+    return n >= 0 && n < 1e9 ? n : 1;
+};
 /** Ordinal for every `ol` block, restarting after interruptions and per indent level. */
 export function numbering(blocks) {
     const out = {};
     const counters = [];
     for (const b of blocks) {
         if (b.type === 'ol') {
+            const fresh = counters[b.indent] === undefined;
             counters.length = b.indent + 1;
-            counters[b.indent] = (counters[b.indent] ?? 0) + 1;
+            // A list's first item may carry its start number (an imported "5. …").
+            counters[b.indent] = fresh ? olStart(b.props) : counters[b.indent] + 1;
             out[b.id] = counters[b.indent];
         }
         else {

package/dist/view.js

@@ -2,7 +2,7 @@
 // host's business (e.g. the width its preview shows): it gives the current one through the context. Without it, a
 // per-view field simply edits its base value.
 import { getContext, setContext } from 'svelte';
-const KEY = 'block-editor:view';
+const KEY = 'brickee:view';
 /** Call in a component's init (around the editor); the function returns the current view's key. */
 export function provideView(get) {
     setContext(KEY, get);

package/docs/en/bundled-plugins.md

@@ -13,7 +13,7 @@ import { table, youtube } from '@atom-forge/brickee/plugins'; // or some
 
 | Export | `type` | Fields | Markdown form | What it is |
 |---|---|---|---|---|
-| `table` | `table` | header and footer (the cells are edited in place) | a GFM table | Rows and columns of inline-formatted cells; click a cell for its row and column tools (insert, delete, align), drag rows and columns by their grips. The first row can be a header, the last a footer. |
+| `table` | `table` | header and footer (the cells are edited in place) | a GFM table (a pasted GFM table becomes one) | Rows and columns of inline-formatted cells; click a cell for its row and column tools (insert, delete, align), drag rows and columns by their grips. A cell shows its text formatted; editing it shows the markdown, and `Ctrl/Cmd` + `B`, `I`, `E`, `Shift+X`, `K` mark the selected text. The first row can be a header, the last a footer. |
 | `youtube` | `youtube` | video link or id, title | a link | A YouTube video, loaded on click; any YouTube link is reduced to the video id. |
 | `map` | `map` | place or address, zoom slider | a link | A Google Maps embed of a place or an address. |
 | `gap` | `gap` | height slider | none | Empty space between blocks, 1–8 lines high. |

package/docs/en/documents-and-markdown.md

@@ -46,13 +46,13 @@ A short document with a paragraph, a list, a video and a box (the `note` contain
 | `md:p` | inline markdown | — | the text |
 | `md:h1` … `md:h6` | inline markdown | — | `#` … `######` |
 | `md:ul` | inline markdown | — | `- item` |
-| `md:ol` | inline markdown | — | `1. item` (numbered per run and indent level) |
+| `md:ol` | inline markdown | `{ start?: number }` on a list's first item | `1. item` (numbered per run and indent level, from `start` when given) |
 | `md:todo` | inline markdown | `{ checked: boolean }` | `- [x] item` |
 | `md:quote` | inline markdown | — | `> quote` |
 | `md:code` | raw text | `{ lang?: string }` | fenced block with the language |
 | `md:hr` | — | — | `---` |
 
-`indent` nests list items (consecutive list blocks become properly nested `ul`/`ol` elements in the preview) and indents paragraphs and quotes. Headings, code and dividers ignore it.
+`indent` nests list items (consecutive list blocks become properly nested `ul`/`ol` elements in the preview), puts paragraphs and code blocks under a list item, and nests quotes (`> > …`). Headings and dividers ignore it.
 
 ### Inline markdown
 
@@ -60,15 +60,15 @@ The text of a built-in block is a small, safe subset of markdown:
 
 | Mark | Stored as |
 |---|---|
-| bold | `**text**` |
-| italic | `*text*` |
+| bold | `**text**` (read also: `__text__`) |
+| italic | `*text*` (read also: `_text_`, not inside a word) |
 | underline, subscript, superscript | `<u>text</u>`, `<sub>text</sub>`, `<sup>text</sup>` |
 | strikethrough | `~~text~~` |
-| code | `` `text` `` |
-| link | `[text](url)` — only `http:`, `https:`, `mailto:`, `tel:` and site-relative `/…` targets become links |
-| line break | a newline |
+| code | `` `text` `` (a longer backtick run when the code holds backticks: ``` `` a`b `` ```) |
+| link | `[text](url)` — only `http:`, `https:`, `mailto:`, `tel:` and site-relative `/…` targets become links; parentheses in a target must be balanced. Read also: a title (dropped), `<https://…>` autolinks, and an image `![alt](url)` as a link |
+| line break | a newline (in markdown out: a backslash at the line's end) |
 
-Special characters in plain text are backslash-escaped, so they never turn into markup. `inline(md)` turns inline markdown into HTML: it escapes the text first and only then adds the tags above, so its output is safe to render with `{@html}` — this is what the preview does.
+Special characters in plain text are backslash-escaped, so they never turn into markup; any ASCII punctuation can be escaped. Reading stays linear on any input, with these limits: a marked span is at most 2000 characters, a link label has no brackets of its own and is at most 1000 characters, a link target at most 2000. When reading, inline HTML maps onto the marks (`<strong>`, `<em>`, `<del>`, `<br>`…), other tags are dropped with their text kept, and a footnote reference `[^1]` becomes a superscript. `inline(md)` turns inline markdown into HTML: it escapes the text first and only then adds the tags above, so its output is safe to render with `{@html}` — this is what the preview does.
 
 ## Markdown in and out
 
@@ -78,7 +78,8 @@ Markdown is a first-class format: the clipboard carries it, and a host can impor
 |---|---|---|
 | `fromStored(block)` | `StoredBlock` → `Block` | anywhere |
 | `toStored(block)` | `Block` → `StoredBlock` | browser only |
-| `fromMarkdown(text)` | markdown → `Block[]` | anywhere |
+| `fromMarkdown(text, { plugins })` | markdown → `Block[]` | anywhere |
+| `fromHtml(html, { plugins })` | HTML (a formatted paste, a page) → `Block[]` | browser only |
 | `toMarkdown(blocks, { plugins })` | `Block[]` → markdown | browser only |
 | `inline(md)` | inline markdown → inline HTML | anywhere |
 
@@ -101,14 +102,19 @@ export const importMarkdown = (text: string): StoredBlock[] => fromMarkdown(text
 
 What `fromMarkdown` reads:
 
-- headings, bulleted, numbered and to-do items, quotes, fenced code blocks with their language, dividers, and the inline marks above;
-- leading spaces as indentation (two spaces or one tab per level);
-- every non-empty line as its own block — it does not join wrapped lines into one paragraph, and it creates built-in blocks only (no tables, images or plugin blocks).
+- headings (also setext: a line underlined with `===` or `---`, and with closing `#`s), bulleted, numbered (with their start number) and to-do items, quotes (nested ones one level deeper), fenced code (backticks or tildes, any length, closed by a fence at least as long) and indented code, dividers, and the inline marks above;
+- list nesting by the items' markers: a line indented past an item's marker is inside the item (so `1. ` items nest with two, three or four spaces);
+- the lines of a paragraph, a list item or a quote as one block, with line breaks between them; a blank line, or `>` alone in a quote, starts a new one;
+- reference links (`[text][id]` with `[id]: url`) resolved, footnote definitions as a paragraph after their number;
+- a GFM table as a block of the first of `plugins` that takes tables (`fromTable`, see [Writing plugins](writing-plugins.md#taking-pasted-tables); the bundled `table` does), otherwise as text. The editor passes the plugins it offers, so a pasted table becomes a table block.
+
+What `fromHtml` reads — the editor uses it for a formatted paste from a web page, Google Docs or Word: headings, paragraphs, lists (nested, numbered with their start, to-dos from checkboxes), quotes, code (`pre`, with a `language-…` class), rules, tables (for a plugin that takes them), and the inline marks — also Google Docs' bold, italic and struck-through spans. Images become links (the package has no images), and scripts, styles and form controls are dropped. The HTML is only read: it goes through markdown and the same safe rendering as everything else.
 
 What `toMarkdown` writes:
 
-- consecutive list items on consecutive lines, every other block separated by a blank line;
-- list items and paragraphs indented by two spaces per level;
+- consecutive list items on consecutive lines, consecutive quotes as one quote (`>` between their paragraphs), every other block separated by a blank line;
+- nested items, and paragraphs and code under an item, indented to the item's content (two spaces under `- `, three under `1. `, four under `10. `);
+- code in a fence longer than any backtick run in it, and plain text escaped where markdown would read it as markup (`\_`, `1\.` at a line's start…);
 - a plugin block through its plugin's `markdown(props, { inner })`, where `inner` is its nested blocks already converted; a plugin without a markdown form, or one returning `''`, is left out.
 
 Writing a markdown form for your own plugin is covered in [Writing plugins](writing-plugins.md#markdown-form).

package/docs/en/editor-and-preview.md

@@ -6,11 +6,11 @@
 
 | Prop | Type | Default | Meaning |
 |---|---|---|---|
-| `value` | `StoredBlock[]` (bindable) | `[]` | The document. Written back on every change; a document replaced from outside is loaded again. |
+| `value` | `StoredBlock[]` (bindable) | `[]` | The document. Written back on every change (unchanged blocks keep their objects); a document replaced from outside — a new array, not one changed in place — is loaded again, unless it equals the current one. |
 | `plugins` | `BlockPlugin[]` | `[]` | The plugin blocks this editor can show and offer. |
 | `palette` | `string[]` | every built-in block, then every plugin | The block types the slash menu offers, in this order (see below). |
 | `messages` | `Messages` | — | UI text in the host's language: English text → translation. |
-| `readonly` | `boolean` | `false` | Shows the document without editing; plugin fields are hidden. |
+| `readonly` | `boolean` | `false` | Shows the document without editing; plugin fields are hidden. A read-only editor never writes `value`. |
 | `placeholder` | `string` | `Write something, or press '/' for blocks…` | The hint of an empty block. |
 | `nested` | `boolean` | `false` | Set by plugins with nested blocks for their inner editor; a host never sets it. |
 
@@ -23,7 +23,6 @@ An empty document is shown as one empty paragraph, so the value the editor write
 | `blocks` | `StoredBlock[]` | — | The document to render. |
 | `plugins` | `BlockPlugin[]` | — | The plugins whose previews render the plugin blocks. |
 | `messages` | `Messages` | — | UI text in the host's language. |
-| `markGated` | `boolean` | `true` | Marks the blocks after a gate block (see [Unique and gate blocks](writing-plugins.md#unique-and-gate-blocks)). |
 | `nested` | `boolean` | `false` | Set by plugin previews that render their nested blocks. |
 
 The preview renders built-in blocks as plain HTML (`p`, `h1`…`h6`, `ul`/`ol` with nested items, `blockquote`, `pre > code` with a `language-<lang>` class, `hr`) and each plugin block with its plugin's `preview`. A block whose type has no plugin in `plugins`, or whose plugin has no `preview`, is not rendered.
@@ -72,10 +71,10 @@ A plain paragraph (`md:p`) is always allowed as the fallback.
 | Inline formatting | Select text for the toolbar, or `Ctrl/Cmd` + `B` bold, `I` italic, `U` underline, `Shift+X` strikethrough, `E` code, `K` link, `\` remove formatting. Subscript and superscript are on the toolbar. |
 | Indent | `Tab` / `Shift+Tab` (at most 6 levels). |
 | Line break | `Shift+Enter`; in a code block `Enter` breaks the line and `Shift+Enter` or `Ctrl/Cmd+Enter` starts a new block. |
-| Select blocks | Click a block's handle, `Esc` in a block, `Shift+↑/↓` past the edge of a block, or drag a text selection across blocks. `Ctrl/Cmd+A` in an empty block selects every block. |
-| Move blocks | Drag the handle (also into and out of nested editors), or `Ctrl/Cmd+Shift+↑/↓`. |
-| Turn into | Click the handle of a block or a selection for the Turn-into menu. |
-| Copy, cut | Copying selected blocks puts their markdown on the clipboard (plugin blocks through their markdown form). |
+| Select blocks | Click (or tap) a block's handle, `Esc` in a block, `Shift+↑/↓` past the edge of a block, or drag a text selection across blocks. `Ctrl/Cmd+A` in an empty block selects every block. |
+| Move blocks | Drag the handle (also into and out of nested editors), `Ctrl/Cmd+Shift+↑/↓`, or *Move up* / *Move down* in the Turn-into menu (without dragging: touch screens, keyboard). |
+| Turn into | Click the handle of a block or a selection for the Turn-into menu; from the keyboard `/` (or `Ctrl/Cmd+/`, the menu key, `Shift+F10`) on selected blocks, or `Ctrl/Cmd+/` in a block's text. On a touch screen a tapped block shows its actions (add below, turn into, delete) beside its handle. |
+| Copy, cut, paste | Copying selected blocks puts their markdown on the clipboard (plugin blocks through their markdown form) and, beside it, the blocks themselves (`application/x-brickee+json`). Formatted text from elsewhere (a web page, Google Docs, Word) keeps its headings, lists, tables and marks (`fromHtml`); plain text is read as markdown. Pasted into a Brickee editor, copied blocks come back as they were; a plugin block that editor does not offer (or a second unique one) falls back to its markdown form. Pasted anywhere else, the markdown arrives. Pasting while blocks are selected puts the blocks after them. |
 | Paste | Multi-line text is read as markdown and becomes blocks. |
 | Undo, redo | `Ctrl/Cmd+Z`, `Ctrl/Cmd+Shift+Z` or `Ctrl/Cmd+Y`. |
 

package/docs/en/getting-started.md

@@ -33,6 +33,14 @@ bun add @atom-forge/brickee @atom-forge/ui @lucide/svelte
 The block fields and popups are `@atom-forge/ui` components, so the application must be set up the way `@atom-forge/ui` requires:
 
 - Tailwind CSS 4 with the `@atom-forge/ui` theme CSS imported and its `dist` folder added as a Tailwind `@source`;
+- the `dist` folder of `@atom-forge/brickee` added as a Tailwind `@source` too: the editor is styled with Tailwind classes and the `@atom-forge/ui` theme's colours, so Tailwind has to see them:
+
+  ```css
+  @source "../node_modules/@atom-forge/ui/dist";
+  @source "../node_modules/@atom-forge/brickee/dist";
+  ```
+
+  The preview needs neither: its few styles travel with its markup, so a public page without Tailwind can show documents;
 - the application rendered beneath the `@atom-forge/ui` `Root` component, which provides the theme and the overlay contexts.
 
 The top-level `Editor` creates its own popup manager and renders its own popup container; editors nested in plugin blocks share it.

package/docs/en/index.md

@@ -29,7 +29,7 @@ The editor itself knows nothing about your application. Whatever an app needs
 4. [Bundled plugins](bundled-plugins.md) — what `@atom-forge/brickee/plugins` contains, and how to override a preview or add fields.
 5. [Writing plugins](writing-plugins.md) — the `BlockPlugin` anatomy, fields, views and previews, containers, markdown forms, image blocks, and the kit.
 6. [Host contexts](host-contexts.md) — per-view values, code languages, and UI text.
-7. [On the server](server-side.md) — schema validation, plain text, and gated content.
+7. [On the server](server-side.md) — schema validation and plain text.
 8. [Recipes and pitfalls](recipes-and-pitfalls.md) — complete patterns and the mistakes to avoid.
 9. [Upgrading](upgrading.md) — what to change in your code when you move to a newer version.
 

package/docs/en/recipes-and-pitfalls.md

@@ -82,7 +82,7 @@ import { fromMarkdown, toStored, type StoredBlock } from '@atom-forge/brickee';
 export const fromText = (text: string): StoredBlock[] => fromMarkdown(text).map(toStored);
 ```
 
-Remember that every non-empty line becomes its own block.
+A paragraph's lines stay one block, with line breaks between them; a blank line starts a new block.
 
 ## Developing against a local copy
 
@@ -104,6 +104,7 @@ The application reads the package's built `dist/`, so rebuild the package after
 
 | Symptom | Cause | Fix |
 |---|---|---|
+| The editor's rows, menus or table look unstyled or shrunk | The `@atom-forge/brickee` `dist` folder is not a Tailwind `@source` | Add `@source "../node_modules/@atom-forge/brickee/dist";` beside the `@atom-forge/ui` one. |
 | Block fields and popups look unstyled | The `@atom-forge/ui` theme CSS or its Tailwind `@source` is missing | Set up `@atom-forge/ui` as its documentation describes and render the app beneath its `Root`. |
 | Block handles stick out on the left | The handles are drawn left of the editor's box | Give the element around the editor about 22 px of left padding. |
 | Popups do not open, or "context not found" errors with a linked package | Two copies of `svelte` or `@atom-forge/ui` | Add them to Vite's `resolve.dedupe`. |
@@ -114,7 +115,6 @@ The application reads the package's built `dist/`, so rebuild the package after
 | A box cannot be put inside another box | Nested editors go one level deep | Design containers to hold content blocks, not other containers. |
 | A block is not offered inside a container | Its `accepts` or the host `palette` leaves it out | Add the palette id to `accepts` (or use `'md:*'` for every built-in). |
 | A unique block appears twice | The schema does not enforce `unique` | Check it on the server if your application relies on it. |
-| Gated content visible to everyone | `gate` only marks the blocks | Cut the document on the server before rendering. |
 | `document is not defined` | `toMarkdown` or `toStored` ran during SSR | Call them in the browser only. |
 | A colour or link from props breaks the page | Props are user input | Use `safeColor`, check links, never use `{@html}` with props. |
 | Overridden plugin loses its blocks | Its `type` was changed | Keep `type` when spreading a plugin. |

package/docs/en/server-side.md

@@ -76,20 +76,3 @@ export const description = (doc: StoredBlock[]) => blocksToPlainText(doc).slice(
 ## Rendering
 
 `Preview` is an ordinary Svelte component and can be server-rendered; the core renderer and the bundled previews use no browser APIs. Only the markdown export path (`toMarkdown`, `toStored`) needs the browser.
-
-## Gated content
-
-A gate block (a plugin with `gate: true`, such as a supporters-only divider) only makes the preview mark the blocks after it. To keep the gated part from readers who may not see it, cut the document on the server before it reaches the page:
-
-```ts
-import type { StoredBlock } from '@atom-forge/brickee/model';
-
-/** The document up to and including the first gate block, for readers without access. */
-export function publicPart(doc: StoredBlock[], gateTypes: string[], canRead: boolean): StoredBlock[] {
-	if (canRead) return doc;
-	const at = doc.findIndex((b) => gateTypes.includes(b.type));
-	return at < 0 ? doc : doc.slice(0, at + 1);
-}
-```
-
-Call it with your gate plugin types (for example `['paywall']`) and the reader's access. Readers without access see the content up to the gate block and its teaser; readers with access get the whole document, and the preview marks the gated part for them.

package/docs/en/upgrading.md

@@ -6,6 +6,20 @@ This chapter lists the changes that may require action when you move to a newer
 
 Changes that need no action from you — new exports, fixes, documentation updates — are listed only in the changelog (`CHANGELOG.md`, shipped with the package).
 
+## From 0.0.2 to 0.0.3
+
+### The editor needs its `dist` folder as a Tailwind `@source`
+
+The editor's own styles moved from scoped CSS to Tailwind classes (with the `@atom-forge/ui` theme's colours) and SCSS. Tailwind 4 does not look into `node_modules`, so without a `@source` for the package the editor's rows, menus, fields bar and table lose their look. The preview is unaffected: its styles still travel with its markup.
+
+**What to do:** in the CSS file where you set up `@atom-forge/ui`, add `@source "../node_modules/@atom-forge/brickee/dist";` (with the path from that file) beside the `@atom-forge/ui` one. Nothing changes for pages that only show the `Preview`.
+
+### Gate blocks are gone
+
+Gating content (a supporters-only or paywall divider) is an application's concept, not the editor's. `BlockPlugin.gate`, the `Preview`'s `markGated` prop, its "For supporters only" section with the `.supporters` and `.supporters-label` classes, and the `For supporters only` text of the Hungarian locale are removed. The `Preview` now renders every block it gets. `unique` stays.
+
+**What to do:** remove `gate: true` from your plugin and `markGated` from your previews. Your divider stays an ordinary (unique) plugin block, so stored documents still load. Where you showed the gated part marked, render the document in two parts yourself — `const at = doc.findIndex((b) => b.type === 'divider')`, then `doc.slice(0, at + 1)` and `doc.slice(at + 1)` in two `<Preview>`s inside your own markup — and keep cutting the gated part for readers without access before it reaches the page. Add your own translation for any label you show.
+
 ## From 0.0.1 to 0.0.2
 
 ### Images and media are no longer part of the package

package/docs/en/writing-plugins.md

@@ -21,7 +21,6 @@ A plugin is a `BlockPlugin` object plus two Svelte components: a **view** for th
 | `accepts` | `string[]` | A container's allowed nested blocks, as palette ids; `'md:*'` is every built-in block. Default: everything the host offers. |
 | `markdown` | `(props: P, ctx: MarkdownContext) => string` | Its markdown form (optional). |
 | `unique` | `boolean` | At most one per document, top level only. |
-| `gate` | `boolean` | The blocks after it are gated; the preview marks them. |
 
 `P` is the props type of the plugin; declare it as an interface extending `Record<string, unknown>`.
 
@@ -261,16 +260,9 @@ How nesting works:
 - Wrapping blocks into a container from the Turn-into menu, and turning a container into another, is offered only when the container accepts every block going in.
 - `blocksSchemaFor(plugins)` checks `accepts` on the server (see [On the server](server-side.md)).
 
-## Unique and gate blocks
+## Unique blocks
 
-- **`unique: true`** — at most one per document, at the top level. Once the document has one, the plugin leaves the slash and Turn-into menus; nested editors never offer it.
-- **`gate: true`** — the blocks after the first top-level gate block are gated. The `Preview` renders them inside a section marked "For supporters only" with a dashed line; `markGated={false}` turns the marking off. Nested previews never split.
-
-A supporters-only divider is a typical example of both: one per document, with the gated content behind it.
-
-> **Gating only marks**
->
-> `gate` does not hide anything: the preview still renders every block, and the stored document still holds them. Deciding who may read the gated part — and leaving it out of the page for everyone else — is the host's job, on the server (see [Gated content](server-side.md#gated-content)). `unique` is not enforced by the schema either.
+**`unique: true`** — at most one per document, at the top level (a table of contents, for example). Once the document has one, the plugin leaves the slash and Turn-into menus, a second one pasted in falls back to its markdown form, and nested editors never offer it. The schema does not enforce it.
 
 ## Markdown form
 
@@ -284,6 +276,40 @@ Return `''` to leave the block out. Plugins whose output has no meaning as text
 | `mdJoin(...parts)` | Joins parts as separate blocks (blank line between), leaving out empty and falsy ones. |
 | `mdQuote(md)` | Prefixes every line with `> `, for a box rendered as a blockquote. |
 
+## Taking pasted tables
+
+When markdown with a GFM table is pasted into the editor, or imported with `fromMarkdown(text, { plugins })`, the table goes to the first plugin that has `fromTable`. It gets the table and returns the new block's props:
+
+```ts
+interface MarkdownTable {
+	rows: string[][]; // the cells as inline markdown, row by row; the first row is the header
+	align: ('left' | 'center' | 'right')[]; // per column, from the delimiter row (:--, :-:, --:)
+}
+
+fromTable?(table: MarkdownTable): P;
+```
+
+The bundled `table` has it (`fromTable: ({ rows, align }) => ({ rows, heads: ['top'], align })`), so a table pasted into an editor that offers it becomes a table block. Without such a plugin the table stays text.
+
+## Taking files
+
+When files are pasted into the editor (a copied image, a screenshot) or dropped on it from outside the page, the first plugin the editor offers that has `fromFiles` and returns props gets one block of its own:
+
+```ts
+fromFiles?(files: File[]): P | null | Promise<P | null>;
+```
+
+Return `null` to leave the files to the next plugin. Uploading and storing them is the plugin's business, so it may return a promise — upload, then return the props with the stored URL or id. A pasted file goes after the block with the caret (or in place of an empty one); a dropped one where the drop line shows.
+
+```ts
+fromFiles: async (files) => {
+	const file = files.find((f) => f.type.startsWith('image/'));
+	if (!file) return null;
+	const url = await uploadToMyStorage(file); // your app's upload
+	return { url, alt: file.name };
+},
+```
+
 ## Images
 
 The editor has no notion of images: no image field, no picker, no list of media. Whether a block stores an image's URL or the id of an image in the app's own media library, how the user picks it, and how the stored value becomes an address are the application's decisions, so an image block is an ordinary plugin of the app.

package/docs/hu/bundled-plugins.md

@@ -13,7 +13,7 @@ import { table, youtube } from '@atom-forge/brickee/plugins'; // vagy néhány
 
 | Export | `type` | Mezők | Markdown alak | Mi ez |
 |---|---|---|---|---|
-| `table` | `table` | fejléc és lábléc (a cellák helyben szerkeszthetők) | GFM-táblázat | Inline formázott cellák sorai és oszlopai; egy cellába kattintva megjelennek a sora és oszlopa eszközei (beszúrás, törlés, igazítás), a sorokat és az oszlopokat a fogantyújuknál fogva húzhatod. Az első sor lehet fejléc, az utolsó lábléc. |
+| `table` | `table` | fejléc és lábléc (a cellák helyben szerkeszthetők) | GFM-táblázat (egy beillesztett GFM-táblázatból ilyen lesz) | Inline formázott cellák sorai és oszlopai; egy cellába kattintva megjelennek a sora és oszlopa eszközei (beszúrás, törlés, igazítás), a sorokat és az oszlopokat a fogantyújuknál fogva húzhatod. A cella formázottan mutatja a szövegét; szerkesztéskor a markdown látszik, és a `Ctrl/Cmd` + `B`, `I`, `E`, `Shift+X`, `K` jelöli a kijelölt szöveget. Az első sor lehet fejléc, az utolsó lábléc. |
 | `youtube` | `youtube` | videóhivatkozás vagy -azonosító, cím | hivatkozás | YouTube-videó, kattintásra betöltve; bármely YouTube-hivatkozásból csak a videó azonosítója marad meg. |
 | `map` | `map` | hely vagy cím, nagyításcsúszka | hivatkozás | Egy hely vagy cím beágyazott Google Maps-térképe. |
 | `gap` | `gap` | magasságcsúszka | nincs | Üres hely a blokkok között, 1–8 sor magas. |

package/docs/hu/documents-and-markdown.md

@@ -46,13 +46,13 @@ Egy rövid dokumentum egy bekezdéssel, egy listával, egy videóval és egy dob
 | `md:p` | inline markdown | — | maga a szöveg |
 | `md:h1` … `md:h6` | inline markdown | — | `#` … `######` |
 | `md:ul` | inline markdown | — | `- item` |
-| `md:ol` | inline markdown | — | `1. item` (sorozatonként és behúzási szintenként számozva) |
+| `md:ol` | inline markdown | `{ start?: number }` a lista első elemén | `1. item` (sorozatonként és behúzási szintenként számozva, megadott `start`-tól) |
 | `md:todo` | inline markdown | `{ checked: boolean }` | `- [x] item` |
 | `md:quote` | inline markdown | — | `> quote` |
 | `md:code` | nyers szöveg | `{ lang?: string }` | kerített blokk a nyelvvel |
 | `md:hr` | — | — | `---` |
 
-Az `indent` egymásba ágyazza a listaelemeket (az egymást követő lista-blokkokból az előnézetben helyesen egymásba ágyazott `ul`/`ol` elemek lesznek), a bekezdéseket és az idézeteket pedig behúzza. A címsorok, a kódblokkok és az elválasztók figyelmen kívül hagyják.
+Az `indent` egymásba ágyazza a listaelemeket (az egymást követő lista-blokkokból az előnézetben helyesen egymásba ágyazott `ul`/`ol` elemek lesznek), a bekezdéseket és a kódblokkokat egy listaelem alá teszi, az idézeteket pedig egymásba ágyazza (`> > …`). A címsorok és az elválasztók figyelmen kívül hagyják.
 
 ### Inline markdown
 
@@ -60,15 +60,15 @@ A beépített blokkok szövege a markdown egy kicsi, biztonságos részhalmaza:
 
 | Jelölés | Tárolt alak |
 |---|---|
-| félkövér | `**text**` |
-| dőlt | `*text*` |
+| félkövér | `**text**` (beolvasva a `__text__` is) |
+| dőlt | `*text*` (beolvasva a `_text_` is, szón belül nem) |
 | aláhúzott, alsó index, felső index | `<u>text</u>`, `<sub>text</sub>`, `<sup>text</sup>` |
 | áthúzott | `~~text~~` |
-| kód | `` `text` `` |
-| hivatkozás | `[text](url)` – csak a `http:`, `https:`, `mailto:`, `tel:` és a webhelyen belüli `/…` célok lesznek hivatkozások |
-| sortörés | egy újsor karakter |
+| kód | `` `text` `` (hosszabb backtick-sorozattal, ha a kód backticket tartalmaz: ``` `` a`b `` ```) |
+| hivatkozás | `[text](url)` – csak a `http:`, `https:`, `mailto:`, `tel:` és a webhelyen belüli `/…` célok lesznek hivatkozások; a célban a zárójeleknek párosnak kell lenniük. Beolvasva a cím (elhagyva), a `<https://…>` autolink és a kép (`![alt](url)`) hivatkozásként is |
+| sortörés | egy újsor karakter (markdown-kimenetben: visszaperjel a sor végén) |
 
-Az egyszerű szövegben a speciális karakterek visszaperjeles escape-elést kapnak, így soha nem válnak jelöléssé. Az `inline(md)` az inline markdownt HTML-lé alakítja: előbb escape-eli a szöveget, és csak utána teszi hozzá a fenti tageket, így a kimenete biztonságosan megjeleníthető `{@html}`-lel – az előnézet is így tesz.
+Az egyszerű szövegben a speciális karakterek visszaperjeles escape-elést kapnak, így soha nem válnak jelöléssé; bármely ASCII írásjel escape-elhető. A beolvasás bármilyen bemeneten lineáris időben fut, ezekkel a korlátokkal: egy jelölt szakasz legfeljebb 2000 karakter, egy link címkéjében nem lehet saját szögletes zárójel, és legfeljebb 1000 karakter, egy link célja legfeljebb 2000. Beolvasáskor az inline HTML a jelölésekre képeződik le (`<strong>`, `<em>`, `<del>`, `<br>`…), a többi tag elmarad (a szövege megmarad), a `[^1]` lábjegyzet-hivatkozásból pedig felső index lesz. Az `inline(md)` az inline markdownt HTML-lé alakítja: előbb escape-eli a szöveget, és csak utána teszi hozzá a fenti tageket, így a kimenete biztonságosan megjeleníthető `{@html}`-lel – az előnézet is így tesz.
 
 ## Markdown be és ki
 
@@ -78,7 +78,8 @@ A markdown teljes értékű formátum: a vágólap ezt hordozza, és a befogadó
 |---|---|---|
 | `fromStored(block)` | `StoredBlock` → `Block` | bárhol |
 | `toStored(block)` | `Block` → `StoredBlock` | csak böngészőben |
-| `fromMarkdown(text)` | markdown → `Block[]` | bárhol |
+| `fromMarkdown(text, { plugins })` | markdown → `Block[]` | bárhol |
+| `fromHtml(html, { plugins })` | HTML (formázott beillesztés, egy oldal) → `Block[]` | csak böngészőben |
 | `toMarkdown(blocks, { plugins })` | `Block[]` → markdown | csak böngészőben |
 | `inline(md)` | inline markdown → inline HTML | bárhol |
 
@@ -101,14 +102,19 @@ export const importMarkdown = (text: string): StoredBlock[] => fromMarkdown(text
 
 Amit a `fromMarkdown` beolvas:
 
-- címsorok, felsorolás-, számozott és teendő-elemek, idézetek, kerített kódblokkok a nyelvükkel, elválasztók és a fenti inline jelölések;
-- a sor eleji szóközök behúzásként (szintenként két szóköz vagy egy tabulátor);
-- minden nem üres sor külön blokként – a tördelt sorokat nem vonja össze egy bekezdéssé, és csak beépített blokkokat hoz létre (táblázatot, képet vagy plugin-blokkot nem).
+- címsorok (setext alakban is: `===`-vel vagy `---`-val aláhúzott sor, és záró `#`-ekkel), felsorolás-, számozott (a kezdőszámukkal) és teendő-elemek, idézetek (a beágyazottak egy szinttel mélyebben), kerített kód (backtick vagy tilde, tetszőleges hosszal, legalább ugyanilyen hosszú kerítés zárja) és behúzott kód, elválasztók és a fenti inline jelölések;
+- a listák egymásba ágyazását az elemek jelölői szerint: az a sor, amely beljebb kezdődik egy elem jelölőjénél, az elemen belül van (így a `1. ` elemek alá két, három vagy négy szóközzel is lehet ágyazni);
+- egy bekezdés, listaelem vagy idézet sorait egy blokként, köztük sortöréssel; üres sor, idézetben a magában álló `>` új blokkot kezd;
+- a hivatkozásos linkeket (`[text][id]` és `[id]: url`) feloldva, a lábjegyzet-definíciókat a számuk utáni bekezdésként;
+- a GFM-táblázatot a `plugins` közül az első olyan plugin blokkjaként, amelyik fogad táblázatot (`fromTable`, lásd [Pluginok írása](writing-plugins.md#beillesztett-táblázatok-fogadása); a beépített `table` ilyen), különben szövegként. A szerkesztő átadja a felkínált pluginjait, így egy beillesztett táblázatból táblázat blokk lesz.
+
+Amit a `fromHtml` beolvas – a szerkesztő ezt használja weboldalról, Google Docsból vagy Wordből érkező formázott beillesztéshez: címsorok, bekezdések, listák (beágyazva, a számozottak a kezdőszámukkal, a teendők a jelölőnégyzetekből), idézetek, kód (`pre`, `language-…` osztállyal), elválasztók, táblázatok (egy azt fogadó pluginnak) és az inline jelölések – a Google Docs félkövér, dőlt és áthúzott spanjei is. A képekből link lesz (a csomagban nincs képfogalom), a scriptek, stílusok és űrlapelemek kimaradnak. A HTML-t csak olvassa: markdownon és ugyanazon a biztonságos megjelenítésen megy át, mint minden más.
 
 Amit a `toMarkdown` kiír:
 
-- az egymást követő listaelemeket egymást követő sorokba, minden más blokkot üres sorral elválasztva;
-- a listaelemeket és a bekezdéseket szintenként két szóközzel behúzva;
+- az egymást követő listaelemeket egymást követő sorokba, az egymást követő idézeteket egyetlen idézetként (bekezdéseik között `>`), minden más blokkot üres sorral elválasztva;
+- a beágyazott elemeket, valamint egy elem alatti bekezdéseket és kódot az elem tartalmáig behúzva (`- ` alatt két, `1. ` alatt három, `10. ` alatt négy szóközzel);
+- a kódot minden benne lévő backtick-sorozatnál hosszabb kerítésben, az egyszerű szöveget pedig ott escape-elve, ahol a markdown jelölésnek olvasná (`\_`, sor elején `1\.`…);
 - a plugin-blokkot a pluginja `markdown(props, { inner })` függvényével, ahol az `inner` a már átalakított beágyazott blokkjai; a markdown alak nélküli plugin, illetve az, amelyik `''`-t ad vissza, kimarad.
 
 Saját pluginod markdown alakjának megírásáról a [Pluginok írása](writing-plugins.md#markdown-alak) fejezet szól.