Prototyping Collaborative Comment Systems

by shamalj

HTML

<!-- Froala CSS -->
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.min.css" rel="stylesheet">

<div style="max-width: 700px; margin: 20px auto; font-family: Arial;">
  <h3>Leave a Comment</h3>

  <textarea id="comment-editor">
    <p>Write your comment here...</p>
  </textarea>

  <p id="status" style="color: green; font-size: 14px;"></p>
</div>

<!-- Froala JS -->
<script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.min.js"></script>

<script>
  new FroalaEditor('#comment-editor', {
    height: 200,
    events: {
      'contentChanged': function () {
        document.getElementById('status').innerText = "Saving...";
        
        setTimeout(() => {
          document.getElementById('status').innerText = "All changes saved";
        }, 800);
      }
    }
  });
</script>