Closed PowerMyLearningConnect closed 6 years ago
@edeustace @elodszopos I see images doesn't show up in editor when <img>
tag is wrapped by <p>
(if img has parent element) tag
"prompt": "<p>Mr. Lopez divided his garden into equal parts for planting, as shown in the diagram below. The shaded part of the diagram shows where he planted carrots. </p>\n<p> <img src=\"http://media.powermylearning.org/content/assets/userpromptimages/131097063695123689_post.png\" width=\"149\" height=\"104\" /></p>\n<p>Which fraction of the garden is planted with carrots?</p>"
if we take <p>
tag that wrapped around <img>
tag out, image shows up. Is this is how PIE editor expects? Or something you need to fix?
@edeustace I traced the problem to the serialisation logic that we have defined and that is being called in the editable-html constructor.
const v = htmlToValue(props.markup); <- props.markup has the correct value, including the image tag
const mu = valueToHtml(v);
if (mu !== props.markup) {
props.onChange(mu); <- here value gets wiped, img tag disappears
}
For some reason, if the tag is a child of another tag, serialisation process strips it from markup.
@narayankj , this relates to the slatejs core serialization rules. We'd have to look at configuring another schema to suit you, but if you can work around it for now that would be useful.
@edeustace In our data image can be anywhere like in Table, or ul-li etc. We may loose formatting(semantics in some cases) if we try to bring image out of these to root level. I am not sure if we have left with workaround.
ok @narayankj - I'll see if we can update the schema
I've been looking at this issue and I need to get some answers from the slate team about this, because my initial attempts to support your schema are not working.
Fixed in @pie-lib/editable-html@6.2.5 - please do a fresh build.
Images in existing data won’t show up in editor, it renders though (right section). Please let us know if our data needs to be fixed, json can be found @ "..\mc\image.json" in demo repository. http://sbox.powermylearning.org/piedemo/MultipleChoice_Image_Example.html https://github.com/paritoshcardinal/pie_elements_demo/blob/master/mc/image.json
@edeustace @elodszopos @narayankj