interviewstreet / firepad-x Goto Github PK

Hey folks!

Thanks for this update to firepad! Super cool to have a modern version!

I was wondering if you had any plans to support firebase V9 for the tree shaking benefits.

Thanks!

How can we apply operational transformations as in text-operation.js from FirebaseExtended/firepad?

I would like to apply a history of revisions up to a timestamp as demonstrated in this tutorial:
logicboard.com/blog/code-replay

But there is no Firepad.TextOperation.fromJSON available to compose a TextOperation.

Enable the creation of multiple Firepads simultaneously to facilitate real-time synchronization of files. In my use case, I aim to ensure that any changes made by one user in a file are instantly reflected for another user working on the same project. The current implementation falls short in achieving this goal, primarily because the existing method, 'fromMonaco,' requires an editor instance. However, in my scenario, there exists a single Monaco editor instance with multiple models. Is there any way to create multiple Firepads using Monaco models to address this limitation?

Implementation should ideally been straightforward. As I could simply have made a client adapter that modifies an internal string.

class HeadlessAdapter implements IEditorAdapter {
    protected _content: string;

    constructor() {
        this._content = "";
    }
    on(): void {
        return;
    }
    off(): void {
        return;
    }
    registerUndo(): void {
        return;
    }
    registerRedo(): void {
        return;
    }
    deregisterUndo(): void {
        return;
    }
    deregisterRedo(): void {
        return;
    }
    getCursor(): ICursor | null {
        return null;
    }
    setCursor(): void {
        return;
    }
    setOtherCursor(): IDisposable {
        return {
            dispose: () => {
                return;
            },
        };
    }
    getText(): string {
        return this._content;
    }
    setText(text: string): void {
        this._content = text;
    }
    setInitiated(): void {
        return;
    }
    applyOperation(operation: IPlainTextOperation): void {
        if (!operation.isNoop()) {
            return;
        }
        this._content = operation.apply(this._content);
    }
    invertOperation(operation: IPlainTextOperation): IPlainTextOperation {
        return operation.invert(this._content);
    }
    dispose(): void {
        return;
    }

}

const headlessAdapter = new HeadlessAdapter();
const firebaseAdapter = new FirebaseAdapter(dbRef, 0, "#000000", "Admin");
const opts = <IFirepadConstructorOptions> {
	userId: 0,
	userColor: "#000000",
	userName: "Admin"
};

const firepad = new Firepad(firebaseAdapter, headlessAdapter, opts);

Unfortunately this errors out with the following

ReferenceError: self is not defined
    at Object.call (/workspace/template-typescript-node/node_modules/@hackerrank/firepad/dist/webpack:/node_modules/@operational-transformation/plaintext-editor/lib/index.js:1:515)
    at require (/workspace/template-typescript-node/node_modules/@hackerrank/firepad/dist/webpack:/webpack/bootstrap:19:32)
    at /workspace/template-typescript-node/node_modules/@hackerrank/firepad/dist/webpack:/lib/firepad-classic.js:3:26
    at /workspace/template-typescript-node/node_modules/@hackerrank/firepad/dist/firepad.min.js:1:69312

Looks like its bundled with webpack, and the global object is set to self.

I want to provide multi file support. Instantiating multiple monaco editors can affect performance. I think we can use monaco's ITextModel api, to be able to track multiple files.

I was able to run Firepad successfully using plain React, but unfortunately, I couldn't execute it using Next.js

Here's a running example without Firepad:
https://codesandbox.io/s/react-moncao-editor-nextjs-without-firepad-u8p4k

And here's what happens when you import the package:
https://codesandbox.io/s/react-moncao-editor-nextjs-with-firepad-4ny9s

It would be amazing if we could get this fixed.

Version info

Firebase: 8.9.1

Firepad: 0.2.0

Monaco: 0.20.0

Test case

Duplicate of FirebaseExtended#315

Steps to reproduce

1. Open session on macos
2. Open session on windows
3. See windows go out of sync

Expected behavior

Consistent behaviour

Actual behavior

Cannot send changes from windows

I am trying to use vue-monaco, and setup this firepad package with the same. I get the above with any operation that I perform...

My dependencies, atleast the relevant bits.

"dependencies": {
    "@hackerrank/firepad": "^0.2.0",
    "firebase": "^8.8.1",
    "monaco-editor": "0.20.0",
    "vue": "^2.6.11",
    "vue-monaco": "^1.2.2"
},
"devDependencies": {
    "monaco-editor-webpack-plugin": "1.9.1",
    "typescript": "~4.1.5",
    "vue-template-compiler": "^2.6.11"
},

Here is my component

<template>
  <div class="editor">
    <monaco-editor
      ref="editor"
      v-model="code"
      class="editor"
      language="javascript"
      @editorDidMount="initFirepad"
    />
  </div>
</template>

<script lang="ts">
import Vue from "vue";

import {
  fromMonaco,
  IFirepad,
  IFirepadConstructorOptions,
} from "@hackerrank/firepad";
import firebase from "firebase/app";
import "firebase/database";
import MonacoEditor from "vue-monaco";
import * as monaco from "monaco-editor";
import constants from "../constants"; // contains the api keys

export default Vue.extend({
  name: "Editor",
  components: {
    MonacoEditor,
  },
  data() {
    return {
      code: "",
      firebaseApp: null as unknown as firebase.app.App,
      firepadRef: null as unknown as firebase.database.Reference,
      firepad: null as unknown as IFirepad,
    };
  },
  computed: {,
    firepadUser(): Partial<IFirepadConstructorOptions> {
      let userId = Math.floor(Math.random() * 10);
      return {
        userId,
        userName: `user-${userId}`,
      };
    },
  },
  beforeMount() {
    let config = {
      apiKey: constants.API_KEY,
      databaseURL: constants.DB_URL,
      projectId: "codepair",
    };
    this.firebaseApp = firebase.initializeApp(config);
    this.firepadRef = this.firebaseApp.database().ref().child("test");
  },
  beforeDestroy() {
    try {
      this.firepad.dispose();
      (
        this.$refs.editor.getEditor() as monaco.editor.IStandaloneCodeEditor
      ).dispose();
    } catch (err) {
      console.log(err);
    }
  },
  methods: {
    initFirepad(editor: monaco.editor.IStandaloneCodeEditor) {
      this.firepad = fromMonaco(this.firepadRef, editor, this.firepadUser);
    },
  },
});
</script>

Error while importing {fromMonaco}

Description:

Got an error, while importing following line into a CRA app.

import {fromMonaco} from "@hackerrank/firepad";

Error:

./node_modules/@hackerrank/firepad/es/firebase-adapter.js
Module not found: Can't resolve 'firebase/app' in 'C:\Users\shubh\Documents\Experiments\react\cra-experiments\node_modules\@hackerrank\firepad\es'

Other Details:

I have installed "@hackerrank/firepad": "^0.1.1", as dependency through yarn.

What am I missing here?

Thanks in advance.

Adding package.json

{
  "name": "cra-mui-redux-template",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@hackerrank/firepad": "^0.1.1",
    "@material-ui/core": "^4.12.1",
    "@material-ui/icons": "^4.11.2",
    "@monaco-editor/react": "^4.2.1",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "clsx": "^1.1.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "redux": "^4.1.0",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Version info

Firebase:8.81

@hackerrank/firepad: 0.3.1

@monaco-editor/react: 4.3.1

Replication Steps:
None, i have tried to reproduce this while collaborating linux with linux, linux with mac, mac with mac, mac with windows, windows with windows and windows with linux.

This happens intermittently to our prod users and i haven't been able to reproduce this, i was previously using firepad and had the same issue so thought of using firepad-x hoping this would have solved the problem. This error is always in conjuction with 2-3 more errors as follows:-

The base length of the second operation has to be the target length of the first operation ,
Invalid Operation Encountered: sendOperation() called with invalid operation.

This was first reproduced by me but then i read one our your posts and set EOL preference to be same for all the users and haven't been able to reproduce it since but still this error pops up in our prod environment intermittently and breaks collaboration.

Can you guide me around what could be causing this problem and what could be a possible solution to fix this.

It would be nice to be able to set arbitrary properties for a user who connects to firepad. In our case, we would like to add a picture field for each user. I could see other people wanting different things, and so hence the desire for allowing setting these fields arbitrarily.

A suggested API would be modifying IFirepadConstructorOptions to have a new user: Record<string, string> field, which when set, and would be set into the this._userRef field, e.g.

Object.entries(user).forEach(([key, value]) => this._userRef.child(key).set(value)

Assuming allowing for a more breaking change, would perhaps be nice to fold in userId, userName, and userColor into the above user object:

interface IUser {
  id: string;
  name: string;
  color: string;
  [key: string]: string;
}

and then could simplify saving to this._userRef.set(user), though keeping in place existing validation for those required fields.