add colab service

Author: jogibear9988

index.html

@@ -28,6 +28,7 @@
         "min_@node-projects/node-html-parser-esm": "./node_modules/@node-projects/node-html-parser-esm/dist/index-min.js",
         "min_@node-projects/pickr-webcomponent": "./node_modules/@node-projects/pickr-webcomponent/lib/index-min.js",
         "min_@node-projects/layout2vector": "./node_modules/@node-projects/layout2vector/dist/index-min.js",
+        "min_@node-projects/web-component-designer-collaboration-service": "./node_modules/@node-projects/web-component-designer-collaboration-service/dist/index-min.js",
         "min_dock-spawn-ts": "./node_modules/dock-spawn-ts/lib/js/index-webcomponent-min.js",
 
         "monaco-editor": "./node_modules/monaco-editor/esm/vs/editor/editor.main.js",
@@ -39,6 +40,7 @@
         "@node-projects/node-html-parser-esm": "./node_modules/@node-projects/node-html-parser-esm/dist/index.js",
         "@node-projects/pickr-webcomponent": "./node_modules/@node-projects/pickr-webcomponent/lib/index.js",
         "@node-projects/layout2vector": "./node_modules/@node-projects/layout2vector/dist/index.js",
+        "@node-projects/web-component-designer-collaboration-service": "./node_modules/@node-projects/web-component-designer-collaboration-service/dist/index.js",
         "dock-spawn-ts": "./node_modules/dock-spawn-ts/lib/js/index-webcomponent.js",
 
         "@mlc-ai/web-llm": "./node_modules/@mlc-ai/web-llm/lib/index.js",
@@ -225,6 +227,7 @@
         src="./node_modules/@node-projects/web-component-designer/assets/icons/redo.svg"></button>
     <button style="margin-left: 10px;" data-command="screenshot"><img
         src="./node_modules/@node-projects/web-component-designer/assets/icons/screenshot.svg"></button>
+    <button style="margin-left: 10px; color: inherit; font-family: monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;" data-command="collaboration" title="collaboration">collab</button>
     <button style="margin-left: 10px;" data-command="github"><img
         src="./node_modules/@node-projects/web-component-designer/assets/icons/github.svg"></button>
   </nav>

package-lock.json

@@ -7,7 +7,7 @@
     "tsc": "tsc",
     "start": "web-dev-server --open",
     "build": "tsc",
-    "linkAll": "npm link @node-projects/web-component-designer @node-projects/web-component-designer-codeview-monaco @node-projects/web-component-designer-htmlparserservice-nodehtmlparser @node-projects/web-component-designer-stylesheetservice-css-parser @node-projects/web-component-designer-widgets-wunderbaum",
+    "linkAll": "npm link @node-projects/web-component-designer @node-projects/web-component-designer-codeview-monaco @node-projects/web-component-designer-htmlparserservice-nodehtmlparser @node-projects/web-component-designer-stylesheetservice-css-parser @node-projects/web-component-designer-widgets-wunderbaum @node-projects/web-component-designer-collaboration-service",
     "bundleMonaco": "node _patchAndMinifyMonaco.js",
     "postinstall": "npm run bundleMonaco"
   },
@@ -34,8 +34,9 @@
     "@node-projects/lean-he-esm": "^3.4.1",
     "@node-projects/node-html-parser-esm": "^6.4.1",
     "@node-projects/pickr-webcomponent": "^1.1.0",
-    "@node-projects/web-component-designer": "^0.1.350",
+    "@node-projects/web-component-designer": "^0.1.351",
     "@node-projects/web-component-designer-codeview-monaco": "^0.1.33",
+    "@node-projects/web-component-designer-collaboration-service": "^0.1.3",
     "@node-projects/web-component-designer-htmlparserservice-nodehtmlparser": "^0.1.12",
     "@node-projects/web-component-designer-stylesheetservice-css-parser": "^0.1.4",
     "@node-projects/web-component-designer-widgets-wunderbaum": "^0.1.44",

package.json

@@ -14,6 +14,10 @@ export class CommandHandling {
     this.init(serviceContainer);
   }
 
+  private supportsMouseHold(commandName: string) {
+    return commandName === 'undo' || commandName === 'redo';
+  }
+
   handleCommandButtonClick(e) {
     let button = e.currentTarget;
     let commandName = button.dataset['command'];
@@ -23,6 +27,8 @@ export class CommandHandling {
       this.appShell.newDocument(false);
     else if (commandName === 'screenshot')
       this.appShell.showScreenshotContextMenu(e);
+    else if (commandName === 'collaboration')
+      this.appShell.showCollaborationContextMenu(e);
     else if (commandName === 'newFixedWidth')
       this.appShell.newDocument(true);
     else if (commandName === 'github')
@@ -60,17 +66,22 @@ export class CommandHandling {
     buttons.forEach(b => {
       if (b instanceof HTMLButtonElement) {
         b.onclick = (e) => this.handleCommandButtonClick(e);
-        let mouseDownTimer = null;
-        b.onmousedown = (e) => {
-          mouseDownTimer = setTimeout(() => {
-            this.handleCommandButtonMouseHold(b, e);
-          }, 300)
-        }
-        b.onmouseup = (e) => {
-          if (mouseDownTimer) {
-            clearTimeout(mouseDownTimer);
-            mouseDownTimer = null;
+        if (this.supportsMouseHold(b.dataset['command'])) {
+          let mouseDownTimer = null;
+          b.onmousedown = (e) => {
+            mouseDownTimer = setTimeout(() => {
+              this.handleCommandButtonMouseHold(b, e);
+            }, 300)
           }
+          b.onmouseup = (e) => {
+            if (mouseDownTimer) {
+              clearTimeout(mouseDownTimer);
+              mouseDownTimer = null;
+            }
+          }
+        } else {
+          b.onmousedown = null;
+          b.onmouseup = null;
         }
       } else {
         b.onchange = (e) => this.handleInputValueChanged(e);
@@ -137,6 +148,8 @@ export class CommandHandling {
         b.disabled = false;
       else if (command === 'newFixedWidth')
         b.disabled = false;
+      else if (command === 'collaboration')
+        b.disabled = !this.dockManager.activeDocument;
       else if (command === 'github')
         b.disabled = false;
       else