-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (102 loc) · 3.99 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<link rel=stylesheet href=fireprose.css>
<div style="padding: 30px 30px 30px 30px; background: white;">
<label>API key: </label>
<input id="apiKey">
<br>
<label>Database URL: </label>
<input id="databaseURL">
<br>
<label>Note name: </label>
<input id="noteName">
<br>
<button id="connectdb">connect</button>
<br>
<br>
<br>
<div id=editor style="width:500px; height:500px;display:none;"></div>
</div>
<script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script>
<script src="bundle_collab.js"></script>
<script> // https://github.com/kofifus/New.js
if(Function.prototype.New===undefined){Function.prototype.New=function(...a){function c(t,f){Object.getOwnPropertyNames(f).forEach(k=>{if(!t.hasOwnProperty(k))Object.defineProperty(t,k,Object.getOwnPropertyDescriptor(f,k))})}
let h={};Object.setPrototypeOf(h,this.prototype);c(h,this.call(h,...a));if(h.composed){if(!Array.isArray(h.composed))h.composed=[h.composed];h.composed.forEach(p=>c(h,p));delete h.composed}
return h}}
</script>
<script src="fireprose.js"></script>
<script>
"use strict";
let apiKeyInput = document.getElementById('apiKey'),
databaseURLInput = document.getElementById('databaseURL'),
noteNameInput = document.getElementById('noteName'),
connectBtn = document.getElementById('connectdb'),
editor = document.getElementById('editor');
apiKeyInput.value = 'AIzaSyCPLAPHxYZK3Ga8HCwSjEHQEbCs_ - WsW5Q';
databaseURLInput.value = 'https://project-8083319387023885522.firebaseio.com';
noteNameInput.value = 'mynote';
connectBtn.addEventListener("click", () => {
let apiKey = apiKeyInput.value,
databaseURL = databaseURLInput.value,
noteName = noteNameInput.value;
if (apiKey === '' || databaseURL === '' || noteName === '') {
alert('signin failed');
return;
}
let fbApp = window.firebase.initializeApp({
apiKey,
databaseURL
}, 'appName' + new Date().getTime());
return fbApp.auth().signInAnonymously().then(user => {
apiKeyInput.disabled = databaseURLInput.disabled = noteNameInput.disabled = connectBtn.disabled = true;
let baseref = fbApp.database().ref('prosemirror/' + noteName);
setTimeout(() => start(baseref), 0);
}, (err) => {
alert('signin failed');
});
});
function start(baseref) {
const Schema = window.pmCollabReqs.Schema;
const baseSchema = window.pmCollabReqs.baseSchema;
const addListNodes = window.pmCollabReqs.addListNodes;
const exampleSetup = window.pmCollabReqs.exampleSetup;
const buildMenuItems = window.pmCollabReqs.buildMenuItems;
const MenuBarEditorView = window.pmCollabReqs.MenuBarEditorView;
const EditorState = window.pmCollabReqs.EditorState;
const history = window.pmCollabReqs.history;
const DOMParser = window.pmCollabReqs.DOMParser;
const collab = window.pmCollabReqs.collab;
const Step = window.pmCollabReqs.Step;
const sendableSteps = window.pmCollabReqs.sendableSteps;
const receiveTransaction=window.pmCollabReqs.receiveTransaction;
const schema = new Schema({
nodes: addListNodes(baseSchema.nodeSpec, "paragraph block*", "block"),
marks: baseSchema.markSpec
})
let fireProse;
let editState = EditorState.create({
doc: DOMParser.fromSchema(schema).parse(''),
plugins: exampleSetup({
schema, history: false
}).concat([
history({
preserveItems: true
}),
collab({
version: 0
})
])
})
let view = new MenuBarEditorView(document.querySelector("#editor"), {
state: editState,
dispatchTransaction: transaction => {
view.updateState(view.editor.state.apply(transaction));
fireProse.dispatchTransaction(transaction);
},
menuContent: buildMenuItems(schema).fullMenu
})
fireProse = FireProse.New(Step, sendableSteps, receiveTransaction, view, () => {
return view.editor.state;
}, baseref, newState => {
editor.style.display = 'block';
});
}
</script>