diff --git a/index.html b/index.html index 9356721..519eead 100644 --- a/index.html +++ b/index.html @@ -288,5 +288,8 @@

Development settings

+ + +
diff --git a/src/editor.js b/src/editor.js index ce1c812..49abeba 100644 --- a/src/editor.js +++ b/src/editor.js @@ -44,7 +44,6 @@ export class PastaMirror { return; } - const stopKeys = ['Ctrl-.', 'Alt-.']; const state = EditorState.create({ doc: doc.content, extensions: [ @@ -58,7 +57,8 @@ export class PastaMirror { ...this.initialSettings, Prec.highest( keymap.of([ - ...stopKeys.map((key) => ({ + // stop pane + ...['Ctrl-.', 'Alt-.'].map((key) => ({ key, run: () => { if (doc.target === 'strudel') { @@ -74,6 +74,33 @@ export class PastaMirror { return true; }, })), + // chat current line.. + ...['Shift-Enter'].map((key) => ({ + key, + run: (view) => { + const { head } = view.state.selection.main; + const line = view.state.doc.lineAt(head); + let message = view.state.doc.toString().split('\n')[line.number - 1]; + if (message.startsWith('//')) { + message = message.slice(2); + } + message = message.trim(); + const insert = '// '; + doc.session._pubSubClient.publish(`session:pastagang:chat`, { + docId: doc.id, + message, + user: doc.session.user, + from: line.from + insert.length, + }); + // clear line + const transaction = view.state.update({ + changes: { from: line.from, to: line.to, insert }, + selection: { anchor: line.from + insert.length }, + }); + view.dispatch(transaction); + return true; + }, + })), // overrides Enter to disable auto indenting.. // feel free to remove this again if it annoys you // this is GREAT @@ -270,4 +297,27 @@ export class PastaMirror { } } } + + chat(message) { + const view = this.editorViews.get(message.docId); + const line = view.state.doc.lineAt(message.from); + console.log('line.from', line.from); + const pos = view.coordsAtPos(line.from); + const chatContainer = document.querySelector('.chat-container'); + if (pos) { + console.log('chat', message.message, pos); + const messageContainer = document.createElement('div'); + messageContainer.innerText = message.message; + const offsetX = 30; // not sure why + const offsetY = 4; // not sure why + messageContainer.style = `position:fixed;top:${pos.top + offsetY}px;left:${pos.left + offsetX}px`; + messageContainer.classList.add('rising-animation'); + chatContainer.appendChild(messageContainer); + setTimeout(() => { + messageContainer.remove(); + }, 3000); + } else { + console.warn('could not get line position'); + } + } } diff --git a/src/main.js b/src/main.js index c041967..f43d086 100644 --- a/src/main.js +++ b/src/main.js @@ -45,12 +45,17 @@ session.on('change', (documents) => { }); }); +session.on('pubsub:open', () => { + clearGlobalError(); + // session._pubSubClient seems to take a while to be defined.. + // this might or might not be a good place to make sure its ready + // the event might call multiple times so... do i need to unsub??? + session._pubSubClient.subscribe(`session:pastagang:chat`, (args) => pastamirror.chat(args.message)); +}); session.on('pubsub:close', () => { // untested setError('Disconnected from Server...'); -}); -session.on('pubsub:open', () => { - clearGlobalError(); + // unsub session:pastagang:chat here? }); export const Frame = { diff --git a/src/style.css b/src/style.css index 1b18b23..2c04fac 100644 --- a/src/style.css +++ b/src/style.css @@ -556,3 +556,35 @@ dialog { scrollbar-width: thin; scrollbar-color: #78716c white; } + +.chat-container { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + pointer-events: none; +} + +.message-container { + position: fixed; // top + left is set from code + transform: translateX(-50%); + width: 100px; + height: 100px; + background-color: red; + opacity: 1; +} + +@keyframes rise-and-fade { + 0% { + opacity: 1; + } + 100% { + top: -20px; + opacity: 0; + } +} + +.rising-animation { + animation: rise-and-fade 3s ease-out forwards; +} \ No newline at end of file