When adding a block to HTML editor it’s rendered as a DIV element with name of the block. After a while it could be hard to determinate from where the block was referenced. I improved block rendering by adding “Edit” link to the block element.
HTML Editor block

In current Episerver version there is only a name of a block:
block without edit link
With the improved block editing there is additional “edit” link:
block with edit link

Implementation

To add a link I had to extend ContentFragment class and override GetEditFormat method. This method is responsible for rendering block when editing HTML property in edit mode. In extended version, after block name, there is an anchor element with information about ContentLink.

CustomContentFragment is created by extended version of ContentFragmentFactory (CustomContentFragmentFactory). Factory is replacing original ContentFragmentFactory using interceptor.

I also had to add custom Xhtml EditorDescriptor (CustomXhtmlStringEditorDescriptor) and override client editors for On-Page edit mode and Forms Editing mode. EditorDescriptor is also responsible for generating block editing template. Template is used when dropping a block into HTML editor.

Both client editors share same mixin (WithBlockEditMixin) which is responsible for handling block editing.

Below is the demo:
Editing block in Html Editor

Source code is available on GitHub.