@bendyline/squisq 1.4.0 → 1.5.0

package/src/__tests__/imageEditVersions.test.ts

@@ -46,6 +46,78 @@ describe('imageEdit/persistence', () => {
     );
     await expect(readImageEditDoc(sidecar)).rejects.toThrow(/unsupported schema version/);
   });
+
+  async function writeRaw(sidecar: ReturnType<typeof scopeContainer>, payload: unknown) {
+    await sidecar.writeFile('state.json', new TextEncoder().encode(JSON.stringify(payload)));
+  }
+
+  it('rejects layer that is not an object', async () => {
+    const sidecar = scopeContainer(new MemoryContentContainer(), 'sc');
+    await writeRaw(sidecar, { version: 1, canvas: { width: 1, height: 1 }, layers: [null] });
+    await expect(readImageEditDoc(sidecar)).rejects.toThrow(/layers\[0\] must be an object/);
+  });
+
+  it('rejects layer with missing id', async () => {
+    const sidecar = scopeContainer(new MemoryContentContainer(), 'sc');
+    await writeRaw(sidecar, {
+      version: 1,
+      canvas: { width: 1, height: 1 },
+      layers: [{ type: 'text', position: { x: 0, y: 0 }, content: { text: 'hi', style: {} } }],
+    });
+    await expect(readImageEditDoc(sidecar)).rejects.toThrow(/must have a string id/);
+  });
+
+  it('rejects layer with invalid type', async () => {
+    const sidecar = scopeContainer(new MemoryContentContainer(), 'sc');
+    await writeRaw(sidecar, {
+      version: 1,
+      canvas: { width: 1, height: 1 },
+      layers: [{ id: 'x', type: 'video', position: { x: 0, y: 0 }, content: {} }],
+    });
+    await expect(readImageEditDoc(sidecar)).rejects.toThrow(
+      /type must be one of image\|text\|shape/,
+    );
+  });
+
+  it('rejects image layer with missing content.src', async () => {
+    const sidecar = scopeContainer(new MemoryContentContainer(), 'sc');
+    await writeRaw(sidecar, {
+      version: 1,
+      canvas: { width: 1, height: 1 },
+      layers: [{ id: 'x', type: 'image', position: { x: 0, y: 0 }, content: { alt: 'test' } }],
+    });
+    await expect(readImageEditDoc(sidecar)).rejects.toThrow(/content\.src must be a string/);
+  });
+
+  it('rejects text layer with missing content.text', async () => {
+    const sidecar = scopeContainer(new MemoryContentContainer(), 'sc');
+    await writeRaw(sidecar, {
+      version: 1,
+      canvas: { width: 1, height: 1 },
+      layers: [{ id: 'x', type: 'text', position: { x: 0, y: 0 }, content: { style: {} } }],
+    });
+    await expect(readImageEditDoc(sidecar)).rejects.toThrow(/content\.text must be a string/);
+  });
+
+  it('rejects shape layer with missing content.shape', async () => {
+    const sidecar = scopeContainer(new MemoryContentContainer(), 'sc');
+    await writeRaw(sidecar, {
+      version: 1,
+      canvas: { width: 1, height: 1 },
+      layers: [{ id: 'x', type: 'shape', position: { x: 0, y: 0 }, content: {} }],
+    });
+    await expect(readImageEditDoc(sidecar)).rejects.toThrow(/content\.shape must be a string/);
+  });
+
+  it('rejects layer with missing position', async () => {
+    const sidecar = scopeContainer(new MemoryContentContainer(), 'sc');
+    await writeRaw(sidecar, {
+      version: 1,
+      canvas: { width: 1, height: 1 },
+      layers: [{ id: 'x', type: 'shape', content: { shape: 'rect' } }],
+    });
+    await expect(readImageEditDoc(sidecar)).rejects.toThrow(/position must have/);
+  });
 });
 
 describe('imageEdit/versions', () => {

package/src/__tests__/inlineIconMarker.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import {
+  hasIconMarker,
+  iconClass,
+  iconMarker,
+  splitIconMarkers,
+  stripIconMarkers,
+} from '../icons/inlineIconMarker';
+
+describe('inline icon markers', () => {
+  it('encodes icons with a private-use sentinel', () => {
+    expect(iconMarker('solid', 'rocket')).toBe('\uE000solid:rocket\uE000');
+  });
+
+  it('detects and strips encoded markers from plain-text projections', () => {
+    const text = `Launch ${iconMarker('solid', 'rocket')} now`;
+
+    expect(hasIconMarker(text)).toBe(true);
+    expect(stripIconMarkers(text)).toBe('Launch  now');
+  });
+
+  it('splits marker-bearing text into text and icon runs', () => {
+    const text = `A ${iconMarker('regular', 'star')} and ${iconMarker('brands', 'github')}`;
+
+    expect(splitIconMarkers(text)).toEqual([
+      { type: 'text', text: 'A ' },
+      { type: 'icon', family: 'regular', name: 'star' },
+      { type: 'text', text: ' and ' },
+      { type: 'icon', family: 'brands', name: 'github' },
+    ]);
+  });
+
+  it('builds FontAwesome class names', () => {
+    expect(iconClass('solid', 'rocket')).toBe('fa-solid fa-rocket');
+  });
+});

package/src/__tests__/layoutBlock.test.ts

@@ -0,0 +1,83 @@
+import { describe, it, expect } from 'vitest';
+import { layoutBlock } from '../doc/templates/layoutBlock.js';
+import { createTemplateContext } from '../schemas/BlockTemplates.js';
+import { DEFAULT_THEME } from '../schemas/themeLibrary.js';
+import { VIEWPORT_PRESETS } from '../schemas/Viewport.js';
+import { isContainerTemplate } from '../doc/templates/index.js';
+import { parseMarkdown } from '../markdown/parse.js';
+import type { Block, Layer, TextLayer } from '../schemas/Doc.js';
+import type { RawLayersInput } from '../schemas/BlockTemplates.js';
+
+function child(
+  id: string,
+  template: string,
+  overrides: Record<string, string> = {},
+  bodyMd = '',
+): Block {
+  return {
+    id,
+    startTime: 0,
+    duration: 0,
+    audioSegment: 0,
+    template,
+    templateOverrides: overrides,
+    ...(bodyMd ? { contents: parseMarkdown(bodyMd).children } : {}),
+  } as Block;
+}
+
+function ctxWith(children: Block[]) {
+  const ctx = createTemplateContext(DEFAULT_THEME, 0, 1, VIEWPORT_PRESETS.landscape);
+  ctx.children = children;
+  return ctx;
+}
+
+const INPUT: RawLayersInput = { template: 'layout', id: 'lay', duration: 0, audioSegment: 0 };
+
+describe('layoutBlock template', () => {
+  it('returns a single hint layer for an empty layout', () => {
+    const layers = layoutBlock(INPUT, ctxWith([]));
+    expect(layers).toHaveLength(1);
+    expect(layers[0].type).toBe('text');
+    expect((layers[0] as TextLayer).content.text).toBe('Empty layout');
+  });
+
+  it('emits one layer per child, in document order, at absolute positions', () => {
+    const layers = layoutBlock(
+      INPUT,
+      ctxWith([
+        child('box-1', 'rectangle', { x: '760', y: '390', width: '400', height: '300' }),
+        child('text-1', 'text', { x: '360', y: '380', width: '1200', height: '320' }, 'Welcome'),
+      ]),
+    );
+    expect(layers.map((l) => l.id)).toEqual(['box-1', 'text-1']);
+    expect(layers[0].type).toBe('shape');
+    expect(layers[1].type).toBe('text');
+    expect((layers[1] as TextLayer).content.text).toBe('Welcome');
+    expect(layers[0].position).toMatchObject({ x: 760, y: 390 });
+  });
+});
+
+describe('layout container behavior', () => {
+  it('marks layout as a children-consuming container template', () => {
+    expect(isContainerTemplate('layout')).toBe(true);
+  });
+
+  it('renders a layout block through the template registry (getLayers)', async () => {
+    const { getLayers } = await import('../doc/getLayers.js');
+    const parent: Block = {
+      id: 'lay',
+      startTime: 0,
+      duration: 0,
+      audioSegment: 0,
+      template: 'layout',
+      children: [
+        child('text-1', 'text', { x: '360', y: '380', width: '1200', height: '320' }, 'Title'),
+        child('box-1', 'rectangle', { x: '760', y: '390', width: '400', height: '300' }),
+      ],
+    };
+    const layers = getLayers(parent, {});
+    const types = new Set(layers.map((l: Layer) => l.type));
+    expect(types.has('text')).toBe(true);
+    expect(types.has('shape')).toBe(true);
+  });
+});

package/src/__tests__/layoutLayout.test.ts

@@ -0,0 +1,169 @@
+import { describe, it, expect } from 'vitest';
+import { computeLayoutLayers } from '../doc/templates/layoutLayout.js';
+import { parseMarkdown } from '../markdown/parse.js';
+import type { ShapeLayer, TextLayer, ImageLayer, PathLayer } from '../schemas/Doc.js';
+
+const VP = { width: 1920, height: 1080 };
+
+function child(id: string, template: string, params: Record<string, string> = {}, bodyMd = '') {
+  return {
+    id,
+    template,
+    templateOverrides: params,
+    ...(bodyMd ? { contents: parseMarkdown(bodyMd).children } : {}),
+  };
+}
+
+describe('computeLayoutLayers', () => {
+  it('maps a text child to an absolutely-positioned TextLayer (body text + style)', () => {
+    const { layers } = computeLayoutLayers(
+      [
+        child(
+          'text-1',
+          'text',
+          {
+            x: '100',
+            y: '200',
+            width: '600',
+            height: '120',
+            fontSize: '48',
+            align: 'center',
+            valign: 'middle',
+            color: '#1e293b',
+          },
+          'Hello **world**',
+        ),
+      ],
+      VP,
+    );
+    expect(layers).toHaveLength(1);
+    const t = layers[0] as TextLayer;
+    expect(t.type).toBe('text');
+    expect(t.id).toBe('text-1');
+    expect(t.position).toMatchObject({ x: 100, y: 200, width: 600, height: 120 });
+    expect(t.content.text).toBe('Hello world'); // plain projection of the body
+    expect(t.content.style.fontSize).toBe(48);
+    expect(t.content.style.textAlign).toBe('center');
+    expect(t.content.style.verticalAlign).toBe('middle');
+    expect(t.content.style.color).toBe('#1e293b');
+  });
+
+  it('maps rectangle/circle children to ShapeLayers', () => {
+    const { layers } = computeLayoutLayers(
+      [
+        child('box-1', 'rectangle', {
+          x: '10',
+          y: '10',
+          width: '200',
+          height: '100',
+          fill: '#e0e7ff',
+          stroke: '#6366f1',
+          strokeWidth: '2',
+          borderRadius: '8',
+        }),
+        child('c-1', 'circle', { x: '300', y: '10', width: '120', height: '120' }),
+      ],
+      VP,
+    );
+    const shapes = layers.filter((l): l is ShapeLayer => l.type === 'shape');
+    expect(shapes.map((s) => s.content.shape)).toEqual(['rect', 'circle']);
+    expect(shapes[0].content.fill).toBe('#e0e7ff');
+    expect(shapes[0].content.borderRadius).toBe(8);
+    expect(shapes[0].position).toMatchObject({ x: 10, y: 10, width: 200, height: 100 });
+  });
+
+  it('maps an image child to an ImageLayer and skips one missing src', () => {
+    const { layers, warnings } = computeLayoutLayers(
+      [
+        child('img-1', 'image', {
+          x: '0',
+          y: '0',
+          width: '320',
+          height: '240',
+          src: 'pic.png',
+          alt: 'A pic',
+          fit: 'cover',
+        }),
+        child('img-2', 'image', { x: '0', y: '0' }),
+      ],
+      VP,
+    );
+    const imgs = layers.filter((l): l is ImageLayer => l.type === 'image');
+    expect(imgs).toHaveLength(1);
+    expect(imgs[0].content.src).toBe('pic.png');
+    expect(imgs[0].content.alt).toBe('A pic');
+    expect(imgs[0].content.fit).toBe('cover');
+    expect(warnings.some((w) => w.includes('img-2'))).toBe(true);
+  });
+
+  it('maps a named polygon to a PathLayer via shapePath', () => {
+    const { layers } = computeLayoutLayers(
+      [child('star-1', 'star', { x: '0', y: '0', width: '100', height: '100' })],
+      VP,
+    );
+    const p = layers[0] as PathLayer;
+    expect(p.type).toBe('path');
+    expect(p.content.d.startsWith('M')).toBe(true);
+  });
+
+  it('uses absolute positions (no fit-scaling) regardless of viewport', () => {
+    const children = [
+      child('text-1', 'text', { x: '100', y: '100', width: '200', height: '50' }, 'x'),
+    ];
+    const small = computeLayoutLayers(children, { width: 200, height: 200 }).layers[0];
+    const large = computeLayoutLayers(children, { width: 4000, height: 4000 }).layers[0];
+    expect(small.position.x).toBe(100);
+    expect(large.position.x).toBe(100);
+  });
+
+  it('preserves child document order as z-order', () => {
+    const { layers } = computeLayoutLayers(
+      [child('a', 'rectangle', { x: '0', y: '0' }), child('b', 'text', {}, 'top')],
+      VP,
+    );
+    expect(layers.map((l) => l.id)).toEqual(['a', 'b']);
+  });
+
+  it('warns and skips a child whose annotation is not a layer kind', () => {
+    const { layers, warnings } = computeLayoutLayers(
+      [child('weird', 'banana', { x: '0', y: '0' })],
+      VP,
+    );
+    expect(layers).toHaveLength(0);
+    expect(warnings.some((w) => w.includes('weird'))).toBe(true);
+  });
+
+  it('uses the supplied ink default for un-styled text and strokes', () => {
+    const { layers } = computeLayoutLayers(
+      [
+        child('t', 'text', { x: '0', y: '0' }, 'plain'),
+        child('l', 'line', { x: '0', y: '0', width: '100', height: '0' }),
+      ],
+      VP,
+      { ink: '#e0e0e0' },
+    );
+    const t = layers[0] as TextLayer;
+    const l = layers[1] as PathLayer;
+    expect(t.content.style.color).toBe('#e0e0e0');
+    expect(l.content.stroke).toBe('#e0e0e0');
+  });
+
+  it('keeps the dark-slate ink default when no defaults are supplied (editor scene canvas)', () => {
+    const { layers } = computeLayoutLayers([child('t', 'text', { x: '0', y: '0' }, 'plain')], VP);
+    const t = layers[0] as TextLayer;
+    expect(t.content.style.color).toBe('#1e293b');
+  });
+
+  it('never overrides author-specified color/stroke with the ink default', () => {
+    const { layers } = computeLayoutLayers(
+      [
+        child('t', 'text', { x: '0', y: '0', color: '#112233' }, 'styled'),
+        child('l', 'line', { x: '0', y: '0', width: '100', height: '0', stroke: '#445566' }),
+      ],
+      VP,
+      { ink: '#e0e0e0' },
+    );
+    expect((layers[0] as TextLayer).content.style.color).toBe('#112233');
+    expect((layers[1] as PathLayer).content.stroke).toBe('#445566');
+  });
+});

package/src/__tests__/markdown.test.ts

@@ -11,6 +11,7 @@ import {
   countNodes,
   createDocument,
   parseFrontmatter,
+  plainTextFromInlineHtml,
 } from '../markdown/index';
 import type {
   MarkdownDocument,
@@ -870,3 +871,25 @@ describe('frontmatter in parseMarkdown', () => {
     expect(doc.frontmatter).toBeUndefined();
   });
 });
+
+describe('plainTextFromInlineHtml', () => {
+  it('strips inline tags, keeping text', () => {
+    expect(plainTextFromInlineHtml('<strong>bold</strong> and <em>italic</em>')).toBe(
+      'bold and italic',
+    );
+  });
+
+  it('decodes entities', () => {
+    expect(plainTextFromInlineHtml('a &amp; b &lt;c&gt;')).toBe('a & b <c>');
+  });
+
+  it('turns <br> and block tags into line breaks', () => {
+    expect(plainTextFromInlineHtml('one<br>two')).toBe('one\ntwo');
+    expect(plainTextFromInlineHtml('<p>one</p><p>two</p>')).toBe('one\ntwo');
+    expect(plainTextFromInlineHtml('<h2>Title</h2><p>body</p>')).toBe('Title\nbody');
+  });
+
+  it('returns empty string for empty input', () => {
+    expect(plainTextFromInlineHtml('')).toBe('');
+  });
+});

package/src/__tests__/markdownSanitize.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest';
+import { parseHtmlToNodes, sanitizeHtmlNodes, sanitizeUrl } from '../markdown/index';
+import type { HtmlElement, HtmlNode } from '../markdown/index';
+
+function elements(nodes: HtmlNode[]): HtmlElement[] {
+  return nodes.filter((node): node is HtmlElement => node.type === 'htmlElement');
+}
+
+describe('markdown HTML sanitization', () => {
+  it('allows safe link URLs and rejects executable schemes', () => {
+    expect(sanitizeUrl('https://example.com', 'link')).toBe('https://example.com');
+    expect(sanitizeUrl('/docs/page.html#intro', 'link')).toBe('/docs/page.html#intro');
+    expect(sanitizeUrl('mailto:me@example.com', 'link')).toBe('mailto:me@example.com');
+    expect(sanitizeUrl('tel:+15551234567', 'link')).toBe('tel:+15551234567');
+    expect(sanitizeUrl('javascript:alert(1)', 'link')).toBeNull();
+    expect(sanitizeUrl('java\nscript:alert(1)', 'link')).toBeNull();
+    expect(sanitizeUrl('data:text/html,<script>alert(1)</script>', 'link')).toBeNull();
+  });
+
+  it('allows Squisq media URLs without allowing SVG or HTML data payloads', () => {
+    expect(sanitizeUrl('blob:http://localhost/abc', 'media')).toBe('blob:http://localhost/abc');
+    expect(sanitizeUrl('data:image/png;base64,AAA', 'media')).toBe('data:image/png;base64,AAA');
+    expect(sanitizeUrl('data:audio/webm;base64,AAA', 'media')).toBe('data:audio/webm;base64,AAA');
+    expect(sanitizeUrl('data:image/svg+xml;base64,AAA', 'media')).toBeNull();
+    expect(sanitizeUrl('data:text/html,<script>alert(1)</script>', 'media')).toBeNull();
+  });
+
+  it('removes dangerous tags and event handler attributes', () => {
+    const safe = sanitizeHtmlNodes(
+      parseHtmlToNodes('<div onclick="alert(1)">ok<script>alert(1)</script></div>'),
+    );
+    const [div] = elements(safe);
+
+    expect(div.tagName).toBe('div');
+    expect(div.attributes.onclick).toBeUndefined();
+    expect(div.children).toEqual([{ type: 'htmlText', value: 'ok' }]);
+  });
+
+  it('sanitizes link and image attributes inside raw HTML', () => {
+    const safe = sanitizeHtmlNodes(
+      parseHtmlToNodes(
+        '<a href="javascript:alert(1)" target="_blank">bad</a><img src="x.jpg" onerror="alert(1)" width="300">',
+      ),
+    );
+    const [link, image] = elements(safe);
+
+    expect(link.tagName).toBe('a');
+    expect(link.attributes.href).toBeUndefined();
+    expect(link.attributes.target).toBe('_blank');
+    expect(link.attributes.rel).toBe('noopener noreferrer');
+    expect(image.tagName).toBe('img');
+    expect(image.attributes.src).toBe('x.jpg');
+    expect(image.attributes.onerror).toBeUndefined();
+    expect(image.attributes.width).toBe('300');
+  });
+
+  it('unwraps unknown harmless containers while keeping their safe children', () => {
+    const safe = sanitizeHtmlNodes(parseHtmlToNodes('<custom><strong>kept</strong></custom>'));
+    const [strong] = elements(safe);
+
+    expect(strong.tagName).toBe('strong');
+    expect(strong.children).toEqual([{ type: 'htmlText', value: 'kept' }]);
+  });
+});