interviewstreet / firepad-x Goto Github PK
View Code? Open in Web Editor NEWThis project forked from firebaseextended/firepad
Collaborative Text Editor Powered by Firebase
License: Other
This project forked from firebaseextended/firepad
Collaborative Text Editor Powered by Firebase
License: Other
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.
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?
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!
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.
Got an error, while importing following line into a CRA app.
import {fromMonaco} from "@hackerrank/firepad";
./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'
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"
]
}
}
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.
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.
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>
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.
Firebase: 8.9.1
Firepad: 0.2.0
Monaco: 0.20.0
Duplicate of FirebaseExtended#315
Consistent behaviour
Cannot send changes from windows
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.