@designcrowd/library.brand-page 5.10.6-sanitise-hyperlink-16 → 5.10.6

package/lib/src/brand-page/models/index.d.ts

@@ -207,11 +207,6 @@ export declare const BUTTON_LINK_TYPE: {
     readonly tel: "tel";
 };
 export type ButtonLinkType = keyof typeof BUTTON_LINK_TYPE;
-export declare const HYPERLINK_TYPE: {
-    readonly url: "url";
-    readonly page: "page";
-};
-export type HyperlinkType = keyof typeof HYPERLINK_TYPE;
 export declare const URL_TYPE: {
     readonly url: "url";
     readonly email: "email";

package/lib/src/brand-page/models/index.js

@@ -136,10 +136,6 @@ export const BUTTON_LINK_TYPE = {
     mailTo: 'mailTo',
     tel: 'tel',
 };
-export const HYPERLINK_TYPE = {
-    url: 'url',
-    page: 'page',
-};
 export const URL_TYPE = {
     url: 'url',
     email: 'email',

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.js

@@ -171,7 +171,7 @@ export const BRAND_SITE = {
                         color: 'logo-text-color',
                         fontSize: '1.5rem',
                         textAlign: 'center',
-                        fontFamily: 'Exo 2',
+                        fontFamily: 'Nunito',
                         lineHeight: '2rem',
                     },
                     colorReplacements: [

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/content-settings-items.fixture.js

@@ -43,7 +43,6 @@ export const textContent = {
     textSize: {},
     textStyle: {
         textAlign: DEFAULT_TEXT_ALIGN,
-        fontSize: '2em',
     },
     textAlignment: {},
     textColor: {},

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/page-content-items.d.ts

@@ -1,2 +1,2 @@
-export declare const brandPageContentsSampleData: (import("../../../../brand-page").ButtonContent | import("../../../../brand-page").ProfileContent | import("../../../../brand-page").TextContent | import("../../../../brand-page").LogoContent)[];
+export declare const brandPageContentsSampleData: (import("../../../../brand-page").ButtonContent | import("../../../../brand-page").ProfileContent | import("../../../../brand-page").LogoContent)[];
 export declare const brandPageContentsSampleDataStarterKit: (import("../../../../brand-page").ButtonContent | import("../../../../brand-page").ProfileContent | import("../../../../brand-page").LogoContent)[];

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/page-content-items.js

@@ -1,8 +1,7 @@
-import { logoContent, profileContent, generalLink, facebookLink, websiteLink, emailLink, phoneLink, twitterLink, instagramLink, youtubeLink, linkedinLink, pinterestLink, twitchLink, tiktokLink, textContent, } from './content-settings-items.fixture';
+import { logoContent, profileContent, generalLink, facebookLink, websiteLink, emailLink, phoneLink, twitterLink, instagramLink, youtubeLink, linkedinLink, pinterestLink, twitchLink, tiktokLink, } from './content-settings-items.fixture';
 export const brandPageContentsSampleData = [
     logoContent,
     profileContent,
-    textContent,
     generalLink,
     websiteLink,
     emailLink,

package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/MaxLength.js

@@ -42,7 +42,7 @@ export const MaxLength = Extension.create({
                                 const text = node.text ?? '';
                                 const piece = text.slice(0, remaining);
                                 if (piece.length > 0) {
-                                    nodes.push(node.type.schema.text(piece, node.marks));
+                                    nodes.push(node.type.create(node.attrs, node.type.schema.text(piece), node.marks));
                                     remaining -= piece.length;
                                 }
                             }
@@ -64,7 +64,7 @@ export const MaxLength = Extension.create({
                                             const piece = (subNode.text ?? '').slice(0, remaining);
                                             if (piece.length === 0)
                                                 return null;
-                                            const newText = subNode.type.schema.text(piece, subNode.marks);
+                                            const newText = subNode.type.create(subNode.attrs, subNode.type.schema.text(piece), subNode.marks);
                                             remaining -= piece.length;
                                             return newText;
                                         }
@@ -77,7 +77,7 @@ export const MaxLength = Extension.create({
                                             });
                                             if (children.length === 0)
                                                 return null;
-                                            return subNode.copy(Fragment.fromArray(children));
+                                            return subNode.type.create(subNode.attrs, Fragment.fromArray(children), subNode.marks);
                                         }
                                         return null;
                                     };

package/lib/src/brand-page-maker/composables/rich-text-editor/font.d.ts

@@ -1,5 +1,5 @@
 import { type Ref } from 'vue';
-import type { Editor } from '@tiptap/vue-3';
+import { Editor } from '@tiptap/vue-3';
 interface DropdownRef {
     hideMenu: () => void;
 }

package/lib/src/brand-page-maker/composables/rich-text-editor/font.js

@@ -1,4 +1,5 @@
 import { ref } from 'vue';
+import { Editor } from '@tiptap/vue-3';
 import { emToPx, pxToEm, skipStyleDetection, } from '../../../brand-page-maker/utils';
 import debounce from 'lodash/debounce';
 export const useFont = (editor, fontSettings, dropdownRef) => {

package/lib/src/brand-page-maker/composables/rich-text-editor/formatting.d.ts

@@ -1,4 +1,4 @@
-import type { Editor } from '@tiptap/vue-3';
+import { Editor } from '@tiptap/vue-3';
 export declare const createFormattingActions: (editor: Editor) => {
     toggleBold: () => boolean;
     toggleItalic: () => boolean;

package/lib/src/brand-page-maker/composables/rich-text-editor/formatting.js

@@ -1,3 +1,4 @@
+import { Editor } from '@tiptap/vue-3';
 import { skipStyleDetection } from '../../../brand-page-maker/utils';
 export const createFormattingActions = (editor) => {
     return {

package/lib/src/brand-page-maker/composables/rich-text-editor/spacing.d.ts

@@ -1,4 +1,4 @@
-import type { Editor } from '@tiptap/vue-3';
+import { Editor } from '@tiptap/vue-3';
 export declare const useSpacing: (editor: Editor) => {
     letterSpacingValue: import("vue").WritableComputedRef<string, string>;
     lineHeightValue: import("vue").WritableComputedRef<string, string>;

package/lib/src/brand-page-maker/composables/rich-text-editor/spacing.js

@@ -1,4 +1,5 @@
 import { ref, computed } from 'vue';
+import { Editor } from '@tiptap/vue-3';
 import debounce from 'lodash/debounce';
 import { letterSpacingValueConvertor } from '../../../brand-page-maker/convertors';
 import { skipStyleDetection } from '../../../brand-page-maker/utils';

package/lib/src/brand-page-maker/composables/rich-text-editor/textAlign.d.ts

@@ -1,4 +1,4 @@
-import type { Editor } from '@tiptap/vue-3';
+import { Editor } from '@tiptap/vue-3';
 export declare const useTextAlign: (editor: Editor) => {
     currentAlignment: import("vue").ComputedRef<{
         icon: string;

package/lib/src/brand-page-maker/composables/rich-text-editor/textAlign.js

@@ -1,4 +1,5 @@
 import { ref, computed } from 'vue';
+import { Editor } from '@tiptap/vue-3';
 import { skipStyleDetection } from '../../../brand-page-maker/utils';
 export const useTextAlign = (editor) => {
     const alignmentSettings = {

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

@@ -1,8 +1,7 @@
 import { type ModelRef, type ComputedRef, type Ref, type WritableComputedRef } from 'vue';
 import { Editor } from '@tiptap/vue-3';
 import type { StyleTextFontFamilyOption } from '../../../shared/style-settings/models';
-import type { TextStyles } from '../../../brand-page';
-import { type TextItem, type TextStyleDeclaration } from '../../../brand-page';
+import { TextStyles, type TextItem, type TextStyleDeclaration } from '../../../brand-page';
 import type { ButtonGroupOption } from '../../../brand-page-maker/models/button-group.model';
 interface UseRichTextEditorReturn {
     editor: Editor;
@@ -29,27 +28,12 @@ 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>;
 }
 interface DropdownInstance {
     hideMenu: () => void;
 }
 interface EditorOptionType {
-    type: 'hyperlink' | 'fontFamily' | 'fontSize' | 'fontWeight' | 'fontStyle' | 'textDecorationLine' | 'textDecorationStrike' | 'textColor' | 'backgroundColor' | 'lineHeight' | 'letterSpacing' | 'textAlign';
+    type: 'fontFamily' | 'fontSize' | 'fontWeight' | 'fontStyle' | 'textDecorationLine' | 'textDecorationStrike' | 'textColor' | 'backgroundColor' | 'lineHeight' | 'letterSpacing' | 'textAlign';
     value: string | StyleTextFontFamilyOption;
 }
 export declare const useExternalRichTextEditor: () => {
@@ -72,5 +56,5 @@ export declare const useRichTextEditor: (model: ModelRef<any>, props: {
     selectedFontSizePx: number;
     selectedTextColor: string;
     selectedBackgroundColor: string;
-}, fontStyleDropdownRef: Ref<DropdownInstance | undefined, DropdownInstance | undefined>, selectedGlobalTextStyles: WritableComputedRef<TextStyles, string>, onSelectTextStyleType: (option: ButtonGroupOption) => void, updateRichTextEditor: Ref<boolean>, textStyleTypeOptions: ButtonGroupOption[], markedText: Ref<string>, isHyperlinkPopupOpen: Ref<boolean>) => UseRichTextEditorReturn;
+}, fontStyleDropdownRef: Ref<DropdownInstance | undefined, DropdownInstance | undefined>, selectedGlobalTextStyles: WritableComputedRef<TextStyles, string>, onSelectTextStyleType: (option: ButtonGroupOption) => void, updateRichTextEditor: Ref<boolean>, textStyleTypeOptions: ButtonGroupOption[]) => UseRichTextEditorReturn;
 export {};

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

@@ -11,21 +11,18 @@ 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 { createFormattingActions } from './formatting';
 import { useTextAlign } from './textAlign';
 import { useFont } from './font';
 import { useSpacing } from './spacing';
 import Color from 'color';
-import { buildInitialMarks, emToPx, isStyleChanged, pxToEm, sanitiseClientSideRTE, skipStyleDetection, } from '../../../brand-page-maker/utils';
-import { FONT_FAMILY_CONFIGS, FONT_FAMILY_KEYS, } from '../../../brand-page';
+import { buildInitialMarks, emToPx, isStyleChanged, pxToEm, skipStyleDetection, } from '../../../brand-page-maker/utils';
+import { TextStyles, } from '../../../brand-page';
 import { letterSpacingValueConvertor } 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';
 export const useExternalRichTextEditor = () => {
     const externalEditor = new Editor({
         editable: false,
@@ -48,19 +45,13 @@ export const useExternalRichTextEditor = () => {
             Highlight.configure({
                 multicolor: true,
             }),
-            Link.configure({
-                openOnClick: false,
-                defaultProtocol: 'https',
-                autolink: true,
-            }),
-            AutoLink,
         ],
     });
     return {
         externalEditor,
     };
 };
-export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDropdownRef, selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyleTypeOptions, markedText, isHyperlinkPopupOpen) => {
+export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDropdownRef, selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyleTypeOptions) => {
     const editor = new Editor({
         content: model.value ?? '',
         editable: !props.readOnly,
@@ -87,12 +78,6 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
                 placeholder: props.placeholder,
             }),
             MaxLength.configure({ maxLength: props.maxLength }),
-            Link.configure({
-                openOnClick: false,
-                defaultProtocol: 'https',
-                autolink: true,
-            }),
-            AutoLink,
         ],
         editorProps: {
             handleDOMEvents: {
@@ -115,20 +100,23 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
                     return false;
                 },
                 copy(view, event) {
-                    const selection = view.state.selection;
-                    if (selection.empty)
-                        return;
-                    const data = event.clipboardData;
+                    // Prevent the browser’s default so we can inject our own blobs
+                    event.preventDefault();
+                    // 1) Plain text (already have this)
+                    const selectedText = view.state.doc.textBetween(view.state.selection.from, view.state.selection.to, '\n');
+                    event.clipboardData?.setData('text/plain', selectedText);
+                    // 2) custom style blob to add
                     const styleData = JSON.stringify(props.styles);
-                    const slice = selection.content(), { dom, text } = view.serializeForClipboard(slice);
-                    if (data) {
-                        event.preventDefault();
-                        data.clearData();
-                        data.setData('text/html', dom.innerHTML);
-                        data.setData('text/plain', text);
-                        if (styleData)
-                            data.setData('application/x-rte-styles', styleData);
-                    }
+                    event.clipboardData?.setData('application/x-rte-styles', styleData);
+                    // 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');
+                    wrapper.appendChild(fragment);
+                    event.clipboardData?.setData('text/html', wrapper.innerHTML);
                     return true;
                 },
                 paste(view, event) {
@@ -171,32 +159,14 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
                     dispatch(tr);
                     return true;
                 },
-                click(view, event) {
-                    if (isHyperlinkPopupOpen?.value)
-                        return false;
-                    const target = event.target;
-                    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;
-                },
             },
         },
     });
-    window.editor = editor;
     const contentSettingStore = useUiContentSettingsStore();
     const { toggleBold, toggleItalic, toggleUnderline, toggleStrike, toggleTextColor, toggleBackgroundColor, toggleBoldAll, toggleItalicAll, toggleUnderlineAll, toggleStrikeAll, toggleTextColorAll, unsetAllMarks, } = createFormattingActions(editor);
     const { currentAlignment, toggleTextAlign, idx: currentAlignmentIndex, keys: alignmentKeys, } = useTextAlign(editor);
     const { selectedFont, toggleFont, toggleFontSize, toggleFontAll, toggleFontSizeAll, } = useFont(editor, fontSettings, fontStyleDropdownRef);
     const { letterSpacingValue, lineHeightValue, letterSpacing, lineHeight, setLetterSpaceAll, setLineHeightAll, } = useSpacing(editor);
-    const { hyperlinkValue, setHyperlinkUrl, setHyperlinkUrlValue, removeHyperlink: removeHyperlinkFromComposable, applyHyperlinkToEditor, } = useHyperlink(editor);
-    const { shouldShow, tippyOptions } = useBubbleMenu(editor, isHyperlinkPopupOpen);
     watch(() => props.styles.textAlign, (newAlignment) => {
         if (newAlignment && newAlignment !== currentAlignment.value.alignment) {
             skipStyleDetection(editor.chain().selectAll().setTextAlign(newAlignment)).run();
@@ -226,8 +196,8 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
     });
     // Update model when editor content changes
     editor.on('update', () => {
-        const sanitizedData = sanitiseClientSideRTE(editor.getHTML());
-        emit('update:modelValue', sanitizedData.sanitizedHtml);
+        const html = editor.getHTML();
+        emit('update:modelValue', html);
     });
     editor.on('selectionUpdate', () => {
         const textStyleAttributes = editor.getAttributes('textStyle');
@@ -440,9 +410,6 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
                 toggleTextAlign();
                 fontStyleChanges.textAlign = currentAlignment.value.alignment;
                 break;
-            case 'hyperlink':
-                setHyperlinkUrl(editorOption.value);
-                break;
         }
         syncContentSettings(fontStyleChanges);
     };
@@ -474,55 +441,6 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
     const onBlur = () => {
         emit('blur');
     };
-    const handleHyperlink = (action, data) => {
-        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;
-        }
-    };
     onBeforeUnmount(() => {
         editor.destroy();
     });
@@ -547,10 +465,5 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
         setInitialStyleSettings,
         copyGlobalStyleSettings,
         unsetAllMarks,
-        handleHyperlink,
-        hyperlinkValue,
-        setHyperlinkUrlValue,
-        shouldShow,
-        tippyOptions,
     };
 };

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

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

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

@@ -1,10 +1,9 @@
 import type { ChainedCommands, Editor } from '@tiptap/vue-3';
-import type { EditorState, Transaction, Selection } from 'prosemirror-state';
+import { EditorState, Transaction, Selection } from 'prosemirror-state';
 import type { Content, TextStyleDeclaration, TextStyleType } from '../../brand-page';
 import type { PageSettingsState } from '../../shared/page-settings/store';
 import type { StyleSettingsState } from '../../shared/style-settings/store';
 import type { Mark } from 'prosemirror-model';
-import { type DOMPurify } from 'dompurify';
 export declare const isStyleChanged: (tr: Transaction) => boolean;
 export declare const skipStyleDetection: (chain: ChainedCommands, marks?: Mark[]) => ChainedCommands;
 export declare const hasRTEContent: (content: string) => boolean;
@@ -13,16 +12,3 @@ export declare const switchAllContentToRTE: (uiPageSettingStore: PageSettingsSta
 export declare const getUpdatedHTMLFromEditor: (externalEditor: Editor, contentText: string, newContentStyle: TextStyleDeclaration) => string;
 export declare const buildInitialMarks: (state: EditorState, style: TextStyleDeclaration) => any[];
 export declare const retainStyleOnEmptyLine: (editor: Editor, selection: Selection) => void;
-export interface SanitizationResult {
-    sanitizedHtml: string;
-    removedElements: string[];
-}
-export declare const sanitiseClientSideRTE: (html: string) => SanitizationResult;
-/**
- * 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 declare const sanitizeRTEHtml: (html: string, domPurify: DOMPurify) => SanitizationResult;