@designcrowd/library.brand-page 6.0.6-json-prereq-7 → 6.0.6-tracker-1

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,
@@ -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 {
@@ -168,13 +218,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) {
@@ -385,13 +476,7 @@ 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) {
+      if (isExternalMutation && editor.getHTML() !== newValue) {
         editor.commands.setContent(newValue, false);
         updateRichTextEditor.value = false;
         //text style type is not switching when reordering
@@ -414,12 +499,11 @@ 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', () => {
-    emit('update:modelValue', sanitizeRteJson(editor.getJSON()));
+    const sanitizedData = sanitiseClientSideRTE(editor.getHTML());
+
+    emit('update:modelValue', sanitizedData.sanitizedHtml);
   });
 
   editor.on('selectionUpdate', () => {

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

@@ -76,7 +76,7 @@ describe('hasHTML', () => {
 });
 
 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 = {
@@ -119,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 = {
@@ -137,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 '';
   }
@@ -756,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);
 
@@ -827,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
@@ -953,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/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/builders/update-content-text-builder.ts

@@ -6,36 +6,7 @@ import {
   type BuilderResult,
   type MetadataBuilderRequest,
 } from '../models';
-import {
-  hasRTEContent,
-  replaceTextInRTE,
-  isTiptapDocument,
-  renderRteToHtml,
-  toRteJson,
-} from '../../brand-page-maker/utils';
-
-/**
- * BP-5787 — replace the text of an RTE field while preserving formatting, for
- * either storage form. JSON is rendered to HTML, edited via the existing
- * HTML-preserving replace, then converted back to JSON; plain/legacy strings
- * keep the original behaviour.
- */
-const updateRteFieldValue = (existing: unknown, newText: string): unknown => {
-  const wasJson = isTiptapDocument(existing);
-  const existingHtml = wasJson ? renderRteToHtml(existing) : existing;
-
-  if (
-    existingHtml &&
-    typeof existingHtml === 'string' &&
-    hasRTEContent(existingHtml)
-  ) {
-    const updatedHtml = replaceTextInRTE(existingHtml, newText);
-
-    return wasJson ? toRteJson(updatedHtml) : updatedHtml;
-  }
-
-  return newText;
-};
+import { hasRTEContent, replaceTextInRTE } from '../../brand-page-maker/utils';
 
 export interface UpdateTextPayload {
   contentId: string;
@@ -65,7 +36,12 @@ const updateTextField = (target: any, fieldName: string, newText: string) => {
 
     if (Array.isArray(array) && array[+index]) {
       const existingText = array[+index][property];
-      const updatedValue = updateRteFieldValue(existingText, newText);
+      const updatedValue =
+        existingText &&
+        typeof existingText === 'string' &&
+        hasRTEContent(existingText)
+          ? replaceTextInRTE(existingText, newText)
+          : newText;
 
       // Create a new array with the updated item to trigger reactivity
       const newArray = [...array];
@@ -78,7 +54,17 @@ const updateTextField = (target: any, fieldName: string, newText: string) => {
     }
   } else {
     // Simple field
-    target[fieldName] = updateRteFieldValue(target[fieldName], newText);
+    const existingText = target[fieldName];
+
+    if (
+      existingText &&
+      typeof existingText === 'string' &&
+      hasRTEContent(existingText)
+    ) {
+      target[fieldName] = replaceTextInRTE(existingText, newText);
+    } else {
+      target[fieldName] = newText;
+    }
   }
 };
 

package/src/metadata-builder/builders/update-content-text-style-builder.ts

@@ -68,19 +68,17 @@ const mergeStyles = (
   return merged;
 };
 
-// BP-5787 — apply a style to RTE text natively. applyStyleToRTEText runs Tiptap
-// commands on the doc (string or JSON in) and returns JSON — no HTML round-trip.
-const updateRTEText = (text: unknown, style: TextStyleDeclaration): unknown => {
-  if (!hasRTEContent(text)) {
+const updateRTEText = (text: string, style: TextStyleDeclaration): string => {
+  if (!text || typeof text !== 'string' || !hasRTEContent(text)) {
     return text;
   }
 
   const { externalEditor } = useExternalRichTextEditor();
-  const updated = applyStyleToRTEText(externalEditor, text, style);
+  const updatedText = applyStyleToRTEText(externalEditor, text, style);
 
   externalEditor.destroy();
 
-  return updated;
+  return updatedText;
 };
 
 const findStyleKey = (target: Content, property: string): string | null => {

package/src/metadata-builder/helpers/rte.helpers.ts

@@ -11,23 +11,18 @@ import {
 
 export const applyStyleToRTEText = (
   externalEditor: Editor,
-  contentText: unknown,
+  contentText: string,
   newContentStyle: TextStyleDeclaration,
 ) => {
   if (!contentText) {
     return contentText;
   }
 
-  // BP-5787: operate natively on the Tiptap doc. setContent accepts a JSON
-  // document or an HTML string; the style is applied via editor commands and
-  // the result is returned as JSON — no HTML round-trip.
-  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 as string);
+  externalEditor.commands.setContent(content);
 
   let chain = externalEditor.chain().selectAll();
 
@@ -82,8 +77,9 @@ export const applyStyleToRTEText = (
       : chain.unsetItalic();
 
   chain.run();
+  const html = externalEditor.getHTML();
 
-  return externalEditor.getJSON();
+  return html;
 };
 
 /**

package/src/shared/content-settings/components/GenericTextInput.mixin.ts

@@ -159,23 +159,7 @@ export default defineComponent({
     },
   },
   watch: {
-    value(newVal: string | undefined, oldVal: string | undefined) {
-      // BP-5787: RTE values are Tiptap JSON objects. The parent (TextItemsField)
-      // re-clones its items array (cloneDeep) on ANY change — including a sibling
-      // field's style sync — yielding a NEW object reference with identical text
-      // content. For objects Vue fires this watcher on reference change, so that
-      // spurious re-clone would overwrite `_value` and clobber an in-flight edit
-      // (a mark applied but not yet debounced to the store), silently dropping
-      // the user's formatting. Strings never hit this (same content = same
-      // reference = no fire), so mirror that: ignore re-clones whose content is
-      // unchanged from the previous prop value.
-      if (
-        this.showRichTextEditor &&
-        JSON.stringify(newVal) === JSON.stringify(oldVal)
-      ) {
-        return;
-      }
-
+    value(newVal: string | undefined) {
       this._value = newVal;
 
       if (this.showRichTextEditor) {

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.ts

@@ -21,9 +21,6 @@ import {
   replaceTextInRTE,
   RTE_ALLOWED_SECTION_TYPES,
   isRTEManagedStyleField,
-  isTiptapDocument,
-  renderRteToHtml,
-  toRteJson,
 } from '@brand-page-maker/utils';
 import { isDefaultContentText } from '@shared/content-settings/utils';
 import { useUiLogoSettingsStore } from '../../../logo-settings/store';
@@ -324,20 +321,10 @@ export default defineComponent({
       this.isToggled = isToggled;
     },
     onUseGeneratedText(generatedText: string) {
-      let formattedText: unknown = generatedText;
+      let formattedText = generatedText;
 
-      // BP-5787: preserve the field's formatting when dropping in AI text.
-      // replaceTextInRTE is HTML-based, so JSON is rendered/parsed around it
-      // (cold AI path, shared editor); string fields use it directly.
-      if (this.showRichTextEditor) {
-        if (isTiptapDocument(this.value)) {
-          formattedText =
-            toRteJson(
-              replaceTextInRTE(renderRteToHtml(this.value), generatedText),
-            ) ?? generatedText;
-        } else if (typeof this.value === 'string') {
-          formattedText = replaceTextInRTE(this.value, generatedText);
-        }
+      if (this.showRichTextEditor && typeof this.value === 'string') {
+        formattedText = replaceTextInRTE(this.value, generatedText);
       }
 
       this.contentSettingsStore.updateItemValue({

package/src/tracker.ts

@@ -0,0 +1,28 @@
+// Lightweight subpath entry: `@designcrowd/library.brand-page/tracker`.
+// Re-exports ONLY the analytics surface (useEventTracker + event constants),
+// which depends solely on `vue`. This lets consumers import the tracker without
+// pulling the full library graph (maker, TipTap, renderer). See
+// docs/plans/multi-entrypoint-tree-shaking.md and the /tracker proposal.
+//
+// IMPORTANT: useEventTracker holds module-scoped pub/sub state (LISTENERS,
+// GLOBAL_EVENT_PROPS). It MUST resolve to a single shared instance across this
+// entry and the root `.` entry, or subscribers registered here won't receive
+// events published via the root. The multi-entry build hoists it into a shared
+// chunk (both `index` and `tracker` import it) — verified at build time.
+export {
+  useEventTracker,
+  EVENTS,
+  SELECT_LOCATIONS,
+  UPGRADE_CTA_LOCATIONS,
+  AI_CTA_LOCATIONS,
+  TRIGGER_TYPE,
+  PUBLISH_MODAL_CONTINUATION_EVENTS,
+  GENERATE_TEXT_CONTINUATION_EVENTS,
+  PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS,
+} from './brand-page-maker/composables/useEventTracker';
+export type {
+  EventTracker,
+  BpEventTrackerEvent,
+  BpGlobalEventProps,
+  BpUpsellEventProps,
+} from './brand-page-maker/composables/useEventTracker';

package/src/utils/minify-brand-page-metadata.ts

@@ -10,7 +10,7 @@ import {
 } from '../brand-page/models';
 import type { Content, ContentType } from '../brand-page/models/content.model';
 import type { TextStyleDeclaration } from '../brand-page/models/styles.model';
-import { hasRTEContent, isTiptapDocument } from '../brand-page-maker/utils';
+import { hasRTEContent } from '../brand-page-maker/utils';
 import { useExternalRichTextEditor } from '../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import type { Editor, JSONContent } from '@tiptap/vue-3';
 import {
@@ -101,9 +101,6 @@ const convertText = (
   value: unknown,
   editor: Editor,
 ): RichTextValue | undefined => {
-  // Already Tiptap JSON (BP-5787 storage) — keep as-is.
-  if (isTiptapDocument(value)) return value;
-
   if (typeof value !== 'string' || !value) return undefined;
 
   if (hasRTEContent(value)) {

package/lib/src/brand-page/utils/migration/migration-18.d.ts

@@ -1,2 +0,0 @@
-import type { MigrationData } from '../migration.util';
-export declare const migration18: (migrationResult: MigrationData) => Promise<MigrationData>;