add change size text

src/QEditor.jsx

@@ -37,6 +37,7 @@ import Audio from './extensions/Audio'
 import TableExtension from './extensions/TableExtension'
 import ToggleBlock from './extensions/ToggleBlock'
 import InteractiveImage from './extensions/InteractiveImage'
+import FontSize from './extensions/FontSize'
 // import Image from '@tiptap/extension-image'
 
 // import ImageResize from 'tiptap-extension-resize-image';
@@ -75,6 +76,7 @@ const initialBubbleItems = [
     'superscript',
     'subscript',
     '|',
+    'fontSize',
     'colorText',
     'highlight',
     '|',
@@ -201,6 +203,7 @@ const QEditor = ({
             '#ffe672'
         ]
     }
+    const fontSizes = ['default', '12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px']
 
     const toolsLib = {
         link: {
@@ -438,6 +441,13 @@ const QEditor = ({
                 editor.chain().focus()
             }
         },
+        fontSize: {
+            title: 'Размер текста',
+            onClick: () => {
+                setColorsSelected('fontSize')
+                editor.chain().focus()
+            }
+        },
         highlight: {
             title: 'Цвет фона',
             onClick: () => setColorsSelected('highlight')
@@ -554,6 +564,7 @@ const QEditor = ({
                 alignments: ['left', 'center', 'right', 'justify']
             }),
             TextStyle,
+            FontSize,
             Color.configure({
                 types: ['textStyle']
             }),
@@ -1365,7 +1376,30 @@ const QEditor = ({
                         onClick={(e) => e.stopPropagation()}
                     >
                         {colorsSelected !== null
-                            ? colors[colorsSelected].map((itemColor, i) => {
+                            ? (colorsSelected === 'fontSize'
+                                ? fontSizes.map((fontSize, i) => {
+                                    const currentFontSize = editor.getAttributes('textStyle').fontSize || 'default'
+
+                                    return (
+                                        <button
+                                            key={'fontSize' + i}
+                                            type='button'
+                                            className={'qfont-size-option' + (currentFontSize === fontSize ? ' active' : '')}
+                                            onClick={() => {
+                                                if (fontSize === 'default') {
+                                                    editor.chain().focus().unsetFontSize().run()
+                                                } else {
+                                                    editor.chain().focus().setFontSize(fontSize).run()
+                                                }
+
+                                                setColorsSelected(null)
+                                            }}
+                                        >
+                                            {fontSize === 'default' ? 'A' : fontSize.replace('px', '')}
+                                        </button>
+                                    )
+                                })
+                                : colors[colorsSelected].map((itemColor, i) => {
                                 return (
                                     <div
                                         key={'colors' + colorsSelected + i}
@@ -1387,7 +1421,7 @@ const QEditor = ({
                                         }}
                                     />
                                 )
-                            })
+                                }))
                             : bubbleItems.map((type, i) => {
                                 if (type === '|') {
                                     return (

src/extensions/FontSize.js

+import { Extension } from '@tiptap/core'
+
+const FontSize = Extension.create({
+    name: 'fontSize',
+
+    addOptions() {
+        return {
+            types: ['textStyle']
+        }
+    },
+
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    fontSize: {
+                        default: null,
+                        parseHTML: (element) => element.style.fontSize || null,
+                        renderHTML: (attributes) => {
+                            if (!attributes.fontSize) {
+                                return {}
+                            }
+
+                            return {
+                                style: `font-size: ${attributes.fontSize}`
+                            }
+                        }
+                    }
+                }
+            }
+        ]
+    },
+
+    addCommands() {
+        return {
+            setFontSize: (fontSize) => ({ chain }) => {
+                return chain().setMark('textStyle', { fontSize }).run()
+            },
+            unsetFontSize: () => ({ chain }) => {
+                return chain().setMark('textStyle', { fontSize: null }).removeEmptyTextStyle().run()
+            }
+        }
+    }
+})
+
+export default FontSize

src/index.scss

@@ -913,6 +913,9 @@ body{
 
 
     .qicon{
+        &.qfontSize{
+            background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.2 13.8L6.84 5.4H7.98L10.62 13.8H9.51L8.88 11.76H5.91L5.28 13.8H4.2ZM6.15 10.86H8.64L7.41 6.84L6.15 10.86ZM11.58 13.8V8.43H12.6V9.12C13.02 8.58 13.59 8.31 14.34 8.31C14.73 8.31 15.09 8.4 15.39 8.58C15.69 8.76 15.93 9.03 16.08 9.39C16.23 9.75 16.32 10.17 16.32 10.65C16.32 11.16 16.23 11.61 16.05 12C15.87 12.39 15.6 12.69 15.24 12.9C14.88 13.11 14.49 13.2 14.07 13.2C13.47 13.2 12.99 12.99 12.66 12.6V13.8H11.58ZM12.6 10.74C12.6 11.37 12.72 11.82 12.96 12.12C13.2 12.42 13.5 12.57 13.89 12.57C14.28 12.57 14.61 12.42 14.88 12.09C15.15 11.76 15.27 11.28 15.27 10.62C15.27 10.02 15.15 9.57 14.91 9.27C14.67 8.97 14.37 8.82 14.01 8.82C13.65 8.82 13.32 8.97 13.05 9.3C12.75 9.6 12.6 10.08 12.6 10.74Z' fill='%231D1D1F'/%3E%3C/svg%3E");
+        }
         &.qemoji{
             background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='9' r='7.25' stroke='%231D1D1F' stroke-width='1.5'/%3E%3Ccircle cx='6.1' cy='7' r='1' fill='%231D1D1F'/%3E%3Ccircle cx='11.9' cy='7' r='1' fill='%231D1D1F'/%3E%3Cpath d='M5.75 10.4C6.4 11.65 7.57 12.25 9 12.25C10.43 12.25 11.6 11.65 12.25 10.4' stroke='%231D1D1F' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
         }
@@ -1126,6 +1129,32 @@ body{
         }
     }
 
+    .qfont-size-option{
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 32px;
+        height: 28px;
+        border: none;
+        border-radius: 6px;
+        background: #f5f5f5;
+        color: #1d1d1f;
+        font-size: 13px;
+        line-height: 1;
+        padding: 0 8px;
+        margin-right: 4px;
+
+        &:hover{
+            cursor: pointer;
+            background: #e8e8e8;
+        }
+
+        &.active{
+            background: #dcecff;
+            color: #0050b3;
+        }
+    }
+
     .qseparator{
         width: 16px;
     }