From 66ac3a52f58d9a7995adfaee60d8e347bdf7dc1d Mon Sep 17 00:00:00 2001
From: Mike Ungers <mike.ungers@zf.com>
Date: Wed, 17 Feb 2021 12:03:26 +0100
Subject: [PATCH] added support for multi line comments

---
 src/controllers/postil.js | 44 ++++++++++++++++++++++++++++++++-------
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/controllers/postil.js b/src/controllers/postil.js
index 68b1aac..5f75177 100644
--- a/src/controllers/postil.js
+++ b/src/controllers/postil.js
@@ -227,9 +227,15 @@ const luckysheetPostil = {
 
         let size = _this.getArrowCanvasSize(fromX, fromY, toX, toY);
 
+        let commentDivs = '';
+        let valueLines = value.split('\n');
+        for (let line of valueLines) {
+            commentDivs += '<div>' + _this.htmlEscape(line) + '</div>';
+        }
+
         let html =  '<div id="luckysheet-postil-overshow">' +
                         '<canvas class="arrowCanvas" width="'+ size[2] +'" height="'+ size[3] +'" style="position:absolute;left:'+ size[0] +'px;top:'+ size[1] +'px;z-index:100;pointer-events:none;"></canvas>' +
-                        '<div style="width:'+ (width - 12) +'px;min-height:'+ (height - 12) +'px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:'+ fromX +'px;top:'+ fromY +'px;z-index:100;">'+ _this.htmlEscape(value) +'</div>' +
+                        '<div style="width:'+ (width - 12) +'px;min-height:'+ (height - 12) +'px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:'+ fromX +'px;top:'+ fromY +'px;z-index:100;">'+ commentDivs +'</div>' +
                     '</div>';
 
         $(html).appendTo($("#luckysheet-cell-main"));
@@ -371,6 +377,12 @@ const luckysheetPostil = {
 
             let size = _this.getArrowCanvasSize(left, top, toX, toY);
 
+            let commentDivs = '';
+            let valueLines = value.split('\n');
+            for (let line of valueLines) {
+                commentDivs += '<div>' + _this.htmlEscape(line) + '</div>';
+            }
+
             let html =  '<div id="luckysheet-postil-show_'+ r +'_'+ c +'" class="luckysheet-postil-show">' +
                             '<canvas class="arrowCanvas" width="'+ size[2] +'" height="'+ size[3] +'" style="position:absolute;left:'+ size[0] +'px;top:'+ size[1] +'px;z-index:100;pointer-events:none;"></canvas>' +
                             '<div class="luckysheet-postil-show-main" style="width:'+ width +'px;height:'+ height +'px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:'+ left +'px;top:'+ top +'px;box-sizing:border-box;z-index:100;">' +
@@ -392,7 +404,7 @@ const luckysheetPostil = {
                                 '</div>' +
                                 '<div style="width:100%;height:100%;overflow:hidden;">' + 
                                     '<div class="formulaInputFocus" style="width:'+ (width - 12) +'px;height:'+ (height - 12) +'px;line-height:20px;box-sizing:border-box;text-align: center;;word-break:break-all;" spellcheck="false" contenteditable="true">' +
-                                        _this.htmlEscape(value) +
+                                        commentDivs +
                                     '</div>' +
                                 '</div>' +
                             '</div>' +
@@ -543,6 +555,12 @@ const luckysheetPostil = {
 
             let size = _this.getArrowCanvasSize(left, top, toX, toY);
 
+            let commentDivs = '';
+            let valueLines = value.split('\n');
+            for (let line of valueLines) {
+                commentDivs += '<div>' + _this.htmlEscape(line) + '</div>';
+            }
+
             let html =  '<div id="luckysheet-postil-show_'+ r +'_'+ c +'" class="luckysheet-postil-show luckysheet-postil-show-active">' +
                             '<canvas class="arrowCanvas" width="'+ size[2] +'" height="'+ size[3] +'" style="position:absolute;left:'+ size[0] +'px;top:'+ size[1] +'px;z-index:100;pointer-events:none;"></canvas>' +
                             '<div class="luckysheet-postil-show-main" style="width:'+ width +'px;height:'+ height +'px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:'+ left +'px;top:'+ top +'px;box-sizing:border-box;z-index:100;">' +
@@ -564,7 +582,7 @@ const luckysheetPostil = {
                                 '</div>' +
                                 '<div style="width:100%;height:100%;overflow:hidden;">' + 
                                     '<div class="formulaInputFocus" style="width:'+ (width - 12) +'px;height:'+ (height - 12) +'px;line-height:20px;box-sizing:border-box;text-align: center;;word-break:break-all;" spellcheck="false" contenteditable="true">' +
-                                        _this.htmlEscape(value) +
+                                        commentDivs +
                                     '</div>' +
                                 '</div>' +
                             '</div>' +
@@ -664,7 +682,11 @@ const luckysheetPostil = {
             }
 
             let size = _this.getArrowCanvasSize(left, top, toX, toY);
-
+            let commentDivs = '';
+            let valueLines = value.split('\n');
+            for (let line of valueLines) {
+                commentDivs += '<div>' + _this.htmlEscape(line) + '</div>';
+            }
             let html =  '<div id="luckysheet-postil-show_'+ r +'_'+ c +'" class="luckysheet-postil-show">' +
                             '<canvas class="arrowCanvas" width="'+ size[2] +'" height="'+ size[3] +'" style="position:absolute;left:'+ size[0] +'px;top:'+ size[1] +'px;z-index:100;pointer-events:none;"></canvas>' +
                             '<div class="luckysheet-postil-show-main" style="width:'+ width +'px;height:'+ height +'px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:'+ left +'px;top:'+ top +'px;box-sizing:border-box;z-index:100;">' +
@@ -686,7 +708,7 @@ const luckysheetPostil = {
                                 '</div>' +
                                 '<div style="width:100%;height:100%;overflow:hidden;">' + 
                                     '<div class="formulaInputFocus" style="width:'+ (width - 12) +'px;height:'+ (height - 12) +'px;line-height:20px;box-sizing:border-box;text-align: center;;word-break:break-all;" spellcheck="false" contenteditable="true">' +
-                                        _this.htmlEscape(value) +
+                                        commentDivs +
                                     '</div>' +
                                 '</div>' +
                             '</div>' +
@@ -789,6 +811,12 @@ const luckysheetPostil = {
 
                         let size = _this.getArrowCanvasSize(left, top, toX, toY);
 
+                        let commentDivs = '';
+                        let valueLines = value.split('\n');
+                        for (let line of valueLines) {
+                            commentDivs += '<div>' + _this.htmlEscape(line) + '</div>';
+                        }
+
                         let html =  '<div id="luckysheet-postil-show_'+ rowIndex +'_'+ colIndex +'" class="luckysheet-postil-show">' +
                                         '<canvas class="arrowCanvas" width="'+ size[2] +'" height="'+ size[3] +'" style="position:absolute;left:'+ size[0] +'px;top:'+ size[1] +'px;z-index:100;pointer-events:none;"></canvas>' +
                                         '<div class="luckysheet-postil-show-main" style="width:'+ width +'px;height:'+ height +'px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:'+ left +'px;top:'+ top +'px;box-sizing:border-box;z-index:100;">' +
@@ -810,7 +838,7 @@ const luckysheetPostil = {
                                             '</div>' +
                                             '<div style="width:100%;height:100%;overflow:hidden;">' + 
                                                 '<div class="formulaInputFocus" style="width:'+ (width - 12) +'px;height:'+ (height - 12) +'px;line-height:20px;box-sizing:border-box;text-align: center;;word-break:break-all;" spellcheck="false" contenteditable="true">' +
-                                                    _this.htmlEscape(value) +
+                                                    commentDivs +
                                                 '</div>' +
                                             '</div>' +
                                         '</div>' +
@@ -840,8 +868,8 @@ const luckysheetPostil = {
             let r = id.split("luckysheet-postil-show_")[1].split("_")[0];
             let c = id.split("luckysheet-postil-show_")[1].split("_")[1];
 
-            let value = $("#" + id).find(".formulaInputFocus").text();
-
+            // interpret <div> as new line
+            let value = $("#" + id).find(".formulaInputFocus").html().replaceAll('<div>', '\n').replaceAll(/<(.*)>.*?|<(.*) \/>/g, '').trim();
             // Hook function
             if(!method.createHookFunction('commentUpdateBefore',r,c,value)){
                 return;