Slightly restrain allowed HTML tags + adjust style for problems instr/solu

[vchess.git] / client / src / views / Problems.vue

diff --git a/client/src/views/Problems.vue b/client/src/views/Problems.vue
index 57473bc..adc0ad3 100644 (file)
--- a/client/src/views/Problems.vue
+++ b/client/src/views/Problems.vue
@@ -44,17 +44,17 @@ main
       fieldset
         textarea.instructions-edit(
           :placeholder="st.tr['Instructions']"
-          @input="adjustHeight($event)"
+          @input="adjustHeight('instructions')"
           v-model="curproblem.instruction"
         )
-        p(v-html="parseHtml(curproblem.instruction)")
+        .instructions(v-html="parseHtml(curproblem.instruction)")
       fieldset
         textarea.solution-edit(
           :placeholder="st.tr['Solution']"
-          @input="adjustHeight($event)"
+          @input="adjustHeight('solution')"
           v-model="curproblem.solution"
         )
-        p(v-html="parseHtml(curproblem.solution)")
+        .solution(v-html="parseHtml(curproblem.solution)")
       button(@click="sendProblem()") {{ st.tr["Send"] }}
       #dialog.text-center {{ st.tr[infoMsg] }}
   .row(v-if="showOne")
@@ -70,12 +70,12 @@ main
           | {{ st.tr["Previous_p"] }}
         button.nomargin(@click="gotoPrevNext(curproblem,-1)")
           | {{ st.tr["Next_p"] }}
-      p.oneInstructions.clickable(
+      .instructions.oneInstructions.clickable(
         v-html="parseHtml(curproblem.instruction)"
         @click="curproblem.showSolution=!curproblem.showSolution"
       )
         | {{ st.tr["Show solution"] }}
-      p(
+      .solution(
         v-show="curproblem.showSolution"
         v-html="parseHtml(curproblem.solution)"
       )
@@ -212,11 +212,11 @@ export default {
         document.getElementById("inputFen").focus();
       }
     },
-    adjustHeight: function(e) {
+    adjustHeight: function(elt) {
       // https://stackoverflow.com/a/48460773
-      let t = e.target;
+      let t = document.querySelector("." + elt + "-edit");
       t.style.height = "";
-      t.style.height = t.scrollHeight + "px";
+      t.style.height = (t.scrollHeight + 3) + "px";
     },
     setVname: function(prob) {
       prob.vname = this.st.variants.find(v => v.id == prob.vid).name;
@@ -289,7 +289,10 @@ export default {
     },
     parseHtml: function(txt) {
       return !txt.match(/<[/a-zA-Z]+>/)
-        ? txt.replace(/\n/g, "<br/>") //no HTML tag
+        ?
+          // No HTML tag
+          txt.replace(/\n\n/g, "<br/><div class='br'></div>")
+             .replace(/\n/g, "<br/>")
         : txt;
     },
     changeVariant: function(prob) {
@@ -402,6 +405,8 @@ export default {
     },
     prepareNewProblem: function() {
       this.resetCurProb();
+      this.adjustHeight("instructions");
+      this.adjustHeight("solution");
       window.doClick("modalNewprob");
     },
     sendProblem: function() {
@@ -449,6 +454,8 @@ export default {
       // prob.diag might correspond to some other problem or be empty:
       this.setDiagram(prob); //V is loaded at this stage
       this.copyProblem(prob, this.curproblem);
+      this.adjustHeight("instructions");
+      this.adjustHeight("solution");
       window.doClick("modalNewprob");
     },
     deleteProblem: function(prob) {
@@ -506,6 +513,13 @@ export default {
 <style lang="sass">
 @import "@/styles/_board_squares_img.sass"
 @import "@/styles/_rules.sass"
+.instructions, .solution
+  margin: 0 var(--universal-margin)
+  p, ul, ol, pre, table, h3, h4, h5, h6, blockquote
+    margin: var(--universal-margin) 0
+  .br
+    display: block
+    margin: 10px 0
 </style>
 
 <style lang="sass" scoped>
@@ -552,7 +566,7 @@ button#loadMoreBtn
   & > *
     margin: 0
 
-p.oneInstructions
+.oneInstructions
   margin: 0
   padding: 2px 5px
   background-color: lightgreen