@designcrowd/library.brand-page 6.0.19 → 6.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (97) hide show
  1. package/lib/src/{CreatedOnBrandCrowd-de-de-DCwwdYPj.js → CreatedOnBrandCrowd-de-de-C52IyXZu.js} +1 -1
  2. package/lib/src/{CreatedOnBrandCrowd-en-us-DTmZeDQ1.js → CreatedOnBrandCrowd-en-us-DhTy_dEV.js} +1 -1
  3. package/lib/src/{CreatedOnBrandCrowd-es-es-Dbrz6TXv.js → CreatedOnBrandCrowd-es-es-BJelIAQ4.js} +1 -1
  4. package/lib/src/{CreatedOnBrandCrowd-fr-fr-DLQhgn8T.js → CreatedOnBrandCrowd-fr-ca-DwJohy0T.js} +1 -1
  5. package/lib/src/{CreatedOnBrandCrowd-fr-ca-DLQhgn8T.js → CreatedOnBrandCrowd-fr-fr-DwJohy0T.js} +1 -1
  6. package/lib/src/{CreatedOnBrandCrowd-pt-pt-yAzzD2ik.js → CreatedOnBrandCrowd-pt-br-CMzKbxdG.js} +1 -1
  7. package/lib/src/{CreatedOnBrandCrowd-pt-br-yAzzD2ik.js → CreatedOnBrandCrowd-pt-pt-CMzKbxdG.js} +1 -1
  8. package/lib/src/{CreatedOnDcom-de-de-CNmNNE5o.js → CreatedOnDcom-de-de-DAy1GHrw.js} +1 -1
  9. package/lib/src/{CreatedOnDcom-en-us-BUmLFlS_.js → CreatedOnDcom-en-us-CgBDAkJN.js} +1 -1
  10. package/lib/src/{CreatedOnDcom-es-es-DfygM_0q.js → CreatedOnDcom-es-es-Ds9d5rem.js} +1 -1
  11. package/lib/src/{CreatedOnDcom-fr-ca-DIEft8xE.js → CreatedOnDcom-fr-ca-CZL0BQ-u.js} +1 -1
  12. package/lib/src/{CreatedOnDcom-fr-fr-Cn3jWG2n.js → CreatedOnDcom-fr-fr-BVYh5Wvo.js} +1 -1
  13. package/lib/src/{CreatedOnDcom-pt-br-DXhgGwEh.js → CreatedOnDcom-pt-br-1hsWNXfq.js} +1 -1
  14. package/lib/src/{CreatedOnDcom-pt-pt-BvE9ckw1.js → CreatedOnDcom-pt-pt-DvM0N-3M.js} +1 -1
  15. package/lib/src/brand-page/components/contact-form/ContactForm.mixin.js +2 -5
  16. package/lib/src/brand-page/models/index.d.ts +26 -34
  17. package/lib/src/brand-page/utils/migration.util.js +0 -11
  18. package/lib/src/brand-page/utils/text.util.d.ts +1 -1
  19. package/lib/src/brand-page/utils/text.util.js +0 -32
  20. package/lib/src/brand-page/utils/vcard.util.js +4 -4
  21. package/lib/src/brand-page/utils/view-model.util.d.ts +0 -1
  22. package/lib/src/brand-page/utils/view-model.util.js +20 -68
  23. package/lib/src/brand-page/view-models.d.ts +3 -3
  24. package/lib/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.js +100 -21
  25. package/lib/src/brand-page-maker/utils/index.d.ts +0 -2
  26. package/lib/src/brand-page-maker/utils/index.js +0 -2
  27. package/lib/src/brand-page-maker/utils/rich-text-editor.util.d.ts +5 -19
  28. package/lib/src/brand-page-maker/utils/rich-text-editor.util.js +5 -35
  29. package/lib/src/brand-page-maker/validators/field.validator.js +2 -10
  30. package/lib/src/css/library.brand-page-brandCrowd.min.css +1 -1
  31. package/lib/src/css/library.brand-page-brandPage.min.css +1 -1
  32. package/lib/src/css/library.brand-page-designCom.min.css +1 -1
  33. package/lib/src/css/library.brand-page-preview.min.css +1 -1
  34. package/lib/src/index.d.ts +0 -1
  35. package/lib/src/index.mjs +138 -143
  36. package/lib/src/{lib-Bm-fYap1.js → lib-CK2FPBv5.js} +55098 -55367
  37. package/lib/src/lib.js +0 -2
  38. package/lib/src/metadata-builder/builders/update-content-text-builder.js +15 -20
  39. package/lib/src/metadata-builder/builders/update-content-text-style-builder.js +3 -8
  40. package/lib/src/metadata-builder/helpers/rte.helpers.d.ts +2 -2
  41. package/lib/src/metadata-builder/helpers/rte.helpers.js +3 -6
  42. package/lib/src/shared/content-settings/components/GenericTextInput.mixin.js +1 -14
  43. package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.js +3 -12
  44. package/lib/src/utils/minify-brand-page-metadata.js +1 -4
  45. package/package.json +1 -1
  46. package/src/brand-page/components/contact-form/ContactForm.mixin.ts +2 -5
  47. package/src/brand-page/components/text-wrapper/TextWrapper.vue +6 -17
  48. package/src/brand-page/models/index.ts +26 -35
  49. package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap +3 -3
  50. package/src/brand-page/utils/migration.util.ts +0 -12
  51. package/src/brand-page/utils/style.util.test.ts +0 -51
  52. package/src/brand-page/utils/text.util.ts +4 -43
  53. package/src/brand-page/utils/vcard.util.ts +4 -6
  54. package/src/brand-page/utils/view-model.util.ts +26 -94
  55. package/src/brand-page/view-models.ts +2 -3
  56. package/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.ts +107 -23
  57. package/src/brand-page-maker/utils/index.ts +0 -2
  58. package/src/brand-page-maker/utils/rich-text-editor.util.test.ts +3 -4
  59. package/src/brand-page-maker/utils/rich-text-editor.util.ts +11 -50
  60. package/src/brand-page-maker/validators/field.validator.ts +2 -10
  61. package/src/lib.ts +0 -9
  62. package/src/metadata-builder/builders/update-content-text-builder.ts +18 -32
  63. package/src/metadata-builder/builders/update-content-text-style-builder.ts +4 -14
  64. package/src/metadata-builder/helpers/rte.helpers.ts +7 -11
  65. package/src/shared/content-settings/components/GenericTextInput.mixin.ts +1 -17
  66. package/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.ts +3 -16
  67. package/src/utils/minify-brand-page-metadata.ts +1 -4
  68. package/lib/src/brand-page/utils/migration/migration-19.d.ts +0 -2
  69. package/lib/src/brand-page/utils/migration/migration-19.js +0 -71
  70. package/lib/src/brand-page-maker/__fixtures__/complex-rte.fixture.d.ts +0 -22
  71. package/lib/src/brand-page-maker/__fixtures__/complex-rte.fixture.js +0 -22
  72. package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/FontFamily.d.ts +0 -14
  73. package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/FontFamily.js +0 -39
  74. package/lib/src/brand-page-maker/composables/rich-text-editor/getRteExtensions.d.ts +0 -28
  75. package/lib/src/brand-page-maker/composables/rich-text-editor/getRteExtensions.js +0 -66
  76. package/lib/src/brand-page-maker/utils/rte-render.util.d.ts +0 -33
  77. package/lib/src/brand-page-maker/utils/rte-render.util.js +0 -50
  78. package/lib/src/brand-page-maker/utils/rte-sanitize.util.d.ts +0 -6
  79. package/lib/src/brand-page-maker/utils/rte-sanitize.util.js +0 -158
  80. package/lib/src/brand-page-maker/utils/rte-serializer.d.ts +0 -5
  81. package/lib/src/brand-page-maker/utils/rte-serializer.js +0 -112
  82. package/src/brand-page/utils/migration/migration-19.test.ts +0 -72
  83. package/src/brand-page/utils/migration/migration-19.ts +0 -83
  84. package/src/brand-page/utils/text.util.test.ts +0 -47
  85. package/src/brand-page/utils/view-model.pageid-rte.test.ts +0 -104
  86. package/src/brand-page-maker/__fixtures__/complex-rte.fixture.ts +0 -23
  87. package/src/brand-page-maker/composables/rich-text-editor/extensions/FontFamily.test.ts +0 -52
  88. package/src/brand-page-maker/composables/rich-text-editor/extensions/FontFamily.ts +0 -42
  89. package/src/brand-page-maker/composables/rich-text-editor/getRteExtensions.ts +0 -113
  90. package/src/brand-page-maker/utils/__snapshots__/rte-render-parity.test.ts.snap +0 -200
  91. package/src/brand-page-maker/utils/rte-features.test.ts +0 -330
  92. package/src/brand-page-maker/utils/rte-render-parity.test.ts +0 -156
  93. package/src/brand-page-maker/utils/rte-render.util.ts +0 -77
  94. package/src/brand-page-maker/utils/rte-sanitize-json.test.ts +0 -158
  95. package/src/brand-page-maker/utils/rte-sanitize.util.ts +0 -195
  96. package/src/brand-page-maker/utils/rte-serializer.ts +0 -172
  97. package/src/brand-page-maker/validators/field.validator.test.ts +0 -55
@@ -1,112 +0,0 @@
1
- const escapeHtml = (value) => value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
2
- const escapeAttr = (value) => escapeHtml(value).replace(/"/g, '&quot;');
3
- // textStyle attr → CSS property, in a stable order.
4
- const TEXT_STYLE_PROPS = [
5
- ['fontFamily', 'font-family'],
6
- ['fontSize', 'font-size'],
7
- ['letterSpacing', 'letter-spacing'],
8
- ['lineHeight', 'line-height'],
9
- ['color', 'color'],
10
- ];
11
- const textStyleCss = (attrs) => TEXT_STYLE_PROPS.filter(([key]) => typeof attrs[key] === 'string' && attrs[key])
12
- .map(([key, css]) => `${css}: ${attrs[key]}`)
13
- .join('; ');
14
- // Outermost → innermost. Reversed at wrap time so links wrap outside spans,
15
- // which wrap outside the plain formatting marks.
16
- const MARK_ORDER = [
17
- 'link',
18
- 'textStyle',
19
- 'highlight',
20
- 'strike',
21
- 'underline',
22
- 'italic',
23
- 'bold',
24
- 'code',
25
- ];
26
- const wrapMark = (type, attrs, inner) => {
27
- switch (type) {
28
- case 'bold':
29
- return `<strong>${inner}</strong>`;
30
- case 'italic':
31
- return `<em>${inner}</em>`;
32
- case 'underline':
33
- return `<u>${inner}</u>`;
34
- case 'strike':
35
- return `<s>${inner}</s>`;
36
- case 'code':
37
- return `<code>${inner}</code>`;
38
- case 'textStyle': {
39
- const css = textStyleCss(attrs);
40
- return css ? `<span style="${escapeAttr(css)}">${inner}</span>` : inner;
41
- }
42
- case 'highlight': {
43
- const color = typeof attrs.color === 'string' ? attrs.color : '';
44
- return color
45
- ? `<mark data-color="${escapeAttr(color)}" style="background-color: ${escapeAttr(color)}; color: inherit;">${inner}</mark>`
46
- : `<mark>${inner}</mark>`;
47
- }
48
- case 'link': {
49
- const href = typeof attrs.href === 'string' ? attrs.href : '';
50
- let open = `<a href="${escapeAttr(href)}"`;
51
- if (attrs.target)
52
- open += ` target="${escapeAttr(String(attrs.target))}"`;
53
- if (attrs.rel)
54
- open += ` rel="${escapeAttr(String(attrs.rel))}"`;
55
- return `${open}>${inner}</a>`;
56
- }
57
- default:
58
- return inner;
59
- }
60
- };
61
- const renderText = (node) => {
62
- let html = escapeHtml(node.text ?? '');
63
- const marks = Array.isArray(node.marks) ? node.marks : [];
64
- for (const type of [...MARK_ORDER].reverse()) {
65
- const mark = marks.find((m) => m?.type === type);
66
- if (mark)
67
- html = wrapMark(type, mark.attrs ?? {}, html);
68
- }
69
- return html;
70
- };
71
- const alignAttr = (node) => {
72
- const align = node.attrs?.textAlign;
73
- return typeof align === 'string' && align
74
- ? ` style="text-align: ${escapeAttr(align)}"`
75
- : '';
76
- };
77
- const renderChildren = (node) => (node.content ?? []).map(renderNode).join('');
78
- const renderNode = (node) => {
79
- if (!node || typeof node !== 'object')
80
- return '';
81
- switch (node.type) {
82
- case 'text':
83
- return renderText(node);
84
- case 'hardBreak':
85
- return '<br>';
86
- case 'horizontalRule':
87
- return '<hr>';
88
- case 'paragraph':
89
- return `<p${alignAttr(node)}>${renderChildren(node)}</p>`;
90
- case 'heading': {
91
- const level = Math.min(6, Math.max(1, Number(node.attrs?.level) || 1));
92
- return `<h${level}${alignAttr(node)}>${renderChildren(node)}</h${level}>`;
93
- }
94
- case 'bulletList':
95
- return `<ul>${renderChildren(node)}</ul>`;
96
- case 'orderedList':
97
- return `<ol>${renderChildren(node)}</ol>`;
98
- case 'listItem':
99
- return `<li>${renderChildren(node)}</li>`;
100
- case 'blockquote':
101
- return `<blockquote>${renderChildren(node)}</blockquote>`;
102
- case 'codeBlock':
103
- return `<pre><code>${renderChildren(node)}</code></pre>`;
104
- // doc and any unknown container: render children.
105
- default:
106
- return renderChildren(node);
107
- }
108
- };
109
- /**
110
- * Serialise a Tiptap JSON document to HTML without an editor/DOM.
111
- */
112
- export const serializeRteJsonToHtml = (doc) => renderChildren(doc);
@@ -1,72 +0,0 @@
1
- import { describe, test, expect } from 'vitest';
2
- import { migration19 } from './migration-19';
3
- import type { MigrationData } from '../migration.util';
4
- import { isTiptapDocument, getRteJsonPlainText } from '@brand-page-maker/utils';
5
-
6
- const createMigrationData = (brandPageData: any): MigrationData =>
7
- ({ brandPageModel: brandPageData }) as MigrationData;
8
-
9
- const model = (contents: any[]) => ({
10
- pages: [{ id: 'p1', title: 'Home', slug: 'home', contents }],
11
- });
12
-
13
- describe('migration19 — HTML RTE → Tiptap JSON', () => {
14
- test('converts a top-level HTML RTE field to a JSON document', async () => {
15
- const data = model([
16
- {
17
- id: '1',
18
- type: 'banner-section',
19
- title:
20
- '<p><span style="color: var(--logo-text-color)">Hello</span></p>',
21
- },
22
- ]);
23
-
24
- const result = await migration19(createMigrationData(data));
25
- const title = (result.brandPageModel.pages[0].contents[0] as any).title;
26
-
27
- expect(isTiptapDocument(title)).toBe(true);
28
- expect(getRteJsonPlainText(title)).toContain('Hello');
29
- // theme token ref preserved through migration
30
- expect(JSON.stringify(title)).toContain('var(--logo-text-color)');
31
- });
32
-
33
- test('converts RTE inside item arrays (text items / testimonials)', async () => {
34
- const data = model([
35
- {
36
- id: '2',
37
- type: 'text',
38
- textItems: [{ id: 'ti1', text: '<p><strong>bold</strong> item</p>' }],
39
- },
40
- ]);
41
-
42
- const result = await migration19(createMigrationData(data));
43
- const item = (result.brandPageModel.pages[0].contents[0] as any)
44
- .textItems[0];
45
-
46
- expect(isTiptapDocument(item.text)).toBe(true);
47
- expect(getRteJsonPlainText(item.text)).toContain('bold');
48
- });
49
-
50
- test('leaves plain strings and already-JSON content untouched (idempotent)', async () => {
51
- const jsonDoc = {
52
- type: 'doc',
53
- content: [{ type: 'paragraph', content: [{ type: 'text', text: 'X' }] }],
54
- };
55
- const data = model([
56
- {
57
- id: '3',
58
- type: 'banner-section',
59
- title: jsonDoc, // already JSON
60
- url: 'https://example.com', // plain string, not RTE
61
- titleStyle: { color: '#fff', fontSize: '1em' }, // style object, untouched
62
- },
63
- ]);
64
-
65
- const result = await migration19(createMigrationData(data));
66
- const c = result.brandPageModel.pages[0].contents[0] as any;
67
-
68
- expect(c.title).toEqual(jsonDoc);
69
- expect(c.url).toBe('https://example.com');
70
- expect(c.titleStyle).toEqual({ color: '#fff', fontSize: '1em' });
71
- });
72
- });
@@ -1,83 +0,0 @@
1
- import type { Editor } from '@tiptap/vue-3';
2
- import type { MigrationData } from '../migration.util';
3
- import { hasRTEContent } from '../../../brand-page-maker/utils';
4
- import { useExternalRichTextEditor } from '../../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
5
-
6
- /**
7
- * BP-5787 — migrate existing inline-HTML RTE content to Tiptap JSON.
8
- *
9
- * The editor now emits, and the renderer now reads, Tiptap JSON. Existing
10
- * published/saved sites still hold RTE fields as HTML strings. This converts
11
- * them on load:
12
- * - maker: the loaded model is JSON, so the next save persists JSON.
13
- * - web-renderer: lazy migrate-on-read — old sites render from JSON without
14
- * needing a re-save.
15
- *
16
- * Runs on EVERY load (runAlways) so it also normalises content the AI section
17
- * builders still emit as HTML — there is no need to change those builders or
18
- * widen the content model types.
19
- *
20
- * Scope: only HTML-RTE strings (hasRTEContent) are converted. Plain strings,
21
- * numbers, and already-JSON docs are left untouched, so the migration is
22
- * idempotent (re-running on JSON content is a no-op — non-string values are
23
- * skipped). Nested RTE inside item arrays (textItems, testimonials, images…)
24
- * is handled by recursing into arrays; style objects are intentionally not
25
- * descended into (they never hold RTE content).
26
- */
27
- const convertRteStringsToJson = (value: unknown, editor: Editor): void => {
28
- if (Array.isArray(value)) {
29
- value.forEach((item) => convertRteStringsToJson(item, editor));
30
-
31
- return;
32
- }
33
-
34
- if (!value || typeof value !== 'object') return;
35
-
36
- const record = value as Record<string, unknown>;
37
-
38
- Object.keys(record).forEach((key) => {
39
- const field = record[key];
40
-
41
- if (typeof field === 'string' && hasRTEContent(field)) {
42
- editor.commands.setContent(field);
43
- record[key] = editor.getJSON();
44
- } else if (Array.isArray(field)) {
45
- convertRteStringsToJson(field, editor);
46
- }
47
- });
48
- };
49
-
50
- export const migration19 = async (
51
- migrationResult: MigrationData,
52
- ): Promise<MigrationData> => {
53
- const { brandPageModel } = migrationResult;
54
-
55
- // HTML→JSON parsing needs a DOM (Tiptap's editor). In a DOM-less context
56
- // (pure-node SSR or unit tests) we can't parse HTML, so we leave the RTE
57
- // fields as HTML strings — the renderer and the fraud/translation extractors
58
- // all dual-read HTML, so this is safe. Conversion happens wherever a DOM is
59
- // available (the browser editor, jsdom).
60
- if (typeof window === 'undefined' || typeof document === 'undefined') {
61
- return migrationResult;
62
- }
63
-
64
- let externalEditor;
65
-
66
- try {
67
- externalEditor = useExternalRichTextEditor().externalEditor;
68
- } catch {
69
- return migrationResult;
70
- }
71
-
72
- try {
73
- for (const page of brandPageModel.pages) {
74
- for (const content of page.contents) {
75
- convertRteStringsToJson(content, externalEditor);
76
- }
77
- }
78
- } finally {
79
- externalEditor.destroy();
80
- }
81
-
82
- return migrationResult;
83
- };
@@ -1,47 +0,0 @@
1
- import { describe, it, expect } from 'vitest';
2
- import { escapeContentText, getRenderText } from './text.util';
3
-
4
- /**
5
- * BP-5787 — escapeContentText / getRenderText must accept either a legacy
6
- * inline-HTML string or a Tiptap JSON document without throwing. Section
7
- * components call these on RTE fields (e.g. banner description), which are now
8
- * JSON; the previous string-only versions threw `.replace is not a function`
9
- * and broke the field's reactivity (strike/format edits stopped rendering).
10
- */
11
- const doc = {
12
- type: 'doc',
13
- content: [
14
- {
15
- type: 'paragraph',
16
- content: [
17
- { type: 'text', text: 'WARNING', marks: [{ type: 'strike' }] },
18
- { type: 'text', text: ': take flight' },
19
- ],
20
- },
21
- ],
22
- };
23
-
24
- describe('escapeContentText (BP-5787 dual-read)', () => {
25
- it('extracts plain text from a Tiptap JSON document', () => {
26
- expect(escapeContentText(doc)).toBe('WARNING : take flight');
27
- });
28
-
29
- it('still strips tags from a legacy HTML string', () => {
30
- expect(escapeContentText('<p><s>WARNING</s></p>')).toBe('WARNING');
31
- });
32
-
33
- it('returns falsy input unchanged', () => {
34
- expect(escapeContentText('')).toBe('');
35
- expect(escapeContentText(undefined)).toBeUndefined();
36
- });
37
- });
38
-
39
- describe('getRenderText (BP-5787 JSON-safe)', () => {
40
- it('passes a Tiptap JSON document through untouched (no throw)', () => {
41
- expect(getRenderText(doc as unknown as string)).toBe(doc);
42
- });
43
-
44
- it('still converts newlines to <br/> for plain strings', () => {
45
- expect(getRenderText('a\nb')).toBe('a<br/>b');
46
- });
47
- });
@@ -1,104 +0,0 @@
1
- import { describe, it, expect } from 'vitest';
2
- import { resolvePageIdsInRteJson } from './view-model.util';
3
- import type { NavViewModel } from '../view-models';
4
-
5
- /**
6
- * BP-5847 — internal RTE hyperlinks are stored as `href="pageid:<id>"`. On the
7
- * published site these must resolve to the page's relative path. The string
8
- * (legacy HTML) path already did this; once RTE moved to Tiptap JSON the link
9
- * marks were skipped, so links rendered as raw `pageid:` and didn't navigate.
10
- */
11
- describe('resolvePageIdsInRteJson (BP-5847)', () => {
12
- const nav: NavViewModel = {
13
- navItems: [
14
- {
15
- pageId: 'home-id',
16
- slug: 'home',
17
- displayName: 'Home',
18
- routeName: 'home',
19
- routeParams: { slug: 'mysite' },
20
- isRoot: true,
21
- isHidden: false,
22
- relativePath: '',
23
- nestedNavItems: [],
24
- },
25
- {
26
- pageId: 'about-id',
27
- slug: 'about',
28
- displayName: 'About',
29
- routeName: 'about',
30
- routeParams: { slug: 'mysite' },
31
- isRoot: false,
32
- isHidden: false,
33
- relativePath: 'about',
34
- nestedNavItems: [],
35
- },
36
- ],
37
- };
38
-
39
- const options = { brandPageSlug: 'mysite' } as any;
40
-
41
- const docWithLink = (href: string) => ({
42
- type: 'doc',
43
- content: [
44
- {
45
- type: 'paragraph',
46
- content: [
47
- {
48
- type: 'text',
49
- text: 'link',
50
- marks: [{ type: 'link', attrs: { href, target: '_blank' } }],
51
- },
52
- ],
53
- },
54
- ],
55
- });
56
-
57
- const linkHref = (doc: any) => doc.content[0].content[0].marks[0].attrs.href;
58
-
59
- it('resolves a pageid link to a sub-page relative path', () => {
60
- const out = resolvePageIdsInRteJson(
61
- docWithLink('pageid:about-id'),
62
- nav,
63
- options,
64
- );
65
-
66
- expect(linkHref(out)).toBe('/mysite/about');
67
- });
68
-
69
- it('resolves a root pageid link to the site root', () => {
70
- const out = resolvePageIdsInRteJson(
71
- docWithLink('pageid:home-id'),
72
- nav,
73
- options,
74
- );
75
-
76
- expect(linkHref(out)).toBe('/mysite');
77
- });
78
-
79
- it('falls back to root when the pageid cannot be matched', () => {
80
- const out = resolvePageIdsInRteJson(
81
- docWithLink('pageid:missing-id'),
82
- nav,
83
- options,
84
- );
85
-
86
- expect(linkHref(out)).toBe('/mysite');
87
- });
88
-
89
- it('leaves external links untouched and returns the same reference', () => {
90
- const doc = docWithLink('https://example.com');
91
- const out = resolvePageIdsInRteJson(doc, nav, options);
92
-
93
- expect(linkHref(out)).toBe('https://example.com');
94
- expect(out).toBe(doc);
95
- });
96
-
97
- it('does not mutate the source doc (returns a new object) when resolving', () => {
98
- const doc = docWithLink('pageid:about-id');
99
- const out = resolvePageIdsInRteJson(doc, nav, options);
100
-
101
- expect(out).not.toBe(doc);
102
- expect(linkHref(doc)).toBe('pageid:about-id');
103
- });
104
- });
@@ -1,23 +0,0 @@
1
- /**
2
- * BP-5787 — golden-master fixture for the RTE HTML→JSON migration.
3
- *
4
- * A single rich-text value that exercises every mark/node the editor can emit,
5
- * so one snapshot guards the whole serialisation surface. Captured as a baseline
6
- * on the current HTML pipeline; after the migration the JSON pipeline must
7
- * reproduce byte-identical rendered output (see rte-render-parity.test.ts).
8
- *
9
- * Coverage:
10
- * - block nodes: heading (h2), paragraph, text-align (center / right)
11
- * - inline marks: bold, italic, underline, strike
12
- * - textStyle attrs: fontFamily, fontSize (em), letterSpacing (em), lineHeight (unitless)
13
- * - colour: theme TOKEN ref (var(--logo-text-color)) AND a literal hex (#FF0000)
14
- * - highlight (background colour via <mark>)
15
- * - links: internal (target=_self) and external (target=_blank rel=noopener)
16
- */
17
- export const COMPLEX_RTE_HTML = `<h2 style="text-align: center"><span style="color: var(--logo-text-color)">Themed heading</span></h2><p><strong>bold</strong> <em>italic</em> <u>underline</u> <s>strike</s> <span style="font-family: Montserrat; font-size: 1.5em; letter-spacing: 0.05em; line-height: 1.4">styled span</span> <mark data-color="#ffe08a" style="background-color: #ffe08a">highlight</mark> <span style="color: #FF0000">literal hex</span> <a target="_self" href="/about">internal link</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://example.com">external link</a></p><p style="text-align: right">second paragraph, right-aligned</p>`;
18
-
19
- /**
20
- * The theme-token CSS variable that MUST survive the HTML→JSON round-trip
21
- * (BP-5787 stores token refs instead of flattening them to rgb()).
22
- */
23
- export const THEME_TOKEN_REF = 'var(--logo-text-color)';
@@ -1,52 +0,0 @@
1
- import { describe, it, expect, afterEach } from 'vitest';
2
- import { Editor } from '@tiptap/vue-3';
3
- import { getRteExtensions } from '../getRteExtensions';
4
- import { sanitizeRteJson } from '@brand-page-maker/utils/rte-sanitize.util';
5
-
6
- /**
7
- * BP-5787 — multi-word font families ("Open Sans") are quoted in CSS, so
8
- * re-parsing HTML (pasting RTE-styled text between editors) previously yielded
9
- * a value WITH quote chars, which the native sanitiser then dropped — losing
10
- * the font. The custom FontFamily extension strips the quotes on parse.
11
- */
12
- describe('FontFamily — quote-stripping parse (BP-5787)', () => {
13
- let editors: Editor[] = [];
14
- const mk = () => {
15
- const e = new Editor({
16
- extensions: getRteExtensions({ restrictStarterKit: true }),
17
- });
18
-
19
- editors.push(e);
20
-
21
- return e;
22
- };
23
-
24
- afterEach(() => {
25
- editors.forEach((e) => e.destroy());
26
- editors = [];
27
- });
28
-
29
- const fontFamilyOf = (json: any) =>
30
- json.content?.[0]?.content?.[0]?.marks?.find(
31
- (m: any) => m.type === 'textStyle',
32
- )?.attrs?.fontFamily;
33
-
34
- for (const font of ['Montserrat', 'Open Sans', 'Playwrite AU']) {
35
- it(`"${font}" survives an HTML re-parse + sanitise unquoted`, () => {
36
- const src = mk();
37
-
38
- src.commands.setContent('<p>Hello world</p>');
39
- src.commands.selectAll();
40
- src.commands.setFontFamily(font);
41
-
42
- // Re-parse the serialised HTML — mirrors an RTE→RTE paste.
43
- const tgt = mk();
44
-
45
- tgt.commands.setContent(src.getHTML());
46
-
47
- expect(fontFamilyOf(tgt.getJSON())).toBe(font);
48
- // and the sanitiser must keep it (isSafeCssValue rejects quote chars).
49
- expect(fontFamilyOf(sanitizeRteJson(tgt.getJSON()))).toBe(font);
50
- });
51
- }
52
- });
@@ -1,42 +0,0 @@
1
- import TiptapFontFamily from '@tiptap/extension-font-family';
2
-
3
- /**
4
- * BP-5787 — font-family with quote-stripping parse.
5
- *
6
- * The stock extension stores whatever `element.style.fontFamily` returns. For
7
- * multi-word families (e.g. "Open Sans", "Playwrite AU") the browser quotes the
8
- * value, so parsing HTML — pasting RTE-styled text between editors, or the
9
- * HTML→JSON migration — yields a value that still contains the quote chars
10
- * (`"Open Sans"`). That value then (a) no longer matches the font list and,
11
- * worse, (b) is dropped by the native RTE sanitiser (`sanitizeRteJson`), whose
12
- * `isSafeCssValue` rejects any value containing `"` `'` `;` — so the font is
13
- * silently lost. Mirror the FontSize/LetterSpacing extensions and strip the
14
- * quotes on parse so the stored value is always the bare family name.
15
- */
16
- export const FontFamily = TiptapFontFamily.extend({
17
- addGlobalAttributes() {
18
- return [
19
- {
20
- types: this.options.types,
21
- attributes: {
22
- fontFamily: {
23
- default: null,
24
- // Strip quotes only — keep '' for an absent value so the stored
25
- // JSON shape matches the other textStyle attrs (FontSize etc.).
26
- parseHTML: (element) =>
27
- element.style.fontFamily?.replace(/['"]+/g, ''),
28
- renderHTML: (attributes) => {
29
- if (!attributes.fontFamily) {
30
- return {};
31
- }
32
-
33
- return {
34
- style: `font-family: ${attributes.fontFamily}`,
35
- };
36
- },
37
- },
38
- },
39
- },
40
- ];
41
- },
42
- });
@@ -1,113 +0,0 @@
1
- import type { Extensions } from '@tiptap/vue-3';
2
- import StarterKit from '@tiptap/starter-kit';
3
- import Underline from '@tiptap/extension-underline';
4
- import TextStyle from '@tiptap/extension-text-style';
5
- import TextAlign from '@tiptap/extension-text-align';
6
- import ColorExtension from '@tiptap/extension-color';
7
- import Highlight from '@tiptap/extension-highlight';
8
- import Placeholder from '@tiptap/extension-placeholder';
9
- import Link from '@tiptap/extension-link';
10
- import { FontFamily } from './extensions/FontFamily';
11
- import { FontSize } from './extensions/FontSize';
12
- import { LetterSpacing } from './extensions/LetterSpacing';
13
- import { LineHeight } from './extensions/LineHeight';
14
- import { MaxLength } from './extensions/MaxLength';
15
- import { AutoLink } from './extensions/AutoLink';
16
- import { isHrefPageId } from './hyperlink';
17
-
18
- /**
19
- * Single source of truth for the Tiptap extension set (BP-5787).
20
- *
21
- * The live editor, the headless serialiser (useExternalRichTextEditor), and
22
- * the upcoming render-from-JSON path must all use the SAME extensions, or
23
- * rendered output drifts from what the user authored. This factory removes the
24
- * previous duplication while preserving each consumer's exact configuration.
25
- *
26
- * Known, intentional differences are parameterised:
27
- * - `restrictStarterKit` — the live editor disables list/hr/code nodes.
28
- * - `includeLinkRel` — the headless/render path emits rel="noopener noreferrer";
29
- * the live editing surface does not.
30
- * - `editing` — only the live editor carries the Placeholder + MaxLength plugins
31
- * (neither affects serialised output; they are editing-time only).
32
- */
33
- export interface RteExtensionOptions {
34
- /** Disable StarterKit nodes the editor doesn't use (lists, hr, code). */
35
- restrictStarterKit?: boolean;
36
- /** Emit rel="noopener noreferrer" on link HTMLAttributes (render path). */
37
- includeLinkRel?: boolean;
38
- /** When present, add the live-editing-only plugins (Placeholder, MaxLength). */
39
- editing?: {
40
- placeholder?: string;
41
- maxLength?: number;
42
- };
43
- }
44
-
45
- export const getRteExtensions = (
46
- options: RteExtensionOptions = {},
47
- ): Extensions => {
48
- const {
49
- restrictStarterKit = false,
50
- includeLinkRel = false,
51
- editing,
52
- } = options;
53
-
54
- const extensions: Extensions = [
55
- restrictStarterKit
56
- ? StarterKit.configure({
57
- bulletList: false,
58
- orderedList: false,
59
- listItem: false,
60
- horizontalRule: false,
61
- codeBlock: false,
62
- code: false,
63
- })
64
- : StarterKit,
65
- Underline,
66
- TextStyle.configure({ mergeNestedSpanStyles: true }),
67
- TextAlign.configure({
68
- types: ['heading', 'paragraph'],
69
- }),
70
- FontFamily.configure({
71
- types: ['textStyle'],
72
- }),
73
- FontSize,
74
- LetterSpacing,
75
- LineHeight,
76
- ColorExtension.configure({
77
- types: ['textStyle'],
78
- }),
79
- Highlight.configure({
80
- multicolor: true,
81
- }),
82
- ];
83
-
84
- // Live-editing-only plugins sit between Highlight and Link (original order).
85
- if (editing) {
86
- extensions.push(
87
- Placeholder.configure({ placeholder: editing.placeholder }),
88
- MaxLength.configure({ maxLength: editing.maxLength }),
89
- );
90
- }
91
-
92
- extensions.push(
93
- Link.configure({
94
- openOnClick: false,
95
- defaultProtocol: 'https',
96
- autolink: true,
97
- HTMLAttributes: (attrs) => {
98
- const href = attrs.href;
99
- const isExternal =
100
- href && (href.startsWith('http://') || href.startsWith('https://'));
101
-
102
- return {
103
- ...(includeLinkRel && { rel: 'noopener noreferrer' }),
104
- target: isExternal ? '_blank' : null,
105
- };
106
- },
107
- isAllowedUri: (url, ctx) => ctx.defaultValidate(url) || isHrefPageId(url),
108
- }),
109
- AutoLink,
110
- );
111
-
112
- return extensions;
113
- };