save this

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

@@ -1,6 +1,6 @@
 import * as fabric from 'fabric';
 import './styles.css';
-import { testCase } from './testcases/loadingSvgs';
+import { testCase } from './testcases/simpleTextbox';
 
 const el = document.getElementById('canvas');
 const canvas = (window.canvas = new fabric.Canvas(el));

.codesandbox/templates/vanilla/src/testcases/simpleTextbox.ts

@@ -1,40 +1,20 @@
 import * as fabric from 'fabric';
 
 export function testCase(canvas: fabric.Canvas) {
-  const textValue = 'fabric.js sandbox';
-  const text = new fabric.Textbox(textValue, {
-    originX: 'center',
-    splitByGrapheme: true,
+  const textValue = 'LOL';
+  const path = new fabric.Path(
+    'M0 200 v-200 h200      a100,100 90 0,1 0,200     a100,100 90 0,1 -200,0     z',
+    {
+      fill: '',
+      stroke: 'red',
+    },
+  );
+  const text = new fabric.IText(textValue, {
     width: 200,
     top: 20,
-    styles: fabric.util.stylesFromArray(
-      [
-        {
-          style: {
-            fontWeight: 'bold',
-            fontSize: 64,
-          },
-          start: 0,
-          end: 9,
-        },
-      ],
-      textValue,
-    ),
+    path,
+    objectCaching: false,
   });
   canvas.add(text);
   canvas.centerObjectH(text);
-  function animate(toState) {
-    text.animate(
-      { scaleX: Math.max(toState, 0.1) * 2 },
-      {
-        onChange: () => canvas.renderAll(),
-        onComplete: () => animate(!toState),
-        duration: 1000,
-        easing: toState
-          ? fabric.util.ease.easeInOutQuad
-          : fabric.util.ease.easeInOutSine,
-      },
-    );
-  }
-  // animate(1);
 }

dist-extensions/fabric.d.ts

@@ -80,7 +80,7 @@ export { FabricText,
  *
  */
 FabricText as Text, } from './src/shapes/Text/Text';
-export type { ITextProps, SerializedITextProps, } from './src/shapes/IText/IText';
+export type { ITextProps, SerializedITextProps, CursorRenderingData, CursorBoundaries, } from './src/shapes/IText/IText';
 export { IText } from './src/shapes/IText/IText';
 export type { GraphemeData, SerializedTextboxProps, TextboxProps, } from './src/shapes/Textbox';
 export { Textbox } from './src/shapes/Textbox';