notes editor - dynamically load 'tiny' script

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;

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>

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();
   }
 }