Blog Post Editor for JavaScript Apps

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

const editor = Scribe.init('#blog-content', {
  toolbar:     'fixed',
  autofocus:   true,
  placeholder: 'Start writing your post...',
  onChange:    (html) => autosave(html),
});

// Load draft from server
const draft = await fetch(`/api/drafts/${postId}`).then(r => r.json());
if (draft.content) editor.setHTML(draft.content);

// Autosave with debounce
let saveTimer;
function autosave(html) {
  clearTimeout(saveTimer);
  saveTimer = setTimeout(async () => {
    await fetch(`/api/drafts/${postId}`, {
      method:  'PUT',
      headers: { 'Content-Type': 'application/json' },
      body:    JSON.stringify({ content: html }),
    });
    document.querySelector('#save-status').textContent = 'Saved';
  }, 2000);
}

// Publish
document.querySelector('#publish-btn').addEventListener('click', async () => {
  const html = editor.getHTML();
  await fetch(`/api/posts`, {
    method:  'POST',
    headers: { 'Content-Type': 'application/json' },
    body:    JSON.stringify({ content: html, title }),
  });
  window.location.href = '/admin/posts';
});

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

export function BlogPostEditor({ postId, initialContent, title }) {
  const containerRef = useRef(null);
  const editorRef    = useRef(null);
  const [status, setStatus] = useState('');
  const saveTimer = useRef(null);

  useEffect(() => {
    editorRef.current = Scribe.init(containerRef.current, {
      toolbar:     'fixed',
      autofocus:   true,
      placeholder: 'Write your story...',
      onChange:    scheduleAutosave,
    });
    if (initialContent) editorRef.current.setHTML(initialContent);
    return () => editorRef.current?.destroy();
  }, [postId]);

  const scheduleAutosave = useCallback((html) => {
    clearTimeout(saveTimer.current);
    setStatus('Saving...');
    saveTimer.current = setTimeout(async () => {
      await fetch(`/api/drafts/${postId}`, {
        method:  'PUT',
        headers: { 'Content-Type': 'application/json' },
        body:    JSON.stringify({ content: html }),
      });
      setStatus('Draft saved');
    }, 2000);
  }, [postId]);

  const publish = async () => {
    const html = editorRef.current?.getHTML();
    if (!html || editorRef.current?.isEmpty()) return;
    await fetch('/api/posts', {
      method:  'POST',
      headers: { 'Content-Type': 'application/json' },
      body:    JSON.stringify({ content: html, title }),
    });
  };

  return (
    <div className="blog-editor">
      <div className="toolbar-wrapper">
        <span className="save-status">{status}</span>
        <button onClick={publish} className="btn-publish">Publish</button>
      </div>
      <div ref={containerRef} className="prose prose-lg max-w-none" />
    </div>
  );
}

import { Scribe } from 'scribejs-editor';

const editor = Scribe.init('#content', {
  toolbar:   'fixed',
  onChange:  updateStats,
});

// Live word count and reading time
function updateStats(html) {
  const text  = editor.getText();                      // plain text
  const words = text.trim().split(/\s+/).filter(Boolean).length;
  const chars = text.length;
  const readTime = Math.ceil(words / 200);             // ~200 wpm

  document.querySelector('#word-count').textContent  = `${words} words`;
  document.querySelector('#char-count').textContent  = `${chars} chars`;
  document.querySelector('#read-time').textContent   = `~${readTime} min read`;
}

// Keyboard shortcuts
document.addEventListener('keydown', (e) => {
  const mod = e.metaKey || e.ctrlKey;
  if (!mod) return;
  if (e.key === 'b') { e.preventDefault(); editor.bold(); }
  if (e.key === 'i') { e.preventDefault(); editor.italic(); }
  if (e.key === 'k') { e.preventDefault(); editor.link(prompt('URL:') ?? ''); }
  if (e.key === 's') { e.preventDefault(); save(); }
});