{"draftJsState":{"blocks":[{"data":{"image":{"id":"6a64da96f3310a47444085b3"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Превью WYSWIG редактора","type":"atomic:image","key":"9jp43"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8sv7d"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":67,"offset":45}],"inlineStyleRanges":[],"text":"В более удобном виде читайте на нашем сайте: https://webcos.ru/blog/10-kak-sozdat-sobstvennyj-redaktor-na-tiptap","type":"unstyled","key":"co4ar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Приветствую на этой статье!","type":"unstyled","key":"cemkb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хочу рассказать про то, как создать собственный редактор, так как сам столкнулся с проблемой, что не везде есть функционал, который я хотел бы иметь, либо его делают платным. Так вот, легче всего мне показалось сделать собственный редактор на TipTap. Но была проблема в том, что нормальный редактор у них платный, поэтому я решил создать свой и это оказалось не так трудно.","type":"unstyled","key":"1f9hn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В статье рассмотрим:","type":"unstyled","key":"84hln"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавление расширений TipTap","type":"unordered-list-item","key":"8vgm5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как добавить любой язык программирования в CodeBlock","type":"unordered-list-item","key":"5k349"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как подсвечивать код, как в редакторе, так и в preview","type":"unordered-list-item","key":"7gafc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как работать с Tiptap Renderer","type":"unordered-list-item","key":"bhsgv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавление ссылок","type":"unordered-list-item","key":"60l18"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изменение изображения в редакторе","type":"unordered-list-item","key":"ajs02"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вставка изображения через ctrl+v","type":"unordered-list-item","key":"3f6s3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изменения стиля текста","type":"unordered-list-item","key":"6v44u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Bubble-меню в редакторе","type":"unordered-list-item","key":"2t8cu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По итогу мы получим такой результат (стилизовать вы сможете под себя):","type":"unstyled","key":"3hjfk"},{"data":{"image":{"id":"6a64da5c261cc919f92bcc2f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Результат","type":"atomic:image","key":"5phk"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":66,"offset":56}],"inlineStyleRanges":[],"text":"Вот сразу же ссылка, для тех, кто хочет протестировать:\nhttps://stackblitz.com/edit/vitejs-vite-xghbrjp8?file=package.json","type":"unstyled","key":"bv3pt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Делать будем на React, но переделать под Next.js у вас не будет проблем, так как делается всё аналогично.","type":"unstyled","key":"171hl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начало","type":"header-two","key":"7d5jk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":240,"style":"ITALIC"}],"text":"Начинаем прям с полного нуля, поэтому кому неинтересна инициализация проекта, можете скипнуть до архитектуры. Первое, что нужно сделать - создать проект, можете выбирать сборщик, который вам удобен, либо повторить за мной. Я буду делать на React + Typescript (Сборщик Vite):","type":"unstyled","key":"8hf21"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm create vite@latest","type":"blockquote","key":"corvo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Также установим все нужные нам библиотеки:","type":"unstyled","key":"j8ic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm install @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/html @tiptap/static-renderer @tiptap/extension-bubble-menu @tiptap/extension-character-count @tiptap/extension-code-block-lowlight @tiptap/extension-color @tiptap/extension-file-handler @tiptap/extension-highlight @tiptap/extension-horizontal-rule @tiptap/extension-image @tiptap/extension-link @tiptap/extension-list @tiptap/extension-placeholder @tiptap/extension-table @tiptap/extension-table-cell @tiptap/extension-table-header @tiptap/extension-table-row @tiptap/extension-task-item @tiptap/extension-task-list @tiptap/extension-text-align @tiptap/extension-text-style @tiptap/extension-underline colord hast-util-to-html highlight.js lowlight react-colorful","type":"blockquote","key":"d4qpc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чистим проект от мусора","type":"header-two","key":"au9f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почистим App.tsx и сделаем единственный div с классом editor","type":"unordered-list-item","key":"brokj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function App() {\n\n return (\n

\n\n

\n )\n}\n\nexport default App","type":"blockquote","key":"6krr1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Удалим файлы с картинками в папке assets, App.css","type":"unordered-list-item","key":"eftse"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почистим index.css и добавим стили:","type":"unordered-list-item","key":"9hhmc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@import url('https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');\n\n/* Нормализуем элементы */\n*, :after, :before {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\n/* Базовые стили, чтобы всё выглядело хорошо */\nbody {\n font-family: \"Roboto\", sans-serif;\n background-color: #000;\n color: #fff;\n}\n\n/* Стили, чтобы были отступы от краёв */\n.editor {\n margin-top: 10px;\n padding: 10px;\n}","type":"blockquote","key":"t2kn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создаём структуру проекта","type":"header-two","key":"9oibk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавим структуры в папке src:","type":"unstyled","key":"43da8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"папка assets (будет отвечать за изображения)\nпапка icons (иконки)\nпапка styles (стили css)","type":"unordered-list-item","key":"8cndc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"папка components (компоненты","type":"unordered-list-item","key":"17u5k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"папка utils (вспомогательные файлы)","type":"unordered-list-item","key":"2e1ok"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":7,"offset":54}],"inlineStyleRanges":[],"text":"Сразу закинем изображения с элементами для редактора (скачать)","type":"unstyled","key":"dgl64"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляем Реэкспорты для изображений","type":"header-two","key":"178q8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Реэкспорты - это объединение экспорта и импорта в одном файле, он нужен для того, чтобы в других файлах сделать красивый импорт (короткий и читаемый), т.е не с 15 файлов, а с одного. Обычно их добавляют на этапе рефакторинга, но мы сделаем сразу, чтобы потом не возвращаться к этому.","type":"unstyled","key":"1u04o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Реэкспорты изображений: создадим в папке assets файл index.ts:","type":"unstyled","key":"et51v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export { default as SendIcon } from \"./icons/send.svg\";\nexport { default as TrashIcon } from \"./icons/trash.svg\";\nexport { default as BoldIcon } from \"./icons/bold.svg\";\nexport { default as ItalicIcon } from \"./icons/italic.svg\";\nexport { default as UnderlineIcon } from \"./icons/underline.svg\";\nexport { default as StrikeIcon } from \"./icons/strike.svg\";\nexport { default as ColorIcon } from \"./icons/color.svg\";\nexport { default as HighlightIcon } from \"./icons/highlight.svg\";\nexport { default as AlignLeftIcon } from \"./icons/align-left.svg\";\nexport { default as AlignCenterIcon } from \"./icons/align-center.svg\";\nexport { default as AlignRightIcon } from \"./icons/align-right.svg\";\nexport { default as AlignJustifyIcon } from \"./icons/align-justify.svg\";\nexport { default as LinkIcon } from \"./icons/link.svg\";\nexport { default as ImageIcon } from \"./icons/image.svg\";\nexport { default as CopyIcon } from \"./icons/copy.svg\";\nexport { default as DropDownIcon } from \"./icons/dropdown.svg\";","type":"blockquote","key":"eljbn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Позже мы поймём как это работает.","type":"unstyled","key":"e76bq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Редактор - связующий компонент","type":"header-two","key":"9efj6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перейдём к связующему компоненту - самому редактору. Он будет объединять наш редактор с тулбаром, а также хранить настройки. Создадим в папке components новую папку Editor и внутрь положим Editor.tsx, я сразу показываю полный код, сейчас будем по-тихоньку добавлять все компоненты и файлы:","type":"unstyled","key":"6tmqi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { EditorContent, useEditor } from '@tiptap/react'\nimport { BubbleMenu } from \"@tiptap/react/menus\";\n\nimport { MenuBar } from '../MenuBar/MenuBar'\n\nimport type { JSONContent } from \"@tiptap/core\";\n\nimport { editorExtensions } from \"../../utils/extensions\";\n\nimport styles from './Editor.module.css'\n\nimport 'highlight.js/styles/monokai-sublime.css';\nimport '../../assets/styles/tiptap.css';\n\ninterface Editor {\n // Вызывается при каждом изменении редактора\n onChange: (content: JSONContent) => void\n\n // Начальное содержимое редактора\n value?: JSONContent\n}\n\nexport default function Editor({ onChange, value }: Editor) {\n\n const editor = useEditor({\n\n // Все расширения редактора (таблицы, изображения,\n // подсветка кода, ссылки, task list и т.д.)\n extensions: editorExtensions,\n\n // Начальное содержимое редактора\n content: value,\n\n // Для Next.js App Router отключаем немедленный рендер,\n // чтобы избежать проблем с гидратацией\n // immediatelyRender: false,\n\n // HTML-атрибуты самого редактора\n editorProps: {\n attributes: {\n class: styles.editorInner,\n },\n },\n\n // Каждый раз при изменении редактора\n // отдаём наружу актуальный JSON Tiptap\n onUpdate: ({ editor }) => {\n const jsonContent = editor.getJSON();\n onChange(jsonContent);\n },\n })\n\n // Пока редактор не инициализировался —\n // ничего не отображаем\n if (!editor) {\n return null\n }\n\n return (\n

\n\n {/* Верхняя панель инструментов */}\n \n\n {/* Плавающее меню при выделении текста */}\n \n \n \n\n {/* Сам редактор */}\n \n\n

\n )\n}","type":"blockquote","key":"cpuma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разберём всё подробнее.","type":"unstyled","key":"827ut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У нас есть основные стили, которые мы будем использовать для редактора, для этого создадим в этой же папке Editor.module.css:","type":"unstyled","key":"3eoe7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".editor {\n margin-top: 15px;\n border: 1px solid #2d333b;\n outline: none;\n border-radius: 8px;\n background: #0d1117;\n}\n\n.editorInner {\n outline: none !important;\n min-height: 300px;\n border-radius: 8px;\n padding: 12px;\n color: #e6edf3;\n background: #0d1117;\n}","type":"blockquote","key":"elok6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот импорт:","type":"unstyled","key":"512hp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import 'highlight.js/styles/monokai-sublime.css';","type":"blockquote","key":"dia3b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нужен для того, чтобы была подсветка кода в редакторе и в preview.","type":"unstyled","key":"8965q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы также будем импортировать собственный файл стилей, чтобы наш редактор отображал всё корректно, почти все стили туда ставились из документации TipTap:","type":"unstyled","key":"hn7o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import '../../assets/styles/tiptap.css';","type":"blockquote","key":"epl84"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот сами стили, создаём в папке assets","type":"unstyled","key":"bklc1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Basic editor styles */\n.tiptap {\n color: #F5F7FA;\n\n :first-child {\n margin-top: 0;\n }\n\n /* List styles */\n ul,\n ol {\n padding: 0 1rem;\n margin: 1.25rem 1rem 1.25rem 0.4rem;\n\n li p {\n margin-top: 0.25em;\n margin-bottom: 0.25em;\n }\n }\n\n /* Heading styles */\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n line-height: 1.1;\n margin-top: 1rem;\n text-wrap: pretty;\n color: #FFFFFF;\n font-weight: 700;\n }\n\n h1,\n h2 {\n margin-top: 1.5rem;\n margin-bottom: 1.5rem;\n }\n\n h1 {\n font-size: 1.4rem;\n }\n\n h2 {\n font-size: 1.2rem;\n }\n\n h3 {\n font-size: 1.1rem;\n }\n\n h4,\n h5,\n h6 {\n font-size: 1rem;\n }\n\n /* Inline code */\n\n code {\n background: #4F46E5;\n color: #FFFFFF;\n border-radius: 6px;\n font-size: 0.85rem;\n padding: 0.22em 0.4em;\n font-weight: 500;\n }\n\n /* Code block */\n\n pre {\n background: #0D1117;\n border: 1px solid #30363D;\n border-radius: 10px;\n color: #F5F7FA;\n font-family: \"JetBrains Mono\", monospace;\n margin: 1.5rem 0;\n padding: 1rem;\n overflow-x: auto;\n\n code {\n background: none;\n color: inherit;\n font-size: 0.8rem;\n padding: 0;\n }\n }\n\n blockquote {\n border-left: 4px solid #4F8CFF;\n background: rgba(79, 140, 255, .08);\n margin: 1.5rem 0;\n padding: .75rem 1rem;\n border-radius: 6px;\n color: #CDD6E5;\n }\n\n a {\n color: #6AA4FF;\n text-decoration: underline;\n pointer-events: none;\n }\n\n hr {\n border: none;\n border-top: 1px solid #2B3442;\n margin: 2rem 0;\n }\n\n /* Resize */\n\n [data-resize-handle] {\n position: absolute;\n background: rgba(15, 17, 23, .75);\n border: 1px solid rgba(255,255,255,.85);\n border-radius: 2px;\n z-index: 10;\n\n &:hover {\n background: rgba(79,140,255,.85);\n }\n\n &[data-resize-handle='top-left'],\n &[data-resize-handle='top-right'],\n &[data-resize-handle='bottom-left'],\n &[data-resize-handle='bottom-right'] {\n width: 8px;\n height: 8px;\n }\n\n &[data-resize-handle='top-left'] {\n top: -4px;\n left: -4px;\n cursor: nwse-resize;\n }\n\n &[data-resize-handle='top-right'] {\n top: -4px;\n right: -4px;\n cursor: nesw-resize;\n }\n\n &[data-resize-handle='bottom-left'] {\n bottom: -4px;\n left: -4px;\n cursor: nesw-resize;\n }\n\n &[data-resize-handle='bottom-right'] {\n bottom: -4px;\n right: -4px;\n cursor: nwse-resize;\n }\n\n &[data-resize-handle='top'],\n &[data-resize-handle='bottom'] {\n height: 6px;\n left: 8px;\n right: 8px;\n }\n\n &[data-resize-handle='top'] {\n top: -3px;\n cursor: ns-resize;\n }\n\n &[data-resize-handle='bottom'] {\n bottom: -3px;\n cursor: ns-resize;\n }\n\n &[data-resize-handle='left'],\n &[data-resize-handle='right'] {\n width: 6px;\n top: 8px;\n bottom: 8px;\n }\n\n &[data-resize-handle='left'] {\n left: -3px;\n cursor: ew-resize;\n }\n\n &[data-resize-handle='right'] {\n right: -3px;\n cursor: ew-resize;\n }\n }\n\n [data-resize-state='true'] [data-resize-wrapper] {\n outline: 1px solid rgba(79,140,255,.45);\n border-radius: 2px;\n }\n\n img {\n width: auto;\n max-width: 100%;\n border-radius: 8px;\n }\n\n li > ul,\n li > ol {\n margin-top: 0;\n }\n\n /* Task List */\n\n ul[data-type='taskList'] {\n list-style: none;\n margin-left: 0;\n padding: 0;\n\n li {\n display: flex;\n align-items: flex-start;\n\n > label {\n flex: 0 0 auto;\n margin-right: .5rem;\n user-select: none;\n }\n\n > div {\n flex: 1 1 auto;\n }\n }\n\n input[type='checkbox'] {\n appearance: none;\n -webkit-appearance: none;\n\n width: 18px;\n height: 18px;\n\n border: 2px solid #6E7A90;\n border-radius: 4px;\n background: transparent;\n\n cursor: pointer;\n position: relative;\n transition: .15s;\n }\n\n input[type='checkbox']:checked {\n background: #4F8CFF;\n border-color: #4F8CFF;\n }\n\n [data-type='taskList'] [data-checked='true'] > div > p:first-child,\n [data-checked='true'] > div > p:first-child {\n text-decoration: line-through;\n color: #7D889C;\n }\n\n input[type='checkbox']:checked::after {\n content: \"\";\n\n position: absolute;\n\n left: 5px;\n top: 50%;\n\n width: 4px;\n height: 8px;\n\n border: solid #FFFFFF;\n border-width: 0 2px 2px 0;\n\n transform: rotate(45deg) translate(-50%, -50%);\n }\n\n ul[data-type='taskList'] {\n margin: 0;\n }\n }\n}\n\n/*При клике 2 раза ctrl по ссылке можно её открыть*/\n.tiptap .ProseMirror-selectednode a {\n pointer-events: all;\n}","type":"blockquote","key":"3u82k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы будем принимать функцию onChange, чтобы обрабатывать изменения редактора и также можем поставить начальное значение через value:","type":"unstyled","key":"9ef6r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"interface Editor {\n // Вызывается при каждом изменении редактора\n onChange: (content: JSONContent) => void\n\n // Начальное содержимое редактора\n value?: JSONContent\n}","type":"blockquote","key":"1r5qb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Настройки editor'а","type":"header-two","key":"8bmb6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перейдём к интересному, хук useEditor поможет нам инициализировать editor и настроить его под нас.","type":"unstyled","key":"c0kb3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const editor = useEditor({\n\n // Все расширения редактора (таблицы, изображения,\n // подсветка кода, ссылки, task list и т.д.)\n extensions: editorExtensions,\n\n // Начальное содержимое редактора\n content: value,\n\n // Для Next.js App Router отключаем немедленный рендер,\n // чтобы избежать проблем с гидратацией\n // immediatelyRender: false,\n\n // HTML-атрибуты самого редактора\n editorProps: {\n attributes: {\n class: styles.editorInner,\n },\n },\n\n // Каждый раз при изменении редактора\n // отдаём наружу актуальный JSON Tiptap\n onUpdate: ({ editor }) => {\n const jsonContent = editor.getJSON();\n onChange(jsonContent);\n },\n })","type":"blockquote","key":"3s6fk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"extensions - расширения, которые мы будем использовать в редакторе (Расширения - это как раз весь функционал для редактора, по типу жирного шрифта, списков, codeblock'а, ссылок, и тому подобного)","type":"unordered-list-item","key":"37gk3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"content - начальное значение редактора","type":"unordered-list-item","key":"2j7d3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"},{"length":12,"offset":172,"style":"ITALIC"}],"text":"immediatelyRender - нужен, если вы будете использовать Next.js, чтобы избежать ошибок с гидратацией, так как иначе серверный HTML не совпадет с клиентским из-за того, что ProseMirror (движок Tiptap) завязан на браузерном окружении.","type":"unordered-list-item","key":"4mj9p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"editorProps - HTML-атрибуты, я добавил собственные стили, чтобы чуть улучшить вид редактора.","type":"unordered-list-item","key":"88qda"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"onUpdate - функция, которая будет нам отдавать HTML/JSON. Вы можете сами настроить, сделав либо:","type":"unordered-list-item","key":"7gi35"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"editor.getJSON();","type":"blockquote","key":"5li7d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"либо:","type":"unstyled","key":"1f8un"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"editor.getHTML();","type":"blockquote","key":"fiitf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По поводу хранения на бэкенде - это ваш выбор. Я особо не заметил разницы между HTML и JSON, но HTML чаще подвержен XSS атакам. А также static renderer (библиотека Tiptap, которую мы будем использовать позже, для отображения цветного кода) принимает строго JSON, но никто вам не будет мешать использовать generateJSON().","type":"unstyled","key":"6etk9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Файл с расширениями","type":"header-two","key":"97bar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ну что же создадим в папке utils файл extensions.ts:","type":"unstyled","key":"5jin2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import StarterKit from '@tiptap/starter-kit'\nimport Placeholder from '@tiptap/extension-placeholder'\nimport Highlight from '@tiptap/extension-highlight'\nimport TextAlign from '@tiptap/extension-text-align'\nimport Link from '@tiptap/extension-link'\nimport Image from '@tiptap/extension-image'\nimport CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'\nimport FileHandler from \"@tiptap/extension-file-handler\";\nimport { TextStyle } from \"@tiptap/extension-text-style\";\nimport { TaskItem, TaskList } from \"@tiptap/extension-list\";\nimport Color from '@tiptap/extension-color';\n\nimport { lowlight } from './lowlight'\n\nexport const editorExtensions = [\n\n // Базовый набор возможностей редактора:\n // заголовки, жирный текст, курсив, списки,\n // цитаты, история изменений и т.д.\n StarterKit.configure({\n // Используем собственную реализацию блока кода\n codeBlock: false,\n\n // Используем отдельный Link extension\n link: false,\n }),\n\n // Плейсхолдер при пустом редакторе\n Placeholder.configure({\n placeholder: 'Начните писать статью...',\n }),\n\n // Подсветка текста маркером\n Highlight.configure({\n multicolor: true,\n }),\n\n // Работа со ссылками\n Link.configure({\n // Не открывать ссылки прямо во время редактирования\n openOnClick: false,\n\n // Автоматически превращать URL в ссылки\n autolink: true,\n }),\n\n // Работа с изображениями\n Image.configure({\n resize: {\n // Разрешаем изменение размеров изображения\n enabled: true,\n\n // Можно тянуть за любую сторону\n directions: ['top', 'bottom', 'left', 'right'],\n\n // Минимальные размеры изображения\n minWidth: 50,\n minHeight: 50,\n\n // Сохранять пропорции\n alwaysPreserveAspectRatio: true,\n },\n\n // Вставлять как inline-элемент\n inline: true,\n\n // Разрешить base64 изображения\n allowBase64: true,\n\n HTMLAttributes: {\n loading: 'lazy',\n },\n }),\n\n // Выравнивание текста\n TextAlign.configure({\n // Только для заголовков и параграфов\n types: ['heading', 'paragraph'],\n }),\n\n // Drag&Drop и вставка изображений из буфера обмена\n FileHandler.configure({\n\n // Разрешённые форматы\n allowedMimeTypes: [\n 'image/png',\n 'image/jpeg',\n 'image/gif',\n 'image/webp',\n ],\n\n // Пользователь перетащил файл в редактор\n onDrop: (currentEditor, files, pos) => {\n\n files.forEach(file => {\n\n const fileReader = new FileReader()\n\n fileReader.readAsDataURL(file)\n\n fileReader.onload = () => {\n\n currentEditor\n .chain()\n .insertContentAt(pos, {\n type: 'image',\n attrs: {\n src: fileReader.result,\n },\n })\n .focus()\n .run()\n }\n })\n },\n\n // Пользователь вставил изображение через Ctrl + V\n onPaste: (currentEditor, files) => {\n\n files.forEach(file => {\n\n const fileReader = new FileReader()\n\n fileReader.readAsDataURL(file)\n\n fileReader.onload = () => {\n\n currentEditor\n .chain()\n .insertContentAt(\n currentEditor.state.selection.anchor,\n {\n type: 'image',\n attrs: {\n src: fileReader.result,\n },\n }\n )\n .focus()\n .run()\n }\n })\n },\n }),\n\n // Блок кода с подсветкой синтаксиса\n CodeBlockLowlight.configure({\n\n // Используем lowlight (highlight.js)\n lowlight,\n\n // Разрешить Tab внутри блока кода\n enableTabIndentation: true,\n\n // Язык по умолчанию\n defaultLanguage: 'plaintext',\n }),\n\n // Позволяет изменять стиль текста\n // (обязателен для Color)\n TextStyle,\n\n // Цвет текста\n Color,\n\n // Элемент списка задач (checkbox)\n TaskItem.configure({\n nested: true,\n }),\n\n // Сам список задач\n TaskList,\n]","type":"blockquote","key":"8i5aq"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":19,"offset":134}],"inlineStyleRanges":[],"text":"Здесь прописаны все расширения, которые будут использоваться в редакторе и конечно же, вы можете сможете позже добавить свои, зайдя в документацию Tiptap","type":"unstyled","key":"e2c2m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Также, чтобы не нагромождать количеством импортов от языков программирования, создадим файл lowlight.ts в папке utils:","type":"unstyled","key":"6vmpf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { common, createLowlight } from 'lowlight'\nimport css from 'highlight.js/lib/languages/css'\nimport js from 'highlight.js/lib/languages/javascript'\nimport ts from 'highlight.js/lib/languages/typescript'\nimport html from 'highlight.js/lib/languages/xml'\nimport bash from 'highlight.js/lib/languages/bash'\nimport json from 'highlight.js/lib/languages/json'\nimport yaml from 'highlight.js/lib/languages/yaml'\nimport sql from 'highlight.js/lib/languages/sql'\nimport java from 'highlight.js/lib/languages/java'\nimport kotlin from 'highlight.js/lib/languages/kotlin'\nimport go from 'highlight.js/lib/languages/go'\nimport python from 'highlight.js/lib/languages/python'\nimport dockerfile from 'highlight.js/lib/languages/dockerfile'\nimport nginx from 'highlight.js/lib/languages/nginx'\nimport markdown from 'highlight.js/lib/languages/markdown'\nimport diff from 'highlight.js/lib/languages/diff'\nimport ini from 'highlight.js/lib/languages/ini'\nimport php from 'highlight.js/lib/languages/php'\n\nexport const lowlight = createLowlight(common)\nlowlight.register('html', html)\nlowlight.register('css', css)\nlowlight.register('js', js)\nlowlight.register('ts', ts)\nlowlight.register('bash', bash)\nlowlight.register('json', json)\nlowlight.register('yaml', yaml)\nlowlight.register('sql', sql)\nlowlight.register('java', java)\nlowlight.register('kotlin', kotlin)\nlowlight.register('go', go)\nlowlight.register('python', python)\nlowlight.register('dockerfile', dockerfile)\nlowlight.register('nginx', nginx)\nlowlight.register('markdown', markdown)\nlowlight.register('diff', diff)\nlowlight.register('ini', ini)\nlowlight.register('php', php)\n\nlowlight.registerAlias({\n javascript: ['js', 'jsx'],\n typescript: ['ts', 'tsx'],\n})","type":"blockquote","key":"48u6f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее самый большой компонент по размеру и самый тяжёлый по реализации - тулбар, который мы уже импортировали в Edtior.tsx:","type":"unstyled","key":"7g6hn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { MenuBar } from '../MenuBar/MenuBar'","type":"blockquote","key":"b4dc9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Панель инструментов","type":"header-two","key":"ekmgf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создаём в папке components папку MenuBar и туда добавляем компонент MenuBar.tsx, снова выведу полностью, чтобы разобрать по шагам:","type":"unstyled","key":"2l8lu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import {Editor, useEditorState} from '@tiptap/react'\n\nimport styles from './MenuBar.module.css'\nimport {MenuButton} from \"../MenuButton/MenuButton\";\nimport {ColorPopover} from \"../ColorPopover/ColorPopover\";\nimport {LegendSelect} from \"../LegendSelect/LegendSelect\";\nimport { useState} from \"react\";\n\nimport {\n AlignCenterIcon, AlignJustifyIcon,\n AlignLeftIcon, AlignRightIcon,\n BoldIcon,\n ColorIcon,\n HighlightIcon, ImageIcon,\n ItalicIcon, LinkIcon,\n SendIcon,\n StrikeIcon,\n TrashIcon,\n UnderlineIcon\n} from \"../../assets\";\n\n\ninterface IMenuBar {\n // Экземпляр редактора TipTap\n editor: Editor\n}\n\n// Возможные типы текстовых блоков\n// для первого выпадающего списка.\nconst selectElements = [\n {\n id: 'paragraph',\n label: 'Параграф',\n },\n {\n id: 'h1',\n label: 'Заголовок 1',\n },\n {\n id: 'h2',\n label: 'Заголовок 2',\n },\n {\n id: 'h3',\n label: 'Заголовок 3',\n },\n]\n\n// Типы поддерживаемых списков.\nconst selectList = [\n {\n id: 'bulletList',\n label: 'Bullet',\n },\n {\n id: 'orderedList',\n label: 'Ordered',\n },\n {\n id: 'taskList',\n label: 'Task',\n },\n]\n\n// Языки, доступные для CodeBlock.\nconst selectLanguages = [\n { id: 'plaintext', label: 'Plain text' },\n\n { id: 'html', label: 'HTML' },\n { id: 'css', label: 'CSS' },\n { id: 'js', label: 'JavaScript' },\n { id: 'jsx', label: 'React JSX' },\n { id: 'ts', label: 'TypeScript' },\n { id: 'tsx', label: 'React TSX' },\n\n { id: 'java', label: 'Java' },\n { id: 'kotlin', label: 'Kotlin' },\n\n { id: 'sql', label: 'SQL' },\n\n { id: 'json', label: 'JSON' },\n { id: 'yaml', label: 'YAML' },\n\n { id: 'bash', label: 'Bash / Shell' },\n\n { id: 'dockerfile', label: 'Dockerfile' },\n { id: 'nginx', label: 'Nginx' },\n\n { id: 'diff', label: 'Diff' },\n\n { id: 'markdown', label: 'Markdown' },\n\n { id: 'php', label: 'PHP' },\n]\n\nexport function MenuBar({editor}: IMenuBar) {\n\n // Какое всплывающее окно сейчас открыто.\n const [openedPanel, setOpenedPanel] =\n useState<'image' | 'link' | 'color' | 'highlight' | null>(null)\n\n // Поля формы добавления изображения.\n const [imageSettings, setImageSettings] = useState(\n {\n imageLink: \"\",\n alt: \"\",\n }\n )\n\n // Поле формы изменения ссылки.\n const [linkSettings, setLinkSettings] = useState(\n {\n href: \"\",\n }\n )\n\n // Подписываемся только на необходимые изменения редактора,\n // чтобы компонент не перерисовывался без необходимости.\n const editorState = useEditorState({\n editor,\n selector: ctx => {\n return {\n // Текстовые стили\n isBold: ctx.editor.isActive('bold') ?? false,\n isItalic: ctx.editor.isActive('italic') ?? false,\n isStrike: ctx.editor.isActive('strike') ?? false,\n isHighlight: ctx.editor.isActive('highlight') ?? false,\n isUnderline: ctx.editor.isActive('underline') ?? false,\n\n // Выравнивание текста\n isAlignLeft: ctx.editor.isActive({textAlign: 'left'}) ?? false,\n isAlignCenter: ctx.editor.isActive({textAlign: 'center'}) ?? false,\n isAlignRight: ctx.editor.isActive({textAlign: 'right'}) ?? false,\n isAlignJustify: ctx.editor.isActive({textAlign: 'justify'}) ?? false,\n\n // Тип текущего блока\n isParagraph: ctx.editor.isActive('paragraph') ?? false,\n isHeading1: ctx.editor.isActive('heading', {level: 1}) ?? false,\n isHeading2: ctx.editor.isActive('heading', {level: 2}) ?? false,\n isHeading3: ctx.editor.isActive('heading', {level: 3}) ?? false,\n\n // Тип текущего списка\n isBullet: ctx.editor.isActive('bulletList') ?? false,\n isOrdered: ctx.editor.isActive('orderedList') ?? false,\n isTask: ctx.editor.isActive('taskList') ?? false,\n\n // Текущий язык CodeBlock\n currentLanguage: ctx.editor.getAttributes('codeBlock').language ?? 'plaintext',\n\n // Цвет текста\n color: ctx.editor.getAttributes('textStyle').color,\n\n // Цвет подсветки\n highlight: ctx.editor.getAttributes('highlight').highlight,\n }\n },\n })\n\n // Добавление изображения по ссылке.\n const addImage = () => {\n if (imageSettings.imageLink) {\n editor.chain().focus().setImage(\n {\n src: imageSettings.imageLink,\n alt: imageSettings.alt,\n title: imageSettings.alt,\n\n }\n\n ).run()\n\n // Очищаем форму.\n setImageSettings({imageLink: \"\", alt: \"\"})\n\n // Закрываем всплывающее окно.\n setOpenedPanel(null)\n }\n }\n\n // Открытие/закрытие панели управления ссылкой.\n const onClickChangeLink = () => {\n\n // Если ссылка уже существует — сразу подставляем её.\n const previousUrl: string = editor.getAttributes('link').href\n\n setLinkSettings({href: previousUrl})\n\n if(openedPanel === 'link') {\n setOpenedPanel(null)\n } else {\n setOpenedPanel('link')\n }\n }\n\n // Переключение панели изображения.\n const onClickChangeImage = () => {\n if(openedPanel === 'image') {\n setOpenedPanel(null)\n } else {\n setOpenedPanel('image')\n }\n }\n\n // Переключение панели выбора цвета текста.\n const onClickChangeColor = () => {\n if(openedPanel === 'color') {\n setOpenedPanel(null)\n } else {\n setOpenedPanel('color')\n }\n }\n\n // Переключение панели выбора цвета подсветки.\n const onClickChangeHighlight = () => {\n if(openedPanel === 'highlight') {\n setOpenedPanel(null)\n } else {\n setOpenedPanel('highlight')\n }\n }\n\n\n // Создание или обновление ссылки.\n const setLink = () => {\n\n // Если пользователь отменил действие.\n if (linkSettings.href === null) {\n return\n }\n\n // Если поле пустое — удаляем ссылку.\n if (linkSettings.href === '') {\n editor.chain().focus().extendMarkRange('link').unsetLink().run()\n\n return\n }\n\n // Устанавливаем новую ссылку.\n try {\n editor.chain().focus().extendMarkRange('link').setLink({ href: linkSettings.href }).run()\n } catch (e) {\n console.error(e)\n } finally {\n // Очищаем форму и закрываем панель.\n setLinkSettings({href: ''})\n setOpenedPanel(null)\n }\n }\n\n // Удаление ссылки у текущего выделения.\n const unsetLink = () => {\n\n // Если действие было отменено.\n if (linkSettings.href === null) {\n return\n }\n\n // Если поле пустое — просто снимаем ссылку.\n if (linkSettings.href === '') {\n editor.chain().focus().extendMarkRange('link').unsetLink().run()\n\n return\n }\n\n try {\n editor.chain().focus().extendMarkRange('link').unsetLink().run()\n } catch (e) {\n console.error(e)\n } finally {\n // Очищаем форму и закрываем панель.\n setLinkSettings({href: ''})\n setOpenedPanel(null)\n }\n }\n\n\n // Изменение типа текущего текстового блока.\n const handleBlockChange = (id: string) => {\n\n switch (id) {\n\n case 'h1':\n editor.chain().focus().toggleHeading({level: 1}).run()\n break\n\n case 'h2':\n editor.chain().focus().toggleHeading({level: 2}).run()\n break\n\n case 'h3':\n editor.chain().focus().toggleHeading({level: 3}).run()\n break\n\n // по умолчанию выбран paragraph.\n default:\n editor.chain().focus().setParagraph().run()\n\n }\n\n }\n\n // Изменение типа списка.\n const handleListChange = (id: string) => {\n\n switch (id) {\n\n case 'orderedList':\n editor.chain().focus().toggleOrderedList().run()\n break\n\n case 'taskList':\n editor.chain().focus().toggleTaskList().run()\n break\n\n // По умолчанию используется маркированный список.\n default:\n editor.chain().focus().toggleBulletList().run()\n\n }\n\n }\n\n\n // Преобразование выделенного текста в CodeBlock\n // с выбранным языком подсветки.\n const handleLanguageChange = (language: string) => {\n\n // Получаем границы выделения.\n const { from, to } = editor.state.selection\n\n // Получаем выделенный текст.\n const text = editor.state.doc.textBetween(from, to, '\\n')\n\n // Заменяем выделение блоком кода.\n editor\n .chain()\n .focus()\n .insertContentAt(\n { from, to },\n {\n type: 'codeBlock',\n attrs: {\n language,\n },\n content: [\n {\n type: 'text',\n text,\n },\n ],\n },\n )\n .run()\n }\n\n\n // Используется для определения текущего Heading.\n const blockTypes = [\n {id: 'h1', active: editorState.isHeading1},\n {id: 'h2', active: editorState.isHeading2},\n {id: 'h3', active: editorState.isHeading3},\n ]\n\n // Используется для определения активного списка.\n const listTypes = [\n {id: 'bulletList', active: editorState.isBullet},\n {id: 'orderedList', active: editorState.isOrdered},\n {id: 'taskList', active: editorState.isTask},\n ]\n\n\n // Текущий выбранный тип блока.\n // Если ничего не активно — Paragraph.\n const currentType =\n blockTypes.find(item => item.active)?.id ?? 'paragraph'\n\n // Текущий выбранный тип списка.\n // По умолчанию Bullet List.\n const currentList =\n listTypes.find(item => item.active)?.id ?? 'bulletList'\n\n\n return (\n\n

\n editor.chain().focus().toggleBold().run()}\n active={editorState.isBold}\n >\n \n \n
\n editor.chain().focus().toggleItalic().run()}\n active={editorState.isItalic}\n >\n \n \n
\n editor.chain().focus().toggleUnderline().run()}\n active={editorState.isUnderline}\n >\n \n \n
\n editor.chain().focus().toggleStrike().run()}\n active={editorState.isStrike}\n >\n \n\n \n
\n
\n
\n \n \n \n\n {/* Палитра отображается только если открыта панель выбора цвета */}\n {openedPanel === 'color' &&\n
\n editor.commands.unsetColor()}\n onChange={(color) => {\n editor\n .chain()\n .setColor(color)\n .run()\n }}\n />\n
\n }\n\n\n
\n \n \n \n\n {/* Палитра отображается только если открыта панель подсветки цвета */}\n {openedPanel === 'highlight' &&\n
\n editor.commands.unsetHighlight()}\n onChange={(color) => {\n editor\n .chain()\n .setHighlight({color})\n .run()\n }}\n />\n
\n }\n\n\n
\n
\n
\n \n
\n \n
\n
\n
\n editor.chain().focus().setTextAlign('left').run()}\n active={editorState.isAlignLeft}\n >\n \n\n \n
\n editor.chain().focus().setTextAlign('center').run()}\n active={editorState.isAlignCenter}\n >\n \n\n \n
\n editor.chain().focus().setTextAlign('right').run()}\n active={editorState.isAlignRight}\n >\n \n\n \n
\n editor.chain().focus().setTextAlign('justify').run()}\n active={editorState.isAlignJustify}\n >\n\n \n\n \n
\n
\n
\n \n\n \n \n \n {/* Панель настройки ссылки */}\n {openedPanel === 'link' &&\n
\n
\n setLinkSettings({...linkSettings, href: e.currentTarget.value})} placeholder={\"Ссылка\"}\n className={styles.inputSet} type=\"text\"/>\n\n
\n \n \n\n
\n }\n
\n \n
\n
\n
\n \n\n \n \n \n {/* Панель добавления изображения */}\n {openedPanel === 'image' &&\n
\n
\n {/* URL изображения */}\n setImageSettings({...imageSettings, imageLink: e.currentTarget.value})} placeholder={\"Ссылка\"}\n className={styles.inputSet} type=\"text\"/>\n {/* alt текст изображения */}\n setImageSettings({...imageSettings, alt: e.currentTarget.value})} placeholder={\"Описание\"}\n className={styles.inputSet} type=\"text\"/>\n
\n \n
\n }\n

\n\n

\n\n )\n\n}","type":"blockquote","key":"2oc7k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Во-первых мы видим, для чего нам нужны были реэкспорты, да кол-во строк возможно не поменялось, но стало однозначно лучше, так как теперь мы импортируем из одного места, а не из 15 файлов:","type":"unstyled","key":"6a9vc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import {\n AlignCenterIcon, AlignJustifyIcon,\n AlignLeftIcon, AlignRightIcon,\n BoldIcon,\n ColorIcon,\n HighlightIcon, ImageIcon,\n ItalicIcon, LinkIcon,\n SendIcon,\n StrikeIcon,\n TrashIcon,\n UnderlineIcon\n} from \"../../assets\";","type":"blockquote","key":"frs0m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее то, что мы будем передавать в LegendSelect, это было сделано чтобы текст в option вы могли делать сами, а id ставили тот, который нужен Tiptap, сами id нужны как для codeblock'а например, так и для того, чтобы у нас они не хранились на русском языке и компонент LegendSelect был максимально переиспользуемый.","type":"unstyled","key":"6ap69"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Возможные типы текстовых блоков\nconst selectElements = [\n {\n id: 'paragraph',\n label: 'Параграф',\n },\n {\n id: 'h1',\n label: 'Заголовок 1',\n },\n {\n id: 'h2',\n label: 'Заголовок 2',\n },\n {\n id: 'h3',\n label: 'Заголовок 3',\n },\n]\n\n// Типы поддерживаемых списков.\nconst selectList = [\n {\n id: 'bulletList',\n label: 'Bullet',\n },\n {\n id: 'orderedList',\n label: 'Ordered',\n },\n {\n id: 'taskList',\n label: 'Task',\n },\n]\n\n// Языки, доступные для CodeBlock.\nconst selectLanguages = [\n { id: 'plaintext', label: 'Plain text' },\n\n { id: 'html', label: 'HTML' },\n { id: 'css', label: 'CSS' },\n { id: 'js', label: 'JavaScript' },\n { id: 'jsx', label: 'React JSX' },\n { id: 'ts', label: 'TypeScript' },\n { id: 'tsx', label: 'React TSX' },\n\n { id: 'java', label: 'Java' },\n { id: 'kotlin', label: 'Kotlin' },\n\n { id: 'sql', label: 'SQL' },\n\n { id: 'json', label: 'JSON' },\n { id: 'yaml', label: 'YAML' },\n\n { id: 'bash', label: 'Bash / Shell' },\n\n { id: 'dockerfile', label: 'Dockerfile' },\n { id: 'nginx', label: 'Nginx' },\n\n { id: 'diff', label: 'Diff' },\n\n { id: 'markdown', label: 'Markdown' },\n\n { id: 'php', label: 'PHP' },\n]","type":"blockquote","key":"7tjm1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хотелось, чтобы можно было открыть только одно всплывающее окно, поэтому я их засунул в один state:","type":"unstyled","key":"3655k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const [openedPanel, setOpenedPanel] =\n useState<'image' | 'link' | 'color' | 'highlight' | null>(null);","type":"blockquote","key":"a0m43"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"editorState нам нужен, чтобы видеть изменения в самом редакторе (к примеру на что навёл пользователь, какой сейчас стиль активен на элементе, который находится в фокусе). useEditorState оптимизирует компонент, чтобы он не делал лишних ререндеров:","type":"unstyled","key":"38gsi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Подписываемся только на необходимые изменения редактора,\n // чтобы компонент не перерисовывался без необходимости. \n const editorState = useEditorState({\n editor,\n selector: ctx => {\n return {\n // Текстовые стили\n isBold: ctx.editor.isActive('bold') ?? false,\n isItalic: ctx.editor.isActive('italic') ?? false,\n isStrike: ctx.editor.isActive('strike') ?? false,\n isHighlight: ctx.editor.isActive('highlight') ?? false,\n isUnderline: ctx.editor.isActive('underline') ?? false,\n\n // Выравнивание текста\n isAlignLeft: ctx.editor.isActive({textAlign: 'left'}) ?? false,\n isAlignCenter: ctx.editor.isActive({textAlign: 'center'}) ?? false,\n isAlignRight: ctx.editor.isActive({textAlign: 'right'}) ?? false,\n isAlignJustify: ctx.editor.isActive({textAlign: 'justify'}) ?? false,\n\n // Тип текущего блока\n isParagraph: ctx.editor.isActive('paragraph') ?? false,\n isHeading1: ctx.editor.isActive('heading', {level: 1}) ?? false,\n isHeading2: ctx.editor.isActive('heading', {level: 2}) ?? false,\n isHeading3: ctx.editor.isActive('heading', {level: 3}) ?? false,\n\n // Тип текущего списка\n isBullet: ctx.editor.isActive('bulletList') ?? false,\n isOrdered: ctx.editor.isActive('orderedList') ?? false,\n isTask: ctx.editor.isActive('taskList') ?? false,\n\n // Текущий язык CodeBlock\n currentLanguage: ctx.editor.getAttributes('codeBlock').language ?? 'plaintext',\n\n // Цвет текста\n color: ctx.editor.getAttributes('textStyle').color,\n \n // Цвет подсветки\n highlight: ctx.editor.getAttributes('highlight').highlight,\n }\n },\n })","type":"blockquote","key":"ds1jb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":12,"style":"BOLD"},{"length":13,"offset":112,"style":"BOLD"}],"text":"Ещё функция addImage, которая используется для добавления изображения по клику, и функции для всплывающего окна onClickChange..., где мы по сути просто меняем значение openedPanel, кроме ссылки, так как там хотелось ещё показывать ссылку, если она существует.","type":"unstyled","key":"d1469"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":12,"offset":104}],"inlineStyleRanges":[{"length":8,"offset":14,"style":"BOLD"},{"length":9,"offset":24,"style":"BOLD"}],"text":"Также функции setLink и unsetLink, которые нужны для вставки/сброса ссылки, логика так же была взята из документации, вы можете добавлять всё так же, а может даже улучшать с помощью ИИ или своих идей, многое на самом деле бралось из обычных примеров в документации TipTap и вам не мешает делать также. Тут, взято из обычного их примера использования:","type":"unstyled","key":"f9qbp"},{"data":{"image":{"id":"6a64da5ca52c4438aa2b0fd6"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример как брать из документации нужный код","type":"atomic:image","key":"q9ro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":8,"style":"BOLD"}],"text":"Функции handle...Change нужны для LegendSelect, чтобы вызывалась правильная функция при нажатии на option:","type":"unstyled","key":"fesl5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const handleBlockChange = (id: string) => {\n\n switch (id) {\n\n case 'h1':\n editor.chain().focus().toggleHeading({level: 1}).run()\n break\n\n case 'h2':\n editor.chain().focus().toggleHeading({level: 2}).run()\n break\n\n case 'h3':\n editor.chain().focus().toggleHeading({level: 3}).run()\n break\n\n default:\n editor.chain().focus().setParagraph().run()\n\n }\n\n }","type":"blockquote","key":"bhnun"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ну и ещё нужно было отслеживать текущий активный элемент, на который навёлся пользователь:","type":"unstyled","key":"6u2mg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const blockTypes = [\n {id: 'h1', active: editorState.isHeading1},\n {id: 'h2', active: editorState.isHeading2},\n {id: 'h3', active: editorState.isHeading3},\n ]\n\n const listTypes = [\n {id: 'bulletList', active: editorState.isBullet},\n {id: 'orderedList', active: editorState.isOrdered},\n {id: 'taskList', active: editorState.isTask},\n ]\n\n\n\n const currentType =\n blockTypes.find(item => item.active)?.id ?? 'paragraph'\n\n const currentList =\n listTypes.find(item => item.active)?.id ?? 'bulletList'","type":"blockquote","key":"e8q87"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не забудем про стили для компонента и создадим MenuBar.module.css:","type":"unstyled","key":"apbj8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".toolbar {\n display: flex;\n gap: 6px;\n\n padding: 10px;\n\n border: 1px solid #2d333b;\n border-radius: 10px;\n\n background: #161b22;\n\n flex-wrap: wrap;\n}\n\n.toolbarList {\n list-style: none;\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.toolbarItem {\n position: relative;\n}\n\n.toolbarItem:not(:last-child) {\n margin-right: 10px;\n}\n\n.separator {\n width: 2px;\n background: #30363d;\n height: 25px;\n}\n\n.inputSetWrapper {\n position: absolute;\n top: calc(100% + 5px);\n left: 0;\n\n border: 1px solid #30363d;\n border-radius: 10px;\n\n background: #161b22;\n\n display: flex;\n align-items: center;\n\n width: 200px;\n\n z-index: 100;\n\n box-shadow: 0 12px 32px rgba(0, 0, 0, .45);\n}\n\n.inputSetWrapperColor {\n flex-direction: column;\n width: auto;\n padding: 10px;\n}\n\n.inputSetItems {\n display: flex;\n align-items: flex-start;\n}\n\n.inputSet {\n font-weight: 400;\n font-size: 14px;\n line-height: 158%;\n letter-spacing: 0.01em;\n\n color: #e6edf3;\n\n padding: 6px 10px;\n\n border: none;\n outline: none;\n background: transparent;\n\n width: 100%;\n\n border-right: 1px solid #30363d;\n}\n\n.inputSetLegendSelect {\n margin-right: 10px;\n}\n\n.inputSetColor {\n margin-top: 10px;\n}\n\n.rgbaRow {\n margin-top: 10px;\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n column-gap: 10px;\n}\n\n.inputSetColorRgba {\n grid-column: span 3;\n}\n\n.inputSet:not(:last-child) {\n border-bottom: 1px solid #30363d;\n}\n\n.inputSet::placeholder {\n color: #8b949e;\n}\n\n.inputSetButton {\n cursor: pointer;\n\n background: transparent;\n\n border: none;\n outline: none;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n padding: 8px;\n\n transition: background .2s ease;\n}\n\n.inputSetButton:hover {\n background: #21262d;\n}\n\n.inputSetButton:not(:last-child) {\n border-right: 1px solid #30363d;\n}\n\n.toolbarBtn {\n width: 36px;\n height: 36px;\n}","type":"blockquote","key":"3e6hk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стили я не буду разбирать, иначе это был бы слишком базовый курс) Вы можете стилизовать всё под себя.","type":"unstyled","key":"969g4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так как компонент MenuBar большой, пришлось немного его декомпозировать (хотя не очень то и получилось, вы можете его ещё больше декомпозировать) и я добавил 3 компонента, которые довольно часто повторялись:","type":"unstyled","key":"9rgnu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import {MenuButton} from \"../MenuButton/MenuButton\";\nimport {ColorPopover} from \"../ColorPopover/ColorPopover\";\nimport {LegendSelect} from \"../LegendSelect/LegendSelect\";","type":"blockquote","key":"4q3fn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Общая кнопка","type":"header-two","key":"2gji6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начнём с MenuButton, нам нужно создать в папке components новую папку MenuButton и туда добавить MenuButton.tsx, он довольно простой:","type":"unstyled","key":"f3aj3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import styles from './MenuButton.module.css'\n\ninterface IMenuButton {\n active?: boolean\n className?: string\n onClick?: () => void;\n children: React.ReactNode\n}\n\nexport function MenuButton({className, onClick, children, active}:IMenuButton){\n return(\n\n \n {children}\n \n )\n\n}","type":"blockquote","key":"8j8df"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я выделил 4 нужных для меня вещей:","type":"unstyled","key":"5tkpg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"active - если элемент активен, то ставится стиль активной кнопки","type":"unordered-list-item","key":"f1a83"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"className - добавление собственных стилей","type":"unordered-list-item","key":"dkeee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"onClick - добавление интерактивности при нажатии на кнопку","type":"unordered-list-item","key":"ffhng"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"children - элементы и текст которые будут внутри кнопки","type":"unordered-list-item","key":"borbj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ну также добавим стили MenuButton.module.css:","type":"unstyled","key":"fqng4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".menuButton {\n background: transparent;\n\n cursor: pointer;\n\n border: 1px solid #30363d;\n border-radius: 8px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n transition: background .2s ease, border-color .2s ease;\n color: #fff;\n padding: 6px;\n}\n\n.menuButton:hover {\n background: #21262d;\n border-color: #3d444d;\n}\n\n.active {\n background: #2b313a;\n border-color: #4f8cff;\n}","type":"blockquote","key":"arl6s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всплывающее окно со цветом","type":"header-two","key":"1ho0u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее идём к ColorPopover, аналогично создаём ColorPopover.tsx:","type":"unstyled","key":"e6617"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import {useState} from 'react'\nimport {HexColorPicker} from 'react-colorful'\nimport {colord} from 'colord'\nimport styles from './ColorPopover.module.css'\nimport {LegendSelect} from '../LegendSelect/LegendSelect'\nimport {RoundedInput} from '../RoundedInput/RoundedInput'\nimport {MenuButton} from \"../MenuButton/MenuButton\";\n\n\n// Тип объекта RGBA\ntype RGBA = {\n r: number\n g: number\n b: number\n a: number\n}\n\n// Type Guard.\n// Позволяет TypeScript понять, что переданный объект действительно имеет структуру RGBA.\nconst isRGBA = (color: unknown): color is RGBA => {\n return color !== null && typeof color === 'object' && 'r' in color;\n}\n\n// Список форматов отображения цвета\nconst selectColorFormats = [\n {id: 'hex', label: 'HEX'},\n {id: 'rgba', label: 'RGBA'},\n]\n\n// Пропсы компонента\ninterface IColorPopover {\n // Текущее значение цвета\n value: string\n // Вызывается при изменении цвета\n onChange: (color: string) => void\n // Необязательная функция сброса цвета\n unset?: () => void\n}\n\nexport function ColorPopover({\n value,\n onChange,\n unset\n }: IColorPopover) {\n\n // Текущий режим отображения (HEX или RGBA)\n const [mode, setMode] = useState<'hex' | 'rgba'>('hex')\n\n // Храним одновременно HEX и RGBA,\n // чтобы быстро переключаться между режимами без пересчётов.\n const [colorSettings, setColorSettings] = useState({\n hex: colord(value).toHex(),\n rgba: colord(value).toRgb(),\n })\n\n // Универсальная функция обновления цвета.\n // Может принимать как HEX-строку, так и объект RGBA.\n const updateAll = (color: string | RGBA) => {\n // Если получили строку (HEX)\n if(typeof color === 'string') {\n setColorSettings({\n hex: color,\n rgba: colord(color).toRgb()\n })\n // Если получили RGBA\n } else if ( isRGBA(color)) {\n setColorSettings({\n hex: colord(color).toHex(),\n rgba: color\n })\n }\n // Если цвет валиден — меняем цвет\n if(colord(color).isValid()) {\n onChange(colord(color).toRgbString())\n }\n }\n\n // Обновление одного из RGBA компонентов\n const updateRGBA = (\n key: keyof RGBA,\n value: string,\n ) => {\n // Удаляем всё кроме цифр и точки\n const cleanValue = value.replace(/[^0-9.]/g, '');\n\n // Позволяем пользователю вводить \"0.\" или \"1.\"\n // не ломая ввод.\n if (cleanValue.endsWith('.') || cleanValue.endsWith('.0')) {\n updateAll({\n ...colorSettings.rgba,\n [key]: cleanValue,\n })\n return;\n }\n let number = Number(cleanValue);\n\n if (Number.isNaN(number)) {\n number = 0;\n }\n\n // Ограничиваем диапазон\n if (key === 'a') {\n // Alpha всегда от 0 до 1\n number = Math.max(0, Math.min(1, number));\n } else {\n // RGB всегда от 0 до 255\n number = Math.round(Math.max(0, Math.min(255, number))); // Округляем RGB до целых\n }\n\n // Создаём новый объект цвета\n const next = {\n ...colorSettings.rgba,\n [key]: number,\n }\n\n // Обновляем оба формата\n updateAll(next)\n }\n\n\n return (\n <>\n

\n {/* Выбор формата отображения цвета */}\n setMode(v as 'hex' | 'rgba')}\n className={styles.inputSetLegendSelect}\n />\n {/* Кнопка сброса цвета отображается,\n только если передана функция unset */}\n {unset &&\n \n сбросить\n \n }\n

\n\n {/* Палитра выбора цвета */}\n {\n updateAll(nextHex)\n }}\n />\n

\n\n {/* Поле ввода HEX */}\n {mode === 'hex' && (\n \n )}\n\n {/* Поля ввода RGBA */}\n {mode === 'rgba' && (\n

\n\n updateRGBA('r', v)}\n />\n\n updateRGBA('g', v)}\n />\n\n updateRGBA('b', v)}\n />\n\n updateRGBA('a', v)}\n />\n\n

\n )}\n \n )\n}","type":"blockquote","key":"co1b6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":66,"style":"ITALIC"},{"length":1,"offset":81,"style":"ITALIC"}],"text":"Этот компонент я решил сделать чуть универсальным, поэтому сделал unset в пропсах выборочным. Само изменение цвета я сделал не самым оптимизированным, так как я высчитываю сразу и rgba, и hex при изменении цвета, но надеюсь за это не будете сильно судить), была идея с попыткой высчитывать при нажатии option, но она провалилась, возможно вы сможете это сделать.","type":"unstyled","key":"73sde"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":124,"style":"BOLD"}],"text":"Для rgba я также добавил ограничения ввода, чтобы она корректно работала, ну и через typeGuard определял сам rgba в функции updateAll.","type":"unstyled","key":"2lh4r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стили ColorPopover.module.css:","type":"unstyled","key":"cs0qv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".inputSetWrapper {\n position: absolute;\n top: calc(100% + 5px);\n left: 0;\n border: 2px solid rgba(255, 255, 255, 0.15);\n border-radius: 10px;\n background: #606b8f;\n display: flex;\n align-items: center;\n width: 200px;\n z-index: 100;\n}\n\n.inputSetWrapperColor {\n flex-direction: column;\n width: auto;\n padding: 5px;\n}\n\n.inputSetItems {\n display: flex;\n align-items: flex-start;\n}\n\n\n\n.inputSet {\n font-weight: 400;\n font-size: 14px;\n line-height: 158%;\n letter-spacing: 0.01em;\n color: var(--white);\n padding: 4px 8px;\n border: none;\n outline: none;\n background: none;\n width: 100%;\n\n border-right: 1px solid rgba(var(--foregroundGlassRGBA),0.08);\n}\n\n\n.inputSetLegendSelect {\n margin-right: 10px;\n}\n.inputSetColor {\n margin-top: 10px;\n}\n\n.rgbaRow {\n margin-top: 10px;\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n column-gap: 10px;\n}\n.inputSetColorRgba {\n grid-column: 3 span;\n}\n\n\n.inputGroup {\n margin-right: 10px;\n}\n\n.colorUnset {\n margin-top: 10px;\n width: 100%;\n}","type":"blockquote","key":"dqdsv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переиспользуемый инпут","type":"header-two","key":"25mrs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внутри используются RoundedInput - тоже переиспользуемый компонент, создадим RoundedInput.tsx:","type":"unstyled","key":"vla4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import styles from './RoundedInput.module.css'\n\ninterface IRoundedInput {\n className?: string;\n type?: string\n placeholder?: string\n value: string\n setValue: (v: string) => void\n onBlur?: () => void;\n id?: string;\n name?: string\n}\n\nexport const RoundedInput = ({ className, type, placeholder, value, setValue, name, id, onBlur }: IRoundedInput) => {\n return (\n <>\n setValue(e.currentTarget.value)}\n type={type ? type : 'text'}\n id={id}\n name={name}\n />\n \n );\n}","type":"blockquote","key":"fumev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь я добавил свой шаблон для input'а, хотите можете убрать некоторые пропсы, хотите можете добавить, в целом ничего нового.","type":"unstyled","key":"6ff9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стили RoundedInput.module.css:","type":"unstyled","key":"66m0n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".roundedInput {\n width: 100%;\n\n letter-spacing: 0.01em;\n\n color: #e6edf3;\n\n outline: none;\n\n background: #0d1117;\n\n position: relative;\n\n padding: 8px 12px;\n\n border: 1px solid #30363d;\n border-radius: 10px;\n\n font-weight: 600;\n font-size: 16px;\n line-height: 158%;\n\n transition: border-color .2s ease, box-shadow .2s ease;\n}\n\n.roundedInput:hover {\n border-color: #3d444d;\n}\n\n.roundedInput:focus {\n border-color: #4f8cff;\n box-shadow: 0 0 0 3px rgba(79, 140, 255, .18);\n}\n\n.roundedInput::placeholder {\n color: #8b949e;\n}","type":"blockquote","key":"d41p8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Инпут с легендой","type":"header-two","key":"ddgb9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ну и тот самый LegendSelect.tsx:","type":"unstyled","key":"4eddb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import styles from './LegendSelect.module.css'\nimport {useState} from \"react\";\nimport {DropDownIcon} from \"../../assets\";\n\n\n// Элемент выпадающего списка\nexport interface SelectItem {\n id: string // внутреннее значение\n label: string // отображаемый текст\n}\n\n// Пропсы компонента\ninterface ILegendSelect {\n className?: string // дополнительные стили\n value: string // выбранное значение\n content: SelectItem[] // список доступных вариантов\n onChange: (id: string) => void; // вызывается при выборе элемента\n legend: string; // подпись над полем\n}\n\n\n\n\nexport const LegendSelect = ({ value, content, onChange, className, legend}: ILegendSelect) => {\n // Состояние открытия выпадающего списка\n const [openDropdown, setOpenDropdown] = useState(false)\n\n // Получаем текст выбранного элемента по его id.\n // Если элемент не найден — выводим пустую строку.\n const selected =\n content.find(item => item.id === value)?.label ?? ''\n\n return (\n

\n \n {/* Заголовок поля */}\n \n {legend}\n \n\n {/* Область отображения выбранного значения */}\n setOpenDropdown(v => !v)}\n >\n {selected}\n\n {/* Иконка раскрытия списка */}\n \n \n\n {/* Выпадающий список отображается только когда открыт */}\n {openDropdown && (\n

{\n // Сообщаем родителю о новом выборе\n onChange(item.id)\n // Закрываем выпадающий список\n setOpenDropdown(false)\n }}\n >\n {item.label}\n \n ))}\n

\n )}\n\n

\n );\n}","type":"blockquote","key":"1euok"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тут я решил сделать SelectItem, который бы хранил как значение id, которое передавалось бы потом для логики, так и обычный текст, который отображался бы пользователю label.","type":"unstyled","key":"3ghgf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чуть пришлось запариться со стилями в LegendSelect.module.css, но как будто оно того стоило:","type":"unstyled","key":"5k1eh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".legendSelectFieldSet {\n padding: 0 12px 6px 12px;\n border: 2px solid #2d333b;\n border-radius: 6px;\n position: relative;\n background: #0d1117;\n}\n\n.legendSelectLegend {\n padding: 0 4px;\n font-weight: 500;\n font-size: 10px;\n line-height: 16px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: #8b949e;\n width: max-content;\n}\n\n.legendSelectSelected {\n margin: 0;\n border: none;\n font-weight: 500;\n font-size: 16px;\n line-height: 143%;\n letter-spacing: 0.018em;\n color: #e6edf3;\n text-transform: none;\n outline: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n background: transparent;\n}\n\n.legendSelectDropdown {\n margin-left: 5px;\n}\n\n.legendSelectOptions {\n position: absolute;\n top: 40px;\n left: 0;\n z-index: 100;\n border-radius: 8px;\n margin: 0;\n padding: 0;\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);\n}\n\n.legendSelectOption {\n border: 1px solid #2d333b;\n background: #161b22;\n padding: 8px 10px;\n width: 100%;\n display: block;\n margin: 0;\n font-weight: 500;\n font-size: 16px;\n line-height: 143%;\n letter-spacing: 0.018em;\n color: #e6edf3;\n transition: background-color .2s ease;\n cursor: pointer;\n}\n\n.legendSelectOption:first-child {\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n}\n\n.legendSelectOption:last-child {\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\n}\n\n.legendSelectOption:hover {\n background-color: #21262d;\n}","type":"blockquote","key":"bpjpo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Финал","type":"header-two","key":"1sihu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С самим редактором покончили, осталось всё это вывести. Поменяем App.tsx, чтобы у нас выводилось всё в div c классом article-content:","type":"unstyled","key":"ed96h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { useState } from \"react\"\nimport Editor from \"./components/Editor/Editor\"\nimport type {JSONContent} from \"@tiptap/core\";\nimport { renderArticle } from \"./utils/renderArticle\";\nimport \"./assets/styles/article-content.css\";\n\nfunction App() {\n const [value, setValue] = useState({\n \"type\": \"doc\",\n content: []\n })\n\n\n const onUpdateData = async (val: JSONContent) => {\n setValue(val)\n }\n\n return (\n

\n \n

\n )\n}\n\nexport default App","type":"blockquote","key":"5fe7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тут нам нужны новые стили article-content.css (Близкие к tiptap.css, просто убрали лишние стили по типу resize'а или отключения клика для ссылки). В папке styles создаём этот файл:","type":"unstyled","key":"3dlap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Basic editor styles */\n.article-content {\n margin-top: 10px;\n border: 1px solid #2d333b;\n padding: 8px;\n color: #F5F7FA;\n border-radius: 8px;\n\n :first-child {\n margin-top: 0;\n }\n\n /* List styles */\n ul,\n ol {\n padding: 0 1rem;\n margin: 1.25rem 1rem 1.25rem 0.4rem;\n\n li p {\n margin-top: 0.25em;\n margin-bottom: 0.25em;\n }\n }\n\n /* Heading styles */\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n line-height: 1.1;\n margin-top: 1rem;\n text-wrap: pretty;\n color: #FFFFFF;\n font-weight: 700;\n }\n\n h1,\n h2 {\n margin-top: 1.5rem;\n margin-bottom: 1.5rem;\n }\n\n h1 {\n font-size: 1.4rem;\n }\n\n h2 {\n font-size: 1.2rem;\n }\n\n h3 {\n font-size: 1.1rem;\n }\n\n h4,\n h5,\n h6 {\n font-size: 1rem;\n }\n\n /* Inline code */\n\n code {\n background: #4F46E5;\n color: #FFFFFF;\n border-radius: 6px;\n font-size: 0.85rem;\n padding: 0.22em 0.4em;\n font-weight: 500;\n }\n\n /* Code block */\n\n pre {\n background: #0D1117;\n border: 1px solid #30363D;\n border-radius: 10px;\n color: #F5F7FA;\n font-family: \"JetBrains Mono\", monospace;\n margin: 1.5rem 0;\n padding: 1rem;\n overflow-x: auto;\n\n code {\n background: none;\n color: inherit;\n font-size: 0.8rem;\n padding: 0;\n }\n }\n\n blockquote {\n border-left: 4px solid #4F8CFF;\n background: rgba(79, 140, 255, .08);\n margin: 1.5rem 0;\n padding: .75rem 1rem;\n border-radius: 6px;\n color: #CDD6E5;\n }\n\n a {\n color: #6AA4FF;\n text-decoration: underline;\n }\n\n hr {\n border: none;\n border-top: 1px solid #2B3442;\n margin: 2rem 0;\n }\n\n\n img {\n width: auto;\n max-width: 100%;\n border-radius: 8px;\n }\n\n li > ul,\n li > ol {\n margin-top: 0;\n }\n\n /* Task List */\n\n ul[data-type='taskList'] {\n list-style: none;\n margin-left: 0;\n padding: 0;\n\n li {\n display: flex;\n align-items: flex-start;\n\n > label {\n flex: 0 0 auto;\n margin-right: .5rem;\n user-select: none;\n }\n\n > div {\n flex: 1 1 auto;\n }\n }\n\n input[type='checkbox'] {\n appearance: none;\n -webkit-appearance: none;\n\n width: 18px;\n height: 18px;\n\n border: 2px solid #6E7A90;\n border-radius: 4px;\n background: transparent;\n\n cursor: pointer;\n position: relative;\n transition: .15s;\n }\n\n input[type='checkbox']:checked {\n background: #4F8CFF;\n border-color: #4F8CFF;\n }\n\n [data-type='taskList'] [data-checked='true'] > div > p:first-child,\n [data-checked='true'] > div > p:first-child {\n text-decoration: line-through;\n color: #7D889C;\n }\n\n input[type='checkbox']:checked::after {\n content: \"\";\n\n position: absolute;\n\n left: 5px;\n top: 50%;\n\n width: 4px;\n height: 8px;\n\n border: solid #FFFFFF;\n border-width: 0 2px 2px 0;\n\n transform: rotate(45deg) translate(-50%, -50%);\n }\n\n ul[data-type='taskList'] {\n margin: 0;\n }\n }\n}","type":"blockquote","key":"1hnjh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Static Renderer Tiptap","type":"header-two","key":"sr37"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Static Renderer - это библиотека, которая преобразует структурированные данные (в нашем случае JSON) и превращает их в HTML без запуска браузера и интерактивного JS, он работает в разы быстрее, так как весит довольно мало.","type":"unstyled","key":"5ld2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нам нужно сделать кастомный Static Renderer для того, чтобы код подсвечивался и в preview версии. Для этого в папке utils создаём файл renderArticle.ts:","type":"unstyled","key":"57d5b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { renderToHTMLString } from '@tiptap/static-renderer/pm/html-string'\nimport { editorExtensions } from './extensions'\nimport type {JSONContent} from \"@tiptap/core\";\nimport {renderCodeBlock} from \"./renderCodeBlock\";\n\n// Преобразует JSON-документ Tiptap в готовую HTML-строку\nexport function renderArticle(content: JSONContent) {\n return renderToHTMLString({\n // Исходное содержимое редактора в формате JSON\n content,\n // Список расширений, чтобы рендерер понимал все используемые ноды и marks\n extensions: editorExtensions,\n // Дополнительные настройки рендера\n options: {\n // Позволяет переопределить рендер отдельных типов нод.\n // Здесь codeBlock будет рендериться нашей собственной функцией,\n // а не стандартным способом Tiptap.\n nodeMapping: {\n codeBlock: renderCodeBlock,\n },\n },\n })\n}","type":"blockquote","key":"as98c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тут раскрывается очень классная штука, мы можем сами менять ноды, которые хотим переделать под себя. И она работает с Next.js, благодаря рендеру на сервере, и позволяет не терять в SEO-оптимизации! Очень классная вещь в Tiptap.","type":"unstyled","key":"404pe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот кстати то, как кастомизировать ноду под себя в renderCodeBlock.ts:","type":"unstyled","key":"dascb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import {lowlight} from './lowlight'\nimport {toHtml} from 'hast-util-to-html'\nimport type { NodeProps } from '@tiptap/static-renderer'\nimport type { Node as PMNode } from '@tiptap/pm/model'\n\n// Кастомный рендерер для ноды codeBlock.\n// Вызывается static-renderer вместо стандартного рендера.\nexport function renderCodeBlock(\n {node}: NodeProps,\n): string {\n\n // Получаем язык программирования из атрибутов блока.\n // Если язык отсутствует или имеет неверный тип,\n // используем plaintext.\n const language =\n typeof node.attrs.language === 'string'\n ? node.attrs.language\n : 'plaintext'\n\n // Извлекаем текст кода без HTML-разметки.\n const code = node.textContent;\n\n // Выполняем подсветку синтаксиса.\n // Если язык зарегистрирован в lowlight — используем его,\n // иначе подсвечиваем как обычный текст.\n const tree = lowlight.registered(language)\n ? lowlight.highlight(language, code)\n : lowlight.highlight('plaintext', code)\n\n // Преобразуем AST (HAST) в HTML и оборачиваем\n // в привычную структуру

.\n    // Класс language-* пригодится для CSS или дополнительных библиотек.\n    return `${toHtml(tree)}
`;\n}","type":"blockquote","key":"a8cut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И таким образом вы можете менять всё как хотите под ваши нужды, вы можете добавлять другие классные расширения, создавать свои и именно поэтому на данный момент Tiptap является довольно крутым выбором для создания wysiwyg-редактора. Он очень гибкий и имеет хорошую документацию, не такой сложный, как Lexical и приятный для работы.","type":"unstyled","key":"ais95"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Надеюсь вам понравилась статья и вы смогли для себя получить что-то полезное от неё. В дальнейшем вы можете улучшать функционал и добавлять всё что хотите, я лишь дал начальную часть для вас и постарался немного объяснить всё, что я написал, чтобы вас подтолкнуть использовать Tiptap, так как я сам изначально не хотел морочиться и найти \"Идеальный редактор\", но найти такой - это либо платно, либо нереально, тем более, если вы хотите расширять свои возможности.","type":"unstyled","key":"b4etj"},{"data":{"image":{"id":"6a64da5cccc06762b673b9a9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример использования","type":"atomic:image","key":"3re6"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":21,"offset":50}],"inlineStyleRanges":[],"text":"Если хотите больше таких статей подписывайтесь на телеграм-канал WEBCOS. Через какое-то время я сделаю вторую часть, где добавлю ИИ, чтобы легко редактировать контент и поправлять его.","type":"unstyled","key":"cppkv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Желаю успехов в ваших проектах!","type":"unstyled","key":"fm970"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"djjat"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"xFXMQOcakwirT9JyhJ7R"}],"entityMap":{"0":{"data":{"url":"https://webcos.ru/blog/10-kak-sozdat-sobstvennyj-redaktor-na-tiptap"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://stackblitz.com/edit/vitejs-vite-xghbrjp8?file=package.json","url":"https://stackblitz.com/edit/vitejs-vite-xghbrjp8?file=package.json"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://disk.yandex.ru/d/Au2XaHLi3STEnQ","url":"https://disk.yandex.ru/d/Au2XaHLi3STEnQ"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://tiptap.dev/docs/editor/extensions/overview","url":"https://tiptap.dev/docs/editor/extensions/overview"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://tiptap.dev/docs/editor/extensions/marks/link","url":"https://tiptap.dev/docs/editor/extensions/marks/link"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://t.me/webcostech","url":"https://t.me/webcostech"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}