Rich Text Editor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!-- Rich Text Editor - Full Toolbar -->
<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">Article Content</label>
  <div class="border border-gray-300 rounded-xl overflow-hidden shadow-sm">
    <div class="flex flex-wrap items-center gap-1 p-3 bg-gray-50 border-b border-gray-200">
      <select class="px-3 py-1.5 bg-white border border-gray-200 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
        <option>Paragraph</option><option>Heading 1</option><option>Heading 2</option>
      </select>
      <div class="w-px h-6 bg-gray-300 mx-1"></div>
      <button class="p-2 text-gray-700 hover:bg-gray-200 rounded transition-colors font-bold text-sm">B</button>
      <button class="p-2 text-gray-700 hover:bg-gray-200 rounded transition-colors italic text-sm">I</button>
      <button class="p-2 text-gray-700 hover:bg-gray-200 rounded transition-colors underline text-sm">U</button>
      <div class="w-px h-6 bg-gray-300 mx-1"></div>
      <button class="p-2 text-gray-700 hover:bg-gray-200 rounded transition-colors text-blue-600 text-sm">🔗</button>
      <button class="p-2 text-gray-700 hover:bg-gray-200 rounded transition-colors text-red-500 text-sm">📷</button>
    </div>
    <div contenteditable="true" class="min-h-[180px] p-4 bg-white focus:outline-none prose prose-sm max-w-none">
      <p class="text-gray-600">Start typing your content here...</p>
    </div>
  </div>
</div>

<!-- Rich Text Editor - Comment Style -->
<div class="mt-4">
  <div class="flex gap-3">
    <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-semibold">JD</div>
    <div class="flex-1">
      <div class="border border-gray-200 rounded-xl overflow-hidden focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500">
        <div contenteditable="true" class="p-3 bg-white focus:outline-none min-h-[60px] text-sm" placeholder="Write a comment..."></div>
        <div class="flex items-center justify-between px-3 py-2 bg-gray-50 border-t border-gray-200">
          <div class="flex gap-1">
            <button class="p-1.5 text-gray-500 hover:text-gray-700 hover:bg-gray-200 rounded transition-colors text-sm">B</button>
            <button class="p-1.5 text-gray-500 hover:text-gray-700 hover:bg-gray-200 rounded transition-colors text-sm italic">I</button>
          </div>
          <button class="px-4 py-1.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">Post</button>
        </div>
      </div>
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

# Rich Text Editor

Rich text editing surface.

## Usage
```bash
npx devsnips add Tailwind/Components/Input/rich-text-editor
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`