@toptal/picasso-rich-text-editor 14.0.9-alpha-fx-null-revert-tabs-974b03420.3 → 14.0.10-alpha-FX-NULL-fix-checkbox-class-b75438bf7.0

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.9-alpha-fx-null-revert-tabs-974b03420.3+974b03420",
+  "version": "14.0.10-alpha-FX-NULL-fix-checkbox-class-b75438bf7.0+b75438bf7",
   "description": "Picasso rich text editor",
   "author": "Toptal",
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-rich-text-editor#readme",
@@ -41,21 +41,21 @@
     "@emoji-mart/react": "^1.1.1",
     "@lexical/html": "0.11.2",
     "@lexical/react": "0.11.2",
-    "@toptal/picasso-button": "3.0.8-alpha-fx-null-revert-tabs-974b03420.7+974b03420",
-    "@toptal/picasso-container": "2.0.1-alpha-fx-null-revert-tabs-974b03420.46+974b03420",
-    "@toptal/picasso-file-input": "2.0.9-alpha-fx-null-revert-tabs-974b03420.3+974b03420",
-    "@toptal/picasso-form": "4.1.4-alpha-fx-null-revert-tabs-974b03420.7+974b03420",
-    "@toptal/picasso-icons": "1.6.1-alpha-fx-null-revert-tabs-974b03420.32+974b03420",
-    "@toptal/picasso-image": "1.0.4-alpha-fx-null-revert-tabs-974b03420.125+974b03420",
-    "@toptal/picasso-input": "3.0.8-alpha-fx-null-revert-tabs-974b03420.7+974b03420",
-    "@toptal/picasso-input-adornment": "2.0.2-alpha-fx-null-revert-tabs-974b03420.32+974b03420",
-    "@toptal/picasso-link": "2.0.1-alpha-fx-null-revert-tabs-974b03420.46+974b03420",
-    "@toptal/picasso-list": "3.0.2-alpha-fx-null-revert-tabs-974b03420.32+974b03420",
-    "@toptal/picasso-modal": "3.0.8-alpha-fx-null-revert-tabs-974b03420.7+974b03420",
-    "@toptal/picasso-outlined-input": "2.0.8-alpha-fx-null-revert-tabs-974b03420.7+974b03420",
-    "@toptal/picasso-select": "2.0.8-alpha-fx-null-revert-tabs-974b03420.7+974b03420",
-    "@toptal/picasso-typography": "3.0.1-alpha-fx-null-revert-tabs-974b03420.46+974b03420",
-    "@toptal/picasso-utils": "1.0.4-alpha-fx-null-revert-tabs-974b03420.125+974b03420",
+    "@toptal/picasso-button": "3.0.8-alpha-FX-NULL-fix-checkbox-class-b75438bf7.9+b75438bf7",
+    "@toptal/picasso-container": "2.0.1-alpha-FX-NULL-fix-checkbox-class-b75438bf7.48+b75438bf7",
+    "@toptal/picasso-file-input": "2.0.9-alpha-FX-NULL-fix-checkbox-class-b75438bf7.5+b75438bf7",
+    "@toptal/picasso-form": "4.1.4-alpha-FX-NULL-fix-checkbox-class-b75438bf7.9+b75438bf7",
+    "@toptal/picasso-icons": "1.6.1-alpha-FX-NULL-fix-checkbox-class-b75438bf7.34+b75438bf7",
+    "@toptal/picasso-image": "1.0.4-alpha-FX-NULL-fix-checkbox-class-b75438bf7.127+b75438bf7",
+    "@toptal/picasso-input": "3.0.8-alpha-FX-NULL-fix-checkbox-class-b75438bf7.9+b75438bf7",
+    "@toptal/picasso-input-adornment": "2.0.2-alpha-FX-NULL-fix-checkbox-class-b75438bf7.34+b75438bf7",
+    "@toptal/picasso-link": "2.0.1-alpha-FX-NULL-fix-checkbox-class-b75438bf7.48+b75438bf7",
+    "@toptal/picasso-list": "3.0.2-alpha-FX-NULL-fix-checkbox-class-b75438bf7.34+b75438bf7",
+    "@toptal/picasso-modal": "3.0.8-alpha-FX-NULL-fix-checkbox-class-b75438bf7.9+b75438bf7",
+    "@toptal/picasso-outlined-input": "2.0.8-alpha-FX-NULL-fix-checkbox-class-b75438bf7.9+b75438bf7",
+    "@toptal/picasso-select": "2.0.8-alpha-FX-NULL-fix-checkbox-class-b75438bf7.9+b75438bf7",
+    "@toptal/picasso-typography": "3.0.1-alpha-FX-NULL-fix-checkbox-class-b75438bf7.48+b75438bf7",
+    "@toptal/picasso-utils": "1.0.4-alpha-FX-NULL-fix-checkbox-class-b75438bf7.127+b75438bf7",
     "classnames": "^2.5.1",
     "emoji-mart": "^5.5.2",
     "hast-to-hyperscript": "^9.0.1",
@@ -68,8 +68,8 @@
   "devDependencies": {
     "@material-ui/core": "4.12.4",
     "@testing-library/react-hooks": "^8.0.1",
-    "@toptal/picasso-tailwind-merge": "1.2.1-alpha-fx-null-revert-tabs-974b03420.46+974b03420",
-    "@toptal/picasso-test-utils": "1.1.2-alpha-fx-null-revert-tabs-974b03420.125+974b03420",
+    "@toptal/picasso-tailwind-merge": "1.2.1-alpha-FX-NULL-fix-checkbox-class-b75438bf7.48+b75438bf7",
+    "@toptal/picasso-test-utils": "1.1.2-alpha-FX-NULL-fix-checkbox-class-b75438bf7.127+b75438bf7",
     "@types/classnames": "^2.3.1"
   },
   "sideEffects": false,
@@ -85,5 +85,5 @@
     "eager.js",
     "eager.d.ts"
   ],
-  "gitHead": "974b0342056f81ccdbaef9c8d9054ac18172c3d6"
+  "gitHead": "b75438bf79ceee27cb29b794511620f600b62864"
 }

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,