fix(text): styles

.codesandbox/templates/next/pages/index.tsx

@@ -14,19 +14,16 @@ const IndexPage: NextPage = () => {
       originX: 'center',
       top: 20,
       textAlign: 'center',
-      styles: fabric.util.stylesFromArray(
-        [
-          {
-            style: {
-              fontWeight: 'bold',
-              fontSize: 64,
-            },
-            start: 0,
-            end: 9,
+      styles: [
+        {
+          style: {
+            fontWeight: 'bold',
+            fontSize: 64,
           },
-        ],
-        textValue
-      ),
+          start: 0,
+          end: 9,
+        },
+      ],
     });
     canvas.add(text);
     canvas.centerObjectH(text);

.codesandbox/templates/vanilla/src/index.ts

@@ -15,19 +15,16 @@ const text = new fabric.Textbox(textValue, {
   splitByGrapheme: true,
   width: 200,
   top: 20,
-  styles: fabric.util.stylesFromArray(
-    [
-      {
-        style: {
-          fontWeight: 'bold',
-          fontSize: 64,
-        },
-        start: 0,
-        end: 9,
+  styles: [
+    {
+      style: {
+        fontWeight: 'bold',
+        fontSize: 64,
       },
-    ],
-    textValue
-  ),
+      start: 0,
+      end: 9,
+    },
+  ],
 });
 canvas.add(text);
 canvas.centerObjectH(text);

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## [next]
 
+- fix(text): styles [#9081](https://github.com/fabricjs/fabric.js/pull/9081)
+- fix(Text): `_getFontDeclaration` [#9079](https://github.com/fabricjs/fabric.js/pull/9079)
 - chore(TS): Fix ITextBehaviour enterEditing type [#9075](https://github.com/fabricjs/fabric.js/pull/9075)
 - chore(TS): export FabricObjectProps and GroupProps [#9025](https://github.com/fabricjs/fabric.js/pull/9025)
 - chore(TS): Replace BaseFabricObject with FabricObject [#9016](https://github.com/fabricjs/fabric.js/pull/9016)

fabric.ts

@@ -53,10 +53,7 @@ export { Polygon } from './src/shapes/Polygon';
 export { Text } from './src/shapes/Text/Text';
 export { IText } from './src/shapes/IText/IText';
 export { Textbox } from './src/shapes/Textbox';
-export type {
-  TextStyleDeclaration,
-  TextStyle,
-} from './src/shapes/Text/StyledText';
+export * from './src/shapes/Text/TextStyles';
 export { Group } from './src/shapes/Group';
 export type {
   GroupProps,

rollup.config.mjs

@@ -39,7 +39,7 @@ function onwarn(warning, warn) {
       !warning.message.includes('sourcemap')) ||
     warning.code === 'CIRCULAR_DEPENDENCY'
   ) {
-    console.error(chalk.redBright(warning.message));
+    console.error(chalk.redBright(warning));
     if (process.env.CI) {
       throw Object.assign(new Error(), warning);
     }

src/canvas/StaticCanvas.ts

@@ -1239,49 +1239,28 @@ export class StaticCanvas<
    * @return {String}
    */
   createSVGFontFacesMarkup(): string {
-    const objects: FabricObject[] = [],
-      fontList: Record<string, boolean> = {},
-      fontPaths = config.fontPaths;
+    const { fontPaths } = config,
+      fontList = {} as Record<string, boolean>;
 
-    this._objects.forEach(function add(object) {
-      objects.push(object);
+    this._objects.forEach(function listFonts(object) {
+      isTextObject(object) &&
+        Object.assign(fontList, object.styleManager.getFontFamilyList());
       if (isCollection(object)) {
-        object._objects.forEach(add);
+        object._objects.forEach(listFonts);
       }
     });
 
-    objects.forEach((obj) => {
-      if (!isTextObject(obj)) {
-        return;
-      }
-      const { styles, fontFamily } = obj;
-      if (fontList[fontFamily] || !fontPaths[fontFamily]) {
-        return;
-      }
-      fontList[fontFamily] = true;
-      if (!styles) {
-        return;
-      }
-      Object.values(styles).forEach((styleRow) => {
-        Object.values(styleRow).forEach(({ fontFamily = '' }) => {
-          if (!fontList[fontFamily] && fontPaths[fontFamily]) {
-            fontList[fontFamily] = true;
-          }
-        });
-      });
-    });
-
     const fontListMarkup = Object.keys(fontList)
-      .map(
-        (fontFamily) =>
-          `\t\t@font-face {\n\t\t\tfont-family: '${fontFamily}';\n\t\t\tsrc: url('${fontPaths[fontFamily]}');\n\t\t}\n`
+      .map((fontFamily) =>
+        fontPaths[fontFamily]
+          ? `\t\t@font-face {\n\t\t\tfont-family: '${fontFamily}';\n\t\t\tsrc: url('${fontPaths[fontFamily]}');\n\t\t}\n`
+          : ''
       )
       .join('');
 
-    if (fontListMarkup) {
-      return `\t<style type="text/css"><![CDATA[\n${fontListMarkup}]]></style>\n`;
-    }
-    return '';
+    return fontListMarkup
+      ? `\t<style type="text/css"><![CDATA[\n${fontListMarkup}]]></style>\n`
+      : '';
   }
 
   /**

src/shapes/IText/DraggableTextDelegate.ts

@@ -7,8 +7,7 @@ import type {
 import { Point } from '../../Point';
 import type { IText } from './IText';
 import { setStyle } from '../../util/dom_style';
-import { cloneDeep } from '../../util/internals/cloneDeep';
-import type { TextStyleDeclaration } from '../Text/StyledText';
+import type { TextStyleDeclaration } from '../Text/TextStyles';
 import { getDocumentFromElement } from '../../util/dom_misc';
 import { NONE } from '../../constants';
 
@@ -130,23 +129,33 @@ export class DraggableTextDelegate {
     const offset = correction.add(diff).transform(vpt, true);
     //  prepare instance for drag image snapshot by making all non selected text invisible
     const bgc = target.backgroundColor;
-    const styles = cloneDeep(target.styles);
+    const styles = target.styleManager.slice();
     target.backgroundColor = '';
     const styleOverride = {
       stroke: 'transparent',
       fill: 'transparent',
       textBackgroundColor: 'transparent',
     };
-    target.setSelectionStyles(styleOverride, 0, selectionStart);
-    target.setSelectionStyles(styleOverride, selectionEnd, target.text.length);
+    target.styleManager.set({
+      offset: 0,
+      repeatCount: selectionStart,
+      style: styleOverride,
+    });
+    target.styleManager.set({
+      offset: selectionEnd,
+      repeatCount: target._text.length - selectionEnd,
+      style: styleOverride,
+    });
+    // @ts-expect-error protected
+    target._forceClearCache = true;
     target.dirty = true;
     const dragImage = target.toCanvasElement({
       enableRetinaScaling,
       viewportTransform: true,
     });
     // restore values
     target.backgroundColor = bgc;
-    target.styles = styles;
+    target.styleManager.reset(styles);
     target.dirty = true;
     //  position drag image offscreen
     setStyle(dragImage, {
@@ -187,10 +196,10 @@ export class DraggableTextDelegate {
         'application/fabric',
         JSON.stringify({
           value: value,
-          styles: target.getSelectionStyles(
+          styles: target.styleManager.slice(
             selection.selectionStart,
             selection.selectionEnd,
-            true
+            { complete: true }
           ),
         })
       );

src/shapes/IText/IText.ts

@@ -7,7 +7,6 @@
   keysMap,
   keysMapRtl,
 } from './constants';
-import type { TFiller } from '../../typedefs';
 import { classRegistry } from '../../ClassRegistry';
 import type { SerializedTextProps, TextProps } from '../Text/Text';
 import {
@@ -17,6 +16,8 @@
   JUSTIFY_RIGHT,
 } from '../Text/constants';
 import { CENTER, LEFT, RIGHT } from '../../constants';
+import { TextStyleDeclaration } from '../Text/TextStyles';
+import { TProps } from '../Object/types';
 
 type CursorBoundaries = {
   left: number;
@@ -103,7 +104,7 @@
  * ```
  */
 export class IText<
-    Props extends ITextProps = ITextProps,
+    Props extends TProps<ITextProps> = Partial<ITextProps>,
     SProps extends SerializedITextProps = SerializedITextProps,
     EventSpec extends ITextEvents = ITextEvents
   >
@@ -216,7 +217,7 @@
    * @param {String} text Text string
    * @param {Object} [options] Options object
    */
-  constructor(text: string, options: object) {
+  constructor(text: string, options?: Props) {
     super(text, options);
     this.initBehavior();
   }
@@ -309,33 +310,34 @@
     endIndex: number = this.selectionEnd,
     complete?: boolean
   ) {
-    return super.getSelectionStyles(startIndex, endIndex, complete);
+    return this.styleManager.slice(startIndex, endIndex, { complete });
   }
 
   /**
    * Sets style of a current selection, if no selection exist, do not set anything.
-   * @param {Object} [styles] Styles object
+   * @param {Object} [style] Styles object
    * @param {Number} [startIndex] Start index to get styles at
    * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1
    */
   setSelectionStyles(
-    styles: object,
+    style: TextStyleDeclaration,
     startIndex: number = this.selectionStart || 0,
     endIndex: number = this.selectionEnd
   ) {
-    return super.setSelectionStyles(styles, startIndex, endIndex);
+    for (let i = startIndex; i < (endIndex || startIndex); i++) {
+      this.styleManager.set({ offset: i, style: { ...style } });
+    }
+    /* not included in _extendStyles to avoid clearing cache more than once */
+    this._forceClearCache = true;
   }
 
   /**
    * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start)
    * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used.
    * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. useful to manage styles.
    */
-  get2DCursorLocation(
-    selectionStart = this.selectionStart,
-    skipWrapping?: boolean
-  ) {
-    return super.get2DCursorLocation(selectionStart, skipWrapping);
+  get2DCursorLocation(selectionStart = this.selectionStart) {
+    return super.get2DCursorLocation(selectionStart);
   }
 
   /**
@@ -650,42 +652,6 @@
     }
   }
 
-  /**
-   * High level function to know the height of the cursor.
-   * the currentChar is the one that precedes the cursor
-   * Returns fontSize of char at the current cursor
-   * Unused from the library, is for the end user
-   * @return {Number} Character font size
-   */
-  getCurrentCharFontSize(): number {
-    const cp = this._getCurrentCharIndex();
-    return this.getValueOfPropertyAt(cp.l, cp.c, 'fontSize');
-  }
-
-  /**
-   * High level function to know the color of the cursor.
-   * the currentChar is the one that precedes the cursor
-   * Returns color (fill) of char at the current cursor
-   * if the text object has a pattern or gradient for filler, it will return that.
-   * Unused by the library, is for the end user
-   * @return {String | TFiller} Character color (fill)
-   */
-  getCurrentCharColor(): string | TFiller | null {
-    const cp = this._getCurrentCharIndex();
-    return this.getValueOfPropertyAt(cp.l, cp.c, 'fill');
-  }
-
-  /**
-   * Returns the cursor position for the getCurrent.. functions
-   * @private
-   */
-  _getCurrentCharIndex() {
-    const cursorPosition = this.get2DCursorLocation(this.selectionStart, true),
-      charIndex =
-        cursorPosition.charIndex > 0 ? cursorPosition.charIndex - 1 : 0;
-    return { l: cursorPosition.lineIndex, c: charIndex };
-  }
-
   dispose() {
     this._exitEditing();
     this.draggableTextDelegate.dispose();