@designcrowd/library.brand-page 5.10.9-data-id-2 → 5.10.9-sanitise-hyperlink-1

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

@@ -207,6 +207,11 @@ 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,6 +136,10 @@ 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: 'Nunito',
+                        fontFamily: 'Exo 2',
                         lineHeight: '2rem',
                     },
                     colorReplacements: [

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

@@ -43,6 +43,7 @@ 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").LogoContent)[];
+export declare const brandPageContentsSampleData: (import("../../../../brand-page").ButtonContent | import("../../../../brand-page").ProfileContent | import("../../../../brand-page").TextContent | 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,7 +1,8 @@
-import { logoContent, profileContent, generalLink, facebookLink, websiteLink, emailLink, phoneLink, twitterLink, instagramLink, youtubeLink, linkedinLink, pinterestLink, twitchLink, tiktokLink, } from './content-settings-items.fixture';
+import { logoContent, profileContent, generalLink, facebookLink, websiteLink, emailLink, phoneLink, twitterLink, instagramLink, youtubeLink, linkedinLink, pinterestLink, twitchLink, tiktokLink, textContent, } from './content-settings-items.fixture';
 export const brandPageContentsSampleData = [
     logoContent,
     profileContent,
+    textContent,
     generalLink,
     websiteLink,
     emailLink,

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

@@ -0,0 +1,19 @@
+import type { Editor } from '@tiptap/vue-3';
+import type { Ref } from 'vue';
+export declare const useBubbleMenu: (editor: Editor, isHyperlinkPopupOpen?: Ref<boolean>) => {
+    shouldShow: ({ editor, state }: {
+        editor: any;
+        state: any;
+    }) => any;
+    tippyOptions: {
+        duration: number;
+        placement: "bottom";
+        interactive: boolean;
+        appendTo: "parent";
+        hideOnClick: boolean;
+        arrow: boolean;
+        offset: [number, number];
+        trigger: "manual";
+        zIndex: number;
+    };
+};

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

@@ -0,0 +1,31 @@
+export const useBubbleMenu = (editor, isHyperlinkPopupOpen) => {
+    const shouldShow = ({ editor, state }) => {
+        if (!editor || !state)
+            return false;
+        // Hide preview popup if the hyperlink popup is open
+        if (isHyperlinkPopupOpen?.value)
+            return false;
+        const { selection } = state;
+        // Only show bubble menu if there's a selection and it contains a link
+        if (!selection.empty) {
+            const linkAttrs = editor.getAttributes('link');
+            return linkAttrs.href && linkAttrs.href.trim() !== '';
+        }
+        return false;
+    };
+    const tippyOptions = {
+        duration: 100,
+        placement: 'bottom',
+        interactive: true,
+        appendTo: 'parent',
+        hideOnClick: false,
+        arrow: false,
+        offset: [0, 10],
+        trigger: 'manual',
+        zIndex: 10,
+    };
+    return {
+        shouldShow,
+        tippyOptions,
+    };
+};

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

@@ -0,0 +1,2 @@
+import { Extension } from '@tiptap/core';
+export declare const AutoLink: Extension<any, any>;

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

@@ -0,0 +1,161 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from 'prosemirror-state';
+const LINK_COLOR = '#0097d7';
+const isLinkMark = (mark) => mark.type.name === 'link';
+const isUnderlineMark = (mark) => mark.type.name === 'underline';
+const isTextStyleMark = (mark) => mark.type.name === 'textStyle';
+const isBlueColorMark = (mark) => isTextStyleMark(mark) && mark.attrs.color === LINK_COLOR;
+const hasLinkMark = (marks) => marks.some(isLinkMark);
+const hasUnderlineMark = (marks) => marks.some(isUnderlineMark);
+const createStylesWithoutColor = (schema, textStyleMark) => {
+    const { color: _color, ...otherAttrs } = textStyleMark.attrs;
+    return Object.keys(otherAttrs).length > 0
+        ? schema.marks.textStyle?.create(otherAttrs)
+        : null;
+};
+const applyDefaultLinkStyling = (tr, schema, node, pos) => {
+    const range = { from: pos, to: pos + node.nodeSize };
+    let modified = false;
+    const textStyleMark = node.marks.find(isTextStyleMark);
+    // Always apply blue color to newly created links, regardless of existing colors
+    const attrs = { ...textStyleMark?.attrs, color: LINK_COLOR };
+    const colorMark = schema.marks.textStyle?.create(attrs);
+    if (colorMark) {
+        if (textStyleMark) {
+            tr.removeMark(range.from, range.to, textStyleMark);
+        }
+        tr.addMark(range.from, range.to, colorMark);
+        modified = true;
+    }
+    // Add underline to newly detected URLs (auto-links)
+    // This ensures typed URLs get the same styling as manually created links
+    if (!hasUnderlineMark(node.marks)) {
+        const underlineMark = schema.marks.underline?.create();
+        if (underlineMark) {
+            tr.addMark(range.from, range.to, underlineMark);
+            modified = true;
+        }
+    }
+    return modified;
+};
+const removeHyperlinkStyles = (tr, schema, node, pos) => {
+    const range = { from: pos, to: pos + node.nodeSize };
+    let modified = false;
+    // Only remove blue color that was added for link styling
+    const textStyleMark = node.marks.find(isBlueColorMark);
+    if (textStyleMark) {
+        tr.removeMark(range.from, range.to, textStyleMark);
+        const newTextStyleMark = createStylesWithoutColor(schema, textStyleMark);
+        if (newTextStyleMark) {
+            tr.addMark(range.from, range.to, newTextStyleMark);
+        }
+        modified = true;
+    }
+    // Don't automatically remove underlines from non-link text
+    // Users should be able to have underlined text that's not a link
+    return modified;
+};
+export const AutoLink = Extension.create({
+    name: 'autoLink',
+    addKeyboardShortcuts() {
+        return {
+            // Handle any character input at the end of links
+            Backspace: () => false, // Let default behavior handle backspace
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: new PluginKey('autoLinkStyling'),
+                props: {
+                    handleTextInput(view, from, to, text) {
+                        const { state } = view;
+                        const { selection } = state;
+                        const { $anchor } = selection;
+                        // Only handle when typing at a cursor position (from === to)
+                        if (from !== to) {
+                            return false;
+                        }
+                        // Check if we have link marks at cursor position
+                        const currentMarks = $anchor.marks();
+                        const linkMark = currentMarks.find(isLinkMark);
+                        if (linkMark) {
+                            // Check if we're at the end of the link
+                            const currentPos = $anchor.pos;
+                            const nextPos = currentPos + 1;
+                            const hasLinkAfter = nextPos <= state.doc.content.size &&
+                                state.doc
+                                    .resolve(Math.min(nextPos, state.doc.content.size))
+                                    .marks()
+                                    .some((mark) => isLinkMark(mark) && mark.eq(linkMark));
+                            if (!hasLinkAfter) {
+                                // detach the link after the attached link mark
+                                const preservedMarks = currentMarks
+                                    .filter((mark) => {
+                                    if (isLinkMark(mark))
+                                        return false;
+                                    // Only preserve underlines if there's no blue color (manually added underlines)
+                                    // Remove underlines that were part of link styling (with blue color)
+                                    if (isUnderlineMark(mark)) {
+                                        const hasBlueColor = currentMarks.some(isBlueColorMark);
+                                        return !hasBlueColor; // Keep underline only if no blue color
+                                    }
+                                    // Remove blue color styling but preserve other text styles
+                                    if (isBlueColorMark(mark)) {
+                                        return createStylesWithoutColor(state.schema, mark);
+                                    }
+                                    return true;
+                                })
+                                    .filter(Boolean); // Insert text with only preserved marks
+                                let tr = state.tr;
+                                tr = tr.setStoredMarks(preservedMarks);
+                                tr = tr.insertText(text, from, to);
+                                tr = tr.setMeta('autoLinkDetached', true);
+                                view.dispatch(tr);
+                                return true;
+                            }
+                        }
+                        return false;
+                    },
+                },
+                appendTransaction(transactions, oldState, newState) {
+                    const tr = newState.tr;
+                    let modified = false;
+                    const hasDocChanges = transactions.some((transaction) => transaction.docChanged);
+                    if (!hasDocChanges)
+                        return null;
+                    const wasDetached = transactions.some((transaction) => transaction.getMeta('autoLinkDetached'));
+                    // Apply default styling to links (unless just detached)
+                    if (!wasDetached) {
+                        newState.doc.descendants((node, pos) => {
+                            if (!node.isText || !node.text || !hasLinkMark(node.marks))
+                                return;
+                            // Check if this is a newly created link by comparing with old state
+                            const oldNode = pos < oldState.doc.nodeSize ? oldState.doc.nodeAt(pos) : null;
+                            const wasAlreadyLink = oldNode && hasLinkMark(oldNode.marks);
+                            // Only apply full styling (including underline) to newly created links
+                            if (wasAlreadyLink === false) {
+                                if (applyDefaultLinkStyling(tr, newState.schema, node, pos)) {
+                                    modified = true;
+                                }
+                            }
+                            else {
+                                // For existing links, preserve their current color and underline choices
+                                // Don't override user customizations on existing links
+                            }
+                        });
+                    }
+                    // Clean up hyperlink styling from text without link marks
+                    newState.doc.descendants((node, pos) => {
+                        if (!node.isText || !node.text || hasLinkMark(node.marks))
+                            return;
+                        if (removeHyperlinkStyles(tr, newState.schema, node, pos)) {
+                            modified = true;
+                        }
+                    });
+                    return modified ? tr : null;
+                },
+            }),
+        ];
+    },
+});

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.create(node.attrs, node.type.schema.text(piece), node.marks));
+                                    nodes.push(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.create(subNode.attrs, subNode.type.schema.text(piece), subNode.marks);
+                                            const newText = 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.type.create(subNode.attrs, Fragment.fromArray(children), subNode.marks);
+                                            return subNode.copy(Fragment.fromArray(children));
                                         }
                                         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 { Editor } from '@tiptap/vue-3';
+import type { Editor } from '@tiptap/vue-3';
 interface DropdownRef {
     hideMenu: () => void;
 }

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

@@ -1,5 +1,4 @@
 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 { Editor } from '@tiptap/vue-3';
+import type { 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,4 +1,3 @@
-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/hyperlink.d.ts

@@ -0,0 +1,19 @@
+import type { Editor } from '@tiptap/vue-3';
+export declare const useHyperlink: (editor: Editor) => {
+    hyperlinkValue: import("vue").WritableComputedRef<{
+        id: string;
+        name: string;
+        value: string;
+    }, {
+        id: string;
+        name: string;
+        value: string;
+    }>;
+    setHyperlinkUrl: (url: string) => void;
+    setHyperlinkUrlValue: (url: string) => void;
+    removeHyperlink: (clearUrlValue?: boolean) => void;
+    applyHyperlinkToEditor: (url: string, text?: string, selection?: {
+        from: number;
+        to: number;
+    }) => void;
+};

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

@@ -0,0 +1,87 @@
+import { ref, computed } from 'vue';
+// Store original colors before applying hyperlinks
+const originalColors = new WeakMap();
+export const useHyperlink = (editor) => {
+    const hyperlinkUrl = ref('');
+    const storeOriginalColor = () => {
+        const currentTextStyle = editor.getAttributes('textStyle');
+        const originalColor = currentTextStyle.color || null;
+        // Store the original color using the editor instance as key
+        originalColors.set(editor, originalColor);
+        return originalColor;
+    };
+    const restoreOriginalColor = () => {
+        const originalColor = originalColors.get(editor);
+        if (originalColor) {
+            // Restore the original color
+            editor.chain().focus().setColor(originalColor).run();
+        }
+        else {
+            // No original color, remove color completely
+            editor.chain().focus().unsetColor().run();
+        }
+        // Clean up stored color
+        originalColors.delete(editor);
+    };
+    const setHyperlinkUrl = (url) => {
+        const safeUrl = typeof url === 'string' ? url : '';
+        hyperlinkUrl.value = safeUrl;
+        storeOriginalColor();
+        // Set the link, apply blue color, and add underline by default
+        editor
+            .chain()
+            .focus()
+            .setLink({ href: safeUrl })
+            .setColor('#0097d7')
+            .setUnderline()
+            .run();
+    };
+    const setHyperlinkUrlValue = (url) => {
+        hyperlinkUrl.value = typeof url === 'string' ? url : '';
+    };
+    const hyperlinkValue = computed({
+        get: () => ({
+            id: 'id',
+            name: 'url',
+            value: hyperlinkUrl.value,
+        }),
+        set: (v) => {
+            setHyperlinkUrl(v?.value || '');
+        },
+    });
+    const applyHyperlinkToEditor = (url, text, selection) => {
+        storeOriginalColor();
+        const selectedText = editor.chain().focus();
+        // Replace content with text if provided
+        if (text && text.trim()) {
+            const currentPos = selection?.from || editor.state.selection.from;
+            selectedText
+                .deleteSelection()
+                .insertContent(text)
+                .setTextSelection({
+                from: currentPos,
+                to: currentPos + text.length,
+            });
+        }
+        selectedText
+            .setLink({ href: url })
+            .setColor('#0097d7')
+            .setUnderline()
+            .run();
+    };
+    const removeHyperlink = (clearUrlValue = false) => {
+        editor.chain().focus().unsetLink().unsetUnderline().run();
+        // Restore original color (or remove color if there was none)
+        restoreOriginalColor();
+        if (clearUrlValue) {
+            setHyperlinkUrlValue('');
+        }
+    };
+    return {
+        hyperlinkValue,
+        setHyperlinkUrl,
+        setHyperlinkUrlValue,
+        removeHyperlink,
+        applyHyperlinkToEditor,
+    };
+};

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

@@ -1,4 +1,4 @@
-import { Editor } from '@tiptap/vue-3';
+import type { 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,5 +1,4 @@
 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 { Editor } from '@tiptap/vue-3';
+import type { 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,5 +1,4 @@
 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,7 +1,8 @@
 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 { 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';
 interface UseRichTextEditorReturn {
     editor: Editor;
@@ -28,12 +29,27 @@ 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: 'fontFamily' | 'fontSize' | 'fontWeight' | 'fontStyle' | 'textDecorationLine' | 'textDecorationStrike' | 'textColor' | 'backgroundColor' | 'lineHeight' | 'letterSpacing' | 'textAlign';
+    type: 'hyperlink' | 'fontFamily' | 'fontSize' | 'fontWeight' | 'fontStyle' | 'textDecorationLine' | 'textDecorationStrike' | 'textColor' | 'backgroundColor' | 'lineHeight' | 'letterSpacing' | 'textAlign';
     value: string | StyleTextFontFamilyOption;
 }
 export declare const useExternalRichTextEditor: () => {
@@ -56,5 +72,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[]) => UseRichTextEditorReturn;
+}, 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;
 export {};