diff --git a/src/pages/CreateStoryPage.css b/src/pages/CreateStoryPage.css index 675c7fc..be62134 100644 --- a/src/pages/CreateStoryPage.css +++ b/src/pages/CreateStoryPage.css @@ -596,6 +596,95 @@ line-height: 1.6; } +/* Markdown preview */ +.markdown-preview { + margin-top: 1rem; + background: #0d0d0d; + border: 1px solid #333; + border-radius: 10px; + overflow: hidden; +} + +.preview-header { + padding: 0.5rem 1rem; + background: #1a1a1a; + color: #888; + font-size: 0.85rem; + border-bottom: 1px solid #333; +} + +.preview-content { + padding: 1rem; + color: #ccc; + font-size: 0.95rem; + line-height: 1.6; + max-height: 400px; + overflow-y: auto; +} + +.preview-content h1, +.preview-content h2, +.preview-content h3, +.preview-content h4 { + color: #fff; + margin: 1rem 0 0.5rem; +} + +.preview-content h1:first-child, +.preview-content h2:first-child, +.preview-content h3:first-child { + margin-top: 0; +} + +.preview-content p { + margin: 0.5rem 0; +} + +.preview-content strong { + color: #a0b4ff; +} + +.preview-content em { + color: #c9a0ff; +} + +.preview-content ul, +.preview-content ol { + margin: 0.5rem 0; + padding-left: 1.5rem; +} + +.preview-content li { + margin: 0.25rem 0; +} + +.preview-content code { + background: rgba(102, 126, 234, 0.2); + padding: 0.1rem 0.4rem; + border-radius: 4px; + font-family: "Fira Code", monospace; + font-size: 0.85em; +} + +.preview-content pre { + background: #111; + padding: 1rem; + border-radius: 8px; + overflow-x: auto; +} + +.preview-content pre code { + background: none; + padding: 0; +} + +.preview-content blockquote { + border-left: 3px solid #667eea; + padding-left: 1rem; + margin: 0.5rem 0; + color: #999; +} + /* Character fields */ .character-fields { display: flex; diff --git a/src/pages/CreateStoryPage.tsx b/src/pages/CreateStoryPage.tsx index d390c81..bc5bd96 100644 --- a/src/pages/CreateStoryPage.tsx +++ b/src/pages/CreateStoryPage.tsx @@ -1,5 +1,6 @@ import { useState, useEffect } from "react"; import { useNavigate, Link, useParams } from "react-router-dom"; +import ReactMarkdown from "react-markdown"; import { useAuth } from "../contexts/AuthContext"; import { createStory, getStory, updateStory } from "../services/api"; import type { Character } from "../types"; @@ -652,7 +653,7 @@ export default function CreateStoryPage() {

Кастомные правила поведения ИИ. Если пусто — используются - стандартные правила. + стандартные правила. Поддерживается Markdown.