diff --git a/projects/editor/src/app/services/dialog.service.ts b/projects/editor/src/app/services/dialog.service.ts
index 6ad291ec27030e8d09d86213927ccc802855664b..fca4710e425b2c75738b574c608c3aca82bc49a5 100644
--- a/projects/editor/src/app/services/dialog.service.ts
+++ b/projects/editor/src/app/services/dialog.service.ts
@@ -49,18 +49,24 @@ export class DialogService {
     return dialogRef.afterClosed();
   }
 
-  showRichTextEditDialog(text: string, defaultFontSize: number): Observable<string> {
+  showRichTextEditDialog(text: string, defaultFontSize: number, width: number): Observable<string> {
     const dialogRef = this.dialog.open(RichTextEditDialogComponent, {
-      data: { content: text, defaultFontSize },
-      autoFocus: false
+      data: {
+        content: text,
+        defaultFontSize,
+        clozeMode: false
+      },
+      autoFocus: false,
+      width: `${width}px`
     });
     return dialogRef.afterClosed();
   }
 
-  showClozeTextEditDialog(document: ClozeDocument, defaultFontSize: number): Observable<string> {
+  showClozeTextEditDialog(document: ClozeDocument, defaultFontSize: number, width: number): Observable<string> {
     const dialogRef = this.dialog.open(RichTextEditDialogComponent, {
       data: { content: document, defaultFontSize, clozeMode: true },
-      autoFocus: false
+      autoFocus: false,
+      width: `${width}px`
     });
     return dialogRef.afterClosed();
   }
diff --git a/projects/editor/src/app/services/unit.service.ts b/projects/editor/src/app/services/unit.service.ts
index 7648242f51b1d0c5409101d0eefa282601197332..531ed0ed91bf9f5bf637acbc708203d8f38430d9 100644
--- a/projects/editor/src/app/services/unit.service.ts
+++ b/projects/editor/src/app/services/unit.service.ts
@@ -419,7 +419,10 @@ export class UnitService {
         break;
       case 'text':
         this.dialogService.showRichTextEditDialog(
-          (element as TextElement).text, (element as TextElement).fontProps.fontSize as number
+          (element as TextElement).text,
+          (element as TextElement).fontProps.fontSize as number,
+          this.unit.pages[this.selectionService.selectedPageIndex].maxWidth -
+            this.unit.pages[this.selectionService.selectedPageIndex].margin
         ).subscribe((result: string) => {
           if (result) {
             // TODO add proper sanitization
@@ -434,7 +437,9 @@ export class UnitService {
       case 'cloze':
         this.dialogService.showClozeTextEditDialog(
           element.document,
-          (element as ClozeElement).fontProps.fontSize as number
+          (element as ClozeElement).fontProps.fontSize as number,
+          this.unit.pages[this.selectionService.selectedPageIndex].maxWidth -
+            this.unit.pages[this.selectionService.selectedPageIndex].margin
         ).subscribe((result: string) => {
           if (result) {
             // TODO add proper sanitization