feat: add share functionality (#618)

Co-authored-by: Khuda Dad Nomani <[email protected]>%0ACo-authored-by: samz <[email protected]>

apps/studio/src/components/Editor/EditorSidebar.tsx

@@ -3,11 +3,14 @@ import React from 'react';
 import { EditorDropdown } from './EditorDropdown';
 
 import { useFilesState } from '../../state';
+import { ShareButton } from './ShareButton';
 
 interface EditorSidebarProps {}
 
-export const EditorSidebar: React.FunctionComponent<EditorSidebarProps> = () => {
-  const { source, from } = useFilesState(state => state.files['asyncapi']);
+export const EditorSidebar: React.FunctionComponent<
+  EditorSidebarProps
+> = () => {
+  const { source, from } = useFilesState((state) => state.files['asyncapi']);
 
   let documentFromText = '';
   if (from === 'storage') {
@@ -23,7 +26,10 @@ export const EditorSidebar: React.FunctionComponent<EditorSidebarProps> = () =>
       className="flex flex-row items justify-between bg-gray-800 border-b border-gray-700 text-sm"
       style={{ height: '30px', lineHeight: '30px' }}
     >
-      <div className="ml-2 text-gray-500 text-xs italic" style={{ height: '30px', lineHeight: '30px' }}>
+      <div
+        className="ml-2 text-gray-500 text-xs italic"
+        style={{ height: '30px', lineHeight: '30px' }}
+      >
         {documentFromText}
       </div>
       <div
@@ -32,6 +38,9 @@ export const EditorSidebar: React.FunctionComponent<EditorSidebarProps> = () =>
       >
         <div>
           <ul className="flex">
+            <li>
+              <ShareButton />
+            </li>
             <li>
               <EditorDropdown />
             </li>

apps/studio/src/components/Editor/ShareButton.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { FaShareAlt } from 'react-icons/fa';
+import { useServices } from '../../services';
+import { toast } from 'react-hot-toast';
+import { Tooltip } from '../common';
+
+interface ShareButtonProps {}
+
+export const ShareButton: React.FunctionComponent<ShareButtonProps> = () => {
+  const { editorSvc } = useServices();
+
+  const handleShare = () => {
+    toast.promise(
+      (async function () {
+        const base64 = await editorSvc.exportAsBase64();
+        const url = `${window.location.origin}/?base64=${encodeURIComponent(
+          base64
+        )}`;
+        await navigator.clipboard.writeText(url);
+      }()),
+      {
+        loading: 'Copying URL to clipboard...',
+        success: 'URL copied to clipboard!',
+        error: 'Failed to copy URL to clipboard.',
+      }
+    );
+  };
+
+  return (
+    <Tooltip content={'Share link'} placement="top" hideOnClick={true}>
+      <button className="bg-inherit" onClick={handleShare}>
+        <FaShareAlt className="text-gray-500 hover:text-white" />
+      </button>
+    </Tooltip>
+  );
+};

apps/studio/src/services/editor.service.tsx

@@ -166,6 +166,16 @@ export class EditorService extends AbstractService {
     }
   }
 
+  async exportAsBase64() {
+    try {
+      const file = filesState.getState().files['asyncapi'];
+      return this.svcs.formatSvc.encodeBase64(file.content);
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
   async convertToYaml() {
     try {
       const yamlContent = this.svcs.formatSvc.convertToYaml(this.value);

apps/studio/src/services/parser.service.ts

@@ -10,15 +10,17 @@ import { filesState, documentsState, settingsState } from '../state';
 
 import type { Diagnostic, ParseOptions } from '@asyncapi/parser/cjs';
 import type { DocumentDiagnostics } from '../state/documents.state';
+import { SchemaParser } from '@asyncapi/parser';
 
 export class ParserService extends AbstractService {
   private parser!: Parser;
 
   override async onInit() {
     this.parser = new Parser({
       schemaParsers: [
-        OpenAPISchemaParser() as any,
-        AvroSchemaParser() as any,
+        // Temporary fix for TS error
+        OpenAPISchemaParser() as SchemaParser<unknown, unknown>,
+        AvroSchemaParser() as SchemaParser<unknown, unknown>,
       ],
       __unstable: {
         resolver: {