@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/brand-page/utils/text-role-css.util.ts

@@ -0,0 +1,321 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+import type { JSONContent } from '@tiptap/vue-3';
+import {
+  CANONICAL_TEXT_STYLE_TYPES,
+  isCanonicalTextStyleType,
+  type GlobalTextStyleDeclaration,
+  type TextStyleOptions,
+} from '../models/styles.model';
+import { PAGE_SCOPE_ID_ATTRIBUTE } from './style.util';
+import {
+  composeTextDecoration,
+  NEUTRAL_TYPOGRAPHY_VALUE,
+  ROLE_VAR_ATTRS,
+  rteTextDecorationClassName,
+  roleVarRef,
+  runTypographyFillValue,
+  textRoleClassName,
+  type RoleVarMarkAttr,
+} from '@shared/text-role-typography.util';
+
+export {
+  ROLE_VAR_ATTRS,
+  roleVarRef,
+  runTypographyFillValue,
+  textRoleClassName,
+  type RoleVarMarkAttr,
+} from '@shared/text-role-typography.util';
+
+export const TEXT_ROLE_OPTIONS_KEY: InjectionKey<
+  ComputedRef<TextStyleOptions | undefined>
+> = Symbol('bpTextRoleOptions');
+
+export const TEXT_ROLE_STYLE_ATTRIBUTE = 'data-text-roles';
+export const TEXT_ROLE_SCOPED_ATTRIBUTE = 'data-text-roles-scoped';
+
+export const roleStyleFor = (
+  type: string | undefined,
+  options: TextStyleOptions | undefined,
+): GlobalTextStyleDeclaration | undefined =>
+  type && isCanonicalTextStyleType(type) ? options?.[type]?.style : undefined;
+
+export const roleClassFor = (type: string | undefined): string | undefined =>
+  type && isCanonicalTextStyleType(type) ? textRoleClassName(type) : undefined;
+
+// Multi-word CSS custom identifiers are unquoted only when every token is valid.
+const UNQUOTED_FAMILY_TOKEN = /^-?[A-Za-z_][A-Za-z0-9_-]*$/;
+
+export const cssFontFamilyValue = (value: string): string =>
+  value
+    .split(',')
+    .map((raw) => {
+      const family = raw.trim();
+
+      if (
+        !family ||
+        family.startsWith('"') ||
+        family.startsWith("'") ||
+        family.startsWith('var(')
+      ) {
+        return family;
+      }
+
+      return family
+        .split(/\s+/)
+        .every((token) => UNQUOTED_FAMILY_TOKEN.test(token))
+        ? family
+        : `"${family}"`;
+    })
+    .filter(Boolean)
+    .join(', ');
+
+const ROLE_VAR_MARK_ATTRS = ROLE_VAR_ATTRS.map(
+  (attr) => attr.markAttr,
+) as RoleVarMarkAttr[];
+
+interface RteRunNode {
+  type?: string;
+  marks?: { type: string; attrs?: Record<string, unknown> }[];
+  content?: RteRunNode[];
+}
+
+export const roleTypographyStyle = (
+  own: Partial<Record<RoleVarMarkAttr, string>> | undefined,
+  roleStyle: Partial<Record<RoleVarMarkAttr, string>> | undefined,
+  options?: { omit?: RoleVarMarkAttr[] },
+): Partial<Record<RoleVarMarkAttr, string>> => {
+  const omit = new Set(options?.omit ?? []);
+  const style: Partial<Record<RoleVarMarkAttr, string>> = {};
+
+  const literal = (attr: RoleVarMarkAttr, value: string): string =>
+    attr === 'fontFamily' ? cssFontFamilyValue(value) : value;
+
+  for (const attr of ROLE_VAR_MARK_ATTRS) {
+    if (omit.has(attr)) continue;
+
+    const ownValue = own?.[attr];
+    const roleValue = roleStyle?.[attr];
+    const hasOwn = ownValue != null && ownValue !== '';
+    const hasRole = roleValue != null && roleValue !== '';
+
+    if (roleStyle == null) {
+      if (hasOwn) style[attr] = literal(attr, ownValue as string);
+
+      continue;
+    }
+
+    const effectiveRole = hasRole ? roleValue : NEUTRAL_TYPOGRAPHY_VALUE[attr];
+
+    if (hasOwn && (!hasRole || ownValue !== effectiveRole)) {
+      style[attr] =
+        attr === 'textDecoration'
+          ? (composeTextDecoration(roleValue, ownValue as string) ??
+            literal(attr, ownValue as string))
+          : literal(attr, ownValue as string);
+    } else if (hasRole) {
+      style[attr] = roleVarRef(attr)!;
+    }
+  }
+
+  return style;
+};
+
+export const fillRteRunTypography = (
+  doc: JSONContent,
+  roleStyle: Partial<Record<RoleVarMarkAttr, string>> | undefined,
+  styleObj: Partial<Record<RoleVarMarkAttr, string>> | undefined,
+): JSONContent => {
+  const fillRun = (run: RteRunNode): RteRunNode => {
+    const mark = run.marks?.find((candidate) => candidate.type === 'textStyle');
+    let attrs: Record<string, unknown> | undefined;
+
+    for (const attr of ROLE_VAR_MARK_ATTRS) {
+      const existing = (attrs ?? mark?.attrs)?.[attr];
+      const inheritedDecoration =
+        attr === 'textDecoration' && existing === roleVarRef(attr);
+
+      if (
+        !inheritedDecoration &&
+        existing !== undefined &&
+        existing !== null &&
+        existing !== ''
+      )
+        continue;
+
+      let value = runTypographyFillValue(attr, roleStyle, styleObj);
+
+      if (value == null) continue;
+
+      if (inheritedDecoration && value === roleVarRef(attr)) continue;
+
+      if (attr === 'fontFamily') value = cssFontFamilyValue(value);
+
+      if (existing !== value) {
+        attrs ??= { ...(mark?.attrs ?? {}) };
+        attrs[attr] = value;
+
+        // A filled value is the role's or block's, so a stale reset marker must not clear the role.
+        if (attr === 'textDecoration') delete attrs.textDecorationReset;
+      }
+    }
+
+    if (!attrs) return run;
+
+    const nextMark = { type: 'textStyle', attrs };
+    const marks = mark
+      ? run.marks!.map((candidate) =>
+          candidate === mark ? nextMark : candidate,
+        )
+      : [...(run.marks ?? []), nextMark];
+
+    return { ...run, marks };
+  };
+
+  const visit = (node: RteRunNode): RteRunNode => {
+    const own = node.type === 'text' ? fillRun(node) : node;
+    const content = node.content?.map(visit);
+
+    return content?.some((child, index) => child !== node.content?.[index])
+      ? { ...own, content }
+      : own;
+  };
+
+  return visit(doc as unknown as RteRunNode) as JSONContent;
+};
+
+const TYPOGRAPHY_PROPS: [
+  cssProp: string,
+  key: keyof GlobalTextStyleDeclaration,
+][] = [
+  ['font-family', 'fontFamily'],
+  ['font-size', 'fontSize'],
+  ['font-weight', 'fontWeight'],
+  ['font-style', 'fontStyle'],
+  ['line-height', 'lineHeight'],
+  ['letter-spacing', 'letterSpacing'],
+  ['text-decoration', 'textDecoration'],
+];
+
+// Defence in depth: role values are validated when stored, but these reach Page's raw SSR <style>
+// text, so nothing here may close a declaration or the style element.
+const sanitizeDeclarationValue = (value: string): string =>
+  value.replace(/[^\w\s.%-]/g, '');
+
+const sanitizeFontFamilyValue = (value: string): string =>
+  value
+    .split(',')
+    .map((family) => family.replace(/[^A-Za-z0-9 _-]/g, '').trim())
+    .filter(Boolean)
+    .join(', ');
+
+const roleDeclarations = (
+  style: Partial<GlobalTextStyleDeclaration> | undefined,
+): string =>
+  TYPOGRAPHY_PROPS.flatMap(([cssProp, key]) => {
+    const value =
+      style?.[key] || NEUTRAL_TYPOGRAPHY_VALUE[key as RoleVarMarkAttr];
+
+    if (!value) return [];
+
+    const varAttr = ROLE_VAR_ATTRS.find((attr) => attr.markAttr === key);
+
+    if (!varAttr) return [];
+
+    const declared =
+      key === 'fontFamily'
+        ? cssFontFamilyValue(sanitizeFontFamilyValue(String(value)))
+        : sanitizeDeclarationValue(String(value));
+
+    return [`${varAttr.varName}: ${declared};`];
+  }).join(' ');
+
+const buildRoleRules = (
+  textStyleOptions: TextStyleOptions,
+  selectorPrefix: string,
+): string =>
+  CANONICAL_TEXT_STYLE_TYPES.flatMap((type) => {
+    const declarations = roleDeclarations(textStyleOptions[type]?.style);
+
+    return declarations
+      ? [`${selectorPrefix}.${textRoleClassName(type)} { ${declarations} }`]
+      : [];
+  }).join('\n  ');
+
+const RTE_TEXT_DECORATION_VALUES = [
+  'var(--role-text-decoration)',
+  'none',
+  'underline',
+  'line-through',
+  'underline line-through',
+  'overline',
+  'underline overline',
+  'line-through overline',
+  'underline line-through overline',
+  'none underline',
+  'none line-through',
+  'none overline',
+  'none underline line-through',
+  'none underline overline',
+  'none line-through overline',
+  'none underline line-through overline',
+];
+
+const buildRteTextDecorationRules = (
+  textStyleOptions: TextStyleOptions,
+  selectorPrefix: string,
+): string =>
+  CANONICAL_TEXT_STYLE_TYPES.flatMap((type) => {
+    const roleValue = textStyleOptions[type]?.style?.textDecoration;
+    const roleSelector = `${selectorPrefix}.${textRoleClassName(type)}`;
+
+    return RTE_TEXT_DECORATION_VALUES.map((localValue) => {
+      const className = rteTextDecorationClassName(localValue)!;
+      const decoration = composeTextDecoration(roleValue ?? 'none', localValue);
+
+      return `${roleSelector} .${className} { text-decoration: ${decoration}; }`;
+    });
+  }).join('\n  ');
+
+export const buildTextRoleRootCssText = (
+  textStyleOptions: TextStyleOptions,
+): string => {
+  const rules = buildRoleRules(textStyleOptions, '');
+  const decorationRules = buildRteTextDecorationRules(textStyleOptions, '');
+
+  return [rules, decorationRules].filter(Boolean).join('\n');
+};
+
+export const buildTextRoleRootCss = (
+  textStyleOptions: TextStyleOptions,
+): string => {
+  const css = buildTextRoleRootCssText(textStyleOptions);
+
+  return css ? `<style ${TEXT_ROLE_STYLE_ATTRIBUTE}>\n  ${css}\n</style>` : '';
+};
+
+export const buildTextRoleScopedCssText = (
+  textStyleOptions: TextStyleOptions,
+  scopeId: string,
+): string => {
+  if (!scopeId) return '';
+
+  const rules = buildRoleRules(
+    textStyleOptions,
+    `[${PAGE_SCOPE_ID_ATTRIBUTE}="${scopeId}"] `,
+  );
+  const decorationRules = buildRteTextDecorationRules(
+    textStyleOptions,
+    `[${PAGE_SCOPE_ID_ATTRIBUTE}="${scopeId}"] `,
+  );
+
+  return [rules, decorationRules].filter(Boolean).join('\n');
+};
+
+export const buildTextRoleScopedCss = (
+  textStyleOptions: TextStyleOptions,
+  scopeId: string,
+): string => {
+  const css = buildTextRoleScopedCssText(textStyleOptions, scopeId);
+
+  return css ? `<style ${TEXT_ROLE_SCOPED_ATTRIBUTE}>\n  ${css}\n</style>` : '';
+};