@atom-forge/brickee 0.0.1 → 0.0.3

package/dist/html.js

@@ -0,0 +1,206 @@
+// Formatted paste: HTML from a web page, Google Docs, Word… -> markdown -> blocks. Going through markdown reuses
+// everything fromMarkdown does (list nesting, tables for a plugin that takes them, safe links); the HTML is only read,
+// never inserted. Browser only (DOMParser).
+import { codeSpan, escLine, escText, fromMarkdown, mdUrl } from './markdown';
+/** Never read: no text of theirs belongs in a document. */
+const SKIP = new Set(['SCRIPT', 'STYLE', 'HEAD', 'TITLE', 'META', 'LINK', 'TEMPLATE', 'NOSCRIPT', 'SVG', 'CANVAS', 'IFRAME', 'OBJECT', 'EMBED', 'BUTTON', 'SELECT', 'TEXTAREA', 'INPUT', 'VIDEO', 'AUDIO']);
+/** Elements that make blocks; everything else is inline. */
+const BLOCK = new Set([
+    'ADDRESS', 'ARTICLE', 'ASIDE', 'BLOCKQUOTE', 'BODY', 'CENTER', 'DD', 'DETAILS', 'DIV', 'DL', 'DT', 'FIELDSET', 'FIGCAPTION', 'FIGURE', 'FOOTER', 'FORM',
+    'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'HEADER', 'HR', 'HTML', 'LI', 'MAIN', 'NAV', 'OL', 'P', 'PRE', 'SECTION', 'SUMMARY', 'TABLE', 'UL'
+]);
+const BLOCK_SELECTOR = [...BLOCK].map((t) => t.toLowerCase()).join(',');
+/** A block, or an inline element that holds blocks (Google Docs wraps a whole copy in a <b>): a container then. */
+const isBlock = (n) => n instanceof HTMLElement && (BLOCK.has(n.tagName) || (!SKIP.has(n.tagName) && !!n.querySelector(BLOCK_SELECTOR)));
+/** Marks around text, with its spaces kept outside (`** bold**` is no mark). */
+function wrap(inner, open, close = open) {
+    const [, a, core, b] = /^(\s*)([\s\S]*?)(\s*)$/.exec(inner);
+    return core ? a + open + core + close + b : inner;
+}
+/** The marks a span's inline style stands for (Google Docs writes bold and italic as styles). */
+function styled(el, inner) {
+    const s = el.style;
+    const weight = s.fontWeight;
+    let out = inner;
+    if (weight === 'bold' || weight === 'bolder' || Number(weight) >= 600)
+        out = wrap(out, '**');
+    if (s.fontStyle === 'italic')
+        out = wrap(out, '*');
+    if (s.textDecoration.includes('line-through') || s.textDecorationLine.includes('line-through'))
+        out = wrap(out, '~~');
+    if (s.textDecoration.includes('underline') || s.textDecorationLine.includes('underline'))
+        out = wrap(out, '<u>', '</u>');
+    if (s.verticalAlign === 'super')
+        out = wrap(out, '<sup>', '</sup>');
+    if (s.verticalAlign === 'sub')
+        out = wrap(out, '<sub>', '</sub>');
+    return out;
+}
+/** Inline content as inline markdown; `\n` where the HTML breaks a line. */
+function inline(nodes) {
+    let text = '';
+    // HTML collapses neighbouring spaces, also across marks ("a <b> b</b>").
+    const out = {
+        add(s) {
+            text += /[ \n]$/.test(text) || !text ? s.replace(/^ +/, '') : s;
+        }
+    };
+    for (const n of nodes) {
+        if (n.nodeType === Node.TEXT_NODE) {
+            out.add(escText((n.textContent ?? '').replace(/[ \t\r\n]+/g, ' ')));
+            continue;
+        }
+        if (!(n instanceof HTMLElement) || SKIP.has(n.tagName))
+            continue;
+        const tag = n.tagName;
+        if (tag === 'BR') {
+            out.add('\n');
+            continue;
+        }
+        if (tag === 'IMG') {
+            // No images in the package: a picture becomes a link to it.
+            const src = n.getAttribute('src') ?? '';
+            if (/^https?:/i.test(src))
+                out.add(`[${escText(n.getAttribute('alt') || src)}](${mdUrl(src)})`);
+            continue;
+        }
+        if (tag === 'CODE' || tag === 'KBD' || tag === 'SAMP' || tag === 'TT') {
+            const text = (n.textContent ?? '').replace(/\s+/g, ' ');
+            out.add(text.trim() ? codeSpan(text) : text);
+            continue;
+        }
+        // A block inside inline content (a paragraph in a list item): its own line.
+        const inner = isBlock(n) ? `\n${inline(n.childNodes).trim()}\n` : inline(n.childNodes);
+        if (tag === 'A') {
+            const href = n.getAttribute('href') ?? '';
+            out.add(inner.trim() && href && !href.startsWith('#') ? wrap(inner, '[', `](${mdUrl(href)})`) : inner);
+        }
+        else if (tag === 'B' || tag === 'STRONG') {
+            // Google Docs wraps a whole copy in <b style="font-weight:normal">.
+            const w = n.style.fontWeight;
+            out.add(w === 'normal' || w === '400' ? styled(n, inner) : wrap(inner, '**'));
+        }
+        else if (tag === 'I' || tag === 'EM' || tag === 'CITE' || tag === 'DFN' || tag === 'VAR')
+            out.add(wrap(inner, '*'));
+        else if (tag === 'U' || tag === 'INS')
+            out.add(wrap(inner, '<u>', '</u>'));
+        else if (tag === 'S' || tag === 'DEL' || tag === 'STRIKE')
+            out.add(wrap(inner, '~~'));
+        else if (tag === 'SUB' || tag === 'SUP')
+            out.add(wrap(inner, `<${tag.toLowerCase()}>`, `</${tag.toLowerCase()}>`));
+        else
+            out.add(styled(n, inner));
+    }
+    return text;
+}
+/** Inline markdown as the lines of a paragraph: each line escaped where it would read as a block start. */
+const lines = (md) => md
+    .split('\n')
+    .map((l) => l.trim())
+    .filter(Boolean)
+    .map(escLine);
+/** A container's children as markdown chunks (blocks); runs of inline content become paragraphs. */
+function chunks(el) {
+    const out = [];
+    let run = [];
+    const flush = () => {
+        const ls = lines(inline(run));
+        if (ls.length)
+            out.push(ls.join('\n'));
+        run = [];
+    };
+    for (const n of el.childNodes) {
+        if (n instanceof HTMLElement && SKIP.has(n.tagName))
+            continue;
+        if (isBlock(n)) {
+            flush();
+            out.push(...block(n));
+        }
+        else
+            run.push(n);
+    }
+    flush();
+    return out;
+}
+function block(el) {
+    const tag = el.tagName;
+    if (/^H[1-6]$/.test(tag)) {
+        const text = inline(el.childNodes).replace(/\s*\n\s*/g, ' ').trim();
+        return text ? [`${'#'.repeat(+tag[1])} ${text}`] : [];
+    }
+    if (tag === 'HR')
+        return ['---'];
+    if (tag === 'UL' || tag === 'OL') {
+        const md = list(el, 0);
+        return md ? [md] : [];
+    }
+    if (tag === 'PRE') {
+        const text = (el.textContent ?? '').replace(/\r/g, '').replace(/\n$/, '');
+        const lang = /(?:^|\s)(?:language|lang)-([\w+#.-]+)/.exec(`${el.className} ${el.querySelector('code')?.className ?? ''}`)?.[1] ?? '';
+        const fence = '`'.repeat(Math.max(3, ...(text.match(/`+/g) ?? []).map((r) => r.length + 1)));
+        return [`${fence}${lang}\n${text}\n${fence}`];
+    }
+    if (tag === 'BLOCKQUOTE') {
+        const inner = chunks(el);
+        return inner.length ? [inner.map((c) => c.split('\n').map((l) => `> ${l}`).join('\n')).join('\n>\n')] : [];
+    }
+    if (tag === 'TABLE')
+        return table(el);
+    return chunks(el);
+}
+/** A list and its nested lists, `indent` spaces in. */
+function list(el, indent) {
+    const pad = ' '.repeat(indent);
+    const ordered = el.tagName === 'OL';
+    let n = Number(el.getAttribute('start')) || 1;
+    const out = [];
+    for (const li of el.children) {
+        if (li.tagName !== 'LI')
+            continue;
+        const box = li.querySelector(':scope > input[type="checkbox"], :scope > p > input[type="checkbox"], :scope > label > input[type="checkbox"]');
+        const marker = ordered ? `${n++}. ` : box ? `- [${box.checked || box.hasAttribute('checked') ? 'x' : ' '}] ` : '- ';
+        const own = [...li.childNodes].filter((c) => !(c instanceof HTMLElement && (c.tagName === 'UL' || c.tagName === 'OL')));
+        const [first = '', ...more] = lines(inline(own));
+        out.push(pad + marker + first);
+        const inner = ' '.repeat(indent + marker.length);
+        for (const l of more)
+            out.push(inner + l);
+        for (const sub of li.children)
+            if (sub.tagName === 'UL' || sub.tagName === 'OL') {
+                const md = list(sub, indent + marker.length);
+                if (md)
+                    out.push(md);
+            }
+    }
+    return out.join('\n');
+}
+/** A table as a GFM table: the first row is the header; the alignment from the header cells. */
+function table(el) {
+    const rows = [...el.querySelectorAll('tr')].filter((tr) => tr.closest('table') === el);
+    const grid = rows.map((tr) => [...tr.children]
+        .filter((c) => c.tagName === 'TD' || c.tagName === 'TH')
+        .map((c) => inline(c.childNodes).replace(/\s*\n\s*/g, '<br>').trim().replace(/\|/g, '\\|')));
+    if (!grid.length || !grid[0].length)
+        return [];
+    const width = Math.max(...grid.map((r) => r.length));
+    const align = [...rows[0].children].map((c) => {
+        const a = (c.style.textAlign || c.getAttribute('align') || '').toLowerCase();
+        return a === 'center' ? ':-:' : a === 'right' ? '--:' : '---';
+    });
+    const row = (r) => `| ${[...r, ...Array(width - r.length).fill('')].join(' | ')} |`;
+    return [[row(grid[0]), row(Array.from({ length: width }, (_, i) => align[i] ?? '---')), ...grid.slice(1).map(row)].join('\n')];
+}
+/** HTML (a pasted fragment or a page) as markdown. Browser only. */
+export function markdownFromHtml(html) {
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    return chunks(doc.body).join('\n\n');
+}
+/**
+ * HTML -> blocks, the way the editor takes a formatted paste: headings, paragraphs, lists (nested, numbered with their
+ * start, to-dos from checkboxes), quotes, code (`pre`, with a `language-…` class), rules, and inline marks — also
+ * Google Docs' styled spans. A table goes to the first of `plugins` that takes tables (`fromTable`). Images become
+ * links; scripts, styles and form controls are dropped. Browser only.
+ */
+export function fromHtml(html, opts = {}) {
+    return fromMarkdown(markdownFromHtml(html), opts);
+}

package/dist/i18n.js

@@ -1,7 +1,7 @@
 // UI text. The editor and the plugins are written in English; a host passes `messages` (English text -> its own) to
 // the top editor or preview, and nested editors and plugin views inherit them. `{name}` placeholders are filled in.
 import { getContext, setContext } from 'svelte';
-const KEY = 'block-editor:text';
+const KEY = 'brickee:text';
 export const translator = (messages) => (text, vars) => {
     const out = messages?.[text] ?? text;
     return vars ? out.replace(/\{(\w+)\}/g, (m, k) => (k in vars ? String(vars[k]) : m)) : out;

package/dist/index.d.ts

@@ -5,9 +5,10 @@ export { default as Empty } from './kit/Empty.svelte';
 export * from './kit/util';
 export * from './model';
 export { inline, fromStored, toStored, fromMarkdown, toMarkdown } from './markdown';
-export { provideMedia, useMedia, findMedia, type MediaItem } from './media';
+export { fromHtml } from './html';
 export { provideView, useView } from './view';
+export { provideCodeLanguages, useCodeLanguages, type CodeLanguage } from './code';
 export { scrollSync, scrollFraction, setScrollFraction, type ScrollSync } from './scroll';
 export { provideText, useText, translator, type Messages, type Translate } from './i18n';
 export { PALETTE_ITEMS, BUILT_IN_IDS, narrowPalette, type Icon, type PaletteItem } from './palette';
-export type { MarkdownContext, Block, BlockType, Content, PluginPreviewProps, PluginViewProps, PropField, Props, BlockPlugin } from './types';
+export type { MarkdownContext, MarkdownTable, Block, BlockType, Content, PluginPreviewProps, PluginViewProps, PropField, Props, BlockPlugin } from './types';

package/dist/index.js

@@ -1,6 +1,6 @@
-// block-editor: a Svelte 5 block editor. The core is markdown (`md:p`, `md:h2`, `md:code`…) plus the kit to write plugins
+// Brickee: a Svelte 5 block editor. The core is markdown (`md:p`, `md:h2`, `md:code`…) plus the kit to write plugins
 // with; every other block is a plugin with an editor view, a site preview and optionally a markdown form. The bundled
-// plugins (block-editor/plugins) are plugins like any other. The stored form is `StoredBlock[]` (see model.ts).
+// plugins (@atom-forge/brickee/plugins) are plugins like any other. The stored form is `StoredBlock[]` (see model.ts).
 export { default as Editor } from './Editor.svelte';
 export { default as Preview } from './Preview.svelte';
 // The kit: what plugins are written with (box frame, empty state, helpers).
@@ -9,8 +9,9 @@ export { default as Empty } from './kit/Empty.svelte';
 export * from './kit/util';
 export * from './model';
 export { inline, fromStored, toStored, fromMarkdown, toMarkdown } from './markdown';
-export { provideMedia, useMedia, findMedia } from './media';
+export { fromHtml } from './html';
 export { provideView, useView } from './view';
+export { provideCodeLanguages, useCodeLanguages } from './code';
 export { scrollSync, scrollFraction, setScrollFraction } from './scroll';
 export { provideText, useText, translator } from './i18n';
 export { PALETTE_ITEMS, BUILT_IN_IDS, narrowPalette } from './palette';

package/dist/kit/Empty.svelte

@@ -7,18 +7,7 @@
 	const tr = useText();
 </script>
 
-<div class="empty"><I size={18} /> {tr(text)}</div>
-
-<style>
-	.empty {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 8px;
-		min-height: 96px;
-		border: 1px dashed #d4d4da;
-		border-radius: 10px;
-		color: #a0a0a8;
-		font: 14px system-ui, sans-serif;
-	}
-</style>
+<div class="flex min-h-24 items-center justify-center gap-2 rounded-[10px] border border-dashed border-frame font-sans text-sm leading-[normal] text-muted-contrast">
+	<I size={18} />
+	{tr(text)}
+</div>

package/dist/kit/Frame.svelte

@@ -31,46 +31,16 @@
 	const fields = claimFields();
 </script>
 
-<div class="frame">
+<!-- left padding: room for the inner blocks' handle bar (22px left of the row, which reaches 8px out); the fields reach
+     to the frame's edges, its padding taken back -->
+<div class="relative rounded-[10px] border border-frame pt-[0.8em] pr-[1.1em] pb-[0.4em] pl-[calc(30px+0.5em)]">
 	{#if fields}
-		<div class="fields">{@render fields()}</div>
+		<div class="mt-[calc(-0.8em+4px)] mr-[calc(-1.1em+4px)] mb-[0.5em] ml-[calc(-30px-0.5em+4px)]">{@render fields()}</div>
 	{:else if heading || empty || image}
-		<div class="head">
-			{#if image}<img src={image} alt="" draggable="false" />{/if}
-			<span class:muted={!heading}>{heading || empty}</span>
+		<div class="mr-[9em] mb-[0.3em] flex items-center gap-2 font-sans text-[13px] leading-[1.4] font-semibold text-surface-contrast">
+			{#if image}<img class="h-7 w-11 rounded object-cover" src={image} alt="" draggable="false" />{/if}
+			<span class={heading ? '' : 'font-normal text-muted-contrast'}>{heading || empty}</span>
 		</div>
 	{/if}
 	<Editor bind:value={blocks} {readonly} {palette} {plugins} nested placeholder={placeholder ?? tr('Write inside…')} />
 </div>
-
-<style>
-	.frame {
-		position: relative;
-		border: 1px solid #e5e5ea;
-		border-radius: 10px;
-		/* left: room for the inner blocks' handle bar (22px left of the row, which reaches 8px out) */
-		padding: 0.8em 1.1em 0.4em calc(30px + 0.5em);
-	}
-	/* the fields reach to the frame's edges, the frame's padding taken back */
-	.fields {
-		margin: calc(-0.8em + 4px) calc(-1.1em + 4px) 0.5em calc(-30px - 0.5em + 4px);
-	}
-	.head {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		margin: 0 9em 0.3em 0;
-		font: 600 13px/1.4 system-ui, sans-serif;
-		color: #1d1d1f;
-	}
-	.head img {
-		height: 28px;
-		width: 44px;
-		object-fit: cover;
-		border-radius: 4px;
-	}
-	.muted {
-		font-weight: 400;
-		color: #a0a0a8;
-	}
-</style>

package/dist/locales/hu.js

@@ -4,16 +4,14 @@ export const hu = {
     'Add a block below': 'Új blokk alá',
     'Drag to move, click to select': 'Húzd az áthelyezéshez, kattints a kijelöléshez',
     Done: 'Kész',
+    'Move up': 'Mozgatás fel',
+    'Move down': 'Mozgatás le',
+    'Select the block': 'A blokk kijelölése',
+    'Unknown block: {type}': 'Ismeretlen blokk: {type}',
     inherited: 'örökölt',
     Settings: 'Beállítások',
     'Hide settings': 'Beállítások elrejtése',
     None: 'Nincs',
-    Images: 'Képek',
-    Choose: 'Választás',
-    'Choose…': 'Válassz…',
-    '{n} picked': '{n} kiválasztva',
-    language: 'nyelv',
-    'No images attached to this page yet.': 'Még nincs kép csatolva.',
     'New block at the end': 'Új blokk a végére',
     Formatting: 'Formázás',
     'Turn into': 'Átalakítás',
@@ -131,15 +129,15 @@ export const hu = {
     'Align column right': 'Az oszlop jobbra zárva',
     'Header row': 'Fejléc (első sor)',
     'Footer row (e.g. sums)': 'Lábléc (utolsó sor, pl. összesítő)',
+    'Header and footer': 'Fejléc és lábléc',
+    'Click a cell to edit its row and column': 'Kattints egy cellába a sora és oszlopa szerkesztéséhez',
     'Drag to move the row': 'Húzd a sor áthelyezéséhez',
     'Drag to move the column': 'Húzd az oszlop áthelyezéséhez',
-    'Enter: next row · Shift+Enter: line break · paste from a spreadsheet': 'Enter: következő sor · Shift+Enter: sortörés · táblázatból be is illeszthető',
     Heading: 'Fejléc',
     'Row {r}, column {c}': '{r}. sor, {c}. oszlop',
     'Add a column': 'Új oszlop',
     'Add a row': 'Új sor',
     // előnézet
-    'For supporters only': 'Csak támogatóknak',
     'YouTube video': 'YouTube-videó',
     video: 'videó',
     'Play {title}': 'Lejátszás: {title}',

package/dist/markdown.d.ts

@@ -1,13 +1,21 @@
-import type { MediaItem } from './media';
 import { type Block, type BlockPlugin, type StoredBlock } from './types';
 /** Inline markdown -> inline html (b, i, u, sub, sup, strike, code, a, br). Backslash escapes are honoured; links are
- * http(s), mailto, tel or site-relative only. */
+ * http(s), mailto, tel or site-relative only. Images become links (the package has no notion of images), footnote
+ * references superscripts, and inline HTML its marks (other tags are dropped). */
 export declare function inline(md: string): string;
+/** A link target as markdown reads it back: spaces and unbalanced parentheses encoded. */
+export declare function mdUrl(href: string): string;
+/** Plain text as inline markdown: what would read as a mark is escaped (`_` only at a word's edge: snake_case stays). */
+export declare function escText(t: string): string;
+/** Inline markdown for a code span: a fence longer than any backtick run inside, padded when it starts or ends with one. */
+export declare function codeSpan(text: string): string;
 /** Inline html -> inline markdown (browser only). `code` keeps the text verbatim, as in a code block. */
 export declare function htmlToMarkdown(html: string, code?: boolean): string;
+/** A line of text, escaped where markdown would read it as a block start (`1. ` as `1\. `). */
+export declare function escLine(t: string): string;
 /** One block -> its markdown snippet, without indentation. `n` is the ordinal of a numbered item. */
 export declare function blockToMd(b: Block, n?: number): string;
-/** One markdown snippet -> block fields. */
+/** One markdown line -> block fields (a heading, a list item, a quote, a rule or a paragraph). */
 export declare function mdToBlock(md: string): Pick<Block, 'type' | 'html' | 'checked' | 'props'>;
 /** Inline html -> the same letters without formatting (line breaks kept), as a code block holds them. */
 export declare function plainHtml(html: string): string;
@@ -15,11 +23,17 @@ export declare function plainHtml(html: string): string;
 export declare function toStored(b: Block): StoredBlock;
 /** Stored block -> editor block with a fresh id. Unknown types (md: or plugin) are kept as they are. */
 export declare function fromStored(s: StoredBlock): Block;
-/** Markdown text -> blocks. Supports headings, lists, todos, quotes, fenced code, hr and basic inline marks. */
-export declare function fromMarkdown(src: string): Block[];
+/**
+ * Markdown text -> blocks (CommonMark and GFM, as far as blocks can hold them): headings (also setext), lists with
+ * their nesting and start number, to-dos, quotes (also nested), fenced and indented code, rules, and paragraphs whose
+ * lines are kept as line breaks. Reference links are resolved, footnotes become superscripts. A GFM table goes to the
+ * first of `plugins` that takes it (`fromTable`), or stays text.
+ */
+export declare function fromMarkdown(src: string, opts?: {
+    plugins?: BlockPlugin[];
+}): Block[];
 /** Blocks -> markdown text (browser only: uses the DOM to read the inline html). A plugin block is written by its
  * plugin's `markdown`; one without it is left out. */
 export declare function toMarkdown(blocks: Block[], opts?: {
     plugins?: BlockPlugin[];
-    media?: MediaItem[];
 }): string;