Rich Text Editor for Comment Sections

import { Scribe } from 'scribejs-editor';
import 'scribejs-editor/dist/scribe.css';

// Inline comment box — activates when user clicks
const editor = Scribe.init('#comment-box', {
  toolbar:     'floating', // appears only on text selection
  placeholder: 'Write a comment...',
  minHeight:   60,
});

// Submit handler
document.querySelector('#submit-btn').addEventListener('click', async () => {
  const html = editor.getHTML();
  if (!html || editor.isEmpty()) return;

  await fetch('/api/comments', {
    method:  'POST',
    headers: { 'Content-Type': 'application/json' },
    body:    JSON.stringify({ body: html, postId }),
  });

  editor.setHTML(''); // clear after submit
  editor.blur();
});

import { useRef, useEffect, useState } from 'react';
import { Scribe } from 'scribejs-editor';

export function CommentBox({ postId, onSubmit }) {
  const containerRef = useRef(null);
  const editorRef    = useRef(null);
  const [isEmpty, setIsEmpty]   = useState(true);
  const [loading, setLoading]   = useState(false);

  useEffect(() => {
    editorRef.current = Scribe.init(containerRef.current, {
      toolbar:     'floating',
      placeholder: 'Add a comment...',
      onChange:    (html) => setIsEmpty(!html || html === '<p></p>'),
    });
    return () => editorRef.current?.destroy();
  }, []);

  const handleSubmit = async () => {
    const html = editorRef.current?.getHTML();
    if (!html) return;
    setLoading(true);
    try {
      await onSubmit(html);
      editorRef.current?.setHTML('');
      setIsEmpty(true);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="comment-box border rounded-lg p-3">
      <div ref={containerRef} />
      <div className="flex justify-end mt-2">
        <button
          onClick={handleSubmit}
          disabled={isEmpty || loading}
          className="btn-primary"
        >
          {loading ? 'Posting...' : 'Post Comment'}
        </button>
      </div>
    </div>
  );
}

import { Scribe } from 'scribejs-editor';

// Reply editor for threaded comments
// Initialize lazily when user clicks "Reply"
let replyEditor = null;

function openReply(commentId) {
  const container = document.querySelector(`#reply-${commentId}`);
  container.style.display = 'block';

  if (!replyEditor) {
    replyEditor = Scribe.init(container.querySelector('.editor'), {
      toolbar:     'floating',
      placeholder: 'Write a reply...',
      autofocus:   true,
    });
  } else {
    replyEditor.focus();
  }
}

function closeReply(commentId) {
  document.querySelector(`#reply-${commentId}`).style.display = 'none';
  replyEditor?.setHTML('');
}

async function submitReply(commentId) {
  const html = replyEditor?.getHTML();
  if (!html || replyEditor?.isEmpty()) return;

  await fetch('/api/comments', {
    method:  'POST',
    headers: { 'Content-Type': 'application/json' },
    body:    JSON.stringify({ body: html, parentId: commentId }),
  });

  closeReply(commentId);
  refreshThread(commentId); // re-render replies
}