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

package/dist/api/seafile-api.js

@@ -41,6 +41,7 @@ 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, {
@@ -49,6 +50,7 @@ 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

@@ -62,6 +62,89 @@
   caret-color: transparent;
 }
 
+.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); */
+}
+
+.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;
+}
+
+.sdoc-editor__article .sdoc-image-title .sdoc-exclamation-circle {
+  /* width: 10%;
+  height: 10%; */
+  font-size: 18px;
+  align-items: center;
+  justify-content: center;
+  color: red;
+  display: flex;
+}
+
+.sdoc-editor__article .sdoc-image-title .sdoc-image-tip-title {
+  color: red;
+  font-size: 18px;
+  user-select: 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;
+  align-items: center;
+}
+
+.sdoc-editor__article .sdoc-image-process-container .loading-spinner {
+  border: 5px solid #d8d8d8;
+  border-top: 5px solid #939393;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  animation: spin 1s linear infinite;
+  user-select: none;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
 .sdoc-editor__article .sdoc-image-inner {
   position: relative;
   display: inline-block;

package/dist/basic-sdk/extension/core/queries/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.someNode = exports.isTopLevelListItem = exports.isTextNode = exports.isStartPoint = exports.isSelectionAtBlockStart = exports.isSelectionAtBlockEnd = exports.isRangeInSameBlock = exports.isRangeAcrossBlocks = exports.isMultiLevelList = exports.isMiddlePoint = exports.isLastNode = exports.isLastChild = exports.isHasImg = exports.isFirstChild = exports.isEndPoint = exports.isEmptyArticle = exports.isCurrentLineHasText = exports.isCurrentLineEmpty = exports.isContainsVoidElement = exports.isBlockTextEmptyAfterSelection = exports.isBlockAboveEmpty = exports.isAncestorEmpty = exports.getTopLevelBlockNode = exports.getStartPoint = exports.getSelectedNodeEntryByType = exports.getSelectedNodeByTypes = exports.getSelectedNodeByType = exports.getSelectedElems = exports.getQueryOptions = exports.getPreviousPath = exports.getPrevNode = exports.getPointBefore = exports.getParentNode = exports.getNodes = exports.getNodeType = exports.getNodeEntries = exports.getNodeById = exports.getNode = exports.getNextSiblingNodes = exports.getNextNode = exports.getLastChildPath = exports.getLastChild = exports.getEndPoint = exports.getEditorString = exports.getDeepInlineChildren = exports.getCurrentNode = exports.getCommonNode = exports.getChildren = exports.getAboveNode = exports.getAboveBlockNode = exports.findPath = exports.findNode = exports.findDescendant = void 0;
+exports.someNode = exports.isTopLevelListItem = exports.isTextNode = exports.isStartPoint = exports.isSelectionAtBlockStart = exports.isSelectionAtBlockEnd = exports.isRangeInSameBlock = exports.isRangeAcrossBlocks = exports.isMultiLevelList = exports.isMiddlePoint = exports.isLastNode = exports.isLastChild = exports.isHasImg = exports.isFirstChild = exports.isEndPoint = exports.isEmptyArticle = exports.isCursorAtBlockStart = exports.isCurrentLineHasText = exports.isCurrentLineEmpty = exports.isContainsVoidElement = exports.isBlockTextEmptyAfterSelection = exports.isBlockAboveEmpty = exports.isAncestorEmpty = exports.getTopLevelBlockNode = exports.getStartPoint = exports.getSelectedNodeEntryByType = exports.getSelectedNodeByTypes = exports.getSelectedNodeByType = exports.getSelectedElems = exports.getQueryOptions = exports.getPreviousPath = exports.getPrevNode = exports.getPointBefore = exports.getParentNode = exports.getNodes = exports.getNodeType = exports.getNodeEntries = exports.getNodeById = exports.getNode = exports.getNextSiblingNodes = exports.getNextNode = exports.getLastChildPath = exports.getLastChild = exports.getEndPoint = exports.getEditorString = exports.getDeepInlineChildren = exports.getCurrentNode = exports.getCommonNode = exports.getChildren = exports.getAboveNode = exports.getAboveBlockNode = exports.findPath = exports.findNode = exports.findDescendant = void 0;
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
 var _utils = require("../utils");
@@ -455,6 +455,27 @@ const isBlockAboveEmpty = editor => {
   return isAncestorEmpty(editor, block);
 };
 exports.isBlockAboveEmpty = isBlockAboveEmpty;
+const isCursorAtBlockStart = (editor, options) => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return false;
+  const nodeEntry = getAboveBlockNode(editor, options);
+  let [node, path] = nodeEntry || [];
+  if (!path) return false;
+
+  // Special handling of placeholders, such as link, inline image
+  if (_slate.Node.string(node.children[0]).length === 0) {
+    const {
+      offset,
+      path: point
+    } = selection.focus;
+    if (offset !== 0) return false;
+    return _slate.Path.equals(point, [path[0], 1, 0]);
+  }
+  return isStartPoint(editor, selection.focus, path);
+};
+exports.isCursorAtBlockStart = isCursorAtBlockStart;
 const isSelectionAtBlockStart = (editor, options) => {
   const {
     selection

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

@@ -88,24 +88,6 @@ const withBlockquote = editor => {
         });
         return;
       }
-
-      // Merge with previous line when Select at the beginning of the line
-      if (currentLineIndex !== 0 && (0, _core.isSelectionAtBlockStart)(editor)) {
-        const lineText = _slate.Node.string(currentLineEntry[0]);
-        const previousNodeEntry = _slate.Editor.previous(editor, {
-          at: currentLineEntry[1]
-        });
-        if (!previousNodeEntry) return;
-        const focusPoint = _slate.Editor.end(newEditor, previousNodeEntry[1]);
-        _slate.Transforms.insertText(newEditor, lineText, {
-          at: _slate.Editor.end(newEditor, previousNodeEntry[1])
-        });
-        _slate.Transforms.removeNodes(editor, {
-          at: currentLineEntry[1]
-        });
-        (0, _core.focusEditor)(newEditor, focusPoint);
-        return;
-      }
     }
     deleteBackward(unit);
   };

package/dist/basic-sdk/extension/plugins/check-list/plugin.js

@@ -40,19 +40,22 @@ const withCheckList = editor => {
     }
 
     // If it is check-list-item, handle your own business logic
-    if (_slate.Node.string(node).length > 0) {
-      _slate.Transforms.splitNodes(editor, {
-        always: true
-      });
-      _slate.Transforms.setNodes(editor, {
-        checked: false
-      }, {
-        at: node[1]
+    if ((0, _core.isCursorAtBlockStart)(editor)) {
+      const path = (0, _core.findPath)(editor, node);
+      const newNode = (0, _core.generateEmptyElement)(_constants.CHECK_LIST_ITEM);
+      _slate.Transforms.insertNodes(editor, newNode, {
+        at: path
       });
       return;
     }
-    insertBreak();
-    return;
+    _slate.Transforms.splitNodes(editor, {
+      always: true
+    });
+    _slate.Transforms.setNodes(editor, {
+      checked: false
+    }, {
+      at: node[1]
+    });
   };
   newEditor.deleteBackward = unit => {
     const {

package/dist/basic-sdk/extension/plugins/code-block/plugin.js

@@ -68,47 +68,47 @@ const withCodeBlock = editor => {
         }
       });
       return insertFragment(data);
-    } else {
-      // Paste into code block
-      if ((0, _core.getSelectedNodeByType)(editor, _constants.CODE_BLOCK)) {
-        // Pasted data is code block split with code-line
-        data.forEach((node, index) => {
-          if (node.type === _constants.CODE_BLOCK) {
-            const codeLineArr = node.children.map(line => line);
-            data.splice(index, 1, ...codeLineArr);
-          }
-        });
-        const newData = data.map(node => {
-          const text = _slate.Node.string(node);
-          const codeLine = {
-            id: _slugid.default.nice(),
-            type: _constants.CODE_LINE,
-            children: [{
-              text: text,
-              id: _slugid.default.nice()
-            }]
-          };
-          return codeLine;
-        });
+    }
 
-        // current focus code-line string not empty
-        const string = _slate.Editor.string(newEditor, newEditor.selection.focus.path);
-        if (string.length !== 0 && _slate.Range.isCollapsed(newEditor.selection)) {
-          const [node, ...restNode] = newData;
-          const text = _slate.Node.string(node);
-          insertText(text);
-          if (restNode.length !== 0) {
-            insertBreak();
-            insertFragment(restNode);
-          }
-          return;
+    // Paste into code block
+    if ((0, _core.getSelectedNodeByType)(editor, _constants.CODE_BLOCK)) {
+      // Pasted data is code block split with code-line
+      data.forEach((node, index) => {
+        if (node.type === _constants.CODE_BLOCK) {
+          const codeLineArr = node.children.map(line => line);
+          data.splice(index, 1, ...codeLineArr);
         }
-        return insertFragment(newData);
-      } else {
-        // Paste into not a code block
-        return insertFragment(data);
+      });
+      const newData = data.map(node => {
+        const text = _slate.Node.string(node);
+        const codeLine = {
+          id: _slugid.default.nice(),
+          type: _constants.CODE_LINE,
+          children: [{
+            text: text,
+            id: _slugid.default.nice()
+          }]
+        };
+        return codeLine;
+      });
+
+      // current focus code-line string not empty
+      const string = _slate.Editor.string(newEditor, newEditor.selection.focus.path);
+      if (string.length !== 0 && _slate.Range.isCollapsed(newEditor.selection)) {
+        const [node, ...restNode] = newData;
+        const text = _slate.Node.string(node);
+        insertText(text);
+        if (restNode.length !== 0) {
+          insertBreak();
+          insertFragment(restNode);
+        }
+        return;
       }
+      return insertFragment(newData);
     }
+
+    // Paste into not a code block
+    return insertFragment(data);
   };
 
   // Rewrite normalizeNode
@@ -213,6 +213,17 @@ const withCodeBlock = editor => {
       }
     }
   };
+  newEditor.insertBreak = () => {
+    const selectedNode = (0, _core.getSelectedNodeByType)(newEditor, _constants.CODE_LINE);
+    if (selectedNode != null && (0, _core.isCursorAtBlockStart)(newEditor)) {
+      const line = (0, _core.generateEmptyElement)(_constants.CODE_LINE);
+      _slate.Transforms.insertNodes(editor, line, {
+        at: selectedNode[1]
+      });
+      return;
+    }
+    insertBreak();
+  };
   return newEditor;
 };
 var _default = exports.default = withCodeBlock;

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

@@ -55,6 +55,14 @@ const withHeader = editor => {
       insertBreak();
       return;
     }
+    if ((0, _core.isCursorAtBlockStart)(newEditor)) {
+      const [currentNode, path] = match;
+      const newNode = (0, _core.generateEmptyElement)(currentNode.type);
+      _slate.Transforms.insertNodes(editor, newNode, {
+        at: path
+      });
+      return;
+    }
     const isAtLineEnd = isSelectionAtLineEnd(editor, match[1]);
     const nextNode = _slate.Editor.next(editor, {
       at: match[1]

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

@@ -134,6 +134,7 @@ const updateImage = (editor, data) => {
 };
 exports.updateImage = updateImage;
 const getImageURL = (data, editor) => {
+  console.log(5, data);
   const {
     src: url,
     column_key
@@ -277,4 +278,11 @@ 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,6 +51,7 @@ 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)) {
@@ -75,11 +76,29 @@ 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

@@ -20,9 +20,8 @@ var _useScrollContext = require("../../../hooks/use-scroll-context");
 var _constants2 = require("./constants");
 var _constants3 = require("../../constants");
 var _constants4 = require("../../../../constants");
-var _imagePlaceholder = _interopRequireDefault(require("../../../assets/images/image-placeholder.png"));
 const Image = _ref => {
-  var _imageRef$current, _imageRef$current2;
+  var _imageRef$current, _imageRef$current2, _imageRef$current3;
   let {
     element,
     editor,
@@ -57,6 +56,7 @@ const Image = _ref => {
   const [isShowImageHoverMenu, setIsShowImageHoverMenu] = (0, _react.useState)(false);
   const [menuPosition, setMenuPosition] = (0, _react.useState)({});
   const [caption, setCaption] = (0, _react.useState)((data === null || data === void 0 ? void 0 : data.caption) || '');
+  const [isLoading, setIsLoading] = (0, _react.useState)(true);
   const registerEvent = (0, _react.useCallback)(eventList => {
     eventList.forEach(element => {
       document.addEventListener(element.eventName, element.event);
@@ -72,11 +72,21 @@ const Image = _ref => {
     event.preventDefault();
     event.stopPropagation();
     const changeX = event.clientX - ((_resizerRef$current = resizerRef.current) === null || _resizerRef$current === void 0 ? void 0 : _resizerRef$current.getBoundingClientRect().left) - 5;
-    const imageWidth = imageRef.current.width + changeX;
-    if (imageWidth < 20) return;
-    imageRef.current.width = imageWidth;
-    setMovingWidth(imageWidth);
-  }, []);
+    console.log(3, isShowImagePlaceholder);
+    if (isShowImagePlaceholder) {
+      const imageWidth = imageRef.current.getBoundingClientRect().width + changeX;
+      if (imageWidth < 20) return;
+      imageRef.current.width.baseVal.value = imageWidth;
+      setMovingWidth(imageWidth);
+      // updateFontSize();
+    } else {
+      const imageWidth = imageRef.current.width + changeX;
+      if (imageWidth < 20) return;
+      imageRef.current.width = imageWidth;
+      setMovingWidth(imageWidth);
+    }
+    // console.log(44, imageRef.current.width, imageRef.current.width.baseVal)
+  }, [isShowImagePlaceholder]);
   const onResizeEnd = (0, _react.useCallback)(event => {
     event.preventDefault();
     event.stopPropagation();
@@ -118,9 +128,10 @@ const Image = _ref => {
     let imageWidth = element.data.width || '';
     if (movingWidth) imageWidth = movingWidth;
     return {
-      width: imageWidth
+      width: imageWidth,
+      display: isLoading ? 'none' : 'inline-block'
     };
-  }, [element.data, movingWidth]);
+  }, [element.data, movingWidth, isLoading]);
   const onScroll = (0, _react.useCallback)(() => {
     setPosition();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -192,12 +203,16 @@ 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);
@@ -208,6 +223,7 @@ const Image = _ref => {
       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 => {
@@ -224,7 +240,13 @@ const Image = _ref => {
       });
     }
   }, [data, editor, element]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isShowImagePlaceholder && /*#__PURE__*/_react.default.createElement("span", Object.assign({
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isLoading && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-image-process-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "loading-spinner"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "spinner"
+  })), children), isShowImagePlaceholder && /*#__PURE__*/_react.default.createElement("span", Object.assign({
     className: (0, _classnames.default)('sdoc-image-wrapper', className)
   }, attributes, {
     style: {
@@ -233,18 +255,70 @@ const Image = _ref => {
     onMouseOver: e => (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected),
     contentEditable: "false",
     suppressContentEditableWarning: true
-  }), /*#__PURE__*/_react.default.createElement("img", {
+  }), /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 360 360",
+    preserveAspectRatio: "xMinYMin meet",
+    className: (0, _classnames.default)('sdoc-image-placeholder-wrapper', {
+      'image-selected': isSelected
+    }),
     ref: imageRef,
-    src: _imagePlaceholder.default,
     style: getImageStyle(),
-    draggable: false,
-    alt: ""
-  }), children), !isShowImagePlaceholder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", Object.assign({
+    draggable: false
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "#f0f0f0"
+  }), /*#__PURE__*/_react.default.createElement("g", {
+    className: "sdoc-image-content-wrapper",
+    textAnchor: "middle",
+    dominantBaseline: "middle",
+    transform: "translate(180, 180)"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    className: "sdoc-image-title",
+    transform: "translate(0, 0)"
+  }, /*#__PURE__*/_react.default.createElement("foreignObject", {
+    x: "-22%",
+    y: "-16",
+    width: "20",
+    height: "28"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdocfont sdoc-exclamation-circle"
+  })), /*#__PURE__*/_react.default.createElement("text", {
+    className: "sdoc-image-tip-title",
+    x: "5%",
+    fontSize: "20",
+    fill: "red",
+    fontFamily: "Arial, sans-serif"
+  }, t('Image_copy_error'))), /*#__PURE__*/_react.default.createElement("text", {
+    className: "sdoc-image-tip-content",
+    x: "0",
+    y: "10%",
+    fontSize: "12",
+    textAnchor: "middle",
+    fill: "black",
+    fontFamily: "Arial, sans-serif"
+  }, t('Image_cannot_be_copied_Please_download_the_source_image')), /*#__PURE__*/_react.default.createElement("text", {
+    className: "sdoc-image-tip-content",
+    x: "0",
+    y: "16%",
+    fontSize: "12",
+    textAnchor: "middle",
+    fill: "black",
+    fontFamily: "Arial, sans-serif"
+  }, t('And_select_insert_-_image_to_upload')))), isSelected && /*#__PURE__*/_react.default.createElement("span", {
+    className: "image-resizer",
+    ref: resizerRef,
+    onMouseDown: onResizeStart
+  }), isResizing && /*#__PURE__*/_react.default.createElement("span", {
+    className: "image-size"
+  }, /*#__PURE__*/_react.default.createElement("span", null, t('Width'), ':', parseInt(movingWidth || ((_imageRef$current = imageRef.current) === null || _imageRef$current === void 0 ? void 0 : _imageRef$current.clientWidth))), /*#__PURE__*/_react.default.createElement("span", null, "\xA0\xA0"), /*#__PURE__*/_react.default.createElement("span", null, t('Height'), ':', imageRef.current.clientHeight)), children), !isShowImagePlaceholder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", Object.assign({
     "data-id": element.id,
     className: (0, _classnames.default)('sdoc-image-wrapper', className)
   }, attributes, {
     style: {
-      ...style
+      ...style,
+      userSelect: 'none'
     },
     onMouseOver: e => (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected),
     contentEditable: "false",
@@ -272,12 +346,12 @@ const Image = _ref => {
     onMouseDown: onResizeStart
   }), isResizing && /*#__PURE__*/_react.default.createElement("span", {
     className: "image-size"
-  }, /*#__PURE__*/_react.default.createElement("span", null, t('Width'), ':', parseInt(movingWidth || ((_imageRef$current = imageRef.current) === null || _imageRef$current === void 0 ? void 0 : _imageRef$current.clientWidth))), /*#__PURE__*/_react.default.createElement("span", null, "\xA0\xA0"), /*#__PURE__*/_react.default.createElement("span", null, t('Height'), ':', imageRef.current.clientHeight))), nodeEntry[0].type === _constants3.IMAGE_BLOCK && show_caption && /*#__PURE__*/_react.default.createElement("input", {
+  }, /*#__PURE__*/_react.default.createElement("span", null, t('Width'), ':', parseInt(movingWidth || ((_imageRef$current2 = imageRef.current) === null || _imageRef$current2 === void 0 ? void 0 : _imageRef$current2.clientWidth))), /*#__PURE__*/_react.default.createElement("span", null, "\xA0\xA0"), /*#__PURE__*/_react.default.createElement("span", null, t('Height'), ':', imageRef.current.clientHeight))), nodeEntry[0].type === _constants3.IMAGE_BLOCK && show_caption && /*#__PURE__*/_react.default.createElement("input", {
     id: "sdoc-image-caption-input",
     ref: imageCaptionInputRef,
     className: "sdoc-image-caption-input-wrapper",
     style: {
-      width: (data === null || data === void 0 ? void 0 : data.width) || ((_imageRef$current2 = imageRef.current) === null || _imageRef$current2 === void 0 ? void 0 : _imageRef$current2.clientWidth)
+      width: (data === null || data === void 0 ? void 0 : data.width) || ((_imageRef$current3 = imageRef.current) === null || _imageRef$current3 === void 0 ? void 0 : _imageRef$current3.clientWidth)
     },
     placeholder: t('Caption'),
     autoComplete: "off",

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

@@ -62,8 +62,8 @@ const insertLink = function (editor, title, url) {
   let slateNode = arguments.length > 4 ? arguments[4] : undefined;
   if (position === _constants.INSERT_POSITION.CURRENT && isMenuDisabled(editor)) return;
   if (!title || !url) return;
+  const linkNode = genLinkNode(url, title);
   if (position === _constants.INSERT_POSITION.AFTER) {
-    const linkNode = genLinkNode(url, title);
     let path = _slate.Editor.path(editor, editor.selection);
     if (slateNode && (slateNode === null || slateNode === void 0 ? void 0 : slateNode.type) === _constants.LIST_ITEM) {
       path = _slateReact.ReactEditor.findPath(editor, slateNode);
@@ -88,26 +88,25 @@ const insertLink = function (editor, title, url) {
   if (selection == null) return;
   const isCollapsed = _slate.Range.isCollapsed(selection);
   if (isCollapsed) {
-    const linkNode = genLinkNode(url, title);
     _slate.Transforms.insertNodes(editor, linkNode);
-  } else {
-    const selectedText = _slate.Editor.string(editor, selection); // Selected text
-    if (selectedText !== title) {
-      // If the selected text is different from the typed text, delete the text and insert the link
-      editor.deleteFragment();
-      const linkNode = genLinkNode(url, title);
-      _slate.Transforms.insertNodes(editor, linkNode);
-    } else {
-      // If the selected text is the same as the entered text, only the link can be wrapped
-      const linkNode = genLinkNode(url, title);
-      _slate.Transforms.wrapNodes(editor, linkNode, {
-        split: true
-      });
-      _slate.Transforms.collapse(editor, {
-        edge: 'end'
-      });
-    }
+    return;
   }
+  const selectedText = _slate.Editor.string(editor, selection); // Selected text
+
+  // If the selected text is different from the typed text, delete the text and insert the link
+  if (selectedText !== title) {
+    editor.deleteFragment();
+    _slate.Transforms.insertNodes(editor, linkNode);
+    return;
+  }
+
+  // If the selected text is the same as the entered text, only the link can be wrapped
+  _slate.Transforms.wrapNodes(editor, linkNode, {
+    split: true
+  });
+  _slate.Transforms.collapse(editor, {
+    edge: 'end'
+  });
 };
 exports.insertLink = insertLink;
 const updateLink = (editor, newText, newUrl) => {

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

@@ -129,7 +129,7 @@ const withLink = editor => {
     }
     return normalizeNode([node, path]);
   };
-  editor.onCompositionStart = e => {
+  newEditor.onCompositionStart = e => {
     const {
       selection
     } = editor;

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

@@ -16,7 +16,8 @@ const withParagraph = editor => {
     insertText,
     deleteBackward,
     onHotKeyDown,
-    insertFragment
+    insertFragment,
+    insertBreak
   } = editor;
   const newEditor = editor;
   newEditor.handleTab = event => {
@@ -135,6 +136,21 @@ const withParagraph = editor => {
     }
     return onHotKeyDown && onHotKeyDown(event);
   };
+  newEditor.insertBreak = () => {
+    const selectedNode = (0, _core.getSelectedNodeByType)(newEditor, _constants.PARAGRAPH);
+    if (selectedNode != null && (0, _core.isCursorAtBlockStart)(newEditor)) {
+      const paragraph = (0, _core.generateDefaultParagraph)();
+      const targetPath = (0, _core.findPath)(editor, selectedNode);
+      const parentNode = (0, _core.getParentNode)(newEditor.children, selectedNode.id);
+      if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== _constants.LIST_ITEM) {
+        _slate.Transforms.insertNodes(editor, paragraph, {
+          at: targetPath
+        });
+        return;
+      }
+    }
+    insertBreak();
+  };
   newEditor.insertFragment = data => {
     const paragraphBlock = (0, _core.getSelectedNodeByType)(editor, _constants.PARAGRAPH);
     const onlyOneListItem = data.length === 1 && (0, _helpers.isSingleListItem)(data[0]);