Documentation & Knowledge-Base Editor

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

// A docs editor wants a fixed toolbar for long-form structured writing
const editor = Scribe.init('#doc-body', {
  toolbar:     'fixed',
  autofocus:   true,
  placeholder: 'Write your documentation...',
  onChange:    (html) => autosaveLocal(html),
});

// Headings for structure, code blocks, and internal links
document.querySelector('#h2').addEventListener('click', () => editor.heading(2));
document.querySelector('#h3').addEventListener('click', () => editor.heading(3));

// Internal link to another KB article
document.querySelector('#internal-link').addEventListener('click', () => {
  const slug = prompt('Article slug (e.g. /docs/api-reference):');
  if (slug) editor.link(slug);
});

// Publish clean HTML to your knowledge base
document.querySelector('#publish').addEventListener('click', async () => {
  const html = editor.getHTML();   // clean semantic HTML, safe to store
  await fetch(`/api/kb/${articleId}`, {
    method:  'PUT',
    headers: { 'Content-Type': 'application/json' },
    body:    JSON.stringify({ content: html }),
  });
});

import { Scribe } from 'scribejs-editor';

const STORAGE_KEY = `kb-draft-${articleId}`;

const editor = Scribe.init('#doc-body', {
  toolbar:  'fixed',
  onChange: scheduleAutosave,
});

// Restore an unsaved local draft on load (localStorage source of truth)
const cached = localStorage.getItem(STORAGE_KEY);
if (cached) editor.setHTML(cached);

// Debounced autosave to localStorage so writers never lose work
let saveTimer;
function scheduleAutosave(html) {
  clearTimeout(saveTimer);
  document.querySelector('#status').textContent = 'Saving...';
  saveTimer = setTimeout(() => {
    localStorage.setItem(STORAGE_KEY, html);
    document.querySelector('#status').textContent = 'Saved locally';
  }, 1500);
}

// Clear the local draft once it is committed to the server
async function publish() {
  const html = editor.getHTML();
  await fetch(`/api/kb/${articleId}`, {
    method:  'PUT',
    headers: { 'Content-Type': 'application/json' },
    body:    JSON.stringify({ content: html }),
  });
  localStorage.removeItem(STORAGE_KEY);
}

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

export function DocsEditor({ articleId, initialContent }) {
  const containerRef = useRef(null);
  const editorRef    = useRef(null);
  const saveTimer    = useRef(null);
  const [status, setStatus] = useState('');
  const storageKey = `kb-draft-${articleId}`;

  useEffect(() => {
    editorRef.current = Scribe.init(containerRef.current, {
      toolbar:     'fixed',
      autofocus:   true,
      placeholder: 'Write your documentation...',
      onChange:    scheduleAutosave,
    });
    // Prefer a local draft, fall back to the server content
    const cached = localStorage.getItem(storageKey);
    editorRef.current.setHTML(cached ?? initialContent ?? '');
    return () => editorRef.current?.destroy();
  }, [articleId]);

  const scheduleAutosave = useCallback((html) => {
    clearTimeout(saveTimer.current);
    setStatus('Saving...');
    saveTimer.current = setTimeout(() => {
      localStorage.setItem(storageKey, html);
      setStatus('Saved locally');
    }, 1500);
  }, [storageKey]);

  const publish = async () => {
    const html = editorRef.current?.getHTML();
    if (!html) return;
    await fetch(`/api/kb/${articleId}`, {
      method:  'PUT',
      headers: { 'Content-Type': 'application/json' },
      body:    JSON.stringify({ content: html }),
    });
    localStorage.removeItem(storageKey);
    setStatus('Published');
  };

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