feat: width, height support for image

packages/client/src/components/resizeable/resizeable.tsx

@@ -54,6 +54,13 @@ export const Resizeable: React.FC<IProps> = ({ width, height, onChange, children
     });
   }, []);
 
+  useEffect(() => {
+    Object.assign($container.current.style, {
+      width: `${width}px`,
+      height: `${height}px`,
+    });
+  }, [width, height]);
+
   return (
     <div
       id="js-resizeable-container"

packages/client/src/components/tiptap/extensions/image.tsx

@@ -1,8 +1,6 @@
-import { Plugin } from 'prosemirror-state';
 import { Image as TImage } from '@tiptap/extension-image';
-import { NodeViewWrapper, NodeViewContent, ReactNodeViewRenderer } from '@tiptap/react';
+import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
 import { Resizeable } from 'components/resizeable';
-import { uploadFile } from 'services/file';
 
 const Render = ({ editor, node, updateAttributes }) => {
   const isEditable = editor.isEditable;
@@ -12,7 +10,7 @@ const Render = ({ editor, node, updateAttributes }) => {
     updateAttributes({ height: size.height, width: size.width });
   };
 
-  const content = src && <img src={src} alt={title} style={{ width: '100%', height: '100%' }} />;
+  const content = src && <img src={src} alt={alt} width={width} height={height} />;
 
   return (
     <NodeViewWrapper as="div" style={{ textAlign, fontSize: 0, maxWidth: '100%' }}>

packages/client/src/components/tiptap/markdown/serializer.tsx

@@ -132,6 +132,11 @@ const defaultSerializerConfig = {
       state.write(`documentChildren$`);
       state.closeBlock(node);
     },
+    [Mind.name]: (state, node) => {
+      state.ensureNewLine();
+      state.write(`mind$`);
+      state.closeBlock(node);
+    },
     // [DescriptionList.name]: renderHTMLNode("dl", true),
     // [DescriptionItem.name]: (state, node, parent, index) => {
     //   if (index === 1) state.ensureNewLine();

packages/client/src/components/tiptap/menus/image.tsx

@@ -1,4 +1,5 @@
-import { Space, Button, Tooltip } from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Space, Button, Tooltip, InputNumber, Typography } from '@douyinfe/semi-ui';
 import {
   IconAlignLeft,
   IconAlignCenter,
@@ -10,8 +11,21 @@ import { Upload } from 'components/upload';
 import { BubbleMenu } from '../components/bubble-menu';
 import { Divider } from '../components/divider';
 import { Image } from '../extensions/image';
+import { getImageOriginSize } from '../utils/image';
+
+const { Text } = Typography;
 
 export const ImageBubbleMenu = ({ editor }) => {
+  const attrs = editor.getAttributes(Image.name);
+  const { width: currentWidth, height: currentHeight } = attrs;
+  const [width, setWidth] = useState(currentWidth);
+  const [height, setHeight] = useState(currentHeight);
+
+  useEffect(() => {
+    setWidth(parseInt(currentWidth));
+    setHeight(parseInt(currentHeight));
+  }, [currentWidth, currentHeight]);
+
   return (
     <BubbleMenu
       className={'bubble-menu'}
@@ -79,14 +93,54 @@ export const ImageBubbleMenu = ({ editor }) => {
           />
         </Tooltip>
         <Divider />
+        <Text>宽</Text>
+        <InputNumber
+          size="small"
+          hideButtons
+          value={width}
+          style={{ width: 60 }}
+          onEnterPress={(e) => {
+            const value = (e.target as HTMLInputElement).value;
+            editor
+              .chain()
+              .updateAttributes(Image.name, {
+                width: value,
+              })
+              .setNodeSelection(editor.state.selection.from)
+              .focus()
+              .run();
+          }}
+        />
+        <Text>高</Text>
+        <InputNumber
+          size="small"
+          hideButtons
+          value={height}
+          style={{ width: 60 }}
+          onEnterPress={(e) => {
+            const value = (e.target as HTMLInputElement).value;
+            editor
+              .chain()
+              .updateAttributes(Image.name, {
+                height: value,
+              })
+              .setNodeSelection(editor.state.selection.from)
+              .focus()
+              .run();
+          }}
+        />
+        <Divider />
         <Upload
           accept="image/*"
-          onOK={(url) => {
+          onOK={async (url, fileName) => {
+            const { width, height } = await getImageOriginSize(url);
             editor
               .chain()
               .updateAttributes(Image.name, {
                 src: url,
-                alt: 'filename',
+                alt: fileName,
+                width,
+                height,
               })
               .setNodeSelection(editor.state.selection.from)
               .focus()

packages/client/src/components/tiptap/menus/media-insert.tsx

@@ -16,6 +16,7 @@ import {
 } from 'components/icons';
 import { GridSelect } from 'components/grid-select';
 import { isTitleActive } from '../utils/active';
+import { getImageOriginSize } from '../utils/image';
 
 export const MediaInsertMenu: React.FC<{ editor: any }> = ({ editor }) => {
   if (!editor) {
@@ -65,7 +66,11 @@ export const MediaInsertMenu: React.FC<{ editor: any }> = ({ editor }) => {
             <IconImage />
             <Upload
               accept="image/*"
-              onOK={(url) => editor.chain().focus().setImage({ src: url }).run()}
+              onOK={async (url, fileName) => {
+                const { width, height } = await getImageOriginSize(url);
+                console.log('upload', width, height);
+                editor.chain().focus().setImage({ src: url, alt: fileName, width, height }).run();
+              }}
             >
               {() => '图片'}
             </Upload>

packages/client/src/components/tiptap/utils/image.ts

@@ -0,0 +1,15 @@
+export function getImageOriginSize(
+  src: string
+): Promise<{ width: number | string; height: number | string }> {
+  return new Promise((resolve) => {
+    const image = document.createElement('img');
+    image.onload = function () {
+      console.log(image.width, image.height);
+      resolve({ width: image.width, height: image.height });
+    };
+    image.onerror = function () {
+      resolve({ width: 'auto', height: 'auto' });
+    };
+    image.src = src;
+  });
+}

packages/client/src/components/upload/index.tsx

@@ -5,7 +5,7 @@ import { useAsyncLoading } from 'hooks/useAsyncLoading';
 import { uploadFile } from 'services/file';
 
 interface IProps {
-  onOK: (arg: string, fileName: string) => void;
+  onOK: (arg: string, fileName: string, fileSize: number) => void;
   style?: React.CSSProperties;
   accept?: string;
   children?: (loading: boolean) => React.ReactNode;
@@ -17,7 +17,7 @@ export const Upload: React.FC<IProps> = ({ onOK, accept, style = {}, children })
   const beforeUpload = ({ file }) => {
     uploadFileWithLoading(file.fileInstance).then((res: string) => {
       Toast.success('上传成功');
-      onOK && onOK(res, file.name);
+      onOK && onOK(res, file.name, file.size);
     });
     return false;
   };

packages/config/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+yaml/dev.yaml