@toptal/picasso-rich-text-editor 14.0.8 → 14.0.9

package/dist-package/src/RichText/RichText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichText.d.ts","sourceRoot":"","sources":["../../../src/RichText/RichText.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAGvD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAGtC,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC;;OAEG;IACH,KAAK,EAAE,OAAO,CAAA;CACf;AAED,eAAO,MAAM,QAAQ,4DAKlB,KAAK,gBAeP,CAAA;AAED,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"RichText.d.ts","sourceRoot":"","sources":["../../../src/RichText/RichText.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAIvD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAGtC,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC;;OAEG;IACH,KAAK,EAAE,OAAO,CAAA;CACf;AAED,eAAO,MAAM,QAAQ,4DAKlB,KAAK,gBAeP,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist-package/src/RichText/RichText.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Container } from '@toptal/picasso-container';
+import { twJoin } from '@toptal/picasso-tailwind-merge';
 import useRichText from './hooks/useRichText';
 export const RichText = ({ value, style, className, 'data-testid': dataTestId, }) => {
     const richText = useRichText(value);
-    return (React.createElement(Container, { style: style, "data-testid": dataTestId, className: className, gap: 'xsmall', flex: true, direction: 'column' }, richText));
+    return (React.createElement(Container, { style: style, "data-testid": dataTestId, className: twJoin('break-words', className), gap: 'xsmall', flex: true, direction: 'column' }, richText));
 };
 export default RichText;
 //# sourceMappingURL=RichText.js.map

package/dist-package/src/RichText/RichText.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichText.js","sourceRoot":"","sources":["../../../src/RichText/RichText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAGrD,OAAO,WAAW,MAAM,qBAAqB,CAAA;AAS7C,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,KAAK,EACL,KAAK,EACL,SAAS,EACT,aAAa,EAAE,UAAU,GACnB,EAAE,EAAE;IACV,MAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,CAAC,CAAA;IAEnC,OAAO,CACL,oBAAC,SAAS,IACR,KAAK,EAAE,KAAK,iBACC,UAAU,EACvB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAC,QAAQ,EACZ,IAAI,QACJ,SAAS,EAAC,QAAQ,IAEjB,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAA;AAED,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"RichText.js","sourceRoot":"","sources":["../../../src/RichText/RichText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAGvD,OAAO,WAAW,MAAM,qBAAqB,CAAA;AAS7C,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,KAAK,EACL,KAAK,EACL,SAAS,EACT,aAAa,EAAE,UAAU,GACnB,EAAE,EAAE;IACV,MAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,CAAC,CAAA;IAEnC,OAAO,CACL,oBAAC,SAAS,IACR,KAAK,EAAE,KAAK,iBACC,UAAU,EACvB,SAAS,EAAE,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,EAC3C,GAAG,EAAC,QAAQ,EACZ,IAAI,QACJ,SAAS,EAAC,QAAQ,IAEjB,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-rich-text-editor",
-  "version": "14.0.8",
+  "version": "14.0.9",
   "description": "Picasso rich text editor",
   "author": "Toptal",
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-rich-text-editor#readme",

package/src/RichText/RichText.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { Container } from '@toptal/picasso-container'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
 import type { ASTType } from './types'
 import useRichText from './hooks/useRichText'
@@ -24,7 +25,7 @@ export const RichText = ({
     <Container
       style={style}
       data-testid={dataTestId}
-      className={className}
+      className={twJoin('break-words', className)}
       gap='xsmall'
       flex
       direction='column'

package/src/RichText/story/LongString.example.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { RichText } from '@toptal/picasso-rich-text-editor'
+
+import type { ASTType } from '../types'
+
+const ast: ASTType = {
+  type: 'root',
+  children: [
+    {
+      type: 'element',
+      tagName: 'h3',
+      properties: {},
+      children: [
+        { type: 'text', value: 'Example for line breaks when long string' },
+      ],
+    },
+    {
+      type: 'element',
+      tagName: 'p',
+      properties: {},
+      children: [
+        {
+          type: 'text',
+          value:
+            'PicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichTextPicassoRichText',
+        },
+        { type: 'text', value: ' 💪' },
+      ],
+    },
+  ],
+}
+
+const style = { maxWidth: '500px' }
+
+const Example = () => {
+  return <RichText style={style} value={ast} />
+}
+
+export default Example

package/src/RichText/story/index.jsx

@@ -30,6 +30,10 @@ page
     title: 'AST from BE for normal view',
     takeScreenshot: false,
   })
+  .addExample('RichText/story/LongString.example.tsx', {
+    title: 'Handle long string line breaks',
+    delay: true,
+  })
   .addExample('RichText/story/HTML.example.tsx', {
     title: 'HTML from FE for live-editing preview',
     delay: true,