File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -44,6 +44,7 @@ Visual Editing works by:
4444 - [ Click-to-edit overlays not appearing] ( #click-to-edit-overlays-not-appearing )
4545 - [ Navigation not syncing with Web Previews plugin] ( #navigation-not-syncing-with-web-previews-plugin )
4646 - [ StructuredText blocks not clickable] ( #structuredtext-blocks-not-clickable )
47+ - [ Layout issues caused by stega encoding] ( #layout-issues-caused-by-stega-encoding )
4748
4849<!-- END doctoc generated TOC please keep comment here to allow auto update -->
4950
@@ -649,3 +650,21 @@ These utilities are useful when you need to:
649650 < / div>
650651 )}
651652 ```
653+
654+ ### Layout issues caused by stega encoding
655+
656+ ** Problem** : The invisible zero-width characters can cause unexpected letter-spacing or text breaking out of containers.
657+
658+ ** Solutions** :
659+ 1 . Use the ` stripStega ` prop to remove stega encoding after processing:
660+ ``` jsx
661+ < ContentLink stripStega= {true } / >
662+ ```
663+
664+ 2 . Or use CSS to fix the letter-spacing issue:
665+ ``` css
666+ [data-datocms-contains-stega ] {
667+ letter-spacing : 0 !important ;
668+ }
669+ ```
670+ This attribute is automatically added to elements with stega-encoded content when ` stripStega ` is ` false ` (the default).
You can’t perform that action at this time.
0 commit comments