add support of `cite`attribute in notes

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

@@ -1132,6 +1132,7 @@ pre code {
 				element.style.setProperty(pointerEvents, "none", "important");
 			});
 			document.replaceChild(contentDocument.documentElement, document.documentElement);
+			document.querySelectorAll("[data-single-file-note-refs]").forEach(noteRefElement => noteRefElement.dataset.singleFileNoteRefs = noteRefElement.dataset.singleFileNoteRefs.replace(/,/g, " "));
 			deserializeShadowRoots(document);
 			document.querySelectorAll(NOTE_TAGNAME).forEach(containerElement => attachNoteListeners(containerElement, true));
 			document.documentElement.appendChild(getStyleElement(HIGHLIGHTS_WEB_STYLESHEET));
@@ -1167,6 +1168,7 @@ pre code {
 		const containerElement = document.createElement(NOTE_TAGNAME);
 		const noteElement = document.createElement("div");
 		const headerElement = document.createElement("header");
+		const blockquoteElement = document.createElement("blockquote");
 		const mainElement = document.createElement("textarea");
 		const resizeElement = document.createElement("div");
 		const removeNoteElement = document.createElement("img");
@@ -1174,13 +1176,15 @@ pre code {
 		const noteShadow = containerElement.attachShadow({ mode: "open" });
 		headerElement.appendChild(anchorIconElement);
 		headerElement.appendChild(removeNoteElement);
+		blockquoteElement.appendChild(mainElement);
 		noteElement.appendChild(headerElement);
-		noteElement.appendChild(mainElement);
+		noteElement.appendChild(blockquoteElement);
 		noteElement.appendChild(resizeElement);
 		noteShadow.appendChild(getStyleElement(NOTES_WEB_STYLESHEET));
 		noteShadow.appendChild(noteElement);
 		const notesElements = Array.from(document.querySelectorAll(NOTE_TAGNAME));
 		const noteId = Math.max.call(Math, 0, ...notesElements.map(noteElement => Number(noteElement.dataset.noteId))) + 1;
+		noteElement.cite = "https://www.w3.org/TR/annotation-model/#selector(type=CssSelector,value=[data-single-file-note-refs~=\"" + noteId + "\"])";
 		noteElement.classList.add(NOTE_CLASS);
 		noteElement.classList.add(NOTE_ANCHORED_CLASS);
 		noteElement.classList.add(color);
@@ -2066,8 +2070,7 @@ pre code {
 	}
 
 	function getAnchorElement(containerElement) {
-		return document.querySelector("[data-single-file-note-refs^=" + JSON.stringify(containerElement.dataset.noteId) + "], [data-single-file-note-refs$=" + JSON.stringify(containerElement.dataset.noteId) + "], [data-single-file-note-refs*=" + JSON.stringify("," + containerElement.dataset.noteId + ",") + "]")
-			|| document.documentElement;
+		return document.querySelector("[data-single-file-note-refs~=\"" + containerElement.dataset.noteId + "\"]") || document.documentElement;
 	}
 
 	function addNoteRef(anchorElement, noteId) {
@@ -2087,11 +2090,11 @@ pre code {
 	}
 
 	function getNoteRefs(anchorElement) {
-		return JSON.parse("[" + (anchorElement.dataset.singleFileNoteRefs || "") + "]");
+		return anchorElement.dataset.singleFileNoteRefs ? anchorElement.dataset.singleFileNoteRefs.split(" ") : [];
 	}
 
 	function setNoteRefs(anchorElement, noteRefs) {
-		anchorElement.dataset.singleFileNoteRefs = noteRefs.toString();
+		anchorElement.dataset.singleFileNoteRefs = noteRefs.join(" ");
 	}
 
 	function minifyText(text) {

src/ui/pages/editor-note-web.css

@@ -28,13 +28,20 @@
     overflow: hidden;
 }
 
+.note blockquote {
+    all: initial;
+    padding: 1px;
+    height: 100%;
+}
+
 .note textarea {
     all: initial;
     white-space: break-spaces;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
-    padding: 3px;
     height: 100%;
+    width: 100%;
+    padding: 2px;
     border: 1px solid transparent;
     resize: none;
     color: black;
@@ -116,7 +123,7 @@
     background-color: #f5f545;
 }
 
-.note-yellow textarea {
+.note-yellow blockquote {
     background-color: #ffff7c;
 }
 
@@ -124,7 +131,7 @@
     background-color: #ffa59f;
 }
 
-.note-pink textarea {
+.note-pink blockquote {
     background-color: #ffbbb6;
 }
 
@@ -132,7 +139,7 @@
     background-color: #84c8ff;
 }
 
-.note-blue textarea {
+.note-blue blockquote {
     background-color: #95d0ff;
 }
 
@@ -140,6 +147,6 @@
     background-color: #93ef8d;
 }
 
-.note-green textarea {
+.note-green blockquote {
     background-color: #9cff95;
 }