@atom-forge/brickee 0.0.2 → 0.0.3

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

@@ -6,11 +6,11 @@
 
 | Prop | Típus | Alapérték | Jelentés |
 |---|---|---|---|
-| `value` | `StoredBlock[]` (bindable) | `[]` | A dokumentum. Minden változáskor visszaíródik; a kívülről lecserélt dokumentum újra betöltődik. |
+| `value` | `StoredBlock[]` (bindable) | `[]` | A dokumentum. Minden változáskor visszaíródik (a változatlan blokkok megtartják az objektumukat); a kívülről lecserélt dokumentum – új tömb, nem helyben módosított – újra betöltődik, hacsak nem egyezik a mostanival. |
 | `plugins` | `BlockPlugin[]` | `[]` | A pluginblokkok, amelyeket ez a szerkesztő megjeleníthet és felkínálhat. |
 | `palette` | `string[]` | minden beépített blokk, utána minden plugin | A perjeles menü által felkínált blokktípusok, ebben a sorrendben (lásd lent). |
 | `messages` | `Messages` | — | Felületi szövegek az alkalmazás nyelvén: angol szöveg → fordítás. |
-| `readonly` | `boolean` | `false` | Szerkesztés nélkül mutatja a dokumentumot; a pluginmezők rejtve vannak. |
+| `readonly` | `boolean` | `false` | Szerkesztés nélkül mutatja a dokumentumot; a pluginmezők rejtve vannak. Az írásvédett szerkesztő soha nem írja a `value`-t. |
 | `placeholder` | `string` | `Write something, or press '/' for blocks…` | Az üres blokk tippszövege. |
 | `nested` | `boolean` | `false` | A beágyazott blokkokat tartalmazó pluginok állítják be a belső szerkesztőjükön; a befogadó alkalmazás soha nem állítja be. |
 
@@ -23,7 +23,6 @@ Az üres dokumentum egyetlen üres bekezdésként jelenik meg, így a szerkeszt
 | `blocks` | `StoredBlock[]` | — | A megjelenítendő dokumentum. |
 | `plugins` | `BlockPlugin[]` | — | A pluginok, amelyek előnézetei a pluginblokkokat renderelik. |
 | `messages` | `Messages` | — | Felületi szövegek az alkalmazás nyelvén. |
-| `markGated` | `boolean` | `true` | Megjelöli a kapus blokk utáni blokkokat (lásd [Egyedi és kapus blokkok](writing-plugins.md#egyedi-és-kapus-blokkok)). |
 | `nested` | `boolean` | `false` | A beágyazott blokkjaikat renderelő plugin-előnézetek állítják be. |
 
 Az előnézet a beépített blokkokat sima HTML-ként rendereli (`p`, `h1`…`h6`, `ul`/`ol` beágyazott elemekkel, `blockquote`, `pre > code` `language-<lang>` osztállyal, `hr`), a pluginblokkokat pedig a pluginjuk `preview` komponensével. Az a blokk, amelynek típusához nincs plugin a `plugins` listában, vagy amelynek pluginjának nincs `preview`-ja, nem renderelődik.
@@ -72,10 +71,10 @@ A `PALETTE_ITEMS` a beépített blokkokat sorolja fel a címkéikkel, tippjeikke
 | Szövegformázás | Jelölj ki szöveget az eszköztárhoz, vagy `Ctrl/Cmd` + `B` félkövér, `I` dőlt, `U` aláhúzott, `Shift+X` áthúzott, `E` kód, `K` link, `\` formázás eltávolítása. Az alsó és a felső index az eszköztáron érhető el. |
 | Behúzás | `Tab` / `Shift+Tab` (legfeljebb 6 szint). |
 | Sortörés | `Shift+Enter`; kódblokkban az `Enter` töri a sort, a `Shift+Enter` vagy a `Ctrl/Cmd+Enter` pedig új blokkot kezd. |
-| Blokkok kijelölése | Kattints egy blokk fogantyújára, nyomj `Esc`-et egy blokkban, `Shift+↑/↓` a blokk szélén túl, vagy húzz szövegkijelölést több blokkon át. Üres blokkban a `Ctrl/Cmd+A` minden blokkot kijelöl. |
-| Blokkok mozgatása | Húzd a fogantyút (beágyazott szerkesztőkbe be és onnan ki is), vagy `Ctrl/Cmd+Shift+↑/↓`. |
-| Átalakítás | Kattints egy blokk vagy egy kijelölés fogantyújára az „Átalakítás” menühöz. |
-| Másolás, kivágás | A kijelölt blokkok másolásakor a markdownjuk kerül a vágólapra (a pluginblokkok a markdown alakjukon keresztül). |
+| Blokkok kijelölése | Kattints (vagy koppints) egy blokk fogantyújára, nyomj `Esc`-et egy blokkban, `Shift+↑/↓` a blokk szélén túl, vagy húzz szövegkijelölést több blokkon át. Üres blokkban a `Ctrl/Cmd+A` minden blokkot kijelöl. |
+| Blokkok mozgatása | Húzd a fogantyút (beágyazott szerkesztőkbe be és onnan ki is), `Ctrl/Cmd+Shift+↑/↓`, vagy az „Átalakítás” menü *Mozgatás fel* / *Mozgatás le* pontja (húzás nélkül: érintőképernyő, billentyűzet). |
+| Átalakítás | Kattints egy blokk vagy egy kijelölés fogantyújára az „Átalakítás” menühöz; billentyűzetről a kijelölt blokkokon `/` (vagy `Ctrl/Cmd+/`, a menübillentyű, `Shift+F10`), egy blokk szövegében `Ctrl/Cmd+/`. Érintőképernyőn a megkoppintott blokk a fogantyúja mellett mutatja a műveleteit (új blokk alá, átalakítás, törlés). |
+| Másolás, kivágás, beillesztés | A kijelölt blokkok másolásakor a markdownjuk kerül a vágólapra (a pluginblokkok a markdown alakjukon keresztül), mellé pedig maguk a blokkok is (`application/x-brickee+json`). Máshonnan (weboldal, Google Docs, Word) érkező formázott szöveg megtartja a címsorait, listáit, táblázatait és jelöléseit (`fromHtml`); a sima szöveget markdownként olvassa. Brickee-szerkesztőbe illesztve a másolt blokkok változatlanul jönnek vissza; az a pluginblokk, amelyet az a szerkesztő nem kínál fel (vagy egy második egyedi), a markdown alakjára esik vissza. Bárhová máshová illesztve a markdown érkezik. Blokk-kijelölés közben beillesztve a blokkok a kijelölés után kerülnek. |
 | Beillesztés | A többsoros szöveg markdownként értelmeződik, és blokkokká válik. |
 | Visszavonás, újra | `Ctrl/Cmd+Z`, `Ctrl/Cmd+Shift+Z` vagy `Ctrl/Cmd+Y`. |
 

package/docs/hu/getting-started.md

@@ -33,6 +33,14 @@ bun add @atom-forge/brickee @atom-forge/ui @lucide/svelte
 A blokkmezők és a felugró ablakok `@atom-forge/ui` komponensek, ezért az alkalmazást úgy kell beállítani, ahogy az `@atom-forge/ui` megköveteli:
 
 - Tailwind CSS 4, importált `@atom-forge/ui` téma-CSS-sel, a `dist` mappáját pedig add hozzá Tailwind `@source`-ként;
+- az `@atom-forge/brickee` `dist` mappája is legyen Tailwind `@source`: a szerkesztő Tailwind-osztályokkal és az `@atom-forge/ui` téma színeivel van stílusozva, ezért a Tailwindnek látnia kell őket:
+
+  ```css
+  @source "../node_modules/@atom-forge/ui/dist";
+  @source "../node_modules/@atom-forge/brickee/dist";
+  ```
+
+  Az előnézetnek egyik sem kell: a kevés stílusa a jelölésével együtt utazik, így Tailwind nélküli nyilvános oldal is mutathat dokumentumokat;
 - az alkalmazás az `@atom-forge/ui` `Root` komponense alatt renderelődjön, amely a témát és az overlay-kontextusokat biztosítja.
 
 A legfelső szintű `Editor` saját felugróablak-kezelőt hoz létre, és saját felugróablak-tárolót renderel; a pluginblokkokba ágyazott szerkesztők ezt használják közösen.

package/docs/hu/index.md

@@ -29,7 +29,7 @@ Maga a szerkesztő semmit sem tud az alkalmazásodról. Amire egy alkalmazásnak
 4. [Mellékelt pluginok](bundled-plugins.md) — mit tartalmaz az `@atom-forge/brickee/plugins`, és hogyan írhatsz felül egy előnézetet vagy adhatsz hozzá mezőket.
 5. [Pluginok írása](writing-plugins.md) — a `BlockPlugin` felépítése, mezők, nézetek és előnézetek, tárolók, markdown alakok, képblokkok és a kit.
 6. [Az alkalmazás kontextusai](host-contexts.md) — nézetenkénti értékek, kódnyelvek és felületi szövegek.
-7. [A szerveren](server-side.md) — sémavalidálás, sima szöveg és védett tartalom.
+7. [A szerveren](server-side.md) — sémavalidálás, sima szöveg.
 8. [Receptek és buktatók](recipes-and-pitfalls.md) — teljes minták és az elkerülendő hibák.
 9. [Frissítés](upgrading.md) — mit kell módosítanod a kódodban, amikor újabb verzióra váltasz.
 

package/docs/hu/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);
 ```
 
-Ne feledd, hogy minden nem üres sorból külön blokk lesz.
+Egy bekezdés sorai egy blokk maradnak, köztük sortöréssel; üres sor új blokkot kezd.
 
 ## Fejlesztés helyi másolattal
 
@@ -104,6 +104,7 @@ Az alkalmazás a csomag lefordított `dist/` mappáját olvassa, ezért minden v
 
 | Tünet | Ok | Megoldás |
 |---|---|---|
+| A szerkesztő sorai, menüi vagy táblázata stílus nélküliek vagy összezsugorodnak | Az `@atom-forge/brickee` `dist` mappája nem Tailwind `@source` | Vedd fel az `@source "../node_modules/@atom-forge/brickee/dist";` sort az `@atom-forge/ui`-é mellé. |
 | A blokkmezők és a popupok stílus nélkülinek tűnnek | Hiányzik az `@atom-forge/ui` téma CSS-e vagy a Tailwind `@source`-a | Állítsd be az `@atom-forge/ui`-t a dokumentációja szerint, és az alkalmazást a `Root`-ja alatt rendereld. |
 | A blokkfogantyúk balra kilógnak | A fogantyúk a szerkesztő dobozától balra jelennek meg | Adj a szerkesztőt körülvevő elemnek kb. 22 px bal oldali paddinget. |
 | A popupok nem nyílnak meg, vagy „context not found” hibák linkelt csomaggal | A `svelte` vagy az `@atom-forge/ui` két példányban van jelen | Vedd fel őket a Vite `resolve.dedupe` listájába. |
@@ -114,7 +115,6 @@ Az alkalmazás a csomag lefordított `dist/` mappáját olvassa, ezért minden v
 | Egy doboz nem tehető egy másik dobozba | A beágyazott szerkesztők egy szint mélyek | A tárolókat tartalomblokkok befogadására tervezd, ne más tárolókéra. |
 | Egy blokk nem érhető el egy tárolón belül | Az `accepts` vagy az alkalmazás `palette`-je kihagyja | Vedd fel a palettaazonosítót az `accepts`-be (vagy használd az `'md:*'`-ot az összes beépítetthez). |
 | Egy egyedi blokk kétszer jelenik meg | A séma nem kényszeríti ki a `unique`-ot | Ellenőrizd a szerveren, ha az alkalmazásod számít rá. |
-| A védett tartalom mindenkinek látszik | A `gate` csak megjelöli a blokkokat | Renderelés előtt vágd meg a dokumentumot a szerveren. |
 | `document is not defined` | A `toMarkdown` vagy a `toStored` SSR közben futott | Csak a böngészőben hívd őket. |
 | Egy propsból jövő szín vagy link elrontja az oldalt | A props felhasználói bemenet | Használd a `safeColor`-t, ellenőrizd a linkeket, és propsszal soha ne használj `{@html}`-t. |
 | Egy felülírt plugin elveszíti a blokkjait | Megváltozott a `type`-ja | Egy plugin szétterítésekor tartsd meg a `type`-ot. |

package/docs/hu/server-side.md

@@ -76,20 +76,3 @@ export const description = (doc: StoredBlock[]) => blocksToPlainText(doc).slice(
 ## Renderelés
 
 A `Preview` hagyományos Svelte-komponens, és szerveren is renderelhető; a mag renderelője és a mellékelt előnézetek nem használnak böngésző-API-kat. Csak a markdown-export útvonalnak (`toMarkdown`, `toStored`) kell a böngésző.
-
-## Védett tartalom
-
-Egy kapus blokk (egy `gate: true` beállítású plugin, például egy csak támogatóknak szóló elválasztó) csak annyit tesz, hogy az előnézet megjelöli az utána következő blokkokat. Hogy a védett részt elzárd azoktól az olvasóktól, akik nem láthatják, vágd el a dokumentumot a szerveren, mielőtt az oldalhoz érne:
-
-```ts
-import type { StoredBlock } from '@atom-forge/brickee/model';
-
-/** A dokumentum az első kapus blokkig, azt is beleértve, hozzáférés nélküli olvasóknak. */
-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);
-}
-```
-
-Hívd meg a kapus pluginjaid típusaival (például `['paywall']`) és az olvasó hozzáférésével. A hozzáférés nélküli olvasók a kapus blokkig látják a tartalmat, az előzetesével együtt; a hozzáféréssel rendelkezők a teljes dokumentumot kapják, és az előnézet megjelöli számukra a védett részt.

package/docs/hu/upgrading.md

@@ -6,6 +6,20 @@ Ez a fejezet azokat a változásokat sorolja fel, amelyek teendőt igényelhetne
 
 A tőled semmit nem igénylő változások – új exportok, javítások, dokumentációfrissítések – csak a változásnaplóban (`CHANGELOG.md`, a csomaggal együtt szállítva) szerepelnek.
 
+## A 0.0.2-ről a 0.0.3-ra
+
+### A szerkesztő `dist` mappájának Tailwind `@source`-nak kell lennie
+
+A szerkesztő saját stílusai scoped CSS-ből Tailwind-osztályokba (az `@atom-forge/ui` téma színeivel) és SCSS-be kerültek. A Tailwind 4 nem néz bele a `node_modules`-ba, így a csomagra mutató `@source` nélkül a szerkesztő sorai, menüi, mezősávja és táblázata elveszítik a kinézetüket. Az előnézetet ez nem érinti: a stílusai továbbra is a jelölésével utaznak.
+
+**Teendő:** abban a CSS-fájlban, ahol az `@atom-forge/ui`-t beállítod, vedd fel az `@source "../node_modules/@atom-forge/brickee/dist";` sort (az attól a fájltól vett útvonallal) az `@atom-forge/ui`-é mellé. A csak `Preview`-t mutató oldalakon nincs teendő.
+
+### A kapus blokkok megszűntek
+
+A tartalom védése (támogatói vagy fizetőfalas elválasztó) az alkalmazás fogalma, nem a szerkesztőé. Kikerült a `BlockPlugin.gate`, a `Preview` `markGated` propja, a „For supporters only” szakasza a `.supporters` és `.supporters-label` osztályokkal, valamint a magyar fordítás `For supporters only` szövege. A `Preview` mostantól minden kapott blokkot renderel. A `unique` marad.
+
+**Teendő:** töröld a `gate: true`-t a pluginodból és a `markGated`-et az előnézeteidből. Az elválasztód közönséges (egyedi) pluginblokk marad, így a tárolt dokumentumok továbbra is betöltődnek. Ahol a védett részt megjelölve mutattad, rendereld a dokumentumot magad két részben – `const at = doc.findIndex((b) => b.type === 'divider')`, majd `doc.slice(0, at + 1)` és `doc.slice(at + 1)` két `<Preview>`-ban, a saját jelölésedben –, és a hozzáférés nélküli olvasóknak továbbra is vágd le a védett részt, mielőtt az oldalra kerül. Az általad mutatott feliratokhoz adj saját fordítást.
+
 ## A 0.0.1-ről a 0.0.2-re
 
 ### A képek és a média már nem részei a csomagnak

package/docs/hu/writing-plugins.md

@@ -21,7 +21,6 @@ Egy plugin egy `BlockPlugin` objektum és két Svelte-komponens: egy **nézet**
 | `accepts` | `string[]` | Egy tároló blokk megengedett beágyazott blokkjai, palettaazonosítókként; az `'md:*'` az összes beépített blokk. Alapértelmezés: minden, amit az alkalmazás kínál. |
 | `markdown` | `(props: P, ctx: MarkdownContext) => string` | A markdown alakja (opcionális). |
 | `unique` | `boolean` | Dokumentumonként legfeljebb egy, csak a legfelső szinten. |
-| `gate` | `boolean` | Az utána következő blokkok védettek; az előnézet megjelöli őket. |
 
 A `P` a plugin props-típusa; `Record<string, unknown>`-t kiterjesztő interfészként deklaráld.
 
@@ -261,16 +260,9 @@ Hogyan működik a beágyazás:
 - Blokkok tárolóba csomagolását az „Átalakítás” menüből, illetve egy tároló másikká alakítását csak akkor kínálja fel, ha a tároló minden bekerülő blokkot elfogad.
 - A `blocksSchemaFor(plugins)` a szerveren ellenőrzi az `accepts`-et (lásd [A szerveren](server-side.md)).
 
-## Egyedi és kapus blokkok
+## Egyedi blokkok
 
-- **`unique: true`** — dokumentumonként legfeljebb egy, a legfelső szinten. Amint a dokumentumban van egy, a plugin eltűnik a perjeles és az „Átalakítás” menüből; beágyazott szerkesztő soha nem kínálja.
-- **`gate: true`** — az első legfelső szintű kapus blokk utáni blokkok védettek. A `Preview` egy „For supporters only” jelölésű, szaggatott vonallal elválasztott szakaszban rendereli őket; a `markGated={false}` kikapcsolja a jelölést. A beágyazott előnézetek soha nem osztódnak ketté.
-
-Mindkettőre tipikus példa egy csak támogatóknak szóló elválasztó: dokumentumonként egy, mögötte a védett tartalommal.
-
-> **A kapu csak jelöl**
->
-> A `gate` semmit sem rejt el: az előnézet továbbra is minden blokkot renderel, és a tárolt dokumentum is mindet tartalmazza. Annak eldöntése, hogy ki olvashatja a védett részt — és hogy mindenki más elől kimaradjon az oldalról —, az alkalmazás feladata, a szerveren (lásd [Védett tartalom](server-side.md#védett-tartalom)). A `unique`-ot a séma sem kényszeríti ki.
+**`unique: true`** — dokumentumonként legfeljebb egy, a legfelső szinten (például egy tartalomjegyzék). Amint a dokumentumban van egy, a plugin eltűnik a perjeles és az „Átalakítás” menüből, a beillesztett második példány a markdown alakjára esik vissza, és beágyazott szerkesztő soha nem kínálja. A séma nem kényszeríti ki.
 
 ## Markdown alak
 
@@ -284,6 +276,40 @@ A `markdown(props, { inner })` markdownként adja vissza a blokkot; ezt használ
 | `mdJoin(...parts)` | Különálló blokkokként fűzi össze a részeket (köztük üres sorral), kihagyva az üreseket és a hamis értékűeket. |
 | `mdQuote(md)` | Minden sor elé `> `-t tesz, idézetblokként renderelt dobozhoz. |
 
+## Beillesztett táblázatok fogadása
+
+Ha GFM-táblázatot tartalmazó markdownt illesztenek be a szerkesztőbe, vagy a `fromMarkdown(text, { plugins })` olvassa be, a táblázatot az első olyan plugin kapja, amelynek van `fromTable` függvénye. Megkapja a táblázatot, és visszaadja az új blokk propjait:
+
+```ts
+interface MarkdownTable {
+	rows: string[][]; // a cellák inline markdownként, soronként; az első sor a fejléc
+	align: ('left' | 'center' | 'right')[]; // oszloponként, az elválasztó sorból (:--, :-:, --:)
+}
+
+fromTable?(table: MarkdownTable): P;
+```
+
+A beépített `table` pluginnak van ilyen (`fromTable: ({ rows, align }) => ({ rows, heads: ['top'], align })`), így egy olyan szerkesztőbe beillesztett táblázat, amely felkínálja, táblázat blokk lesz. Ilyen plugin nélkül a táblázat szöveg marad.
+
+## Fájlok fogadása
+
+Ha fájlokat illesztenek be a szerkesztőbe (egy kimásolt kép, egy képernyőkép), vagy az oldalon kívülről dobnak rá, a szerkesztő által felkínált pluginok közül az első, amelynek van `fromFiles` függvénye és propokat ad vissza, kap egy saját blokkot:
+
+```ts
+fromFiles?(files: File[]): P | null | Promise<P | null>;
+```
+
+`null`-lal a következő pluginra hagyja a fájlokat. A feltöltés és a tárolás a plugin dolga, ezért visszaadhat promise-t is – feltölt, majd a tárolt URL-lel vagy azonosítóval adja vissza a propokat. A beillesztett fájl a kurzort tartalmazó blokk után kerül (vagy egy üres blokk helyére), a bedobott oda, ahol a húzásjelző vonal mutatja.
+
+```ts
+fromFiles: async (files) => {
+	const file = files.find((f) => f.type.startsWith('image/'));
+	if (!file) return null;
+	const url = await uploadToMyStorage(file); // az alkalmazásod feltöltése
+	return { url, alt: file.name };
+},
+```
+
 ## Képek
 
 A szerkesztő nem ismeri a kép fogalmát: nincs képmező, nincs képválasztó, nincs médialista. Hogy egy blokk a kép URL-jét vagy az alkalmazás saját médiatárában lévő kép azonosítóját tárolja, hogyan választja ki a felhasználó, és hogyan lesz a tárolt értékből cím, az az alkalmazás döntése, így a képblokk az alkalmazás egy közönséges pluginja.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atom-forge/brickee",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"author": {
 		"name": "Gergely Laborci",
 		"url": "https://github.com/laborci"
@@ -18,6 +18,7 @@
 		"prepare": "svelte-kit sync || echo ''",
 		"prepack": "(svelte-kit sync || true) && svelte-package && publint",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"test": "vitest run",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"package": "svelte-package",
 		"prepublishOnly": "bun run prepack",
@@ -28,6 +29,7 @@
 	"ship": {
 		"verify": [
 			"bun run check",
+			"bun run test",
 			"bun run prepack",
 			"npm pack --dry-run --ignore-scripts"
 		]
@@ -94,12 +96,18 @@
 		"@tailwindcss/forms": "^0.5.11",
 		"@tailwindcss/typography": "^0.5.20",
 		"@tailwindcss/vite": "^4.3.5",
+		"happy-dom": "^21.0.4",
+		"pixelmatch": "^8.0.0",
+		"playwright-core": "^1.65.0",
+		"pngjs": "^7.0.0",
 		"publint": "^0.3.15",
+		"sass": "^1.108.2",
 		"svelte": "^5.57.1",
 		"svelte-check": "^4.4.2",
 		"tailwindcss": "^4.3.5",
 		"typescript": "^5.9.3",
 		"vite": "^7.3.1",
+		"vitest": "^5.1.0",
 		"zod": "^4.6.7"
 	},
 	"keywords": [