connect/disconnect command

apps/writer/src/panes/editor/EditorPane.tsx

@@ -13,22 +13,26 @@
  *
  */
 
-import React, { useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+
+import { PlugConnectedRegular, PlugDisconnectedRegular } from "@fluentui/react-icons";
 
 import { jsonRpcBrowserRequestTransport } from 'core-browser';
 
-import { Editor } from 'editor-ui';
+import { CommandManagerContext, Editor, EditorUICommandId, t } from 'editor-ui';
 
 import { EditorOperations, ExtensionFn } from 'editor';
 
-import { collabExtension } from 'editor-collab';
+import { CollabConnection, collabExtension } from 'editor-collab';
 
 import { editorDisplay } from './context/display';
 import { editorUIContext } from './context/ui-context';
 
 import { kWriterJsonRpcPath } from '../../constants';
 
 import styles from './EditorPane.module.scss';
+import { WorkbenchCommandId } from '../../workbench/commands';
+
 
 export interface EditorPaneProps {
   editorId: string;
@@ -37,10 +41,44 @@ export interface EditorPaneProps {
 
 export const EditorPane : React.FC<EditorPaneProps> = props => {
 
+  // manage connection command
+  const [connected, setConnected] = useState(false);
+  const [, cmDispatch] = useContext(CommandManagerContext);
+  const collabListners = useRef(new Array<(connected: boolean) => void>());
+  const collabConnection = useRef<CollabConnection>({
+    onChanged(fn) {
+      collabListners.current.push(fn);
+    },
+  });
+  if (props.collab) {
+    useEffect(() => {
+      cmDispatch({ type: "ADD_COMMANDS", payload: [
+        {
+          id: WorkbenchCommandId.Connect,
+          menuText: connected ? "Disconnect" : "Connect",
+          icon: connected ? <PlugDisconnectedRegular/> : <PlugConnectedRegular />,
+          group: t('commands:group_utilities'),
+          keymap: [],
+          isEnabled: () => true,
+          isActive: () => connected,
+          execute: () => {
+            const isConnected = !connected;
+            setConnected(isConnected);
+            collabListners.current.forEach(listener => listener(isConnected));
+            cmDispatch({ type: "EXEC_COMMAND", payload: EditorUICommandId.ActivateEditor });
+          },
+        },
+      ]})
+    }, [connected]);
+  }
+
   // one time init of editor frame props
   const [request] = useState(() => jsonRpcBrowserRequestTransport(kWriterJsonRpcPath));
   const [uiContext] = useState(() => editorUIContext());
-  const [extensions] = useState<Array<ExtensionFn>>(() => props.collab ? [collabExtension()] : [])
+  const [extensions] = useState<Array<ExtensionFn>>(() => props.collab 
+    ? [collabExtension(collabConnection.current)] 
+    : []
+  )
 
   // editor init handler
   const onEditorInit = async (editor: EditorOperations) => {

apps/writer/src/workbench/WorkbenchToolbar.tsx

@@ -83,6 +83,8 @@ const EditorToolbar: React.FC = () => {
         </WithCommand>
         <CommandToolbarButton command={CommandId.Link} />
         <CommandToolbarButton command={CommandId.Image} />
+        <ToolbarDivider />
+        <CommandToolbarButton command={CommandId.Connect} />
       </Toolbar>
     </div>
 

apps/writer/src/workbench/commands.ts

@@ -19,5 +19,6 @@ export enum WorkbenchCommandId {
   Copy = 'A2F6CCE0-CF01-4711-BD97-17110694A41A',
   Paste = '7E084FF6-83C6-47E3-B98F-928D17571B8A',
   Prefs = '8819A925-FDAC-48D1-9FC9-EEBA204435A3',
+  Connect = '42D78DC4-066E-4C70-83FA-450790C369FD'
 }
 

packages/editor-collab/src/index.ts

@@ -21,9 +21,20 @@ import { ExtensionFn} from "editor";
 
 import { AutomergeController, automergeController } from "./automerge";
 
-export function collabExtension()
+
+export interface CollabConnection {
+  onChanged(fn: (connected: boolean) => void) : void;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function collabExtension(connection: CollabConnection)
 : ExtensionFn {
 
+  connection.onChanged((connected: boolean) => {
+    console.log(connected ? "connected" : "disconnected");
+  })
+
+
   return () => {
 
     let automerge: AutomergeController | undefined;