From fe8457ac4cb341962a21bc410cab875ed4d37891 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Mon, 14 Feb 2022 22:51:31 +0300
Subject: [PATCH 1/6] notes editor - use tiny cloud editor

---
 index.css                  |  21 +++-
 index.html                 |  21 ++--
 libs/pell.min.js           |   2 -
 modules/ui/general.js      |   5 +-
 modules/ui/notes-editor.js | 227 +++++++++++++++++++------------------
 5 files changed, 142 insertions(+), 134 deletions(-)
 delete mode 100644 libs/pell.min.js

diff --git a/index.css b/index.css
index 17913cb4..e7a1a231 100644
--- a/index.css
+++ b/index.css
@@ -2036,7 +2036,7 @@ div.textual span,
   fill: none;
 }
 
-div#notes {
+#notes {
   display: none;
   position: fixed;
   width: 28vw;
@@ -2046,22 +2046,31 @@ div#notes {
   border: 1px solid #5e4fa2;
   background: rgba(255, 250, 228, 0.7);
   box-shadow: 2px 2px 5px -3px #3a2804;
-  white-space: pre-line;
 }
 
-div#notesHeader {
+@media screen and (max-width: 600px) {
+  #notes {
+    width: 50vw;
+  }
+}
+
+#notesHeader {
   font-weight: bold;
   font-size: 1.3em;
-  padding: 0 0 4px 14px;
+  padding: 16px 0 4px 12px;
   border-bottom: 1px solid #5e4fa2;
 }
 
-div#notesBody {
-  padding: 0 1em;
+#notesBody {
+  padding: 14px 12px;
   max-height: 80vh;
   overflow: auto;
 }
 
+#notesBody p {
+  margin: 4px;
+}
+
 svg.button {
   position: relative;
   background-color: transparent;
diff --git a/index.html b/index.html
index 698bfb94..da81a2bf 100644
--- a/index.html
+++ b/index.html
@@ -2911,22 +2911,20 @@
       </div>
     </div>
 
-    <div id="notesEditor" class="dialog stable textual" style="display: none">
-      <div>
-        <span>Select object: </span>
-        <select id="notesSelect" data-tip="Select object" style="width: 12em"></select>
-        <span>Object name: </span>
-        <input id="notesName" data-tip="Type to change object name" autocorrect="off" spellcheck="false" style="width: 16em">
+    <div id="notesEditor" class="dialog stable" style="display: none">
+      <div style="margin-bottom: 0.3em">
+        <strong>Element: </strong>
+        <select id="notesSelect" data-tip="Select element id" style="width: 12em"></select>
+        <strong>Element name: </strong>
+        <input id="notesName" data-tip="Set element name" autocorrect="off" spellcheck="false" style="width: 16em">
         <span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
       </div>
-      <div id="notesText" data-tip="Type and style object description" style="padding: .4em 0"></div>
-      <div>
-        <button id="notesSpeak" data-tip="Speak the note. You can change voice and language in options" class="icon-voice"></button>
+      <div id="notesLegend" style="padding: .4em 0"></div>
+      <div style="margin-top: 0.3em">
         <button id="notesFocus" data-tip="Focus on selected object" class="icon-target"></button>
         <button id="notesPin" data-tip="Toggle notes box dispay: hide or do not hide the box on mouse move" class="icon-pin"></button>
         <button id="notesDownload" data-tip="Download notes to PC" class="icon-download"></button>
         <button id="notesUpload" data-tip="Upload notes from PC" class="icon-upload"></button>
-        <button id="notesClearStyle" data-tip="Remove all styling, get plain text only" class="icon-eraser"></button>
         <button id="notesRemove" data-tip="Remove this note" class="icon-trash fastDelete"></button>
       </div>
     </div>
@@ -4549,7 +4547,6 @@
   <script defer src="modules/coa-renderer.js"></script>
   <script defer src="libs/rgbquant.min.js"></script>
   <script defer src="libs/jquery.ui.touch-punch.min.js"></script>
-  <script defer src="libs/pell.min.js"></script>
   <script defer src="libs/jszip.min.js"></script>
 
   <script defer src="modules/io/save.js"></script>
@@ -4558,6 +4555,8 @@
   <script defer src="modules/io/export.js"></script>
   <script defer src="modules/io/export-json.js"></script>
 
+  <script src="https://cdn.tiny.cloud/1/4i6a79ymt2y0cagke174jp3meoi28vyecrch12e5puyw3p9a/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
+
   <!-- Web Components -->
   <script defer src="components/fill-box.js"></script>
 </body>
diff --git a/libs/pell.min.js b/libs/pell.min.js
deleted file mode 100644
index c5be57e5..00000000
--- a/libs/pell.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// https://github.com/jaredreich/pell, MIT License
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Pell=t()}(this,function(){"use strict";const e=(e,t,n)=>e.addEventListener(t,n),t=(e,t)=>e.appendChild(t),n=e=>document.createElement(e),i=e=>document.queryCommandState(e),o=(e,t=null)=>document.execCommand(e,!1,t),l={bold:{icon:"<b>B</b>",title:"Bold",state:()=>i("bold"),result:()=>o("bold")},italic:{icon:"<i>I</i>",title:"Italic",state:()=>i("italic"),result:()=>o("italic")},underline:{icon:"<u>U</u>",title:"Underline",state:()=>i("underline"),result:()=>o("underline")},strikethrough:{icon:"<strike>S</strike>",title:"Strike-through",state:()=>i("strikeThrough"),result:()=>o("strikeThrough")},heading1:{icon:"<b>H<sub>1</sub></b>",title:"Heading 1",result:()=>o("formatBlock","<h1>")},heading2:{icon:"<b>H<sub>2</sub></b>",title:"Heading 2",result:()=>o("formatBlock","<h2>")},paragraph:{icon:"&#182;",title:"Paragraph",result:()=>o("formatBlock","<p>")},quote:{icon:"&#8220; &#8221;",title:"Quote",result:()=>o("formatBlock","<blockquote>")},olist:{icon:"&#35;",title:"Ordered List",result:()=>o("insertOrderedList")},ulist:{icon:"&#8226;",title:"Unordered List",result:()=>o("insertUnorderedList")},code:{icon:"&lt;/&gt;",title:"Code",result:()=>o("formatBlock","<pre>")},line:{icon:"&#8213;",title:"Horizontal Line",result:()=>o("insertHorizontalRule")},link:{icon:"&#128279;",title:"Link",result:()=>navigator.clipboard.readText().then(e=>o("createLink",e))},image:{icon:"&#128247;",title:"Image",result:()=>{navigator.clipboard.readText().then(e=>o("insertImage",e)),o("enableObjectResizing")}}},r={actionbar:"pell-actionbar",button:"pell-button",content:"pell-content",selected:"pell-button-selected"};return{exec:o,init:i=>{const a=i.actions?i.actions.map(e=>"string"==typeof e?l[e]:l[e.name]?{...l[e.name],...e}:e):Object.keys(l).map(e=>l[e]),s={...r,...i.classes},c=i.defaultParagraphSeparator||"div",u=n("div");u.className=s.actionbar,t(i.element,u);const d=i.element.content=n("div");return d.contentEditable=!0,d.className=s.content,d.oninput=(({target:{firstChild:e}})=>{e&&3===e.nodeType?o("formatBlock",`<${c}>`):"<br>"===d.innerHTML&&(d.innerHTML=""),i.onChange(d.innerHTML)}),d.onkeydown=(e=>{"Enter"===e.key&&"blockquote"===(e=>document.queryCommandValue(e))("formatBlock")&&setTimeout(()=>o("formatBlock",`<${c}>`),0)}),t(i.element,d),a.forEach(i=>{const o=n("button");if(o.className=s.button,o.innerHTML=i.icon,o.title=i.title,o.setAttribute("type","button"),o.onclick=(()=>i.result()&&d.focus()),i.state){const t=()=>o.classList[i.state()?"add":"remove"](s.selected);e(d,"keyup",t),e(d,"mouseup",t),e(o,"click",t)}t(u,o)}),i.styleWithCSS&&o("styleWithCSS"),o("defaultParagraphSeparator",c),i.element}}});
\ No newline at end of file
diff --git a/modules/ui/general.js b/modules/ui/general.js
index 5823afec..b7a6255d 100644
--- a/modules/ui/general.js
+++ b/modules/ui/general.js
@@ -70,7 +70,8 @@ function mouseMove() {
   const point = d3.mouse(this);
   const i = findCell(point[0], point[1]); // pack cell id
   if (i === undefined) return;
-  showNotes(d3.event, i);
+
+  showNotes(d3.event);
   const g = findGridCell(point[0], point[1]); // grid cell id
   if (tooltip.dataset.main) showMainTip();
   else showMapTooltip(point, d3.event, i, g);
@@ -78,7 +79,7 @@ function mouseMove() {
 }
 
 // show note box on hover (if any)
-function showNotes(e, i) {
+function showNotes(e) {
   if (notesEditor.offsetParent) return;
   let id = e.target.id || e.target.parentNode.id || e.target.parentNode.parentNode.id;
   if (e.target.parentNode.parentNode.id === "burgLabels") id = "burg" + e.target.dataset.id;
diff --git a/modules/ui/notes-editor.js b/modules/ui/notes-editor.js
index 3ad4b979..5ad989e2 100644
--- a/modules/ui/notes-editor.js
+++ b/modules/ui/notes-editor.js
@@ -1,25 +1,22 @@
 "use strict";
 
 function editNotes(id, name) {
+  // elements
+  const notesLegend = document.getElementById("notesLegend");
+  const notesName = document.getElementById("notesName");
+  const notesSelect = document.getElementById("notesSelect");
+  const notesPin = document.getElementById("notesPin");
+
   // update list of objects
-  const select = document.getElementById("notesSelect");
-  select.options.length = 0;
+  notesSelect.options.length = 0;
   for (const note of notes) {
-    select.options.add(new Option(note.id, note.id));
+    notesSelect.options.add(new Option(note.id, note.id));
   }
 
-  // initiate pell (html editor)
-  const notesText = document.getElementById("notesText");
-  notesText.innerHTML = "";
-  const editor = Pell.init({
-    element: notesText,
-    onChange: html => {
-      const note = notes.find(note => note.id === select.value);
-      if (!note) return;
-      note.legend = html;
-      showNote(note);
-    }
-  });
+  // update pin notes icon
+  const notesArePinned = options.pinNotes;
+  if (notesArePinned) notesPin.classList.add("pressed");
+  else notesPin.classList.remove("pressed");
 
   // select an object
   if (notes.length || id) {
@@ -29,136 +26,140 @@ function editNotes(id, name) {
       if (!name) name = id;
       note = {id, name, legend: ""};
       notes.push(note);
-      select.options.add(new Option(id, id));
+      notesSelect.options.add(new Option(id, id));
     }
-    select.value = id;
+
+    notesSelect.value = id;
     notesName.value = note.name;
-    editor.content.innerHTML = note.legend;
-    showNote(note);
+    notesLegend.innerHTML = note.legend;
+    initEditor();
+    updateNotesBox(note);
   } else {
-    editor.content.innerHTML = "There are no added notes. Click on element (e.g. label) and add a free text note";
-    document.getElementById("notesName").value = "";
+    // if notes array is empty
+    notesName.value = "";
+    notesLegend.innerHTML = "No notes added. Click on an element (e.g. label or marker) and add a free text note";
   }
 
-  // open a dialog
   $("#notesEditor").dialog({
     title: "Notes Editor",
-    minWidth: "40em",
-    width: "50vw",
-    position: {my: "center", at: "center", of: "svg"}
+    width: "70vw",
+    height: window.innerHeight * 0.75,
+    position: {my: "center", at: "center", of: "svg"},
+    close: removeEditor
   });
+  $("[aria-describedby='notesEditor']").css("top", "10vh");
 
   if (modules.editNotes) return;
   modules.editNotes = true;
 
   // add listeners
-  document.getElementById("notesSelect").addEventListener("change", changeObject);
+  document.getElementById("notesSelect").addEventListener("change", changeElement);
   document.getElementById("notesName").addEventListener("input", changeName);
-  document.getElementById("notesPin").addEventListener("click", () => (options.pinNotes = !options.pinNotes));
-  document.getElementById("notesSpeak").addEventListener("click", () => speak(editor.content.innerHTML));
+  document.getElementById("notesPin").addEventListener("click", toggleNotesPin);
   document.getElementById("notesFocus").addEventListener("click", validateHighlightElement);
   document.getElementById("notesDownload").addEventListener("click", downloadLegends);
   document.getElementById("notesUpload").addEventListener("click", () => legendsToLoad.click());
   document.getElementById("legendsToLoad").addEventListener("change", function () {
     uploadFile(this, uploadLegends);
   });
-  document.getElementById("notesClearStyle").addEventListener("click", clearStyle);
   document.getElementById("notesRemove").addEventListener("click", triggerNotesRemove);
 
-  function showNote(note) {
-    document.getElementById("notes").style.display = "block";
-    document.getElementById("notesHeader").innerHTML = note.name;
-    document.getElementById("notesBody").innerHTML = note.legend;
-  }
-
-  function changeObject() {
-    const note = notes.find(note => note.id === this.value);
-    if (!note) return;
-    notesName.value = note.name;
-    editor.content.innerHTML = note.legend;
-  }
-
-  function changeName() {
-    const id = document.getElementById("notesSelect").value;
-    const note = notes.find(note => note.id === id);
-    if (!note) return;
-    note.name = this.value;
-    showNote(note);
-  }
-
-  function validateHighlightElement() {
-    const select = document.getElementById("notesSelect");
-    const element = document.getElementById(select.value);
-
-    // if element is not found
-    if (element === null) {
-      alertMessage.innerHTML = "Related element is not found. Would you like to remove the note?";
-      $("#alert").dialog({
-        resizable: false,
-        title: "Element not found",
-        buttons: {
-          Remove: function () {
-            $(this).dialog("close");
-            removeLegend();
-          },
-          Keep: function () {
-            $(this).dialog("close");
-          }
-        }
-      });
-      return;
-    }
-
-    highlightElement(element, 3); // if element is found
-  }
-
-  function downloadLegends() {
-    const data = JSON.stringify(notes);
-    const name = getFileName("Notes") + ".txt";
-    downloadFile(data, name);
-  }
-
-  function uploadLegends(dataLoaded) {
-    if (!dataLoaded) {
-      tip("Cannot load the file. Please check the data format", false, "error");
-      return;
-    }
-    notes = JSON.parse(dataLoaded);
-    document.getElementById("notesSelect").options.length = 0;
-    editNotes(notes[0].id, notes[0].name);
-  }
-
-  function clearStyle() {
-    editor.content.innerHTML = editor.content.textContent;
-  }
-
-  function triggerNotesRemove() {
-    alertMessage.innerHTML = "Are you sure you want to remove the selected note?";
-    $("#alert").dialog({
-      resizable: false,
-      title: "Remove note",
-      buttons: {
-        Remove: function () {
-          $(this).dialog("close");
-          removeLegend();
-        },
-        Keep: function () {
-          $(this).dialog("close");
-        }
+  function initEditor() {
+    tinymce.init({
+      selector: "#notesLegend",
+      height: "90%",
+      menubar: false,
+      plugins: `autolink lists link charmap print formatpainter casechange code fullscreen image link media table paste hr checklist wordcount`,
+      toolbar: `fullscreen code | undo redo | bold italic strikethrough forecolor backcolor | formatpainter removeformat | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media table | blockquote hr casechange checklist charmap print | fontselect fontsizeselect`,
+      media_alt_source: false,
+      media_poster: false,
+      setup: editor => {
+        editor.on("Change", updateLegend);
       }
     });
   }
 
+  function updateLegend() {
+    const note = notes.find(note => note.id === notesSelect.value);
+    if (note && tinymce?.activeEditor) {
+      note.legend = tinymce.activeEditor.getContent();
+      updateNotesBox(note);
+    }
+  }
+
+  function updateNotesBox(note) {
+    document.getElementById("notesHeader").innerHTML = note.name;
+    document.getElementById("notesBody").innerHTML = note.legend;
+  }
+
+  function changeElement() {
+    const note = notes.find(note => note.id === this.value);
+    if (!note) return tip("Note element is not found", true, "error", 4000);
+
+    notesName.value = note.name;
+    tinymce.activeEditor.setContent(note.legend);
+    updateNotesBox(note);
+  }
+
+  function changeName() {
+    const note = notes.find(note => note.id === notesSelect.value);
+    if (!note) return tip("Note element is not found", true, "error", 4000);
+
+    note.name = this.value;
+  }
+
+  function validateHighlightElement() {
+    const element = document.getElementById(notesSelect.value);
+    if (element) return highlightElement(element, 3);
+
+    confirmationDialog({
+      title: "Element not found",
+      message: "Note element is not found. Would you like to remove the note?",
+      confirm: "Remove",
+      cancel: "Keep",
+      onConfirm: removeLegend
+    });
+  }
+
+  function downloadLegends() {
+    const notesData = JSON.stringify(notes);
+    const name = getFileName("Notes") + ".txt";
+    downloadFile(notesData, name);
+  }
+
+  function uploadLegends(dataLoaded) {
+    if (!dataLoaded) return tip("Cannot load the file. Please check the data format", false, "error");
+    notes = JSON.parse(dataLoaded);
+    notesSelect.options.length = 0;
+    editNotes(notes[0].id, notes[0].name);
+  }
+
+  function triggerNotesRemove() {
+    confirmationDialog({
+      title: "Remove note",
+      message: "Are you sure you want to remove the selected note? There is no way to undo this action",
+      confirm: "Remove",
+      onConfirm: removeLegend
+    });
+  }
+
   function removeLegend() {
-    const select = document.getElementById("notesSelect");
-    const index = notes.findIndex(n => n.id === select.value);
+    const index = notes.findIndex(n => n.id === notesSelect.value);
     notes.splice(index, 1);
-    select.options.length = 0;
+    notesSelect.options.length = 0;
     if (!notes.length) {
       $("#notesEditor").dialog("close");
       return;
     }
-    notesText.innerHTML = "";
     editNotes(notes[0].id, notes[0].name);
   }
+
+  function toggleNotesPin() {
+    options.pinNotes = !options.pinNotes;
+    this.classList.toggle("pressed");
+  }
+
+  function removeEditor() {
+    tinymce.remove();
+  }
 }

From b970ea12ad236e0be94d1ce501713379b5a66241 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Mon, 14 Feb 2022 23:53:15 +0300
Subject: [PATCH 2/6] notes editor - dynamically load 'tiny' script

---
 index.css                  | 50 ++++++++-------------------------
 index.html                 |  4 +--
 modules/ui/notes-editor.js | 57 ++++++++++++++++++++++++++------------
 3 files changed, 51 insertions(+), 60 deletions(-)

diff --git a/index.css b/index.css
index e7a1a231..f85ba873 100644
--- a/index.css
+++ b/index.css
@@ -2071,6 +2071,17 @@ div.textual span,
   margin: 4px;
 }
 
+#notesLegend {
+  height: 87%;
+  outline: 0;
+  overflow-y: auto;
+  padding: 0.6em;
+  font-family: Copperplate, monospace;
+  background-color: #fff;
+  border: 1px solid #dedede;
+  color: #000;
+}
+
 svg.button {
   position: relative;
   background-color: transparent;
@@ -2327,45 +2338,6 @@ svg.button {
   stroke-width: 0;
 }
 
-.pell {
-  border: 1px solid hsla(0, 0%, 4%, 0.1);
-}
-
-.pell,
-.pell-content {
-  box-sizing: border-box;
-}
-
-.pell-content {
-  height: 14em;
-  outline: 0;
-  overflow-y: auto;
-  padding: 0.6em;
-  font-family: Copperplate, monospace;
-  background-color: #fff;
-  border: 1px solid #dedede;
-}
-
-.pell-actionbar {
-  background-color: #fff;
-  border: 1px solid #dedede;
-  border-bottom: 0;
-}
-
-.pell-button {
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  height: 30px;
-  outline: 0;
-  width: 30px;
-  vertical-align: bottom;
-}
-
-.pell-button-selected {
-  background-color: #f0f0f0;
-}
-
 #debug {
   font-size: 1px;
   opacity: 0.8;
diff --git a/index.html b/index.html
index da81a2bf..517d69dd 100644
--- a/index.html
+++ b/index.html
@@ -2919,7 +2919,7 @@
         <input id="notesName" data-tip="Set element name" autocorrect="off" spellcheck="false" style="width: 16em">
         <span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
       </div>
-      <div id="notesLegend" style="padding: .4em 0"></div>
+      <div id="notesLegend" contenteditable="true"></div>
       <div style="margin-top: 0.3em">
         <button id="notesFocus" data-tip="Focus on selected object" class="icon-target"></button>
         <button id="notesPin" data-tip="Toggle notes box dispay: hide or do not hide the box on mouse move" class="icon-pin"></button>
@@ -4555,8 +4555,6 @@
   <script defer src="modules/io/export.js"></script>
   <script defer src="modules/io/export-json.js"></script>
 
-  <script src="https://cdn.tiny.cloud/1/4i6a79ymt2y0cagke174jp3meoi28vyecrch12e5puyw3p9a/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
-
   <!-- Web Components -->
   <script defer src="components/fill-box.js"></script>
 </body>
diff --git a/modules/ui/notes-editor.js b/modules/ui/notes-editor.js
index 5ad989e2..d5403b08 100644
--- a/modules/ui/notes-editor.js
+++ b/modules/ui/notes-editor.js
@@ -55,6 +55,7 @@ function editNotes(id, name) {
   // add listeners
   document.getElementById("notesSelect").addEventListener("change", changeElement);
   document.getElementById("notesName").addEventListener("input", changeName);
+  document.getElementById("notesLegend").addEventListener("blur", updateLegend);
   document.getElementById("notesPin").addEventListener("click", toggleNotesPin);
   document.getElementById("notesFocus").addEventListener("click", validateHighlightElement);
   document.getElementById("notesDownload").addEventListener("click", downloadLegends);
@@ -64,27 +65,45 @@ function editNotes(id, name) {
   });
   document.getElementById("notesRemove").addEventListener("click", triggerNotesRemove);
 
-  function initEditor() {
-    tinymce.init({
-      selector: "#notesLegend",
-      height: "90%",
-      menubar: false,
-      plugins: `autolink lists link charmap print formatpainter casechange code fullscreen image link media table paste hr checklist wordcount`,
-      toolbar: `fullscreen code | undo redo | bold italic strikethrough forecolor backcolor | formatpainter removeformat | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media table | blockquote hr casechange checklist charmap print | fontselect fontsizeselect`,
-      media_alt_source: false,
-      media_poster: false,
-      setup: editor => {
-        editor.on("Change", updateLegend);
+  async function initEditor() {
+    if (!window.tinymce) {
+      const url = "https://cdn.tiny.cloud/1/4i6a79ymt2y0cagke174jp3meoi28vyecrch12e5puyw3p9a/tinymce/5/tinymce.min.js";
+      try {
+        await import(url);
+      } catch (error) {
+        // error may be caused by failed request being cached, try again with random hash
+        try {
+          const hash = Math.random().toString(36).substring(2, 15);
+          await import(`${url}#${hash}`);
+        } catch (error) {
+          console.error(error);
+        }
       }
-    });
+    }
+
+    if (window.tinymce) {
+      tinymce.init({
+        selector: "#notesLegend",
+        height: "90%",
+        menubar: false,
+        plugins: `autolink lists link charmap print formatpainter casechange code fullscreen image link media table paste hr checklist wordcount`,
+        toolbar: `fullscreen code | undo redo | bold italic strikethrough forecolor backcolor | formatpainter removeformat | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media table | blockquote hr casechange checklist charmap print | fontselect fontsizeselect`,
+        media_alt_source: false,
+        media_poster: false,
+        setup: editor => {
+          editor.on("Change", updateLegend);
+        }
+      });
+    }
   }
 
   function updateLegend() {
     const note = notes.find(note => note.id === notesSelect.value);
-    if (note && tinymce?.activeEditor) {
-      note.legend = tinymce.activeEditor.getContent();
-      updateNotesBox(note);
-    }
+    if (!note) return tip("Note element is not found", true, "error", 4000);
+
+    const isTinyEditorActive = window.tinymce?.activeEditor;
+    note.legend = isTinyEditorActive ? tinymce.activeEditor.getContent() : notesLegend.innerHTML;
+    updateNotesBox(note);
   }
 
   function updateNotesBox(note) {
@@ -97,8 +116,10 @@ function editNotes(id, name) {
     if (!note) return tip("Note element is not found", true, "error", 4000);
 
     notesName.value = note.name;
-    tinymce.activeEditor.setContent(note.legend);
+    notesLegend.innerHTML = note.legend;
     updateNotesBox(note);
+
+    if (window.tinymce) tinymce.activeEditor.setContent(note.legend);
   }
 
   function changeName() {
@@ -160,6 +181,6 @@ function editNotes(id, name) {
   }
 
   function removeEditor() {
-    tinymce.remove();
+    if (window.tinymce) tinymce.remove();
   }
 }

From 3c72a2908d3a7695d8d019b43e499c3d6e0e34ac Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Mon, 14 Feb 2022 23:56:28 +0300
Subject: [PATCH 3/6] notes editor - reorganize buttons

---
 modules/ui/notes-editor.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/ui/notes-editor.js b/modules/ui/notes-editor.js
index d5403b08..b6dd712c 100644
--- a/modules/ui/notes-editor.js
+++ b/modules/ui/notes-editor.js
@@ -87,7 +87,7 @@ function editNotes(id, name) {
         height: "90%",
         menubar: false,
         plugins: `autolink lists link charmap print formatpainter casechange code fullscreen image link media table paste hr checklist wordcount`,
-        toolbar: `fullscreen code | undo redo | bold italic strikethrough forecolor backcolor | formatpainter removeformat | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media table | blockquote hr casechange checklist charmap print | fontselect fontsizeselect`,
+        toolbar: `code | undo redo | bold italic strikethrough forecolor backcolor | formatpainter removeformat | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media table | fontselect fontsizeselect | blockquote hr casechange checklist charmap | print fullscreen`,
         media_alt_source: false,
         media_poster: false,
         setup: editor => {

From 00f8a62c3bc4dc3a1377ee283bb0b7a50d4df470 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Tue, 15 Feb 2022 00:10:55 +0300
Subject: [PATCH 4/6] notes - disallow iframe actions

---
 index.css                    | 5 +++++
 modules/markers-generator.js | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/index.css b/index.css
index f85ba873..ed81773f 100644
--- a/index.css
+++ b/index.css
@@ -2067,6 +2067,11 @@ div.textual span,
   overflow: auto;
 }
 
+#notesBody > iframe {
+  pointer-events: none;
+  user-select: none;
+}
+
 #notesBody p {
   margin: 4px;
 }
diff --git a/modules/markers-generator.js b/modules/markers-generator.js
index 1aefca5e..50acf34d 100644
--- a/modules/markers-generator.js
+++ b/modules/markers-generator.js
@@ -519,7 +519,7 @@ window.Markers = (function () {
 
       const dungeonSeed = `${seed}${cell}`;
       const name = "Dungeon";
-      const legend = `<div>Undiscovered dungeon. See <a href="https://watabou.github.io/one-page-dungeon/?seed=${dungeonSeed}" target="_blank">One page dungeon</a></div><iframe style="height: 33vh" src="https://watabou.github.io/one-page-dungeon/?seed=${dungeonSeed}" sandbox="allow-scripts allow-same-origin"></iframe>`;
+      const legend = `<div>Undiscovered dungeon. See <a href="https://watabou.github.io/one-page-dungeon/?seed=${dungeonSeed}" target="_blank">One page dungeon</a></div><iframe src="https://watabou.github.io/one-page-dungeon/?seed=${dungeonSeed}" sandbox="allow-scripts allow-same-origin"></iframe>`;
       notes.push({id, name, legend});
       quantity--;
     }

From 0c6f98070eb175352eff862676e241fe3b9063cf Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Tue, 15 Feb 2022 00:15:42 +0300
Subject: [PATCH 5/6] notes editor - add separator

---
 modules/ui/notes-editor.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/ui/notes-editor.js b/modules/ui/notes-editor.js
index b6dd712c..872437fa 100644
--- a/modules/ui/notes-editor.js
+++ b/modules/ui/notes-editor.js
@@ -87,7 +87,7 @@ function editNotes(id, name) {
         height: "90%",
         menubar: false,
         plugins: `autolink lists link charmap print formatpainter casechange code fullscreen image link media table paste hr checklist wordcount`,
-        toolbar: `code | undo redo | bold italic strikethrough forecolor backcolor | formatpainter removeformat | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media table | fontselect fontsizeselect | blockquote hr casechange checklist charmap | print fullscreen`,
+        toolbar: `code | undo redo | bold italic strikethrough | forecolor backcolor | formatpainter removeformat | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media table | fontselect fontsizeselect | blockquote hr casechange checklist charmap | print fullscreen`,
         media_alt_source: false,
         media_poster: false,
         setup: editor => {

From 3d22b37a3c32f4ddc8d91e3c5f9de705d7aa326b Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Tue, 15 Feb 2022 00:19:29 +0300
Subject: [PATCH 6/6] pump version to 1.731

---
 main.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/main.js b/main.js
index 72c726ab..713b5021 100644
--- a/main.js
+++ b/main.js
@@ -2,7 +2,7 @@
 // https://github.com/Azgaar/Fantasy-Map-Generator
 
 "use strict";
-const version = "1.73"; // generator version
+const version = "1.731"; // generator version
 document.title += " v" + version;
 
 // switches to disable/enable logging features
@@ -434,9 +434,10 @@ function showWelcomeMessage() {
   const discord = link("https://discordapp.com/invite/X7E84HU", "Discord server");
   const patreon = link("https://www.patreon.com/azgaar", "Patreon");
 
-  alertMessage.innerHTML = `The Fantasy Map Generator is updated up to version <b>${version}</b>.
+  alertMessage.innerHTML = `The Fantasy Map Generator is updated up to version <strong>${version}</strong>.
     This version is compatible with ${changelog}, loaded <i>.map</i> files will be auto-updated.
-    <ul><b>Latest changes:</b>
+    <ul><strong>Latest changes:</strong>
+      <li>Advanced notes editor</li>
       <li>Zones editor: filter by type</li>
       <li>Color picker: new hatchings</li>
       <li>New style presets: Cyberpunk and Atlas</li>
@@ -444,7 +445,6 @@ function showWelcomeMessage() {
       <li>4 new textures</li>
       <li>Province capture logic rework</li>
       <li>Button to release all provinces</li>
-      <li>Limit military units by biome, state, culture and religion</li>
     </ul>
 
     <p>Join our ${discord} and ${reddit} to ask questions, share maps, discuss the Generator and Worlbuilding, report bugs and propose new features.</p>