# Rich Text и Markdown: Как переключаться и использовать оба формата В современных приложениях для записей пользователи часто выбирают между двумя различными подходами: визуальной наглядностью редактора **Rich Text** и простотой использования **Markdown**. Большинство приложений заставляют пользователей выбирать один из этих форматов. **NoteRich** разрушает эту дихотомию. Благодаря использованию сложной архитектуры двойного режима, NoteRich позволяет плавно переключаться между форматами Rich Text и Markdown для одного и того же контента, предлагая лучшие аспекты обоих форматов без компромиссов. --- ## Понимание двух режимов Прежде чем начать разбираться в способах переключения между режимами, важно понять, что предлагает каждый из них и когда их использовать. ### Режим Rich Text: Визуальная редактировка в лучшем виде Режим Rich Text предоставляет опыт редактирования в формате WYSIWYG (What You See Is What You Get). Когда вы находитесь в режиме Rich Text: - **Визуальная форматировка**: Жирный шрифт, курсив, заголовки и списки отображаются так, как они будут выглядеть при выполнении редактирования - **Доступ к панели инструментов**: Полная панель инструментов для форматирования позволяет использовать все возможности форматирования одним кликом - **Вставка медиа**: Изображения, таблицы, уравнения и интерактивные элементы отображаются внутри текста - **Перетаскивание**: Легко изменять структуру контента, перетаскивая блоки - **Контекстные меню**: Действия кликам правой кнопкой и панели форматирования позволяют повысить производительность Режим Rich Text подходит для: - Пользователей, которым нравится визуальная обратная связь во время написания - Документов с сложной структурой (таблицы, многострочные форматы) - Сессий совместной редактирования, где важна визуальная четкость - Быстрое форматирование без необходимости запоминания синтаксиса ### Режим Markdown: Простота использования Режим Markdown представляет ваш контент в виде простого текста с легким синтаксисом форматирования. Когда вы работаете в режиме Markdown: - **Простота использования текста**: Ваши заметки сохраняются в универсальном формате, читаемом в любом месте - **Рабочий процесс с использованием клавиатуры**: Форматирование текста с помощью простых клавиш (****жирный**, `***курсив**`, `#**заголовок**`) - **Совместимость с системами контроля версий**: Чистые отличия в Git и других системах контроля версий - **Быстрое печатание**: Не требуется мышь; можно держать руки на клавиатуре - **Универсальная совместимость**: Экспорт и обмен файлами `.md`, которые работают в любом месте Режим Markdown подходит для: - Технической документации и заметок, содержащих много кода - Писателей, которым нравится беззаботное редактирование простого текста - Создания длинных контентов с минимальными затратами на форматирование - Пользователей, которым важна максимальная простота использования и готовность к будущим изменениям --- ## Архитектура двойного режима NoteRich не предлагает просто два разных режима редактирования — он создает **унифицированную модель контента**, которая может быть представлена в любом из форматов мгновенно. Это достигается благодаря сложному движку преобразования, который в реальном времени конвертирует внутреннюю структуру документа в синтаксис Markdown. ```mermaid graph TD A[Пользовательский ввод] --> B{Внутренняя модель документа} B --> C[Представление в формате Rich Text] B --> D[Представление в формате Markdown] C --> E[Действия панели инструментов] C --> F[Операции перетаскивания] C --> G[Форматирование в контекстном меню] D --> H[Отслеживание скоростей Markdown] D --> I[Распознавание синтаксической паттернов] D --> J[Импорт/экспорт простого текста] B --> K[Унифицированный слои хранения] K --> L[Хранение в IndexedDB] K --> M[P2P синхронизация] ``` Эта архитектура означает, что **ваш контент никогда не окажется в одном формате**. Независимо от того, начинаете ли вы печатать в Markdown или применяете форматирование через панель инструментов Rich Text, внутренняя модель документа остается неизменной, что позволяет мгновенно переключаться без потери данных или повреждения форматирования. --- ## Как переключаться между режимами ### Способ 1: Выбор режима по настройкам NoteRich предоставляет глобальную настройку, которая определяет предпочтительный режим редактирования для всех заметок: 1. **Откройте настройки**: Нажмите на значок шестиугольника (⚙️) в правом верхнем углу редактора 2. **Найдите переключатель "Rich Text"**: Найдите переключатель с надписью "Rich Text" в панели настроек 3. **Переключайте режим**: - **Включено (✓)**: Редактор открывается в режиме Rich Text с полной панелью инструментов - **Выключено (○)**: Редактор открывается в режиме простого текста/Markdown ```mermaid sequenceDiagram participant Пользователь participant Настройки participant Редактор participant Модель документа Пользователь->>Настройки: Нажать на значок настроек Пользователь->>Настройки: Переключить переключатель "Rich Text" Настройки->>Редактор: Обновить флаг isRichText Редактор->>Модель документа: Перерендровать с новым режимом Редактор-->>Пользователь: Отображение обновленного интерфейса ``` **Важно**: Изменение этой настройки требует перезагрузки страницы, чтобы она вступила в силу. Это гарантирует, что все плагины и компоненты панели инструментов правильно инициализированы для выбранного режима. ### Способ 2: Импорт/экспорт заметок в Markdown Даже когда вы работаете в основном в режиме Rich Text, вы можете импортировать и экспортировать отдельные заметки в Markdown: #### Экспорт заметки в Markdown 1. Откройте заметку, которую хотите экспортировать 2. Нажмите на **Меню действий** (обычно представленное тремя точками `⋮` или значком скачивания) 3. Выберите **"Экспортировать как Markdown"** 4. Заметка преобразуется в синтаксис Markdown и скачивается в формате `.md` Процесс экспорта интеллектуально обрабатывает: - **Заголовки**: Преобразуются в синтаксис `#`, `##`, `###` - **Списки**: Списки с отметками и числовые списки сохраняются с правильным отступом - **Блоки кода**: Аннотации кода сохраняются (например, ```javascript) - **Таблицы**: Форматируются как таблицы Markdown с маркерами выравнивания - **Ссылки и изображения**: URL сохраняются с текстом альт #### Импорт Markdown-контента 1. Создайте новую заметку или откройте существующий черновик 2. Попробуйте функцию **Импорт** из меню действий 3. Выберите файл `.md` или вставьте текст Markdown напрямую 4. NoteRich автоматически распознает синтаксис Markdown и преобразует его в внутреннюю модель документа Импортный движок использует распознавание паттернов для идентификации элементов Markdown: ```markdown Паттерн → Элемент Rich Text -------------------------------------------------- # Заголовок 1 → Заголовок H1 ## Заголовок 2 → Заголовок H2 **жирный текст** → Элемент текста жирного шрифта *курсивный текст* → Элемент текста курсивного шрифта - Пункт списка → Пункт списка с отметками 1. Пункт с числом → Пункт списка с числом и точкой > Цитата → Элемент цитаты ```code``` → Элемент блока кода [Ссылка](url) → Элемент ссылки ![Изображение](url) → Элемент изображения ``` ### Способ 3: Шорты Markdown в режиме Rich Text Одной из самых мощных функций NoteRich является возможность использования **шортов Markdown даже в режиме Rich Text**. Этот гибридный подход позволяет писать естественным образом, используя скорость Markdown. Когда режим Rich Text активирован, ввод Markdown-синтаксиса вызывает автоматическое преобразование: | Вводите это | Преобразуется в это | Условие триггера | |--------------------|---------------------------|--------------------------| | `# ` | H1 Заголовок | Простая пробел после знака | | `## ` | H2 Заголовок | Простая пробел после двойного знака | | `### ` | H3 Заголовок | Простая пробел после трехзначного знака | | `- ` или `* ` | Списки с отметками | Простая пробел после знака | | `1. ` | Списки с числами | Простая пробел после числа и точки | | `[] ` | Списки с флажками | Простая пробел после скобок | | `> ` | Цитаты | Простая пробел после знака больше | | ```` ``` ```` | Блоки кода | Три тире и Enter | | `**текст**` | **Жирный текст** | Завершающие тире | | `*текст*` | *Курсивный текст* | Завершающие тире | | `~~текст~~` | ~~Пробел через пробел~~ | Завершающие тильды | | `` `текст`` | `Вставка внутри кода` | Завершающие тильды | | `[текст](url)` | [Ссылка](url) | Полная синтаксис ссылки | | `---` или `***` | Горизонтальные линии | Три тире/астерикс | | | |