Use css-line-break for text breaks

Author: Tomáš Vojtášek

package.json

@@ -54,8 +54,8 @@
  "react-dom": "^16.8.6"
  },
  "dependencies": {
- "@craigmorton/linebreak": "^0.4.5",
  "css-layout": "^1.1.1",
+ "css-line-break": "^1.1.1",
  "invariant": "^2.2.4",
  "multi-key-cache": "^1.0.2",
  "prop-types": "^15.6.1",

src/measureText.js

@@ -1,5 +1,6 @@
-import LineBreaker from '@craigmorton/linebreak'
+import { LineBreaker } from 'css-line-break'
 import MultiKeyCache from 'multi-key-cache'
+
 import { isFontLoaded } from './FontUtils'
 
 const canvas = document.createElement('canvas')
@@ -45,9 +46,7 @@ export default function measureText(
  let lastMeasuredWidth
  let tryLine
  let currentLine
- let breaker
  let bk
- let lastBreak
 
  ctx.font = `${fontFace.attributes.style} normal ${
  fontFace.attributes.weight
@@ -65,15 +64,17 @@ export default function measureText(
  // Break into multiple lines.
  measuredSize.width = width
  currentLine = ''
- breaker = new LineBreaker(text)
+ const breaker = LineBreaker(text, {
+ lineBreak: 'strict',
+ wordBreak: 'normal'
+ })
 
  // eslint-disable-next-line no-cond-assign
- while ((bk = breaker.nextBreak())) {
- const word = text.slice(lastBreak ? lastBreak.position : 0, bk.position)
-
+ while (!(bk = breaker.next()).done) {
+ const word = bk.value.slice()
  tryLine = currentLine + word
  textMetrics = ctx.measureText(tryLine)
- if (textMetrics.width > width || (lastBreak && lastBreak.required)) {
+ if (textMetrics.width > width) {
  measuredSize.height += lineHeight
  measuredSize.lines.push({
  width: lastMeasuredWidth,
@@ -85,8 +86,6 @@ export default function measureText(
  currentLine = tryLine
  lastMeasuredWidth = textMetrics.width
  }
-
- lastBreak = bk
  }
 
  currentLine = currentLine.trim()

stories/Text.jsx

@@ -31,11 +31,23 @@ storiesOf('Text', module).add('hello-world', () => {
  }}>
  Hello World 2
  </Text>
+ <Text
+ style={{
+ top: 50,
+ left: 0,
+ color: 'red',
+ width: 20,
+ height: 100
+ }}>
+ Long text in with small width paramter
+ </Text>
 
  <Image
  style={{
- top: 50,
- left: 0
+ top: 200,
+ left: 0,
+ width: 200,
+ height: 200
  }}
  src="https://i.imgur.com/U1p9DSP.png"
  />

yarn.lock

@@ -928,13 +928,6 @@
  lodash "^4.17.11"
  to-fast-properties "^2.0.0"
 
-"@craigmorton/linebreak@^0.4.5":
- version "0.4.5"
- resolved "https://registry.yarnpkg.com/@craigmorton/linebreak/-/linebreak-0.4.5.tgz#b3a9787844bc5ad954eed23c778ba56769e78d2f"
- dependencies:
- base64-js "0.0.8"
- unicode-trie "^0.3.0"
-
 "@emotion/cache@^10.0.9":
  version "10.0.9"
  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.9.tgz#e0c7b7a289f7530edcfad4dcf3858bd2e5700a6f"
@@ -2301,9 +2294,10 @@ balanced-match@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
 
-base64-js@0.0.8:
- version "0.0.8"
- resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-0.0.8.tgz#1101e9544f4a76b1bc3b26d452ca96d7a35e7978"
+base64-arraybuffer@^0.2.0:
+ version "0.2.0"
+ resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz#4b944fac0191aa5907afe2d8c999ccc57ce80f45"
+ integrity sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==
 
 base64-js@^1.0.2:
  version "1.3.0"
@@ -3092,6 +3086,13 @@ css-layout@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/css-layout/-/css-layout-1.1.1.tgz#ada5bb8c901e475d41043a88e034ade54d939392"
 
+css-line-break@^1.1.1:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-1.1.1.tgz#d5e9bdd297840099eb0503c7310fd34927a026ef"
+ integrity sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==
+ dependencies:
+ base64-arraybuffer "^0.2.0"
+
 css-loader@^2.1.0:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-2.1.1.tgz#d8254f72e412bb2238bb44dd674ffbef497333ea"
@@ -6116,10 +6117,6 @@ p-try@^2.0.0:
  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
-pako@^0.2.5:
- version "0.2.9"
- resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
-
 pako@~1.0.5:
  version "1.0.6"
  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
@@ -7887,10 +7884,6 @@ tiny-emitter@^2.0.0:
  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
-tiny-inflate@^1.0.0:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.2.tgz#93d9decffc8805bd57eae4310f0b745e9b6fb3a7"
-
 tiny-invariant@^1.0.2:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.4.tgz#346b5415fd93cb696b0c4e8a96697ff590f92463"
@@ -8017,13 +8010,6 @@ unicode-property-aliases-ecmascript@^1.0.4:
  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.5.tgz#a9cc6cc7ce63a0a3023fc99e341b94431d405a57"
  integrity sha512-L5RAqCfXqAwR3RriF8pM0lU0w4Ryf/GgzONwi6KnL1taJQa7x1TCxdJnILX59WIGOwR57IVxn7Nej0fz1Ny6fw==
 
-unicode-trie@^0.3.0:
- version "0.3.1"
- resolved "https://registry.yarnpkg.com/unicode-trie/-/unicode-trie-0.3.1.tgz#d671dddd89101a08bac37b6a5161010602052085"
- dependencies:
- pako "^0.2.5"
- tiny-inflate "^1.0.0"
-
 unified@^7.1.0:
  version "7.1.0"
  resolved "https://registry.yarnpkg.com/unified/-/unified-7.1.0.tgz#5032f1c1ee3364bd09da12e27fdd4a7553c7be13"