misc: remove glip-widgets packages and use local components

getWebpackBaseConfig.js

@@ -29,7 +29,7 @@ module.exports = function getBaseConfig({ themeFolder = null, styleLoader = 'sty
       redirect: './src/redirect.js',
     },
     resolve: {
-      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
       fallback: {
         crypto: require.resolve('crypto-browserify'),
         stream: require.resolve('stream-browserify'),

package.json

@@ -75,13 +75,14 @@
   "dependencies": {
     "@babel/polyfill": "^7.10.4",
     "@babel/runtime": "^7.3.4",
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
     "@rc-ex/core": "^1.2.1",
     "@rc-ex/debug": "^1.0.10",
     "@rc-ex/rcsdk": "^1.0.10",
     "@rc-ex/ws": "^1.0.10",
     "@ringcentral-integration/commons": "^0.14.0",
     "@ringcentral-integration/core": "^0.14.0",
-    "@ringcentral-integration/glip-widgets": "^0.2.0",
     "@ringcentral-integration/i18n": "^2.2.0",
     "@ringcentral-integration/locale-loader": "^2.2.1",
     "@ringcentral-integration/phone-number": "^1.1.0",
@@ -97,6 +98,7 @@
     "classnames": "^2.2.5",
     "core-js": "^3.9.1",
     "dayjs": "^1.11.7",
+    "emoji-mart": "^5.6.0",
     "format-message": "^6.2.3",
     "isomorphic-fetch": "^3.0.0",
     "isomorphic-ws": "4.0.1",
@@ -105,12 +107,15 @@
     "normalize.css": "^8.0.1",
     "prop-types": "^15.5.8",
     "qs": "^6.5.1",
+    "quill-mention": "^3.1.0",
     "raven-js": "^3.27.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^5.1.1",
     "react-router": "^3.2.6",
     "react-router-redux": "^4.0.8",
+    "react-markdown": "^8.0.7",
+    "react-quill": "^2.0.0",
     "redux": "^4.2.0",
     "ringcentral-client": "^1.0.0-beta.2",
     "setimmediate": "^1.0.5",

src/components/BackHeaderView/index.tsx

@@ -22,6 +22,9 @@ const Title = styled(RcTypography)`
   display: block;
   padding: 0 10px;
   line-height: 40px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 export function BackHeaderView({
@@ -35,7 +38,7 @@ export function BackHeaderView({
   hideHeader = false,
   hideBackButton = false,
 }: {
-  onBack: () => void;
+  onBack?: () => void;
   children?: ReactNode;
   backButtonLabel?: string;
   title?: string;
@@ -52,7 +55,7 @@ export function BackHeaderView({
           <BackHeader onBack={onBack} label={backButtonLabel} hideBackButton={hideBackButton}>
             {
               title && (
-                <Title variant="body1" color="neutral.f06" data-sign="headerTitle">
+                <Title variant="body1" color="neutral.f06" data-sign="headerTitle" title={title}>
                   {title}
                 </Title>
               )

src/components/GlipChatPanel/GlipChatForm.tsx

@@ -0,0 +1,163 @@
+import React, { useRef, useState } from 'react';
+import { styled, palette2, RcIconButton, RcPopover } from '@ringcentral/juno';
+import { Attachment, Emoji, SendFilled } from '@ringcentral/juno-icon';
+import emojiData from '@emoji-mart/data'
+import Picker from '@emoji-mart/react'
+import { GlipTextInput } from './GlipTextInput';
+
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Tools = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+`;
+
+const StyledInput = styled(GlipTextInput)`
+  flex: 1;
+`;
+
+const InputArea = styled.div`
+  padding-right: 50px;
+  padding-left: 10px;
+  padding-bottom: 10px;
+  padding-top: 10px;
+  box-sizing: border-box;
+  position: relative;
+  border: 1px solid ${palette2('neutral', 'l02')};
+  border-radius: 5px;
+  margin: 0 10px 10px 10px;
+  margin-top: 0;
+`;
+
+const SendButton = styled(RcIconButton)`
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+`;
+
+export function GlipChatForm({
+  className,
+  placeholder,
+  textValue = '',
+  onTextChange,
+  onSubmit,
+  onUploadFile,
+  groupId,
+  members = [],
+  disabled,
+}) {
+  const fileInputRef = useRef(null);
+  const [sending, setSending] = useState(false);
+  const emojiButtonRef = useRef(null);
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+  const inputRef = useRef(null);
+
+  return (
+    <Root className={className}>
+      <Tools>
+        <RcIconButton
+          symbol={Emoji}
+          onClick={() => {
+            setShowEmojiPicker(true);
+          }}
+          disabled={disabled}
+          innerRef={emojiButtonRef}
+        />
+        <RcIconButton
+          symbol={Attachment}
+          onClick={() => {
+            fileInputRef.current.click();
+          }}
+          disabled={disabled}
+        />
+        <input
+          type="file"
+          onChange={(e) => {
+            const file = e.target.files[0];
+            if (!file) {
+              return;
+            }
+            setSending(true);
+            const reader = new FileReader();
+            reader.onloadend = async (evt) => {
+              if (evt.target.readyState === FileReader.DONE) {
+                await onUploadFile(file.name, evt.target.result);
+              }
+              setSending(false);
+            };
+            reader.readAsArrayBuffer(file);
+          }}
+          style={{ display: 'none' }}
+          ref={fileInputRef}
+        />
+        <RcPopover
+          open={showEmojiPicker}
+          anchorEl={emojiButtonRef.current}
+          anchorOrigin={{
+            horizontal: 'center',
+            vertical: 'top'
+          }}
+          onClose={() => {
+            setShowEmojiPicker(false);
+          }}
+          transformOrigin={{
+            horizontal: 'center',
+            vertical: 'top'
+          }}
+        >
+          {
+            showEmojiPicker ? (
+              <Picker
+                data={emojiData}
+                onEmojiSelect={(emoji) => {
+                  setShowEmojiPicker(false);
+                  if (inputRef.current) {
+                    const range = inputRef.current.getSelection();
+                    const position = range ? range.index : 0;
+                    inputRef.current.insertText(
+                      position,
+                      position === 0 ? `${emoji.shortcodes} ` : ` ${emoji.shortcodes} `,
+                    );
+                  }
+                }}
+              />
+            ) : null
+          }
+        </RcPopover>
+      </Tools>
+      <InputArea>
+        <StyledInput
+          placeholder={placeholder}
+          value={textValue}
+          onChange={(text, mentions) => {
+            onTextChange(text, mentions.map((mention) => {
+              const member = members.find((m) => m.email === mention.id);
+              return {
+                mention: mention.mention,
+                matcherId: member && member.id,
+              };
+            }));
+          }}
+          suggestions={members}
+          disabled={disabled}
+          editorRef={inputRef}
+        />
+        <SendButton
+          onClick={async () => {
+            setSending(true)
+            await onSubmit();
+            setSending(false);
+          }}
+          symbol={SendFilled}
+          disabled={!textValue}
+          color="action.primary"
+          loading={sending}
+        />
+      </InputArea>
+    </Root>
+  )
+}

src/components/GlipChatPanel/GlipMarkdown.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { styled, palette2 } from '@ringcentral/juno';
+import { replaceEmojiText, replaceAtTeamText } from './formatPost';
+
+function ImageRender(props: {
+  src: string;
+  alt?: string;
+  atRender?: any;
+}) {
+  if (props.alt === ':Person' || props.alt === ':Team' ||  props.alt === ':All') {
+    if (typeof props.atRender === 'function') {
+      const AtRender = props.atRender;
+      return <AtRender id={props.src} type={props.alt.replace(':', '')} />;
+    }
+    return <a href={`#${props.src}`}>@{props.src}</a>;
+  }
+  return <img src={props.src} alt={props.alt} />;
+}
+
+function LinkRender(props: {
+  href: string;
+  children: ReactNode,
+  title?: string;
+}) {
+  return (
+    <a
+      target="_blank"
+      rel="noopener noreferrer"
+      href={props.href}
+      title={props.title}
+    >
+      {props.children}
+    </a>
+  );
+}
+
+const StyleText = styled.p`
+  margin: 0;
+  user-select: text;
+`;
+
+function TextRender({
+  children,
+}: {
+  children: string[];
+}) {
+  const lines = [];
+  children.forEach((child) => {
+    if (!child || !child.indexOf) {
+      lines.push(child);
+      return;
+    }
+    if (child.indexOf('\n') === 0) {
+      lines.push(child);
+      return;
+    }
+    child.split('\n').forEach((line) => {
+      if (line) {
+        lines.push(line);
+        lines.push(<br />);
+      }
+    }, []);
+  });
+  return (
+    <StyleText>
+      {
+        lines.map((line, index) => {
+          return (
+            <span key={index}>
+              {line}
+            </span>
+          );
+        })
+      }
+    </StyleText>
+  );
+}
+
+const Container = styled.div`
+  blockquote {
+    padding: 6px 6px 6px 16px;
+    margin: 4px 0px 8px;
+    border-left: 1px solid ${palette2('interactive', 'b02')};
+    background-color: ${palette2('neutral', 'b02')};
+    color: ${palette2('neutral', 'f04')};
+    overflow-x: auto;
+  }
+`;
+
+export function GlipMarkdown({
+  className = undefined,
+  text,
+  atRender = undefined,
+}: {
+  className?: string;
+  text: string;
+  atRender?: (...args: any[]) => any;
+}) {
+  return (
+    <Container className={className}>
+      <ReactMarkdown
+        components={{
+          a: LinkRender,
+          img: (props) => (
+            <ImageRender
+              {...props}
+              atRender={atRender}
+            />
+          ),
+          p: TextRender,
+        }}
+      >
+        {replaceAtTeamText(replaceEmojiText(text))}
+      </ReactMarkdown>
+    </Container>
+  );
+}