@designcrowd/library.brand-page 6.2.11 → 6.2.12

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

@@ -2,9 +2,15 @@ import { ref, computed } from 'vue';
 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';
+import { skipStyleDetection, roleVarOrLiteral } from '@brand-page-maker/utils';
+import { roleVarRef } from '@shared/text-role-typography.util';
+import type { TextStyleDeclaration } from '@brand-page';
 
-export const useSpacing = (editor: Editor) => {
+export const useSpacing = (
+  editor: Editor,
+  // The linked role's style when canonical-linked, else undefined — see useFont.
+  getRoleStyle: () => TextStyleDeclaration | undefined = () => undefined,
+) => {
   const letterSpacing = ref('0');
   const lineHeight = ref('1');
 
@@ -13,24 +19,43 @@ export const useSpacing = (editor: Editor) => {
       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: string) => {
     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: string) => {
     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: string) => {
     lineHeight.value = v;
-    skipStyleDetection(editor.chain().selectAll().setLineHeight(v)).run();
+    skipStyleDetection(
+      editor
+        .chain()
+        .selectAll()
+        .setLineHeight(roleVarRef('lineHeight') ?? v),
+    ).run();
   }, 300);
 
   return {