use a textarea to edit notes

Former-commit-id: dba3d298a38fc23eefc1fba56ea436717774397c

extension/ui/content/content-ui-editor-web.js

@@ -129,6 +129,10 @@
 				if (noteElement) {
 					noteElement.classList.remove(NOTE_HIDDEN_CLASS);
 				}
+				const mainElement = templateElement.querySelector("textarea");
+				if (mainElement) {
+					mainElement.textContent = mainElement.value;
+				}
 			});
 			delete doc.body.contentEditable;
 			const scriptElement = doc.createElement("script");
@@ -152,7 +156,7 @@
 		const containerElement = document.createElement(NOTE_TAGNAME);
 		const noteElement = document.createElement("div");
 		const headerElement = document.createElement("header");
-		const mainElement = document.createElement("main");
+		const mainElement = document.createElement("textarea");
 		const resizeElement = document.createElement("div");
 		const removeNoteElement = document.createElement("img");
 		const anchorIconElement = document.createElement("img");
@@ -203,12 +207,12 @@
 		const noteShadow = containerElement.shadowRoot;
 		const noteElement = noteShadow.childNodes[1];
 		const headerElement = noteShadow.querySelector("header");
-		const mainElement = noteShadow.querySelector("main");
+		const mainElement = noteShadow.querySelector("textarea");
 		const noteId = containerElement.dataset.noteId;
 		const resizeElement = noteShadow.querySelector(".note-resize");
 		const anchorIconElement = noteShadow.querySelector(".note-anchor");
 		const removeNoteElement = noteShadow.querySelector(".note-remove");
-		mainElement.contentEditable = editable;
+		mainElement.readOnly = !editable;
 		if (!editable) {
 			anchorIconElement.style.setProperty("display", "none", "important");
 		} else {
@@ -265,14 +269,7 @@
 		};
 		noteElement.onmousedown = () => {
 			selectNote(noteElement);
-		};
-		noteElement.onpaste = event => {
-			event.preventDefault();
-			const dataTransferItem = Array.from(event.clipboardData.items).find(item => item.type == "text/plain");
-			if (dataTransferItem) {
-				dataTransferItem.getAsString(value => mainElement.textContent = value);
-			}
-		};
+		};		
 
 		function moveNote(event, deltaX, deltaY) {
 			event.preventDefault();

extension/ui/editor/editor-note-web.css

@@ -30,7 +30,7 @@
     opacity: .75;
 }
 
-.note-closed main {
+.note-closed textarea {
     display: none;
 }
 
@@ -38,19 +38,18 @@
     display: none;
 }
 
-.note main {
+.note textarea {
     all: initial;
-    -moz-user-modify: read-write;
+    white-space: pre;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     padding: 3px;
     height: 100%;
-    overflow: auto;
-    -webkit-user-modify: read-write;
     border: 1px solid transparent;
+    resize: none;
 }
 
-.note main:focus {
+.note textarea:focus {
     border: 1px dotted rgb(160, 160, 160);
 }
 
@@ -126,7 +125,7 @@
     background-color: #f5f545;
 }
 
-.note-yellow main {
+.note-yellow textarea {
     background-color: #ffff7c;
 }
 
@@ -134,7 +133,7 @@
     background-color: #ffa59f;
 }
 
-.note-pink main {
+.note-pink textarea {
     background-color: #ffbbb6;
 }
 
@@ -142,7 +141,7 @@
     background-color: #84c8ff;
 }
 
-.note-blue main {
+.note-blue textarea {
     background-color: #95d0ff;
 }
 
@@ -150,6 +149,6 @@
     background-color: #93ef8d;
 }
 
-.note-green main {
+.note-green textarea {
     background-color: #9cff95;
 }