initial commitHEADmaster

1 files changed, 1486 insertions, 0 deletions

diff --git a/src/fossil.page.forumpost.js b/src/fossil.page.forumpost.js
new file mode 100644
index 0000000..79f667e
--- /dev/null
+++ b/src/fossil.page.forumpost.js
@@ -0,0 +1,1486 @@
+/**
+   Code for the forum family of pages. Requires fossil.X where X is
+   (copybutton, pikchr, confirmer, attach, tabs, storage).
+*/
+(function(F/*the fossil object*/){
+  "use strict";
+  /* JS code for /forumpost and friends. Requires fossil.dom
+     and can optionally use fossil.pikchr. */
+  const P = F.page, D = F.dom;
+
+  let idCounter = 0;
+
+  /*
+    The problem: when previewing the bottom-most post of a thread, the
+    preview widget's size changes cause the page to scroll
+    unpredictably as the bottom boundary of the page moves. A weird
+    workaround (not invented here) is to add dummy blank padding to
+    the page to allow the preview widget to grow and shrink without
+    (usually) scrolling, but whether it does so really depends on its
+    size.
+
+    We could maybe get the same effect by adding this size as
+    padding-bottom to document.body instead of as a new element.
+  */
+  const dummyPadding = D.div();
+  dummyPadding.style.height = '75em';
+  /* Keep track of ForumPostEditor instances so we can remove this
+     padding when none are active. */
+  dummyPadding.refs = new Set();
+  F.dummyPadding = dummyPadding /* only for debugging */;
+
+  /**
+     A forum post editor widget for new posts and responses.
+  */
+  class ForumPostEditor {
+    /* Options */
+    #opt;
+    /* Dom elements */
+    #e;
+    /* F.Attacher instance */
+    #att;
+    /* Is waiting on a pending remote response. */
+    #isWaiting = false;
+    /* F.TabManager */
+    #tabs;
+    /* Elements to disable while an XHR is pending. */
+    #toDisable = [];
+    /* DOM element of the current active tab. */
+    #activeTab;
+    /* Extra input[type=hidden] fields imported from fossil's
+       static page generation. */
+    #extraFields;
+    /* Persistent draft message object. */
+    #draft;
+
+    /**
+       Options:
+
+       opt.draftKey[string=undefined]: if set then this object's state
+       will be stored in fossil.storage when the relevant input fields
+       lose focus. If old state is found, the form is pre-populated
+       from it. The state is cleared on a discard() or successful
+       submit.
+
+       opt.ondiscard[=function]: if set, a Discard button is added
+       which, when activated, clears the current draft and removes
+       this object's widget from the DOM. After doing so,
+       opt.ondiscard() is called and passed this object. Exceptions
+       thrown by ondiscard() are ignored but may be logged.
+
+       opt.onsubmit[=function]: if set, this function is called
+       immediately after the post has been successfully saved, and
+       passed this object and a JSON-format response object from the
+       save request. It is generally then up to the caller to close()
+       this object and/or redirect to /forumpost/${arguments[1].uuid}.
+
+       opt.onclose[=function]: like opt.onsubmit, this function is
+       called when this.close() is called, and passed no arguments.
+       onclose() is called before the widget is removed from the dom
+       and _does not_ fire if it is not in the DOM.
+
+       opt.hiddenFields: an optional list of input elements to
+       incorporate into the form for requests which request the
+       preview or save the post.
+
+       opt.inReplyTo=uuid: if this is a response to a post, this
+       is the full forum post uuid of the being-replied-to post.
+
+       opt.edit=artifactObject: if this is an edit of an existing
+       post, this is the full JSON-format artifact of the forum post
+       the being-edited post, as returned by /ajax/artifact.json.
+
+       opt.status: optional current status tag value for opt.edit,
+       if known. This is used for pre-selecting a status value.
+
+       opt.hideStash[bool=false]: if true, the "Stash" button does not
+       get added. Intended for use with /forumnew.
+    */
+    constructor(opt){
+      opt = this.#opt = F.nu({
+        draftKey: undefined,
+        hideStash: false
+      }, opt);
+      opt.isNewThread = !opt.inReplyTo && !opt.edit;
+      if( opt.draftKey ){
+        this.#draft = F.nu(F.storage.getJSON(opt.draftKey, {}));
+      }
+      const e = this.#e = F.nu({
+        mimetype: F.nu(),
+        button: F.nu()
+      });
+      //console.debug("Setting up FPE opt =",opt);
+      const wrapper = e.widget = D.addClass(D.div(), 'ForumPostEditor');
+      D.clearElement(wrapper);
+
+      if( !opt.inReplyTo ){
+        /* Title... */
+        e.titleBar = D.addClass(D.div(),'titlebar');
+        e.title = D.attr(
+          D.addClass(D.input('text'), 'title'),
+          'placeholder',
+          'Thread title (required)'
+        );
+        e.title.setAttribute('maxlength', 125);
+        e.titleBar.append(
+          D.append(D.span(), "Title:"),
+          e.title
+        );
+        if( this.#draft ){
+          e.title.addEventListener('blur', ()=>{
+            this.#draft.title = e.title.value;
+            this.#storeDraft();
+          });
+          e.title.value = this.#draft.title || opt.edit?.H || '';
+        }else if( opt.edit?.H ){
+          e.title.value = opt.edit.H;
+        }
+        wrapper.append(e.titleBar);
+      }
+
+      { /* Mimetype... */
+        e.mimetype.wrapper = D.addClass(D.div(), 'mimetype-wrapper');
+        const sel = e.mimetype.select = D.addClass(D.select(), 'mimetype-select');
+        sel.setAttribute('title', 'Markup format for this post.');
+        this.#toDisable.push(sel);
+        let i = 0;
+        D.option(sel, '', '- Markup format -').disabled = true;
+        for(const [k,v] of Object.entries({
+          'text/x-markdown': 'Markdown',
+          'text/x-fossil-wiki': 'Fossil Wiki',
+          'text/plain': 'Plain text'
+        })) {
+          D.option(sel, k, v);
+        }
+        sel.value = opt.mimetype
+          || this.#draft?.mimetype
+          || F.storage.get('forum-mimetype', sel.options[1].value);
+        sel.addEventListener('change',ev=>{
+          if( this.#draft && this.#draft.mimetype!==ev.target.value ){
+            this.#draft.mimetype = ev.target.value;
+            this.#storeDraft();
+          }
+          F.storage.set('forum-mimetype', ev.target.value);
+        });
+        e.mimetype.wrapper.append(sel);
+      }
+
+      e.buttons = D.addClass(D.div(), 'buttons');
+      { /* Preview/submit buttons... */
+        e.button.preview = D.attr(
+          D.button("Preview", e=>this.#preview()),
+          'title',
+          'Preview your edits.'
+        );
+        e.button.submit = D.attr(
+          D.button("Post as "+F.user.name),
+          'title',
+          'Save any edits to the server. Not permitted until Preview has been used.'
+        );
+        if( this.#draft && !opt.hideStash ){
+          e.button.stash = D.attr(
+            D.button(
+              "Stash", e=>this.close()
+              /* This could be called Close, but that would semantically
+                 collide with the Close [this post] button. All "Stash"
+                 does is close the widget. */
+            ),
+            'title', "Close this editor and stash any edits locally."
+          );
+        }
+        if( opt.ondiscard instanceof Function ){
+          e.button.discard = D.attr(
+            D.button('Discard'),
+            'title',
+            'Close the editor and discard all local edits.'
+          );
+        }
+        if( 1 ){
+          F.confirmer(e.button.submit, {
+            confirmText: "Confirm submit...",
+            onconfirm: ()=>this.#submit()
+          });
+          if( e.button.discard ){
+            F.confirmer(e.button.discard, {
+              confirmText: "Really discard?",
+              onconfirm: ()=>this.discard()
+            });
+          }
+        }else{
+          e.button.submit.addEventListener('click', ()=>this.#submit());
+          if( e.button.discard ){
+            e.button.submit.addEventListener('click', ()=>this.discard());
+          }
+        }
+        e.button.submit.setAttribute('disabled', '');
+        wrapper.append(e.buttons);
+
+        e.error = D.addClass(D.div(), 'error', 'hidden');
+        wrapper.append(e.error);
+        e.error.addEventListener('dblclick',()=>this.reportError());
+      }
+
+      const idPrefix = 'FormPostEditor'+(++idCounter)/* TabManager requires IDs */;
+      { /* Main tabs... */
+        e.tabs = D.attr(
+          D.addClass(D.div(), 'tab-container'),
+          'id', idPrefix+'-tabs'
+        );
+        this.#tabs = new F.TabManager(e.tabs);
+        this.#tabs.addEventListener('before-switch-to', (ev)=>{
+          //console.debug("Switching to tab",ev.detail);
+          switch( (this.#activeTab = ev.detail) ){
+            case e.preview:
+              this.#e.button.preview.click();
+              break;
+            case e.help:
+              if( e.help.$needsInit ){
+                delete e.help.$needsInit;
+                this.#initHelpTab();
+              }
+              break;
+            case e.tabAttach:
+              if( !this.#att ) this.#initAttacherTab();
+              break;
+          }
+        });
+        wrapper.append( e.tabs );
+
+        e.tabEdit = D.div();
+        e.tabEdit.classList.add('editor-wrapper');
+        e.editor = D.attr(
+          D.addClass(D.textarea(), 'editor'),
+          'placeholder',
+          'Your message to other forum-goers...'
+        );
+        if( opt.inReplyTo && !F.user.isIndividual ){
+          const w = D.addClass(D.div(), 'warning');
+          w.append(
+            "You are not ",
+            D.a(F.repoUrl(
+              'login'
+              /*, {
+                // Leads to a confusing 'you need more permissions
+                // to view /forumpost/.... warning
+                g: 'forumpost/'+(opt.inReplyTo || opt.edit?.uuid)
+                }*/
+            ), 'logged in'), ' so will be posting anonymously. ',
+            "If you log in then return here, your draft edit will ",
+            "still be here."
+          );
+          e.tabEdit.append(w);
+        }
+        e.tabEdit.append(e.editor);
+        e.tabEdit.dataset.tabLabel = (opt.edit || !opt.inReplyTo)
+          ? 'Edit' : 'Reply';
+        this.#tabs.addTab( e.tabEdit );
+        this.#tabs.switchToTab( e.tabEdit );
+        if( this.#draft ){
+          this.editorContent = this.#draft.content || opt.edit?.W || '';
+          e.editor.addEventListener(
+            'blur', ()=>{
+              this.#draft.content = this.editorContent;
+              this.#storeDraft();
+            }
+          );
+        }else if( opt.edit?.W ){
+          this.editorContent = opt.artifact.W;
+        }
+        e.preview = D.addClass(D.div(), 'preview');
+        e.preview.dataset.tabLabel = 'Preview';
+        this.#toDisable.push(e.button.preview);
+        this.#tabs.addTab( e.preview );
+      }
+
+      if( F.user.enableDebug ){
+        e.debug = D.addClass(D.div(), 'debug');
+        e.debug.dataset.tabLabel = 'Debug';
+        e.debug.setAttribute('id', idPrefix+'-debug');
+        for(const [k,v] of Object.entries({
+          dryrun: 'Dry run',
+          domod: 'Require moderation approval',
+          //showqp: 'Show query parameters',
+          fpsilent: 'Do not send notification emails'
+        })){
+          const lbl = D.label(false, v);
+          lbl.prepend(D.checkbox(k));
+          e.debug.append(lbl);
+        }
+        this.#tabs.addTab(e.debug);
+      }
+      e.buttons.append(e.mimetype.wrapper);
+
+      if( opt.edit
+          && !opt.inReplyTo
+          && F.config.forumStatuses?.length>0 ){
+        const sel = e.status = D.select();
+        sel.setAttribute('title', 'The status tag value for this post.');
+        D.option(sel, "", "- Status -").disabled = true;
+        for( const status of F.config.forumStatuses ){
+          D.option(sel, status.value, status.label);
+        }
+        e.buttons.append(sel);
+        if( opt.status ){
+          sel.value = opt.status;
+        }else if( this.#draft ){
+          if( this.#draft.status ){
+            sel.value = this.#draft.status;
+          }else{
+            this.#draft.status = sel.value = F.config.forumStatuses[0].value;
+          }
+          sel.addEventListener('change',ev=>{
+            const v = sel.value;
+            if( this.#draft.status !== v ){
+              this.#draft.status = v;
+              this.#storeDraft();
+            }
+          });
+        }
+      }/*e.status*/
+
+      if( F.user.mayAttachForum ){
+        //e.buttons.append( e.button.addAttach = this.#att.takeAddButton() );
+        e.tabAttach = D.div();
+        e.tabAttach.setAttribute('id', idPrefix+'-attach');
+        e.tabAttach.dataset.tabLabel = 'Attachments';
+        this.#tabs.addTab(e.tabAttach);
+        /* Reminder: we don't currently have a way to disable/enable
+           an Attacher's controls during ajax traffic. */
+      }
+      e.buttons.append(e.button.preview, e.button.submit);
+      if( e.button.stash ){
+        e.buttons.append(e.button.stash);
+        this.#toDisable.push(e.button.stash);
+      }
+      if( e.button.discard ){
+        e.buttons.append(e.button.discard);
+        this.#toDisable.push(e.button.discard);
+      }
+
+      e.help = D.attr(D.div(), 'id', idPrefix+'-help');
+      e.help.$needsInit = true;
+      e.help.dataset.tabLabel = 'Help';
+      this.#tabs.addTab(e.help);
+
+      if( opt.hiddenFields ){
+        this.addHiddenFields( opt.hiddenFields );
+        delete opt.hiddenFields;
+      }
+
+      { /* Shift-enter pieces... */
+        const eCb = D.checkbox(1);
+        const eLbl = D.label();
+        const eHelp = D.append(
+          D.span(), [
+            'When checked, shift-enter will toggle between preview ',
+            'and edit modes, which is generally useful but some ',
+            'software keyboards misinteract with it. If the preview ',
+            'starts when tapping Enter, turn this setting off.'
+          ].join('')
+        );
+        eCb.checked = F.storage.getBool(
+          'edit-shift-enter-preview',
+          true
+          /* Maintenance reminder: this setting is shared across
+             several apps, like /chat, /wikiedit, and /fileedit. */
+        );
+        eCb.addEventListener('change', (ev)=>{
+          F.storage.set('edit-shift-enter-preview', eCb.checked);
+        });
+        F.helpButtonlets.setup(eHelp);
+        eLbl.append("Shift-enter toggles preview?", eCb, eHelp);
+        e.tabEdit.append(eLbl);
+        const isShiftEnter = (ev)=>eCb.checked && ev.shiftKey && 13===ev.keyCode;
+        e.editor.addEventListener('keydown',(ev)=>{
+          /**
+             If eCb.checked is true, a keyboard combo of shift-enter
+             (from the editor) toggles between preview and edit modes.
+             This is normally desired but at least one software
+             keyboard is known to misinteract with this, treating an
+             Enter after automatically-capitalized letters as a
+             shift-enter:
+
+             https://fossil-scm.org/forum/forumpost/dbd5b68366147ce8
+          */
+          if(!isShiftEnter(ev)) return;
+          ev.preventDefault();
+          ev.stopPropagation();
+          e.editor.blur(/*force draft update if needed*/);
+          this.#tabs.switchToTab(e.preview);
+        }, false);
+        // If we're in the preview tab, have ctrl-enter switch back to the editor.
+        document.body.addEventListener('keydown',(ev)=>{
+          if(!isShiftEnter(ev)) return;
+          if(this.#activeTab !== e.tabEdit){
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.#tabs.switchToTab(e.tabEdit);
+            e.editor.focus(/*slow as molasses for long docs, as focus()
+                             forces a document reflow. */);
+            return false;
+          }
+        }, true);
+      }/*shift-enter preview bits*/
+
+      if(0){ /* Needs to be optional */
+        const elemsToToggle = document.body.querySelectorAll(
+          ':scope > header, :scope > nav'
+        );
+        e.button.toggleHeader =
+          D.button('Toggle header', e=>{
+            for(const et of elemsToToggle){
+              et.classList.toggle('hidden');
+            }
+          });
+        e.buttons.append(e.button.toggleHeader);
+      }
+
+      if(0){
+        // Tentatively replaced with the user name in the Submit button
+        const eLbl = D.label(false, "Posting as "+F.user.name)
+        eLbl.classList.add('logged-in-as');
+        e.buttons.append(eLbl);
+      }
+
+    }/*constructor*/
+
+    /*
+    ** Removes this object from the DOM. It has no side effects if
+    ** it's not in the DOM.
+    */
+    close(){
+      const e = this.#e.widget;
+      if( e?.parentNode ){
+        if( this.#opt.onclose instanceof Function ){
+          try{this.#opt.onclose();}
+          catch(e){
+            console.error("ForumPostEditor.onclose() threw:",e);
+          }
+        }
+        //console.debug("FPE discarding", this);
+        e.classList.add('animate-exit');
+        e.addEventListener('animationend', ()=>e.remove(), {once: true});
+        dummyPadding.refs.delete(this);
+        if( 0===dummyPadding.refs.size ){
+          dummyPadding.remove();
+        }
+      }
+    }
+
+    /*
+    ** Discards any draft edits then calls close(). If an ondiscard
+    ** callback was provided to the constructor then it is called
+    ** before the drafts are cleared and any exceptions it throws are
+    ** ignored (but may be logged).
+    */
+    discard(){
+      if( this.#opt.ondiscard instanceof Function ){
+        try{this.#opt.ondiscard(this);}
+        catch(e){
+          console.error("ForumPostEditor.ondiscard() threw:",e);
+        }
+      }
+      this.#clearDraft();
+      this.close();
+    }
+
+    /** This widget's top-most DOM element. */
+    get widget(){
+      if( !dummyPadding.parentElement ){
+        document.body.append(dummyPadding);
+      }
+      dummyPadding.refs.add(this);
+      return this.#e.widget;
+    }
+
+    get editorContent(){
+      /* We wrap access to the editor's contents in a getter/setter so
+         that we can eventually add optional use of a contenteditable
+         edit field, as those are generally more comfortable. The code
+         for that is in fossil.page.chat.js. */
+      return this.#e.editor.value;
+    }
+
+    set editorContent(v){
+      this.#e.editor.value = v;
+    }
+
+    /**
+       Reports an error by appending each argument to the error widget
+       and unhiding it. If passed no arugments, it clears and hides
+       the error widget.
+    */
+    reportError(...msg){
+      const e = this.#e.error;
+      D.clearElement(e);
+      if( msg.length ){
+        console.error('ForumPostEditor:',...msg);
+        e.classList.remove('hidden');
+        e.append(
+          ...msg, D.br(),
+          D.button("Clear", ()=>this.reportError())
+          /* Looks horrid in the Blitz skin */
+        );
+      }else{
+        e.classList.add('hidden');
+      }
+    }
+
+    /**
+       Adds a list of input[type=hidden] form fields to this object,
+       imported from the server-generated HTML. This is used for
+       collecting, e.g., the CSRF token and an initial page title.
+    */
+    addHiddenFields(list){
+      this.#extraFields ??= [];
+      for( const f of list ){
+        if( !f ) continue;
+        if( 'title'===f.name && this.#e.title ){
+          if( f.value && this.#opt.isNewThread && !this.#e.title.value ){
+            this.#e.title.value = f.value;
+          }
+        }else{
+          this.#extraFields.push(f);
+        }
+      }
+    }
+
+    get mimetype(){
+      return this.#e.mimetype.select.value;
+    }
+
+    get title(){
+      return this.#e.title?.value || this.#opt.edit?.H;
+    }
+
+    #initHelpTab(){
+      const eh = this.#e.help;
+      const list = D.ul();
+      D.append(
+        D.li(list),
+        D.attr(D.a(F.repoUrl('md_rules'), 'Markdown markup rules'),
+               'target', '_new')
+      );
+      D.append(
+        D.li(list),
+        D.attr(D.a(F.repoUrl('wiki_rules'), 'Fossil wiki markup rules'),
+               'target', '_new')
+      );
+      D.append(
+        D.li(list),
+        "WARNING: draft edits are keyed on the ID of the message they ",
+        "are editing or responding to. Attempting to edit or reply to ",
+        "the same post from multiple tabs will cause the most-recently-edited ",
+        "one to overwrite the draft slot for that post. In browsers which support ",
+        "Web Locks, a second attempt to edit or reply to a post will be blocked ",
+        "and an error will be shown explaining the problem."
+      );
+      if( this.#e.status ){
+        D.append(
+          D.li(list),
+          "Tip: changing just the status in the editor will change only that, ",
+          "not a whole new (but unedited) copy of the post."
+        );
+      }
+      eh.append(list);
+    }
+
+    #initAttacherTab(){
+      this.#att = new F.Attacher({
+        reverse: true
+      });
+      if( this.#opt.edit ){
+        const eNote = D.append(
+          D.div(),
+          "Tip: attachments can be added to posts without editing them ",
+          "by visiting ",
+          D.attr(
+            D.a(F.repoUrl('attachadd?target='+this.#opt.edit.uuid), '/attachadd'),
+            'target',
+            '_new'
+          ),
+          ".",
+        );
+        this.#e.tabAttach.append(eNote);
+      }
+      this.#e.tabAttach.append(this.#att.widget);
+    }
+
+    #newFormData(addThisContent){
+      const fd = new FormData;
+      for(const f of this.#extraFields){
+        fd.append(f.name, f.value);
+      }
+      let v;
+      if( this.#opt.inReplyTo ){
+        fd.append( 'firt', this.#opt.inReplyTo );
+      }else if( (v = (this.#e.title?.value?.trim?.() || this.#opt.edit?.H)) ){
+        fd.append('title', v);
+      }
+      fd.append('mimetype', this.mimetype);
+      fd.append('content', addThisContent || this.editorContent.trim());
+      return fd;
+    }
+
+    async #fetchPreview(content){
+      /* TODO: fetch preview */
+      const e = this.#e;
+      const fd = /*no: this.#newFormData(content); */
+            new FormData;
+      let ext;
+      switch(this.mimetype){
+        case 'text/x-markdown':    ext = 'md';   break;
+        case 'text/x-fossil-wiki': ext = 'wiki'; break;
+        default:                   ext = 'txt';  break;
+      }
+      fd.append('filename', 'x.'+ext/*for mimetype determination*/);
+      fd.append('content', this.editorContent.trim());
+      return window
+        .fetch(F.repoUrl('ajax/preview-text'),{
+          method: 'POST',
+          body: fd
+        })
+        .then(r=>r.text())
+        .then(t=>{
+          if( /^\{.*}$/.test(t) ){
+            const o = JSON.parse(t);
+            throw new Error(o.error);
+          }
+          return t;
+        });
+    }
+
+    #setPreviewContent(rawHtml){
+      /**
+         Append the new content then remove the old, to help reduce
+         jumping-around of the UI if the preview is cleared then
+         repopulated.
+      */
+      const preview = this.#e.preview;
+      const childs = [...preview.childNodes];
+      D.parseHtml(preview, rawHtml);
+      D.remove(childs);
+      //preview.style.removeProperty('height');
+      if(F.pikchr && 'text/x-markdown'===this.mimetype){
+        F.pikchr.addSrcView(
+          preview.querySelectorAll('svg.pikchr')
+        );
+      }
+    }
+
+    async #preview(){
+      if( this.#isWaiting ) return;
+      const e = this.#e;
+      if( e.preview !== this.#activeTab ){
+        this.#tabs.switchToTab(e.preview);
+        /* Will recurse into here */
+        return;
+      }
+      const content = this.editorContent.trim();
+      //console.debug("content to preview", content);
+      if( !content ){
+        return;
+      }
+      if( 0
+          && !e.preview.firstElementChild ){
+        /* On an initial first preview, inherit the editor's height to
+           reduce jumping-around of the UI. */
+        if( 0 /* does not work: height of the editor is "auto" */ ){
+          const c = window.getComputedStyle(e.editor/*tabEdit*/);
+          e.preview.style.height = c.height;
+        }else{
+          e.preview.style.height = '20em';
+        }
+      }
+      this.#isWaiting = true;
+      D.disable(this.#toDisable, e.button.submit);
+      this.#fetchPreview(content)
+        .then((c)=>{
+          this.#setPreviewContent(c);
+          D.enable(e.button.submit);
+        })
+        .catch(err=>{
+          e.preview.textContent = "Error fetching preview: "+err.message;
+          console.error("Error fetching preview:",err);
+          this.reportError(err.message);
+        })
+        .finally(()=>{
+          this.#isWaiting = false;
+          D.enable(this.#toDisable);
+        });
+    }
+
+    #validate(tgt){
+      if( this.#e.title ){
+        const v = this.#e.title.value.trim();
+        if( !v ){
+          this.reportError("A non-empty title is required.");
+          return;
+        }
+      }
+      return true;
+    }
+
+    #submit(){
+      if( this.#isWaiting ) return;
+      if( !this.#validate() ) return;
+      this.#isWaiting = true;
+      const e = this.#e;
+      D.disable(e.button.submit);
+      const fd = this.#newFormData();
+      if( this.#e.status ){
+        /* Send the status only if it was modified, otherwise we may
+           add a superfluous tag. */
+        const v = this.#e.status.value;
+        if( this.#e.status.dataset.originalValue !== v ){
+          fd.append("status", v);
+        }
+      }
+      if( e.debug ){
+        e.debug.querySelectorAll('input[type=checkbox]').forEach(cb=>{
+          if( cb.checked ){
+            fd.append(cb.value, 1);
+            //console.debug("Forum post debug option:",cb);
+          }
+        });
+      }
+      if( this.#att ){
+        this.#att.populateFormData(fd);
+      }
+      //console.warn("Ready to submit",fd);
+      if( 0 ){
+        this.#isWaiting = false;
+        return;
+      }
+      const resp = window.fetch(F.repoUrl('forumajax_save'), {
+        method: 'POST',
+        body: fd
+      }).then(r=>r.json())
+        .then(j=>{
+          j = F.nu(j);
+          console.debug("forum post editor response:",j);
+          if( j.error ){
+            throw new Error(j.error);
+          }else if( j.message ){
+            /* This is only for use in debugging during
+             * development. */
+            this.reportError(j.message);
+            return;
+          }
+          if( 1 ){
+            this.#clearDraft();
+            if( this.#opt.onsubmit instanceof Function ){
+              try{this.#opt.onsubmit(this, j);}
+              catch(e){
+                console.error("ForumPostEditor.onsubmit() threw: ", e);
+              }
+            }
+            /*
+              if( this.#opt.edit?.uuid === j.uuid ) then we know the
+              content did not change, but it's possible that attachments
+              and/or a status tag did. Ergo, we need to unconditionally
+              reload to render those changes (if any). The other option
+              is to tell the user "nothing changed" and leave them in
+              the editor, but that could be a lie because we don't know
+              if any attachments or tags were changed.
+            */
+            else if( 0 ){
+              if( this.#opt.edit.uuid === j.uuid
+                  && !j.statusModified && 0===j.attachedCount ){
+                this.reportError("No changes made.");
+              }else{
+                window.location = F.repoUrl('forumpost/'+j.uuid);
+                setTimeout(()=>this.close(), 500/*just in case not redirected*/);
+              }
+            }
+          }else{
+            this.reportError(
+              "Saving worked but we're ignoring it and staying here."
+            );
+          }
+        })
+        .catch((e)=>this.reportError(e.message))
+        .finally(()=>this.#isWaiting = false);
+    }
+
+    #storeDraft(){
+      if( this.#draft ){
+        this.#draft.mtime = Date.now();
+        F.storage.setJSON(this.#opt.draftKey, this.#draft);
+      }
+    }
+
+    /** Clears any persistent draft state. Does not clear the UI
+        widgets. */
+    #clearDraft(){
+      if( this.#draft ){
+        F.storage.remove(this.#opt.draftKey);
+        this.#draft = F.nu();
+      }
+    }
+
+    /**
+       Looks for editing draft keys matching either a fixed key or a
+       regex, and removes each matching one which is older than the
+       given number of days. Pass days=0 to purge all entries
+       immediately.
+    */
+    static purgeOldDrafts(key, days=10){
+      const age = (3600 * 24 * days) * 1000/*ms*/;
+      const now = Date.now();
+      const check = (k)=>{
+        const o = F.storage.getJSON(k);
+        if( o && o.mtime && (!days || (o.mtime+age <= now)) ){
+          F.storage.remove(k);
+        }
+      };
+      if( key instanceof RegExp ){
+        for(const k of F.storage.keys(false).filter(v=>key.test(v))){
+          check(k);
+        }
+      }else{
+        check(key);
+      }
+    }
+
+    async #fetchPost(){
+      /*
+        TODO: when editing an existing post, fetch the raw body of the
+        post and populate this.e.
+       */
+    }
+  }/*ForumPostEditor*/;
+  F.ForumPostEditor = ForumPostEditor;
+
+  /**
+     When the page is loaded, this handler does the following:
+
+     1. Installs expand/collapse UI elements on "long" posts and collapses
+     them.
+
+     2. Any pikchr-generated SVGs get a source-toggle button added to them
+     which activates when the mouse is over the image or it is tapped.
+
+     3. Plugs in a new edit/reply widget to forum posts.
+
+     This is a harmless no-op if the current page has neither forum
+     post constructs for (1) and (3) nor any pikchr images for (2),
+     nor will NOT running this code cause any breakage for clients
+     with no JS support: this is all "nice-to-have", not required
+     functionality.
+  */
+  F.onPageLoad(function(){
+    const scrollbarIsVisible = (e)=>e.scrollHeight > e.clientHeight;
+    /* Returns an event handler which implements the post expand/collapse toggle
+       on contentElem when the given widget is activated. */
+    const getWidgetHandler = function(widget, contentElem){
+      return function(ev){
+        if(ev) ev.preventDefault();
+        const wasExpanded = widget.classList.contains('expanded');
+        widget.classList.toggle('expanded');
+        contentElem.classList.toggle('expanded');
+        if(wasExpanded){
+          contentElem.classList.add('shrunken');
+          contentElem.parentElement.scrollIntoView({
+            /* This is non-standard, but !(MSIE, Safari) supposedly support it:
+               https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#Browser_compatibility
+            */ behavior: 'smooth'
+          });
+        }else{
+          contentElem.classList.remove('shrunken');
+        }
+        return false;
+      };
+    };
+
+    /* Adds an Expand/Collapse toggle to all div.forumPostBody
+       elements which are deemed "too large" (those for which
+       scrolling is currently activated because they are taller than
+       their max-height). */
+    document.querySelectorAll(
+      'div.forumTime, div.forumEdit'
+    ).forEach(function f(forumPostWrapper){
+      const content = forumPostWrapper.querySelector('div.forumPostBody');
+      if(!content || !scrollbarIsVisible(content)) return;
+      const parent = content.parentElement,
+            widget =  D.addClass(
+              D.div(),
+              'forum-post-collapser','bottom'
+            ),
+            rightTapZone = D.addClass(
+              D.div(),
+              'forum-post-collapser','right'
+            );
+      /* Repopulates the rightTapZone with arrow indicators. Because
+         of the wildly varying height of these elements, This has to
+         be done dynamically at init time and upon collapse/expand. Will not
+         work until the rightTapZone has been added to the DOM. */
+      const refillTapZone = function f(){
+        if(!f.baseTapIndicatorHeight){
+          /* To figure out how often to place an arrow in the rightTapZone,
+             we simply grab the first header element from the page and use
+             its hight as our basis for calculation. */
+          const h1 = document.querySelector('h1, h2');
+          f.baseTapIndicatorHeight = h1.getBoundingClientRect().height;
+        }
+        D.clearElement(rightTapZone);
+        var rtzHeight = parseInt(window.getComputedStyle(rightTapZone).height);
+        do {
+          D.append(rightTapZone, D.span());
+          rtzHeight -= f.baseTapIndicatorHeight * 8;
+        }while(rtzHeight>0);
+      };
+      const handlerStep1 = getWidgetHandler(widget, content);
+      const widgetEventHandler = ()=>{ handlerStep1(); refillTapZone(); };
+      content.classList.add('with-expander');
+      widget.addEventListener('click', widgetEventHandler, false);
+      /** Append 3 children, which CSS will evenly space across the
+          widget. This improves visibility over having the label
+          in only the left, right, or center. */
+      var i = 0;
+      for( ; i < 3; ++i ) D.append(widget, D.span());
+      if(content.nextSibling){
+        forumPostWrapper.insertBefore(widget, content.nextSibling);
+      }else{
+        forumPostWrapper.appendChild(widget);
+      }
+      content.appendChild(rightTapZone);
+      rightTapZone.addEventListener('click', widgetEventHandler, false);
+      refillTapZone();
+    })/*for-each div.forumTime|div.forumEdit*/;
+
+    if(F.pikchr){
+      F.pikchr.addSrcView();
+    }
+
+    const eStatus = document.querySelector(
+      'form div.submenu select.submenuctrl[name="status"]'
+    );
+    if( eStatus ){
+      /* Main /forum list. Remove the 'x' form element when eStatus
+         changes, to avoid propagating x when changing the filter.
+         The problem this solves: we're browsed to page 3 of status X.
+         We change the status filter selection to Y. We're redirected
+         to page x, but Y only has 2 posts with that status, so we see
+         an empty list. When changing the filter, we need to ensure
+         that we start back and that beginning. */
+      const pForm = eStatus.parentElement?.parentElement;
+      if( pForm ){
+        eStatus.addEventListener('change', ()=>{
+          pForm.querySelector('input[type="hidden"][name="x"]')?.remove?.();
+        }, true);
+      }
+    }else{
+      /* One of the single-post edit/view pages.  Handle various UI
+         controls and attempt to keep stray double-clicks from
+         double-posting.
+         https://fossil-scm.org/forum/info/6bd02466533aa131 */
+      const formSubmitted = function(event){
+        const form = event.target;
+        if( form.dataset.submitted ){
+          event.preventDefault();
+          return;
+        }
+        form.dataset.submitted = '1';
+        /** If the user is left waiting "a long time," disable the
+            resubmit protection. If we don't do this and they tap the
+            browser's cancel button while waiting, they'll be stuck
+            with an unsubmittable form. It can apparently also happen,
+            via browser-back, that the form gets left in a submitted
+            state. */
+        setTimeout(()=>{delete form.dataset.submitted}, 7000);
+        return;
+      };
+
+      /**
+         The problem: "Approve", "Reject" and their ilk stays active
+         while their form post is in flight, just begging to be
+         clicked again. We don't really have a way to know when the
+         submit finishes, so we'll (A) disable them before submit and
+         (B) reenable them after some long timeout in case the request
+         fails. On a successful submit we're redirected, making this
+         all moot.
+      */
+      const deactivateButtonInFlight = (elem, form)=>{
+        if( elem.disabled ) return /* potential double-click protection */;
+        elem.disabled = true;
+        setTimeout(
+          /* This is a stupid workaround for a failed request but none
+             better come to mind except replacing the form.submit()
+             with a fetch() POST, such that we can do this at
+             precisely the right time. That change would not be
+             difficult (we do this in /chat, /wikiedit, etc.) but
+             that exceeds this morning's ambitions. */
+          ()=>elem.disabled = false, 10000
+        );
+        form.submit();
+      };
+      document.querySelectorAll("form").forEach(function(form){
+        /* Set up controls for closing posts and setting thread
+           status. */
+        form.addEventListener('submit', formSubmitted);
+        form
+          .querySelectorAll("input.action-close, input.action-reopen")
+          .forEach(function(e){
+            e.classList.remove('hidden');
+            F.confirmer(e, {
+              confirmText: (e.classList.contains('action-reopen')
+                            ? "Confirm re-open"
+                            : "Confirm close"),
+              onconfirm: ()=>deactivateButtonInFlight(e, form)
+            });
+          });
+        form
+          .querySelectorAll("input.action-approve, input.action-reject")
+          .forEach(function(e){
+            e.type = 'button'/*do not submit form on click*/;
+            const isApprove = e.classList.contains('action-approve');
+            F.confirmer(e, {
+              confirmText: (isApprove
+                            ? "Confirm approval"
+                            : "Confirm rejection"),
+              onconfirm: ()=>{
+                form.append(
+                  /* Workaround for the button element's value not
+                     being sent with the form: inject a hidden field
+                     corresponding to the button's action. */
+                  D.attr(
+                    D.input('hidden'),
+                    'name', isApprove ? 'approve' : 'reject',
+                    'value', 'ignored'
+                  )
+                );
+                deactivateButtonInFlight(e, form);
+              }
+            });
+            /* We should also arguably disable the approve/reject
+               button's counterpart while it's counting down. */
+          });
+        form
+          .querySelectorAll("input[type='button'].action-status")
+          .forEach(function(btn){
+            const sel = btn.previousElementSibling;
+            const updateButton = ()=>{
+              /* Enable btn only when the status has been locally
+                 modified. */
+              if( sel.dataset.initialValue ){
+                if( sel.dataset.initialValue===sel.value ){
+                  btn.setAttribute('disabled','');
+                }else{
+                  btn.removeAttribute('disabled');
+                }
+              }else{
+                if(sel.selectedIndex===0){
+                  btn.setAttribute('disabled','');
+                }else{
+                  btn.removeAttribute('disabled');
+                }
+              }
+            };
+            sel.addEventListener('change', updateButton, true);
+            updateButton();
+            F.confirmer(btn, {
+              confirmText: "Confirm status change",
+              onconfirm: ()=>deactivateButtonInFlight(btn, form)
+            });
+          });
+      });
+    }
+
+    /* Apply page-specific tweaks for ForumPostEditor instance fpe
+       then plug it into the UI at the end of ePost. */
+    const initFPEWidget = (fpe, ePost)=>{
+      ePost.eUnhideThenWhenDone = [
+        /* List of elements to hide while editing/replying and reveal
+           when discarding or saving. */
+      ];
+      for( const ee of ePost.querySelectorAll(
+        '.forumpost-single-controls, fieldset.forum-status-selection'
+      ) ){
+        ee.hidden = true;
+        ePost.eUnhideThenWhenDone.push(ee);
+      }
+      const w = fpe.widget;
+      w.classList.add('animate-entrance');
+      ePost.append(w);
+      requestAnimationFrame(() => {
+        w.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'nearest'
+        });
+      });
+    };
+
+    const plugInEditor =
+          (new URL(window.location).searchParams).get('nojs')===null;
+
+    const eForumNew = (
+      plugInEditor
+        && (
+          document.body.classList.contains('cpage-forumnew')
+            || document.body.classList.contains('cpage-forume1')
+        ))
+          ? document.body.querySelector('#forumnew-placeholder')
+          : null;
+    if( plugInEditor && eForumNew ){
+      /* /forumnew and /forume1 */
+      const fpe = new F.ForumPostEditor({
+        draftKey: 'draft-forumnew',
+        hiddenFields: eForumNew.querySelectorAll('input[type=hidden]'),
+        hideStash: true,
+        ondiscard: ()=>{
+          window.location = F.repoUrl('forum');
+        },
+        onsubmit: (fpe, response)=>{
+          window.location = F.repoUrl('forumpost/'+response.uuid);
+        }
+      });
+      eForumNew.parentElement.insertBefore(fpe.widget, eForumNew);
+      eForumNew.remove();
+      fossil.page.fpe = fpe /* for testing via the console */;
+    }/*eForumNew*/
+    else if( plugInEditor
+             && (document.body.classList.contains('cpage-forumpost')
+                 || document.body.classList.contains('cpage-forumthread')) ){
+      /* /forumpost and /forumthread. Take over the Edit/Reply buttons
+         to use a ForumPostEditor. */
+
+      const fetchPost = async (fpid)=>{
+        return window.fetch(F.repoUrl('ajax/artifact.json?uuid='+fpid))
+          .then(r=>r.json())
+          .then(j=>{
+            j = F.nu(j);
+            if( j.error ) throw new Error(j.error);
+            return j;
+          });
+      };
+
+      const makeDraftKey = (prefix,uuid)=>{
+        return prefix+'-'+uuid.substr(0,12);
+      };
+
+      /**
+         Perform some init common to both Reply and Edit.  ePost = the
+         forum post DOM element. eButton = the Reply or Edit
+         button.
+      */
+      const setupEditReplyElement = (ePost, eButton)=>{
+        /* Forum posts are indented in the main forum view to
+           represent their place in the hierarchy. In order to gain
+           some screen space, we shift the post to the left margin and
+           arrange to shift it back when the editor is closed. We also
+           record the original button label so that it can be
+           restored on close. */
+        ePost.dataset.originalMarginLeft = ePost.style.marginLeft;
+        ePost.style.marginLeft = 'initial';
+        eButton.dataset.originalLabel = eButton.innerText;
+      };
+
+      /** Undoes the damage done by setupEditReplyElement(). */
+      const restoreEditReplyElement = (ePost, eButton)=>{
+        if( ePost.dataset.originalMarginLeft ){
+          ePost.style.marginLeft = ePost.dataset.originalMarginLeft;
+          delete ePost.dataset.originalMarginLeft;
+        }
+        if( eButton.dataset.originalLabel ){
+          eButton.innerText = eButton.dataset.originalLabel;
+          delete eButton.dataset.originalLabel;
+        }
+        for(const ee of (ePost.eUnhideThenWhenDone || [])){
+          ee.removeAttribute('hidden');
+        }
+        ePost.eUnhideThenWhenDone = undefined;
+      };
+
+      /**
+         Reports an error regarding the forum post element
+         ePost, appending each entry in msg to a wrapper
+         element with the class
+      */
+      const reportFPEError = (ePost,...msg)=>{
+        const e = D.addClass(D.p(), 'error');
+        e.append(
+          ...msg,
+          D.br(),
+          D.button("Clear error", ()=>e.remove())
+        );
+        ePost.append(e);
+      };
+
+      /**
+         Plug in an editor widget representing a reply to a post.
+         form = a (.forum-post-single-controls > form) element.  The
+         final 3 arguments are as documented for
+         setupEditReplyElement().
+      */
+      const replyClicked = async (form, ePost, eBtnReply)=>{
+        const fpid = ePost.dataset.fpid;
+        const fEditHead = ePost.dataset.fedithead;
+        const draftKey = makeDraftKey(
+          'draft-reply', fEditHead
+          /* The problem with firt as a key is that firt is not
+             necessarily the root edit of that post, which is what we
+             really want as a draft key so that the draft does not
+             disappear if firt is later edited (giving us a new firt
+             value here). */
+            || fpid
+        );
+        let releaseLock;
+        if( window.navigator.locks ){
+          /* This business with forceReleaseLockOnClose and 'pagehide'
+             event is a workaround for Chrome being overly lazy in
+             releasing Web Locks when a tab is closed. It sometimes
+             waits half a minute or more before release.
+
+             Sidebar: we cannot use AbortController because it cannot
+             be used with the ifAvailable lock check. */
+          let forceReleaseLockOnClose = null;
+          const handlePageHide = ()=>{
+            if( forceReleaseLockOnClose ){
+              forceReleaseLockOnClose();
+            }
+          };
+          window.addEventListener('pagehide', handlePageHide);
+          releaseLock = await new Promise((resolve)=>{
+            window.navigator.locks.request(
+              'fossil-'+draftKey,
+              {ifAvailable: true},
+              async (lock)=>{
+                if( !lock ){
+                  /*lock contention*/
+                  resolve(null);
+                  return;
+                }
+                let release;
+                const lockReleased = new Promise(res=>release=res);
+                forceReleaseLockOnClose = release;
+                const wrappedRelease = ()=>{
+                  window.removeEventListener('pagehide', handlePageHide);
+                  if( release ) release();
+                };
+                resolve(wrappedRelease);
+                await lockReleased/*hold the lock open*/;
+              });
+          });
+          if( !releaseLock ){
+            window.removeEventListener('pagehide', handlePageHide);
+            reportFPEError(
+              ePost,
+              "This post is actively being replied to ",
+              "in another tab. To avoid losing edits, ",
+              "it cannot be opened here until the locking ",
+              "tab is closed."
+            );
+            return;
+          }
+        }
+
+        setupEditReplyElement(ePost, eBtnReply);
+        eBtnReply.innerText = "Replying...";
+        const ondone = (fpe, response)=>{
+          /* onsubmit() and ondiscard() callback */
+          restoreEditReplyElement(ePost, eBtnReply);
+          //console.debug("ondiscard/onsubmit", fpe, artifact);
+          if( response/*onsubmit()*/ ){
+            window.location = F.repoUrl('forumpost/'+response.uuid);
+            setTimeout(()=>fpe.close(), 500/*just in case not redirected*/);
+          }else{/*ondiscard() or onclose()*/
+          }
+        };
+        const fpe = new F.ForumPostEditor(F.nu({
+          hiddenFields: form.querySelectorAll(
+            'input[type=hidden][name=csrf]'
+            /* Do not inherit the fpid field, else this will become
+               an edit to that post rather than a response. */
+          ),
+          ondiscard: ()=>{/*need a noop here. Will call onclose()*/},
+          onsubmit: ondone,
+          onclose: ()=>{
+            if( releaseLock ){
+              releaseLock();
+              releaseLock = null;
+            }
+            ondone();
+          },
+          inReplyTo: fpid,
+          draftKey
+        }));
+        initFPEWidget(fpe, ePost);
+      }/*replyClicked()*/;
+
+      /**
+         Plug in an editor widget representing an edit to a post.
+         form = a (.forum-post-single-controls > form) element.  The
+         final 3 arguments are as documented for
+         setupEditReplyElement().
+      */
+      const editClicked = async (form, ePost, eBtnEdit)=>{
+        const fpid = ePost.dataset.fpid;
+        const firt = ePost.dataset.firt;
+        const fEditHead = ePost.dataset.fedithead;
+        const draftKey = makeDraftKey('draft-forumedit', fEditHead || fpid);
+        let releaseLock;
+        if( navigator.locks ){
+          releaseLock = await new Promise((resolve) => {
+            navigator.locks.request(
+              'fossil-'+draftKey,
+              {ifAvailable: true},
+              async (lock)=>{
+                if( !lock ){
+                  resolve(null);
+                  return;
+                }
+                let release;
+                const lockReleased = new Promise(res=>release=res);
+                resolve(release);
+                await lockReleased;
+              });
+          });
+
+          if( !releaseLock ){
+            reportFPEError(
+              ePost,
+              "This post is actively being edited ",
+              "in another tab. To avoid losing edits, ",
+              "it cannot be opened here until the locking ",
+              "tab is closed."
+            );
+            return;
+          }
+        }
+        setupEditReplyElement(ePost, eBtnEdit);
+        eBtnEdit.innerText = "Editing...";
+        fetchPost(fpid)
+          .then(artifact=>{
+            const ondone = (fpe, response)=>{
+              /* onsubmit() and ondiscard() callback */
+              if( response/*onsubmit()*/ ){
+                if( fpid === response.uuid
+                    && !response.statusModified
+                    && 0===response.attachedCount ){
+                  fpe.reportError("No changes made.");
+                }else{
+                  restoreEditReplyElement(ePost, eBtnEdit);
+                  window.location = F.repoUrl('forumpost/'+response.uuid);
+                  setTimeout(()=>fpe.close(), 500/*just in case not redirected*/);
+                }
+              }else{
+                /*ondiscard() or onclose()*/
+                restoreEditReplyElement(ePost, eBtnEdit);
+              }
+            };
+            const eStatusSelect = ePost.querySelector(
+              ':scope > fieldset.forum-status-selection select[name=status]'
+            );
+
+            const fpe = new F.ForumPostEditor(F.nu({
+              hiddenFields: form.querySelectorAll('input[type=hidden]'),
+              ondiscard: ()=>{/*need a noop here. Will call onclose()*/},
+              onsubmit: ondone,
+              onclose: ()=>{
+                if(releaseLock){
+                  releaseLock();
+                  releaseLock = null;
+                }
+                ondone();
+              },
+              draftKey,
+              edit: artifact,
+              status: eStatusSelect?.value,
+              inReplyTo: firt
+            }));
+            initFPEWidget(fpe, ePost);
+          })
+          .catch(err=>{
+            if( releaseLock ){
+              releaseLock();
+              releaseLock = null;
+            }
+            restoreEditReplyElement(ePost, eBtnEdit);
+            console.error("Error fetching post:", err);
+            reportFPEError(ePost, "Error fetching post: ", err.message);
+          });
+      }/*editClicked()*/;
+
+      document.body.querySelectorAll(
+        '.forumpost-single-controls > form'
+      ).forEach(form=>{
+        /* For each forum post... */
+        const eThePost = form.parentElement.parentElement/*main post DOM element*/;
+        if( !eThePost?.dataset?.fpid ){
+          /* The server injects these dataset values. */
+          console.warn("Unexpected missing fpid", eThePost);
+          return;
+        }
+        const checkButtonForDraft = (draftKeyPrefix, eBtn)=>{
+          /* If a draft is found associated with eThePost, mark eBtn
+             as a draft and set up storage event listeners to update
+             the button as new drafts come and go. */
+          const fpid = eThePost.dataset.fpid;
+          const fEditHead = eThePost.dataset.fedithead;
+          const draftKey = makeDraftKey(draftKeyPrefix, fEditHead || fpid);
+          if( F.storage.contains(draftKey) ){
+            eBtn.classList.add('draft');
+          }
+          F.storage.addEventListener('set', ({detail})=>{
+            if( draftKey === detail.key ){
+              eBtn.classList.add('draft');
+            }
+          });
+          F.storage.addEventListener('remove', ({detail})=>{
+            if( draftKey === detail.key ){
+              eBtn.classList.remove('draft');
+            }
+          });
+        };
+        /* Replace the Reply and Edit buttons with ones which will activate
+           a ForumPostEditor. */
+        const btnReply = form.querySelector('input[type=submit][name=reply]');
+        if( btnReply ){
+          const b = D.button("Reply", ()=>replyClicked(form, eThePost, b));
+          b.type = 'button'/*keep container form from submitting*/;
+          checkButtonForDraft('draft-reply',b);
+          btnReply.parentElement.insertBefore(b, btnReply);
+          btnReply.remove();
+        }
+        const btnEdit = form.querySelector('input[type=submit][name=edit]');
+        if( btnEdit ){
+          const b = D.button("Edit", ()=>editClicked(form, eThePost, b));
+          b.type = 'button'/*keep container form from submitting*/;
+          checkButtonForDraft('draft-forumedit',b);
+          btnEdit.parentElement.insertBefore(b, btnEdit);
+          btnEdit.remove();
+        }
+      })/*for-each form*/;
+
+    }/* /forumpost and /forumthread */
+
+    document.body.querySelectorAll('.remove-on-load').forEach(e=>e.remove());
+    document.body.querySelectorAll('.initially-hidden').forEach(e=>{
+      /* This is a workaround for a span.help-buttonlet which we need
+         to start hidden so that it does not show up for no-JS
+         clients. */
+      e.classList.remove('initially-hidden');
+    });
+
+    if( plugInEditor ){
+      document.body.querySelectorAll('.remove-if-replaced').forEach(
+        /* Remove remaining legacy UI elements. */ e=>e.remove()
+      );
+      /* Purge old drafts only every now and then. */
+      const now = Date.now();
+      const lastPurge = +F.storage.get('forum-drafts-last-purge', 0);
+      if( now - lastPurge > (24 * 60 * 60 * 1000 /*1 day ms*/) ){
+        F.storage.set('forum-drafts-last-purge', now);
+        setTimeout(()=>{
+          /* Don't block the UI while we're doing I/O */
+          F.ForumPostEditor.purgeOldDrafts(
+            /^draft-(reply|forumedit)-.*/
+            /* Intentionally leaving draft-forumnew in place. */
+          );
+        }, 50);
+      }
+    }
+  })/*F.onPageLoad callback*/;
+})(window.fossil);