fix #56

src/Demo/vue/demo/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@mdi/font": "^3.6.95",
     "core-js": "^2.6.5",
-    "poplar-annotation": "^2.0.2",
+    "poplar-annotation": "^2.0.3",
     "prismjs": "^1.17.1",
     "roboto-fontface": "*",
     "vue": "^2.6.10",

src/Demo/vue/demo/yarn.lock

@@ -5678,10 +5678,10 @@ pkg-up@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
-poplar-annotation@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.npmjs.org/poplar-annotation/-/poplar-annotation-2.0.2.tgz#5313b7de98da70dcf6a8f9c9cd6514328a0e0325"
-  integrity sha512-6hJXqiQv4QO2zbNcuDyF/v1IHKRAuZRjt1ZuYhglz/XJtkkR++dzebMbcLDHlGn29sYsBavkwfCZNc7/DhSfcg==
+poplar-annotation@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/poplar-annotation/-/poplar-annotation-2.0.3.tgz#ae7d19fc155f09b07796c221a3af3602ceff0459"
+  integrity sha512-YX+WNjLL0XPY/3Be48+SN/bmerdOG5YurMmo3E3M1qLtWQwEcSqTKh5Cqzdq+PUMJsjHrMni38jW1y2anqKsFw==
   dependencies:
     events "^3.0.0"
 

src/Develop/index.html

@@ -11,6 +11,7 @@
 
         .poplar-annotation-content {
             font-size: 20px;
+            font-family: monospace;
         }
 
         .poplar-annotation-label {

src/Develop/test.json

@@ -1,5 +1,5 @@
 {
-  "content": "测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本 测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本 测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本",
+  "content": "The aim of the presented study was to characterize the anticonvulsant effects of levetiracetam in combination with various antiepileptic drugs (carbamazepine, phenytoin, topiramate and vigabatrin) in the mouse 6Hz psychomotor seizure model. Limbic (psychomotor) seizure activity was evoked in albino Swiss mice by a current (32mA, 6Hz, 3s stimulus duration) delivered via ocular electrodes; type II isobolographic analysis was used to characterize the consequent anticonvulsant interactions between the various drug combinations for fixed-ratios of 1:1, 1:2, 1:5 and 1:10. With type II isobolographic analysis, the combinations of levetiracetam with carbamazepine and phenytoin for the fixed-ratios of 1:5 and 1:10 were supra-additive (synergistic; P<0.01) in terms of seizure suppression, while the combinations for the fixed-ratios of 1:1 and 1:2 were additive. Levetiracetam combined with topiramate and vigabatrin for the fixed-ratio of 1:10 exerted supra-additive interaction (P<0.05), and simultaneously, the two-drug combinations for the fixed-ratios of 1:1, 1:2 and 1:5 produced additive interaction in the mouse 6Hz psychomotor seizure model. The combinations of levetiracetam with carbamazepine and phenytoin for the fixed-ratios of 1:5 and 1:10, as well as the combinations of levetiracetam with topiramate and vigabatrin for the fixed-ratio of 1:10 appear to be particularly favorable combinations exerting supra-additive interaction in the mouse 6Hz psychomotor seizure model. Finally, it may be concluded that because of the synergistic interactions between levetiracetam and carbamazepine, phenytoin, topiramate and vigabatrin, the combinations might be useful in clinical practice.",
   "labelCategories": [
     {
       "id": 0,

src/View/Entities/ConnectionView/ConnectionCategoryElement.ts

@@ -26,7 +26,7 @@ export namespace ConnectionCategoryElement {
       const textElement =
           document.createElementNS(SVGNS, 'text') as SVGTextElement;
       textElement.classList.add(...classes);
-      textElement.innerHTML = store.text;
+      textElement.textContent = store.text;
       textElement.setAttribute('dy', `${font.topToBaseLine}px`);
       this.svgElement.appendChild(rectElement);
       this.svgElement.appendChild(textElement);

src/View/Entities/LabelView/LabelCategoryElement.ts

@@ -28,7 +28,7 @@ export namespace LabelCategoryElement {
             const textElement = document.createElementNS(SVGNS, 'text') as SVGTextElement;
             textElement.style.userSelect = "none";
             textElement.style.cursor = "pointer";
-            textElement.innerHTML = store.text;
+            textElement.textContent = store.text;
             textElement.setAttribute("dx", padding.toString());
             textElement.setAttribute("dy", `${font.topToBaseLine + padding}px`);
             this.svgElement.appendChild(rectElement);

src/View/Entities/Line/Line.ts

@@ -90,7 +90,9 @@ export namespace Line {
             // and replace it back when export to .svg file
             // (and safari is very slow rendering large amount of svg)
             // bad for safari!
-            this.svgElement.innerHTML = this.content.replace(/ /g, " ");
+            this.svgElement.innerHTML = this.content.replace(/ /g, " ")
+                .replace(/</g, "&lt;")
+                .replace(/>/g, "&gt;");
             if (this.isBlank) {
                 this.svgElement.style.fontSize = `${this.view.contentFont.fontSize / 4}px`;
             }

src/View/Font.ts

@@ -49,7 +49,7 @@ export namespace Font {
             const characterSet = new Set(characters);
             characterSet.delete('\n');
             const characterArray = Array.from(characterSet);
-            testRenderElement.innerHTML = characterArray.join('');
+            testRenderElement.textContent = characterArray.join('');
             testRenderElement.parentNode!.parentNode!.insertBefore(baseLineReferenceElement, testRenderElement.parentNode);
             characterArray.forEach((ch: string, index: number) => {
                 width.set(ch, testRenderElement.getExtentOfChar(index).width);
@@ -118,7 +118,7 @@ export namespace Font {
             if (characterArray.length > 0) {
                 const testRenderElement = document.createElementNS(SVGNS, 'tspan');
                 testRenderElement.classList.add(...classes);
-                testRenderElement.innerHTML = characterArray.join('');
+                testRenderElement.textContent = characterArray.join('');
                 textElement.appendChild(testRenderElement);
                 characterArray.forEach((ch: string, index: number) => {
                     font.width.set(ch, testRenderElement.getExtentOfChar(index).width);