@designcrowd/library.brand-page 6.2.11 → 6.2.12

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

@@ -0,0 +1,61 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { runTypography } from '@brand-page-maker/utils/rich-text-editor.util';
+import { roleVarRef, runTypographyFillValue, composeTextDecoration, } from '@shared/text-role-typography.util';
+// The box's CSS pins family, size, spacing and line height, so only these show through.
+const FILLED_ATTRS = [
+    ['fontWeight', 'font-weight'],
+    ['fontStyle', 'font-style'],
+    ['textDecoration', 'text-decoration'],
+];
+/**
+ * Draws the editor box the way the canvas does: a run with no weight / style / decoration of its
+ * own shows the value `fillRteRunTypography` would fill. Decorations are view-only, so the stored
+ * doc is untouched.
+ */
+export const RoleTypographyFill = Extension.create({
+    name: 'roleTypographyFill',
+    addOptions() {
+        return { getFillSource: () => undefined };
+    },
+    addProseMirrorPlugins() {
+        const { getFillSource } = this.options;
+        return [
+            new Plugin({
+                key: new PluginKey('roleTypographyFill'),
+                props: {
+                    decorations(state) {
+                        const source = getFillSource();
+                        if (!source)
+                            return DecorationSet.empty;
+                        const decorations = [];
+                        state.doc.descendants((node, pos) => {
+                            if (!node.isText)
+                                return;
+                            const run = runTypography(node);
+                            const style = FILLED_ATTRS.flatMap(([attr, cssProp]) => {
+                                if (attr === 'textDecoration') {
+                                    const blockValue = runTypographyFillValue(attr, source.role, source.block);
+                                    const localValue = run.textDecoration === roleVarRef(attr) &&
+                                        blockValue !== roleVarRef(attr)
+                                        ? blockValue
+                                        : (run.textDecoration ?? blockValue);
+                                    const value = composeTextDecoration(source.role.textDecoration ?? 'none', localValue);
+                                    return value ? [`${cssProp}: ${value}`] : [];
+                                }
+                                if (run[attr] !== undefined)
+                                    return [];
+                                const value = runTypographyFillValue(attr, source.role, source.block);
+                                return value ? [`${cssProp}: ${value}`] : [];
+                            }).join('; ');
+                            if (style)
+                                decorations.push(Decoration.inline(pos, pos + node.nodeSize, { style }));
+                        });
+                        return DecorationSet.create(state.doc, decorations);
+                    },
+                },
+            }),
+        ];
+    },
+});

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

@@ -0,0 +1,11 @@
+import { Extension } from '@tiptap/core';
+import type { EditorState } from 'prosemirror-state';
+import { type Mark } from 'prosemirror-model';
+import { type RteClipboardContext } from '@brand-page-maker/utils/rte-clipboard.util';
+export interface RteClipboardOptions {
+    /** The field's role, style object and site palette, read at event time. */
+    getContext: () => RteClipboardContext;
+    /** The first-type seed a text-only paste into an empty field takes, same as typing. */
+    getFirstInputMarks: (state: EditorState) => Mark[];
+}
+export declare const RteClipboard: Extension<RteClipboardOptions, any>;

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

@@ -0,0 +1,236 @@
+import { Extension } from '@tiptap/core';
+import { closeHistory } from '@tiptap/pm/history';
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { Slice } from 'prosemirror-model';
+import { sanitizeRteJson } from '@brand-page-maker/utils';
+import { alignPastedParagraphs, parseOwnRteClipboardPayload, plainTextToParagraphSlice, relinkColorToPalette, relinkRunTypographyToRole, resolveRunColorForCopy, resolveRunStyleForCopy, resolveRunStyleForExternal, RTE_CLIPBOARD_MIME_TYPE, RTE_CLIPBOARD_VERSION, } from '@brand-page-maker/utils/rte-clipboard.util';
+import { AUTO_LINK_SKIP_STYLING_META, linkDetachMarksAt, } from '@shared/rte-extensions/AutoLink';
+// `hardBreak` is left out: it carries no text of its own, so resolving it would give every
+// break a full `textStyle` mark the source run never had (R1).
+const INLINE_NODE_TYPES = new Set(['text']);
+/** Replace a run's `textStyle`/`highlight` marks with their resolved forms; every other mark
+ * (link, a legacy bold/italic/underline/strike) rides through untouched (R1). */
+const resolveRunMarks = (node, context, resolveRun) => {
+    const style = resolveRun(node, context);
+    delete style.href; // a link mark's own href, not a textStyle attr
+    const marks = (node.marks ?? [])
+        .filter((mark) => mark.type !== 'textStyle')
+        .map((mark) => {
+        if (mark.type !== 'highlight' || mark.attrs?.color == null)
+            return mark;
+        return {
+            type: 'highlight',
+            attrs: {
+                color: resolveRunColorForCopy(mark.attrs.color, context.colors) ?? mark.attrs.color,
+            },
+        };
+    });
+    if (Object.keys(style).length)
+        marks.push({ type: 'textStyle', attrs: style });
+    return { ...node, marks };
+};
+const resolveContentForCopy = (content, context, resolveRun) => content.map((node) => {
+    if (INLINE_NODE_TYPES.has(node.type ?? ''))
+        return resolveRunMarks(node, context, resolveRun);
+    return node.content
+        ? {
+            ...node,
+            content: resolveContentForCopy(node.content, context, resolveRun),
+        }
+        : node;
+});
+const buildInternalSlice = (content, openStart, openEnd, context) => {
+    const resolved = resolveContentForCopy(content, context, resolveRunStyleForCopy);
+    const sanitized = sanitizeRteJson({ type: 'doc', content: resolved });
+    return {
+        content: sanitized.content ?? [],
+        ...(openStart ? { openStart } : {}),
+        ...(openEnd ? { openEnd } : {}),
+    };
+};
+/** Every text/link mark relinked to the destination (A5 steps 2–3): typography that equals the
+ * destination role (or its neutral) becomes the role var, and a colour equal to a palette entry
+ * links to it; everything else — including an unresolvable value — stays exactly as copied. */
+const relinkContentToDestination = (content, context) => content.map((node) => {
+    if (!INLINE_NODE_TYPES.has(node.type ?? ''))
+        return node.content
+            ? {
+                ...node,
+                content: relinkContentToDestination(node.content, context),
+            }
+            : node;
+    const isLinkRun = (node.marks ?? []).some((mark) => mark.type === 'link');
+    const marks = (node.marks ?? []).map((mark) => {
+        if (mark.type === 'textStyle') {
+            const relinked = relinkRunTypographyToRole((mark.attrs ?? {}), context.role);
+            if (relinked.color !== undefined)
+                relinked.color = relinkColorToPalette(relinked.color, context.colors, isLinkRun);
+            return { type: 'textStyle', attrs: relinked };
+        }
+        if (mark.type === 'highlight' && mark.attrs?.color != null) {
+            return {
+                type: 'highlight',
+                attrs: {
+                    color: relinkColorToPalette(mark.attrs.color, context.colors),
+                },
+            };
+        }
+        return mark;
+    });
+    return { ...node, marks };
+});
+/** The destination alignment every pasted paragraph takes (Reading 14): the field's own alignment,
+ * else the alignment of the paragraph the cursor sits in. */
+const resolveDestinationAlign = (state, context) => {
+    if (context.block?.textAlign)
+        return context.block.textAlign;
+    const { textAlign } = state.doc.resolve(state.selection.from).parent
+        .attrs;
+    return textAlign;
+};
+/** The marks a text-only paste's runs take — the marks typing would take at that spot (Approach
+ * step 4): the first-type seed in an empty field; else, over an empty selection, the stored/
+ * cursor marks with AutoLink's end-of-link detach applied exactly as it applies to typed text;
+ * over a range, ProseMirror's own `insertText` rule (`$from.marksAcross($to)`), since replacing
+ * a selection is never a link's end-of-line position. */
+const resolvePlainPasteMarks = (state, getFirstInputMarks) => {
+    if (state.doc.textContent === '')
+        return getFirstInputMarks(state).map((mark) => mark.toJSON());
+    const { from, to } = state.selection;
+    if (from !== to) {
+        // `marksAcross` is null when nothing inline follows `from` within its own parent —
+        // a selection starting at a paragraph's end, or on an empty line. Real typing at
+        // that exact spot would get no marks; paste falls back to the marks AT `from`
+        // instead, so a routine "select to end of line, paste" doesn't lose the line's look.
+        // When `from` sits right at a link's end, AutoLink's own end-of-link detach applies
+        // first — the same one typing gets there — so the paste doesn't extend the link.
+        const marks = state.storedMarks ??
+            state.doc.resolve(from).marksAcross(state.doc.resolve(to)) ??
+            linkDetachMarksAt(state, from) ??
+            state.doc.resolve(from).marks();
+        return marks.map((mark) => mark.toJSON());
+    }
+    const detached = linkDetachMarksAt(state, from);
+    const marks = detached ?? state.storedMarks ?? state.doc.resolve(from).marks();
+    return marks.map((mark) => mark.toJSON());
+};
+/** Copy and cut share this: build every clipboard form the canvas's own look supports (A4), never
+ * mutating the doc. Returns false (no-op, browser default) for an empty selection or an unusable
+ * clipboard object. */
+const writeClipboardData = (view, event, context) => {
+    const { state } = view;
+    if (state.selection.empty)
+        return false;
+    const data = event.clipboardData;
+    if (!data)
+        return false;
+    const liveSlice = state.selection.content();
+    const sliceJson = liveSlice.toJSON();
+    if (!sliceJson)
+        return false;
+    event.preventDefault();
+    const { openStart = 0, openEnd = 0 } = liveSlice;
+    const payload = {
+        v: RTE_CLIPBOARD_VERSION,
+        slice: buildInternalSlice(sliceJson.content, openStart, openEnd, context),
+    };
+    const externalContent = resolveContentForCopy(sliceJson.content, context, resolveRunStyleForExternal);
+    const externalSlice = Slice.fromJSON(state.schema, {
+        content: externalContent,
+        ...(openStart ? { openStart } : {}),
+        ...(openEnd ? { openEnd } : {}),
+    });
+    const { dom, text } = view.serializeForClipboard(externalSlice);
+    data.clearData();
+    data.setData('text/plain', text);
+    data.setData('text/html', dom.innerHTML);
+    data.setData(RTE_CLIPBOARD_MIME_TYPE, JSON.stringify(payload));
+    return true;
+};
+export const RteClipboard = Extension.create({
+    name: 'rteClipboard',
+    addOptions() {
+        return {
+            getContext: () => ({ role: undefined, block: undefined, colors: [] }),
+            getFirstInputMarks: () => [],
+        };
+    },
+    addProseMirrorPlugins() {
+        const { getContext, getFirstInputMarks } = this.options;
+        return [
+            new Plugin({
+                key: new PluginKey('rteClipboard'),
+                props: {
+                    handleDOMEvents: {
+                        copy(view, event) {
+                            return writeClipboardData(view, event, getContext());
+                        },
+                        cut(view, event) {
+                            if (!view.editable)
+                                return false;
+                            if (!writeClipboardData(view, event, getContext()))
+                                return false;
+                            const tr = view.state.tr.deleteSelection();
+                            tr.scrollIntoView();
+                            tr.setMeta('uiEvent', 'cut');
+                            view.dispatch(tr);
+                            return true;
+                        },
+                        paste(view, event) {
+                            if (!view.editable)
+                                return false;
+                            const data = event.clipboardData;
+                            if (!data)
+                                return false;
+                            event.preventDefault();
+                            const { state } = view;
+                            const context = getContext();
+                            const destinationAlign = resolveDestinationAlign(state, context);
+                            const ownRaw = data.getData(RTE_CLIPBOARD_MIME_TYPE);
+                            const ownPayload = ownRaw
+                                ? parseOwnRteClipboardPayload(ownRaw)
+                                : null;
+                            let pasteSliceJson = null;
+                            if (ownPayload) {
+                                pasteSliceJson = {
+                                    content: alignPastedParagraphs(relinkContentToDestination(ownPayload.slice.content, context), destinationAlign),
+                                    ...(ownPayload.slice.openStart
+                                        ? { openStart: ownPayload.slice.openStart }
+                                        : {}),
+                                    ...(ownPayload.slice.openEnd
+                                        ? { openEnd: ownPayload.slice.openEnd }
+                                        : {}),
+                                };
+                            }
+                            else {
+                                const plainText = data.getData('text/plain') || '';
+                                if (plainText) {
+                                    pasteSliceJson = plainTextToParagraphSlice(plainText, resolvePlainPasteMarks(state, getFirstInputMarks), destinationAlign);
+                                }
+                            }
+                            if (!pasteSliceJson)
+                                return true; // R10 — nothing to paste
+                            let slice = Slice.fromJSON(state.schema, pasteSliceJson);
+                            const isPlainTextPaste = !ownPayload;
+                            view.someProp('transformPasted', (transform) => {
+                                slice = transform(slice, view, isPlainTextPaste);
+                            });
+                            if (!slice.size)
+                                return true; // R8 — nothing fits
+                            const tr = view.state.tr.replaceSelection(slice);
+                            tr.setMeta('preventAutolink', true);
+                            tr.setMeta(AUTO_LINK_SKIP_STYLING_META, true);
+                            closeHistory(tr);
+                            tr.scrollIntoView();
+                            view.dispatch(tr);
+                            // Seals the paste off as its own undo step (R12): typing right after opens a new
+                            // group instead of merging into it (prosemirror-history groups within 500 ms).
+                            view.dispatch(closeHistory(view.state.tr));
+                            return true;
+                        },
+                    },
+                },
+            }),
+        ];
+    },
+});

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

@@ -1,5 +1,6 @@
 import { type Ref } from 'vue';
 import type { Editor } from '@tiptap/vue-3';
+import type { TextStyleDeclaration } from '@brand-page';
 interface DropdownRef {
     hideMenu: () => void;
 }
@@ -7,7 +8,7 @@ export declare const useFont: (editor: Editor, fontSettings: {
     selectedFont: string;
     selectedFontSize: string;
     selectedFontSizePx: number;
-}, dropdownRef: Ref<DropdownRef | undefined>) => {
+}, dropdownRef: Ref<DropdownRef | undefined>, getRoleStyle?: () => TextStyleDeclaration | undefined) => {
     selectedFont: Ref<string, string>;
     toggleFont: (font: string) => void;
     toggleFontAll: (fontName: string) => void;

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

@@ -1,32 +1,51 @@
 import { ref } from 'vue';
-import { emToPx, pxToEm, skipStyleDetection } from '@brand-page-maker/utils';
+import { emToPx, pxToEm, skipStyleDetection, roleVarOrLiteral, } from '@brand-page-maker/utils';
+import { roleVarRef } from '@shared/text-role-typography.util';
 import debounce from 'lodash/debounce';
-export const useFont = (editor, fontSettings, dropdownRef) => {
+export const useFont = (editor, fontSettings, dropdownRef, 
+// The linked role's style when the block is canonical-linked, else undefined (legacy/unlinked).
+// Drives the var-or-literal write: a pick equal to the role stores the role var, not a literal.
+getRoleStyle = () => undefined) => {
     const selectedFont = ref(fontSettings.selectedFont ?? 'Lato');
     const toggleFont = (font) => {
         dropdownRef.value?.hideMenu?.();
         selectedFont.value = font;
         fontSettings.selectedFont = font;
-        editor.chain().focus().setFontFamily(font).run();
+        editor
+            .chain()
+            .focus()
+            .setFontFamily(roleVarOrLiteral('fontFamily', font, getRoleStyle()))
+            .run();
     };
+    // Role application (role switch): write the role-agnostic var ref so the run follows the
+    // (new) container class — no literal to pin it.
     const toggleFontAll = (fontName) => {
         selectedFont.value = fontName;
         fontSettings.selectedFont = fontName;
-        skipStyleDetection(editor.chain().selectAll().setFontFamily(fontName)).run();
+        skipStyleDetection(editor
+            .chain()
+            .selectAll()
+            .setFontFamily(roleVarRef('fontFamily') ?? fontName)).run();
     };
     const toggleFontSize = debounce((size) => {
         fontSettings.selectedFontSize = size.includes('em') ? size : pxToEm(size);
         fontSettings.selectedFontSizePx = size.includes('em')
             ? parseInt(emToPx(size))
             : parseInt(size);
-        editor.chain().setFontSize(fontSettings.selectedFontSize).run();
+        editor
+            .chain()
+            .setFontSize(roleVarOrLiteral('fontSize', fontSettings.selectedFontSize, getRoleStyle()))
+            .run();
     }, 150);
     const toggleFontSizeAll = (size) => {
         fontSettings.selectedFontSize = size.includes('em') ? size : pxToEm(size);
         fontSettings.selectedFontSizePx = size.includes('em')
             ? parseInt(emToPx(size))
             : parseInt(size);
-        skipStyleDetection(editor.chain().selectAll().setFontSize(fontSettings.selectedFontSize)).run();
+        skipStyleDetection(editor
+            .chain()
+            .selectAll()
+            .setFontSize(roleVarRef('fontSize') ?? fontSettings.selectedFontSize)).run();
     };
     return {
         selectedFont,

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

@@ -1,9 +1,19 @@
 import type { Editor } from '@tiptap/vue-3';
-export declare const createFormattingActions: (editor: Editor) => {
+import type { TextStyleDeclaration } from '@brand-page';
+/**
+ * BP-5969 (Phase A) — bold / italic / underline / strike are written as `textStyle` mark ATTRIBUTES
+ * (font-weight / font-style / text-decoration), not Tiptap semantic marks, so they sit in the same
+ * var-or-literal system as family/size: a pick equal to the role stores the role var (follows role
+ * edits), else a literal override. Each toggle ALSO unsets the legacy semantic mark, so a legacy
+ * `<strong>`/`<u>` run becomes attr-driven the moment the user toggles it (migrate-on-edit). Reading
+ * still honours both forms (see the active-state resolution in `selectionUpdate`), and the semantic
+ * extensions remain registered for rendering un-migrated docs + paste (Phase B removes them).
+ */
+export declare const createFormattingActions: (editor: Editor, getRoleStyle?: () => TextStyleDeclaration | undefined, getBlockStyle?: () => TextStyleDeclaration | undefined) => {
     toggleBold: () => boolean;
     toggleItalic: () => boolean;
-    toggleUnderline: () => boolean;
-    toggleStrike: () => boolean;
+    toggleUnderline: () => void;
+    toggleStrike: () => void;
     toggleTextColor: (color: string) => boolean;
     toggleBackgroundColor: (color: string) => boolean;
     toggleBoldAll: () => void;
@@ -11,5 +21,8 @@ export declare const createFormattingActions: (editor: Editor) => {
     toggleUnderlineAll: () => void;
     toggleStrikeAll: () => void;
     toggleTextColorAll: (color: string) => void;
-    unsetAllMarks: () => void;
+    boldActive: () => boolean;
+    italicActive: () => boolean;
+    underlineActive: () => boolean;
+    strikeActive: () => boolean;
 };

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

@@ -1,33 +1,220 @@
-import { skipStyleDetection } from '@brand-page-maker/utils';
-export const createFormattingActions = (editor) => {
+import { skipStyleDetection, roleVarOrLiteral, isRoleVarRef, restoreLinkUnderlines, } from '@brand-page-maker/utils';
+import { composeTextDecoration, roleVarRef, textDecorationClearsRole, textDecorationFlags, } from '@shared/text-role-typography.util';
+// text-decoration is a single, combinable property (underline + line-through). Compose/decompose the
+// two flags in a stable order so a role-equality compare (roleVarOrLiteral) is deterministic.
+const DECORATION_FLAGS = ['underline', 'line-through', 'overline'];
+const isBoldWeight = (value) => value === 'bold' || (value != null && Number.parseInt(value, 10) >= 600);
+const decorationSet = (value) => new Set((value ?? '').split(/\s+/).filter((flag) => flag && flag !== 'none'));
+const composeDecoration = (flags) => DECORATION_FLAGS.filter((flag) => flags.has(flag)).join(' ') || 'none';
+/**
+ * BP-5969 (Phase A) — bold / italic / underline / strike are written as `textStyle` mark ATTRIBUTES
+ * (font-weight / font-style / text-decoration), not Tiptap semantic marks, so they sit in the same
+ * var-or-literal system as family/size: a pick equal to the role stores the role var (follows role
+ * edits), else a literal override. Each toggle ALSO unsets the legacy semantic mark, so a legacy
+ * `<strong>`/`<u>` run becomes attr-driven the moment the user toggles it (migrate-on-edit). Reading
+ * still honours both forms (see the active-state resolution in `selectionUpdate`), and the semantic
+ * extensions remain registered for rendering un-migrated docs + paste (Phase B removes them).
+ */
+export const createFormattingActions = (editor, 
+// The linked role's style (canonical-linked block), else undefined (legacy/unlinked → literals).
+getRoleStyle = () => undefined, 
+// Render fill gives an absent run this whole-block style before the role, so toolbar state and
+// mutations must use the same source instead of treating the run as role-only.
+getBlockStyle = () => undefined) => {
+    // An absent attr receives the block fill, but an explicit role reference keeps following the role.
+    const effectiveValue = (attr, mark) => {
+        if (typeof mark === 'string' && mark !== '') {
+            if (!isRoleVarRef(mark))
+                return mark;
+            return getRoleStyle()?.[attr];
+        }
+        return (getBlockStyle()?.[attr] ||
+            getRoleStyle()?.[attr]);
+    };
+    const effective = (attr) => effectiveValue(attr, editor.getAttributes('textStyle')?.[attr]);
+    // A run is bold/italic/underlined via EITHER the new attr OR a legacy semantic mark — check both.
+    const boldActive = () => editor.isActive('bold') || isBoldWeight(effective('fontWeight'));
+    const italicActive = () => editor.isActive('italic') || effective('fontStyle') === 'italic';
+    // The text runs a decoration toggle acts on: the cursor's marks when nothing is selected (stored
+    // marks win, as typing applies them), else each text node clipped to the selection.
+    const selectedRuns = () => {
+        const { selection, storedMarks, doc } = editor.state;
+        if (selection.empty) {
+            return [
+                {
+                    from: selection.from,
+                    to: selection.to,
+                    marks: storedMarks ?? selection.$from.marks(),
+                },
+            ];
+        }
+        const runs = [];
+        selection.ranges.forEach(({ $from, $to }) => {
+            doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+                if (!node.isText)
+                    return;
+                runs.push({
+                    from: Math.max(pos, $from.pos),
+                    to: Math.min(pos + node.nodeSize, $to.pos),
+                    marks: node.marks,
+                });
+            });
+        });
+        return runs;
+    };
+    const runDecoration = (marks) => {
+        const attrs = marks.find((mark) => mark.type.name === 'textStyle')?.attrs;
+        const markValue = attrs?.textDecoration;
+        const localValue = markValue && !isRoleVarRef(markValue)
+            ? markValue
+            : getBlockStyle()?.textDecoration;
+        const flags = decorationSet(composeTextDecoration(getRoleStyle()?.textDecoration, localValue, textDecorationClearsRole(markValue, attrs?.textDecorationReset === true)));
+        if (marks.some((mark) => mark.type.name === 'underline')) {
+            flags.add('underline');
+        }
+        if (marks.some((mark) => mark.type.name === 'strike')) {
+            flags.add('line-through');
+        }
+        return flags;
+    };
+    // Active only when every selected run has the flag, so toggling a mixed selection turns it on.
+    const decorationActive = (flag) => {
+        const runs = selectedRuns();
+        return (runs.length > 0 &&
+            runs.every(({ marks }) => runDecoration(marks).has(flag)));
+    };
+    // text-decoration holds both flags in one value, so each run gets its own composed value: one
+    // uniform write would drop the other flag from runs that carry it.
+    const toggleDecoration = (flag) => {
+        const turnOn = !decorationActive(flag);
+        const runs = selectedRuns();
+        const decorationFor = (marks) => {
+            const current = runDecoration(marks);
+            if (turnOn)
+                current.add(flag);
+            else
+                current.delete(flag);
+            const fallback = decorationSet(composeTextDecoration(getRoleStyle()?.textDecoration, getBlockStyle()?.textDecoration));
+            const roleFlags = textDecorationFlags(getRoleStyle()?.textDecoration);
+            // The role ref lets render-fill continue applying a whole-block override. Keep it only when
+            // the toggle returns to that exact fallback; every other literal must describe the complete
+            // desired result because it deliberately bypasses the block fill.
+            if (current.size === fallback.size &&
+                [...current].every((currentFlag) => fallback.has(currentFlag))) {
+                return getRoleStyle()
+                    ? {
+                        textDecoration: roleVarRef('textDecoration'),
+                        textDecorationReset: null,
+                    }
+                    : {
+                        textDecoration: composeDecoration(current),
+                        textDecorationReset: null,
+                    };
+            }
+            if ([...roleFlags].some((roleFlag) => !current.has(roleFlag))) {
+                return {
+                    textDecoration: composeDecoration(current),
+                    textDecorationReset: true,
+                };
+            }
+            return {
+                textDecoration: composeDecoration(current),
+                textDecorationReset: null,
+            };
+        };
+        // Unset both legacy decoration marks so the composed attr is the single source of truth.
+        if (editor.state.selection.empty) {
+            editor
+                .chain()
+                .focus()
+                .unsetUnderline()
+                .unsetStrike()
+                .setMark('textStyle', decorationFor(runs[0].marks))
+                .run();
+            return;
+        }
+        editor
+            .chain()
+            .focus()
+            .command(({ tr }) => {
+            const { textStyle, underline, strike } = tr.doc.type.schema.marks;
+            runs.forEach(({ from, to, marks }) => {
+                tr.removeMark(from, to, underline)
+                    .removeMark(from, to, strike)
+                    .addMark(from, to, textStyle.create({
+                    ...marks.find((mark) => mark.type === textStyle)?.attrs,
+                    ...decorationFor(marks),
+                }));
+            });
+            return true;
+        })
+            .run();
+    };
     return {
-        toggleBold: () => editor.chain().focus().toggleBold().run(),
-        toggleItalic: () => editor.chain().focus().toggleItalic().run(),
-        toggleUnderline: () => editor.chain().focus().toggleUnderline().run(),
-        toggleStrike: () => editor.chain().focus().toggleStrike().run(),
-        // Colour is an element-first override that must NOT detach the element from its
-        // global text style (unlike typography edits, which do). `skipStyleDetection`
-        // marks the transaction so the detach handler leaves `textStyleType` intact —
-        // same reason `toggleTextColorAll` below skips it.
+        toggleBold: () => editor
+            .chain()
+            .focus()
+            .unsetBold()
+            .setMark('textStyle', {
+            fontWeight: roleVarOrLiteral('fontWeight', boldActive() ? 'normal' : 'bold', getRoleStyle()),
+        })
+            .run(),
+        toggleItalic: () => editor
+            .chain()
+            .focus()
+            .unsetItalic()
+            .setMark('textStyle', {
+            fontStyle: roleVarOrLiteral('fontStyle', italicActive() ? 'normal' : 'italic', getRoleStyle()),
+        })
+            .run(),
+        toggleUnderline: () => toggleDecoration('underline'),
+        toggleStrike: () => toggleDecoration('line-through'),
+        // Colour is an element-first override that must NOT detach the element from its global text style
+        // (unlike typography edits, which do). `skipStyleDetection` marks the transaction so the detach
+        // handler leaves `textStyleType` intact — same reason `toggleTextColorAll` below skips it.
         toggleTextColor: (color) => skipStyleDetection(editor.chain().focus().setMark('textStyle', { color })).run(),
         toggleBackgroundColor: (color) => editor.chain().focus().setHighlight({ color }).run(),
+        // *All (role application): write the role var ref to every run so it follows the container class,
+        // clearing any legacy semantic mark that would otherwise pin it.
         toggleBoldAll: () => {
-            skipStyleDetection(editor.chain().selectAll().toggleBold()).run();
+            skipStyleDetection(editor
+                .chain()
+                .selectAll()
+                .unsetBold()
+                .setMark('textStyle', { fontWeight: roleVarRef('fontWeight') })).run();
         },
         toggleItalicAll: () => {
-            skipStyleDetection(editor.chain().selectAll().toggleItalic()).run();
+            skipStyleDetection(editor
+                .chain()
+                .selectAll()
+                .unsetItalic()
+                .setMark('textStyle', { fontStyle: roleVarRef('fontStyle') })).run();
         },
         toggleUnderlineAll: () => {
-            skipStyleDetection(editor.chain().selectAll().toggleUnderline()).run();
+            skipStyleDetection(editor
+                .chain()
+                .selectAll()
+                .unsetUnderline()
+                .unsetStrike()
+                .setTextDecoration(roleVarRef('textDecoration'))
+                .command(restoreLinkUnderlines(editor))).run();
         },
         toggleStrikeAll: () => {
-            skipStyleDetection(editor.chain().selectAll().toggleStrike()).run();
+            skipStyleDetection(editor
+                .chain()
+                .selectAll()
+                .unsetUnderline()
+                .unsetStrike()
+                .setTextDecoration(roleVarRef('textDecoration'))
+                .command(restoreLinkUnderlines(editor))).run();
         },
         toggleTextColorAll: (color) => {
             skipStyleDetection(editor.chain().selectAll().setMark('textStyle', { color })).run();
         },
-        unsetAllMarks: () => {
-            skipStyleDetection(editor.chain().selectAll().unsetAllMarks()).run();
-        },
+        // Effective active-state (attr OR legacy mark) for the toolbar buttons.
+        boldActive,
+        italicActive,
+        underlineActive: () => decorationActive('underline'),
+        strikeActive: () => decorationActive('line-through'),
     };
 };

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

@@ -1,5 +1,5 @@
 import type { Editor } from '@tiptap/vue-3';
-export declare const isHrefPageId: (href: string) => boolean;
+export { isHrefPageId } from '@shared/rte-link.util';
 export declare const getPageIdFromHref: (href: string) => string;
 export declare const getHrefForPage: (pageId: string) => string;
 export declare const useHyperlink: (editor: Editor) => {