Feature Request: Link Live Preview to Content Editor

Raise your hand if you've ever started editing a piece of content, did a live preview on it, found a typo and then tried to click to edit it. Especially with the power of Matrix, you can end up having to wade back through a dozen blocks to see where exactly to edit it.

Live Preview is awesome. I think it's the best blend between keeping content structured and allowing editors to see what it's going to look like.

I'm also not convinced that an "inline" style editor is the way to go but it would be great to be able to click on an element in Live Preview and then having the Craft editing pane jump you to/put focus where it's located there since Live Preview is basically a one-way street right now.

Also, bonus points if you highlighted text and that particular text was then highlighted in the editor, ready to be edited.

The way I envision this working might be that developers could "tag" or wrap a set of tags around the section they wanted to target. Craft would add whatever markup/click triggers would be necessary in Live Preview and then when someone clicks to engage Live Preview, the editor would focus on/blink that particular field/matrix block when someone taps/clicks it... eg:

  <div class="special-section">
      {% livePreview 'matrixField.whichBlock.featuredImage' %}
         <h2>{{ whichBlock.featuredImage.one.getUrl('featuredImage') }}</h2>
     {% endlivePreview %}

      {% livePreview 'matrixField.whichBlock.headlineText' %}
         <h2>{{ whichBlock.headlineText}}</h2>
     {% endlivePreview %}
  </div>

That would also allow devs to opt-in or out of this functionality instead of having Craft try to detect what the right thing to do would be. And it would be backwards compatible with what we already have.

It'd obviously be more complex than that since there'd be multiple blocks on the page and detect/spit out which block that is but without going full blown inline editing as some CMS are going, I think this could be a reasonable middle ground. Personally I think CMS specific markup needs to stay out of the HTML code which is where Twig could really shine here because it would only insert the necessary html/JS triggers in live preview and ignore the output on the front end. Craft has always been very respectable in that sense.

Start by tracing the Live Preview and content editor interaction described in the issue. Define how optional Twig markers would identify fields or Matrix blocks, how a preview click would focus the corresponding editor location, and how selected text could be carried across. Done would include an agreed design for multiple blocks and unchanged front-end output.