@@ -49,6 +49,8 @@ const ELEMENT_TYPES: IJsonToHtmlElementTags = {
49
49
return `<iframe${ attrs } ></iframe>`
50
50
} ,
51
51
p : ( attrs : any , child : any ) => {
52
+ if ( child . includes ( "<figure" ) )
53
+ return `<div${ attrs } style="overflow: hidden"><span>${ child } </span></div>`
52
54
return `<p${ attrs } >${ child } </p>`
53
55
} ,
54
56
ol : ( attrs : any , child : any ) => {
@@ -118,6 +120,53 @@ const ELEMENT_TYPES: IJsonToHtmlElementTags = {
118
120
} else if ( extraAttrs ?. displayType === 'asset' ) {
119
121
return `<figure${ attrs } >${ child } </figure>`
120
122
}
123
+
124
+ else if ( extraAttrs ?. displayType === "display" ) {
125
+ const anchor = jsonBlock ?. [ "attrs" ] ?. [ "link" ] ;
126
+
127
+ const caption = jsonBlock ?. [ "attrs" ] ?. [ "asset-caption" ] ;
128
+ const position = jsonBlock ?. [ "attrs" ] ?. [ "position" ] ;
129
+ const inline = jsonBlock ?. [ "attrs" ] ?. [ "inline" ]
130
+ let figureAttrs = ""
131
+ const figureStyles = {
132
+ margin : "0" ,
133
+ } ;
134
+ attrs = ` src="${ jsonBlock ?. [ "attrs" ] ?. [ "asset-link" ] } "` + attrs ;
135
+ let img = `<img${ attrs } />` ;
136
+
137
+ if ( anchor ) {
138
+ const target = jsonBlock ?. [ "attrs" ] ?. [ "target" ] ;
139
+ let anchorAttrs = `href="${ anchor } "` ;
140
+ if ( target ) {
141
+ anchorAttrs = `${ anchorAttrs } target="${ target } "` ;
142
+ }
143
+ img = `<a ${ anchorAttrs } >${ img } </a>` ;
144
+ }
145
+
146
+ if ( caption || ( position && position !== "none" ) ) {
147
+ const figcaption = caption
148
+ ? `<figcaption style="text-align:center">${ caption } </figcaption>`
149
+ : "" ;
150
+
151
+ if ( inline && position !== "right" && position !== "left" ) {
152
+ figureStyles [ "display" ] = "inline-block" ;
153
+ }
154
+ if ( position && position !== "none" ) {
155
+ figureStyles [ inline ? "float" : "text-align" ] = position ;
156
+ }
157
+
158
+ if ( figcaption ) {
159
+ img = `<div style="display: inline-block">${ img } ${ figcaption } </div>` ;
160
+ }
161
+ }
162
+ if ( ! isEmpty ( figureStyles ) ) {
163
+ figureAttrs = ` style="${ getStyleStringFromObject ( figureStyles ) } "`
164
+ }
165
+ if ( inline && ! caption && ( ! position || position === 'none' ) ) {
166
+ return img
167
+ }
168
+ return `<figure${ figureAttrs ? figureAttrs : "" } >${ img } </figure>` ;
169
+ }
121
170
return `<span${ attrs } >${ child } </span>`
122
171
} ,
123
172
inlineCode : ( attrs : any , child : any ) => {
@@ -362,7 +411,9 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string
362
411
delete attrsJson [ 'content-type-uid' ]
363
412
attrsJson [ 'sys-style-type' ] = allattrs [ 'display-type' ]
364
413
delete attrsJson [ 'display-type' ]
365
- } else if ( attrsJson [ 'type' ] === "asset" ) {
414
+ }
415
+
416
+ else if ( attrsJson [ 'type' ] === "asset" ) {
366
417
attrsJson [ 'data-sys-asset-filelink' ] = allattrs [ 'asset-link' ]
367
418
delete attrsJson [ 'asset-link' ]
368
419
attrsJson [ 'data-sys-asset-uid' ] = allattrs [ 'asset-uid' ]
@@ -399,7 +450,16 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string
399
450
if ( ! attrsJson [ 'sys-style-type' ] ) {
400
451
attrsJson [ 'sys-style-type' ] = String ( allattrs [ 'asset-type' ] ) . indexOf ( 'image' ) > - 1 ? 'display' : 'download'
401
452
}
402
-
453
+ if ( attrsJson ?. [ "display-type" ] === "display" ) {
454
+ const styleObj = jsonValue ?. [ "attrs" ] ?. [ "style" ] ?? { } ;
455
+ if ( ! styleObj [ "width" ] ) {
456
+ styleObj [ "width" ] = "auto" ;
457
+ }
458
+ delete styleObj [ "float" ] ;
459
+ // (attrsJson["style"] && typeof attrsJson["style"] === 'string')
460
+ // ? (attrsJson["style"] += getStyleStringFromObject(styleObj)) :
461
+ ( attrsJson [ "style" ] = getStyleStringFromObject ( styleObj ) ) ;
462
+ }
403
463
delete attrsJson [ 'display-type' ]
404
464
}
405
465
}
@@ -468,3 +528,10 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string
468
528
469
529
return children
470
530
}
531
+
532
+
533
+ function getStyleStringFromObject ( styleObj : { [ key : string ] : string } ) {
534
+ return Object . keys ( styleObj )
535
+ . map ( ( key ) => `${ key } : ${ styleObj [ key ] } ` )
536
+ . join ( "; " ) ;
537
+ }
0 commit comments