@designcrowd/library.brand-page 5.10.20 → 5.10.30

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

@@ -1,17 +1,112 @@
 import type { ChainedCommands, Editor } from '@tiptap/vue-3';
-import { EditorState, Transaction, Selection } from 'prosemirror-state';
-import type {
-  BannerSectionContent,
-  Content,
-  TextContent,
-  TextStyleDeclaration,
-  TextStyleType,
+import type { EditorState, Transaction, Selection } from 'prosemirror-state';
+import {
+  STYLE_THEME_KEYS,
+  type BannerSectionContent,
+  type Content,
+  type TextContent,
+  type TextStyleDeclaration,
+  type TextStyleType,
 } from '../../brand-page';
 import type { PageSettingsState } from '../../shared/page-settings/store';
 import type { StyleSettingsState } from '../../shared/style-settings/store';
 import { ESCAPED_NEWLINE_CHARACTER } from '../../constants/ui';
 import { getRenderText } from '../../brand-page/utils';
 import type { Mark } from 'prosemirror-model';
+import createDomPurify, { type DOMPurify } from 'dompurify';
+
+// Only allow tags used by the enabled Tiptap extensions
+const allowedTags = [
+  'p',
+  'span',
+  'strong',
+  'em',
+  'u',
+  's',
+  'mark',
+  'div',
+  'br',
+  'ul',
+  'ol',
+  'li',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'blockquote',
+  'code',
+  'pre',
+  'hr',
+  'a',
+];
+
+// Block javascript: and data: protocols and other dangerous schemes
+const dangerousProtocols = [
+  'javascript:',
+  'data:',
+  'vbscript:',
+  'file:',
+  'about:',
+  'chrome:',
+  'chrome-extension:',
+  'moz-extension:',
+];
+
+// Allow specific attributes used by TipTap extensions and href for links
+const allowedAttributes = ['style', 'data-color', 'href', 'target', 'rel'];
+
+const forbiddenTags = [
+  'script',
+  'img',
+  'iframe',
+  'object',
+  'embed',
+  'link',
+  'style',
+  'meta',
+  'form',
+  'input',
+  'button',
+  'svg',
+  'math',
+];
+
+const forbiddenAttributes = [
+  'onerror',
+  'onclick',
+  'onload',
+  'onmouseover',
+  'onfocus',
+  'onblur',
+  'src',
+  'srcdoc',
+  'formaction',
+  'form',
+  'action',
+  'download',
+  'class',
+  'id',
+  'data-type',
+  'data-placeholder',
+  'data-align',
+  'data-text-align',
+];
+
+// Only allow CSS properties used by TipTap extensions
+const allowedCSSProperties = [
+  'font-size',
+  'font-family',
+  'color',
+  'line-height',
+  'letter-spacing',
+  'text-align',
+  'background-color',
+  'font-weight',
+  'font-style',
+  'text-decoration',
+];
 
 export const isStyleChanged = (tr: Transaction): boolean => {
   if (tr.getMeta('skipStyleDetection')) return false;
@@ -196,6 +291,48 @@ export const transformToRTE = (
             }
           }
 
+          if (
+            (!textContent.textItems || textContent.textItems.length === 0) &&
+            textContent.textStyle
+          ) {
+            const textStyleType = textContent.textStyle.textStyleType;
+
+            if (
+              textStyleType &&
+              (textStyleType === type || uiStyleSettingsStore)
+            ) {
+              let globalContentStyle = uiStyleSettingsStore
+                ? uiStyleSettingsStore.textStyles.textStyleOptions[
+                    textStyleType
+                  ].style
+                : newStyle ?? ({} as TextStyleDeclaration);
+
+              globalContentStyle = {
+                ...globalContentStyle,
+                textAlign: textContent.textStyle.textAlign,
+              };
+
+              textContent.text = getUpdatedHTMLFromEditor(
+                externalEditor,
+                textContent.text,
+                globalContentStyle,
+              );
+            } else if (
+              !textStyleType &&
+              newContent &&
+              newContent.id === textContent.id &&
+              !hasRTEContent(textContent.text)
+            ) {
+              const newContentStyle = (newContent as TextContent).textStyle;
+
+              textContent.text = getUpdatedHTMLFromEditor(
+                externalEditor,
+                textContent.text,
+                newContentStyle,
+              );
+            }
+          }
+
           break;
       }
     }
@@ -227,11 +364,12 @@ export const switchAllContentToRTE = (
               textAlign: bannerContent.titleStyle.textAlign,
             };
 
-            bannerContent.title = getUpdatedHTMLFromEditor(
-              externalEditor,
-              bannerContent.title,
-              globalContentStyle,
-            );
+            if (!hasRTEContent(bannerContent.title))
+              bannerContent.title = getUpdatedHTMLFromEditor(
+                externalEditor,
+                bannerContent.title,
+                globalContentStyle,
+              );
           } else if (
             !titleTextStyleType &&
             !hasRTEContent(bannerContent.title)
@@ -255,11 +393,12 @@ export const switchAllContentToRTE = (
               textAlign: bannerContent.descriptionStyle.textAlign,
             };
 
-            bannerContent.description = getUpdatedHTMLFromEditor(
-              externalEditor,
-              bannerContent.description,
-              globalContentStyle,
-            );
+            if (!hasRTEContent(bannerContent.description))
+              bannerContent.description = getUpdatedHTMLFromEditor(
+                externalEditor,
+                bannerContent.description,
+                globalContentStyle,
+              );
           } else if (
             !descriptionTextStyleType &&
             !hasRTEContent(bannerContent.description)
@@ -294,11 +433,12 @@ export const switchAllContentToRTE = (
                   textAlign: textItemContent.textStyle.textAlign,
                 };
 
-                textItemContent.text = getUpdatedHTMLFromEditor(
-                  externalEditor,
-                  textItemContent.text,
-                  globalContentStyle,
-                );
+                if (!hasRTEContent(textItemContent.text))
+                  textItemContent.text = getUpdatedHTMLFromEditor(
+                    externalEditor,
+                    textItemContent.text,
+                    globalContentStyle,
+                  );
               } else if (
                 !textItemStyleType &&
                 !hasRTEContent(textItemContent.text)
@@ -314,6 +454,38 @@ export const switchAllContentToRTE = (
             }
           }
 
+          if (
+            (!textContent.textItems || textContent.textItems.length === 0) &&
+            textContent.textStyle
+          ) {
+            const textStyleType = textContent.textStyle.textStyleType;
+
+            if (textStyleType && uiStyleSettingsStore) {
+              let globalContentStyle = uiStyleSettingsStore.textStyles
+                .textStyleOptions[textStyleType].style as TextStyleDeclaration;
+
+              globalContentStyle = {
+                ...globalContentStyle,
+                textAlign: textContent.textStyle.textAlign,
+              };
+
+              if (!hasRTEContent(textContent.text))
+                textContent.text = getUpdatedHTMLFromEditor(
+                  externalEditor,
+                  textContent.text,
+                  globalContentStyle,
+                );
+            } else if (!textStyleType && !hasRTEContent(textContent.text)) {
+              const newContentStyle = textContent.textStyle;
+
+              textContent.text = getUpdatedHTMLFromEditor(
+                externalEditor,
+                textContent.text,
+                newContentStyle,
+              );
+            }
+          }
+
           break;
       }
     }
@@ -354,7 +526,15 @@ export const getUpdatedHTMLFromEditor = (
   }
 
   if (newContentStyle?.color) {
-    chain = chain.setMark('textStyle', { color: newContentStyle.color });
+    chain = chain.setMark('textStyle', {
+      color: getRTEColor(newContentStyle.color, 'text'),
+    });
+  }
+
+  if (newContentStyle?.backgroundColor) {
+    chain = chain.setMark('highlight', {
+      color: getRTEColor(newContentStyle.backgroundColor, 'background'),
+    });
   }
 
   if (!currentAlignment.textAlign && newContentStyle?.textAlign) {
@@ -404,7 +584,9 @@ export const buildInitialMarks = (
 
   if (fontSize) textStyleAttrs.fontSize = fontSize;
 
-  if (color) textStyleAttrs.color = color;
+  if (color) {
+    textStyleAttrs.color = getRTEColor(color, 'text');
+  }
 
   if (letterSpacing) textStyleAttrs.letterSpacing = letterSpacing;
 
@@ -413,7 +595,11 @@ export const buildInitialMarks = (
   marks.push(state.schema.marks.textStyle.create(textStyleAttrs));
 
   if (backgroundColor) {
-    marks.push(state.schema.marks.highlight.create({ color: backgroundColor }));
+    marks.push(
+      state.schema.marks.highlight.create({
+        color: getRTEColor(backgroundColor, 'background'),
+      }),
+    );
   }
 
   // Bold and italic
@@ -471,3 +657,262 @@ export const retainStyleOnEmptyLine = (
     }
   }
 };
+
+export interface SanitizationResult {
+  sanitizedHtml: string;
+  removedElements: string[];
+}
+
+let rteDomPurifyInstance: DOMPurify | null = null;
+
+const getRTEDomPurifyInstance = (): DOMPurify => {
+  if (!rteDomPurifyInstance) {
+    rteDomPurifyInstance = createDomPurify;
+  }
+
+  return rteDomPurifyInstance;
+};
+
+export const sanitiseClientSideRTE = (html: string): SanitizationResult => {
+  return sanitizeRTEHtml(html, getRTEDomPurifyInstance());
+};
+
+/**
+ * Validates if an href value is safe and returns a sanitized version
+ */
+const validateAndSanitizeHref = (href: string): string | null => {
+  if (!href || typeof href !== 'string') return null;
+
+  // Trim whitespace and decode entities
+  const trimmedHref = href.trim();
+
+  if (!trimmedHref) return null;
+
+  const lowerHref = trimmedHref.toLowerCase();
+
+  for (const protocol of dangerousProtocols) {
+    if (lowerHref.startsWith(protocol)) return null;
+  }
+
+  // Allow relative paths, absolute paths, and safe protocols
+  if (
+    trimmedHref.startsWith('/') ||
+    trimmedHref.startsWith('./') ||
+    trimmedHref.startsWith('../')
+  ) {
+    return trimmedHref;
+  }
+
+  // Allow http and https URLs
+  if (lowerHref.startsWith('http://') || lowerHref.startsWith('https://')) {
+    try {
+      const url = new URL(trimmedHref);
+
+      // Additional validation for malformed URLs
+      if (url.hostname.includes('..') || url.hostname === '') {
+        return null;
+      }
+
+      return trimmedHref;
+    } catch {
+      return null;
+    }
+  }
+
+  // Allow mailto links
+  if (lowerHref.startsWith('mailto:')) {
+    // Basic email validation
+    const emailPart = trimmedHref.substring(7);
+
+    if (/^[^\s@]+@[^\s@]+\.[^\s@]+/.test(emailPart)) {
+      return trimmedHref;
+    }
+
+    return null;
+  }
+
+  // Allow tel links
+  if (lowerHref.startsWith('tel:')) {
+    const telPart = trimmedHref.substring(4);
+
+    if (/^[\d\s\-\+\(\)]+$/.test(telPart)) {
+      return trimmedHref;
+    }
+
+    return null;
+  }
+
+  // For any other format, treat as relative path if it doesn't contain dangerous characters
+  if (!/[<>'"\\]/.test(trimmedHref)) {
+    return trimmedHref;
+  }
+
+  return null;
+};
+
+/**
+ * Sanitize HTML string using DOMPurify.
+ * Only allow tags and attributes that correspond to the enabled Tiptap extensions.
+ * Forbid dangerous tags and attributes.
+ * @param html HTML string to sanitize
+ * @returns sanitization result with sanitized HTML and removed elements info
+ */
+export const sanitizeRTEHtml = (
+  html: string,
+  domPurify: DOMPurify,
+): SanitizationResult => {
+  const removedElements: string[] = [];
+
+  // Use DOMPurify hook to handle href validation and external link attributes
+  domPurify.addHook('afterSanitizeAttributes', (node) => {
+    if (node.tagName === 'A' && node.hasAttribute('href')) {
+      const href = node.getAttribute('href');
+      const sanitizedHref = validateAndSanitizeHref(href || '');
+
+      if (sanitizedHref === null) {
+        node.removeAttribute('href');
+        removedElements.push(`href="${href}"`);
+      } else if (sanitizedHref !== href) {
+        node.setAttribute('href', sanitizedHref);
+      }
+
+      // Add security attributes for external links
+      const finalHref = node.getAttribute('href');
+
+      if (
+        finalHref &&
+        (finalHref.startsWith('http://') || finalHref.startsWith('https://'))
+      ) {
+        node.setAttribute('target', '_blank');
+        node.setAttribute('rel', 'noopener noreferrer');
+      }
+    }
+  });
+
+  try {
+    // Main DOMPurify sanitization
+    const sanitized = domPurify.sanitize(html, {
+      ALLOWED_TAGS: allowedTags,
+      ALLOWED_ATTR: allowedAttributes,
+      FORBID_TAGS: forbiddenTags,
+      FORBID_ATTR: forbiddenAttributes,
+      KEEP_CONTENT: true,
+    });
+
+    // Track elements/attributes removed by DOMPurify
+    if (domPurify.removed && Array.isArray(domPurify.removed)) {
+      domPurify.removed.forEach((removed: any) => {
+        if (removed.element) {
+          const tagName = removed.element.tagName?.toLowerCase();
+
+          if (
+            tagName &&
+            tagName !== 'body' &&
+            !removedElements.includes(tagName)
+          ) {
+            removedElements.push(tagName);
+          }
+        }
+
+        if (removed.attribute) {
+          const attrInfo = `${removed.attribute.name}="${removed.attribute.value}"`;
+
+          if (!removedElements.includes(attrInfo)) {
+            removedElements.push(attrInfo);
+          }
+        }
+      });
+    }
+
+    // Post-process: sanitize CSS properties in style attributes
+    const finalHtml = sanitizeStyleAttributes(sanitized, removedElements);
+
+    return {
+      sanitizedHtml: finalHtml,
+      removedElements,
+    };
+  } finally {
+    // Always remove the hook to prevent memory leaks
+    domPurify.removeHook('afterSanitizeAttributes');
+  }
+};
+
+/**
+ * Sanitize CSS properties within style attributes to only allow TipTap extension properties
+ */
+const sanitizeStyleAttributes = (
+  html: string,
+  removedElements: string[],
+): string => {
+  return html
+    .replace(/\s*style="([^"]*)"/g, (match, styleValue) => {
+      // Parse and validate individual CSS properties
+      const declarations = styleValue
+        .split('; ')
+        .filter((decl: string) => decl.trim());
+      const validDeclarations = declarations.filter((declaration: string) => {
+        const [property] = declaration.split(':').map((s: string) => s.trim());
+
+        return allowedCSSProperties.includes(property);
+      });
+
+      // Track removed CSS properties
+      const removedDeclarations = declarations.filter((declaration: string) => {
+        const [property] = declaration.split(':').map((s: string) => s.trim());
+
+        return !allowedCSSProperties.includes(property);
+      });
+
+      // Add removed CSS properties to the removed elements array
+      removedDeclarations.forEach((removedDecl) => {
+        const trimmedDecl = removedDecl.trim();
+
+        if (trimmedDecl && !removedElements.includes(trimmedDecl)) {
+          removedElements.push(trimmedDecl);
+        }
+      });
+
+      if (validDeclarations.length === 0) {
+        return '';
+      }
+
+      return ` style="${validDeclarations.join(';')}"`;
+    })
+    .replace(/\s+>/g, '>'); // Clean up any extra spaces before closing tags
+};
+
+// Helper function to check if color is a logo theme color
+export const isLogoColor = (color: string) => {
+  return Object.values(STYLE_THEME_KEYS).some((themeKey) =>
+    color.startsWith(themeKey),
+  );
+};
+
+export const getRTEColor = (
+  color: string | null | undefined,
+  colorType: 'text' | 'background' = 'text',
+  defaultValue?: string,
+): string => {
+  if (!color) {
+    if (defaultValue) return defaultValue;
+
+    return colorType === 'text' ? '#000000' : 'transparent';
+  }
+
+  const themeKey = Object.values(STYLE_THEME_KEYS).find((key) =>
+    color.startsWith(key),
+  );
+
+  if (themeKey) {
+    return `var(--${themeKey})`;
+  }
+
+  return color;
+};
+
+// Helper function to check if color is a logo theme color
+export const hasLogoColorVar = (color: string) => {
+  return Object.values(STYLE_THEME_KEYS).some((themeKey) =>
+    color.includes(themeKey),
+  );
+};

package/src/bundles/bundled-translations.fr-FR.json

@@ -36,7 +36,7 @@
     "cookieCollection": "Collection de cookies",
     "faviconDescription": "Un favicon est une petite icône placée à côté du titre de votre site dans l'onglet du navigateur.",
     "socialShareTitle": "Partage sur les réseaux sociaux",
-    "paymentProvidersTitle": "Fournisseurs de paiement",
+    "paymentProvidersTitle": "Prestataires de paiement",
     "paymentProvidersDescription": "Activez ou inscrivez-vous auprès d'un fournisseur pris en charge. Commencez à collecter des dons et des paiements, ou vendez des produits, des services et bien plus encore !",
     "paymentProvidersAddProviderLabel": "Ajouter des prestataires de paiement"
   },
@@ -49,7 +49,7 @@
     "showPreview": "Afficher l’aperçu"
   },
   "googleAnalytics": {
-    "analyticsIntegrations": "Intégrations analytiques",
+    "analyticsIntegrations": "Intégrations aux outils d'analyse",
     "googleAnalyticsLabel": "Google Analytics : GA4",
     "googleAnalyticsInfo": "Ajoutez votre identifiant de mesure Google Analytics : GA4 pour suivre vos visiteurs avec GA4, utilisez le format G-XXXXXXXXX ou AW-XXXXXXXXX"
   },

package/src/lib.ts

@@ -58,6 +58,7 @@ export {
 export * as brandPageUtils from './brand-page/utils';
 export type { CriticalResourceURLs } from './brand-page/utils/view-model.util';
 export { getOptimalLogoSize } from './brand-page/utils/logo.util';
+export { sanitizeRTEHtml } from './brand-page-maker/utils';
 
 // stores
 export {

package/src/shared/content-settings/components/color-field/ColorField.mixin.ts

@@ -96,6 +96,11 @@ export default defineComponent({
       required: false,
       default: undefined,
     },
+    showColorPallet: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   setup() {
     const backgroundSettingsStore = useUiBackgroundSettingsStore();

package/src/shared/content-settings/components/color-field/ColorField.vue

@@ -28,7 +28,7 @@
 
       <div class="tw-flex tw-w-50">
         <ColorPalette
-          v-if="!isOptionColorMatched || isRichTextEditor"
+          v-if="(!isOptionColorMatched && showColorPallet) || isRichTextEditor"
           :custom-groups="customGroups"
           :popup="popup"
           :color="color"

package/src/shared/content-settings/components/page-dropdown-field/PageDropdownField.mixin.ts

@@ -22,6 +22,10 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    showUpgradeBtn: {
+      type: Boolean,
+      default: true,
+    },
   },
   setup() {
     const pageSettingsStore = useUiPageSettingsStore();

package/src/shared/content-settings/components/page-dropdown-field/PageDropdownField.vue

@@ -7,7 +7,7 @@
       :class="{
         'tw-text-grayscale-600 tw-font-normal': !selectedPageName,
       }"
-      menu-element-classes="tw-w-full"
+      menu-element-classes="tw-overflow-y-auto tw-max-h-72 tw-w-full"
       :title="selectedPageName || placeholder"
     >
       <DropdownItem
@@ -18,7 +18,7 @@
       >
         {{ value.title }}
       </DropdownItem>
-      <DropdownItem class="tw-text-black tw-break-all">
+      <DropdownItem v-if="showUpgradeBtn" class="tw-text-black tw-break-all">
         <Button
           data-test-tag="add-page"
           :label="addPageLabel"

package/src/shared/content-settings/components/text-field/TextField.vue

@@ -12,7 +12,7 @@
       :max-length="maxLength"
       :name="name"
       :styles="styles"
-      :rawId="id"
+      :raw-id="id"
       @focus="onFocus"
       @blur="onBlur"
     />

package/src/shared/content-settings/components/text-items-field/TextItemsField.vue

@@ -15,10 +15,10 @@
       <template #form="option">
         <h4 class="tw-mt-3 tw-mb-1.5 tw-text-sm tw-font-bold">Text</h4>
         <TextareaField
-          :ref="`${id}-${option.index}-text-area-field`"
           :id="id"
+          :ref="`${id}-${option.index}-text-area-field`"
           :index="option.index"
-          :showRichTextEditor="showRichTextEditor"
+          :show-rich-text-editor="showRichTextEditor"
           :value="options[option.index].text"
           :name="name"
           :show-label-screen-reader-only="true"

package/src/shared/content-settings/components/textarea-field/TextareaField.vue

@@ -3,10 +3,10 @@
   <div>
     <RichTextEditor
       v-if="showRichTextEditor"
-      ref="richTextEditorRef"
-      class="tw-bg-white"
       :id="`${id}-${name}`"
+      ref="richTextEditorRef"
       v-model="text"
+      class="tw-bg-white"
       :attrs="attrs"
       :label="label"
       :placeholder="placeholder"
@@ -15,7 +15,7 @@
       :max-length="maxLength"
       :name="name"
       :styles="styles"
-      :rawId="id"
+      :raw-id="id"
       :text-item-index="index"
       :item="item"
       @focus="onFocus"