@designcrowd/library.brand-page 6.2.11 → 6.2.12

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

@@ -1,12 +1,6 @@
 import { ref, computed } from 'vue';
 import { DEFAULT_LINK_COLOR } from '@src/constants/rich-text-editor.constants';
-// Store original colors before applying hyperlinks
-const originalColors = new WeakMap();
-export const isHrefPageId = (href) => {
-    if (!href)
-        return false;
-    return href.startsWith('pageid:');
-};
+export { isHrefPageId } from '@shared/rte-link.util';
 export const getPageIdFromHref = (href) => {
     if (!href)
         return href;
@@ -19,30 +13,26 @@ export const getHrefForPage = (pageId) => {
 };
 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);
+    // Nothing stores the colour text had before it became a link, so on unlink the nearest
+    // unlinked text stands in: the last run before the link, else the first after it.
+    const surroundingColor = (from, to) => {
+        let before;
+        let after;
+        editor.state.doc.descendants((node, pos) => {
+            if (!node.isText || node.marks.some((mark) => mark.type.name === 'link'))
+                return;
+            const color = node.marks.find((mark) => mark.type.name === 'textStyle')?.attrs
+                .color || null;
+            if (pos + node.nodeSize <= from)
+                before = color;
+            else if (pos >= to && after === undefined)
+                after = color;
+        });
+        return before !== undefined ? before : (after ?? null);
     };
     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()
@@ -66,7 +56,6 @@ export const useHyperlink = (editor) => {
         },
     });
     const applyHyperlinkToEditor = (url, text, selection) => {
-        storeOriginalColor();
         const from = selection?.from ?? editor.state.selection.from;
         const to = selection?.to ?? editor.state.selection.to;
         const currentText = editor.state.doc.textBetween(from, to);
@@ -104,10 +93,19 @@ export const useHyperlink = (editor) => {
             .setUnderline()
             .run();
     };
+    // Unlinking drops the link's own look: its underline, and the link blue for the colour of the
+    // text around it. A colour the user picked for the link stays.
     const removeHyperlink = (clearUrlValue = false) => {
-        editor.chain().focus().unsetLink().unsetUnderline().run();
-        // Restore original color (or remove color if there was none)
-        restoreOriginalColor();
+        const { from, to } = editor.state.selection;
+        const chain = editor.chain().focus().unsetLink().unsetUnderline();
+        if (editor.getAttributes('textStyle').color === DEFAULT_LINK_COLOR) {
+            const color = surroundingColor(from, to);
+            if (color)
+                chain.setColor(color);
+            else
+                chain.unsetColor();
+        }
+        chain.run();
         if (clearUrlValue) {
             setHyperlinkUrlValue('');
         }

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

@@ -0,0 +1,20 @@
+import { Extension } from '@tiptap/core';
+import { PluginKey } from 'prosemirror-state';
+import type { Mark } from 'prosemirror-model';
+/**
+ * Clearing all text in an RTE field drops every mark: ProseMirror empties
+ * `storedMarks` and the emptied block has no run left to inherit from, so the next
+ * character is typed bare. For an *edit* that is wrong — the user cleared text, not
+ * formatting — and post-ADR-0020 (the first-type seed no longer re-applies the role
+ * colour) it silently strips the run's colour on every clear-and-retype.
+ *
+ * This plugin remembers the marks of the run that was just cleared, in its own plugin
+ * *state* — deliberately not `storedMarks`, which a later plugin's appendTransaction can
+ * reset before the next keystroke (observed on the real Backspace path). The composable's
+ * first-type seed reads it via `keepMarksOnEmptyPluginKey.getState(state)` and re-applies
+ * those marks instead of the role/element defaults, so the previous style survives the
+ * retype. A genuinely fresh field never captures anything (state stays null), so the seed
+ * keeps owning that case.
+ */
+export declare const keepMarksOnEmptyPluginKey: PluginKey<readonly Mark[] | null>;
+export declare const KeepMarksOnEmpty: Extension<any, any>;

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

@@ -0,0 +1,60 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from 'prosemirror-state';
+/**
+ * Clearing all text in an RTE field drops every mark: ProseMirror empties
+ * `storedMarks` and the emptied block has no run left to inherit from, so the next
+ * character is typed bare. For an *edit* that is wrong — the user cleared text, not
+ * formatting — and post-ADR-0020 (the first-type seed no longer re-applies the role
+ * colour) it silently strips the run's colour on every clear-and-retype.
+ *
+ * This plugin remembers the marks of the run that was just cleared, in its own plugin
+ * *state* — deliberately not `storedMarks`, which a later plugin's appendTransaction can
+ * reset before the next keystroke (observed on the real Backspace path). The composable's
+ * first-type seed reads it via `keepMarksOnEmptyPluginKey.getState(state)` and re-applies
+ * those marks instead of the role/element defaults, so the previous style survives the
+ * retype. A genuinely fresh field never captures anything (state stays null), so the seed
+ * keeps owning that case.
+ */
+export const keepMarksOnEmptyPluginKey = new PluginKey('keepMarksOnEmpty');
+// Marks of the first inline run — the leading style the retype should continue in
+// (mixed-style runs collapse to the first, where the cursor lands after a clear).
+const firstRunMarks = (state) => {
+    let marks = null;
+    state.doc.descendants((node) => {
+        if (marks)
+            return false;
+        if (node.isText) {
+            marks = node.marks;
+            return false;
+        }
+        return true;
+    });
+    return marks;
+};
+export const KeepMarksOnEmpty = Extension.create({
+    name: 'keepMarksOnEmpty',
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: keepMarksOnEmptyPluginKey,
+                state: {
+                    init: () => null,
+                    apply(tr, value, oldState, newState) {
+                        // Capture the leading run's marks at the moment the field is emptied.
+                        if (tr.docChanged &&
+                            oldState.doc.textContent !== '' &&
+                            newState.doc.textContent === '') {
+                            const marks = firstRunMarks(oldState);
+                            return marks && marks.length > 0 ? marks : null;
+                        }
+                        // Drop the capture once the field has content again (the retype landed).
+                        if (newState.doc.textContent !== '')
+                            return null;
+                        // Field still empty, awaiting the retype — hold the capture.
+                        return value;
+                    },
+                },
+            }),
+        ];
+    },
+});

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

@@ -1,5 +1,6 @@
 import type { Editor } from '@tiptap/vue-3';
-export declare const useSpacing: (editor: Editor) => {
+import type { TextStyleDeclaration } from '@brand-page';
+export declare const useSpacing: (editor: Editor, getRoleStyle?: () => TextStyleDeclaration | undefined) => {
     letterSpacingValue: import("vue").WritableComputedRef<string, string>;
     lineHeightValue: import("vue").WritableComputedRef<string, string>;
     setLetterSpaceAll: import("lodash").DebouncedFunc<(v: string) => void>;

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

@@ -1,28 +1,44 @@
 import { ref, computed } from 'vue';
 import debounce from 'lodash/debounce';
 import { letterSpacingValueConvertor } from '@brand-page-maker/convertors';
-import { skipStyleDetection } from '@brand-page-maker/utils';
-export const useSpacing = (editor) => {
+import { skipStyleDetection, roleVarOrLiteral } from '@brand-page-maker/utils';
+import { roleVarRef } from '@shared/text-role-typography.util';
+export const useSpacing = (editor, 
+// The linked role's style when canonical-linked, else undefined — see useFont.
+getRoleStyle = () => undefined) => {
     const letterSpacing = ref('0');
     const lineHeight = ref('1');
     const setLetterSpace = debounce((v) => {
         const emSpacing = letterSpacingValueConvertor.convertBack(v).letterSpacing ?? '0em';
         letterSpacing.value = v;
-        editor.chain().setLetterSpacing(emSpacing).run();
+        editor
+            .chain()
+            .setLetterSpacing(roleVarOrLiteral('letterSpacing', emSpacing, getRoleStyle()))
+            .run();
     }, 300);
     const setLineHeight = debounce((v) => {
         lineHeight.value = v;
-        editor.chain().setLineHeight(v).run();
+        editor
+            .chain()
+            .setLineHeight(roleVarOrLiteral('lineHeight', v, getRoleStyle()))
+            .run();
     }, 300);
+    // Role application (role switch): write the role-agnostic var ref, not a literal.
     const setLetterSpaceAll = debounce((v) => {
         letterSpacing.value = letterSpacingValueConvertor.convert({
             letterSpacing: v,
         });
-        skipStyleDetection(editor.chain().selectAll().setLetterSpacing(v)).run();
+        skipStyleDetection(editor
+            .chain()
+            .selectAll()
+            .setLetterSpacing(roleVarRef('letterSpacing') ?? v)).run();
     }, 300);
     const setLineHeightAll = debounce((v) => {
         lineHeight.value = v;
-        skipStyleDetection(editor.chain().selectAll().setLineHeight(v)).run();
+        skipStyleDetection(editor
+            .chain()
+            .selectAll()
+            .setLineHeight(roleVarRef('lineHeight') ?? v)).run();
     }, 300);
     return {
         letterSpacingValue: computed({

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

@@ -23,12 +23,14 @@ interface UseRichTextEditorReturn {
     }>;
     toggleFont: (font: string) => void;
     toggleFontSize: (size: string) => void;
-    letterSpacingValue: ComputedRef<string>;
-    lineHeightValue: ComputedRef<string>;
+    letterSpacingValue: WritableComputedRef<string>;
+    lineHeightValue: WritableComputedRef<string>;
     selectedFont: ComputedRef<string>;
     setInitialStyleSettings: (selectedTextStyle?: BrandPageCssStyle) => void;
-    copyGlobalStyleSettings: (selectedTextStyle?: BrandPageCssStyle) => void;
-    unsetAllMarks: () => void;
+    hasTypographyOverride: () => boolean;
+    canApplyTypographyToRole: () => boolean;
+    resetTypographyToRole: () => void;
+    applyTypographyToRole: () => void;
     handleHyperlink: (action: 'toggle' | 'apply' | 'remove', data?: {
         href?: string;
         text?: string;
@@ -73,5 +75,9 @@ export declare const useRichTextEditor: (model: ModelRef<any>, props: {
     selectedFontSizePx: number;
     selectedTextColor: string;
     selectedBackgroundColor: string;
+    isBold: boolean;
+    isItalic: boolean;
+    isUnderline: boolean;
+    isStrike: boolean;
 }, fontStyleDropdownRef: Ref<DropdownInstance | undefined, DropdownInstance | undefined>, selectedGlobalTextStyles: WritableComputedRef<TextStyleOption | undefined, string>, onSelectTextStyleType: (option: ButtonGroupOption) => void, updateRichTextEditor: Ref<boolean>, textStyleTypeOptions: ButtonGroupOption[], markedText: Ref<string>, isHyperlinkPopupOpen: Ref<boolean>, selectedLinkTypeValue: Ref<HyperlinkType>) => UseRichTextEditorReturn;
 export {};