init

app/assets/styles/fonts.scss

@@ -0,0 +1,2 @@
+@use "fonts/futuraPT";
+@use "fonts/sourceSans";

app/assets/styles/fonts/futuraPT.scss

@@ -0,0 +1,13 @@
+@font-face {
+  font-family: 'FuturaPT';
+  font-style: normal;
+  font-weight: 400;
+  src: url('@/assets/fonts/futuraPT/FuturaPT-Book.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'FuturaPT';
+  font-style: normal;
+  font-weight: 500;
+  src: url('@/assets/fonts/futuraPT/FuturaPT-Medium.ttf') format('truetype');
+}

app/assets/styles/fonts/sourceSans.scss

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: 'SourceSans3';
+  font-style: normal;
+  font-weight: 600;
+  src: url('@/assets/fonts/sourceSans/SourceSans3-SemiBold.ttf') format('truetype');
+}

app/assets/styles/index.scss

@@ -0,0 +1,19 @@
+@use "fonts";
+@use "mixins";
+@use "vars";
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+
+button {
+  outline: none;
+  box-shadow: none;
+  border: none;
+}
+
+h1,h2,h3,h4,h5,h6 {
+  margin: 0;
+}

app/assets/styles/mixins.scss

@@ -0,0 +1,6 @@
+@mixin square($size: 10px) {
+  width: $size;
+  min-width: $size;
+  height: $size;
+  min-height: $size;
+}

app/assets/styles/tiptap.scss

@@ -0,0 +1,199 @@
+/* Основные стили для контейнера редактора */
+.ProseMirror {
+  min-height: 260px;
+  padding: 48px 24px;
+  border: 1px solid #d0d7de;
+  border-radius: 8px;
+  background: #fff;
+  color: #24292f;
+  font-size: 1rem;
+  line-height: 1.8;
+  outline: none;
+  transition: border-color .15s;
+  word-break: break-word;
+  font-family: inherit;
+}
+
+/* Состояния фокуса */
+.ProseMirror-focused {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px #e0e7ff;
+}
+
+/* Стилизация параграфа и базового текста */
+.ProseMirror p {
+  margin: 1em 0;
+}
+.ProseMirror strong { font-weight: 700; }
+.ProseMirror em { font-style: italic; }
+.ProseMirror u { text-decoration: underline; }
+.ProseMirror s { text-decoration: line-through; }
+.ProseMirror code {
+  background: #f6f8fa;
+  color: #d63384;
+  border-radius: 4px;
+  font-size: 0.95em;
+  font-family: 'JetBrainsMono', 'Fira Mono', 'Menlo', monospace;
+  padding: 0.1em 0.3em;
+}
+
+/* Заголовки */
+.ProseMirror h1,
+.ProseMirror h2,
+.ProseMirror h3,
+.ProseMirror h4,
+.ProseMirror h5,
+.ProseMirror h6 {
+  line-height: 1.2;
+  font-weight: 700;
+  margin: 1.6em 0 0.8em;
+}
+.ProseMirror h1 { font-size: 2em;   }
+.ProseMirror h2 { font-size: 1.6em; }
+.ProseMirror h3 { font-size: 1.34em;}
+.ProseMirror h4 { font-size: 1.18em;}
+.ProseMirror h5 { font-size: 1em;   }
+.ProseMirror h6 { font-size: 1em; color: #555; }
+
+/* Списки */
+.ProseMirror ul,
+.ProseMirror ol {
+  margin: 0.8em 0 0.8em 2em;
+  padding: 0 0 0 1.2em;
+}
+.ProseMirror li {
+  margin: 0.2em 0;
+  padding-left: 0.3em;
+}
+
+/* Quote and horizontal rule */
+.ProseMirror blockquote {
+  color: #6b7280;
+  margin: 1.2em 0;
+  padding-left: 0;
+  font-style: italic;
+  border-radius: 0 4px 4px 0;
+}
+
+/* Табы и преформат */
+.ProseMirror pre {
+  background: #282a36;
+  color: #f6f8fa;
+  padding: 1em;
+  border-radius: 6px;
+  font-family: 'JetBrainsMono', 'Fira Mono', 'Menlo', monospace;
+  overflow-x: auto;
+}
+.ProseMirror pre code {
+  background: unset;
+  color: inherit;
+  font-size: inherit;
+  padding: 0;
+}
+
+/* HR */
+.ProseMirror hr {
+  border: 0;
+  border-top: 1px solid #e5e7eb;
+  margin: 2em 0;
+}
+
+/* Изображения */
+.ProseMirror img {
+  max-width: 100%;
+  border-radius: 4px;
+}
+
+/* Ссылки */
+.ProseMirror a {
+  color: #2563eb;
+  text-decoration: underline;
+  transition: color .15s;
+}
+.ProseMirror a:hover {
+  color: #1e40af;
+}
+
+/* Сброс плэйсхолдера и подсветка выделения */
+.ProseMirror-gapcursor {
+  display: none;
+}
+.ProseMirror-selectednode {
+  outline: 2px solid #6366f1;
+  outline-offset: 1px;
+}
+
+/* Стили для невалидных узлов (например, плейсхолдеров или ошибок) */
+.ProseMirror .is-invalid {
+  background: #ffe4e6;
+  color: #be185d;
+  padding: 0.1em 0.3em;
+  border-radius: 2px;
+}
+
+.ProseMirror p.is-editor-empty[data-placeholder]:before,
+.ProseMirror h1.is-editor-empty[data-placeholder]:before,
+.ProseMirror h2.is-editor-empty[data-placeholder]:before,
+.ProseMirror h3.is-editor-empty[data-placeholder]:before{
+  content: attr(data-placeholder);
+  color: #bdbdbd;
+  opacity: 1;
+  pointer-events: none;
+  padding-left: 106px;
+  font-style: normal;
+
+  font-family: SourceSans3, monospace;
+  font-weight: 600;
+  font-size: 36px;
+  line-height: 120%;
+}
+
+.ProseMirror p.is-editor-empty[data-placeholder]:before {
+  font-family: FuturaPT, sans-serif;
+}
+.ProseMirror p:nth-of-type(1).is-editor-empty[data-placeholder]:before {
+  font-size: 22px;
+  font-weight: 500;
+}
+.ProseMirror p.is-editor-empty[data-placeholder]:before {
+  font-size: 20px;
+  font-weight: 400;
+}
+
+.ProseMirror {
+  h1 {
+    font-family: SourceSans3, monospace;
+    font-size: 24px;
+    font-weight: 600;
+  }
+  p:first-of-type {
+    font-family: FuturaPT, monospace;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 120%;
+  }
+  p:not(:first-of-type) {
+    font-family: FuturaPT, monospace;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 120%;
+  }
+}
+
+
+@media screen and (max-width: 768px) {
+
+  .ProseMirror p.is-editor-empty[data-placeholder]:before,
+  .ProseMirror h1.is-editor-empty[data-placeholder]:before,
+  .ProseMirror h2.is-editor-empty[data-placeholder]:before,
+  .ProseMirror h3.is-editor-empty[data-placeholder]:before{
+    padding-left: 0;
+    font-size: 24px;
+  }
+  .ProseMirror p:nth-of-type(1).is-editor-empty[data-placeholder]:before {
+    font-size: 18px;
+  }
+  .ProseMirror p.is-editor-empty[data-placeholder]:before {
+    font-size: 16px;
+  }
+}

app/assets/styles/vars.scss

@@ -0,0 +1,7 @@
+:root {
+  --text-blue: #00B2FF;
+  --text-black: #14142A;
+  --text-gray: #81859C;
+  --text-light-gray: #BEC2DA;
+
+}