Improve mobile editing

assets/editor/main.html

@@ -5,12 +5,16 @@
 
 {{define "content"}}
 <script>
+    document.body.classList.add('edit-mode');
     if (sessionStorage.getItem('editor-wide') === '1') document.body.classList.add('editor-wide');
 </script>
 <form id="edit-form" class="edit-form" method="POST" action="{{.PostURL}}">
     {{if ge .SectionIndex 0}}<input type="hidden" name="section" value="{{.SectionIndex}}">{{end}}
     {{if ge .InsertBefore 0}}<input type="hidden" name="insert_before" value="{{.InsertBefore}}">{{end}}
     <div class="editor-toolbar">
+        <button type="button" class="btn btn-tool" data-action="undo" title="Undo">↶</button>
+        <button type="button" class="btn btn-tool" data-action="redo" title="Redo">↷</button>
+        <span class="toolbar-sep"></span>
         <button type="button" class="btn btn-tool" data-action="bold"      data-key="B" title="Bold (B)">**</button>
         <button type="button" class="btn btn-tool" data-action="italic"    data-key="I" title="Italic (I)">*</button>
         <span class="dropdown">
@@ -74,7 +78,7 @@
     <div id="editor" class="editor-cm"></div>
     <textarea name="content" id="editor-content" hidden>{{.RawContent}}</textarea>
 </form>
-<script src="/_/editor/vendor/codemirror.bundle.js"></script>
+<script src="/_/editor/vendor/codemirror.bundle.js?v={{editorBundleVersion}}"></script>
 <script src="/_/editor/tables.js"></script>
 <script src="/_/editor/dates.js"></script>
 <script src="/_/editor/movie.js"></script>

assets/editor/main.js

@@ -142,6 +142,8 @@
 
     var actions = {
         save:           function () { form.requestSubmit(); },
+        undo:           function () { CM.undo(view); view.focus(); },
+        redo:           function () { CM.redo(view); view.focus(); },
         bold:           function () { wrap('**', '**', 'bold text'); },
         italic:         function () { wrap('*', '*', 'italic text'); },
         h1:             function () { linePrefix('# '); },
@@ -214,5 +216,24 @@
 
     // --- Dropdowns ---
 
-    document.querySelectorAll('.dropdown-toggle').forEach(wireDropdown);
+    // The toolbar scrolls horizontally on mobile, which makes it an overflow
+    // container that would clip its absolutely-positioned dropdown menus. Pin an
+    // open menu to the viewport under its trigger so it escapes the clip.
+    var toolbar = document.querySelector('.editor-toolbar');
+    function pinMenu(toggle, menu) {
+        if (!menu.classList.contains('is-open')) return;
+        var r = toggle.getBoundingClientRect();
+        menu.style.position = 'fixed';
+        menu.style.top = r.bottom + 'px';
+        var left = Math.min(r.left, document.documentElement.clientWidth - menu.offsetWidth - 4);
+        menu.style.left = Math.max(4, left) + 'px';
+    }
+
+    document.querySelectorAll('.dropdown-toggle').forEach(function (toggle) {
+        wireDropdown(toggle);
+        var menu = toggle.parentElement.querySelector('.dropdown-menu');
+        if (!menu || !toolbar || !toolbar.contains(toggle)) return;
+        // Runs after wireDropdown's own click handler has toggled is-open.
+        toggle.addEventListener('click', function () { pinMenu(toggle, menu); });
+    });
 })();