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

Обновлены компоненты FloatingToolbar и MarkdownToolbar для улучшения работы с выделением текста и добавления новых функций форматирования. Расширены свойства позиционирования панели инструментов, добавлена поддержка цветного текста. Обновлен файл service worker с новой версией для кэширования. Оптимизированы стили для мобильных устройств.
Обновлены стили для компонента спойлеров, улучшена анимация и добавлены новые визуальные эффекты. Обновлен файл service worker с новой версией для кэширования. Оптимизирована логика рендеринга токенов в markdown, улучшена обработка вложенных элементов и ссылок.
2025-11-05 05:47:12 +07:00 · 2025-11-05 05:39:32 +07:00 · 2025-11-05 05:24:07 +07:00
11 changed files with 523 additions and 246 deletions
--- a/backend/server.js
+++ b/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 = ?");
--- a/dev-dist/sw.js
+++ b/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"), {
--- a/src/api/userApi.ts
+++ b/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);
--- a/src/components/notes/FloatingToolbar.tsx
+++ b/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,53 +40,85 @@ export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({

  useEffect(() => {
    if (visible && toolbarRef.current) {
-      // Небольшая задержка для корректного расчета размеров после рендера
      setTimeout(() => {
        if (!toolbarRef.current) return;
-        
+
        const toolbar = toolbarRef.current;
        const rect = toolbar.getBoundingClientRect();
        const windowWidth = window.innerWidth;
        const windowHeight = window.innerHeight;
        const padding = 10;
+        const offset = 8; // Отступ от выделенного текста

-        // Получаем внутренний контейнер с кнопками для определения реальной ширины
-        const toolbarContent = toolbar.querySelector('.floating-toolbar') as HTMLElement;
-        const toolbarContentWidth = toolbarContent ? toolbarContent.scrollWidth : rect.width;
+        // Получаем внутренний контейнер с кнопками
+        const toolbarContent = toolbar.querySelector(
+          ".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`;
-        }
-
-        // Если toolbar выходит за правую границу экрана
-        if (left + rect.width > windowWidth - padding) {
-          // Если контент шире экрана, используем прокрутку и позиционируем по левому краю
-          if (toolbarContentWidth > availableWidth) {
+          left = padding; // Выравниваем по левому краю
+        } else {
+          // Проверяем границы экрана
+          if (left + toolbarContentWidth > windowWidth - padding) {
+            // Выравниваем по правому краю
+            left = Math.max(
+              padding,
+              windowWidth - toolbarContentWidth - padding
+            );
+          }
+          if (left < padding) {
            left = padding;
-          } else {
-            // Иначе выравниваем по правому краю
-            left = Math.max(padding, windowWidth - rect.width - padding);
          }
        }

-        // Если toolbar выходит за левую границу экрана
-        if (left < padding) {
-          left = padding;
-        }
-
-        // Если toolbar выходит за верхнюю границу экрана
+        // Финальная проверка вертикальных границ
        if (top < padding) {
-          top = position.top + 30; // Показываем снизу от выделения
+          top = padding;
        }
-
-        // Проверяем нижнюю границу
-        if (top + rect.height > windowHeight - padding) {
-          top = windowHeight - rect.height - 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('mouseup', handleMouseUp);
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
    } else {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
    }

    return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
    };
  }, [isDragging]);

@ -149,11 +187,11 @@ export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({

    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
-    
+
    if (start === end) return; // Нет выделения

    const selectedText = textarea.value.substring(start, end);
-    
+
    try {
      await navigator.clipboard.writeText(selectedText);
      // Можно добавить уведомление об успешном копировании
@ -176,11 +214,11 @@ export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({

    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
-    
+
    if (start === end) return; // Нет выделения

    const selectedText = textarea.value.substring(start, end);
-    
+
    try {
      await navigator.clipboard.writeText(selectedText);
    } catch (err) {
@ -194,16 +232,17 @@ export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
      document.execCommand("copy");
      document.body.removeChild(textArea);
    }
-    
+
    // Удаляем выделенный текст
-    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(
      window.HTMLTextAreaElement.prototype,
      "value"
    )?.set;
-    
+
    if (nativeInputValueSetter) {
      nativeInputValueSetter.call(textarea, newValue);
      const inputEvent = new Event("input", { bubbles: true });
@ -213,7 +252,7 @@ export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
      const inputEvent = new Event("input", { bubbles: true });
      textarea.dispatchEvent(inputEvent);
    }
-    
+
    textarea.setSelectionRange(start, start);
    textarea.focus();
  };
@ -227,19 +266,19 @@ export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({

    try {
      const text = await navigator.clipboard.readText();
-      
+
      // Вставляем текст в позицию курсора или заменяем выделенный текст
-      const newValue = 
-        textarea.value.substring(0, start) + 
-        text + 
+      const newValue =
+        textarea.value.substring(0, start) +
+        text +
        textarea.value.substring(end);
-      
+
      // Обновляем значение через React-совместимое событие
      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
        window.HTMLTextAreaElement.prototype,
        "value"
      )?.set;
-      
+
      if (nativeInputValueSetter) {
        nativeInputValueSetter.call(textarea, newValue);
        const inputEvent = new Event("input", { bubbles: true });
@ -249,7 +288,7 @@ export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
        const inputEvent = new Event("input", { bubbles: true });
        textarea.dispatchEvent(inputEvent);
      }
-      
+
      // Устанавливаем курсор после вставленного текста
      const newCursorPos = start + text.length;
      textarea.setSelectionRange(newCursorPos, newCursorPos);
@ -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
@ -294,97 +338,83 @@ export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
          <Icon icon="mdi:close" />
        </button>

-      {hasSelection && (
-        <>
-          <button
-            className="floating-toolbar-btn"
-            onClick={handleCopy}
-            title="Копировать"
-          >
-            <Icon icon="mdi:content-copy" />
-          </button>
-          <button
-            className="floating-toolbar-btn"
-            onClick={handleCut}
-            title="Вырезать"
-          >
-            <Icon icon="mdi:content-cut" />
-          </button>
-          <button
-            className="floating-toolbar-btn"
-            onClick={handlePaste}
-            title="Вставить"
-          >
-            <Icon icon="mdi:content-paste" />
-          </button>
-        </>
-      )}
+        {hasSelection && (
+          <>
+            <button
+              className="floating-toolbar-btn"
+              onClick={handleCopy}
+              title="Копировать"
+            >
+              <Icon icon="mdi:content-copy" />
+            </button>
+            <button
+              className="floating-toolbar-btn"
+              onClick={handleCut}
+              title="Вырезать"
+            >
+              <Icon icon="mdi:content-cut" />
+            </button>
+            <button
+              className="floating-toolbar-btn"
+              onClick={handlePaste}
+              title="Вставить"
+            >
+              <Icon icon="mdi:content-paste" />
+            </button>
+          </>
+        )}

-      {hasSelection && (
-        <>
-          <div className="floating-toolbar-separator" />
+        {hasSelection && (
+          <>
+            <div className="floating-toolbar-separator" />

-          <button
-            className={`floating-toolbar-btn ${activeFormats.bold ? "active" : ""}`}
-            onClick={() => handleFormat("**", "**")}
-            title="Жирный"
-          >
-            <Icon icon="mdi:format-bold" />
-          </button>
-          <button
-            className={`floating-toolbar-btn ${
-              activeFormats.italic ? "active" : ""
-            }`}
-            onClick={() => handleFormat("*", "*")}
-            title="Курсив"
-          >
-            <Icon icon="mdi:format-italic" />
-          </button>
-          <button
-            className={`floating-toolbar-btn ${
-              activeFormats.strikethrough ? "active" : ""
-            }`}
-            onClick={() => handleFormat("~~", "~~")}
-            title="Зачеркнутый"
-          >
-            <Icon icon="mdi:format-strikethrough" />
-          </button>
+            <button
+              className={`floating-toolbar-btn ${
+                activeFormats.bold ? "active" : ""
+              }`}
+              onClick={() => handleFormat("**", "**")}
+              title="Жирный"
+            >
+              <Icon icon="mdi:format-bold" />
+            </button>
+            <button
+              className={`floating-toolbar-btn ${
+                activeFormats.italic ? "active" : ""
+              }`}
+              onClick={() => handleFormat("*", "*")}
+              title="Курсив"
+            >
+              <Icon icon="mdi:format-italic" />
+            </button>
+            <button
+              className={`floating-toolbar-btn ${
+                activeFormats.strikethrough ? "active" : ""
+              }`}
+              onClick={() => handleFormat("~~", "~~")}
+              title="Зачеркнутый"
+            >
+              <Icon icon="mdi:format-strikethrough" />
+            </button>

-          <div className="floating-toolbar-separator" />
+            <div className="floating-toolbar-separator" />

-          <button
-            className="floating-toolbar-btn"
-            onClick={() => onInsertColor?.()}
-            title="Цвет текста"
-          >
-            <Icon icon="mdi:palette" />
-          </button>
+            <button
+              className="floating-toolbar-btn"
+              onClick={() => onInsertColor?.()}
+              title="Цвет текста"
+            >
+              <Icon icon="mdi:palette" />
+            </button>

-          <button
-            className="floating-toolbar-btn"
-            onClick={() => handleFormat("||", "||")}
-            title="Скрытый текст"
-          >
-            <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>
-        </>
-      )}
+            <button
+              className="floating-toolbar-btn"
+              onClick={() => handleFormat("||", "||")}
+              title="Скрытый текст"
+            >
+              <Icon icon="mdi:eye-off" />
+            </button>
+          </>
+        )}
      </div>
    </div>
  );
--- a/src/components/notes/MarkdownToolbar.tsx
+++ b/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("> ", "")}
--- a/src/components/notes/NoteEditor.tsx
+++ b/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) {
@ -341,7 +349,7 @@ export const NoteEditor: React.FC<NoteEditorProps> = ({ onSave }) => {
          for (let i = 0; i < lines.length; i++) {
            const line = lines[i];
            const trimmedLine = line.trim();
-            
+
            // Пропускаем пустые строки
            if (trimmedLine === "") {
              processedLines.push(line);
@ -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 =
-      rect.top + paddingTop + lineNumber * lineHeight + lineHeight / 2;
-    const left = rect.left + paddingLeft + textWidth;
+    // Вычисляем вертикальные координаты
+    const startTop =
+      rect.top + paddingTop + startLineNumber * lineHeight - scrollTop;
+    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,16 +967,18 @@ export const NoteEditor: React.FC<NoteEditorProps> = ({ onSave }) => {
              }
            }}
          />
-          <FloatingToolbar
-            textareaRef={textareaRef}
-            onFormat={insertMarkdown}
-            visible={showFloatingToolbar}
-            position={toolbarPosition}
-            onHide={() => setShowFloatingToolbar(false)}
-            onInsertColor={insertColorMarkdown}
-            activeFormats={activeFormats}
-            hasSelection={hasSelection}
-          />
+          {floatingToolbarEnabled && (
+            <FloatingToolbar
+              textareaRef={textareaRef}
+              onFormat={insertMarkdown}
+              visible={showFloatingToolbar}
+              position={toolbarPosition}
+              onHide={() => setShowFloatingToolbar(false)}
+              onInsertColor={insertColorMarkdown}
+              activeFormats={activeFormats}
+              hasSelection={hasSelection}
+            />
+          )}
        </>
      )}

--- a/src/components/notes/NoteItem.tsx
+++ b/src/components/notes/NoteItem.tsx
@ -67,6 +67,12 @@ export const NoteItem: React.FC<NoteItemProps> = ({
  const { showNotification } = useNotification();
  const dispatch = useAppDispatch();
  useMarkdown({ onNoteUpdate: onReload }); // Инициализируем обработчики спойлеров, внешних ссылок и чекбоксов
+  
+  // Проверяем, включена ли плавающая панель
+  const floatingToolbarEnabled =
+    user?.floating_toolbar_enabled !== undefined
+      ? user.floating_toolbar_enabled === 1
+      : true;

  const handleEdit = () => {
    setIsEditing(true);
@ -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,16 +1227,18 @@ export const NoteItem: React.FC<NoteItemProps> = ({
                    }
                  }}
                />
-                <FloatingToolbar
-                  textareaRef={editTextareaRef}
-                  onFormat={insertMarkdown}
-                  visible={showFloatingToolbar}
-                  position={toolbarPosition}
-                  onHide={() => setShowFloatingToolbar(false)}
-                  onInsertColor={insertColorMarkdown}
-                  activeFormats={activeFormats}
-                  hasSelection={hasSelection}
-                />
+                {floatingToolbarEnabled && (
+                  <FloatingToolbar
+                    textareaRef={editTextareaRef}
+                    onFormat={insertMarkdown}
+                    visible={showFloatingToolbar}
+                    position={toolbarPosition}
+                    onHide={() => setShowFloatingToolbar(false)}
+                    onInsertColor={insertColorMarkdown}
+                    activeFormats={activeFormats}
+                    hasSelection={hasSelection}
+                  />
+                )}
              </>
            )}

--- a/src/pages/SettingsPage.tsx
+++ b/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>
--- a/src/styles/style.css
+++ b/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);
-  color: #155724;
-  border-color: #c3e6cb;
-  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
+  background: linear-gradient(
+    45deg,
+    rgba(var(--accent-color-rgb), 0.15),
+    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);
-  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.35);
+  background: linear-gradient(
+    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);
+    }
+  }
+}
--- a/src/types/user.ts
+++ b/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 {
--- a/src/utils/markdown.ts
+++ b/src/utils/markdown.ts
@ -25,49 +25,54 @@ const spoilerExtension = {

 // Функция для рендеринга вложенных токенов
 function renderTokens(tokens: any[], renderer: any): string {
-  return tokens.map((token) => {
-    // Используем кастомный renderer если он есть
-    if (renderer[token.type]) {
-      return renderer[token.type](token);
-    }
-    // Fallback для встроенных типов токенов
-    if (token.type === 'text') {
-      return token.text || '';
-    }
-    if (token.type === 'strong') {
-      return `<strong>${renderTokens(token.tokens || [], renderer)}</strong>`;
-    }
-    if (token.type === 'em') {
-      return `<em>${renderTokens(token.tokens || [], renderer)}</em>`;
-    }
-    if (token.type === 'codespan') {
-      return `<code>${token.text || ''}</code>`;
-    }
-    if (token.type === 'del') {
-      return `<del>${renderTokens(token.tokens || [], renderer)}</del>`;
-    }
-    if (token.type === 'link') {
-      // Для ссылок используем кастомный renderer если доступен
-      if (renderer.link) {
-        return renderer.link(token);
+  return tokens
+    .map((token) => {
+      // Используем кастомный renderer если он есть
+      if (renderer[token.type]) {
+        return renderer[token.type](token);
      }
-      // Fallback для встроенных ссылок
-      const href = token.href || '';
-      const title = token.title ? ` title="${token.title}"` : '';
-      const text = token.tokens && token.tokens.length > 0 
-        ? renderTokens(token.tokens, renderer)
-        : (token.text || '');
-      return `<a href="${href}"${title}>${text}</a>`;
-    }
-    if (token.type === 'spoiler') {
-      // Для спойлеров используем кастомный renderer если доступен
-      if (renderer.spoiler) {
-        return renderer.spoiler(token);
+      // Fallback для встроенных типов токенов
+      if (token.type === "text") {
+        return token.text || "";
      }
-      return `<span class="spoiler" title="Нажмите, чтобы показать">${token.text || ''}</span>`;
-    }
-    return token.text || '';
-  }).join('');
+      if (token.type === "strong") {
+        return `<strong>${renderTokens(token.tokens || [], renderer)}</strong>`;
+      }
+      if (token.type === "em") {
+        return `<em>${renderTokens(token.tokens || [], renderer)}</em>`;
+      }
+      if (token.type === "codespan") {
+        return `<code>${token.text || ""}</code>`;
+      }
+      if (token.type === "del") {
+        return `<del>${renderTokens(token.tokens || [], renderer)}</del>`;
+      }
+      if (token.type === "link") {
+        // Для ссылок используем кастомный renderer если доступен
+        if (renderer.link) {
+          return renderer.link(token);
+        }
+        // Fallback для встроенных ссылок
+        const href = token.href || "";
+        const title = token.title ? ` title="${token.title}"` : "";
+        const text =
+          token.tokens && token.tokens.length > 0
+            ? renderTokens(token.tokens, renderer)
+            : token.text || "";
+        return `<a href="${href}"${title}>${text}</a>`;
+      }
+      if (token.type === "spoiler") {
+        // Для спойлеров используем кастомный renderer если доступен
+        if (renderer.spoiler) {
+          return renderer.spoiler(token);
+        }
+        return `<span class="spoiler" title="Нажмите, чтобы показать">${
+          token.text || ""
+        }</span>`;
+      }
+      return token.text || "";
+    })
+    .join("");
 }

 // Кастомный renderer для внешних ссылок и чекбоксов
@ -75,9 +80,9 @@ const renderer: any = {
  link(token: any) {
    const href = token.href;
    const title = token.title;
-    
+
    // Правильно обрабатываем вложенные токены для форматирования внутри ссылок
-    let text = '';
+    let text = "";
    if (token.tokens && token.tokens.length > 0) {
      text = renderTokens(token.tokens, this);
    } else if (token.text) {
@ -101,9 +106,9 @@ const renderer: any = {
  listitem(token: any) {
    const task = token.task;
    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);
    }
  }
Author	SHA1	Message	Date
Fovway	80c42f8df0	Добавлена поддержка колонки floating_toolbar_enabled в таблицу пользователей и обновлены соответствующие компоненты для управления отображением плавающей панели инструментов. Реализована логика настройки и сохранения этого параметра в профиле пользователя. Обновлены API и интерфейсы для поддержки новых функций.	2025-11-05 05:47:12 +07:00
Fovway	e49b9dc865	Обновлены компоненты FloatingToolbar и MarkdownToolbar для улучшения работы с выделением текста и добавления новых функций форматирования. Расширены свойства позиционирования панели инструментов, добавлена поддержка цветного текста. Обновлен файл service worker с новой версией для кэширования. Оптимизированы стили для мобильных устройств.	2025-11-05 05:39:32 +07:00
Fovway	30f9daaec8	Обновлены стили для компонента спойлеров, улучшена анимация и добавлены новые визуальные эффекты. Обновлен файл service worker с новой версией для кэширования. Оптимизирована логика рендеринга токенов в markdown, улучшена обработка вложенных элементов и ссылок.	2025-11-05 05:24:07 +07:00