@designcrowd/library.brand-page 5.10.20 → 5.10.30

package/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.ts

@@ -14,6 +14,7 @@ import {
   applyUserPersonalisationToBrandPageModelAsync,
   getBrandPageViewModelFromBrandPageModel,
 } from '../../../brand-page/utils';
+import { STYLE_THEME_KEYS } from '../../../brand-page/constants';
 import type { TemplateSettingsTemplate } from '../../../shared/template-settings/models';
 import type { DebounceHandle } from 'lodash.debounce';
 import debounce from 'lodash.debounce';
@@ -178,6 +179,27 @@ export default defineComponent({
     isPersonalisable(): boolean {
       return this.template.isPersonalisable || false;
     },
+
+    cssVariablesStyle(): Record<string, string> {
+      if (!this.logoTheme) {
+        return {};
+      }
+
+      const cssVariables: Record<string, string> = {};
+
+      // Generate CSS variables for logo theme colors
+      Object.entries(STYLE_THEME_KEYS).forEach(([key, value]) => {
+        const themeColor = key.includes('Background')
+          ? this.logoTheme.logoBackgroundColor
+          : this.logoTheme.logoTextColor;
+
+        if (themeColor?.rgb) {
+          cssVariables[`--${value}`] = themeColor.rgb;
+        }
+      });
+
+      return cssVariables;
+    },
   },
   watch: {
     logoTheme: {

package/src/brand-page-maker/components/template-preview/TemplatePreview.vue

@@ -19,7 +19,7 @@
         </button>
         <!-- End Overlay-->
         <!-- Start Page -->
-        <div class="template-preview__page">
+        <div class="template-preview__page" :style="cssVariablesStyle">
           <Page
             v-if="viewModel"
             :context="context"

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

@@ -0,0 +1,42 @@
+import type { Editor } from '@tiptap/vue-3';
+import type { Ref } from 'vue';
+
+export const useBubbleMenu = (
+  editor: Editor,
+  isHyperlinkPopupOpen?: Ref<boolean>,
+) => {
+  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' as const,
+    interactive: true,
+    appendTo: 'parent' as const,
+    hideOnClick: false,
+    arrow: false,
+    offset: [0, 10] as [number, number],
+    trigger: 'manual' as const,
+    zIndex: 10,
+  };
+
+  return {
+    shouldShow,
+    tippyOptions,
+  };
+};

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

@@ -0,0 +1,227 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from 'prosemirror-state';
+import type { Transaction } from 'prosemirror-state';
+import type { Node, Mark } from 'prosemirror-model';
+
+const LINK_COLOR = '#0097d7';
+
+const isLinkMark = (mark: Mark) => mark.type.name === 'link';
+const isUnderlineMark = (mark: Mark) => mark.type.name === 'underline';
+const isTextStyleMark = (mark: Mark) => mark.type.name === 'textStyle';
+const isBlueColorMark = (mark: Mark) =>
+  isTextStyleMark(mark) && mark.attrs.color === LINK_COLOR;
+
+const hasLinkMark = (marks: readonly Mark[]) => marks.some(isLinkMark);
+
+const hasUnderlineMark = (marks: readonly Mark[]) =>
+  marks.some(isUnderlineMark);
+
+const createStylesWithoutColor = (schema: any, textStyleMark: Mark) => {
+  const { color: _color, ...otherAttrs } = textStyleMark.attrs;
+
+  return Object.keys(otherAttrs).length > 0
+    ? schema.marks.textStyle?.create(otherAttrs)
+    : null;
+};
+
+const applyDefaultLinkStyling = (
+  tr: Transaction,
+  schema: any,
+  node: Node,
+  pos: number,
+) => {
+  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: Transaction,
+  schema: any,
+  node: Node,
+  pos: number,
+) => {
+  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/src/brand-page-maker/composables/rich-text-editor/extensions/MaxLength.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { Editor } from '@tiptap/vue-3';
 import StarterKit from '@tiptap/starter-kit';
 import { MaxLength } from './MaxLength';

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

@@ -61,13 +61,7 @@ export const MaxLength = Extension.create<MaxLengthOptions>({
                 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;
                 }
               } else {
@@ -90,9 +84,8 @@ export const MaxLength = Extension.create<MaxLengthOptions>({
 
                       if (piece.length === 0) return null;
 
-                      const newText = subNode.type.create(
-                        subNode.attrs,
-                        subNode.type.schema.text(piece),
+                      const newText = subNode.type.schema.text(
+                        piece,
                         subNode.marks,
                       );
 
@@ -112,11 +105,7 @@ export const MaxLength = Extension.create<MaxLengthOptions>({
 
                       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/src/brand-page-maker/composables/rich-text-editor/font.ts

@@ -1,5 +1,5 @@
 import { ref, type Ref } from 'vue';
-import { Editor } from '@tiptap/vue-3';
+import type { Editor } from '@tiptap/vue-3';
 import {
   emToPx,
   pxToEm,

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

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

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

@@ -0,0 +1,114 @@
+import { ref, computed } from 'vue';
+import type { Editor } from '@tiptap/vue-3';
+
+// Store original colors before applying hyperlinks
+const originalColors = new WeakMap<any, string | null>();
+
+export const useHyperlink = (editor: 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: string) => {
+    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: string) => {
+    hyperlinkUrl.value = typeof url === 'string' ? url : '';
+  };
+
+  const hyperlinkValue = computed({
+    get: () => ({
+      id: 'id',
+      name: 'url',
+      value: hyperlinkUrl.value,
+    }),
+    set: (v: { id: string; name: string; value: string }) => {
+      setHyperlinkUrl(v?.value || '');
+    },
+  });
+
+  const applyHyperlinkToEditor = (
+    url: string,
+    text?: string,
+    selection?: { from: number; to: number },
+  ) => {
+    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/src/brand-page-maker/composables/rich-text-editor/spacing.ts

@@ -1,5 +1,5 @@
 import { ref, computed } from 'vue';
-import { Editor } from '@tiptap/vue-3';
+import type { 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/src/brand-page-maker/composables/rich-text-editor/textAlign.ts

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