bump deps

package-lock.json

@@ -5,10 +5,11 @@
   "requires": true,
   "packages": {
     "": {
-      "version": "1.1.5",
+      "version": "1.2.1",
       "license": "MIT",
       "dependencies": {
-        "css-line-break": "2.0.1"
+        "css-line-break": "2.0.1",
+        "text-segmentation": "^1.0.2"
       },
       "devDependencies": {
         "@babel/cli": "^7.4.3",
@@ -36,7 +37,7 @@
         "babel-loader": "^8.0.5",
         "babel-plugin-add-module-exports": "^1.0.2",
         "babel-plugin-dev-expression": "^0.2.1",
-        "base64-arraybuffer": "0.2.0",
+        "base64-arraybuffer": "1.0.1",
         "body-parser": "^1.19.0",
         "chai": "4.1.1",
         "chromeless": "^1.5.2",
@@ -5784,9 +5785,9 @@
       }
     },
     "node_modules/base64-arraybuffer": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
-      "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz",
+      "integrity": "sha512-vFIUq7FdLtjZMhATwDul5RZWv2jpXQ09Pd6jcVEOvIsqCWTRFD/ONHNfyOS8dA/Ippi5dsIgpyKWKZaAKZltbA==",
       "engines": {
         "node": ">= 0.6.0"
       }
@@ -8637,6 +8638,14 @@
         "base64-arraybuffer": "^0.2.0"
       }
     },
+    "node_modules/css-line-break/node_modules/base64-arraybuffer": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
+      "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/cssom": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
@@ -23441,6 +23450,14 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.2.tgz",
+      "integrity": "sha512-uTqvLxdBrVnx/CFQOtnf8tfzSXFm+1Qxau7Xi54j4OPTZokuDOX8qncQzrg2G8ZicAMOM8TgzFAYTb+AqNO4Cw==",
+      "dependencies": {
+        "utrie": "^1.0.1"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -24517,6 +24534,14 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.1.tgz",
+      "integrity": "sha512-JPaDXF3vzgZxfeEwutdGzlrNoVFL5UvZcbO6Qo9D4GoahrieUPoMU8GCpVpR7MQqcKhmShIh8VlbEN3PLM3EBg==",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.1"
+      }
+    },
     "node_modules/uuid": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz",
@@ -30457,9 +30482,9 @@
       }
     },
     "base64-arraybuffer": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
-      "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ=="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz",
+      "integrity": "sha512-vFIUq7FdLtjZMhATwDul5RZWv2jpXQ09Pd6jcVEOvIsqCWTRFD/ONHNfyOS8dA/Ippi5dsIgpyKWKZaAKZltbA=="
     },
     "base64-js": {
       "version": "1.3.0",
@@ -32816,6 +32841,13 @@
       "integrity": "sha512-gwKYIMUn7xodIcb346wgUhE2Dt5O1Kmrc16PWi8sL4FTfyDj8P5095rzH7+O8CTZudJr+uw2GCI/hwEkDJFI2w==",
       "requires": {
         "base64-arraybuffer": "^0.2.0"
+      },
+      "dependencies": {
+        "base64-arraybuffer": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
+          "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ=="
+        }
       }
     },
     "cssom": {
@@ -44509,6 +44541,14 @@
       "integrity": "sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==",
       "dev": true
     },
+    "text-segmentation": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.2.tgz",
+      "integrity": "sha512-uTqvLxdBrVnx/CFQOtnf8tfzSXFm+1Qxau7Xi54j4OPTZokuDOX8qncQzrg2G8ZicAMOM8TgzFAYTb+AqNO4Cw==",
+      "requires": {
+        "utrie": "^1.0.1"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -45332,6 +45372,14 @@
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
       "dev": true
     },
+    "utrie": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.1.tgz",
+      "integrity": "sha512-JPaDXF3vzgZxfeEwutdGzlrNoVFL5UvZcbO6Qo9D4GoahrieUPoMU8GCpVpR7MQqcKhmShIh8VlbEN3PLM3EBg==",
+      "requires": {
+        "base64-arraybuffer": "^1.0.1"
+      }
+    },
     "uuid": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz",

package.json

@@ -48,7 +48,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-add-module-exports": "^1.0.2",
     "babel-plugin-dev-expression": "^0.2.1",
-    "base64-arraybuffer": "0.2.0",
+    "base64-arraybuffer": "1.0.1",
     "body-parser": "^1.19.0",
     "chai": "4.1.1",
     "chromeless": "^1.5.2",
@@ -118,6 +118,7 @@
   "homepage": "https://html2canvas.hertzen.com",
   "license": "MIT",
   "dependencies": {
-    "css-line-break": "2.0.1"
+    "css-line-break": "2.0.1",
+    "text-segmentation": "^1.0.2"
   }
 }

src/core/features.ts

@@ -1,4 +1,4 @@
-import {fromCodePoint, toCodePoints} from 'css-line-break';
+import {fromCodePoint, toCodePoints} from 'text-segmentation';
 
 const testRangeBounds = (document: Document) => {
     const TEST_HEIGHT = 123;

src/css/layout/text.ts

@@ -1,6 +1,5 @@
-import {OVERFLOW_WRAP} from '../property-descriptors/overflow-wrap';
 import {CSSParsedDeclaration} from '../index';
-import {fromCodePoint, LineBreaker, toCodePoints} from 'css-line-break';
+import {splitGraphemes} from 'text-segmentation';
 import {Bounds, parseBounds} from './bounds';
 import {FEATURES} from '../../core/features';
 import {Context} from '../../core/context';
@@ -21,7 +20,7 @@ export const parseTextBounds = (
     styles: CSSParsedDeclaration,
     node: Text
 ): TextBounds[] => {
-    const textList = breakText(value, styles);
+    const textList = splitGraphemes(value);
     const textBounds: TextBounds[] = [];
     let offset = 0;
     textList.forEach((text) => {
@@ -84,45 +83,3 @@ const createRange = (node: Text, offset: number, length: number): Range => {
 const getRangeBounds = (context: Context, node: Text, offset: number, length: number): Bounds => {
     return Bounds.fromClientRect(context, createRange(node, offset, length).getBoundingClientRect());
 };
-
-const breakText = (value: string, styles: CSSParsedDeclaration): string[] => {
-    return styles.letterSpacing !== 0 ? toCodePoints(value).map((i) => fromCodePoint(i)) : breakWords(value, styles);
-};
-
-// https://drafts.csswg.org/css-text/#word-separator
-const wordSeparators = [0x0020, 0x00a0, 0x1361, 0x10100, 0x10101, 0x1039, 0x1091];
-
-const breakWords = (str: string, styles: CSSParsedDeclaration): string[] => {
-    const breaker = LineBreaker(str, {
-        lineBreak: styles.lineBreak,
-        wordBreak: styles.overflowWrap === OVERFLOW_WRAP.BREAK_WORD ? 'break-word' : styles.wordBreak
-    });
-
-    const words = [];
-    let bk;
-
-    while (!(bk = breaker.next()).done) {
-        if (bk.value) {
-            const value = bk.value.slice();
-            const codePoints = toCodePoints(value);
-            let word = '';
-            codePoints.forEach((codePoint) => {
-                if (wordSeparators.indexOf(codePoint) === -1) {
-                    word += fromCodePoint(codePoint);
-                } else {
-                    if (word.length) {
-                        words.push(word);
-                    }
-                    words.push(fromCodePoint(codePoint));
-                    word = '';
-                }
-            });
-
-            if (word.length) {
-                words.push(word);
-            }
-        }
-    }
-
-    return words;
-};

src/css/syntax/tokenizer.ts

@@ -1,6 +1,6 @@
 // https://www.w3.org/TR/css-syntax-3
 
-import {fromCodePoint, toCodePoints} from 'css-line-break';
+import {fromCodePoint, toCodePoints} from 'text-segmentation';
 
 export enum TokenType {
     STRING_TOKEN,

src/css/types/functions/counter.ts

@@ -1,5 +1,5 @@
 import {LIST_STYLE_TYPE} from '../../property-descriptors/list-style-type';
-import {fromCodePoint} from 'css-line-break';
+import {fromCodePoint} from 'text-segmentation';
 import {contains} from '../../../core/bitwise';
 import {CSSParsedCounterDeclaration} from '../../index';
 

src/render/canvas/canvas-renderer.ts

@@ -19,7 +19,7 @@ import {
 import {calculateBackgroundRendering, getBackgroundValueForIndex} from '../background';
 import {isDimensionToken} from '../../css/syntax/parser';
 import {TextBounds} from '../../css/layout/text';
-import {fromCodePoint, toCodePoints} from 'css-line-break';
+import {fromCodePoint, toCodePoints} from 'text-segmentation';
 import {ImageElementContainer} from '../../dom/replaced-elements/image-element-container';
 import {contentBox} from '../box-sizing';
 import {CanvasElementContainer} from '../../dom/replaced-elements/canvas-element-container';