update

package.json

 {
     "name": "react-ag-qeditor",
-    "version": "1.1.12",
+    "version": "1.1.13",
     "description": "WYSIWYG html editor",
     "author": "atma",
     "license": "MIT",

src/extensions/Image.jsx

 import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
 import React, { useEffect, useRef, useState, Fragment } from "react";
 import TipTapImage from "@tiptap/extension-image";
-import { Button, Modal, Input } from 'antd';
+import { Button, Modal, Input, Typography } from 'antd';
 import {FontSizeOutlined} from "@ant-design/icons";
 const { TextArea } = Input;
-
+const {Text} = Typography;
 
 const MIN_WIDTH = 60;
 const BORDER_COLOR = '#0096fd';
@@ -18,6 +18,7 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
     const [isResizing, setIsResizing] = useState(false);
     const [altModalVisible, setAltModalVisible] = useState(false);
     const [tempAlt, setTempAlt] = useState(node.attrs.alt || '');
+    const [tempFrontAlt, setTempFrontAlt] = useState(node.attrs.frontAlt || '');
 
 
     // Добавляем прозрачный нулевой пробел после изображения
@@ -361,6 +362,7 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
         objectFit: 'contain'
     });
 
+    console.log(node.attrs.frontAlt);
     return (
         <NodeViewWrapper
             as="div"
@@ -401,14 +403,35 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
                     }
                 }}
             />
-
+            {
+                node.attrs.frontAlt?.length > 0 &&
+                <div
+                    style={{
+                        backgroundColor: '#FDE674',
+                        borderRadius: '35px',
+                        padding: '5px 25px',
+                        textAlign: 'center',
+                        color: '#000000D9',
+                        position: 'absolute',
+                        left: '50%',
+                        transform: 'translateX(-50%)',
+                        fontSize: '12px',
+                        lineHeight: '16px',
+                        letterSpacing: '2%',
+                        fontWeight: '500',
+                        bottom: '10px',
+                        whiteSpace: 'pre-line'
+                    }}
+                >{node.attrs.frontAlt}</div>
+            }
             <Button
                 size="default"
                 shape={'circle'}
-                type={node.attrs.alt?.length > 0 ? 'primary' : 'default'}
+                type={node.attrs.alt?.length > 0 || node.attrs.frontAlt?.length ? 'primary' : 'default'}
                 onClick={(e) => {
                     e.stopPropagation();
                     setTempAlt(node.attrs.alt || '');
+                    setTempFrontAlt(node.attrs.frontAlt || '');
                     setAltModalVisible(true);
                 }}
                 style={{
@@ -534,21 +557,29 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
                 </Fragment>
             )}
             <Modal
-                title="Текстовая сторона"
+                title="Текст на картинке"
                 open={altModalVisible}
                 onOk={() => {
-                    updateAttributes({ alt: tempAlt });
+                    updateAttributes({ alt: tempAlt, frontAlt: tempFrontAlt });
                     setAltModalVisible(false);
                 }}
                 onCancel={() => setAltModalVisible(false)}
                 okText="Применить"
                 cancelText="Отмена"
             >
+                <div style={{marginBottom: '5px'}}><Text>Лицевая сторона</Text></div>
+                <TextArea
+                    value={tempFrontAlt}
+                    onChange={(e) => setTempFrontAlt(e.target.value)}
+                    rows={4}
+                    placeholder="Введите текст"
+                />
+                <div style={{marginTop: '15px', marginBottom: '5px'}}><Text>Обратная сторона</Text></div>
                 <TextArea
                     value={tempAlt}
                     onChange={(e) => setTempAlt(e.target.value)}
                     rows={4}
-                    placeholder="Введите alt-текст изображения..."
+                    placeholder="Введите текст"
                 />
             </Modal>
         </NodeViewWrapper>
@@ -572,6 +603,18 @@ const ResizableImageExtension = TipTapImage.extend({
                         : {}
                 }
             },
+            frontAlt: {
+                default: null,
+                parseHTML: element => {
+                    const raw = element.getAttribute('frontAlt')
+                    return raw?.replace(/&#10;/g, '\n') || null
+                },
+                renderHTML: attributes => {
+                    return attributes.frontAlt
+                        ? { frontAlt: attributes.frontAlt.replace(/\n/g, '&#10;') }
+                        : {}
+                }
+            },
             title: { default: null },
             width: {
                 default: null,