0

I am using angular 6 and firebase for the project. The goal is to use firepad code editor as it has live collaboration, open source also I am using firebase backend which helps.

The example in the https://firepad.io/docs/#headless does not have specific info on how to import firepad and codemirror. If anyone had any experience integrating firepad, codemirror with angular 5 + please comment.

The example from the firepad codemirror editor https://github.com/FirebaseExtended/firepad/blob/master/examples/code.html

Also added stackblitz link https://stackblitz.com/edit/angular-qt6v3c

Converting into Angular 

import * as Firepad from 'firepad';
import { CodeMirror } from 'codemirror';
import * as firebase from 'firebase/app';

@Component({
  selector: 'app-web-project-editor-editor',
  templateUrl: './web-project-editor-editor.component.html',
  styleUrls: ['./web-project-editor-editor.component.css']
})
export class WebProjectEditorEditorComponent implements OnInit {
  constructor() { }

  ngOnInit() {

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

    //// Create CodeMirror (with line numbers and the JavaScript mode).
    const codeMirror = CodeMirror(document.getElementById('firepad- 
     container'), {
      lineNumbers: true,
      mode: 'javascript'
    });

    //// Create Firepad.
    const firepad = Firepad.fromCodeMirror(firepadRef, codeMirror, {
      defaultText: '// JavaScript Editing with Firepad!\nfunction go() 
    {\n  var message = "Hello, world.";\n  console.log(message);\n}'
    });

  }
}

Component web-project-editor-editor.component.html Code

Need help on how to import codemirror, firepad.

Rahul Thawal
  • 241
  • 1
  • 3
  • 13
  • Have you looked at the examples? Has source code linked on it. https://firepad.io/examples/ – penleychan Feb 12 '19 at 21:34
  • @penleychan Yes, I have looked into the example. I want to have firepad and codemirror in package.json which I do have it. The proper imports for codemirror and firepad is what I am struggling to have it in the component. – Rahul Thawal Feb 12 '19 at 21:50

0 Answers0