Firepad reproduction

by ktsn

HTML

<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase.js"></script>

<!-- CodeMirror -->
<script src="https://www.unpkg.com/[email protected]/lib/codemirror.js"></script>
<link rel="stylesheet" href="https://www.unpkg.com/[email protected]/lib/codemirror.css"/>

<!-- Firepad -->
<link rel="stylesheet" href="https://cdn.firebase.com/libs/firepad/1.5.3/firepad.css" />
<script src="https://cdn.firebase.com/libs/firepad/1.5.3/firepad.min.js"></script>
  
<div id="firepad"></div>

CSS

html,
body {
  margin: 0;
  height: 100%;
}

#firepad {
  height: 100%;
}

JavaScript

function init() {
  // Initialize the Firebase SDK.
  firebase.initializeApp({
    apiKey: "AIzaSyBf9xzs6vI7EXqAvia2lHhSXAGSN3cPtqA",
    authDomain: "fir-style-reproduction.firebaseapp.com",
    databaseURL: "https://fir-style-reproduction.firebaseio.com",
    projectId: "fir-style-reproduction",
    storageBucket: "fir-style-reproduction.appspot.com",
    messagingSenderId: "525648754789",
    appId: "1:525648754789:web:13b6f3fa1cc9a6905eee8c"
  });

  // Get Firebase Database reference.
  var firepadRef = firebase.database().ref();

  // Create CodeMirror (with lineWrapping on).
  var codeMirror = CodeMirror(document.getElementById('firepad'), { lineWrapping: true });

  // Create Firepad (with rich text toolbar and shortcuts enabled).
  var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror,
                                       { richTextShortcuts: true, richTextToolbar: true, defaultText: '' });
}

init()