docs: Add example to illustrate styling the editable.

Author: jenstroeger

examples/index.css

@@ -356,6 +356,29 @@ article {
   color: #49a345;
 }
 
+/* ==========================================================================
+   Styling
+   ========================================================================== */
+
+.example-style-default {
+}
+.example-style-default:focus {
+}
+
+.example-style-dark {
+    padding: 0.5em;
+    color: white;
+    background-color: darkgrey;
+    border: 1px solid darkgrey;
+    border-radius: 4px;
+    caret-color: yellow;
+}
+.example-style-dark:focus {
+    outline: none;
+    background-color: dimgrey;
+    box-shadow: 0px 0px 8px black;
+}
+
 /* ==========================================================================
    iFrame
    ========================================================================== */

examples/index.html

@@ -66,6 +66,33 @@ <h3>HTML</h3>
     </section>
 
 
+    <!-- Styling -->
+
+    <section class="example-section space-after">
+      <div class="section-content">
+        <h2 class="example-title">Styling</h2>
+
+        <div class="styling-example example-sheet">
+          <p class="example-style-default">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
+          </p>
+        </div>
+
+        <div class="code-example">
+          <p>Style the editable element using CSS to match your page’s design.</p>
+          <p>
+            <label>For example:</label>
+            <select name="editable-styles">
+              <option value="default">Default</option>
+              <option value="dark">Dark mode</option>
+            </select>
+          </p>
+        </div>
+
+      </div>
+    </section>
+
+
     <!-- Highlight -->
 
     <section class="example-section space-after">

examples/index.js

@@ -19,13 +19,24 @@ $(() => {
   editable.add('.formatting-example p')
   setupTooltip()
 
+  editable.add('.styling-example p')
+
   const secondExample = document.querySelector('.formatting-example p')
   updateCode(secondExample)
 
   editable.on('change', (elem) => {
     if (elem === secondExample) updateCode(elem)
   })
 
+  // Styling
+  // -------
+
+  $('select[name="editable-styles"]').on('change', function () {
+    $('.styling-example p')
+      .removeClass('example-style-default example-style-dark')
+      .addClass('example-style-' + $(this).val())
+  })
+
   // IFrame
   // ------