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: "AIzaSyDxfhcAg-pDYTnJL7TyT4MBRy12Ar7YeC4",
    authDomain: "test-ed374.firebaseapp.com",
    databaseURL: "https://test-ed374.firebaseio.com",
    projectId: "test-ed374",
    storageBucket: "test-ed374.appspot.com",
    messagingSenderId: "262553555148",
    appId: "1:262553555148:web:9a8098aa7479d874c3f269"
  });

  // 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()