@designcrowd/library.brand-page 5.10.20 → 5.10.30

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

@@ -19,6 +19,7 @@ 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';
@@ -30,19 +31,28 @@ import {
   emToPx,
   isStyleChanged,
   pxToEm,
+  sanitiseClientSideRTE,
   skipStyleDetection,
 } from '../../../brand-page-maker/utils';
-import {
-  TextStyles,
-  type TextItem,
-  type TextStyleDeclaration,
-} from '../../../brand-page';
+import type { TextStyles } from '../../../brand-page';
+import { type TextItem, type TextStyleDeclaration } from '../../../brand-page';
 import type { ButtonGroupOption } from '../../../brand-page-maker/models/button-group.model';
-import { letterSpacingValueConvertor } from '../../../brand-page-maker/convertors';
+import {
+  letterSpacingValueConvertor,
+  colorConvertor,
+  backgroundColorConvertor,
+} from '../../../brand-page-maker/convertors';
 import { useUiContentSettingsStore } from '../../../shared/content-settings/store';
-import { DOMSerializer } from 'prosemirror-model';
 import { AllSelection } from 'prosemirror-state';
 import { MaxLength } from './extensions/MaxLength';
+import { AutoLink } from './extensions/AutoLink';
+import { useHyperlink } from './hyperlink';
+import { useBubbleMenu } from './bubbleMenu';
+import {
+  hasLogoColorVar,
+  isLogoColor,
+  getRTEColor,
+} from '../../utils/rich-text-editor.util';
 
 interface UseRichTextEditorReturn {
   editor: Editor;
@@ -69,6 +79,22 @@ interface UseRichTextEditorReturn {
   setInitialStyleSettings: (selectedTextStyle?: BrandPageCssStyle) => void;
   copyGlobalStyleSettings: (selectedTextStyle?: BrandPageCssStyle) => void;
   unsetAllMarks: () => void;
+  handleHyperlink: (
+    action: 'toggle' | 'apply' | 'remove',
+    data?: { href?: string; text?: string },
+  ) => void;
+  hyperlinkValue: ComputedRef<{ id: string; name: string; value: string }>;
+  setHyperlinkUrlValue: (url: string) => void;
+  shouldShow: ({ editor, state }: { editor: any; state: any }) => boolean;
+  tippyOptions: Record<string, any>;
+  handleAdminColorChange: (
+    color: {
+      id: string;
+      name: string;
+      value: string;
+    },
+    type: 'textColor' | 'backgroundColor',
+  ) => void;
 }
 
 interface DropdownInstance {
@@ -77,6 +103,7 @@ interface DropdownInstance {
 
 interface EditorOptionType {
   type:
+    | 'hyperlink'
     | 'fontFamily'
     | 'fontSize'
     | 'fontWeight'
@@ -115,6 +142,22 @@ export const useExternalRichTextEditor = (): {
       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,
+          };
+        },
+      }),
+      AutoLink,
     ],
   });
 
@@ -153,6 +196,8 @@ export const useRichTextEditor = (
   onSelectTextStyleType: (option: ButtonGroupOption) => void,
   updateRichTextEditor: Ref<boolean>,
   textStyleTypeOptions: ButtonGroupOption[],
+  markedText: Ref<string>,
+  isHyperlinkPopupOpen: Ref<boolean>,
 ): UseRichTextEditorReturn => {
   const editor = new Editor({
     content: model.value ?? '',
@@ -180,6 +225,21 @@ export const useRichTextEditor = (
         placeholder: props.placeholder,
       }),
       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,
+          };
+        },
+      }),
+      AutoLink,
     ],
     editorProps: {
       handleDOMEvents: {
@@ -212,33 +272,25 @@ export const useRichTextEditor = (
           return false;
         },
         copy(view, event: ClipboardEvent) {
-          // Prevent the browser’s default so we can inject our own blobs
-          event.preventDefault();
+          const selection = view.state.selection;
 
-          // 1) Plain text (already have this)
-          const selectedText = view.state.doc.textBetween(
-            view.state.selection.from,
-            view.state.selection.to,
-            '\n',
-          );
+          if (selection.empty) return;
 
-          event.clipboardData?.setData('text/plain', selectedText);
+          const data = event.clipboardData;
 
-          // 2) custom style blob to add
           const styleData = JSON.stringify(props.styles);
 
-          event.clipboardData?.setData('application/x-rte-styles', styleData);
+          const slice = selection.content(),
+            { dom, text } = view.serializeForClipboard(slice);
 
-          // 3) HTML serialization via ProseMirror’s DOMSerializer
-          const { from, to } = view.state.selection;
-          const slice = view.state.doc.slice(from, to);
-          const serializer = DOMSerializer.fromSchema(view.state.schema);
-          const fragment = serializer.serializeFragment(slice.content);
-          // Wrap in a container DIV so we can grab `innerHTML`
-          const wrapper = document.createElement('div');
+          if (data) {
+            event.preventDefault();
+            data.clearData();
+            data.setData('text/html', dom.innerHTML);
+            data.setData('text/plain', text);
 
-          wrapper.appendChild(fragment);
-          event.clipboardData?.setData('text/html', wrapper.innerHTML);
+            if (styleData) data.setData('application/x-rte-styles', styleData);
+          }
 
           return true;
         },
@@ -292,6 +344,27 @@ export const useRichTextEditor = (
 
           return true;
         },
+        click(view, event) {
+          if (isHyperlinkPopupOpen?.value) return false;
+
+          const target = event.target as HTMLElement;
+
+          const linkElement = target.closest('a');
+
+          if (linkElement) {
+            const pos = view.posAtDOM(linkElement, 0);
+
+            if (pos !== null) {
+              editor.commands.setTextSelection(pos);
+
+              editor.commands.extendMarkRange('link');
+
+              return true; // Prevent default
+            }
+          }
+
+          return false;
+        },
       },
     },
   });
@@ -337,6 +410,19 @@ export const useRichTextEditor = (
     setLineHeightAll,
   } = useSpacing(editor);
 
+  const {
+    hyperlinkValue,
+    setHyperlinkUrl,
+    setHyperlinkUrlValue,
+    removeHyperlink: removeHyperlinkFromComposable,
+    applyHyperlinkToEditor,
+  } = useHyperlink(editor);
+
+  const { shouldShow, tippyOptions } = useBubbleMenu(
+    editor,
+    isHyperlinkPopupOpen,
+  );
+
   watch(
     () => props.styles.textAlign,
     (newAlignment) => {
@@ -376,9 +462,9 @@ export const useRichTextEditor = (
 
   // Update model when editor content changes
   editor.on('update', () => {
-    const html = editor.getHTML();
+    const sanitizedData = sanitiseClientSideRTE(editor.getHTML());
 
-    emit('update:modelValue', html);
+    emit('update:modelValue', sanitizedData.sanitizedHtml);
   });
 
   editor.on('selectionUpdate', () => {
@@ -421,15 +507,17 @@ export const useRichTextEditor = (
     }
 
     if (textStyleAttributes && textStyleAttributes.color) {
-      fontSettings.selectedTextColor = Color(textStyleAttributes.color).hex();
+      if (!hasLogoColorVar(textStyleAttributes.color))
+        fontSettings.selectedTextColor = Color(textStyleAttributes.color).hex();
     } else {
       fontSettings.selectedTextColor = '#000000';
     }
 
     if (highlightAttributes && highlightAttributes.color) {
-      fontSettings.selectedBackgroundColor = Color(
-        highlightAttributes.color,
-      ).hex();
+      if (!hasLogoColorVar(highlightAttributes.color))
+        fontSettings.selectedBackgroundColor = Color(
+          highlightAttributes.color,
+        ).hex();
     } else {
       fontSettings.selectedBackgroundColor = 'transparent';
     }
@@ -490,9 +578,14 @@ export const useRichTextEditor = (
       fontSettings.selectedFontSizePx = parseInt(
         emToPx(globalStyles?.fontSize ?? '2.25em'),
       );
-      fontSettings.selectedTextColor = globalStyles?.color ?? '#000000';
-      fontSettings.selectedBackgroundColor =
-        globalStyles?.backgroundColor ?? 'transparent';
+      fontSettings.selectedTextColor = hasLogoColorVar(globalStyles.color ?? '')
+        ? '#000000'
+        : globalStyles?.color ?? '#000000';
+      fontSettings.selectedBackgroundColor = hasLogoColorVar(
+        globalStyles?.backgroundColor ?? '',
+      )
+        ? 'transparent'
+        : globalStyles?.backgroundColor ?? 'transparent';
       lineHeight.value = globalStyles?.lineHeight?.includes('em')
         ? emToPx(globalStyles?.lineHeight ?? '1em')
         : globalStyles?.lineHeight ?? '1';
@@ -512,9 +605,16 @@ export const useRichTextEditor = (
       fontSettings.selectedFontSizePx = parseInt(
         emToPx(props.styles?.fontSize ?? '2.25em'),
       );
-      fontSettings.selectedTextColor = props.styles?.color ?? '#000000';
-      fontSettings.selectedBackgroundColor =
-        props.styles?.backgroundColor ?? 'transparent';
+      fontSettings.selectedTextColor = hasLogoColorVar(
+        props.styles?.color ?? '#000000',
+      )
+        ? '#000000'
+        : props.styles?.color ?? '#000000';
+      fontSettings.selectedBackgroundColor = hasLogoColorVar(
+        props.styles?.backgroundColor ?? '',
+      )
+        ? 'transparent'
+        : props.styles?.backgroundColor ?? 'transparent';
       lineHeight.value = props.styles?.lineHeight?.includes('em')
         ? emToPx(props.styles?.lineHeight ?? '1em')
         : props.styles?.lineHeight ?? '1';
@@ -543,8 +643,14 @@ export const useRichTextEditor = (
         toggleStrikeAll();
 
       if (globalStyles.color) {
-        toggleTextColorAll(globalStyles.color);
-        fontSettings.selectedTextColor = globalStyles.color;
+        if (!hasLogoColorVar(globalStyles.color)) {
+          toggleTextColorAll(globalStyles.color);
+          fontSettings.selectedTextColor = globalStyles.color;
+        } else {
+          // Apply logo color using CSS variable
+          toggleTextColorAll(getRTEColor(globalStyles.color, 'text'));
+          fontSettings.selectedTextColor = '#000000';
+        }
       }
 
       globalStyles.fontFamily && toggleFontAll(globalStyles.fontFamily);
@@ -630,6 +736,9 @@ export const useRichTextEditor = (
         toggleTextAlign();
         fontStyleChanges.textAlign = currentAlignment.value.alignment;
         break;
+      case 'hyperlink':
+        setHyperlinkUrl(editorOption.value as string);
+        break;
     }
 
     syncContentSettings(fontStyleChanges);
@@ -665,6 +774,149 @@ export const useRichTextEditor = (
     emit('blur');
   };
 
+  const handleHyperlink = (
+    action: 'toggle' | 'apply' | 'remove',
+    data?: { href?: string; text?: string },
+  ) => {
+    switch (action) {
+      case 'toggle':
+        isHyperlinkPopupOpen.value = !isHyperlinkPopupOpen.value;
+
+        if (isHyperlinkPopupOpen.value) {
+          if (data?.href && data?.text) {
+            setHyperlinkUrlValue(data.href);
+            markedText.value = data.text;
+          } else {
+            const linkAttrs = editor.getAttributes('link');
+
+            const selection = editor.state.selection;
+
+            if (linkAttrs.href) {
+              editor.commands.extendMarkRange('link');
+
+              const linkText = editor.state.doc.textBetween(
+                selection.from,
+                selection.to,
+              );
+
+              setHyperlinkUrlValue(linkAttrs.href);
+
+              markedText.value = linkText;
+            } else {
+              const selectedText = selection.empty
+                ? ''
+                : editor.state.doc.textBetween(selection.from, selection.to);
+
+              setHyperlinkUrlValue('');
+
+              markedText.value = selectedText;
+            }
+          }
+
+          editor.commands.focus(); // Hide bubble menu
+        }
+
+        break;
+
+      case 'apply':
+        const url = hyperlinkValue.value.value;
+
+        const text = markedText.value;
+
+        if (!url.trim()) {
+          isHyperlinkPopupOpen.value = false;
+
+          return;
+        }
+
+        const selection = editor.state?.selection;
+        const selectionRange = selection
+          ? { from: selection.from, to: selection.to }
+          : undefined;
+
+        applyHyperlinkToEditor(url, text, selectionRange);
+        isHyperlinkPopupOpen.value = false;
+        break;
+
+      case 'remove':
+        removeHyperlinkFromComposable();
+        isHyperlinkPopupOpen.value = false;
+        break;
+    }
+  };
+
+  const handleAdminColorChange = (
+    color: any,
+    colorType: 'textColor' | 'backgroundColor',
+  ) => {
+    const convertor =
+      colorType === 'textColor' ? colorConvertor : backgroundColorConvertor;
+    const convertedColor = convertor.convertBack(color.value);
+    const colorValue =
+      colorType === 'textColor'
+        ? convertedColor.color
+        : convertedColor.backgroundColor;
+
+    editor.commands.selectAll();
+
+    if (colorValue?.startsWith('#')) {
+      if (colorType === 'textColor') {
+        fontSettings.selectedTextColor = colorValue;
+      } else {
+        fontSettings.selectedBackgroundColor = colorValue;
+      }
+
+      triggerEditorStyleChange({
+        type: colorType,
+        value: colorValue,
+      });
+    } else {
+      // Handle logo theme colors using getRTEColor
+      if (isLogoColor(colorValue || '')) {
+        const processedColor = getRTEColor(
+          colorValue,
+          colorType === 'textColor' ? 'text' : 'background',
+        );
+
+        if (colorType === 'textColor') {
+          editor.commands.setColor(processedColor);
+        } else {
+          editor.commands.setHighlight({
+            color: processedColor,
+          });
+        }
+      } else {
+        if (colorType === 'textColor') {
+          editor.commands.unsetColor();
+        } else {
+          editor.commands.unsetHighlight();
+        }
+      }
+    }
+
+    const updateValue = {
+      textStyleType: undefined,
+      ...(colorType === 'textColor'
+        ? { color: colorValue }
+        : { backgroundColor: colorValue }),
+    };
+
+    if (props.name === 'textItems') {
+      contentSettingStore.updateTextItemTextStyleTypeWithStyles({
+        id: props.rawId,
+        name: props.name,
+        value: updateValue,
+        index: props.textItemIndex,
+      });
+    } else {
+      contentSettingStore.updateTextStyles({
+        id: props.rawId,
+        name: props.name,
+        value: updateValue,
+      });
+    }
+  };
+
   onBeforeUnmount(() => {
     editor.destroy();
   });
@@ -690,5 +942,11 @@ export const useRichTextEditor = (
     setInitialStyleSettings,
     copyGlobalStyleSettings,
     unsetAllMarks,
+    handleHyperlink,
+    hyperlinkValue,
+    setHyperlinkUrlValue,
+    shouldShow,
+    tippyOptions,
+    handleAdminColorChange,
   };
 };

package/src/brand-page-maker/models/button-group.model.ts

@@ -5,6 +5,7 @@ export interface ButtonGroupBasicOption {
   label: string;
   isSelected: boolean;
   dataAttribute?: string;
+  disabled?: boolean;
 }
 
 export type ButtonGroupOption =
@@ -18,4 +19,5 @@ export type ButtonGroupOption =
       iconViewBox?: string;
       iconSize?: string;
       dataAttribute?: string;
+      disabled?: boolean;
     };

package/src/brand-page-maker/stores/brandpage-maker/__snapshots__/brandpage-maker-store.test.ts.snap

@@ -4,6 +4,7 @@ exports[`brand page maker store module > brand page maker module should returns
 [
   "logo",
   "profile",
+  "text",
   "general-link",
   "website",
   "email",