Allow newlines in text annotations (Submitty#356)

* allow newlines in text annotations

* linting

src/UI/text.js

@@ -24,9 +24,9 @@ function handleDocumentMouseup(e) {
   if (!e.srcElement.classList.contains('annotationLayer')) {
     return;
   }
-  input = document.createElement('input');
+  input = document.createElement('textarea');
   input.setAttribute('id', 'pdf-annotate-text-input');
-  input.setAttribute('placeholder', 'Enter text');
+  input.setAttribute('placeholder', 'Enter text... SHIFT + ENTER for new line');
   input.style.border = `3px solid ${BORDER_COLOR}`;
   input.style.borderRadius = '3px';
   input.style.position = 'absolute';
@@ -57,7 +57,7 @@ function handleInputKeyup(e) {
   if (e.keyCode === 27) {
     closeInput();
   }
-  else if (e.keyCode === 13) {
+  else if (e.keyCode === 13 && !e.shiftKey) {
     saveText();
   }
 }

src/render/renderText.js

@@ -1,6 +1,31 @@
 import setAttributes from '../utils/setAttributes';
 import normalizeColor from '../utils/normalizeColor';
 
+/**
+ * Wrap each line of given text in a `<tspan>` element and append these
+ * lines to the given SVGTextElement
+ *
+ * @param {SVGTextElement} textElement A text element to hold the split text
+ * @param {String} textContent String to render with line breaks
+ */
+function insertLineBreaks(textElement, textContent) {
+  const lines = (textContent || '').split('\n');
+  // can't use dy attribute here since we want empty lines to take up space as well,
+  // so we will update y manually based on font size
+  const x = textElement.getAttribute('x');
+  let y = Number(textElement.getAttribute('y'));
+  const size = Number(textElement.getAttribute('font-size'));
+  for (const line of lines) {
+    const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+    tspan.setAttribute('y', y.toString());
+    tspan.setAttribute('x', x);
+    tspan.innerHTML = line;
+    textElement.appendChild(tspan);
+
+    y += size;
+  }
+}
+
 /**
  * Create SVGTextElement from an annotation definition.
  * This is used for anntations of type `textbox`.
@@ -20,7 +45,8 @@ export default function renderText(a) {
     transform: `rotate(${a.rotation})`,
     style: 'white-space: pre'
   });
-  text.innerHTML = a.content;
+
+  insertLineBreaks(text, a.content);
 
   let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
   g.appendChild(text);