feat: v1.0.4

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
+### v1.0.4 (2021-07-30)
+
+- fix `ali-oss` error
+- `esc` event (exit fullscreen) for universal editor
+- `upload image` for universal editor
+- markdown coper for image uploader
+
 ### v1.0.3 (2021-07-27)
 
 - replace `service/loading` to [`veact-use`](https://github.com/veactjs/veact-use).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "veact-admin",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "author": "Surmon",
   "license": "MIT",
   "repository": {
@@ -45,6 +45,7 @@
     "@types/gravatar": "^1.8.3",
     "@types/lodash": "^4.14.171",
     "@types/marked": "^2.0.4",
+    "@types/node": "^16.4.7",
     "@types/react": "^17.0.15",
     "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.1.8",

src/components/common/ImageUploader/index.tsx

@@ -6,20 +6,29 @@
 import React from 'react'
 import { useRef, onMounted } from 'veact'
 import { useLoading } from 'veact-use'
-import { Upload, notification, Input, Space } from 'antd'
-import { PlusOutlined, LoadingOutlined, FileImageOutlined } from '@ant-design/icons'
+import { Upload, notification, Input, Space, Button, Tooltip } from 'antd'
+import {
+  PlusOutlined,
+  LoadingOutlined,
+  LinkOutlined,
+  FileMarkdownOutlined,
+  CopyOutlined,
+} from '@ant-design/icons'
 import moment from 'moment'
-import * as OSS from 'ali-oss'
+import OSS from 'ali-oss'
 
 import { STATIC_URL, ALIYUN_OSS_REGION, ALIYUN_OSS_BUCKET } from '@/config'
 import { getOSSUpToken, AliYunOSSUpToken } from '@/store/system'
+import { copy } from '@/services/clipboard'
 import styles from './style.module.less'
 
 const UPLOAD_FILE_SIZE_LIMIT = 3000000
 
 export interface ImageUploaderProps {
   value?: string
   onChange?(value: string): void
+  disabledInput?: boolean
+  disabledMarkdown?: boolean
 }
 
 export const ImageUploader: React.FC<ImageUploaderProps> = (props) => {
@@ -114,6 +123,10 @@ export const ImageUploader: React.FC<ImageUploaderProps> = (props) => {
     props.onChange?.('')
   }
 
+  const getMarkdown = (url: string) => {
+    return `![](${url})`
+  }
+
   onMounted(() => {
     fetchToken()
   })
@@ -146,13 +159,32 @@ export const ImageUploader: React.FC<ImageUploaderProps> = (props) => {
           </div>
         )}
       </Upload>
-      <Input
-        allowClear={true}
-        placeholder="可以直接输入地址"
-        prefix={<FileImageOutlined />}
-        value={props.value}
-        onChange={(event) => props.onChange?.(event.target.value)}
-      />
+      {!props.disabledInput && (
+        <Input
+          allowClear={true}
+          placeholder="可以直接输入地址"
+          prefix={<LinkOutlined />}
+          value={props.value}
+          onChange={(event) => props.onChange?.(event.target.value)}
+        />
+      )}
+      {!props.disabledMarkdown && props.value && (
+        <Input.Group compact={true}>
+          <Input
+            style={{ width: 'calc(100% - 32px - 1px)' }}
+            placeholder="Markdown image"
+            prefix={<FileMarkdownOutlined />}
+            readOnly={true}
+            value={getMarkdown(props.value)}
+          />
+          <Tooltip title="Copy Markdown">
+            <Button
+              icon={<CopyOutlined />}
+              onClick={() => copy(getMarkdown(props.value!))}
+            />
+          </Tooltip>
+        </Input.Group>
+      )}
     </Space>
   )
 }

src/components/common/UniversalEditor/index.tsx

@@ -8,15 +8,18 @@ import classnames from 'classnames'
 import React, { useRef, useState, useEffect, useCallback } from 'react'
 import { useWatch, useReactivity } from 'veact'
 import { CSSTransition } from 'react-transition-group'
-import { Button, Select, Space, Typography, Spin } from 'antd'
+import { Button, Select, Space, Typography, Spin, Modal } from 'antd'
 import {
   FullscreenOutlined,
   DownloadOutlined,
   EyeOutlined,
   LoadingOutlined,
+  CloudUploadOutlined,
   EyeInvisibleOutlined,
   FullscreenExitOutlined,
+  FileImageOutlined,
 } from '@ant-design/icons'
+import { ImageUploader } from '@/components/common/ImageUploader'
 import { general as _general } from '@/state/general'
 import { saveFile } from '@/services/file'
 import storage from '@/services/storage'
@@ -178,6 +181,8 @@ export const UniversalEditor: React.FC<UniversalEditorProps> = (props) => {
 
     // Command + S = save content
     ueditor.addCommand(KeyMod.CtrlCmd | KeyCode.KEY_S, handleSaveContent)
+    // Esc = exit fullscreen
+    ueditor.addCommand(KeyCode.Escape, () => general.setFullscreen(false))
     return ueditor
   }
 
@@ -258,12 +263,41 @@ export const UniversalEditor: React.FC<UniversalEditorProps> = (props) => {
           </Space>
           <Space className={styles.right}>
             {language === UEditorLanguage.Markdown && (
-              <Button
-                size="small"
-                disabled={props.disbaled}
-                icon={isPreview ? <EyeInvisibleOutlined /> : <EyeOutlined />}
-                onClick={() => setPreview(!isPreview)}
-              />
+              <>
+                <Button
+                  size="small"
+                  icon={<CloudUploadOutlined />}
+                  onClick={() => {
+                    Modal.info({
+                      centered: true,
+                      closable: false,
+                      icon: null,
+                      title: (
+                        <Space>
+                          <FileImageOutlined />
+                          上传图片
+                        </Space>
+                      ),
+                      okText: 'OK! nice',
+                      okButtonProps: {
+                        type: 'default',
+                      },
+                      content: (
+                        <>
+                          <br />
+                          <ImageUploader disabledInput={true} />
+                        </>
+                      ),
+                    })
+                  }}
+                />
+                <Button
+                  size="small"
+                  disabled={props.disbaled}
+                  icon={isPreview ? <EyeInvisibleOutlined /> : <EyeOutlined />}
+                  onClick={() => setPreview(!isPreview)}
+                />
+              </>
             )}
             <Select
               size="small"

src/pages/Profile/Auth.tsx

@@ -90,7 +90,7 @@ export const AuthForm: React.FC<BaseFormProps> = (props) => {
           wrapperCol={{ span: 6 }}
           rules={[{ required: true, message: '请上传图片' }]}
         >
-          <ImageUploader />
+          <ImageUploader disabledMarkdown={true} />
         </Form.Item>
         <Form.Item
           name="name"

src/services/clipboard.ts

@@ -0,0 +1,8 @@
+/**
+ * @file clipboard service
+ * @module service.clipboard
+ * @author Surmon <https://github.com/surmon-china>
+ */
+
+export const read = () => navigator.clipboard.readText()
+export const copy = (text: string) => navigator.clipboard.writeText(text)

vite.config.ts

@@ -1,9 +1,9 @@
-import path from 'path';
-import { defineConfig, loadEnv } from 'vite';
-import reactRefresh from '@vitejs/plugin-react-refresh';
+import path from 'path'
+import { defineConfig, loadEnv } from 'vite'
+import reactRefresh from '@vitejs/plugin-react-refresh'
 
-const isProxyDev = Boolean(process.env.PROXY);
-const prodEnv = loadEnv('production', '.');
+const isProxyDev = Boolean(process.env.PROXY)
+const prodEnv = loadEnv('production', '.')
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -39,12 +39,12 @@ export default defineConfig({
       output: {
         manualChunks(id) {
           if (id.includes('node_modules/monaco-editor')) {
-            return 'monaco-editor';
+            return 'monaco-editor'
           } else if (id.includes('node_modules')) {
-            return 'vendor';
+            return 'vendor'
           }
         },
       },
     },
   },
-});
+})

yarn.lock

@@ -366,6 +366,11 @@
   resolved "https://registry.yarnpkg.com/@types/marked/-/marked-2.0.4.tgz#34a0ea548afe6e0c01095229d47b48b2af650613"
   integrity sha512-L9VRSe0Id8xbPL99mUo/4aKgD7ZoRwFZqUQScNKHi2pFjF9ZYSMNShUHD6VlMT6J/prQq0T1mxuU25m3R7dFzg==
 
+"@types/node@^16.4.7":
+  version "16.4.7"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.7.tgz#f7afa78769d4b477f5092d7c3468e2e8653d779c"
+  integrity sha512-aDDY54sst8sx47CWT6QQqIZp45yURq4dic0+HCYfYNcY5Ejlb/CLmFnRLfy3wQuYafOeh3lB/DAKaqRKBtcZmA==
+
 "@types/prop-types@*":
   version "15.7.4"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"