Rich Text Chat & Messaging Input

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

// A compact chat input: a floating toolbar keeps the surface minimal
const editor = Scribe.init('#chat-input', {
  toolbar:     'floating',
  autofocus:   true,
  placeholder: 'Type a message...',
});

// Send on Enter, newline on Shift+Enter
const inputEl = document.querySelector('#chat-input');
inputEl.addEventListener('keydown', (e) => {
  if (e.key !== 'Enter' || e.shiftKey) return; // Shift+Enter -> newline
  e.preventDefault();
  send();
});

function send() {
  if (editor.isEmpty()) return;
  const html = editor.getHTML();   // sanitized HTML for the message payload
  socket.emit('message', { html });
  editor.setHTML('');              // clear the input after sending
}

document.querySelector('#send-btn').addEventListener('click', send);

// Inline formatting from compact toolbar buttons
document.querySelector('#bold').addEventListener('click',   () => editor.bold());
document.querySelector('#italic').addEventListener('click', () => editor.italic());

import { Scribe } from 'scribejs-editor';

// Incoming messages arrive as HTML from other users — never trust it raw.
// Run it back through Scribe's sanitizer before rendering into the DOM.
function renderIncoming(rawHtml, containerEl) {
  // Scribe sanitizes HTML it sets; using a throwaway instance gives you
  // the same XSS-safe cleaning pipeline for received content.
  const sanitizer = Scribe.init(document.createElement('div'));
  sanitizer.setHTML(rawHtml);          // strips <script>, on* handlers, etc.
  const safeHtml = sanitizer.getHTML(); // clean, safe markup
  sanitizer.destroy();

  const bubble = document.createElement('div');
  bubble.className = 'message-bubble';
  bubble.innerHTML = safeHtml;          // safe: already sanitized by Scribe
  containerEl.appendChild(bubble);
}

socket.on('message', (msg) => {
  renderIncoming(msg.html, document.querySelector('#messages'));
});

// TODO(verify): @mentions are NOT a confirmed built-in Scribe feature.
// If you want @mention autocomplete, build it as a custom Scribe plugin
// that listens for keydown, shows a picker, and inserts a mention node.
// Do not assume mentions ship by default.

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

export function ChatInput({ onSend }) {
  const containerRef = useRef(null);
  const editorRef    = useRef(null);

  useEffect(() => {
    const el = containerRef.current;
    editorRef.current = Scribe.init(el, {
      toolbar:     'floating',
      autofocus:   true,
      placeholder: 'Type a message...',
    });

    // Send on Enter; Shift+Enter inserts a newline
    const onKeyDown = (e) => {
      if (e.key !== 'Enter' || e.shiftKey) return;
      e.preventDefault();
      submit();
    };
    el.addEventListener('keydown', onKeyDown);

    return () => {
      el.removeEventListener('keydown', onKeyDown);
      editorRef.current?.destroy();
    };
  }, []);

  const submit = useCallback(() => {
    const editor = editorRef.current;
    if (!editor || editor.isEmpty()) return;
    onSend(editor.getHTML());  // sanitized HTML message
    editor.setHTML('');
  }, [onSend]);

  return (
    <div className="chat-input-row">
      <div ref={containerRef} className="chat-input" />
      <button onClick={submit}>Send</button>
    </div>
  );
}