diff --git a/projects/editor/src/app/text-editor/indent.ts b/projects/editor/src/app/text-editor/indent.ts index 9bd913759695b2a890c599600afcbb93f7ae3e0e..630acb6c20a6a5efacb6b3e7a1ca18e9528e9343 100644 --- a/projects/editor/src/app/text-editor/indent.ts +++ b/projects/editor/src/app/text-editor/indent.ts @@ -5,7 +5,7 @@ export interface IndentOptions { types: string[]; minLevel: number; maxLevel: number; - paddingMultiplier: number; + indentSize: number; } declare module '@tiptap/core' { @@ -13,6 +13,7 @@ declare module '@tiptap/core' { indent: { indent: () => ReturnType; outdent: () => ReturnType; + setIndentSize: (indentSize: number) => ReturnType; }; } } @@ -24,7 +25,7 @@ export const Indent = Extension.create<IndentOptions>({ types: ['listItem', 'paragraph'], minLevel: 0, maxLevel: 8, - paddingMultiplier: 10 + indentSize: 10 }, addGlobalAttributes() { @@ -34,9 +35,9 @@ export const Indent = Extension.create<IndentOptions>({ attributes: { indent: { renderHTML: attributes => ( - { style: `padding-left: ${attributes.indent * this.options.paddingMultiplier}px` } + { style: `padding-left: ${attributes.indent * this.options.indentSize}px` } ), - parseHTML: element => Number(element.style.paddingLeft.slice(0, -2)) / this.options.paddingMultiplier + parseHTML: element => Number(element.style.paddingLeft.slice(0, -2)) / this.options.indentSize } } } @@ -91,9 +92,16 @@ export const Indent = Extension.create<IndentOptions>({ return false; }; + const setIndentSize: (indentSize: number) => () => Command = + indentSize => () => ({ tr, state, dispatch }) => { + this.options.indentSize = indentSize; + return false; + }; + return { indent: applyIndent(1), - outdent: applyIndent(-1) + outdent: applyIndent(-1), + setIndentSize: indentSize => setIndentSize(indentSize)() }; }, diff --git a/projects/editor/src/app/text-editor/rich-text-editor.component.css b/projects/editor/src/app/text-editor/rich-text-editor.component.css index c19be7bdd8b1f6b730a8f85e08179349f67bc9ef..08cd44dafbc91617050f0d90246a9444938234ca 100644 --- a/projects/editor/src/app/text-editor/rich-text-editor.component.css +++ b/projects/editor/src/app/text-editor/rich-text-editor.component.css @@ -91,3 +91,13 @@ app-rich-text-editor .editor-controls-second-line { mark { color: inherit; } + +mat-form-field.indent-size-input .mat-form-field-infix { + border-top: unset !important; + padding-bottom: 5px; +} + +.indent-size-input { + width: 90px; + padding-top: 5px; +} diff --git a/projects/editor/src/app/text-editor/rich-text-editor.component.html b/projects/editor/src/app/text-editor/rich-text-editor.component.html index b70bd8ecae66a8ab82d19771cd925aec705f4b9b..e68208abcf760fedb7bd315d7d8d8d0be1c1166e 100644 --- a/projects/editor/src/app/text-editor/rich-text-editor.component.html +++ b/projects/editor/src/app/text-editor/rich-text-editor.component.html @@ -125,14 +125,19 @@ (click)="outdent()"> <mat-icon>format_indent_decrease</mat-icon> </button> - <button mat-icon-button matTooltip="Hängender Einzug" [matTooltipShowDelay]="300" + <button mat-icon-button matTooltip="Hängende Einrückung" [matTooltipShowDelay]="300" (click)="hangIndent()"> <mat-icon>segment</mat-icon> </button> - <button mat-icon-button matTooltip="Hängenden Einzug entfernen" [matTooltipShowDelay]="300" + <button mat-icon-button matTooltip="Hängende Einrückung entfernen" [matTooltipShowDelay]="300" (click)="unhangIndent()"> <mat-icon>view_headline</mat-icon> </button> + <mat-form-field class="indent-size-input" appearance="fill"> + <mat-label>Einrücktiefe</mat-label> + <input matInput type="text" [(ngModel)]="selectedIndentSize" + (ngModelChange)="setIndentSize()"> + </mat-form-field> </div> <div fxLayout="row"> <div class="combo-button" fxLayout="row" [style.background-color]="editor.isActive('bulletList') ? 'lightgrey' : ''"> diff --git a/projects/editor/src/app/text-editor/rich-text-editor.component.ts b/projects/editor/src/app/text-editor/rich-text-editor.component.ts index a94b144af58f01a1c385e4ac3263795bcbd21567..0ea3e90a23156fd72a0b3e4d48c1682d3c56d63f 100644 --- a/projects/editor/src/app/text-editor/rich-text-editor.component.ts +++ b/projects/editor/src/app/text-editor/rich-text-editor.component.ts @@ -34,6 +34,7 @@ export class RichTextEditorComponent implements AfterViewInit { selectedFontColor = 'lightgrey'; selectedHighlightColor = 'lightgrey'; selectedFontSize = '20px'; + selectedIndentSize = 20; bulletListStyle: string = 'disc'; orderedListStyle: string = 'decimal'; @@ -50,7 +51,7 @@ export class RichTextEditorComponent implements AfterViewInit { types: ['listItem', 'paragraph'], minLevel: 0, maxLevel: 4, - paddingMultiplier: 20 + indentSize: this.selectedIndentSize }), Heading.configure({ levels: [1, 2, 3, 4] @@ -158,11 +159,17 @@ export class RichTextEditorComponent implements AfterViewInit { this.editor.chain().insertContent(char).focus().run(); } - hangIndent() { + hangIndent(): void { + this.editor.commands.indent(); this.editor.commands.hangIndent(); } - unhangIndent() { + unhangIndent(): void { + this.editor.commands.outdent(); this.editor.commands.unhangIndent(); } + + setIndentSize(): void { + this.editor.commands.setIndentSize(this.selectedIndentSize); + } }