chat

index.html

@@ -288,5 +288,8 @@ <h3>Development settings</h3>
         </form>
       </dialog>
     </div>
+
+    <!----------- CHAT CONTAINER ----------->
+    <div class="chat-container"></div>
   </body>
 </html>

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');
+    }
+  }
 }

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 = {

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;
+}