@akinon/pz-theme 2.0.161-rc.23 → 2.0.161

package/src/custom/property-types.ts

@@ -33,20 +33,19 @@ export type PropertyType = (typeof CUSTOM_PROPERTY_TYPES)[number];
  * The subset whose value provably survives the full round trip — panel write,
  * persistence, and resolution back into a prop.
  *
- * The two excluded members are excluded for reasons that were verified, not
- * guessed: `multiselect` and `localetext` are stored UNBUCKETED by the editor
- * (`theme-basic-properties.tsx:1547-1548` passes arrays and locale objects
- * through without the per-breakpoint wrapper). `getResponsiveValue` then
- * rejects an array with a devWarn and returns the fallback, and a locale
- * object has no `desktop` key so it does too. They can never deliver a
- * value until a per-type resolver exists.
+ * The three excluded members are excluded for reasons that were verified, not
+ * guessed:
  *
- * `richtext` is the one type with such a resolver. The editor's rich text
- * control writes per language (`{ tr: '<p>…</p>', en: … }`, unbucketed, like
- * `localetext`), so `useThemeSetting` reads the page's language out of the
- * map before the breakpoint read, then passes the html through
- * `sanitizeRichText`, a DOM-free allowlist, so a block can hand it to
- * `dangerouslySetInnerHTML` on the server as well as the client.
+ * - `multiselect` and `localetext` are stored UNBUCKETED by the editor
+ *   (`theme-basic-properties.tsx:1547-1548` passes arrays and locale objects
+ *   through without the per-breakpoint wrapper). `getResponsiveValue` then
+ *   rejects an array with a devWarn and returns the fallback, and a locale
+ *   object has no `desktop` key so it does too. They can never deliver a
+ *   value until a per-type resolver exists.
+ * - `richtext` has no safe renderer here. The allowlist sanitizer this repo
+ *   already owns parses by assigning to `innerHTML` on a live element, so the
+ *   sink is its first act — and pz-theme renders server-side, where there is
+ *   no `document` at all.
  *
  * Declaring one of these throws at define time rather than shipping a control
  * that silently shows the default forever.
@@ -60,11 +59,12 @@ export const SUPPORTED_PROPERTY_TYPES: readonly PropertyType[] = [
   'color',
   'image',
   'file',
-  'richtext',
   'typography',
   'icon'
 ];
 
-export const isSupportedPropertyType = (type: unknown): type is PropertyType =>
+export const isSupportedPropertyType = (
+  type: unknown
+): type is PropertyType =>
   typeof type === 'string' &&
   (SUPPORTED_PROPERTY_TYPES as readonly string[]).includes(type);

package/src/custom/use-theme-setting.ts

@@ -1,7 +1,6 @@
 'use client';
 
 import { getResponsiveValue } from '../utils';
-import { sanitizeRichText } from '../utils/sanitize-rich-text';
 import { devWarn } from '../utils/dev-warn';
 import {
   isLocalizedValue,
@@ -239,11 +238,6 @@ export function useThemeSetting<
 
   const defaults = splitDefault(declaration, valueLocale);
 
-  const finish = (value: unknown): TValue =>
-    (declaration.type === 'richtext'
-      ? sanitizeRichText(typeof value === 'string' ? value : '')
-      : value) as TValue;
-
   if (!context) {
     // A missing block context is never an error on its own: a developer
     // previewing the component in a storybook or a unit test should see the
@@ -260,7 +254,7 @@ export function useThemeSetting<
         `unreachable and the declared default is used instead. Render this ` +
         `component through a block registered with registerCustomBlocks().`
     );
-    return finish(defaults.page);
+    return defaults.page as TValue;
   }
 
   // Reported on every render rather than once from an effect: the collection
@@ -277,17 +271,7 @@ export function useThemeSetting<
   // attribute keys that were never declared. `node` rather than `block` so a
   // setting declared inside a custom SECTION reads the section's own
   // properties, which is where the editor writes it.
-  const authored = context.node.properties?.[key];
-
-  // The rich text control writes per language — `{ tr: '<p>…</p>', en: … }` —
-  // and the editor stores that map as it is, with no breakpoint key: the same
-  // shape that keeps `localetext` out (see `property-types.ts`). Read the
-  // page's language out of it first; what is left is a string or a breakpoint
-  // map, which the responsive read below already understands.
-  const stored =
-    declaration.type === 'richtext'
-      ? resolveLocalizedValue(authored, valueLocale)
-      : authored;
+  const stored = context.node.properties?.[key];
 
   // The sentinel again, for the same reason: handing `getResponsiveValue` an
   // undefined fallback would resolve an undeclared default to `''`, so a
@@ -296,15 +280,15 @@ export function useThemeSetting<
   const resolved = getResponsiveValue(stored, breakpoint, NOT_AUTHORED);
 
   if (resolved === NOT_AUTHORED) {
-    return finish(resolveAuthoredDefault(defaults.page, breakpoint));
+    return resolveAuthoredDefault(defaults.page, breakpoint) as TValue;
   }
 
   // The default-language text as the editor seeded it when the block was
   // placed, never changed since: still the author's copy, so it follows the
   // page's language. Anything the merchant typed is theirs and shows as typed.
   if (defaults.perLocale && resolved === defaults.base) {
-    return finish(defaults.page);
+    return defaults.page as TValue;
   }
 
-  return finish(resolved);
+  return resolved as TValue;
 }

package/src/editor-locale-bridge.tsx

@@ -4,28 +4,14 @@ import { useEffect } from 'react';
 import { useLocalization } from '@akinon/next/hooks';
 
 import { isTrustedEditorEvent, postToEditor } from './editor-bridge';
-import { useValueLocale } from './utils/localized-value';
 
 /**
  * The storefront half of the editor's Language dropdown.
  *
  * The editor starts that dropdown with English only and fills it from the
- * `LOCALE_UPDATE` frame the preview posts (`{ locale, locales, defaultLocale }`);
- * when the merchant picks another language it posts `LOCALE_UPDATE` back and
- * expects the preview to follow.
- *
- * The frame carries the storefront's default language as well. The editor's
- * per-language text controls store a plain string in that language and a map
- * in every other, so an editor that never heard it assumed English and gave
- * every Turkish-default store a stray `en` key (ZERO-5296).
- *
- * It is posted BEFORE the document reports ready (`IFRAME_READY`): the bridge
- * is a child of the placeholder wrapper, whose own effect posts that frame,
- * and React runs a child's effects first. The editor relies on the order — it
- * holds every per-language write until the preview is ready, and takes
- * "ready without languages" to mean a storefront that will never send them.
- *
- * For a long time the only code answering either direction
+ * `LOCALE_UPDATE` frame the preview posts (`{ locale, locales }`); when the
+ * merchant picks another language it posts `LOCALE_UPDATE` back and expects the
+ * preview to follow. For a long time the only code answering either direction
  * was the app-template's `LanguageSelect` — brand code. A brand whose header no
  * longer renders that component (a header composed through ChromeSlot, a
  * custom header section, a project older than the template) left the editor
@@ -68,7 +54,6 @@ export interface EditorLocaleOption {
 interface LocaleState {
   locale: string;
   locales: EditorLocaleOption[];
-  defaultLocale?: string;
   setLocale: (locale: string) => void;
 }
 
@@ -101,22 +86,15 @@ const toEditorLocales = (locales: unknown): EditorLocaleOption[] =>
           : entry.value
     }));
 
-const announcementKey = ({
-  locale,
-  locales,
-  defaultLocale
-}: Omit<LocaleState, 'setLocale'>) =>
-  JSON.stringify([locale, locales, defaultLocale ?? null]);
+const announcementKey = (locale: string, locales: EditorLocaleOption[]) =>
+  JSON.stringify([locale, locales]);
 
-const announce = ({ locale, locales, defaultLocale }: LocaleState) => {
-  const key = announcementKey({ locale, locales, defaultLocale });
+const announce = ({ locale, locales }: LocaleState) => {
+  const key = announcementKey(locale, locales);
   if (key === lastAnnounced) return;
   lastAnnounced = key;
 
-  postToEditor({
-    type: 'LOCALE_UPDATE',
-    data: { locale, locales, defaultLocale }
-  });
+  postToEditor({ type: 'LOCALE_UPDATE', data: { locale, locales } });
 };
 
 const handleEditorMessage = (event: MessageEvent) => {
@@ -137,7 +115,7 @@ const handleEditorMessage = (event: MessageEvent) => {
 
   // The editor is already showing `requested`. Recording it as announced keeps
   // the switch from being echoed back when the new locale reaches the page.
-  lastAnnounced = announcementKey({ ...current, locale: requested });
+  lastAnnounced = announcementKey(requested, current.locales);
   current.setLocale(requested);
 };
 
@@ -148,7 +126,6 @@ const handleEditorMessage = (event: MessageEvent) => {
  */
 export function EditorLocaleBridge(): null {
   const { locale, locales, setLocale } = useLocalization();
-  const { defaultLocale } = useValueLocale();
 
   useEffect(() => {
     if (!isFramed()) return;
@@ -170,14 +147,9 @@ export function EditorLocaleBridge(): null {
   useEffect(() => {
     if (!isFramed() || !locale) return;
 
-    current = {
-      locale,
-      locales: toEditorLocales(locales),
-      defaultLocale,
-      setLocale
-    };
+    current = { locale, locales: toEditorLocales(locales), setLocale };
     announce(current);
-  }, [locale, locales, defaultLocale, setLocale]);
+  }, [locale, locales, setLocale]);
 
   return null;
 }

package/src/theme-placeholder-wrapper.tsx

@@ -1166,9 +1166,6 @@ export default function ThemePlaceholderWrapper({
           Tells the editor which languages this storefront has and follows its
           language switch. Every placeholder renders one; they share a single
           listener and a single announcement (see editor-locale-bridge.tsx).
-          A child of this wrapper on purpose: its effect, and so its frame,
-          runs before the effect below that posts IFRAME_READY, and the editor
-          counts on hearing the languages before the ready report.
         */}
           <EditorLocaleBridge />
           {themeBackgroundCSS && (

package/src/blocks/__tests__/order-line-actions.test.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import {
-  registerOrderLineActions,
-  renderOrderLineActions
-} from '../order-line-actions';
-
-const context = {
-  order: { id: 7, number: '20920397829', created_date: '2026-10-01' },
-  line: {
-    key: '1',
-    name: 'Product',
-    image: '',
-    href: '',
-    price: '100',
-    total: 100,
-    quantity: 1,
-    item: { id: 1, status: { value: '550', label: 'Delivered' } }
-  },
-  isDesigner: false
-};
-
-describe('order line actions registry', () => {
-  it('renders nothing until a brand registers', () => {
-    expect(renderOrderLineActions(context)).toBeNull();
-  });
-
-  it('hands the line and order to the registered renderer', () => {
-    const renderer = jest.fn(() => <span>action</span>);
-    const unregister = registerOrderLineActions(renderer);
-
-    expect(renderOrderLineActions(context)).toEqual(<span>action</span>);
-    expect(renderer).toHaveBeenCalledWith(context);
-
-    unregister();
-    expect(renderOrderLineActions(context)).toBeNull();
-  });
-
-  it('swallows a throwing renderer so a brand bug cannot break the line', () => {
-    const unregister = registerOrderLineActions(() => {
-      throw new Error('boom');
-    });
-
-    expect(renderOrderLineActions(context)).toBeNull();
-    unregister();
-  });
-
-  it('only forgets the renderer it was asked to forget', () => {
-    const first = registerOrderLineActions(() => 'first');
-    registerOrderLineActions(() => 'second');
-
-    first();
-    expect(renderOrderLineActions(context)).toBe('second');
-  });
-});

package/src/blocks/order-line-actions.ts

@@ -1,45 +0,0 @@
-import type { ReactNode } from 'react';
-import type { GroupedOrderLine, OrderLineLike } from './product-block-utils';
-
-export interface OrderLineActionsOrder {
-  id?: number;
-  number?: string;
-  created_date?: string;
-}
-
-export type OrderLineActionsItem = OrderLineLike & {
-  status?: { value?: string; label?: string };
-  [key: string]: unknown;
-};
-
-export interface OrderLineActionsContext {
-  order: OrderLineActionsOrder;
-  line: GroupedOrderLine<OrderLineActionsItem>;
-  isDesigner: boolean;
-}
-
-export type OrderLineActionsRenderer = (
-  context: OrderLineActionsContext
-) => ReactNode;
-
-let renderer: OrderLineActionsRenderer | null = null;
-
-export const registerOrderLineActions = (
-  fn: OrderLineActionsRenderer
-): (() => void) => {
-  renderer = fn;
-  return () => {
-    if (renderer === fn) renderer = null;
-  };
-};
-
-export const renderOrderLineActions = (
-  context: OrderLineActionsContext
-): ReactNode => {
-  if (!renderer) return null;
-  try {
-    return renderer(context) ?? null;
-  } catch {
-    return null;
-  }
-};

package/src/utils/__tests__/sanitize-rich-text.test.ts

@@ -1,80 +0,0 @@
-import { sanitizeRichText } from '../sanitize-rich-text';
-
-describe('sanitizeRichText', () => {
-  it('keeps the markup the editor writes', () => {
-    const html =
-      '<p>Sipariş <b>verirseniz</b> <i>yarın</i> <u>kapınızda</u></p><ul><li>bir</li></ul><h2>Başlık</h2><br>';
-
-    expect(sanitizeRichText(html)).toBe(
-      '<p>Sipariş <b>verirseniz</b> <i>yarın</i> <u>kapınızda</u></p><ul><li>bir</li></ul><h2>Başlık</h2><br />'
-    );
-  });
-
-  it('drops scripts, event handlers and unknown tags but keeps their text', () => {
-    const html =
-      '<p onclick="x()">a<script>alert(1)</script><custom>b</custom><img src=x onerror=alert(1)></p>';
-
-    expect(sanitizeRichText(html)).toBe('<p>ab</p>');
-  });
-
-  it('keeps only safe links and forces rel on new-tab links', () => {
-    expect(
-      sanitizeRichText(
-        '<a href="javascript:alert(1)">x</a><a href="https://gant.com" target="_blank">y</a><a href="/sss">z</a>'
-      )
-    ).toBe(
-      '<a>x</a><a href="https://gant.com" target="_blank" rel="noopener noreferrer">y</a><a href="/sss">z</a>'
-    );
-  });
-
-  it('keeps only the colour and emphasis styles', () => {
-    expect(
-      sanitizeRichText(
-        '<span style="color: #9a2320; position: fixed; background: url(x)">a</span>'
-      )
-    ).toBe('<span style="color: #9a2320">a</span>');
-  });
-
-  it('leaves text, entities and placeholders untouched', () => {
-    expect(sanitizeRichText('{{countdown}} &amp; {{add_day|4}}')).toBe(
-      '{{countdown}} &amp; {{add_day|4}}'
-    );
-    expect(sanitizeRichText('')).toBe('');
-  });
-
-  it('reads tag names the way the browser does, so no element slips through as text', () => {
-    expect(
-      sanitizeRichText(
-        '<x_y onmouseover=alert(1) style=position:fixed;inset:0>a</x_y>'
-      )
-    ).toBe('a');
-    expect(sanitizeRichText('<svg/onload=alert(1)>b')).toBe('b');
-  });
-
-  it('never lets an unfinished tag run into the markup that follows', () => {
-    expect(sanitizeRichText('<img src=x onerror=alert(1)')).toBe(
-      '&lt;img src=x onerror=alert(1)'
-    );
-    expect(sanitizeRichText('<p>a</p><b')).toBe('<p>a</p>&lt;b');
-  });
-
-  it('escapes every < that does not become a kept tag', () => {
-    expect(sanitizeRichText('a < b <3 c')).toBe('a &lt; b &lt;3 c');
-    expect(sanitizeRichText('<!DOCTYPE html><?xml version="1.0"?>x')).toBe(
-      '&lt;!DOCTYPE html>&lt;?xml version="1.0"?>x'
-    );
-    expect(sanitizeRichText('</>')).toBe('&lt;/>');
-  });
-
-  it('reads a quoted attribute value holding > as part of the tag', () => {
-    expect(sanitizeRichText('<a href="/x" title="a>b">t</a>')).toBe(
-      '<a href="/x">t</a>'
-    );
-  });
-
-  it('drops an unterminated comment or script to the end', () => {
-    expect(sanitizeRichText('a<!-- b')).toBe('a');
-    expect(sanitizeRichText('<!-->x')).toBe('x');
-    expect(sanitizeRichText('a<script>alert(1)')).toBe('a');
-  });
-});

package/src/utils/sanitize-rich-text.ts

@@ -1,215 +0,0 @@
-const ALLOWED_TAGS = new Set([
-  'p',
-  'div',
-  'br',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'ul',
-  'ol',
-  'li',
-  'b',
-  'strong',
-  'i',
-  'em',
-  'u',
-  's',
-  'span',
-  'a'
-]);
-
-const VOID_TAGS = new Set(['br']);
-
-const DROPPED_WITH_CONTENT = new Set([
-  'script',
-  'style',
-  'iframe',
-  'object',
-  'embed',
-  'template',
-  'noscript'
-]);
-
-const ALLOWED_STYLE_PROPERTIES = new Set([
-  'color',
-  'background-color',
-  'font-weight',
-  'font-style',
-  'text-decoration',
-  'text-decoration-line',
-  'text-align'
-]);
-
-const SAFE_HREF = /^(?:https?:\/\/|mailto:|tel:|\/(?!\/)|#|\?)/i;
-
-const ATTRIBUTE_PATTERN =
-  /([a-zA-Z-]+)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'>]+))/g;
-
-const escapeAttribute = (value: string): string =>
-  value
-    .replace(/&/g, '&')
-    .replace(/"/g, '"')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;');
-
-const readAttributes = (raw: string): Record<string, string> => {
-  const attributes: Record<string, string> = {};
-  let match = ATTRIBUTE_PATTERN.exec(raw);
-  while (match) {
-    attributes[match[1].toLowerCase()] = match[2] ?? match[3] ?? match[4] ?? '';
-    match = ATTRIBUTE_PATTERN.exec(raw);
-  }
-  ATTRIBUTE_PATTERN.lastIndex = 0;
-  return attributes;
-};
-
-const safeStyle = (value: string): string =>
-  value
-    .split(';')
-    .map((declaration) => declaration.trim())
-    .filter(Boolean)
-    .map((declaration) => {
-      const colon = declaration.indexOf(':');
-      if (colon === -1) return null;
-      const property = declaration.slice(0, colon).trim().toLowerCase();
-      const propertyValue = declaration.slice(colon + 1).trim();
-      if (!ALLOWED_STYLE_PROPERTIES.has(property)) return null;
-      if (/url\(|expression\(|javascript:|\\/i.test(propertyValue)) return null;
-      return `${property}: ${propertyValue}`;
-    })
-    .filter((declaration): declaration is string => declaration !== null)
-    .join('; ');
-
-const openingTag = (name: string, raw: string): string => {
-  const attributes = readAttributes(raw);
-  const kept: string[] = [];
-
-  if (name === 'a') {
-    const href = attributes.href?.trim() ?? '';
-    if (href && SAFE_HREF.test(href)) {
-      kept.push(`href="${escapeAttribute(href)}"`);
-      if (attributes.target === '_blank') {
-        kept.push('target="_blank"', 'rel="noopener noreferrer"');
-      }
-    }
-  }
-
-  const style = attributes.style ? safeStyle(attributes.style) : '';
-  if (style) kept.push(`style="${escapeAttribute(style)}"`);
-
-  const suffix = kept.length ? ` ${kept.join(' ')}` : '';
-  return VOID_TAGS.has(name) ? `<${name}${suffix} />` : `<${name}${suffix}>`;
-};
-
-/**
- * One tag, read the way the HTML tokenizer reads it: the name runs up to
- * whitespace, `/` or `>` (so `x_y`, `svg/onload` and friends are names, not
- * text), attribute values may be quoted and may hold `>`, and the tag closes
- * at the first unquoted `>`.
- *
- * `null` when the input ends inside the tag. The browser would keep reading
- * into whatever markup follows — on the server that is React's own closing
- * tag — so an unfinished tag is never passed on; the caller escapes its `<`.
- */
-interface TagToken {
-  name: string;
-  attributes: string;
-  closing: boolean;
-  end: number;
-}
-
-const isAsciiLetter = (char: string): boolean => /^[A-Za-z]$/.test(char);
-const endsTagName = (char: string): boolean => /^[\s/>]$/.test(char);
-
-const readTag = (html: string, start: number): TagToken | null => {
-  let index = start + 1;
-  const closing = html.charAt(index) === '/';
-  if (closing) index += 1;
-
-  if (!isAsciiLetter(html.charAt(index))) return null;
-  const nameStart = index;
-  while (index < html.length && !endsTagName(html.charAt(index))) index += 1;
-  const name = html.slice(nameStart, index).toLowerCase();
-
-  const attributesStart = index;
-  let quote: string | null = null;
-  while (index < html.length) {
-    const char = html.charAt(index);
-    if (quote) {
-      if (char === quote) quote = null;
-    } else if (char === '"' || char === "'") {
-      quote = char;
-    } else if (char === '>') {
-      return {
-        name,
-        attributes: html.slice(attributesStart, index),
-        closing,
-        end: index + 1
-      };
-    }
-    index += 1;
-  }
-
-  return null;
-};
-
-/**
- * The output holds no `<` this function did not write itself: every `<` in
- * the input either becomes a rebuilt, allowlisted tag with escaped attribute
- * values, or `&lt;`. Comments are dropped, the content of script-like
- * elements with them. Text and entities are otherwise left as written, so the
- * editor's `&nbsp;` and the message placeholders survive.
- */
-export const sanitizeRichText = (html: string): string => {
-  if (!html) return '';
-
-  const output: string[] = [];
-  let dropUntil: string | null = null;
-  let position = 0;
-
-  const emit = (text: string) => {
-    if (!dropUntil && text) output.push(text);
-  };
-
-  while (position < html.length) {
-    const lt = html.indexOf('<', position);
-    if (lt === -1) {
-      emit(html.slice(position));
-      break;
-    }
-    emit(html.slice(position, lt));
-
-    if (html.startsWith('<!--', lt)) {
-      const end = html.indexOf('-->', lt + 2);
-      position = end === -1 ? html.length : end + 3;
-      continue;
-    }
-
-    const tag = readTag(html, lt);
-    if (!tag) {
-      emit('&lt;');
-      position = lt + 1;
-      continue;
-    }
-    position = tag.end;
-
-    if (dropUntil) {
-      if (tag.closing && tag.name === dropUntil) dropUntil = null;
-    } else if (DROPPED_WITH_CONTENT.has(tag.name)) {
-      if (!tag.closing) dropUntil = tag.name;
-    } else if (ALLOWED_TAGS.has(tag.name)) {
-      output.push(
-        tag.closing
-          ? VOID_TAGS.has(tag.name)
-            ? ''
-            : `</${tag.name}>`
-          : openingTag(tag.name, tag.attributes)
-      );
-    }
-  }
-
-  return output.join('');
-};