Editor: Add support for applying gradient to text (#13590)

Co-authored-by: Anurag Vasanwala <75766877+AnuragVasanwala@users.noreply.github.com>

packages/element-library/src/text/display.js

@@ -241,7 +241,6 @@ function TextDisplay({
     targetRef: bgRef,
     expectedStyle: 'background',
   });
-  useColorTransformHandler({ id, targetRef: fgRef, expectedStyle: 'color' });
   useColorTransformHandler({
     id,
     targetRef: refWithBorder,

packages/patterns/src/constants.ts

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Internal dependencies
+ */
+import { PatternType, type Linear } from './types';
+
+export const DEFAULT_GRADIENT: Linear = {
+  type: PatternType.Linear,
+  stops: [
+    {
+      color: {
+        r: 0,
+        g: 0,
+        b: 0,
+      },
+      position: 0,
+    },
+    {
+      color: {
+        r: 1,
+        g: 1,
+        b: 1,
+      },
+      position: 1,
+    },
+  ],
+};
+
+export const GRADIENT = {
+  LINEAR: 'linear-gradient',
+  RADIAL: 'radial-gradient',
+};
+
+export const GRADIENT_REGEX = {
+  [GRADIENT.LINEAR]:
+    /linear-gradient\((?:-?\d*\.?\d+turn,\s*)?(?:rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),?\s*(\d*\.?\d+)?\)|#([0-9a-fA-F]{6}))\s*0%,\s*(?:rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),?\s*(\d*\.?\d+)?\)|#([0-9a-fA-F]{6}))\s*100%\)/,
+  [GRADIENT.RADIAL]:
+    /radial-gradient\((?:rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),?\s*(\d*\.?\d+)?\)|#([0-9a-fA-F]{6}))\s*0%,\s*(?:rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),?\s*(\d*\.?\d+)?\)|#([0-9a-fA-F]{6}))\s*100%\)/,
+};

packages/patterns/src/getColorFromGradientStyle.ts

@@ -0,0 +1,96 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Internal dependencies
+ */
+import { DEFAULT_GRADIENT, GRADIENT, GRADIENT_REGEX } from './constants';
+import createSolidFromString from './createSolidFromString';
+import { PatternType, type Gradient } from './types';
+
+export default function getColorFromGradientStyle(style: string): Gradient {
+  if (style.includes(GRADIENT.LINEAR)) {
+    return parseGradient(style, GRADIENT.LINEAR);
+  } else if (style.includes(GRADIENT.RADIAL)) {
+    return parseGradient(style, GRADIENT.RADIAL);
+  }
+  throw new Error('Invalid style string passed.');
+}
+
+function parseGradient(style: string, gradient: string): Gradient {
+  const regex = GRADIENT_REGEX[gradient];
+  const matches = style.match(regex);
+  if (!matches) {
+    return DEFAULT_GRADIENT;
+  }
+
+  const { startColor, endColor } = getColorRange(matches);
+
+  if (gradient === GRADIENT.LINEAR) {
+    const rotationMatch = style.match(/0(\.((25|5|75)))?turn/);
+    return {
+      type: PatternType.Linear,
+      stops: [
+        { color: startColor, position: 0 },
+        { color: endColor, position: 1 },
+      ],
+      rotation: rotationMatch ? parseFloat(rotationMatch[0]) : 0,
+    };
+  }
+
+  return {
+    type: PatternType.Radial,
+    stops: [
+      { color: startColor, position: 0 },
+      { color: endColor, position: 1 },
+    ],
+  };
+}
+
+function getColorRange(matches: RegExpMatchArray) {
+  const [
+    ,
+    startColorR,
+    startColorG,
+    startColorB,
+    startAlpha,
+    startHex,
+    endColorR,
+    endColorG,
+    endColorB,
+    endAlpha,
+    endHex,
+  ] = matches;
+
+  const startColor = startHex
+    ? createSolidFromString(`#${startHex}`).color
+    : parseColor(startColorR, startColorG, startColorB, startAlpha);
+
+  const endColor = endHex
+    ? createSolidFromString(`#${endHex}`).color
+    : parseColor(endColorR, endColorG, endColorB, endAlpha);
+
+  return { startColor, endColor };
+}
+
+function parseColor(r: string, g: string, b: string, a: string) {
+  return {
+    r: parseInt(r),
+    g: parseInt(g),
+    b: parseInt(b),
+    a: a ? parseFloat(a) : undefined,
+  };
+}

packages/patterns/src/getGradientStyleFromColor.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Internal dependencies
+ */
+import generatePatternStyles from './generatePatternStyles';
+import type { Gradient } from './types';
+
+export default function getGradientStyleFromColor(color: Gradient) {
+  const gradient = generatePatternStyles(color);
+
+  return gradient.backgroundImage;
+}

packages/patterns/src/index.ts

@@ -15,6 +15,7 @@
  */
 
 export * from './types';
+export * from './constants';
 
 export { default as convertToCSS } from './convertToCSS';
 export { default as createSolid } from './createSolid';
@@ -30,3 +31,5 @@ export { default as hasGradient } from './hasGradient';
 export { default as hasOpacity } from './hasOpacity';
 export { default as isPatternEqual } from './isPatternEqual';
 export { default as isHexColorString } from './isHexColorString';
+export { default as getGradientStyleFromColor } from './getGradientStyleFromColor';
+export { default as getColorFromGradientStyle } from './getColorFromGradientStyle';