Lo yeh ek detailed testing article hai jise aap seedha copy kar ke apne Tiptap rich text editor mein paste kar sakte hain taake har qisam ki formatting, styling aur blocks ki testing ho sake.

Is article mein basic text se le kar complex elements (code blocks, quotes, lists, tables) sab shamil kiya gaya hai taake aap ke editor ki limit aur rendering check ho sake.

Tiptap Editor: Ultimate Testing Document

Yeh document Tiptap rich text editor ki rendering, extensions, aur basic features ko test karne ke liye likha gaya hai. Agar aap ka editor sahi configure hua hai, toh is article ka har element bilkul perfect nazar aana chahiye.

1. Basic Text Formatting

Sab se pehle hum basic typography aur inline styles ko test karte hain:

• Yeh text bold (strong) hai.

• Yeh text italic (emphasis) hai.

• Yeh text ~~strikethrough~~ hai, jo deleted content dikhane ke kaam aata hai.

• Agar aap ko inline code dikhana ho toh console.log('Tiptap') is tarah nazar aana chahiye.

• Hum links ko bhi test kar sakte hain. Maslan, yeh Tiptap ki official website ka link hai.

Nested Formatting

Kya aap ka editor nested tags support karta hai? Maslan, bold aur italic ek sath, ya phir bold ke andar inline code ka test.

2. Lists Aur Unki Types

Lists kisi bhi editor ka ahem hissa hoti hain. Tiptap mein list rendering ko check karne ke liye niche di gayi lists ko dekhein:

Unordered List (Bullet Points):

• Pehla point

• Dusra point

  
  

  • Dusre point ke andar nested point

  • Ek aur nested point

• Teesra point

Ordered List (Numbers):

1. Sab se pehle editor initialize karein.

2. Us ke baad extensions configure karein.

   
   

   1. Nested step 1

   2. Nested step 2

3. Content ko render karein.

3. Blockquotes (Quotes Test)

Jab kisi ki baat ko highlight karna ho toh blockquotes use hote hain. Tiptap ka Blockquote extension ise handle karta hai.

"Achi programming sirf code likhna nahi hai, balke aisi problems solve karna hai jo real-world mein logo ko face aati hain."

— Yeh ek multi-line blockquote ka test hai. Agar aap enter press karein toh quote ke andar hi nayi line shuru honi chahiye.

4. Code Blocks (Syntax Highlighting)

Agar aap technical content likh rahe hain, toh code blocks bohat zaroori hain. Tiptap ka CodeBlock ya CodeBlockLowlight extension yahan test hoga.

Niche JavaScript ka ek code block diya gaya hai:

JavaScript

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

// Tiptap editor ko initialize karne ka basic code
const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [
    StarterKit,
  ],
  content: '<p>Hello World! Yeh Tiptap hai.</p>',
  onUpdate({ editor }) {
    console.log('Content update ho gaya!', editor.getHTML());
  }
})

5. Tables (Advanced Feature Test)

Tables Tiptap mein natively nahi aate, inke liye alag se Table extension install karna parta hai. Agar aap ne lagaya hai, toh yeh table sahi render hona chahiye:

6. Horizontal Rules (Dividers)

Do sections ko alag karne ke liye horizontal lines use hoti hain. Niche ek line di gayi hai:

Analysis & Best Practices

Tiptap ek headless editor hai (is ka apna koi UI nahi hota). Is liye:

1. Fayda: Aap CSS ke zariye jaisi chahein styling de sakte hain.

2. Nuqsan: Agar aap CSS sahi nahi likhenge, toh lists aur quotes bilkul normal text ki tarah nazar aayenge.

3. Common Mistake: Aksar log TailwindCSS use karte waqt @tailwindcss/typography plugin (prose classes) lagana bhool jate hain, jis ki wajah se editor mein formatting nazar nahi aati.

Pro-Tip: Jab aap is text ko paste karein, toh inspect element khol kar check karein ke kya Tiptap properly <pre>, <blockquote>, aur <strong> tags generate kar raha hai ya nahi.