From 18069bd12959017a02da9bc986ad1b886b99ac08 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Thu, 13 Jan 2022 15:40:48 +0100
Subject: [PATCH] [editor] Fix TextEditor fontSize extension
Was broken after previous refactoring.
The renderHTML method only works with a proper return. Don't know why.
Therefore disregard the linter warning for now.
---
.../app/text-editor/extensions/font-size.ts | 39 ++++++++++++-------
.../text-editor/rich-text-editor.component.ts | 4 +-
2 files changed, 26 insertions(+), 17 deletions(-)
diff --git a/projects/editor/src/app/text-editor/extensions/font-size.ts b/projects/editor/src/app/text-editor/extensions/font-size.ts
index 098ced8b2..4170c24f2 100644
--- a/projects/editor/src/app/text-editor/extensions/font-size.ts
+++ b/projects/editor/src/app/text-editor/extensions/font-size.ts
@@ -1,29 +1,38 @@
-import { Command } from '@tiptap/core';
-import { TextStyle } from '@tiptap/extension-text-style';
+import { Extension } from '@tiptap/core';
+import '@tiptap/extension-text-style';
declare module '@tiptap/core' {
- interface Commands<> {
- fontSizeExtension: {
- setFontSize: (fontSize: string) => Command
+ interface Commands<ReturnType> {
+ fontSize: {
+ setFontSize: (fontSize: string) => ReturnType
};
}
}
-export const FontSizeExtension = TextStyle.extend({
- name: 'FontSizeExtension',
+export const FontSize = Extension.create({
+ name: 'fontSize',
- addAttributes() {
+ addOptions() {
return {
- fontSize: {
- default: '20px',
- parseHTML: element => element.style.fontSize,
- renderHTML: attributes => ({
- style: `font-size: ${attributes.fontSize}`
- })
- }
+ types: ['textStyle']
};
},
+ addGlobalAttributes() {
+ return [{
+ types: this.options.types,
+ attributes: {
+ fontSize: {
+ default: '20px',
+ parseHTML: element => element.style.fontSize,
+ renderHTML: attributes => {
+ return { style: `font-size: ${attributes.fontSize}` };
+ }
+ }
+ }
+ }];
+ },
+
addCommands() {
return {
setFontSize: fontSize => ({ chain }) => chain().setMark('textStyle', { fontSize }).run()
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 29dca96a3..d73e6a999 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
@@ -17,7 +17,7 @@ import { Blockquote } from '@tiptap/extension-blockquote';
import { Indent } from './extensions/indent';
import { HangingIndent } from './extensions/hanging-indent';
import { ParagraphExtension } from './extensions/paragraph-extension';
-import { FontSizeExtension } from './extensions/font-size';
+import { FontSize } from './extensions/font-size';
import { BulletListExtension } from './extensions/bullet-list';
import { OrderedListExtension } from './extensions/orderedList-extension';
@@ -65,7 +65,7 @@ export class RichTextEditorComponent implements AfterViewInit {
levels: [1, 2, 3, 4]
}),
ParagraphExtension,
- FontSizeExtension,
+ FontSize,
BulletListExtension,
OrderedListExtension,
HangingIndent,
--
GitLab