Add share manager feature

locales.js

@@ -7,6 +7,12 @@ export const en_EN = {
   LBL_SHOW_HIDE: 'Show/Hide',
   LBL_OPEN_FILE: 'Open File',
   LBL_QUIT: 'Quit',
+
+  LBL_SHARING_MODAL_TITLE: 'Share',
+  LBL_SHARING_MODAL_EMAIL_INPUT_LABEL: 'Enter the email(s) of the individuals you want to share the text with (separate each email with ,)',
+  LBL_SHARING_MODAL_SUBMIT_ACTION: 'Share',
+  LBL_SHARING_MODAL_CANCEL_ACTION: 'Cancel',
+  LBL_SHARING_BUTTON: 'Share',
 };
 
 export const fa_FA = {
@@ -18,4 +24,10 @@ export const fa_FA = {
   LBL_SHOW_HIDE: 'نمایش/ پنهان',
   LBL_OPEN_FILE: 'باز کردن فایل',
   LBL_QUIT: 'خروج',
+
+  LBL_SHARING_MODAL_TITLE: 'اشتراک گذاری',
+  LBL_SHARING_MODAL_EMAIL_INPUT_LABEL: 'ایمیل/ایمیل‌هایی که می‌خواهید متن با آنان به اشتراک گذاشته شود را وارد کنید. (برای جدا سازی چندین ایمیل از , استفاده کنید.)',
+  LBL_SHARING_MODAL_SUBMIT_ACTION: 'اشتراک گذاری',
+  LBL_SHARING_MODAL_CANCEL_ACTION: 'انصراف',
+  LBL_SHARING_BUTTON: 'اشتراک گذاری',
 };

src/components/loaderForm/index.js → src/components/main/Collabora/Iframe/LoaderForm.js

@@ -5,7 +5,7 @@ export default function LoaderForm(props) {
 
   useEffect(() => {
     formElem.current.submit();
-  });
+  }, []);
 
   return (
     <div style={{display: 'none'}}>

src/components/main/Collabora/Iframe/index.js

@@ -0,0 +1,24 @@
+import React, {forwardRef, useEffect} from 'react';
+import collaboraIframeHandler from '../shared/collaboraIframeHandler';
+import LoaderForm from './LoaderForm';
+
+// eslint-disable-next-line react/display-name
+export default forwardRef(({wopiUrl, accessToken}, ref) => {
+  useEffect(() => {
+    collaboraIframeHandler.initialize(ref.current);
+  }, []);
+
+  return (
+    <div className="office_outerBox">
+      <div id="frameholder" className="office_frameholder">
+        <LoaderForm url={wopiUrl} token={accessToken} />
+        <iframe
+          ref={ref}
+          title="Collabora Online Viewer"
+          id="collabora-online-viewer"
+          name="collabora-online-viewer"
+        />
+      </div>
+    </div>
+  );
+});

src/components/main/Collabora/ShareAccessManager/Modal/index.js

@@ -0,0 +1,45 @@
+import React, {useState} from 'react';
+import useCore from '../../../../../hooks/core';
+
+import './style.scss';
+
+export default function Modal({onSubmit, onCancel}) {
+  const {_} = useCore();
+
+  function handleOnSubmit(e) {
+    e.preventDefault();
+
+    onSubmit(emails);
+  }
+
+  const [emails, setEmails] = useState('');
+
+  return (
+    <div className='ShareAccessManagerModal'>
+      <div className='ShareAccessManagerModal__content'>
+        <header className='ShareAccessManagerModal__header'>
+          <h2 className='ShareAccessManagerModal__header-title'>
+            {_('LBL_SHARING_MODAL_TITLE')}
+          </h2>
+        </header>
+        <form onSubmit={handleOnSubmit}>
+          <div className='ShareAccessManagerModal__form-field'>
+            <label htmlFor="emails">
+              {_('LBL_SHARING_MODAL_EMAIL_INPUT_LABEL')}
+            </label>
+            <input className='ShareAccessManagerModal__form-field-input' value={emails} onChange={(e)=>setEmails(e.target.value)} id="emails" />
+          </div>
+
+          <div className='ShareAccessManagerModal__form-actions'>
+            <button className='ShareAccessManagerModal__form-action ShareAccessManagerModal__form-action--primary' type="submit">
+              {_('LBL_SHARING_MODAL_SUBMIT_ACTION')}
+            </button>
+            <button className='ShareAccessManagerModal__form-action ShareAccessManagerModal__form-action--cancel' onClick={onCancel}>
+              {_('LBL_SHARING_MODAL_CANCEL_ACTION')}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

src/components/main/Collabora/ShareAccessManager/Modal/style.scss

@@ -0,0 +1,75 @@
+@import '../../../../../styles/variables';
+
+.ShareAccessManagerModal {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+
+  background-color: rgba(0,0,0,0.5);
+
+  &__content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    margin: auto;
+    width: 100%;
+    max-width: 400px;
+    background-color: white;
+
+    padding: 10px;
+    box-sizing: border-box;
+  }
+
+  &__header {
+    text-align: center;
+
+    margin-bottom: 15px;
+  }
+
+  &__form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    &-input {
+      padding: 5px;
+    }
+  }
+
+  &__form-actions {
+    display: flex;
+    gap: 10px;
+    margin-top: 15px;
+  }
+
+  &__form-action {
+    background-color: transparent;
+    border: none;
+    transition: all 300ms ease-in-out;
+    font-family: 'Vazir';
+    font-weight: 700;
+    border-radius: 40px;
+    cursor: pointer;
+    padding: 5px 20px;
+
+    &--primary {
+      background-color: $primary-color;
+      color: white;
+    }
+
+    &--cancel {
+      color: $danger-color;
+      background-color: white;
+    }
+
+    &:hover {
+      transform: scale(1.1);
+    }
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+}

src/components/main/Collabora/ShareAccessManager/index.js

@@ -0,0 +1,63 @@
+import React, {useEffect, useRef, useState} from 'react';
+import Modal from './Modal';
+
+import './style.scss';
+import share from './assets/share.png';
+import useCore from '../../../../hooks/core';
+import collaboraIframeHandler from '../shared/collaboraIframeHandler';
+
+
+function getPostMessageContent(sharingValue) {
+  const SHARE_PREFIX = 'SHARE_PREF_';
+  const UNO_COMMAND = '.uno:InsertBookmark';
+
+  return {'MessageId': 'Send_UNO_Command',
+    'Values': {
+      'Command': UNO_COMMAND,
+      'Args': {
+        'Bookmark': {
+          'type': 'string',
+          'value': `${SHARE_PREFIX}${sharingValue}`
+        },
+      }
+    }
+  };
+}
+
+export default function ShareFileManager({children}) {
+  const {_} = useCore();
+  const iframeRef = useRef(null);
+  const [shouldShowSharingModal, setShouldShowSharingModal] = useState(false);
+
+  useEffect(() => {
+    collaboraIframeHandler.onReady(()=>{
+      collaboraIframeHandler.postMessage(iframeRef.current, {'MessageId': 'Insert_Button',
+        'Values': {'id': 'startSharing', 'imgurl': share, 'hint': '', 'mobile': false, 'label': _('LBL_SHARING_BUTTON'), 'insertBefore': 'Save'}
+      });
+    });
+
+    collaboraIframeHandler.onMessage((msg)=>{
+      if(msg.MessageId === 'Clicked_Button' && msg.Values?.Id === 'startSharing') {
+        setShouldShowSharingModal(true);
+      }
+    });
+  }, []);
+
+  function handleModalCancel() {
+    setShouldShowSharingModal(false);
+  }
+
+  function handleModalSubmit(emails) {
+    setShouldShowSharingModal(false);
+
+    const postMessageContent = getPostMessageContent(`[${emails}]`);
+    collaboraIframeHandler.postMessage(iframeRef.current, postMessageContent);
+  }
+
+  const modalContent = shouldShowSharingModal ? <Modal onSubmit={handleModalSubmit} onCancel={handleModalCancel} /> : null;
+
+  return <div className="ShareAccessManager">
+    {modalContent}
+    {children(iframeRef)}
+  </div>;
+}

src/components/main/Collabora/ShareAccessManager/style.scss

@@ -0,0 +1,4 @@
+.ShareAccessManager {
+  height: 100%;
+  position: relative;
+}

src/components/main/Collabora/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import Iframe from './Iframe';
+import ShareFileManager from './ShareAccessManager';
+
+export default function Collabora({accessToken, wopiUrl}) {
+  return (
+    <ShareFileManager>
+      {(ref) => <Iframe ref={ref} accessToken={accessToken} wopiUrl={wopiUrl} />}
+    </ShareFileManager>
+  );
+}

src/components/main/Collabora/shared/collaboraIframeHandler.js

@@ -0,0 +1,50 @@
+const onReadyCBs = [];
+const onMessageCbs = [];
+
+const collaboraIframeHandler = {
+  isReady: false,
+  initialize(iframe) {
+    window.addEventListener('message', (event)=>{
+      try {
+        const msg = JSON.parse(event.data);
+
+        if (!msg) {
+          return;
+        }
+
+        if (msg.MessageId === 'App_LoadingStatus' && msg.Values?.Status === 'Document_Loaded') {
+          this.postMessage(iframe, {'MessageId': 'Host_PostmessageReady'});
+
+          this.isReady = true;
+          onReadyCBs.forEach(cb => cb());
+          return;
+        }
+
+        onMessageCbs.forEach(cb => cb(msg));
+      } catch (e) {
+        // Not a Collabora message
+        console.error(e.message);
+      }
+    }, false);
+  },
+  onReady(cb) {
+    if(!this.isReady) {
+      onReadyCBs.push(cb);
+      return;
+    }
+
+    cb();
+  },
+  onMessage(cb) {
+    onMessageCbs.push(cb);
+  },
+  postMessage(iframe, data) {
+    if(!iframe) {
+      return;
+    }
+    console.log(data);
+    iframe.contentWindow.postMessage(JSON.stringify(data), '*');
+  }
+};
+
+export default collaboraIframeHandler;

src/components/main/index.js

@@ -1,11 +1,11 @@
 import React, {useEffect, useState} from 'react';
-import LoaderForm from '../loaderForm';
 import axios from 'axios';
 import useCore from '../../hooks/core';
 import {useCustomDialog} from '../../hooks/customDialog';
 import './index.scss';
 import CreateFile from '../createFile';
 import BrowseFile from '../browseFile';
+import Collabora from './Collabora';
 
 export default function Main(props) {
   const [filePath, setFilePath] = useState(props.data ? props.data.path : null);
@@ -20,8 +20,7 @@ export default function Main(props) {
   const [urlSrc, setUrlSrc] = useState(null);
   const [wopiUrl, setWopiUrl] = useState('');
   const [accessToken, setAccessToken] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const iframeRef = React.useRef();
+  const [isLoaded, setIsLoaded] = useState(false);
 
   let tray = null;
 
@@ -135,27 +134,15 @@ export default function Main(props) {
         const locationOrigin = window.location.origin;
         const wopiSrc = `${locationOrigin}/wopi/files/${fileId}`;
         setWopiUrl(`${urlSrc}WOPISrc=${wopiSrc}`);
-        setLoading(true);
+        setIsLoaded(true);
       })
       .catch((error) => {
         console.log(error);
       });
   }
 
-  if (loading) {
-    return (
-      <div className="office_outerBox">
-        <div id="frameholder" className="office_frameholder">
-          <LoaderForm url={wopiUrl} token={accessToken} />
-          <iframe
-            ref={iframeRef}
-            title="Collabora Online Viewer"
-            id="collabora-online-viewer"
-            name="collabora-online-viewer"
-          />
-        </div>
-      </div>
-    );
+  if (isLoaded) {
+    return <Collabora accessToken={accessToken} wopiUrl={wopiUrl} />;
   }
 
   return (

src/index.js

@@ -2,6 +2,8 @@ import React from 'react';
 import {CoreProvider} from './hooks/core';
 import Main from './components/main';
 
+import './styles/fonts.scss';
+
 export default function App(props) {
   return (
     <CoreProvider core={props.core} proc={props.proc} win={props.win}>