From e37fd7529bd470a080f016ac343a4c6b9697214a Mon Sep 17 00:00:00 2001
From: heftyKoo <yeyuqiudeng@gmail.com>
Date: Thu, 4 May 2023 20:36:29 +0800
Subject: [PATCH] feat: title and subtitle support splitByGrapheme

---
 README.md                            |  2 ++
 index.d.ts                           | 12 ++++++++++--
 sources/fabric/fabricFrameSources.js |  7 ++++---
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 9ce0522e..ec131dec 100644
--- a/README.md
+++ b/README.md
@@ -281,6 +281,7 @@ See also [Ken Burns parameters](#ken-burns-parameters).
 - `text` - Title text to show, keep it short
 - `textColor` - default `#ffffff`
 - `position` - See [Position parameter](#position-parameter)
+- `splitByGrapheme` - To split strings that have no white space concept. This is a cheap way to help with chinese/japanese. Default `false`
 
 See also [Ken Burns parameters](#ken-burns-parameters)
 
@@ -288,6 +289,7 @@ See also [Ken Burns parameters](#ken-burns-parameters)
 - `fontPath` - See `defaults.layer.fontPath`
 - `text` - Subtitle text to show
 - `textColor` - default `#ffffff`
+- `splitByGrapheme` - To split strings that have no white space concept. This is a cheap way to help with chinese/japanese. Default `false`
 
 #### Layer type 'title-background'
 
diff --git a/index.d.ts b/index.d.ts
index 6895c815..f05d5479 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -528,7 +528,11 @@ declare namespace Editly {
 		 * Position.
 		 */
 		position?: Position;
-
+		/**
+		 * To split strings that have no white space concept. This is a cheap way to help with chinese/japanese
+		 * Defaults to `false`.
+		 */
+		splitByGrapheme?: boolean;
 	}
 
 	interface SubtitleLayer extends BaseLayer {
@@ -559,7 +563,11 @@ declare namespace Editly {
 		 * WARNING: Undocumented feature!
 		 */
 		backgroundColor?: string;
-
+		/**
+		 * To split strings that have no white space concept. This is a cheap way to help with chinese/japanese
+		 * Defaults to `false`.
+		 */
+		splitByGrapheme?: boolean;
 	}
 
 	/**
diff --git a/sources/fabric/fabricFrameSources.js b/sources/fabric/fabricFrameSources.js
index f40c3a36..7a67f196 100644
--- a/sources/fabric/fabricFrameSources.js
+++ b/sources/fabric/fabricFrameSources.js
@@ -188,7 +188,7 @@ export async function linearGradientFrameSource({ width, height, params }) {
 }
 
 export async function subtitleFrameSource({ width, height, params }) {
-  const { text, textColor = '#ffffff', backgroundColor = 'rgba(0,0,0,0.3)', fontFamily = defaultFontFamily, delay = 0, speed = 1 } = params;
+  const { text, textColor = '#ffffff', backgroundColor = 'rgba(0,0,0,0.3)', fontFamily = defaultFontFamily, delay = 0, speed = 1, splitByGrapheme } = params;
 
   async function onRender(progress, canvas) {
     const easedProgress = easeOutExpo(Math.max(0, Math.min((progress - delay) * speed, 1)));
@@ -199,7 +199,7 @@ export async function subtitleFrameSource({ width, height, params }) {
     const textBox = new fabric.Textbox(text, {
       fill: textColor,
       fontFamily,
-
+      splitByGrapheme,
       fontSize: min / 20,
       textAlign: 'left',
       width: width - padding * 2,
@@ -263,7 +263,7 @@ export async function imageOverlayFrameSource({ params, width, height }) {
 }
 
 export async function titleFrameSource({ width, height, params }) {
-  const { text, textColor = '#ffffff', fontFamily = defaultFontFamily, position = 'center', zoomDirection = 'in', zoomAmount = 0.2 } = params;
+  const { text, textColor = '#ffffff', fontFamily = defaultFontFamily, position = 'center', zoomDirection = 'in', zoomAmount = 0.2, splitByGrapheme } = params;
 
   async function onRender(progress, canvas) {
     // console.log('progress', progress);
@@ -278,6 +278,7 @@ export async function titleFrameSource({ width, height, params }) {
 
     const textBox = new fabric.Textbox(text, {
       fill: textColor,
+      splitByGrapheme,
       fontFamily,
       fontSize,
       textAlign: 'center',