DEV Community

Jeremy Davis
Jeremy Davis

Posted on • Originally published at blog.jermdavis.dev on

1

What do you mean it’s not editable any more?

So while battling the jetlag that hit me pretty hard getting back from Sitecore Symposium, this issue came popped up in my bug queue last week. QA reported that a certain component on a test page was not allowing one field to be edited. It had worked in the past, but the behaviour suddenly changed so that one field no longer got the “you can edit this” overlay in Experience Editor. It took me longer than it should have to work out why…

The issue:

Turning on “show controls” in Experience Editor showed the following:

The page’s other fields are all editable, but the “This bit of text…” field isn’t. And oddly an empty edit control has appeared above it. Looking at the view behind the control there are two editable fields:

But in the markup you can see in the browser, there seems to be an editable field with nothing in it, followed by the text for our field, followed by an empty element:

What’s going on there?

Bitten by the HTML specification!

Well the answer is pretty simple really: <p/> elements have rules about what they’re allowed to contain. The rules say you can put “phrasing content” inside a paragraph. And those rules exclude other <p/> elements, or <div/>s.

The content for the broken field was rich text, and looking at the HTML it contained:

There was another <p/> in the markup…

So that’s what was breaking the editing behaviour. The Glass editing control was within a <p/>, but the field contained a <p/>. So the browser was seeing invalid HTML, and closing the first (view) <p/> before it started on the <p/> from the field’s content. That meant Sitecore’s Experience Editor markup was being applied to the first (empty) element, and not to the second one that the browser created – which had the field’s text in it…

So…

The key thing to remember is: When you’re doing the HTML for your views, don’t put <p/> element around a rich text field, unless you’re doing something to restict the rich text to elements that are valid inside a <p/>...

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay