From 920da5ae9346786c5b1467bd9109fd8681e49983 Mon Sep 17 00:00:00 2001
From: Roman Bruckner <roman@jointjs.com>
Date: Mon, 19 Feb 2024 17:24:57 +0800
Subject: [PATCH] fix(attributes): text-wrap takes external CSS into account
 (#2542)

---
 .../joint-core/src/dia/attributes/text.mjs    | 12 ++++---
 .../joint-core/test/jointjs/dia/attributes.js | 32 +++++++++++++++++++
 2 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/packages/joint-core/src/dia/attributes/text.mjs b/packages/joint-core/src/dia/attributes/text.mjs
index 79928344f..26d9bd867 100644
--- a/packages/joint-core/src/dia/attributes/text.mjs
+++ b/packages/joint-core/src/dia/attributes/text.mjs
@@ -123,12 +123,16 @@ const textAttributesNS = {
             if (text === undefined) text = attrs.text;
             if (text !== undefined) {
                 const breakTextFn = value.breakText || breakText;
+                const computedStyles = getComputedStyle(node);
+
                 wrappedText = breakTextFn('' + text, size, {
-                    'font-weight': attrs['font-weight'],
-                    'font-size': attrs['font-size'],
-                    'font-family': attrs['font-family'],
+                    'font-weight': computedStyles.fontWeight,
+                    'font-family': computedStyles.fontFamily,
+                    'text-transform': computedStyles.textTransform,
+                    'font-size': computedStyles.fontSize,
+                    'letter-spacing': computedStyles.letterSpacing,
+                    // The `line-height` attribute in SVG is JoinJS specific.
                     'lineHeight': attrs['line-height'],
-                    'letter-spacing': attrs['letter-spacing']
                 }, {
                     // Provide an existing SVG Document here
                     // instead of creating a temporary one over again.
diff --git a/packages/joint-core/test/jointjs/dia/attributes.js b/packages/joint-core/test/jointjs/dia/attributes.js
index bd7da35bf..fe8166db5 100644
--- a/packages/joint-core/test/jointjs/dia/attributes.js
+++ b/packages/joint-core/test/jointjs/dia/attributes.js
@@ -104,6 +104,38 @@ QUnit.module('Attributes', function() {
                     return obj.width === refBBox.width - 11 && obj.height === refBBox.height - 13;
                 })));
 
+                // external css styles taken into account
+                spy.resetHistory();
+                const fontSize = '23px';
+                const fontFamily = 'Arial';
+                const fontWeight = '800';
+                const letterSpacing = '5px';
+                const textTransform = 'uppercase';
+                const stylesheet = V.createSVGStyle(`
+                    text {
+                        font-size: ${fontSize};
+                        font-family: ${fontFamily};
+                        font-weight: ${fontWeight};
+                        letter-spacing: ${letterSpacing};
+                        text-transform: ${textTransform};
+                    }
+                `);
+                paper.svg.prepend(stylesheet);
+                textWrap.set.call(cellView, { text: 'text', breakText: spy }, bbox, node, {});
+                assert.ok(spy.calledWith(
+                    sinon.match.string,
+                    sinon.match.object,
+                    sinon.match((obj) => {
+                        return (
+                            obj['font-size'] === fontSize &&
+                            obj['font-family'] === fontFamily &&
+                            obj['letter-spacing'] === letterSpacing &&
+                            obj['text-transform'] === textTransform &&
+                            obj['font-weight'] === fontWeight
+                        );
+                    })));
+                stylesheet.remove();
+
                 spy.restore();
             });