Skip to content

Commit 1c1518a

Browse files
flowerFieldflowerField
authored
Merge pull request dream-num#527 from mikeungers/multilineComment
added support for multi line comments
2 parents cb88d7f + 66ac3a5 commit 1c1518a

File tree

1 file changed

+36
-8
lines changed

1 file changed

+36
-8
lines changed

‎src/controllers/postil.js‎

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -227,9 +227,15 @@ const luckysheetPostil = {
227227

228228
let size = _this.getArrowCanvasSize(fromX, fromY, toX, toY);
229229

230+
let commentDivs = '';
231+
let valueLines = value.split('\n');
232+
for (let line of valueLines) {
233+
commentDivs += '<div>' + _this.htmlEscape(line) + '</div>';
234+
}
235+
230236
let html = '<div id="luckysheet-postil-overshow">' +
231237
'<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>' +
232-
'<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>' +
238+
'<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>' +
233239
'</div>';
234240

235241
$(html).appendTo($("#luckysheet-cell-main"));
@@ -371,6 +377,12 @@ const luckysheetPostil = {
371377

372378
let size = _this.getArrowCanvasSize(left, top, toX, toY);
373379

380+
let commentDivs = '';
381+
let valueLines = value.split('\n');
382+
for (let line of valueLines) {
383+
commentDivs += '<div>' + _this.htmlEscape(line) + '</div>';
384+
}
385+
374386
let html = '<div id="luckysheet-postil-show_'+ r +'_'+ c +'" class="luckysheet-postil-show">' +
375387
'<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>' +
376388
'<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 = {
392404
'</div>' +
393405
'<div style="width:100%;height:100%;overflow:hidden;">' +
394406
'<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">' +
395-
_this.htmlEscape(value) +
407+
commentDivs +
396408
'</div>' +
397409
'</div>' +
398410
'</div>' +
@@ -543,6 +555,12 @@ const luckysheetPostil = {
543555

544556
let size = _this.getArrowCanvasSize(left, top, toX, toY);
545557

558+
let commentDivs = '';
559+
let valueLines = value.split('\n');
560+
for (let line of valueLines) {
561+
commentDivs += '<div>' + _this.htmlEscape(line) + '</div>';
562+
}
563+
546564
let html = '<div id="luckysheet-postil-show_'+ r +'_'+ c +'" class="luckysheet-postil-show luckysheet-postil-show-active">' +
547565
'<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>' +
548566
'<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 = {
564582
'</div>' +
565583
'<div style="width:100%;height:100%;overflow:hidden;">' +
566584
'<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">' +
567-
_this.htmlEscape(value) +
585+
commentDivs +
568586
'</div>' +
569587
'</div>' +
570588
'</div>' +
@@ -664,7 +682,11 @@ const luckysheetPostil = {
664682
}
665683

666684
let size = _this.getArrowCanvasSize(left, top, toX, toY);
667-
685+
let commentDivs = '';
686+
let valueLines = value.split('\n');
687+
for (let line of valueLines) {
688+
commentDivs += '<div>' + _this.htmlEscape(line) + '</div>';
689+
}
668690
let html = '<div id="luckysheet-postil-show_'+ r +'_'+ c +'" class="luckysheet-postil-show">' +
669691
'<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>' +
670692
'<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 = {
686708
'</div>' +
687709
'<div style="width:100%;height:100%;overflow:hidden;">' +
688710
'<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">' +
689-
_this.htmlEscape(value) +
711+
commentDivs +
690712
'</div>' +
691713
'</div>' +
692714
'</div>' +
@@ -789,6 +811,12 @@ const luckysheetPostil = {
789811

790812
let size = _this.getArrowCanvasSize(left, top, toX, toY);
791813

814+
let commentDivs = '';
815+
let valueLines = value.split('\n');
816+
for (let line of valueLines) {
817+
commentDivs += '<div>' + _this.htmlEscape(line) + '</div>';
818+
}
819+
792820
let html = '<div id="luckysheet-postil-show_'+ rowIndex +'_'+ colIndex +'" class="luckysheet-postil-show">' +
793821
'<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>' +
794822
'<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 = {
810838
'</div>' +
811839
'<div style="width:100%;height:100%;overflow:hidden;">' +
812840
'<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">' +
813-
_this.htmlEscape(value) +
841+
commentDivs +
814842
'</div>' +
815843
'</div>' +
816844
'</div>' +
@@ -840,8 +868,8 @@ const luckysheetPostil = {
840868
let r = id.split("luckysheet-postil-show_")[1].split("_")[0];
841869
let c = id.split("luckysheet-postil-show_")[1].split("_")[1];
842870

843-
let value = $("#" + id).find(".formulaInputFocus").text();
844-
871+
// interpret <div> as new line
872+
let value = $("#" + id).find(".formulaInputFocus").html().replaceAll('<div>', '\n').replaceAll(/<(.*)>.*?|<(.*) \/>/g, '').trim();
845873
// Hook function
846874
if(!method.createHookFunction('commentUpdateBefore',r,c,value)){
847875
return;

0 commit comments

Comments
 (0)