Allow multiline text (#535)

* Allow multiline text

* Figure out offset correctly

* Run prettier

src/element/textWysiwyg.tsx

@@ -39,7 +39,7 @@ export function textWysiwyg({
     top: y + "px",
     left: x + "px",
     transform: "translate(-50%, -50%)",
-    textAlign: "center",
+    textAlign: "left",
     display: "inline-block",
     font: font,
     padding: "4px",
@@ -59,7 +59,7 @@ export function textWysiwyg({
       cleanup();
       return;
     }
-    if (ev.key === KEYS.ENTER) {
+    if (ev.key === KEYS.ENTER && !ev.shiftKey) {
       ev.preventDefault();
       if (ev.isComposing || ev.keyCode === 229) {
         return;

src/renderer/renderElement.ts

@@ -144,11 +144,13 @@ export function renderElement(
     context.font = element.font;
     const fillStyle = context.fillStyle;
     context.fillStyle = element.strokeColor;
-    context.fillText(
-      element.text,
-      0,
-      element.baseline || element.actualBoundingBoxAscent || 0,
-    );
+    // Canvas does not support multiline text by default
+    const lines = element.text.replace(/\r\n?/g, "\n").split("\n");
+    const lineHeight = element.height / lines.length;
+    const offset = element.height - element.baseline;
+    for (let i = 0; i < lines.length; i++) {
+      context.fillText(lines[i], 0, (i + 1) * lineHeight - offset);
+    }
     context.fillStyle = fillStyle;
     context.font = font;
     context.globalAlpha = 1;