diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx index 81c3bea0..17b70019 100644 --- a/src/element/textWysiwyg.tsx +++ b/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; diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts index d0fd0fc3..2a29bed7 100644 --- a/src/renderer/renderElement.ts +++ b/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;