Merge branch 'texteditor-extension'

package-lock.json

@@ -1788,11 +1788,6 @@
         "schema-utils": "^2.7.0"
       }
     },
-    "@luciusa/extension-font-size": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@luciusa/extension-font-size/-/extension-font-size-1.0.1.tgz",
-      "integrity": "sha512-5pQe4hAiH3KQRDzfKYAxwkwb+hgOBF9aPrPcFBn1rv0VfXV/h5yyWwPHAoFov4Pjo8zJOpGO3ZUFMvXHzuMLmQ=="
-    },
     "@ngx-translate/core": {
       "version": "13.0.0",
       "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-13.0.0.tgz",

package.json

@@ -52,7 +52,6 @@
     "@tiptap/extension-text-align": "^2.0.0-beta.23",
     "@tiptap/extension-text-style": "^2.0.0-beta.17",
     "@tiptap/extension-underline": "^2.0.0-beta.16",
-    "@luciusa/extension-font-size": "^1.0.1",
     "prosemirror-state": "^1.3.4",
     "rxjs": "~6.6.0",
     "tslib": "^2.1.0",

projects/editor/src/app/components/unit-view/page-view/font-size-extension.ts

+import { Command } from '@tiptap/core';
+import { TextStyle } from '@tiptap/extension-text-style';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    fontSizeExtension: {
+      setFontSize: (fontSize: number) => Command
+    };
+  }
+}
+
+export const fontSizeExtension = TextStyle.extend({
+  addAttributes() {
+    return {
+      fontSize: {
+        default: null,
+        parseHTML: element => Number(element.style.fontSize.slice(0, -2)),
+        renderHTML: attributes => ({
+          style: `font-size: ${attributes.fontSize}px`
+        })
+      }
+    };
+  },
+
+  addCommands() {
+    return {
+      setFontSize: fontSize => ({ chain }) => chain().setMark('textStyle', { fontSize }).run()
+    };
+  }
+});

projects/editor/src/app/components/unit-view/page-view/rich-text-editor.component.html

@@ -34,13 +34,14 @@
   <div>
     <mat-form-field>
       <mat-label>Schriftgröße</mat-label>
-      <mat-select [value]="'16px'" (valueChange)="applyFontSize($event)">
-        <mat-option value="8px">8px</mat-option>
-        <mat-option value="14px">14px</mat-option>
-        <mat-option value="16px">16px</mat-option>
-        <mat-option value="18px">18px</mat-option>
-        <mat-option value="24px">24px</mat-option>
-        <mat-option value="36px">36px</mat-option>
+      <mat-select [value]="editor.getAttributes('textStyle').fontSize?.toString() || ''"
+                  (valueChange)="applyFontSize($event)">
+        <mat-option value="8">8px</mat-option>
+        <mat-option value="14">14px</mat-option>
+        <mat-option value="16">16px</mat-option>
+        <mat-option value="18">18px</mat-option>
+        <mat-option value="24">24px</mat-option>
+        <mat-option value="36">36px</mat-option>
       </mat-select>
     </mat-form-field>
     <mat-form-field>

projects/editor/src/app/components/unit-view/page-view/rich-text-editor.component.ts

@@ -10,10 +10,10 @@ import { Subscript } from '@tiptap/extension-subscript';
 import { TextStyle } from '@tiptap/extension-text-style';
 import { Color } from '@tiptap/extension-color';
 import { Highlight } from '@tiptap/extension-highlight';
-import { FontSize } from '@luciusa/extension-font-size';
 import { TextAlign } from '@tiptap/extension-text-align';
 import { Heading } from '@tiptap/extension-heading';
 import { Indent } from './indent';
+import { fontSizeExtension } from './font-size-extension';
 
 @Component({
   selector: 'app-rich-text-editor',
@@ -27,7 +27,7 @@ export class RichTextEditorComponent implements AfterViewInit {
 
   editor = new Editor({
     extensions: [StarterKit, Underline, Superscript, Subscript,
-      TextStyle, Color, FontSize,
+      TextStyle, Color,
       Highlight.configure({
         multicolor: true
       }),
@@ -43,6 +43,8 @@ export class RichTextEditorComponent implements AfterViewInit {
       Heading.configure({
         levels: [1, 2, 3, 4]
       })
+      }),
+      fontSizeExtension
     ]
   });
 
@@ -82,8 +84,8 @@ export class RichTextEditorComponent implements AfterViewInit {
     this.editor.chain().toggleSubscript().focus().run();
   }
 
-  applyFontSize(size: string): void {
-    (this.editor.chain().setFontSize(size) as unknown as ChainedCommands).focus().run();
+  applyFontSize(size: number): void {
+    this.editor.commands.setFontSize(size);
   }
 
   applyColor(color: string): void {