@designcrowd/library.brand-page 5.10.20 → 5.10.31

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.de-DE.json

@@ -12,6 +12,17 @@
     "customAmountLabelOr": "oder benutzerdefinierter Betrag {{CURRENCY_CODE}}",
     "customAmountLabel": "Benutzerdefinierter Betrag {{CURRENCY_CODE}}"
   },
+  "sensitiveContentModal": {
+    "sensitiveContentDisplayTitle": "Sensible Inhalte",
+    "sensitiveContentmessage": "Bestätigen Sie, dass Sie bereit sind, potenziell sensible Inhalte zu sehen",
+    "ageRestrictionDisplayTitle": "Sensible Inhalte",
+    "ageRestrictionMessage": "Bestätigen Sie, dass Sie volljährig sind, um diesen Inhalt anzusehen",
+    "rejectedDisplayTitle": "Sie können diese Seite nicht besuchen",
+    "rejectedDisplayTMessage": "Der Zugang ist auf Benutzer ab {{REQUIRED_MINIMUM_AGE}} Jahren beschränkt.",
+    "iAcceptAgeButtonLabel": "Ich bin älter als {{REQUIRED_MINIMUM_AGE}}.",
+    "iDenyAgeButtonLabel": "Ich bin jünger als {{REQUIRED_MINIMUM_AGE}}.",
+    "iConfirmButtonLabel": "Ich bestätige"
+  },
   "shop": {
     "noProducts": "Zurzeit sind keine Produkte aufgelistet",
     "viewCart": "Warenkorb anzeigen"

package/src/bundles/bundled-translations.es-ES.json

@@ -12,6 +12,17 @@
     "customAmountLabelOr": "o introduce un importe personalizado {{CURRENCY_CODE}}",
     "customAmountLabel": "Cantidad personalizada {{CURRENCY_CODE}}"
   },
+  "sensitiveContentModal": {
+    "sensitiveContentDisplayTitle": "Contenido sensible",
+    "sensitiveContentmessage": "Confirma que estás dispuesto a ver contenido potencialmente sensible",
+    "ageRestrictionDisplayTitle": "Contenido sensible",
+    "ageRestrictionMessage": "Confirma que tienes la edad legal para ver este contenido",
+    "rejectedDisplayTitle": "No puedes visitar este sitio",
+    "rejectedDisplayTMessage": "El acceso está restringido a usuarios de {{REQUIRED_MINIMUM_AGE}} años o más",
+    "iAcceptAgeButtonLabel": "Estoy harto de {{REQUIRED_MINIMUM_AGE}}",
+    "iDenyAgeButtonLabel": "Tengo menos de {{REQUIRED_MINIMUM_AGE}} años",
+    "iConfirmButtonLabel": "Confirmo"
+  },
   "shop": {
     "noProducts": "No hay productos disponibles en este momento.",
     "viewCart": "Ver carrito"

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

@@ -12,6 +12,17 @@
     "customAmountLabelOr": "ou montant personnalisé {{CURRENCY_CODE}}",
     "customAmountLabel": "Montant personnalisé {{CURRENCY_CODE}}"
   },
+  "sensitiveContentModal": {
+    "sensitiveContentDisplayTitle": "Contenu sensible",
+    "sensitiveContentmessage": "Confirmez que vous êtes prêt à voir du contenu potentiellement sensible",
+    "ageRestrictionDisplayTitle": "Contenu sensible",
+    "ageRestrictionMessage": "Confirmez que vous avez l'âge légal pour voir ce contenu",
+    "rejectedDisplayTitle": "Vous ne pouvez pas visiter ce site",
+    "rejectedDisplayTMessage": "L'accès est restreint aux utilisateurs de {{REQUIRED_MINIMUM_AGE}} ans et plus",
+    "iAcceptAgeButtonLabel": "J'ai plus de {{REQUIRED_MINIMUM_AGE}} ans",
+    "iDenyAgeButtonLabel": "J'ai moins de {{REQUIRED_MINIMUM_AGE}} ans",
+    "iConfirmButtonLabel": "Je confirme"
+  },
   "shop": {
     "noProducts": "Aucun produit n’est répertorié pour le moment",
     "viewCart": "Voir le panier"
@@ -36,7 +47,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 +60,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/bundles/bundled-translations.json

@@ -12,6 +12,17 @@
     "customAmountLabelOr": "or custom amount {{CURRENCY_CODE}}",
     "customAmountLabel": "Custom amount {{CURRENCY_CODE}}"
   },
+  "sensitiveContentModal": {
+    "sensitiveContentDisplayTitle": "Sensitive Content",
+    "sensitiveContentmessage": "Confirm that you are willing to see potentially sensitive content",
+    "ageRestrictionDisplayTitle": "Sensitive Content",
+    "ageRestrictionMessage": "Confirm that you are of legal age to view this content",
+    "rejectedDisplayTitle": "You cannot visit this site",
+    "rejectedDisplayTMessage": "Access is restricted to users {{REQUIRED_MINIMUM_AGE}} and older",
+    "iAcceptAgeButtonLabel": "I'm over {{REQUIRED_MINIMUM_AGE}}",
+    "iDenyAgeButtonLabel": "I'm under {{REQUIRED_MINIMUM_AGE}}",
+    "iConfirmButtonLabel": "I Confirm"
+  },
   "shop": {
     "noProducts": "No products are listed at the moment",
     "viewCart": "View Cart"

package/src/bundles/bundled-translations.pt-PT.json

@@ -12,6 +12,17 @@
     "customAmountLabelOr": "ou um montante personalizado {{CURRENCY_CODE}}",
     "customAmountLabel": "Montante personalizado {{CURRENCY_CODE}}"
   },
+  "sensitiveContentModal": {
+    "sensitiveContentDisplayTitle": "Conteúdo sensível",
+    "sensitiveContentmessage": "Confirme que está disposto a ver conteúdo potencialmente sensível",
+    "ageRestrictionDisplayTitle": "Conteúdo sensível",
+    "ageRestrictionMessage": "Confirme que tem idade legal para visualizar este conteúdo",
+    "rejectedDisplayTitle": "Não pode visitar este site",
+    "rejectedDisplayTMessage": "O acesso é restrito a utilizadores com {{REQUIRED_MINIMUM_AGE}} anos ou mais",
+    "iAcceptAgeButtonLabel": "Estou farto de {{REQUIRED_MINIMUM_AGE}}",
+    "iDenyAgeButtonLabel": "Tenho menos de {{REQUIRED_MINIMUM_AGE}}",
+    "iConfirmButtonLabel": "Confirmo"
+  },
   "shop": {
     "noProducts": "Nenhum produto listado de momento",
     "viewCart": "Ver carrinho"