@seafile/sdoc-editor 1.0.211-test-0.1 → 1.0.211-test-0.2

package/dist/api/seafile-api.js

@@ -41,7 +41,6 @@ class SeafileAPI {
     const url = '/api/v2.1/seadoc/upload-image/' + docUuid + '/';
     const form = new FormData();
     for (const fileItem of imageFiles) {
-      console.log(imageFiles, fileItem);
       if (fileItem.type.startsWith('image/')) {
         const fileName = this.getImageFileNameWithUuid(fileItem);
         const file = new File([fileItem], fileName, {
@@ -50,7 +49,6 @@ class SeafileAPI {
         form.append('file', file);
       }
     }
-    console.log(this.req.post(url, form));
     return this.req.post(url, form);
   }
   getSdocDownloadImageUrl(docUuid, imageName) {

package/dist/basic-sdk/assets/css/sdoc-editor-plugins.css

@@ -64,32 +64,22 @@
 
 .sdoc-editor__article .sdoc-image-wrapper .sdoc-image-placeholder-wrapper {
   width: 360px;
-  /* vertical-align: middle; */
   aspect-ratio: 1 / 1;
   background-color: #f0f0f0;
   border: 1px solid #ccc;
-  /* position: relative; */
-  /* overflow: hidden; */
   padding: 0 3%;
-  /* font-size: 1.2vw; */
-  /* transform-origin: top left; */
-  /* transform: scale(1); */
+  max-width: 100%;
+  user-select: all;
+  pointer-events: all;
 }
 
+.sdoc-editor__article .sdoc-image-wrapper .sdoc-image-tip-content,
 .sdoc-editor__article .sdoc-image-wrapper .sdoc-image-title {
-  /* width: 100%;
-  height: 5%;
-  flex-direction: row;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5em; */
   user-select: none;
+  pointer-events: none;
 }
 
 .sdoc-editor__article .sdoc-image-title .sdoc-exclamation-circle {
-  /* width: 10%;
-  height: 10%; */
   font-size: 18px;
   align-items: center;
   justify-content: center;
@@ -101,29 +91,10 @@
   color: red;
   font-size: 18px;
   user-select: none;
+  pointer-events: none;
 }
 
-.sdoc-editor__article .sdoc-image-wrapper .sdoc-image-tip-content {
-  /* width: 100%;
-  font-size: 0.7em;
-  margin-top: 2%;
-  text-align: center;
-  white-space: nowrap; */
-  user-select: none;
-}
-
-/* .sdoc-editor__article .sdoc-image-title .sdoc-exclamation-circle { */
-  /* width: 10%;
-  height: 10%;
-  font-size: 1em; */
-  /* align-items: center;
-  justify-content: center; */
-  /* color: red; */
-  /* display: flex; */
-/* } */
-
 .sdoc-editor__article .sdoc-image-process-container {
-  /* background-color: #F2F2F2; */
   width: 40px;
   height: 40px;
   display: flex;
@@ -138,6 +109,7 @@
   height: 30px;
   animation: spin 1s linear infinite;
   user-select: none;
+  pointer-events: none;
 }
 
 @keyframes spin {

package/dist/basic-sdk/extension/plugins/image/helpers.js

@@ -134,7 +134,6 @@ const updateImage = (editor, data) => {
 };
 exports.updateImage = updateImage;
 const getImageURL = (data, editor) => {
-  console.log(5, data);
   const {
     src: url,
     column_key
@@ -278,11 +277,4 @@ const handleBase64Image = (editor, path, imgData) => {
     });
   });
 };
-
-// export const updateFontSize = () => {
-//   const placeholder = document.querySelector('.sdoc-image-placeholder-wrapper');
-//   const parentWidth = placeholder.offsetWidth;
-//   placeholder.style.fontSize = `${parentWidth * 0.05}px`;
-//   console.log(parentWidth * 0.05);
-// };
 exports.handleBase64Image = handleBase64Image;

package/dist/basic-sdk/extension/plugins/image/plugin.js

@@ -51,7 +51,6 @@ const withImage = editor => {
     const fragment = data.getData(`application/${_constants.CLIPBOARD_FORMAT_KEY}`) || (0, _documentUtils.getSlateFragmentAttribute)(data);
     const originSdocUuid = data.getData(`text/${_constants.CLIPBOARD_ORIGIN_SDOC_KEY}`);
     if (fragment && originSdocUuid) {
-      console.log('1');
       const decoded = decodeURIComponent(window.atob(fragment));
       const fragmentData = JSON.parse(decoded);
       if ((0, _helpers.hasSdocImages)(originSdocUuid, fragmentData)) {
@@ -76,29 +75,11 @@ const withImage = editor => {
       }
     }
     if (data.types && data.types.includes('Files') && data.files[0].type.includes(_constants.IMAGE)) {
-      console.log(data.files);
       _context.default.uploadLocalImage(data.files).then(fileUrl => {
         (0, _helpers.insertImage)(newEditor, fileUrl, editor.selection, _constants.INSERT_POSITION.CURRENT);
       });
       return;
     }
-
-    // const otherDataTypes = data.types.filter(
-    //   (type) => type !== 'text/html' && type !== 'text/plain' && type !== 'Files'
-    // );
-    // if (otherDataTypes.length > 0) {
-    //   otherDataTypes.forEach((type) => {
-    //     if(data.getData(type).includes(IMAGE)) {
-    //       const url;
-    //     }
-    //     conti
-
-    //   });
-    // };
-
-    const notionBlockData = data.getData('text/_notion-blocks-v3-production');
-    const notionPageSourceData = data.getData('text/_notion-page-source-production');
-    console.log(notionBlockData, notionPageSourceData);
     insertData(data);
   };
   newEditor.insertFragment = data => {

package/dist/basic-sdk/extension/plugins/image/render-elem.js

@@ -71,21 +71,16 @@ const Image = _ref => {
     var _resizerRef$current;
     event.preventDefault();
     event.stopPropagation();
+    if (!imageRef.current) return;
     const changeX = event.clientX - ((_resizerRef$current = resizerRef.current) === null || _resizerRef$current === void 0 ? void 0 : _resizerRef$current.getBoundingClientRect().left) - 5;
-    console.log(3, isShowImagePlaceholder);
+    let newWidth = isShowImagePlaceholder ? imageRef.current.getBoundingClientRect().width + changeX : imageRef.current.width + changeX;
+    if (newWidth < 20) return;
     if (isShowImagePlaceholder) {
-      const imageWidth = imageRef.current.getBoundingClientRect().width + changeX;
-      if (imageWidth < 20) return;
-      imageRef.current.width.baseVal.value = imageWidth;
-      setMovingWidth(imageWidth);
-      // updateFontSize();
+      imageRef.current.width.baseVal.value = newWidth;
     } else {
-      const imageWidth = imageRef.current.width + changeX;
-      if (imageWidth < 20) return;
-      imageRef.current.width = imageWidth;
-      setMovingWidth(imageWidth);
+      imageRef.current.width = newWidth;
     }
-    // console.log(44, imageRef.current.width, imageRef.current.width.baseVal)
+    setMovingWidth(newWidth);
   }, [isShowImagePlaceholder]);
   const onResizeEnd = (0, _react.useCallback)(event => {
     event.preventDefault();
@@ -128,10 +123,9 @@ const Image = _ref => {
     let imageWidth = element.data.width || '';
     if (movingWidth) imageWidth = movingWidth;
     return {
-      width: imageWidth,
-      display: isLoading ? 'none' : 'inline-block'
+      width: imageWidth
     };
-  }, [element.data, movingWidth, isLoading]);
+  }, [element.data, movingWidth]);
   const onScroll = (0, _react.useCallback)(() => {
     setPosition();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -203,27 +197,23 @@ const Image = _ref => {
     setIsShowImageHoverMenu(true);
   }, [setPosition]);
   const reloadImage = (0, _react.useCallback)(() => {
-    setIsLoading(false);
-    console.log(66666);
     if (imageRef.current) {
       imageRef.current['src'] = (0, _helpers.getImageURL)(data, editor);
       setIsShowImagePlaceholder(false);
     }
   }, [data, editor]);
   const onImageLoadError = (0, _react.useCallback)(() => {
-    setIsLoading(false);
-    console.log(666, data.src);
     // Check is due to the image is pasted from the clipboard in base64
     if (data.src.startsWith('data:image/jpeg;base64')) {
       return (0, _helpers.handleBase64Image)(editor, path, data);
     }
+    setIsLoading(false);
     setIsShowImagePlaceholder(true);
     // External network images do not reload after failure to load
     if (!data.src.startsWith('http')) {
       const eventBus = _eventBus.default.getInstance();
       eventBus.subscribe(_constants.INTERNAL_EVENT.RELOAD_IMAGE, reloadImage);
     }
-    console.log(5);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const onSetCaption = (0, _react.useCallback)(e => {
@@ -240,8 +230,17 @@ const Image = _ref => {
       });
     }
   }, [data, editor, element]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isLoading && /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-image-process-container"
+  (0, _react.useEffect)(() => {
+    if (imageRef.current) {
+      imageRef.current.onload = () => setIsLoading(false);
+      imageRef.current.onerror = onImageLoadError;
+    }
+  }, [data, editor]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-image-process-container",
+    style: {
+      display: isLoading ? 'inline-block' : 'none'
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "loading-spinner"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -254,7 +253,8 @@ const Image = _ref => {
     },
     onMouseOver: e => (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected),
     contentEditable: "false",
-    suppressContentEditableWarning: true
+    suppressContentEditableWarning: true,
+    tabindex: "0"
   }), /*#__PURE__*/_react.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 360 360",
@@ -264,7 +264,8 @@ const Image = _ref => {
     }),
     ref: imageRef,
     style: getImageStyle(),
-    draggable: false
+    draggable: false,
+    tabindex: "0"
   }, /*#__PURE__*/_react.default.createElement("rect", {
     width: "100%",
     height: "100%",
@@ -273,7 +274,8 @@ const Image = _ref => {
     className: "sdoc-image-content-wrapper",
     textAnchor: "middle",
     dominantBaseline: "middle",
-    transform: "translate(180, 180)"
+    transform: "translate(180, 180)",
+    contentEditable: "false"
   }, /*#__PURE__*/_react.default.createElement("g", {
     className: "sdoc-image-title",
     transform: "translate(0, 0)"
@@ -317,8 +319,7 @@ const Image = _ref => {
     className: (0, _classnames.default)('sdoc-image-wrapper', className)
   }, attributes, {
     style: {
-      ...style,
-      userSelect: 'none'
+      ...style
     },
     onMouseOver: e => (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected),
     contentEditable: "false",

package/dist/context.js

@@ -36,7 +36,6 @@ class Context {
     (0, _defineProperty2.default)(this, "uploadLocalImage", imageFiles => {
       const docUuid = this.getSetting('docUuid');
       return this.api.uploadSdocImage(docUuid, imageFiles).then(res => {
-        console.log('res', res);
         const {
           relative_path
         } = res.data;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "1.0.211-test-0.1",
+  "version": "1.0.211-test-0.2",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",