@designcrowd/library.brand-page 6.0.26-json-prereq-2 → 6.0.27-websitev2-dev-1

package/src/brand-page-maker/composables/rich-text-editor/extensions/FontSize.ts

@@ -0,0 +1,73 @@
+import { Extension } from '@tiptap/core';
+import '@tiptap/extension-text-style';
+
+export type FontSizeOptions = {
+  types: string[];
+};
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    fontSize: {
+      /**
+       * Set the font size
+       */
+      setFontSize: (fontSize: string) => ReturnType;
+      /**
+       * Unset the font size
+       */
+      unsetFontSize: () => ReturnType;
+    };
+  }
+}
+
+export const FontSize = Extension.create<FontSizeOptions>({
+  name: 'fontSize',
+
+  addOptions() {
+    return {
+      types: ['textStyle'],
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontSize: {
+            default: null,
+            parseHTML: (element) =>
+              element.style.fontSize.replace(/['"]+/g, ''),
+            renderHTML: (attributes) => {
+              if (!attributes.fontSize) {
+                return {};
+              }
+
+              return {
+                style: `font-size: ${attributes.fontSize}`,
+              };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      setFontSize:
+        (fontSize) =>
+        ({ chain }) => {
+          return chain().setMark('textStyle', { fontSize }).run();
+        },
+      unsetFontSize:
+        () =>
+        ({ chain }) => {
+          return chain()
+            .setMark('textStyle', { fontSize: null })
+            .removeEmptyTextStyle()
+            .run();
+        },
+    };
+  },
+});

package/src/brand-page-maker/composables/rich-text-editor/extensions/LineHeight.ts

@@ -0,0 +1,85 @@
+import { Extension } from '@tiptap/core';
+
+export type LineHeightOptions = {
+  /**
+   * Node / mark types that should carry the `lineHeight` attribute.
+   * Defaults to `['textStyle']` to piggy‑back on TipTap’s built‑in mark.
+   */
+  types: string[];
+};
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    lineHeight: {
+      /**
+       * Apply a line‑height to the current selection (or stored marks).
+       */
+      setLineHeight: (heightValue: string) => ReturnType;
+      /**
+       * Remove any line‑height attribute.
+       */
+      unsetLineHeight: () => ReturnType;
+      /**
+       * Read the current line‑height from the selection / stored marks.
+       */
+      getLineHeight: () => ReturnType;
+    };
+  }
+}
+
+export const LineHeight = Extension.create<LineHeightOptions>({
+  name: 'lineHeight',
+
+  addOptions() {
+    return {
+      types: ['textStyle'],
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          lineHeight: {
+            default: null,
+            parseHTML: (element) =>
+              (element.style.lineHeight || '').replace(/['"]+/g, ''),
+            renderHTML: (attributes) => {
+              if (!attributes.lineHeight) {
+                return {};
+              }
+
+              return { style: `line-height: ${attributes.lineHeight}` };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      setLineHeight:
+        (lineHeight) =>
+        ({ chain }) => {
+          return chain().setMark('textStyle', { lineHeight }).run();
+        },
+
+      unsetLineHeight:
+        () =>
+        ({ chain }) => {
+          return chain()
+            .setMark('textStyle', { lineHeight: null })
+            .removeEmptyTextStyle()
+            .run();
+        },
+
+      getLineHeight:
+        () =>
+        ({ editor }) => {
+          return editor.getAttributes('textStyle').lineHeight;
+        },
+    };
+  },
+});

package/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.ts

@@ -8,7 +8,18 @@ import {
   watch,
 } from 'vue';
 import { Editor } from '@tiptap/vue-3';
-import { getRteExtensions } from './getRteExtensions';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import TextStyle from '@tiptap/extension-text-style';
+import TextAlign from '@tiptap/extension-text-align';
+import FontFamily from '@tiptap/extension-font-family';
+import ColorExtension from '@tiptap/extension-color';
+import { FontSize } from './extensions/FontSize';
+import { LetterSpacing } from './extensions/LetterSpacing';
+import { LineHeight } from './extensions/LineHeight';
+import Highlight from '@tiptap/extension-highlight';
+import Placeholder from '@tiptap/extension-placeholder';
+import Link from '@tiptap/extension-link';
 import type { StyleTextFontFamilyOption } from '@shared/style-settings/models';
 import { createFormattingActions } from './formatting';
 import { useTextAlign } from './textAlign';
@@ -20,7 +31,7 @@ import {
   emToPx,
   isStyleChanged,
   pxToEm,
-  sanitizeRteJson,
+  sanitiseClientSideRTE,
   skipStyleDetection,
 } from '@brand-page-maker/utils';
 import type { HyperlinkType, TextStyles } from '@brand-page';
@@ -38,7 +49,9 @@ import {
 import { useUiContentSettingsStore } from '@shared/content-settings/store';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { AllSelection } from 'prosemirror-state';
-import { useHyperlink } from './hyperlink';
+import { MaxLength } from './extensions/MaxLength';
+import { AutoLink } from './extensions/AutoLink';
+import { isHrefPageId, useHyperlink } from './hyperlink';
 import { useBubbleMenu } from './bubbleMenu';
 import {
   hasLogoColorVar,
@@ -79,7 +92,7 @@ interface UseRichTextEditorReturn {
   hyperlinkValue: ComputedRef<{ id: string; name: string; value: string }>;
   setHyperlinkUrlValue: (url: string) => void;
   shouldShow: ({ editor, state }: { editor: any; state: any }) => boolean;
-  bubbleMenuOptions: Record<string, any>;
+  tippyOptions: Record<string, any>;
   handleAdminColorChange: (
     color: {
       id: string;
@@ -116,7 +129,44 @@ export const useExternalRichTextEditor = (): {
 } => {
   const externalEditor = new Editor({
     editable: false,
-    extensions: getRteExtensions({ includeLinkRel: true }),
+    extensions: [
+      StarterKit,
+      Underline,
+      TextStyle.configure({ mergeNestedSpanStyles: true }),
+      TextAlign.configure({
+        types: ['heading', 'paragraph'],
+      }),
+      FontFamily.configure({
+        types: ['textStyle'],
+      }),
+      FontSize,
+      LetterSpacing,
+      LineHeight,
+      ColorExtension.configure({
+        types: ['textStyle'],
+      }),
+      Highlight.configure({
+        multicolor: true,
+      }),
+      Link.configure({
+        openOnClick: false,
+        defaultProtocol: 'https',
+        autolink: true,
+        HTMLAttributes: (attrs) => {
+          const href = attrs.href;
+          const isExternal =
+            href && (href.startsWith('http://') || href.startsWith('https://'));
+
+          return {
+            rel: 'noopener noreferrer',
+            target: isExternal ? '_blank' : null,
+          };
+        },
+        isAllowedUri: (url, ctx) =>
+          ctx.defaultValidate(url) || isHrefPageId(url),
+      }),
+      AutoLink,
+    ],
   });
 
   return {
@@ -164,13 +214,54 @@ export const useRichTextEditor = (
   const editor = new Editor({
     content: model.value ?? '',
     editable: !props.readOnly,
-    extensions: getRteExtensions({
-      restrictStarterKit: true,
-      editing: {
+    extensions: [
+      StarterKit.configure({
+        bulletList: false,
+        orderedList: false,
+        listItem: false,
+        horizontalRule: false,
+        codeBlock: false,
+        code: false,
+      }),
+      Underline,
+      TextStyle.configure({ mergeNestedSpanStyles: true }),
+      TextAlign.configure({
+        types: ['heading', 'paragraph'],
+      }),
+      FontFamily.configure({
+        types: ['textStyle'],
+      }),
+      FontSize,
+      LetterSpacing,
+      LineHeight,
+      ColorExtension.configure({
+        types: ['textStyle'],
+      }),
+      Highlight.configure({
+        multicolor: true,
+      }),
+      Placeholder.configure({
         placeholder: props.placeholder,
-        maxLength: props.maxLength,
-      },
-    }),
+      }),
+      MaxLength.configure({ maxLength: props.maxLength }),
+      Link.configure({
+        openOnClick: false,
+        defaultProtocol: 'https',
+        autolink: true,
+        HTMLAttributes: (attrs) => {
+          const href = attrs.href;
+          const isExternal =
+            href && (href.startsWith('http://') || href.startsWith('https://'));
+
+          return {
+            target: isExternal ? '_blank' : null,
+          };
+        },
+        isAllowedUri: (url, ctx) =>
+          ctx.defaultValidate(url) || isHrefPageId(url),
+      }),
+      AutoLink,
+    ],
     editorProps: {
       handleDOMEvents: {
         drop(view, event: DragEvent) {
@@ -349,7 +440,7 @@ export const useRichTextEditor = (
     applyHyperlinkToEditor,
   } = useHyperlink(editor);
 
-  const { shouldShow, bubbleMenuOptions } = useBubbleMenu(
+  const { shouldShow, tippyOptions } = useBubbleMenu(
     editor,
     isHyperlinkPopupOpen,
   );
@@ -381,14 +472,8 @@ export const useRichTextEditor = (
 
       const isExternalMutation = updateRichTextEditor.value || appliedSinceLast;
 
-      // Compare in the stored (JSON) format so a JSON model value isn't always
-      // seen as "changed" against the editor's HTML (which would re-run
-      // setContent and reset the user's just-applied styles).
-      const hasChanged =
-        JSON.stringify(editor.getJSON()) !== JSON.stringify(newValue);
-
-      if (isExternalMutation && hasChanged) {
-        editor.commands.setContent(newValue, { emitUpdate: false });
+      if (isExternalMutation && editor.getHTML() !== newValue) {
+        editor.commands.setContent(newValue, false);
         updateRichTextEditor.value = false;
         //text style type is not switching when reordering
         textStyleTypeOptions.forEach((item) => {
@@ -418,13 +503,12 @@ export const useRichTextEditor = (
     }
   });
 
-  // Update model when editor content changes. RTE content is stored as Tiptap
-  // JSON (BP-5787). getJSON() is already in hand (the editor holds the doc) and
-  // is sanitised natively — no getHTML(), no DOMPurify, no extra editor — so
-  // the per-keystroke path allocates nothing heavy.
+  // Update model when editor content changes
   editor.on('update', () => {
+    const sanitizedData = sanitiseClientSideRTE(editor.getHTML());
+
     // An update fired while the editor is unfocused is TipTap rewriting the
-    // model back into its canonical form during mount rehydration or a
+    // model back into its canonical HTML during mount rehydration or a
     // programmatic setContent — not a user edit. Tag the emit so the write
     // folds into the current undo head instead of pushing a phantom entry
     // (BP-5810). The flag travels WITH the value through the debounced
@@ -438,7 +522,7 @@ export const useRichTextEditor = (
     // the RTE only mounts inside an already-open settings drawer and the user
     // focuses it before formatting, so this doesn't occur — revisit if a
     // consumer ever drives toolbar actions on an unfocused editor.
-    emit('update:modelValue', sanitizeRteJson(editor.getJSON()), {
+    emit('update:modelValue', sanitizedData.sanitizedHtml, {
       isHydrationWrite: !editor.isFocused,
     });
   });
@@ -965,7 +1049,7 @@ export const useRichTextEditor = (
     hyperlinkValue,
     setHyperlinkUrlValue,
     shouldShow,
-    bubbleMenuOptions,
+    tippyOptions,
     handleAdminColorChange,
   };
 };

package/src/brand-page-maker/utils/index.ts

@@ -7,8 +7,6 @@ export * from './url.util';
 export * from './slug.util';
 export * from './text.util';
 export * from './rich-text-editor.util';
-export * from './rte-render.util';
-export * from './rte-sanitize.util';
 
 export const isColorMatched = (color: string | null | undefined): boolean => {
   if (!color) return false;

package/src/brand-page-maker/utils/rich-text-editor.util.test.ts

@@ -8,7 +8,6 @@ import {
   getUpdatedHTMLFromEditor,
   sanitiseClientSideRTE,
   getRTEColor,
-  getRteTextLength,
 } from './rich-text-editor.util';
 import type { TextStyleDeclaration } from '@brand-page';
 
@@ -76,40 +75,8 @@ describe('hasHTML', () => {
   });
 });
 
-describe('getRteTextLength', () => {
-  it('returns the raw length for a plain string (unchanged legacy behaviour)', () => {
-    expect(getRteTextLength('hello')).toBe(5);
-    expect(getRteTextLength('<p>hello</p>')).toBe('<p>hello</p>'.length);
-    expect(getRteTextLength('')).toBe(0);
-  });
-
-  it('returns visible-text length for a Tiptap JSON doc (not undefined/throw)', () => {
-    const doc = {
-      type: 'doc',
-      content: [
-        {
-          type: 'paragraph',
-          content: [
-            { type: 'text', text: 'hello ' },
-            { type: 'text', marks: [{ type: 'bold' }], text: 'world' },
-          ],
-        },
-      ],
-    };
-
-    // "hello world" — measured from the text nodes, not the JSON wrapper.
-    expect(getRteTextLength(doc)).toBe(11);
-  });
-
-  it('returns 0 for null/undefined and an empty doc', () => {
-    expect(getRteTextLength(null)).toBe(0);
-    expect(getRteTextLength(undefined)).toBe(0);
-    expect(getRteTextLength({ type: 'doc', content: [] })).toBe(0);
-  });
-});
-
 describe('getUpdatedHTMLFromEditor', () => {
-  it('applies style commands and returns updated JSON', () => {
+  it('applies style commands and returns updated HTML', () => {
     // Mock editor
     const runMock = vi.fn();
     const chain = {
@@ -152,7 +119,7 @@ describe('getUpdatedHTMLFromEditor', () => {
         },
       },
       chain: () => chain as any,
-      getJSON: () => ({ type: 'doc', content: [{ type: 'paragraph' }] }),
+      getHTML: () => '<div>styled</div>',
     } as unknown as Editor;
 
     const newStyle = {
@@ -170,8 +137,7 @@ describe('getUpdatedHTMLFromEditor', () => {
 
     expect(externalEditor.commands.setContent).toHaveBeenCalledWith('foo');
     expect(runMock).toHaveBeenCalled();
-    // BP-5787: returns the JSON form (consistent with JSON storage).
-    expect(result).toEqual({ type: 'doc', content: [{ type: 'paragraph' }] });
+    expect(result).toBe('<div>styled</div>');
   });
 });
 

package/src/brand-page-maker/utils/rich-text-editor.util.ts

@@ -1,4 +1,4 @@
-import type { ChainedCommands, Editor, JSONContent } from '@tiptap/vue-3';
+import type { ChainedCommands, Editor } from '@tiptap/vue-3';
 import type { EditorState, Transaction, Selection } from 'prosemirror-state';
 import {
   STYLE_THEME_KEYS,
@@ -19,7 +19,6 @@ import {
   type RequestPaymentContent,
   type SupportMeContent,
   type ShopContent,
-  type RichTextValue,
 } from '@brand-page';
 import type { PageSettingsState } from '@shared/page-settings/store';
 import type { StyleSettingsState } from '@shared/style-settings/store';
@@ -244,38 +243,8 @@ export const skipStyleDetection = (chain: ChainedCommands, marks?: Mark[]) =>
     return true;
   });
 
-/**
- * BP-5787 — canonical discriminator for the JSON RTE model: a ProseMirror
- * document is an object with `type: 'doc'`.
- */
-export const isTiptapDocument = (value: unknown): value is JSONContent =>
-  typeof value === 'object' &&
-  value !== null &&
-  (value as JSONContent).type === 'doc';
-
-/**
- * Extract visible plain text from a Tiptap JSON document (concatenated text
- * nodes). Dependency-free — no editor instantiation.
- */
-export const getRteJsonPlainText = (doc: JSONContent): string => {
-  const parts: string[] = [];
-
-  const walk = (node: JSONContent): void => {
-    if (typeof node.text === 'string') parts.push(node.text);
-
-    node.content?.forEach(walk);
-  };
-
-  walk(doc);
-
-  return parts.join(' ').replace(/\s+/g, ' ').trim();
-};
-
-// Accepts a legacy inline-HTML string or a Tiptap JSON document (BP-5787).
-export const hasRTEContent = (content: unknown): boolean => {
-  if (isTiptapDocument(content)) return true;
-
-  if (typeof content !== 'string' || content.length === 0) return false;
+export const hasRTEContent = (content: string): boolean => {
+  if (!content || content.length === 0) return false;
 
   const trimmed = content.trim();
   const tagWrapRegex = /^<([A-Za-z][A-Za-z0-9-]*)\b[^>]*>[\s\S]*<\/\1>$/;
@@ -283,11 +252,7 @@ export const hasRTEContent = (content: unknown): boolean => {
   return tagWrapRegex.test(trimmed);
 };
 
-export const getPlainTextFromRTE = (content: unknown): string => {
-  if (isTiptapDocument(content)) {
-    return getRteJsonPlainText(content);
-  }
-
+export const getPlainTextFromRTE = (content: string): string => {
   if (typeof content !== 'string') {
     return '';
   }
@@ -309,22 +274,6 @@ export const getPlainTextFromRTE = (content: unknown): string => {
   return plainText.trim();
 };
 
-/**
- * BP-5787 — visible-text length of an RTE value, for the maker item-field
- * max-length / emptiness checks. A plain string keeps its raw `.length`, so the
- * pre-JSON behaviour is byte-for-byte identical; a Tiptap JSON doc measures its
- * concatenated visible text. Without this, `doc.length` is `undefined` (silently
- * disabling the check) and `doc.trim()` throws — the class of bug that survived
- * the `RichTextValue` widening because Vue Options-API `this`/item access is `any`.
- */
-export const getRteTextLength = (
-  value: RichTextValue | null | undefined,
-): number => {
-  if (typeof value === 'string') return value.length;
-
-  return value ? getRteJsonPlainText(value).length : 0;
-};
-
 export const replaceTextInRTE = (
   existingHtml: string,
   newText: string,
@@ -772,20 +721,16 @@ export const switchAllContentToRTE = (
 
 export const getUpdatedHTMLFromEditor = (
   externalEditor: Editor,
-  contentText: RichTextValue,
+  contentText: string,
   newContentStyle: TextStyleDeclaration,
 ) => {
   if (!contentText) {
     return contentText;
   }
 
-  // BP-5787: accept a string (legacy HTML) or a Tiptap JSON doc. setContent
-  // handles both; only the newline-escaping shim applies to strings.
-  const content =
-    typeof contentText === 'string' &&
-    contentText.includes(ESCAPED_NEWLINE_CHARACTER)
-      ? getRenderText(contentText)
-      : contentText;
+  const content = contentText.includes(ESCAPED_NEWLINE_CHARACTER)
+    ? getRenderText(contentText)
+    : contentText;
 
   externalEditor.commands.setContent(content);
 
@@ -843,9 +788,9 @@ export const getUpdatedHTMLFromEditor = (
   chain = newContentStyle?.fontStyle ? chain.setItalic() : chain.unsetItalic();
 
   chain.run();
+  const html = externalEditor.getHTML();
 
-  // BP-5787: return the JSON form, consistent with how RTE is now stored.
-  return externalEditor.getJSON();
+  return html;
 };
 
 // Helper to build stored marks from a style declaration
@@ -969,7 +914,7 @@ export const sanitiseClientSideRTE = (html: string): SanitizationResult => {
 /**
  * Validates if an href value is safe and returns a sanitized version
  */
-export const validateAndSanitizeHref = (href: string): string | null => {
+const validateAndSanitizeHref = (href: string): string | null => {
   if (!href || typeof href !== 'string') return null;
 
   // Trim whitespace and decode entities

package/src/brand-page-maker/validators/field.validator.ts

@@ -1,6 +1,6 @@
 import { isURL, isEmail, isTel } from '@utils/validator.util';
 import type { ItemFieldType, Validator } from '@brand-page-maker/models';
-import { YOUTUBE_URL_RE, isTiptapDocument } from '@brand-page-maker/utils';
+import { YOUTUBE_URL_RE } from '@brand-page-maker/utils';
 import { validatorTr } from '@src/composables/useTranslate';
 
 const addressValueValidator: Validator = {
@@ -76,15 +76,7 @@ export const dummyValidator: Validator = {
 
 const nonEmptyStringValidator: Validator = {
   validate: (name, value: any) => {
-    // BP-5787/BP-5857: match legacy (pre-JSON) validation semantics.
-    // An RTE field's stored value used to be inline HTML — an empty editor was
-    // "<p></p>", a NON-empty string, so the required check always passed for RTE
-    // fields (it only ever failed for genuinely empty PLAIN inputs). Now RTE
-    // fields are Tiptap JSON docs; treat any doc as "present" so behaviour
-    // stays identical. A plain string is still required to be non-empty.
-    const isValid = isTiptapDocument(value)
-      ? true
-      : typeof value === 'string' && value.length > 0;
+    const isValid = typeof value === 'string' && value.length > 0;
 
     return {
       isValid,

package/src/clients/ai-assistant-client.ts

@@ -30,6 +30,7 @@ export interface WebsiteContext {
 // Agent types
 export const AI_ASSISTANT_AGENT_TYPES = {
   WEBSITE_BUILDER: 'website_builder',
+  WEBSITE_BUILDER_V2: 'website_builder_v2',
 } as const;
 
 export type AiAssistantAgentType =

package/src/lib.ts

@@ -85,15 +85,6 @@ export {
   recalculateHeaderLogoSizes,
 } from './brand-page/utils/logo.util';
 export { sanitizeRTEHtml } from './brand-page-maker/utils';
-// BP-5787: RTE JSON storage boundary helpers (render/normalise/sanitise/extract).
-export {
-  renderRteToHtml,
-  toRteJson,
-  isTiptapDocument,
-  sanitizeRteJson,
-  getRteJsonPlainText,
-  type RichTextValue,
-} from './brand-page-maker/utils';
 export { getPageSlugFromPageTitle } from './brand-page-maker/utils/slug.util';
 
 // AI-pipeline preview (longclaw per-turn snapshots): web-renderer's

package/src/metadata-builder/ai-metadata-executor.ts

@@ -1,5 +1,7 @@
 import { type BrandPageModel } from '../brand-page/models';
 import type { EventTracker } from '../brand-page-maker/composables/useEventTracker';
+import { buildUpdateTextRequest } from './builders/update-content-text-builder';
+import { buildUpdateTextStyleRequest } from './builders/update-content-text-style-builder';
 import type { UndoHandler } from './builders/undo-builder';
 import type { Logger } from './logger';
 import { MetadataExecutor } from './metadata-executor';
@@ -13,6 +15,8 @@ import {
   AI_ASSISTANT_TOOL_NAMES,
   SECTION_TOOL_MAP,
   type ParsedToolCall,
+  type UpdateStyleToolArguments,
+  type UpdateTextToolArguments,
   type DeleteSectionArguments,
   type MoveSectionArguments,
   type AddPageArguments,
@@ -33,6 +37,7 @@ export const executeToolCallsAsync = async (
   toolcalls: ParsedToolCall[],
   options: {
     logger?: Logger;
+    maxCharacters?: number;
     /**
      * Callback invoked by the UndoBuilder at execution time to resolve the
      * pre-prompt snapshot to restore to. The library is agnostic about where
@@ -57,6 +62,27 @@ export const executeToolCallsAsync = async (
   const requests: MetadataBuilderRequest[] = toolcalls
     .map((toolcall): MetadataBuilderRequest | null => {
       switch (toolcall.function) {
+        case AI_ASSISTANT_TOOL_NAMES.UPDATE_TEXT: {
+          const arg = toolcall.arguments as unknown as UpdateTextToolArguments;
+
+          return buildUpdateTextRequest(toolcall.toolId, {
+            contentId: arg.contentId,
+            fieldName: arg.fieldName,
+            newText: arg.metadata.text,
+            maxCharacters: options.maxCharacters,
+          });
+        }
+
+        case AI_ASSISTANT_TOOL_NAMES.UPDATE_STYLE: {
+          const arg = toolcall.arguments as unknown as UpdateStyleToolArguments;
+
+          return buildUpdateTextStyleRequest(toolcall.toolId, {
+            contentId: arg.contentId,
+            fieldName: arg.fieldName,
+            newStyles: arg.metadata.style,
+          });
+        }
+
         case AI_ASSISTANT_TOOL_NAMES.DELETE_SECTION: {
           const arg = toolcall.arguments as unknown as DeleteSectionArguments;