initial commitHEADmaster

1 files changed, 490 insertions, 0 deletions

diff --git a/src/fossil.wikiedit-wysiwyg.js b/src/fossil.wikiedit-wysiwyg.js
new file mode 100644
index 0000000..757cd2e
--- /dev/null
+++ b/src/fossil.wikiedit-wysiwyg.js
@@ -0,0 +1,490 @@
+/**
+   A slight adaptation of fossil's legacy wysiwyg wiki editor which
+   makes it usable with the newer editor's edit widget replacement
+   API.
+
+   Requires: window.fossil, fossil.dom, and that the current page is
+   /wikiedit. If called from another page it returns without effect.
+
+   Caveat: this is an all-or-nothing solution. That is, once plugged
+   in to /wikiedit, it cannot be removed without reloading the page.
+   That is a limitation of the current editor-widget-swapping API.
+*/
+(function(F/*fossil object*/){
+  'use strict';
+  if(!F || !F.page || F.page.name!=='wikiedit') return;
+
+  const D = F.dom;
+
+  ////////////////////////////////////////////////////////////////////////
+  // Install an app-specific stylesheet...
+  (function(){
+    const head = document.head || document.querySelector('head'),
+          styleTag = document.createElement('style'),
+          styleCSS = `
+.intLink { cursor: pointer; }
+img.intLink { border: 0; }
+#wysiwyg-container {
+  display: flex;
+  flex-direction: column;
+  max-width: 100% /* w/o this, toolbars don't wrap properly! */
+}
+#wysiwygBox {
+  border: 1px solid rgba(127,127,127,0.3);
+  border-radius: 0.25em;
+  padding: 0.25em 1em;
+  margin: 0;
+  overflow: auto;
+  min-height: 20em;
+  resize: vertical;
+}
+#wysiwygEditMode { /* wrapper for radio buttons */
+  border: 1px solid rgba(127,127,127,0.3);
+  border-radius: 0.25em;
+  padding: 0 0.35em 0 0.35em
+}
+#wysiwygEditMode > * {
+  vertical-align: text-top;
+}
+#wysiwygEditMode label { cursor: pointer; }
+#wysiwyg-toolbars {
+  margin: 0 0 0.25em 0;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  align-items: flex-start;
+}
+#wysiwyg-toolbars > * {
+  margin: 0 0.5em 0.25em 0;
+}
+#wysiwyg-toolBar1, #wysiwyg-toolBar2 {
+  margin: 0 0.2em 0.2em 0;
+  display: flex;
+  flex-flow: row wrap;
+}
+#wysiwyg-toolBar1 > * { /* formatting buttons */
+  vertical-align: middle;
+  margin: 0 0.25em 0.25em 0;
+}
+#wysiwyg-toolBar2 > * { /* icons */
+  border: 1px solid rgba(127,127,127,0.3);
+  vertical-align: baseline;
+  margin: 0.1em;
+}
+`;
+    head.appendChild(styleTag);
+    styleTag.type = 'text/css';
+    D.append(styleTag, styleCSS);
+  })();
+
+  const outerContainer = D.attr(D.div(), 'id', 'wysiwyg-container'),
+        toolbars = D.attr(D.div(), 'id', 'wysiwyg-toolbars'),
+        toolbar1 = D.attr(D.div(), 'id', 'wysiwyg-toolBar1'),
+        // ^^^ formatting options
+        toolbar2 = D.attr(D.div(), 'id', 'wysiwyg-toolBar2')
+        // ^^^^ action icon buttons
+  ;
+  D.append(outerContainer, D.append(toolbars, toolbar1, toolbar2));
+
+  /** Returns a function which simplifies adding a list of options
+      to the given select element. See below for example usage. */
+  const addOptions = function(select){
+    return function ff(value, label){
+      D.option(select, value, label || value);
+      return ff;
+    };
+  };
+
+  ////////////////////////////////////////////////////////////////////////
+  // Edit mode selection (radio buttons).
+  const radio0 =
+        D.attr(
+          D.input('radio'),
+          'name','wysiwyg-mode',
+          'id', 'wysiwyg-mode-0',
+          'value',0,
+          'checked',true),
+        radio1 = D.attr(
+          D.input('radio'),
+          'id','wysiwyg-mode-1',
+          'name','wysiwyg-mode',
+          'value',1),
+        radios = D.append(
+          D.attr(D.span(), 'id', 'wysiwygEditMode'),
+          radio0, D.append(
+            D.attr(D.label(), 'for', 'wysiwyg-mode-0'),
+            "WYSIWYG"
+          ),
+          radio1, D.append(
+            D.attr(D.label(), 'for', 'wysiwyg-mode-1'),
+            "Raw HTML"
+          )
+        );
+  D.append(toolbar1, radios);
+  const radioHandler = function(){setDocMode(+this.value)};
+  radio0.addEventListener('change',radioHandler, false);
+  radio1.addEventListener('change',radioHandler, false);
+
+
+  ////////////////////////////////////////////////////////////////////////
+  // Text formatting options...
+  var select;
+  select = D.addClass(D.select(), 'format');
+  select.dataset.format = "formatblock";
+  D.append(toolbar1, select);
+  addOptions(select)(
+    '', '- formatting -')(
+    "h1", "Title 1 <h1>")(
+    "h2", "Title 2 <h2>")(
+    "h3", "Title 3 <h3>")(
+    "h4", "Title 4 <h4>")(
+    "h5", "Title 5 <h5>")(
+    "h6", "Subtitle <h6>")(
+    "p", "Paragraph <p>")(
+    "pre", "Preformatted <pre>");
+
+  select = D.addClass(D.select(), 'format');
+  select.dataset.format = "fontname";
+  D.append(toolbar1, select);
+  D.addClass(
+    D.option(select, '', '- font -'),
+    "heading"
+  );
+  addOptions(select)(
+    'Arial')(
+    'Arial Black')(
+    'Courier New')(
+    'Times New Roman');
+
+  select = D.addClass(D.select(), 'format');
+  D.append(toolbar1, select);
+  select.dataset.format = "fontsize";
+  D.addClass(
+    D.option(select, '', '- size -'),
+    "heading"
+  );
+  addOptions(select)(
+    "1", "Very small")(
+    "2", "A bit small")(
+    "3", "Normal")(
+    "4", "Medium-large")(
+    "5", "Big")(
+    "6", "Very big")(
+    "7", "Maximum");
+
+  select = D.addClass(D.select(), 'format');
+  D.append(toolbar1, select);
+  select.dataset.format = 'forecolor';
+  D.addClass(
+    D.option(select, '', '- color -'),
+    "heading"
+  );
+  addOptions(select)(
+    "red", "Red")(
+    "blue", "Blue")(
+    "green", "Green")(
+    "black", "Black")(
+    "grey", "Grey")(
+    "yellow", "Yellow")(
+    "cyan", "Cyan")(
+    "magenta", "Magenta");
+
+
+  ////////////////////////////////////////////////////////////////////////
+  // Icon-based toolbar...
+  /**
+     Inject the icons...
+
+     mkbuiltins strips anything which looks like a C++-style comment,
+     even if it's in a string literal, and thus the runs of "/"
+     characters in the DOM element data attributes have been mangled
+     to work around that: we simply use \x2f for every 2nd slash.
+  */
+  (function f(title,format,src){
+    const img = D.img();
+    D.append(toolbar2, img);
+    D.addClass(img, 'intLink');
+    D.attr(img, 'title', title);
+    img.dataset.format = format;
+    D.attr(img, 'src', 'string'===typeof src ? src : src.join(''));
+    return f;
+  })(
+    'Undo', 'undo',
+    ["data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7",
+     "/I19DV3NHa7P/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f",
+     "/\x2f/\x2f/\x2f/yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq704680",
+     "7TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfE",
+     "whdRIH4fh/DZMICe3/C4nBQBADs="]
+  )(
+    'Redo','redo',
+    ["data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1/",
+     "/\x2f/yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9Na",
+     "EDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw=="]
+  )(
+    "Remove formatting",
+    "removeFormat",
+    ["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AA",
+     "AABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwA",
+     "AAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB5",
+     "01ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqG",
+     "Xz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMz",
+     "deiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3/\x2fsf37/1/c02cCG1lB8f/\x2ff95",
+     "DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af/\x2f/2ckaHBp7+7wmavP5n76+P2C",
+     "lrLIYl8H9W36auJCbCxM4szMTJac7Kza/\x2f/\x2fR3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tA",
+     "wMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n",
+     "7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1",
+     "lsXc4Db7z8C3r8p7Qjf/\x2f/2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj",
+     "5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwf",
+     "fj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv/\x2fvPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrj",
+     "b/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0/\x2f/\x2ffv77/\x2f8nLy+7MCc",
+     "XmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc66",
+     "6s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7/\x2f8/4/\x2f9/pgOnH",
+     "6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="]
+  )(
+    "Bold",
+    "bold",
+    ["data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWAB",
+     "YAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs="]
+  )(
+    "Italic",
+    "italic",
+    ["data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf/\x2f/yH5BAEAAAMALA",
+     "AAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw=="]
+  )(
+    "Underline",
+    "underline",
+    ["data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj/\x2f/\x2f/\x2f/\x2fyH5BAEAAAIALA",
+     "AAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA",
+     "7"]
+  )(
+    "Left align",
+    "justifyleft",
+    ["data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWAB",
+     "YAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw=="]
+  )(
+    "Center align",
+    "justifycenter",
+    ["data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWAB",
+     "YAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7"]
+  )(
+    "Right align",
+    "justifyright",
+    ["data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWAB",
+     "YAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw=="]
+  )(
+    "Numbered list",
+    "insertorderedlist",
+    ["data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P/\x2f/\x2f",
+     "/\x2f/yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEO",
+     "zyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs="]
+  )(
+    "Dotted list",
+    "insertunorderedlist",
+    ["data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv/\x2f/\x2f",
+     "/\x2f/yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud6",
+     "4UwiuKnigGQliQuWOyKQykgAAOw=="]
+  )(
+    "Quote",
+    "formatblock",
+    ["data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2",
+     "R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P",
+     "/\x2f/\x2f/\x2f/\x2f/",
+     "/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f",
+     "/\x2f/\x2f/\x2fyH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2Cekk",
+     "ErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrT",
+     "q/b7/i8fp8PAQA7"]
+  )(
+    "Delete indentation",
+    "outdent",
+    ["data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P",
+     "/\x2f/yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMcz",
+     "sYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs="]
+  )(
+    "Add indentation",
+    "indent",
+    ["data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3N",
+     "Ha7P/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f",
+     "/\x2f/\x2f/yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650",
+     "B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw=="
+    ]
+  )(
+    "Hyperlink",
+    "createlink",
+    ["data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb",
+     "/I19Ha7Pv8/f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f",
+     "/yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq704682",
+     "7/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghG",
+     "i9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7"]
+  )(
+    "Cut",
+    "cut",
+    ["data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1",
+     "dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f",
+     "/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/",
+     "/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f",
+     "yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnE",
+     "bGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9",
+     "ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw=="]
+  )(
+    "Copy",
+    "copy",
+    ["data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31",
+     "iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OP",
+     "s++bx/Pv8/f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f",
+     "/yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/",
+     "kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQ",
+     "ACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAA",
+     "Grpy+wsbKzIiEAOw=="]
+  )(
+    /* Paste, when activated via JS, has no effect in some (maybe all)
+       environments. Activated externally, e.g. keyboard, it works. */
+    "Paste (does not work in all environments)",
+    "paste",
+    ["data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrp",
+     "qbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f/\x2f/\x2f/\x2f",
+     "/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/",
+     "/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f/\x2f",
+     "yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvB",
+     "SyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQ",
+     "o9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAA",
+     "MOaK+bLAOrtLUyt7i5uiUhADs="]
+  );
+
+  ////////////////////////////////////////////////////////////////////////
+  // The main editor area...
+  const oDoc = D.attr(D.div(), 'id', "wysiwygBox");
+  D.attr(oDoc, 'contenteditable', 'true');
+  D.append(outerContainer, oDoc);
+  
+  /* Initialize the document editor */
+  function initDoc() {
+    initEventHandlers();
+    if (!isWysiwyg()) { setDocMode(true); }
+  }
+
+  function initEventHandlers() {
+    //console.debug("initEventHandlers()");
+    const handleDropDown = function() {
+      formatDoc(this.dataset.format,this[this.selectedIndex].value);
+      this.selectedIndex = 0;
+    };
+    
+    const handleFormatButton = function() {
+      var extra;
+      switch (this.dataset.format) {
+      case 'createlink':
+        const sLnk = prompt('Target URL:','');
+        if(sLnk) extra = sLnk;
+        break;
+      case 'formatblock':
+        extra = 'blockquote';
+        break;
+      }
+      formatDoc(this.dataset.format, extra);
+    };
+
+    var i, controls = outerContainer.querySelectorAll('select.format');
+    for(i = 0; i < controls.length; i++) {
+      controls[i].addEventListener('change', handleDropDown, false);;
+    }
+    controls = outerContainer.querySelectorAll('.intLink');
+    for(i = 0; i < controls.length; i++) {
+      controls[i].addEventListener('click', handleFormatButton, false);
+    }
+  }
+
+  /* Return true if the document editor is in WYSIWYG mode.  Return
+  ** false if it is in Markup mode */
+  function isWysiwyg() {
+    return radio0.checked;
+  }
+
+  /* Run the editing command if in WYSIWYG mode */
+  function formatDoc(sCmd, sValue) {
+    if (isWysiwyg()){
+      try {
+        // First, try the W3C draft standard way, which has
+        // been working on all non-IE browsers for a while.
+        // It is also supported by IE11 and higher.
+        document.execCommand("styleWithCSS", false, false);
+      } catch (e) {
+        try {
+          // For IE9 or IE10, this should work.
+          document.execCommand("useCSS", 0, true);
+        } catch (e) {
+          // OK, that apparently did not work, do nothing.
+        }
+      }
+      document.execCommand(sCmd, false, sValue);
+      oDoc.focus();
+    }
+  }
+
+  /* Change the editing mode.  Convert to markup if the argument
+  ** is true and wysiwyg if the argument is false. */
+  function setDocMode(bToMarkup, content) {
+    if(undefined===content){
+      content = bToMarkup ? oDoc.innerHTML : oDoc.innerText;
+    }
+    if(!setDocMode.linebreak){
+      setDocMode.linebreak = new RegExp("</p><p>","ig");
+    }
+    if(!setDocMode.toHide){
+      setDocMode.toHide = toolbars.querySelectorAll(
+        '#wysiwyg-toolBar1 > *:not(#wysiwygEditMode), '
+          +'#wysiwyg-toolBar2');
+    }
+    if (bToMarkup) {
+      /* WYSIWYG -> Markup */
+      // Legacy did this: content=content.replace(setDocMode.linebreak,"</p>\n\n<p>")
+      D.append(D.clearElement(oDoc), content)
+      oDoc.style.whiteSpace = "pre-wrap";
+      D.addClass(setDocMode.toHide, 'hidden');
+    } else {
+      /* Markup -> WYSIWYG */
+      D.parseHtml(D.clearElement(oDoc), content);
+      oDoc.style.whiteSpace = "normal";
+      D.removeClass(setDocMode.toHide, 'hidden');
+    }
+    oDoc.focus();
+  }
+
+  ////////////////////////////////////////////////////////////////////////
+  // A hook which can be activated via a site skin to plug this editor
+  // into the wikiedit page.
+  F.page.wysiwyg = {
+    // only for debugging: oDoc: oDoc,
+    /*
+      Replaces wikiedit's default editor widget with this wysiwyg
+      editor.
+
+      Must either be called via an onPageLoad handler via the site
+      skin's footer or else it can be called manually from the dev
+      tools console. Calling it too early (e.g. in the page footer
+      outside of an onPageLoad handler) will crash because wikiedit
+      has not been initialized.
+    */
+    init: function(){
+      initDoc();
+      const content = F.page.wikiContent() || '';
+      var isDirty = false /* keep from stashing too often */;
+      F.page.setContentMethods(
+        function(){
+          const rc = isWysiwyg() ? oDoc.innerHTML : oDoc.innerText;
+          return rc;
+        },
+        function(content){
+          isDirty = false;
+          setDocMode(radio0.checked ? 0 : 1, content);
+        }
+      );
+      oDoc.addEventListener('blur', function(){
+        if(isDirty) F.page.notifyOfChange();
+      }, false);
+      oDoc.addEventListener('input', function(){isDirty = true}, false);
+      F.page.wikiContent(content)/*feed it back in to our widget*/;
+      F.page.replaceEditorElement(outerContainer);
+      F.message("Replaced wiki editor widget with legacy wysiwyg editor.");
+    }
+  };
+})(window.fossil);