@designcrowd/library.brand-page 6.2.2 → 6.2.3-ast-faq

package/src/brand-page/constants/misc.constants.ts

@@ -126,6 +126,18 @@ export const IMAGE_RESOLUTION_PRESETS = {
 export type ImagesSectionContentDisplayStyle =
   (typeof IMAGES_SECTION_CONTENT_DISPLAY_STYLES)[number];
 
+/** Centered and split are accordions; grid shows every answer. */
+export const FAQ_DISPLAY_STYLES = Object.freeze({
+  centered: 'faq-centered',
+  split: 'faq-split',
+  grid: 'faq-grid',
+} as const);
+
+export type FaqDisplayStyle =
+  (typeof FAQ_DISPLAY_STYLES)[keyof typeof FAQ_DISPLAY_STYLES];
+
+export const FAQ_MAX_ITEMS = 6;
+
 export const HEADER_CSRF_TOKEN = 'csrf-token';
 
 export const STYLE_THEME_KEYS = Object.freeze({

package/src/brand-page/constants/styles.constants.ts

@@ -40,6 +40,8 @@ export const CONTENT_TEXT_STYLE_PROPERTY_KEYS = {
   buttonTextStyle: 'buttonTextStyle',
   copyrightStyle: 'copyrightStyle',
   successMessageStyle: 'successMessageStyle',
+  questionStyle: 'questionStyle',
+  answerStyle: 'answerStyle',
 } as const;
 
 export type ContentTextStylePropertyKey =

package/src/brand-page/models/brand-page-context.model.ts

@@ -48,17 +48,10 @@ export interface AbTestResult {
 
 const AB_TEST_KEYS = {
   BP_3926_FREEMIUM_WATERMARK: 'bc-bp-3926-freemium-cta-in-website-editor',
-  // Two separate live-preview experiments — bc-net sends only the one for the
-  // current purchase state, and a user's value on each side is independent
-  // (BP-5873). Keys must match `CampaignNames.LivePreview*Test` in bc-net.
-  BP_5873_LIVE_PREVIEW_PREPURCHASE: 'bc-bp-5873-live-preview-prepurchase',
-  BP_5873_LIVE_PREVIEW_POSTPURCHASE: 'bc-bp-5873-live-preview-postpurchase',
 };
 
 export interface AbTest {
   bp_3926_freemium_watermark?: AbTestResult;
-  bp_5873_live_preview_prepurchase?: AbTestResult;
-  bp_5873_live_preview_postpurchase?: AbTestResult;
 }
 
 export const MEDIA_SIZES = {
@@ -139,21 +132,5 @@ export const getAbTestResults = (abtestKeyValues: AbTest): AbTest => {
     );
   }
 
-  // AB Test for BP-5873 - Live preview (pre- and post-purchase run separately)
-
-  if (abtestKeyValues[AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_PREPURCHASE]) {
-    abTests.bp_5873_live_preview_prepurchase = getValueType(
-      AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_PREPURCHASE,
-      abtestKeyValues[AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_PREPURCHASE],
-    );
-  }
-
-  if (abtestKeyValues[AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_POSTPURCHASE]) {
-    abTests.bp_5873_live_preview_postpurchase = getValueType(
-      AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_POSTPURCHASE,
-      abtestKeyValues[AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_POSTPURCHASE],
-    );
-  }
-
   return abTests;
 };

package/src/brand-page/models/content.model.ts

@@ -31,6 +31,7 @@ export const CONTENT_TYPES = {
   'shapes-section': 'shapes-section',
   'shop-section': 'shop-section',
   'booking-section': 'booking-section',
+  'faq-section': 'faq-section',
 } as const;
 
 export type ContentType = keyof typeof CONTENT_TYPES;

package/src/brand-page/models/index.ts

@@ -672,6 +672,27 @@ export interface BookingSectionContent extends Content {
   buttonTextStyle: TextStyleDeclaration;
 }
 
+export interface FaqItem {
+  /** Stable per-item identifier. See ImageItem.id. */
+  id: string;
+  question: RichTextValue;
+  /** Drives `question`, per item — like a section's `titleStyle` drives its title. */
+  questionStyle: TextStyleDeclaration;
+  answer: RichTextValue;
+  answerStyle: TextStyleDeclaration;
+}
+
+export interface FaqSectionContent extends Content {
+  type: 'faq-section';
+  title: RichTextValue;
+  description: RichTextValue;
+  displayStyle: string;
+  items: FaqItem[];
+  titleStyle: TextStyleDeclaration;
+  descriptionStyle: TextStyleDeclaration;
+  backgroundStyle: BrandPageCssStyle;
+}
+
 export class PageModel {
   title: string;
   contents: Content[];

package/src/brand-page/utils/content-callback-util.ts

@@ -17,6 +17,7 @@ import type {
   ButtonContent,
   PageModel,
   BookingSectionContent,
+  FaqSectionContent,
 } from '../models';
 
 export type ContentCallback = {
@@ -39,6 +40,7 @@ export type ContentCallback = {
   shopSectionContentCallback: (content: ShopContent) => void;
   buttonContentCallback: (content: ButtonContent) => void;
   bookingSectionContentCallback: (content: BookingSectionContent) => void;
+  faqSectionContentCallback: (content: FaqSectionContent) => void;
 };
 
 export const forEachPageCallContentCallback = (
@@ -101,6 +103,9 @@ export const forEachPageCallContentCallback = (
           content as BookingSectionContent,
         );
         break;
+      case 'faq-section':
+        callbacks.faqSectionContentCallback(content as FaqSectionContent);
+        break;
       case 'general-link':
       case 'website':
       case 'email':

package/src/brand-page/utils/model.util.ts

@@ -21,6 +21,7 @@ import {
   type ImageContent,
   type ImageGalleryContent,
   type BookingSectionContent,
+  type FaqSectionContent,
 } from '../models';
 
 export const isLogoContent = (content?: Content): content is LogoContent => {
@@ -97,6 +98,12 @@ export const isBookingContent = (
   return content?.type === 'booking-section';
 };
 
+export const isFaqContent = (
+  content?: Content,
+): content is FaqSectionContent => {
+  return content?.type === 'faq-section';
+};
+
 export const isAboutContent = (
   content?: Content,
 ): content is AboutSectionContent => {

package/src/brand-page/utils/view-model.util.test.ts

@@ -1121,6 +1121,102 @@ describe('container-aware text colour defaults (view-model layer)', () => {
   });
 });
 
+describe('faq-section view model', () => {
+  const faqContent = (overrides: Record<string, unknown> = {}): any => ({
+    id: 'faq-1',
+    type: 'faq-section',
+    title: 'FAQ',
+    description: '',
+    displayStyle: 'faq-split',
+    items: [
+      {
+        id: 'q1',
+        question: 'Q1',
+        questionStyle: { textStyleType: 'headings' },
+        answer: 'A1',
+        answerStyle: { textStyleType: 'paragraphs' },
+      },
+      {
+        id: 'q2',
+        question: 'Q2',
+        questionStyle: { fontSize: '1.5rem' }, // detached
+        answer: 'A2',
+        answerStyle: { textStyleType: 'paragraphs' },
+      },
+    ],
+    titleStyle: { textStyleType: 'titles' },
+    descriptionStyle: { textStyleType: 'paragraphs' },
+    backgroundStyle: {},
+    topPadding: 32,
+    bottomPadding: 32,
+    ...overrides,
+  });
+
+  test.each([
+    [BRAND_PAGE_TYPES.default, true],
+    [BRAND_PAGE_TYPES.brandContact, true],
+    [BRAND_PAGE_TYPES.brandSite, false],
+  ])('%s → isStacked %s', (brandPageType, isStacked) => {
+    const viewModel: any = mapToViewModel(
+      new PageStyles(),
+      brandPageType,
+      {},
+    )(faqContent());
+
+    expect(viewModel.type).toBe('faq-section');
+    expect(viewModel.isStacked).toBe(isStacked);
+    expect(viewModel.items).toHaveLength(2);
+  });
+
+  test('carries the maker panel’s open item only for its own content', () => {
+    const map = (contentId: string): any =>
+      mapToViewModel(new PageStyles(), BRAND_PAGE_TYPES.brandSite, {
+        activeItemIdByContentId: { [contentId]: 'q2' },
+      })(faqContent());
+
+    expect(map('faq-1').activeItemId).toBe('q2');
+    expect(map('another-section').activeItemId).toBeUndefined();
+  });
+
+  test("each item's question and answer follow their global text roles until detached", () => {
+    const pageStyles = new PageStyles();
+    const { headings, paragraphs } = pageStyles.textStyles.textStyleOptions;
+
+    headings.style.fontSize = '1.875rem';
+    headings.style.color = '#00ff00';
+    headings.isModified = true;
+    paragraphs.style.color = '#0000ff';
+
+    const content = faqContent();
+    const viewModel: any = mapToViewModel(
+      pageStyles,
+      BRAND_PAGE_TYPES.brandSite,
+      {},
+    )(content);
+    const [linked, detached] = viewModel.items;
+
+    expect(linked.questionStyle.fontSize).toBe('1.875rem');
+    expect(linked.questionStyle.color).toBe('#00ff00');
+    expect(linked.answerStyle.color).toBe('#0000ff');
+    expect(detached.questionStyle.fontSize).toBe('1.5rem');
+    expect(detached.answerStyle.color).toBe('#0000ff');
+    // Resolution copies; the stored item keeps only its link.
+    expect(content.items[0].questionStyle).toEqual({
+      textStyleType: 'headings',
+    });
+  });
+
+  test('content without items maps without throwing', () => {
+    const viewModel: any = mapToViewModel(
+      new PageStyles(),
+      BRAND_PAGE_TYPES.brandSite,
+      {},
+    )(faqContent({ items: undefined }));
+
+    expect(viewModel.items).toEqual([]);
+  });
+});
+
 describe('mapToPageHeaderViewModel header button', () => {
   const headerButton: HeaderButton = {
     isVisible: true,

package/src/brand-page/utils/view-model.util.ts

@@ -36,6 +36,7 @@ import type {
   LogoTemplateImageModel,
   ShopContent,
   BookingSectionContent,
+  FaqSectionContent,
   TextShapeItem,
   GettyVideoMedia,
   AbstractMedia,
@@ -56,6 +57,7 @@ import {
   BUTTON_LINK_TYPE,
   NavigationMenuStyles,
   type TextItem,
+  type FaqItem,
 } from '../models';
 import type {
   ImageViewModel,
@@ -84,6 +86,7 @@ import type {
   ShapesSectionViewModel,
   ShopViewModel,
   BookingSectionViewModel,
+  FaqSectionViewModel,
   GettyVideoViewModel,
   PageStylesViewModel,
   BackgroundStylesViewModel,
@@ -1038,6 +1041,42 @@ const mapToTestimonialSectionViewModel = (
   );
 };
 
+// An item's question/answer styles are CONTENT_TEXT_STYLE_PROPERTY_KEYS, so the section
+// resolver handles them when handed the item.
+const mapFaqItem = (item: FaqItem, styles: PageStyles): FaqItem =>
+  applyViewModelTextStyles(
+    {
+      ...item,
+      questionStyle: { ...item.questionStyle },
+      answerStyle: { ...item.answerStyle },
+    } as unknown as ContentViewModel,
+    styles,
+  ) as unknown as FaqItem;
+
+const mapToFaqSectionViewModel = (
+  content: FaqSectionContent,
+  styles: PageStyles,
+  brandPageType: BrandPageType,
+  options: ViewModelMappingOptions,
+): FaqSectionViewModel => {
+  return applyViewModelTextStyles(
+    {
+      ...content,
+      role: content.type,
+      type: 'faq-section',
+      // No `color` pre-seed — these styles are CONTENT_TEXT_STYLE_PROPERTY_KEYS
+      // (see the testimonial mapper), resolved per item for the item styles.
+      titleStyle: { ...content.titleStyle },
+      descriptionStyle: { ...content.descriptionStyle },
+      items: (content.items ?? []).map((item) => mapFaqItem(item, styles)),
+      isFullWidth: true,
+      isStacked: brandPageType !== BRAND_PAGE_TYPES.brandSite,
+      activeItemId: options.activeItemIdByContentId?.[content.id],
+    },
+    styles,
+  );
+};
+
 const mapToSocialLinksViewModel = (
   content: SocialLinksContent,
   styles: PageStyles,
@@ -1511,6 +1550,14 @@ export const mapToViewModel =
           styles,
         );
 
+      case 'faq-section':
+        return mapToFaqSectionViewModel(
+          content as FaqSectionContent,
+          styles,
+          brandPageType,
+          options,
+        );
+
       case 'about-section':
         return mapToAboutSectionViewModel(
           content as AboutSectionContent,
@@ -1586,6 +1633,8 @@ interface ViewModelMappingOptions {
     previewImageUrl: string,
     assetId: string,
   ) => void;
+  /** Maker-only UI state: content id → the item its settings panel has open. Never persisted. */
+  activeItemIdByContentId?: Record<string, string | undefined>;
 }
 
 const mapBackgroundStylesToViewModel = (

package/src/brand-page/view-models.ts

@@ -35,6 +35,7 @@ import type {
   LogoTemplateImageModel,
   CookieOptions,
   BookingSectionContent,
+  FaqSectionContent,
   MediaTypes,
   TextStyles,
   BackgroundStyle,
@@ -67,7 +68,8 @@ export type ViewModelType =
   | 'social-links'
   | 'shapes-section'
   | 'shop-section'
-  | 'booking-section';
+  | 'booking-section'
+  | 'faq-section';
 
 export interface ContentViewModel {
   id: string;
@@ -249,6 +251,15 @@ export interface BookingSectionViewModel
   isFullWidth: boolean;
 }
 
+export interface FaqSectionViewModel
+  extends ContentViewModel, Omit<FaqSectionContent, 'type'> {
+  isFullWidth: boolean;
+  /** brand.page / brand.contact: split and grid always use their stacked layout. */
+  isStacked: boolean;
+  /** Maker-only: the item the settings panel has open, so the canvas shows it. */
+  activeItemId?: string;
+}
+
 export interface PageHeaderViewModel extends Omit<
   PageHeaderDesktop | PageHeaderMobile,
   | 'logoImage'

package/src/brand-page-maker/components/action-bar/ActionBar.mixin.ts

@@ -17,16 +17,6 @@ export default defineComponent({
 
     return {
       isAdminMaker: computed(() => containerStore.isAdminMaker),
-      // BP-5873: the Preview button is behind an AB test, and pre/post purchase are
-      // two separate experiments. Pick the one for the current purchase state — a
-      // user's value on the other side is independent and must not leak across.
-      isLivePreviewEnabled: computed(() => {
-        const experiment = containerStore.isPrePurchase
-          ? containerStore.abTests.bp_5873_live_preview_prepurchase
-          : containerStore.abTests.bp_5873_live_preview_postpurchase;
-
-        return !!experiment?.isVariation;
-      }),
       isSaving: computed(() => brandPageMakerStore.isSaving),
       isPublished: computed(() => brandPageMakerStore.isPublished),
       isPublishButtonEnabled: computed(

package/src/brand-page-maker/components/action-bar/ActionBarNavigation.test.ts

@@ -3,31 +3,13 @@ import { createPinia, setActivePinia } from 'pinia';
 import { shallowMount } from '@vue/test-utils';
 import ActionBarNavigation from './ActionBarNavigation.vue';
 import { useBrandPageContainerStore } from '@brand-page-maker/stores';
-import { getAbTestResults } from '@brand-page/models/brand-page-context.model';
-
-// Must match `CampaignNames.LivePreview*` in bc-net. The two experiments share
-// one set of variation values — they're told apart by campaign key, not value.
-const PREPURCHASE = 'bc-bp-5873-live-preview-prepurchase';
-const POSTPURCHASE = 'bc-bp-5873-live-preview-postpurchase';
-const VARIATION_1 = 'bp-5873-variation-1';
-const CONTROL = 'bp-5873-control';
 
 const mountBar = () => shallowMount(ActionBarNavigation);
 
 const hasPreviewButton = (wrapper: ReturnType<typeof mountBar>) =>
   wrapper.find('[data-test-preview-button]').exists();
 
-// The AB value arrives as the raw bc-net campaign string, so go through the real
-// parser rather than hand-building an AbTestResult — that's the contract under test.
-const setAbTest = (
-  store: ReturnType<typeof useBrandPageContainerStore>,
-  key: string,
-  value: string,
-) => {
-  store.abTests = getAbTestResults({ [key]: value } as never);
-};
-
-describe('ActionBarNavigation — BP-5873 preview AB test', () => {
+describe('ActionBarNavigation — Preview button', () => {
   let containerStore: ReturnType<typeof useBrandPageContainerStore>;
 
   beforeEach(() => {
@@ -35,39 +17,18 @@ describe('ActionBarNavigation — BP-5873 preview AB test', () => {
     containerStore = useBrandPageContainerStore();
   });
 
-  test('hides Preview when no AB value has been sent', () => {
-    expect(hasPreviewButton(mountBar())).toBe(false);
-  });
-
-  test('post-purchase: shows Preview on variation-1, hides it on control', () => {
-    containerStore.isPrePurchase = false;
-
-    setAbTest(containerStore, POSTPURCHASE, VARIATION_1);
-    expect(hasPreviewButton(mountBar())).toBe(true);
-
-    setAbTest(containerStore, POSTPURCHASE, CONTROL);
-    expect(hasPreviewButton(mountBar())).toBe(false);
-  });
-
-  test('pre-purchase: shows Preview on variation-1, hides it on control', () => {
-    containerStore.isPrePurchase = true;
+  test.each([
+    ['pre-purchase', true],
+    ['post-purchase', false],
+  ])('shows Preview to the customer %s', (_, isPrePurchase) => {
+    containerStore.isPrePurchase = isPrePurchase;
 
-    setAbTest(containerStore, PREPURCHASE, VARIATION_1);
     expect(hasPreviewButton(mountBar())).toBe(true);
-
-    setAbTest(containerStore, PREPURCHASE, CONTROL);
-    expect(hasPreviewButton(mountBar())).toBe(false);
   });
 
-  // Two separate experiments, so a value on one side must never satisfy the other —
-  // otherwise a post-purchase variation would leak the button into pre-purchase.
-  test('the two experiments never read each other', () => {
-    containerStore.isPrePurchase = true;
-    setAbTest(containerStore, POSTPURCHASE, VARIATION_1);
-    expect(hasPreviewButton(mountBar())).toBe(false);
+  test('hides Preview in the admin maker', () => {
+    containerStore.isAdminMaker = true;
 
-    containerStore.isPrePurchase = false;
-    setAbTest(containerStore, PREPURCHASE, VARIATION_1);
     expect(hasPreviewButton(mountBar())).toBe(false);
   });
 
@@ -75,8 +36,6 @@ describe('ActionBarNavigation — BP-5873 preview AB test', () => {
   // Save drops out. Preview must be a real column like the rest — while it was content
   // width, Publish ate the whole remaining row on a published site.
   test('Preview shares the mobile row equally with the other buttons', () => {
-    containerStore.isPrePurchase = false;
-    setAbTest(containerStore, POSTPURCHASE, VARIATION_1);
     containerStore.brandPageStatus = 'Published';
 
     const wrapper = mountBar();

package/src/brand-page-maker/components/action-bar/ActionBarNavigation.vue

@@ -4,7 +4,7 @@
     class="tw-flex tw-items-center tw-border-t tw-border-solid tw-border-grayscale-600 tw-h-12 tw-px-2 lg:tw-px-0 lg:tw-h-auto lg:tw-border-none tw-gap-3 lg:tw-gap-5 tw-w-full lg:tw-justify-end tw-box-border"
   >
     <Button
-      v-if="!isAdminMaker && isLivePreviewEnabled"
+      v-if="!isAdminMaker"
       :label="constantsTr('previewDisplayName')"
       variant="no-border"
       :white="true"

package/src/brand-page-maker/components/rich-text-editor/RichTextEditor.test.ts

@@ -0,0 +1,165 @@
+import { vi } from 'vitest';
+import { flushPromises, mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import RichTextEditor from './RichTextEditor.vue';
+import { useUiContentSettingsStore } from '@shared/content-settings/store';
+
+// The toolbar capitalises translated role names at setup; tests carry no bundles.
+vi.mock('@src/composables/useTranslate', async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  styleSettingsTr: (key: string) => key,
+  commonTr: (key: string) => key,
+}));
+
+const doc = {
+  type: 'doc',
+  content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Hi' }] }],
+};
+
+const itemStyleTarget = {
+  itemsField: 'items',
+  index: 1,
+  styleField: 'questionStyle',
+};
+
+const mountEditor = (props: Record<string, unknown> = {}) =>
+  mount(RichTextEditor, {
+    props: {
+      id: 'faq-1-question',
+      name: 'question',
+      rawId: 'faq-1',
+      modelValue: doc,
+      ...props,
+    } as any,
+    global: {
+      directives: { clickOutside: {} },
+      stubs: { FontPicker: true },
+    },
+  });
+
+const editorOf = (wrapper: ReturnType<typeof mountEditor>) =>
+  (wrapper.find('.ProseMirror').element as any).editor;
+
+describe('RichTextEditor', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('an item editor has the full section-title toolbar', () => {
+    const tags = mountEditor({ itemStyleTarget })
+      .find('.style-editor')
+      .findAll('[data-test-tag]')
+      .map((el) => el.attributes('data-test-tag'));
+
+    expect(tags).toEqual(
+      expect.arrayContaining([
+        'text-style-dropdown',
+        'font-style-dropdown',
+        'font-size-stepper',
+        'text-color-picker',
+        'bold-toolbar',
+        'link-toolbar',
+      ]),
+    );
+  });
+
+  test.each([
+    ['an item editor', { itemStyleTarget }, 'updateListItemTextStyles'],
+    ['a section field', {}, 'updateTextStyles'],
+  ])(
+    '%s writes its toolbar styles through %s',
+    async (_label, props, expectedAction) => {
+      const store = useUiContentSettingsStore();
+      const spies = {
+        updateListItemTextStyles: vi.spyOn(store, 'updateListItemTextStyles'),
+        updateTextStyles: vi.spyOn(store, 'updateTextStyles'),
+      };
+      const wrapper = mountEditor(props);
+
+      await flushPromises();
+      Object.values(spies).forEach((spy) => spy.mockClear());
+      await wrapper.find('[data-test-tag="bold-toolbar"]').trigger('click');
+
+      Object.entries(spies).forEach(([action, spy]) =>
+        expect(spy).toHaveBeenCalledTimes(action === expectedAction ? 1 : 0),
+      );
+
+      if (expectedAction === 'updateListItemTextStyles') {
+        expect(spies.updateListItemTextStyles).toHaveBeenCalledWith(
+          expect.objectContaining({
+            id: 'faq-1',
+            target: itemStyleTarget,
+            value: expect.objectContaining({ fontWeight: 'bold' }),
+          }),
+        );
+      }
+    },
+  );
+
+  test('picking a text style on an item editor links that item, not the section', async () => {
+    const store = useUiContentSettingsStore();
+    const updateListItemTextStyles = vi.spyOn(
+      store,
+      'updateListItemTextStyles',
+    );
+    const updateTextStyles = vi.spyOn(store, 'updateTextStyles');
+    const wrapper = mountEditor({ itemStyleTarget });
+
+    await flushPromises();
+    updateTextStyles.mockClear();
+
+    const headings = wrapper
+      .findAll('.drop-down-item')
+      .find((el) => el.text().toLowerCase().includes('headings'));
+
+    await headings!.trigger('click');
+
+    expect(updateListItemTextStyles).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target: itemStyleTarget,
+        value: expect.objectContaining({ textStyleType: 'headings' }),
+      }),
+    );
+    expect(updateTextStyles).not.toHaveBeenCalled();
+  });
+
+  test("a linked item editor's mount-time style sync lands on the item, as a hydration write", async () => {
+    const store = useUiContentSettingsStore();
+    const updateListItemTextStyles = vi.spyOn(
+      store,
+      'updateListItemTextStyles',
+    );
+    const updateTextStyles = vi.spyOn(store, 'updateTextStyles');
+
+    mountEditor({ itemStyleTarget, styles: { textStyleType: 'headings' } });
+    await flushPromises();
+
+    expect(updateListItemTextStyles).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target: itemStyleTarget,
+        isHydrationWrite: true,
+      }),
+    );
+    expect(updateTextStyles).not.toHaveBeenCalled();
+  });
+
+  // The toolbar has taken focus by the time its command runs; tagging that
+  // write as hydration would fold it into the previous undo entry.
+  test('a toolbar command on a selection emits a user write, not a hydration write', async () => {
+    const wrapper = mountEditor();
+
+    await flushPromises();
+
+    const editor = editorOf(wrapper);
+
+    editor.commands.selectAll();
+    editor.commands.blur();
+    await wrapper.find('[data-test-tag="bold-toolbar"]').trigger('click');
+
+    const emits = wrapper.emitted('update:modelValue') ?? [];
+    const [value, meta] = emits[emits.length - 1] as [any, any];
+
+    expect(JSON.stringify(value)).toContain('"bold"');
+    expect(meta.isHydrationWrite).toBe(false);
+  });
+});