верстка

package.json

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

src/QEditor.jsx

@@ -51,10 +51,42 @@ import IframeModal from './modals/IframeModal'
 import IframeCustomModal from './modals/IframeCustomModal'
 import { isMobile } from 'react-device-detect'
 import { ExportPdf } from './extensions/ExportPdf'
-import { mergeAttributes } from "@tiptap/core";
+import { mergeAttributes, Extension } from "@tiptap/core";
 import Upload from "rc-upload";
 import { NodeSelection } from 'prosemirror-state'
 
+// Выход из code block по Enter на пустой последней строке
+const ExitCodeBlock = Extension.create({
+    name: 'exitCodeBlock',
+    addKeyboardShortcuts() {
+        return {
+            Enter: ({ editor }) => {
+                if (!editor.isActive('codeBlock')) return false
+                const { $anchor } = editor.state.selection
+                if (!editor.state.selection.empty) return false
+                const nodeText = $anchor.parent.textContent
+                const offset = $anchor.parentOffset
+                // Если курсор на последней строке и она пустая — выходим из блока
+                const lastNewline = nodeText.lastIndexOf('\n', offset - 1)
+                const currentLine = nodeText.slice(lastNewline + 1, offset)
+                if (currentLine === '') {
+                    // Удаляем пустую строку и создаём параграф после блока
+                    return editor
+                        .chain()
+                        .command(({ tr, state }) => {
+                            const from = $anchor.pos - 1
+                            tr.delete(from, $anchor.pos)
+                            return true
+                        })
+                        .exitCode()
+                        .run()
+                }
+                return false
+            }
+        }
+    }
+})
+
 // const CustomImage = Image.extend({
 //     options: {inline: true},
 //     // addNodeView() {
@@ -673,6 +705,7 @@ const QEditor = ({
     const editor = useEditor({
         extensions: [
             StarterKit,
+            ExitCodeBlock,
             Underline,
             ImageResize,
             Link.configure({
@@ -855,7 +888,7 @@ const QEditor = ({
         if (!uploadOptions.suggestUrl || !SUGGEST_TYPES.includes(innerModalType)) {
             return null
         }
-        if (suggestedLoading) {
+        if (suggestedLoading && suggestedFiles.length === 0) {
             return <div className='atma-editor-suggest-loading'>Загрузка файлов...</div>
         }
         if (!suggestedLoading && suggestedFiles.length === 0) {
@@ -934,16 +967,16 @@ const QEditor = ({
                         <button
                             type='button'
                             className='atma-editor-suggest-page-btn'
-                            disabled={suggestPage <= 1}
+                            disabled={suggestPage <= 1 || suggestedLoading}
                             onClick={() => setSuggestPage(p => p - 1)}
                         >&#8592;</button>
                         <span className='atma-editor-suggest-page-info'>
-                            {suggestPage} / {totalPages}
+                            {suggestedLoading ? '...' : `${suggestPage} / ${totalPages}`}
                         </span>
                         <button
                             type='button'
                             className='atma-editor-suggest-page-btn'
-                            disabled={suggestPage >= totalPages}
+                            disabled={suggestPage >= totalPages || suggestedLoading}
                             onClick={() => setSuggestPage(p => p + 1)}
                         >&#8594;</button>
                     </div>
@@ -1524,6 +1557,7 @@ const QEditor = ({
                                                     align: 'center',
                                                     'data-node-id': `img-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`
                                                 })
+                                                .createParagraphNear()
                                                 .run()
                                             }
                                         })

src/components/ToolBar.js

@@ -16,7 +16,7 @@ const toolsInit = {
         { type: 's', toggle: true, items: ['alignLeft', 'alignCenter', 'alignRight'] },
 
         // strike
-        { type: 'g', items: ['strike'] },
+        // { type: 'g', items: ['strike'] },
 
         // Table▼
         {

src/index.scss

@@ -121,17 +121,19 @@ body{
     justify-content: center;
     align-items: center;
     flex-direction: column;
+    width: 100%;
 
     &-video {
-        width: 50vw;
-        height: 50vh;
+        width: 100%;
+        height: auto;
+        border-radius: 12px;
     }
 
     &-start-border {
         border: 3px solid white;
         border-radius: 100px;
         position: absolute;
-        bottom: 210px;
+        bottom: 24px;
         height: 70px;
         width: 70px;
         padding: 5px;
@@ -144,13 +146,14 @@ body{
 
     &-timer {
         position: absolute;
-        top: 120px;
+        top: 12px;
+        left: 50%;
+        transform: translateX(-50%);
         font-weight: 400;
         font-size: 21px;
         line-height: 20px;
         text-align: center;
         color: #ffffff;
-        margin-top: 30px;
         z-index: 2;
     }
 
@@ -175,13 +178,15 @@ body{
     }
 
     &-content {
-        width: 50vw;
-        height: 55vh;
+        width: 100%;
+        aspect-ratio: 16 / 9;
         background-color: black;
         border-radius: 12px;
         display: flex;
         justify-content: center;
         align-items: center;
+        overflow: hidden;
+        position: relative;
     }
 }
 
@@ -257,7 +262,7 @@ body{
         box-shadow: 0 -3px 0 3px #ffffff;
         padding: 6px;
         z-index: 10;
-        grid-gap: 7.5px;
+        grid-gap: 8.7px;
 
         &-g{
             display: flex;
@@ -438,6 +443,10 @@ body{
             max-width: 100%;
         }
 
+        img {
+            image-orientation: from-image;
+        }
+
         blockquote{
             border-left: 2px solid #ccc;
             margin-left: 0;
@@ -610,11 +619,12 @@ body{
             background: #fff;
             transform: translate(0, -50%);
             border-radius: 8px;
-            //max-width: 90%;
             max-width: 646px;
+            min-width: 540px;
             padding: 48px;
-            max-height: 900px;
-            overflow-y: scroll;
+            max-height: min(90dvh, 900px);
+            overflow-y: auto;
+            overflow-x: hidden;
 
             @media (max-width: 600px) {
                 min-width: 0;
@@ -862,6 +872,9 @@ body{
             display: flex;
             flex-wrap: wrap;
             gap: 10px;
+            max-height: 280px;
+            overflow-y: auto;
+            padding-right: 4px;
         }
 
         &-item{