init

app/components/TiptapEditor.vue

@@ -0,0 +1,364 @@
+<template>
+  <div v-if="editor" class="container tiptap">
+    <div class="control-group">
+      <div class="button-group">
+        <button
+            :class="{ 'is-active': editor.isActive('paragraph') }"
+            @click="editor.chain().focus().setParagraph().run()"
+        >
+          Paragraph
+        </button>
+        <button
+            :disabled="hasH1"
+            :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+            @click="toggleH1"
+        >
+          H1
+        </button>
+        <button
+            :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+            @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+        >
+          H2
+        </button>
+        <button
+            :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
+            @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
+        >
+          H3
+        </button>
+        <button
+            :class="{ 'is-active': editor.isActive('blockquote') }"
+            @click="editor.chain().focus().toggleBlockquote().run()"
+        >
+          Blockquote
+        </button>
+      </div>
+    </div>
+
+
+    <EditorContent :editor="editor" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, computed, inject, ref, Ref } from 'vue'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import { ListItem } from '@tiptap/extension-list'
+import { Placeholder } from '@tiptap/extensions'
+import { Color, TextStyle } from '@tiptap/extension-text-style'
+import { EDITOR_KEY } from '~/shared/constants'
+
+const TITLE_MAX = 80
+const DESCRIPTION_MAX = 255
+
+const editor = inject<Ref<Editor | null>>(EDITOR_KEY)
+
+const titleLength = ref(0)
+const descriptionLength = ref(0)
+
+const hasH1 = computed(() => {
+  if (!editor?.value) return false
+  let found = false
+  editor.value.state.doc.descendants((node) => {
+    if (node.type.name === 'heading' && node.attrs.level === 1) {
+      found = true
+      return false
+    }
+    return true
+  })
+  return found
+})
+
+// Получить текст H1
+function getH1Text(): string {
+  if (!editor?.value) return ''
+  let h1Text = ''
+  editor.value.state.doc.descendants((node) => {
+    if (node.type.name === 'heading' && node.attrs.level === 1) {
+      h1Text = node.textContent
+      return false
+    }
+    return true
+  })
+  return h1Text
+}
+
+// Получить текст первого P
+function getFirstPText(): string {
+  if (!editor?.value) return ''
+  let firstPText = ''
+  let foundP = false
+  editor.value.state.doc.descendants((node) => {
+    if (node.type.name === 'paragraph' && !foundP) {
+      firstPText = node.textContent
+      foundP = true
+      return false
+    }
+    return true
+  })
+  return firstPText
+}
+
+// Обновить счетчики
+function updateCharCount() {
+  titleLength.value = getH1Text().length
+  descriptionLength.value = getFirstPText().length
+}
+
+// Функция для переключения H1
+function toggleH1() {
+  if (!editor?.value) return
+
+  if (!hasH1.value) {
+    editor.value.chain().focus().toggleHeading({ level: 1 }).run()
+  } else {
+    return
+  }
+}
+
+// Получить валидные данные
+function getValidatedContent() {
+  const titleText = getH1Text()
+  const descriptionText = getFirstPText()
+
+  return {
+    title: titleText,
+    short_description: descriptionText,
+    content: editor?.value?.getJSON()
+  }
+}
+
+defineExpose({
+  getValidatedContent
+})
+
+onMounted(() => {
+  if (!editor) return
+
+  editor.value = new Editor({
+    extensions: [
+      Color.configure({ types: [TextStyle.name, ListItem.name] }),
+      TextStyle.configure({ types: [ListItem.name] }),
+      StarterKit,
+      Placeholder.configure({
+        emptyNodeClass: 'my-custom-is-empty-class',
+        showOnlyWhenEditable: false,
+        showOnlyCurrent: false,
+        placeholder: ({ node, editor, pos }) => {
+          if (node.type.name === 'heading') {
+            return 'Введите заголовок'
+          }
+          if (node.type.name === 'paragraph') {
+            let paragraphIndex = 0
+            let foundPos = null
+
+            editor.state.doc.descendants((child, childPos) => {
+              if (child.type.name === 'paragraph') {
+                if (childPos === pos) {
+                  foundPos = paragraphIndex
+                  return false
+                }
+                paragraphIndex++
+              }
+              return true
+            })
+
+            if (foundPos === 0) {
+              return 'Введите краткое описание...'
+            }
+            return 'Введите текст...'
+          }
+          return ''
+        }
+      }),
+    ],
+    content: `
+    <h1></h1>
+    <p></p>
+    <p></p>
+    `,
+    onUpdate: ({ editor }) => {
+      updateCharCount()
+
+      let paragraphIndex = 0
+      let h1Found = false
+
+      editor.state.doc.descendants((node, pos) => {
+        // Ограничиваем H1
+        if (node.type.name === 'heading' && node.attrs.level === 1) {
+          const text = node.textContent
+          if (text.length > TITLE_MAX) {
+            editor.commands.setTextSelection({
+              from: pos + TITLE_MAX + 1,
+              to: pos + text.length + 1
+            })
+            editor.commands.deleteSelection()
+          }
+          h1Found = true
+          return
+        }
+
+        // Ограничиваем только первый P
+        if (node.type.name === 'paragraph') {
+          if (paragraphIndex === 0) {
+            const text = node.textContent
+            if (text.length > DESCRIPTION_MAX) {
+              editor.commands.setTextSelection({
+                from: pos + DESCRIPTION_MAX + 1,
+                to: pos + text.length + 1
+              })
+              editor.commands.deleteSelection()
+            }
+          }
+          paragraphIndex++
+        }
+      })
+    }
+  })
+
+  updateCharCount()
+})
+
+onBeforeUnmount(() => {
+  if (!editor?.value) return
+  editor.value?.destroy()
+})
+</script>
+
+<style lang="scss" scoped>
+.tiptap {
+  :first-child {
+    margin-top: 0;
+    border-radius: 32px;
+  }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-family: SourceSans3, monospace;
+    font-size: 24px;
+    font-weight: 600;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+
+  .tiptap p.is-empty::before {
+    color: #adb5bd;
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+}
+
+.control-group {
+  margin-bottom: 1rem;
+
+  .button-group {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+
+    button {
+      padding: 0.5rem 1rem;
+      border: 1px solid var(--gray-3, #ddd);
+      border-radius: 4px;
+      background-color: white;
+      cursor: pointer;
+      transition: all 0.2s;
+
+      &:hover:not(:disabled) {
+        background-color: var(--gray-1, #f5f5f5);
+      }
+
+      &.is-active {
+        background-color: var(--blue-light, #e3f2fd);
+        border-color: var(--blue, #1976d2);
+        color: var(--blue, #1976d2);
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+</style>