Добавлена поддержка колонки floating_toolbar_enabled в таблицу пользователей и обновлены соответствующие компоненты для управления отображением плавающей панели инструментов. Реализована логика настройки и сохранения этого параметра в профиле пользователя. Обновлены API и интерфейсы для поддержки новых функций.

backend/server.js

@@ -502,6 +502,28 @@ function runMigrations() {
       );
     }
 
+    // Проверяем существование колонки floating_toolbar_enabled
+    const hasFloatingToolbarEnabled = columns.some(
+      (col) => col.name === "floating_toolbar_enabled"
+    );
+    if (!hasFloatingToolbarEnabled) {
+      db.run(
+        "ALTER TABLE users ADD COLUMN floating_toolbar_enabled INTEGER DEFAULT 1",
+        (err) => {
+          if (err) {
+            console.error(
+              "Ошибка добавления колонки floating_toolbar_enabled:",
+              err.message
+            );
+          } else {
+            console.log(
+              "Колонка floating_toolbar_enabled добавлена в таблицу users"
+            );
+          }
+        }
+      );
+    }
+
     // Проверяем существование колонки ai_enabled
     const hasAiEnabled = columns.some((col) => col.name === "ai_enabled");
     if (!hasAiEnabled) {
@@ -771,7 +793,7 @@ app.get("/api/user", requireApiAuth, (req, res) => {
   }
 
   const sql =
-    "SELECT username, email, avatar, accent_color, show_edit_date, colored_icons FROM users WHERE id = ?";
+    "SELECT username, email, avatar, accent_color, show_edit_date, colored_icons, floating_toolbar_enabled FROM users WHERE id = ?";
   db.get(sql, [req.session.userId], (err, user) => {
     if (err) {
       console.error("Ошибка получения данных пользователя:", err.message);
@@ -1600,6 +1622,7 @@ app.put("/api/user/profile", requireApiAuth, async (req, res) => {
     accent_color,
     show_edit_date,
     colored_icons,
+    floating_toolbar_enabled,
   } = req.body;
   const userId = req.session.userId;
 
@@ -1675,6 +1698,11 @@ app.put("/api/user/profile", requireApiAuth, async (req, res) => {
         params.push(colored_icons ? 1 : 0);
       }
 
+      if (floating_toolbar_enabled !== undefined) {
+        updateFields.push("floating_toolbar_enabled = ?");
+        params.push(floating_toolbar_enabled ? 1 : 0);
+      }
+
       if (newPassword) {
         const hashedPassword = await bcrypt.hash(newPassword, 10);
         updateFields.push("password = ?");

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-9dc17825'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.nsn25edhihg"
+    "revision": "0.2vg2p27g3bg"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/api/userApi.ts

@@ -14,6 +14,7 @@ export const userApi = {
       accent_color?: string;
       show_edit_date?: boolean;
       colored_icons?: boolean;
+      floating_toolbar_enabled?: boolean;
     }
   ) => {
     const { data } = await axiosClient.put("/user/profile", profile);

src/components/notes/FloatingToolbar.tsx

@@ -5,7 +5,14 @@ interface FloatingToolbarProps {
   textareaRef: React.RefObject<HTMLTextAreaElement>;
   onFormat: (before: string, after: string) => void;
   visible: boolean;
-  position: { top: number; left: number };
+  position: {
+    top: number;
+    left: number;
+    selectionTop?: number;
+    selectionBottom?: number;
+    selectionLeft?: number;
+    selectionRight?: number;
+  };
   onHide?: () => void;
   onInsertColor?: () => void;
   activeFormats?: {
@@ -13,7 +20,7 @@ interface FloatingToolbarProps {
     italic?: boolean;
     strikethrough?: boolean;
   };
-  hasSelection?: boolean; // Есть ли выделение текста
+  hasSelection?: boolean;
 }
 
 export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
@@ -33,7 +40,6 @@ export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
 
   useEffect(() => {
     if (visible && toolbarRef.current) {
-      // Небольшая задержка для корректного расчета размеров после рендера
       setTimeout(() => {
         if (!toolbarRef.current) return;
 
@@ -42,44 +48,77 @@ export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
         const windowWidth = window.innerWidth;
         const windowHeight = window.innerHeight;
         const padding = 10;
+        const offset = 8; // Отступ от выделенного текста
 
-        // Получаем внутренний контейнер с кнопками для определения реальной ширины
+        // Получаем внутренний контейнер с кнопками
-        const toolbarContent = toolbar.querySelector('.floating-toolbar') as HTMLElement;
+        const toolbarContent = toolbar.querySelector(
-        const toolbarContentWidth = toolbarContent ? toolbarContent.scrollWidth : rect.width;
+          ".floating-toolbar"
+        ) as HTMLElement;
+        const toolbarContentWidth = toolbarContent
+          ? toolbarContent.scrollWidth
+          : rect.width;
         const availableWidth = windowWidth - padding * 2;
+        const toolbarHeight = rect.height;
 
-        let top = position.top - rect.height - padding;
+        // Используем границы выделения, если они есть
-        let left = position.left;
+        const selectionTop = position.selectionTop ?? position.top;
+        const selectionBottom = position.selectionBottom ?? position.top + 20;
+
+        // Вычисляем пространство сверху и снизу от выделения
+        const spaceAbove = selectionTop - padding;
+        const spaceBelow = windowHeight - selectionBottom - padding;
+
+        // Определяем, где больше места и где не будет перекрытия
+        let top: number;
+
+        // Проверяем, помещается ли панель сверху
+        if (spaceAbove >= toolbarHeight + offset) {
+          // Помещается сверху - размещаем над выделением
+          top = selectionTop - toolbarHeight - offset;
+        } else if (spaceBelow >= toolbarHeight + offset) {
+          // Помещается снизу - размещаем под выделением
+          top = selectionBottom + offset;
+        } else {
+          // Не помещается ни сверху, ни снизу - выбираем сторону с большим пространством
+          if (spaceAbove > spaceBelow) {
+            // Больше места сверху, но панель может частично выйти за границы
+            top = Math.max(padding, selectionTop - toolbarHeight - offset);
+          } else {
+            // Больше места снизу
+            top = Math.min(
+              windowHeight - toolbarHeight - padding,
+              selectionBottom + offset
+            );
+          }
+        }
+
+        // Горизонтальное позиционирование
+        let left = position.left - toolbarContentWidth / 2; // Центрируем относительно середины выделения
 
         // Если контент шире доступного пространства, устанавливаем maxWidth для wrapper
         if (toolbarContentWidth > availableWidth) {
           toolbar.style.maxWidth = `${availableWidth}px`;
-        }
+          left = padding; // Выравниваем по левому краю
-
-        // Если toolbar выходит за правую границу экрана
-        if (left + rect.width > windowWidth - padding) {
-          // Если контент шире экрана, используем прокрутку и позиционируем по левому краю
-          if (toolbarContentWidth > availableWidth) {
-            left = padding;
         } else {
-            // Иначе выравниваем по правому краю
+          // Проверяем границы экрана
-            left = Math.max(padding, windowWidth - rect.width - padding);
+          if (left + toolbarContentWidth > windowWidth - padding) {
+            // Выравниваем по правому краю
+            left = Math.max(
+              padding,
+              windowWidth - toolbarContentWidth - padding
+            );
           }
-        }
-
-        // Если toolbar выходит за левую границу экрана
           if (left < padding) {
             left = padding;
           }
-
-        // Если toolbar выходит за верхнюю границу экрана
-        if (top < padding) {
-          top = position.top + 30; // Показываем снизу от выделения
         }
 
-        // Проверяем нижнюю границу
+        // Финальная проверка вертикальных границ
-        if (top + rect.height > windowHeight - padding) {
+        if (top < padding) {
-          top = windowHeight - rect.height - padding;
+          top = padding;
+        }
+        if (top + toolbarHeight > windowHeight - padding) {
+          top = windowHeight - toolbarHeight - padding;
         }
 
         toolbar.style.top = `${top}px`;
@@ -88,10 +127,9 @@ export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
     }
   }, [visible, position]);
 
-
   const handleMouseDown = (e: React.MouseEvent) => {
     // Не начинаем перетаскивание если кликнули на кнопку
-    if ((e.target as HTMLElement).closest('.floating-toolbar-btn')) return;
+    if ((e.target as HTMLElement).closest(".floating-toolbar-btn")) return;
 
     if (!toolbarRef.current) return;
     setIsDragging(true);
@@ -114,16 +152,16 @@ export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
   // Обработчики для document чтобы отслеживать mouseMove и mouseUp даже вне элемента
   useEffect(() => {
     if (isDragging) {
-      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
+      document.addEventListener("mouseup", handleMouseUp);
     } else {
-      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener("mouseup", handleMouseUp);
     }
 
     return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener("mouseup", handleMouseUp);
     };
   }, [isDragging]);
 
@@ -196,7 +234,8 @@ export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
     }
 
     // Удаляем выделенный текст
-    const newValue = textarea.value.substring(0, start) + textarea.value.substring(end);
+    const newValue =
+      textarea.value.substring(0, start) + textarea.value.substring(end);
 
     // Обновляем значение через React-совместимое событие
     const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
@@ -273,7 +312,12 @@ export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
         top: `${position.top}px`,
         left: `${position.left}px`,
         zIndex: 1000,
-        cursor: isDragging ? 'grabbing' : (toolbarRef.current && toolbarRef.current.scrollWidth > toolbarRef.current.clientWidth ? 'grab' : 'default'),
+        cursor: isDragging
+          ? "grabbing"
+          : toolbarRef.current &&
+            toolbarRef.current.scrollWidth > toolbarRef.current.clientWidth
+          ? "grab"
+          : "default",
       }}
       onMouseDown={(e) => {
         // Предотвращаем потерю выделения при клике на toolbar
@@ -325,7 +369,9 @@ export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
             <div className="floating-toolbar-separator" />
 
             <button
-            className={`floating-toolbar-btn ${activeFormats.bold ? "active" : ""}`}
+              className={`floating-toolbar-btn ${
+                activeFormats.bold ? "active" : ""
+              }`}
               onClick={() => handleFormat("**", "**")}
               title="Жирный"
             >
@@ -367,22 +413,6 @@ export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
             >
               <Icon icon="mdi:eye-off" />
             </button>
-
-          <button
-            className="floating-toolbar-btn"
-            onClick={() => handleFormat("`", "`")}
-            title="Код"
-          >
-            <Icon icon="mdi:code-tags" />
-          </button>
-
-          <button
-            className="floating-toolbar-btn"
-            onClick={() => handleFormat("> ", "")}
-            title="Цитата"
-          >
-            <Icon icon="mdi:format-quote-close" />
-          </button>
           </>
         )}
       </div>

src/components/notes/MarkdownToolbar.tsx

@@ -9,6 +9,7 @@ interface MarkdownToolbarProps {
   onFileClick?: () => void;
   onPreviewToggle?: () => void;
   isPreviewMode?: boolean;
+  onInsertColor?: () => void;
 }
 
 export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
@@ -17,6 +18,7 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
   onFileClick,
   onPreviewToggle,
   isPreviewMode,
+  onInsertColor,
 }) => {
   const [showHeaderDropdown, setShowHeaderDropdown] = useState(false);
   const dispatch = useAppDispatch();
@@ -208,6 +210,46 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
         <Icon icon="mdi:format-list-numbered" />
       </button>
 
+      <button
+        className="btnMarkdown"
+        onClick={() => onInsert("**", "**")}
+        title="Жирный"
+      >
+        <Icon icon="mdi:format-bold" />
+      </button>
+
+      <button
+        className="btnMarkdown"
+        onClick={() => onInsert("*", "*")}
+        title="Курсив"
+      >
+        <Icon icon="mdi:format-italic" />
+      </button>
+
+      <button
+        className="btnMarkdown"
+        onClick={() => onInsert("~~", "~~")}
+        title="Зачеркнутый"
+      >
+        <Icon icon="mdi:format-strikethrough" />
+      </button>
+
+      <button
+        className="btnMarkdown"
+        onClick={() => onInsertColor?.()}
+        title="Цвет текста"
+      >
+        <Icon icon="mdi:palette" />
+      </button>
+
+      <button
+        className="btnMarkdown"
+        onClick={() => onInsert("||", "||")}
+        title="Скрытый текст"
+      >
+        <Icon icon="mdi:eye-off" />
+      </button>
+
       <button
         className="btnMarkdown"
         onClick={() => onInsert("> ", "")}

src/components/notes/NoteEditor.tsx

@@ -4,7 +4,7 @@ import { FloatingToolbar } from "./FloatingToolbar";
 import { NotePreview } from "./NotePreview";
 import { ImageUpload } from "./ImageUpload";
 import { FileUpload } from "./FileUpload";
-import { useAppSelector, useAppDispatch } from "../../store/hooks";
+import { useAppSelector } from "../../store/hooks";
 import { useNotification } from "../../hooks/useNotification";
 import { offlineNotesApi } from "../../api/offlineNotesApi";
 import { aiApi } from "../../api/aiApi";
@@ -31,7 +31,13 @@ export const NoteEditor: React.FC<NoteEditorProps> = ({ onSave }) => {
   const isPreviewMode = useAppSelector((state) => state.ui.isPreviewMode);
   const { showNotification } = useNotification();
   const aiEnabled = useAppSelector((state) => state.profile.aiEnabled);
-  const dispatch = useAppDispatch();
+  const user = useAppSelector((state) => state.profile.user);
+
+  // Проверяем, включена ли плавающая панель
+  const floatingToolbarEnabled =
+    user?.floating_toolbar_enabled !== undefined
+      ? user.floating_toolbar_enabled === 1
+      : true;
 
   const handleSave = async () => {
     if (!content.trim()) {
@@ -328,7 +334,9 @@ export const NoteEditor: React.FC<NoteEditorProps> = ({ onSave }) => {
         }
       } else {
         // Проверяем, является ли это форматированием списка или цитаты
-        const isListFormatting = /^[-*+]\s|^\d+\.\s|^- \[ \]\s|^>\s/.test(before);
+        const isListFormatting = /^[-*+]\s|^\d+\.\s|^- \[ \]\s|^>\s/.test(
+          before
+        );
         const isMultiline = selectedText.includes("\n");
 
         if (isListFormatting && isMultiline) {
@@ -597,13 +605,6 @@ export const NoteEditor: React.FC<NoteEditorProps> = ({ onSave }) => {
     const end = textarea.selectionEnd;
     const hasSelection = start !== end;
 
-    // Используем середину выделения или позицию курсора для позиционирования
-    const position = hasSelection ? Math.floor((start + end) / 2) : start;
-    const text = textarea.value.substring(0, position);
-    const lines = text.split("\n");
-    const lineNumber = lines.length - 1;
-    const currentLineText = lines[lines.length - 1];
-
     // Получаем размеры textarea
     const rect = textarea.getBoundingClientRect();
     const styles = window.getComputedStyle(textarea);
@@ -611,30 +612,85 @@ export const NoteEditor: React.FC<NoteEditorProps> = ({ onSave }) => {
     const paddingTop = parseInt(styles.paddingTop) || 0;
     const paddingLeft = parseInt(styles.paddingLeft) || 0;
     const fontSize = parseInt(styles.fontSize) || 14;
+    const scrollTop = textarea.scrollTop;
 
-    // Более точный расчет ширины символа
+    // Вычисляем координаты начала выделения
-    // Создаем временный элемент для измерения
+    const textBeforeStart = textarea.value.substring(0, start);
+    const linesBeforeStart = textBeforeStart.split("\n");
+    const startLineNumber = linesBeforeStart.length - 1;
+    const startLineText = linesBeforeStart[startLineNumber];
+
+    // Создаем временный элемент для измерения ширины текста
     const measureEl = document.createElement("span");
     measureEl.style.position = "absolute";
     measureEl.style.visibility = "hidden";
     measureEl.style.whiteSpace = "pre";
     measureEl.style.font = styles.font;
-    measureEl.textContent = currentLineText;
     document.body.appendChild(measureEl);
-    const textWidth = measureEl.offsetWidth;
+
+    measureEl.textContent = startLineText;
+    const startTextWidth = measureEl.offsetWidth;
+
+    // Вычисляем координаты конца выделения
+    const textBeforeEnd = textarea.value.substring(0, end);
+    const linesBeforeEnd = textBeforeEnd.split("\n");
+    const endLineNumber = linesBeforeEnd.length - 1;
+    const endLineText = linesBeforeEnd[endLineNumber];
+
+    measureEl.textContent = endLineText;
+    const endTextWidth = measureEl.offsetWidth;
+
     document.body.removeChild(measureEl);
 
-    // Вычисляем позицию (середина выделения или позиция курсора)
+    // Вычисляем вертикальные координаты
-    const top =
+    const startTop =
-      rect.top + paddingTop + lineNumber * lineHeight + lineHeight / 2;
+      rect.top + paddingTop + startLineNumber * lineHeight - scrollTop;
-    const left = rect.left + paddingLeft + textWidth;
+    const endTop =
+      rect.top + paddingTop + endLineNumber * lineHeight - scrollTop;
 
-    return { top, left, hasSelection };
+    // Горизонтальные координаты
+    const startLeft = rect.left + paddingLeft + startTextWidth;
+    const endLeft = rect.left + paddingLeft + endTextWidth;
+
+    // Если есть выделение, используем его границы
+    if (hasSelection) {
+      // Вычисляем середину выделения по горизонтали
+      const left = Math.min(startLeft, endLeft);
+      const right = Math.max(startLeft, endLeft);
+      const centerLeft = (left + right) / 2;
+
+      // Вертикальная позиция - середина выделения
+      const top = (startTop + endTop) / 2;
+
+      return {
+        top,
+        left: centerLeft,
+        hasSelection,
+        selectionTop: Math.min(startTop, endTop),
+        selectionBottom: Math.max(startTop, endTop) + lineHeight,
+        selectionLeft: left,
+        selectionRight: right,
+      };
+    } else {
+      // Для курсора без выделения
+      const top = startTop;
+      const left = startLeft;
+
+      return {
+        top,
+        left,
+        hasSelection,
+        selectionTop: top,
+        selectionBottom: top + lineHeight,
+        selectionLeft: left,
+        selectionRight: left,
+      };
+    }
   }, []);
 
   // Обработчик выделения текста
   const handleSelection = useCallback(() => {
-    if (isPreviewMode) {
+    if (isPreviewMode || !floatingToolbarEnabled) {
       setShowFloatingToolbar(false);
       return;
     }
@@ -659,7 +715,13 @@ export const NoteEditor: React.FC<NoteEditorProps> = ({ onSave }) => {
       setHasSelection(false);
       setActiveFormats({ bold: false, italic: false, strikethrough: false });
     }
-  }, [isPreviewMode, content, getCursorPosition, getActiveFormats]);
+  }, [
+    isPreviewMode,
+    content,
+    getCursorPosition,
+    getActiveFormats,
+    floatingToolbarEnabled,
+  ]);
 
   // Отслеживание выделения текста
   useEffect(() => {
@@ -857,6 +919,7 @@ export const NoteEditor: React.FC<NoteEditorProps> = ({ onSave }) => {
         onInsert={insertMarkdown}
         onImageClick={handleImageButtonClick}
         onFileClick={handleFileButtonClick}
+        onInsertColor={insertColorMarkdown}
       />
 
       <input
@@ -904,6 +967,7 @@ export const NoteEditor: React.FC<NoteEditorProps> = ({ onSave }) => {
               }
             }}
           />
+          {floatingToolbarEnabled && (
             <FloatingToolbar
               textareaRef={textareaRef}
               onFormat={insertMarkdown}
@@ -914,6 +978,7 @@ export const NoteEditor: React.FC<NoteEditorProps> = ({ onSave }) => {
               activeFormats={activeFormats}
               hasSelection={hasSelection}
             />
+          )}
         </>
       )}
 

src/components/notes/NoteItem.tsx

@@ -68,6 +68,12 @@ export const NoteItem: React.FC<NoteItemProps> = ({
   const dispatch = useAppDispatch();
   useMarkdown({ onNoteUpdate: onReload }); // Инициализируем обработчики спойлеров, внешних ссылок и чекбоксов
   
+  // Проверяем, включена ли плавающая панель
+  const floatingToolbarEnabled =
+    user?.floating_toolbar_enabled !== undefined
+      ? user.floating_toolbar_enabled === 1
+      : true;
+
   const handleEdit = () => {
     setIsEditing(true);
     setEditContent(note.content);
@@ -594,7 +600,7 @@ export const NoteItem: React.FC<NoteItemProps> = ({
 
   // Обработчик выделения текста
   const handleSelection = useCallback(() => {
-    if (localPreviewMode) {
+    if (localPreviewMode || !floatingToolbarEnabled) {
       setShowFloatingToolbar(false);
       return;
     }
@@ -619,7 +625,7 @@ export const NoteItem: React.FC<NoteItemProps> = ({
       setHasSelection(false);
       setActiveFormats({ bold: false, italic: false, strikethrough: false });
     }
-  }, [localPreviewMode, editContent, getCursorPosition, getActiveFormats]);
+  }, [localPreviewMode, editContent, getCursorPosition, getActiveFormats, floatingToolbarEnabled]);
 
   const handleImageButtonClick = () => {
     imageInputRef.current?.click();
@@ -1221,6 +1227,7 @@ export const NoteItem: React.FC<NoteItemProps> = ({
                     }
                   }}
                 />
+                {floatingToolbarEnabled && (
                   <FloatingToolbar
                     textareaRef={editTextareaRef}
                     onFormat={insertMarkdown}
@@ -1231,6 +1238,7 @@ export const NoteItem: React.FC<NoteItemProps> = ({
                     activeFormats={activeFormats}
                     hasSelection={hasSelection}
                   />
+                )}
               </>
             )}
 

src/pages/SettingsPage.tsx

@@ -46,6 +46,7 @@ const SettingsPage: React.FC = () => {
   const [selectedAccentColor, setSelectedAccentColor] = useState("#007bff");
   const [showEditDate, setShowEditDate] = useState(true);
   const [coloredIcons, setColoredIcons] = useState(true);
+  const [floatingToolbarEnabled, setFloatingToolbarEnabled] = useState(true);
 
   // AI settings
   const [apiKey, setApiKey] = useState("");
@@ -134,6 +135,11 @@ const SettingsPage: React.FC = () => {
           : true;
       setColoredIcons(coloredIconsValue);
       updateColoredIconsClass(coloredIconsValue);
+      const floatingToolbarValue =
+        userData.floating_toolbar_enabled !== undefined
+          ? userData.floating_toolbar_enabled === 1
+          : true;
+      setFloatingToolbarEnabled(floatingToolbarValue);
 
       // Загружаем AI настройки
       try {
@@ -166,6 +172,7 @@ const SettingsPage: React.FC = () => {
         accent_color: selectedAccentColor,
         show_edit_date: showEditDate,
         colored_icons: coloredIcons,
+        floating_toolbar_enabled: floatingToolbarEnabled,
       });
       dispatch(setAccentColorAction(selectedAccentColor));
       setAccentColor(selectedAccentColor);
@@ -672,6 +679,31 @@ const SettingsPage: React.FC = () => {
               </label>
             </div>
 
+            <div className="form-group ai-toggle-group">
+              <label className="ai-toggle-label">
+                <div className="toggle-label-content">
+                  <span className="toggle-text-main">
+                    Плавающая панель редактирования
+                  </span>
+                  <span className="toggle-text-desc">
+                    {floatingToolbarEnabled
+                      ? "Показывать плавающую панель инструментов при выделении текста в редакторе"
+                      : "Скрывать плавающую панель инструментов при выделении текста"}
+                  </span>
+                </div>
+                <div className="toggle-switch-wrapper">
+                  <input
+                    type="checkbox"
+                    id="floating-toolbar-toggle"
+                    className="toggle-checkbox"
+                    checked={floatingToolbarEnabled}
+                    onChange={(e) => setFloatingToolbarEnabled(e.target.checked)}
+                  />
+                  <span className="toggle-slider"></span>
+                </div>
+              </label>
+            </div>
+
             <button className="btnSave" onClick={handleUpdateAppearance}>
               Сохранить изменения
             </button>

src/styles/style.css

@@ -671,7 +671,8 @@ header {
 
 /* Анимация пульсации для offline индикатора */
 @keyframes pulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
     transform: scale(1);
   }
@@ -4409,7 +4410,11 @@ textarea:focus {
 
 /* Стили для скрытого текста (спойлеров) */
 .spoiler {
-  background: linear-gradient(45deg, #f0f0f0, #e8e8e8);
+  background: linear-gradient(
+    45deg,
+    rgba(var(--accent-color-rgb), 0.15),
+    rgba(var(--accent-color-rgb), 0.25)
+  );
   color: transparent;
   cursor: pointer;
   border-radius: 4px;
@@ -4417,11 +4422,15 @@ textarea:focus {
   user-select: none;
   transition: all 0.3s ease;
   position: relative;
-  border: 1px solid #ddd;
+  display: inline-block;
+  vertical-align: baseline;
+  border: 1px solid rgba(var(--accent-color-rgb), 0.3);
   font-weight: 500;
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
-  text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+  text-shadow: 0 0 8px rgba(var(--accent-color-rgb), 0.3);
+  isolation: isolate;
+  z-index: 0;
 }
 
 .spoiler::before {
@@ -4431,27 +4440,38 @@ textarea:focus {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(255, 255, 255, 0.8);
+  background: rgba(var(--accent-color-rgb), 0.1);
   border-radius: 4px;
   filter: blur(1px);
   z-index: -1;
+  box-sizing: border-box;
+  pointer-events: none;
 }
 
 .spoiler:hover {
-  background: linear-gradient(45deg, #e8e8e8, #d8d8d8);
+  background: linear-gradient(
+    45deg,
+    rgba(var(--accent-color-rgb), 0.25),
+    rgba(var(--accent-color-rgb), 0.35)
+  );
   transform: scale(1.02);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 2px 8px rgba(var(--accent-color-rgb), 0.25);
+  border-color: rgba(var(--accent-color-rgb), 0.4);
 }
 
 .spoiler:hover::before {
-  background: rgba(255, 255, 255, 0.9);
+  background: rgba(var(--accent-color-rgb), 0.15);
 }
 
 .spoiler.revealed {
-  background: linear-gradient(45deg, #e8f5e8, #d4edda);
+  background: linear-gradient(
-  color: #155724;
+    45deg,
-  border-color: #c3e6cb;
+    rgba(var(--accent-color-rgb), 0.15),
-  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
+    rgba(var(--accent-color-rgb), 0.2)
+  );
+  color: var(--accent-color);
+  border-color: rgba(var(--accent-color-rgb), 0.4);
+  box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.25);
   text-shadow: none;
   user-select: text;
   -webkit-user-select: text;
@@ -4463,8 +4483,12 @@ textarea:focus {
 }
 
 .spoiler.revealed:hover {
-  background: linear-gradient(45deg, #d4edda, #c3e6cb);
+  background: linear-gradient(
-  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.35);
+    45deg,
+    rgba(var(--accent-color-rgb), 0.2),
+    rgba(var(--accent-color-rgb), 0.25)
+  );
+  box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.35);
 }
 
 /* Стили для файлов */
@@ -5078,3 +5102,44 @@ textarea:focus {
 [data-theme="dark"] .loading-content {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
 }
+
+/* Адаптивность для плавающей панели */
+@media (max-width: 768px) {
+  .floating-toolbar {
+    padding: 8px;
+    gap: 6px;
+    border-radius: 12px;
+    /* Увеличиваем размер для удобства на touch-устройствах */
+  }
+
+  .floating-toolbar-btn {
+    min-width: 44px;
+    min-height: 44px;
+    padding: 8px 12px;
+    font-size: 18px;
+  }
+
+  .floating-toolbar-btn .iconify {
+    font-size: 20px;
+  }
+
+  /* Улучшаем прокрутку на мобильных */
+  .floating-toolbar-wrapper {
+    -webkit-overflow-scrolling: touch;
+    touch-action: pan-x;
+  }
+}
+
+/* Анимация появления снизу для лучшего UX на мобильных */
+@media (max-width: 768px) {
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(5px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}

src/types/user.ts

@@ -5,6 +5,7 @@ export interface User {
   accent_color: string;
   show_edit_date?: number;
   colored_icons?: number;
+  floating_toolbar_enabled?: number;
 }
 
 export interface AuthResponse {

src/utils/markdown.ts

@@ -25,49 +25,54 @@ const spoilerExtension = {
 
 // Функция для рендеринга вложенных токенов
 function renderTokens(tokens: any[], renderer: any): string {
-  return tokens.map((token) => {
+  return tokens
+    .map((token) => {
       // Используем кастомный renderer если он есть
       if (renderer[token.type]) {
         return renderer[token.type](token);
       }
       // Fallback для встроенных типов токенов
-    if (token.type === 'text') {
+      if (token.type === "text") {
-      return token.text || '';
+        return token.text || "";
       }
-    if (token.type === 'strong') {
+      if (token.type === "strong") {
         return `<strong>${renderTokens(token.tokens || [], renderer)}</strong>`;
       }
-    if (token.type === 'em') {
+      if (token.type === "em") {
         return `<em>${renderTokens(token.tokens || [], renderer)}</em>`;
       }
-    if (token.type === 'codespan') {
+      if (token.type === "codespan") {
-      return `<code>${token.text || ''}</code>`;
+        return `<code>${token.text || ""}</code>`;
       }
-    if (token.type === 'del') {
+      if (token.type === "del") {
         return `<del>${renderTokens(token.tokens || [], renderer)}</del>`;
       }
-    if (token.type === 'link') {
+      if (token.type === "link") {
         // Для ссылок используем кастомный renderer если доступен
         if (renderer.link) {
           return renderer.link(token);
         }
         // Fallback для встроенных ссылок
-      const href = token.href || '';
+        const href = token.href || "";
-      const title = token.title ? ` title="${token.title}"` : '';
+        const title = token.title ? ` title="${token.title}"` : "";
-      const text = token.tokens && token.tokens.length > 0 
+        const text =
+          token.tokens && token.tokens.length > 0
             ? renderTokens(token.tokens, renderer)
-        : (token.text || '');
+            : token.text || "";
         return `<a href="${href}"${title}>${text}</a>`;
       }
-    if (token.type === 'spoiler') {
+      if (token.type === "spoiler") {
         // Для спойлеров используем кастомный renderer если доступен
         if (renderer.spoiler) {
           return renderer.spoiler(token);
         }
-      return `<span class="spoiler" title="Нажмите, чтобы показать">${token.text || ''}</span>`;
+        return `<span class="spoiler" title="Нажмите, чтобы показать">${
+          token.text || ""
+        }</span>`;
       }
-    return token.text || '';
+      return token.text || "";
-  }).join('');
+    })
+    .join("");
 }
 
 // Кастомный renderer для внешних ссылок и чекбоксов
@@ -77,7 +82,7 @@ const renderer: any = {
     const title = token.title;
 
     // Правильно обрабатываем вложенные токены для форматирования внутри ссылок
-    let text = '';
+    let text = "";
     if (token.tokens && token.tokens.length > 0) {
       text = renderTokens(token.tokens, this);
     } else if (token.text) {
@@ -103,7 +108,7 @@ const renderer: any = {
     const checked = token.checked;
 
     // Правильно обрабатываем вложенные токены для форматирования
-    let content = '';
+    let content = "";
     if (token.tokens && token.tokens.length > 0) {
       // Рендерим вложенные токены используя наш renderer
       content = renderTokens(token.tokens, this);
@@ -174,7 +179,7 @@ export const extractTags = (content: string): string[] => {
 
     const tag = match[1];
     // Проверяем, есть ли уже тег с таким же именем (регистронезависимо)
-    if (!tags.some(t => t.toLowerCase() === tag.toLowerCase())) {
+    if (!tags.some((t) => t.toLowerCase() === tag.toLowerCase())) {
       tags.push(tag);
     }
   }