Viewing

All EasyEdit components are wrapped around a div with the class easy-edit-wrapper in it. If the component's allowEdit prop is set to false, then class easy-edit-not-allowed is added to the wrapper div which just changes the mouse cursor to 🚫 (not allowed). In case of hovering over it, the class easy-edit-hover-on is appended to it which changes the cursor to 👆 (pointer) and applies an italic style to the placeholder/value.

<!-- EasyEdit HTML in View mode -->
<div class="easy-edit-wrapper">Click to edit</div>
​
<!-- EasyEdit HTML in View mode while hovering over it -->
<div class="easy-edit-hover-on easy-edit-wrapper">Click to edit</div>
​
<!-- EasyEdit HTML in View mode when allowEdit is set to false -->
<div class="easy-edit-not-allowed easy-edit-wrapper">Can't edit me</div>

Editing

Things become a bit more complicated in edit mode. As before, all EasyEdit components are wrapped around a div with the class easy-edit-inline-wrapper in it but this time, we have a few more containers.

<!-- EasyEdit HTML in Edit mode -->
<div class="easy-edit-inline-wrapper" tabindex="0">
  <div class="easy-edit-component-wrapper">
    <input type="text" placeholder="Click to edit" autocomplete="off" value="">
  </div>
  <div class="easy-edit-button-wrapper">
    <button class="easy-edit-button" name="save">Save</button>
    <button class="easy-edit-button" name="cancel">Cancel</button>
  </div>
  <div class="easy-edit-instructions">Click save to see what happens</div>
  <div class="easy-edit-validation-error">What just happened?</div>
</div>

Component

Each component is wrapped around a div with the class easy-edit-component-wrapper.

Instructions

If provided, a div with the class easy-edit-instructions will be generated and placed within the main container. In not then no div container will be generated for instructions

Buttons

Both "Save" and "Cancel" buttons have a default class added to them which is easy-edit-button.

Validating

If validation fails on an EasyEdit component, then a validation message is shown back to the user which is wrapped around a div with the class easy-edit-validation-error. By default, the styling that's applied to the component just changes the font color to red.