@seafile/sdoc-editor 3.0.219 → 3.0.220

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

@@ -155,12 +155,82 @@
   margin: 0;
 }
 
+.sdoc-editor__article .sdoc-image-visual {
+  position: relative;
+  display: inline-block;
+}
+
+.sdoc-editor__article .sdoc-image-readonly-link-indicator {
+  position: absolute;
+  z-index: 2;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease;
+}
+
+.sdoc-editor__article .sdoc-image-readonly-link-indicator {
+  bottom: 8px;
+  left: 8px;
+  display: flex;
+  max-width: calc(100% - 16px);
+  color: #fff;
+  font-size: 14px;
+  line-height: 20px;
+  align-items: center;
+  gap: 6px;
+  pointer-events: none;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
+}
+
+.sdoc-editor__article .sdoc-image-readonly-link-indicator .sdocfont {
+  flex: 0 0 auto;
+  font-size: 18px;
+}
+
+.sdoc-editor__article .sdoc-image-readonly-link-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sdoc-editor__article .sdoc-image-readonly-fullscreen-container {
+  top: -42px;
+  left: -3px;
+  z-index: auto;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.sdoc-editor__article .sdoc-image-visual:hover .sdoc-image-readonly-fullscreen-container,
+.sdoc-editor__article .sdoc-image-readonly-fullscreen-container:focus-within {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.sdoc-editor__article .sdoc-image-visual:hover .sdoc-image-readonly-link-indicator {
+  opacity: 1;
+  visibility: visible;
+}
+
 .sdoc-editor__article .sdoc-image-content {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
+.sdoc-editor__article .sdoc-image-page-link {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.sdoc-editor__article .sdoc-image-page-link:focus-visible {
+  outline: 2px solid #1991eb;
+  outline-offset: 2px;
+}
+
 .sdoc-editor__article .sdoc-image-content :first-child {
   position: relative;
 }

package/dist/extension/plugins/html/rules/link.js

@@ -5,12 +5,52 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _slugid = _interopRequireDefault(require("slugid"));
 var _constants = require("../../../constants");
+var _linkHelpers = require("../../image/link-helpers");
 var linkRule = function linkRule(element, parseChild) {
   var nodeName = element.nodeName;
   var content = element.textContent || element.getAttribute('title') || element.getAttribute('href');
   if (nodeName === 'A') {
+    var image = (0, _linkHelpers.getOnlyImageChild)(element);
+    if (image) {
+      var href = (0, _linkHelpers.normalizeWebUrl)(element.getAttribute('href'));
+      return {
+        id: _slugid["default"].nice(),
+        type: _constants.IMAGE,
+        data: (0, _objectSpread2["default"])({
+          src: image.getAttribute('src')
+        }, href && {
+          href: href
+        }),
+        children: [{
+          text: '',
+          id: _slugid["default"].nice()
+        }]
+      };
+    }
+    if (element.querySelector('img')) {
+      var _href = (0, _linkHelpers.normalizeWebUrl)(element.getAttribute('href'));
+      return parseChild(element.childNodes).map(function (child) {
+        if (!_href) return child;
+        if (child.type === _constants.IMAGE) return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, child), {}, {
+          data: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, child.data), {}, {
+            href: _href
+          })
+        });
+        if (typeof child.text === 'string') {
+          return {
+            id: _slugid["default"].nice(),
+            type: _constants.LINK,
+            href: _href,
+            title: element.getAttribute('title'),
+            children: [child]
+          };
+        }
+        return child;
+      });
+    }
     return {
       id: _slugid["default"].nice(),
       type: _constants.LINK,

package/dist/extension/plugins/image/helpers.js

@@ -4,8 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateImage = exports.selectImageWhenSelectPartial = exports.resetCursor = exports.removeImageBlockNode = exports.queryCopyMoveProgressView = exports.isInsertImageMenuDisabled = exports.isImageUrlIsFromUpload = exports.isImageUrlIsFromCopy = exports.isCommentEditor = exports.insertImageFiles = exports.insertImage = exports.hasSdocImages = exports.handleBase64Image = exports.getSingleImageFromFragment = exports.getImageURL = exports.getImageData = exports.getDigitalSignImgUrl = exports.getColumnByKey = exports.generateImageNode = exports.generateImageInfos = void 0;
+exports.getImageURL = exports.getImageData = exports.getDigitalSignImgUrl = exports.getColumnByKey = exports.generateImageNode = exports.generateImageInfos = void 0;
+Object.defineProperty(exports, "getImageWikiPageUrl", {
+  enumerable: true,
+  get: function get() {
+    return _linkHelpers.getImageWikiPageUrl;
+  }
+});
+exports.updateImage = exports.selectImageWhenSelectPartial = exports.resetCursor = exports.removeImageWikiPageLinks = exports.removeImageBlockNode = exports.queryCopyMoveProgressView = exports.isInsertImageMenuDisabled = exports.isImageUrlIsFromUpload = exports.isImageUrlIsFromCopy = exports.isCommentEditor = exports.insertImageFiles = exports.insertImage = exports.hasSdocImages = exports.handleBase64Image = exports.getSingleImageFromFragment = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _regenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
@@ -22,6 +30,8 @@ var _constants2 = require("../../constants");
 var _core = require("../../core");
 var _base64ToUnit8array = _interopRequireDefault(require("./base64-to-unit8array"));
 var _imageCache = _interopRequireDefault(require("./image-cache"));
+var _linkHelpers = require("./link-helpers");
+var _excluded = ["href", "linked_wiki_id", "linked_wiki_page_id"];
 // TODO: seatable_column
 var getDigitalSignImgUrl = exports.getDigitalSignImgUrl = function getDigitalSignImgUrl(partUrl) {
   var server = _context2["default"].getSetting('serviceUrl');
@@ -287,6 +297,28 @@ var getSingleImageFromFragment = exports.getSingleImageFromFragment = function g
   if (images.length !== 1) return null;
   return images[0];
 };
+var _removeImageWikiPageLinks = exports.removeImageWikiPageLinks = function removeImageWikiPageLinks() {
+  var nodes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return nodes.map(function (node) {
+    if ((node === null || node === void 0 ? void 0 : node.type) === _constants2.IMAGE) {
+      var _node$data, _node$data2;
+      var isWikiPageLink = Boolean(((_node$data = node.data) === null || _node$data === void 0 ? void 0 : _node$data.linked_wiki_id) || ((_node$data2 = node.data) === null || _node$data2 === void 0 ? void 0 : _node$data2.linked_wiki_page_id));
+      if (!isWikiPageLink) return node;
+      var _ref4 = node.data || {},
+        href = _ref4.href,
+        linked_wiki_id = _ref4.linked_wiki_id,
+        linked_wiki_page_id = _ref4.linked_wiki_page_id,
+        data = (0, _objectWithoutProperties2["default"])(_ref4, _excluded);
+      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, node), {}, {
+        data: data
+      });
+    }
+    if (!Array.isArray(node === null || node === void 0 ? void 0 : node.children)) return node;
+    return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, node), {}, {
+      children: _removeImageWikiPageLinks(node.children)
+    });
+  });
+};
 var insertImageFiles = exports.insertImageFiles = function insertImageFiles(files, editor, targetPath) {
   var imgInfos = generateImageInfos(files);
   insertImage(editor, imgInfos, targetPath, _constants2.INSERT_POSITION.AFTER);

package/dist/extension/plugins/image/hover-menu/index.js

@@ -1,12 +1,13 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
@@ -14,15 +15,22 @@ var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _tooltip = _interopRequireDefault(require("../../../../components/tooltip"));
+var _constants = require("../../../../constants");
 var _commons = require("../../../commons");
-var _constants = require("../../../constants");
+var _constants2 = require("../../../constants");
 var _core = require("../../../core");
-var _constants2 = require("../constants");
+var _constants3 = require("../constants");
 var _imagePreviewer = _interopRequireDefault(require("../dialogs/image-previewer"));
 var _helpers = require("../helpers");
+var _linkHelpers = require("../link-helpers");
+var _imageLinkPopover = _interopRequireDefault(require("../popover/image-link-popover"));
 require("./index.css");
+var _excluded = ["href", "linked_wiki_id", "linked_wiki_page_id"],
+  _excluded2 = ["href", "linked_wiki_id", "linked_wiki_page_id"],
+  _excluded3 = ["href", "linked_wiki_id", "linked_wiki_page_id"];
 var ImageHoverMenu = function ImageHoverMenu(_ref) {
   var editor = _ref.editor,
+    menuRef = _ref.menuRef,
     menuPosition = _ref.menuPosition,
     element = _ref.element,
     parentNodeEntry = _ref.parentNodeEntry,
@@ -32,7 +40,7 @@ var ImageHoverMenu = function ImageHoverMenu(_ref) {
     readonly = _ref.readonly;
   var data = element.data,
     _element$border_type = element.border_type,
-    border_type = _element$border_type === void 0 ? _constants2.IMAGE_BORDER_TYPE[0].type : _element$border_type;
+    border_type = _element$border_type === void 0 ? _constants3.IMAGE_BORDER_TYPE[0].type : _element$border_type;
   var _parentNodeEntry$ = parentNodeEntry[0],
     _parentNodeEntry$$ali = _parentNodeEntry$.align,
     align = _parentNodeEntry$$ali === void 0 ? 'left' : _parentNodeEntry$$ali,
@@ -53,28 +61,82 @@ var ImageHoverMenu = function ImageHoverMenu(_ref) {
     setIsShowImagePreview = _useState4[1];
   var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    isShowTooltip = _useState6[0],
-    setIsShowTooltip = _useState6[1];
+    isShowImageLinkPopover = _useState6[0],
+    setIsShowImageLinkPopover = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    isShowTooltip = _useState8[0],
+    setIsShowTooltip = _useState8[1];
+  var isWiki = editor.editorType === _constants.WIKI_EDITOR;
+  var currentHref = data.href;
   (0, _react.useEffect)(function () {
     setIsShowTooltip(true);
   }, []);
+  var updateImageLink = (0, _react.useCallback)(function (href) {
+    var path = _slateReact.ReactEditor.findPath(editor, element);
+    var oldHref = data.href,
+      linked_wiki_id = data.linked_wiki_id,
+      linked_wiki_page_id = data.linked_wiki_page_id,
+      newData = (0, _objectWithoutProperties2["default"])(data, _excluded);
+    var normalizedHref = (0, _linkHelpers.normalizeWebUrl)(href);
+    _slate.Transforms.setNodes(editor, {
+      data: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, newData), {}, {
+        href: normalizedHref
+      })
+    }, {
+      at: path
+    });
+    setIsShowImageLinkPopover(false);
+    onHideImageHoverMenu();
+  }, [data, editor, element, onHideImageHoverMenu]);
+  var updateImagePageLink = (0, _react.useCallback)(function (pageId, wikiId) {
+    var path = _slateReact.ReactEditor.findPath(editor, element);
+    var href = data.href,
+      linked_wiki_id = data.linked_wiki_id,
+      linked_wiki_page_id = data.linked_wiki_page_id,
+      newData = (0, _objectWithoutProperties2["default"])(data, _excluded2);
+    _slate.Transforms.setNodes(editor, {
+      data: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, newData), {}, {
+        href: (0, _linkHelpers.getImageWikiPageUrl)(wikiId, pageId),
+        linked_wiki_id: wikiId,
+        linked_wiki_page_id: pageId
+      })
+    }, {
+      at: path
+    });
+    setIsShowImageLinkPopover(false);
+    onHideImageHoverMenu();
+  }, [data, editor, element, onHideImageHoverMenu]);
+  var removeImageLink = (0, _react.useCallback)(function () {
+    var path = _slateReact.ReactEditor.findPath(editor, element);
+    var href = data.href,
+      linked_wiki_id = data.linked_wiki_id,
+      linked_wiki_page_id = data.linked_wiki_page_id,
+      newData = (0, _objectWithoutProperties2["default"])(data, _excluded3);
+    _slate.Transforms.setNodes(editor, {
+      data: newData
+    }, {
+      at: path
+    });
+    setIsShowImageLinkPopover(false);
+    onHideImageHoverMenu();
+  }, [data, editor, element, onHideImageHoverMenu]);
   var onShowProver = (0, _react.useCallback)(function (event, showProverKey) {
     event.stopPropagation();
-    var newPopoverState = popoverState;
-    for (var key in newPopoverState) {
-      if (key === showProverKey) {
-        newPopoverState[key] = !newPopoverState[key];
-      } else {
-        newPopoverState[key] = false;
+    setIsShowImageLinkPopover(false);
+    setPopoverState(function (prevState) {
+      var nextState = {};
+      for (var key in prevState) {
+        nextState[key] = key === showProverKey ? !prevState[key] : false;
       }
-    }
-    setPopoverState((0, _objectSpread2["default"])({}, newPopoverState));
-  }, [popoverState]);
+      return nextState;
+    });
+  }, []);
   var onSelect = (0, _react.useCallback)(function (event, props) {
     event.stopPropagation();
     var path = _slateReact.ReactEditor.findPath(editor, element);
     if (path) {
-      if (props['display_type'] === _constants.IMAGE_BLOCK && type === _constants.PARAGRAPH) {
+      if (props['display_type'] === _constants2.IMAGE_BLOCK && type === _constants2.PARAGRAPH) {
         // Remove old node
         var nodeEntry = _slate.Editor.node(editor, [path[0]]);
         var newNodeEntry = JSON.parse(JSON.stringify(nodeEntry.slice(0)));
@@ -96,14 +158,14 @@ var ImageHoverMenu = function ImageHoverMenu(_ref) {
           var _item$text;
           return (item === null || item === void 0 ? void 0 : (_item$text = item.text) === null || _item$text === void 0 ? void 0 : _item$text.length) === 0;
         })) {
-          beforeNode = (0, _core.generateEmptyElement)(_constants.PARAGRAPH);
+          beforeNode = (0, _core.generateEmptyElement)(_constants2.PARAGRAPH);
           beforeNode.children = beforeLeaf;
           _slate.Transforms.insertNodes(editor, beforeNode, {
             at: [p]
           });
           p = p + 1;
         }
-        centerNode = (0, _core.generateEmptyElement)(_constants.IMAGE_BLOCK);
+        centerNode = (0, _core.generateEmptyElement)(_constants2.IMAGE_BLOCK);
         centerNode.children = imageLeaf;
         _slate.Transforms.insertNodes(editor, centerNode, {
           at: [p]
@@ -113,7 +175,7 @@ var ImageHoverMenu = function ImageHoverMenu(_ref) {
           var _item$text2;
           return (item === null || item === void 0 ? void 0 : (_item$text2 = item.text) === null || _item$text2 === void 0 ? void 0 : _item$text2.length) === 0;
         })) {
-          afterNode = (0, _core.generateEmptyElement)(_constants.PARAGRAPH);
+          afterNode = (0, _core.generateEmptyElement)(_constants2.PARAGRAPH);
           afterNode.children = afterLeaf;
           _slate.Transforms.insertNodes(editor, afterNode, {
             at: [p]
@@ -121,13 +183,13 @@ var ImageHoverMenu = function ImageHoverMenu(_ref) {
         }
         return;
       }
-      if (props['display_type'] === _constants.PARAGRAPH && type === _constants.IMAGE_BLOCK) {
+      if (props['display_type'] === _constants2.PARAGRAPH && type === _constants2.IMAGE_BLOCK) {
         var _nodeEntry = _slate.Editor.node(editor, [path[0]]);
         var _newNodeEntry = JSON.parse(JSON.stringify(_nodeEntry.slice(0)));
         _slate.Transforms.removeNodes(editor, {
           at: [path[0]]
         });
-        var newNode = (0, _core.generateEmptyElement)(_constants.PARAGRAPH);
+        var newNode = (0, _core.generateEmptyElement)(_constants2.PARAGRAPH);
         newNode.children = _newNodeEntry[0].children;
         _slate.Transforms.insertNodes(editor, newNode, {
           at: [path[0]]
@@ -166,10 +228,11 @@ var ImageHoverMenu = function ImageHoverMenu(_ref) {
   }, []);
   return /*#__PURE__*/_react["default"].createElement(_commons.ElementPopover, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-image-hover-menu-container",
+    ref: menuRef,
     style: menuPosition
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "hover-menu-container"
-  }, ![_constants.TABLE, _constants.BLOCKQUOTE, _constants.CALL_OUT, _constants.MULTI_COLUMN].includes(type) && !readonly && /*#__PURE__*/_react["default"].createElement("span", {
+  }, ![_constants2.TABLE, _constants2.BLOCKQUOTE, _constants2.CALL_OUT, _constants2.MULTI_COLUMN].includes(type) && !readonly && /*#__PURE__*/_react["default"].createElement("span", {
     className: "op-group-item"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     role: "button",
@@ -181,11 +244,11 @@ var ImageHoverMenu = function ImageHoverMenu(_ref) {
     }
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "mr-1"
-  }, t(type === _constants.IMAGE_BLOCK ? 'Block' : 'Inline')), /*#__PURE__*/_react["default"].createElement("i", {
+  }, t(type === _constants2.IMAGE_BLOCK ? 'Block' : 'Inline')), /*#__PURE__*/_react["default"].createElement("i", {
     className: "sdocfont sdoc-arrow-down"
   }), popoverState.displayPopover && /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-image-popover sdoc-dropdown-menu"
-  }, _constants2.IMAGE_DISPLAY_TYPE.map(function (item) {
+  }, _constants3.IMAGE_DISPLAY_TYPE.map(function (item) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: item.value,
       className: (0, _classnames["default"])('sdoc-dropdown-menu-item', {
@@ -201,7 +264,7 @@ var ImageHoverMenu = function ImageHoverMenu(_ref) {
     }));
   })))), !readonly && /*#__PURE__*/_react["default"].createElement("span", {
     className: "op-group-item"
-  }, type === _constants.IMAGE_BLOCK && /*#__PURE__*/_react["default"].createElement("span", {
+  }, type === _constants2.IMAGE_BLOCK && /*#__PURE__*/_react["default"].createElement("span", {
     id: "sdoc_image_alignment",
     role: "button",
     className: (0, _classnames["default"])('op-item', {
@@ -216,7 +279,7 @@ var ImageHoverMenu = function ImageHoverMenu(_ref) {
     className: "sdocfont sdoc-arrow-down"
   }), popoverState.alignPopover && /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-image-popover align-popover sdoc-dropdown-menu"
-  }, _constants.MENUS_CONFIG_MAP[_constants.TEXT_ALIGN].map(function (item) {
+  }, _constants2.MENUS_CONFIG_MAP[_constants2.TEXT_ALIGN].map(function (item) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: item.id,
       className: (0, _classnames["default"])('sdoc-dropdown-menu-item', {
@@ -241,7 +304,7 @@ var ImageHoverMenu = function ImageHoverMenu(_ref) {
     role: "button",
     className: (0, _classnames["default"])('op-item', {
       'active': popoverState.borderPopover,
-      'ml-1': ![_constants.TABLE, _constants.BLOCKQUOTE, _constants.CALL_OUT, _constants.MULTI_COLUMN].includes(type)
+      'ml-1': ![_constants2.TABLE, _constants2.BLOCKQUOTE, _constants2.CALL_OUT, _constants2.MULTI_COLUMN].includes(type)
     }),
     onClick: function onClick(e) {
       onShowProver(e, 'borderPopover');
@@ -252,7 +315,7 @@ var ImageHoverMenu = function ImageHoverMenu(_ref) {
     className: "sdocfont sdoc-arrow-down"
   }), popoverState.borderPopover && /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-image-popover border-popover sdoc-dropdown-menu"
-  }, _constants2.IMAGE_BORDER_TYPE.map(function (item) {
+  }, _constants3.IMAGE_BORDER_TYPE.map(function (item) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: item.type,
       className: "sdoc-dropdown-menu-item sdoc-dropdown-item-with-left-icon pr-2",
@@ -274,7 +337,7 @@ var ImageHoverMenu = function ImageHoverMenu(_ref) {
     target: "sdoc_image_border",
     placement: "top",
     fade: true
-  }, t('Image_border'))), type === _constants.IMAGE_BLOCK && /*#__PURE__*/_react["default"].createElement("span", {
+  }, t('Image_border'))), type === _constants2.IMAGE_BLOCK && /*#__PURE__*/_react["default"].createElement("span", {
     id: "sdoc_image_caption",
     role: "button",
     className: (0, _classnames["default"])('op-item', 'ml-1', {
@@ -291,7 +354,36 @@ var ImageHoverMenu = function ImageHoverMenu(_ref) {
     target: "sdoc_image_caption",
     placement: "top",
     fade: true
-  }, t('Caption')))), /*#__PURE__*/_react["default"].createElement("span", {
+  }, t('Caption'))), /*#__PURE__*/_react["default"].createElement("span", {
+    id: "sdoc_image_link",
+    role: "button",
+    className: (0, _classnames["default"])('op-item', 'ml-1', {
+      'active': currentHref || isShowImageLinkPopover
+    }),
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      setPopoverState({
+        displayPopover: false,
+        alignPopover: false,
+        borderPopover: false
+      });
+      setIsShowImageLinkPopover(!isShowImageLinkPopover);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-link"
+  }), isShowTooltip && !isShowImageLinkPopover && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "sdoc_image_link",
+    placement: "top",
+    fade: true
+  }, t(currentHref ? 'Edit_link' : 'Insert_link')), isShowImageLinkPopover && /*#__PURE__*/_react["default"].createElement(_imageLinkPopover["default"], {
+    editor: editor,
+    href: currentHref,
+    linkedPageId: isWiki ? data.linked_wiki_page_id : '',
+    linkedWikiId: isWiki ? data.linked_wiki_id : '',
+    onRemove: removeImageLink,
+    onSelectPage: updateImagePageLink,
+    onSubmit: updateImageLink
+  }))), /*#__PURE__*/_react["default"].createElement("span", {
     className: "op-group-item"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     id: "sdoc_image_full_screen_mode",

package/dist/extension/plugins/image/link-helpers.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalizeWebUrl = exports.isValidWebUrl = exports.isInternalWebUrl = exports.isCurrentServerUrl = exports.getOnlyImageChild = exports.getImageWikiPageUrl = void 0;
+var _context = _interopRequireDefault(require("../../../context"));
+var _helpers = require("../wiki-link/helpers");
+var normalizeWebUrl = exports.normalizeWebUrl = function normalizeWebUrl() {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  if (typeof value !== 'string') return '';
+  var url = value.trim();
+  if (!/^https?:\/\//i.test(url)) return '';
+  try {
+    var parsedUrl = new URL(url);
+    return ['http:', 'https:'].includes(parsedUrl.protocol) && parsedUrl.hostname ? url : '';
+  } catch (error) {
+    return '';
+  }
+};
+var isValidWebUrl = exports.isValidWebUrl = function isValidWebUrl() {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return Boolean(normalizeWebUrl(value));
+};
+var isInternalWebUrl = exports.isInternalWebUrl = function isInternalWebUrl() {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var url = normalizeWebUrl(value);
+  var serviceUrl = _context["default"].getSetting('serviceUrl');
+  if (!url || !serviceUrl) return false;
+  try {
+    return new URL(url).origin === new URL(serviceUrl).origin;
+  } catch (error) {
+    return false;
+  }
+};
+var isCurrentServerUrl = exports.isCurrentServerUrl = isInternalWebUrl;
+var getOnlyImageChild = exports.getOnlyImageChild = function getOnlyImageChild(element) {
+  var _meaningfulChildren$;
+  var meaningfulChildren = Array.from((element === null || element === void 0 ? void 0 : element.childNodes) || []).filter(function (child) {
+    var _child$textContent;
+    if (child.nodeType === 8) return false;
+    return child.nodeType !== 3 || Boolean((_child$textContent = child.textContent) === null || _child$textContent === void 0 ? void 0 : _child$textContent.trim());
+  });
+  if (meaningfulChildren.length !== 1 || ((_meaningfulChildren$ = meaningfulChildren[0]) === null || _meaningfulChildren$ === void 0 ? void 0 : _meaningfulChildren$.nodeName) !== 'IMG') return null;
+  return meaningfulChildren[0];
+};
+var getImageWikiPageUrl = exports.getImageWikiPageUrl = function getImageWikiPageUrl(wikiId, pageId) {
+  if (!wikiId || !pageId) return '';
+  var wikiUrl = (0, _helpers.getWikiUrl)(wikiId, pageId, false);
+  var serviceUrl = _context["default"].getSetting('serviceUrl');
+  if (!serviceUrl) return wikiUrl;
+  try {
+    return new URL(wikiUrl, serviceUrl).toString();
+  } catch (error) {
+    return wikiUrl;
+  }
+};

package/dist/extension/plugins/image/plugin.js

@@ -78,7 +78,8 @@ var withImage = function withImage(editor) {
     insertData(data);
   };
   newEditor.insertFragment = function (data) {
-    var singleImage = (0, _helpers.getSingleImageFromFragment)(data);
+    var fragment = editor.editorType === _constants.WIKI_EDITOR ? data : (0, _helpers.removeImageWikiPageLinks)(data);
+    var singleImage = (0, _helpers.getSingleImageFromFragment)(fragment);
     if (singleImage && (0, _helpers.isInsertImageMenuDisabled)(editor)) {
       var path = _slate.Editor.path(editor, editor.selection);
       var nextPath = _slate.Path.next([path[0]]);
@@ -95,7 +96,7 @@ var withImage = function withImage(editor) {
     if (singleImage) {
       (0, _helpers.resetCursor)(newEditor);
     }
-    return insertFragment(data);
+    return insertFragment(fragment);
   };
   newEditor.imageOnKeyDown = function (e) {
     if (e.keyCode === 13) {

package/dist/extension/plugins/image/popover/image-link-popover/helpers.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getWikiPageLinkOptions = exports.getFuzzyPageResults = void 0;
+Object.defineProperty(exports, "isValidWebUrl", {
+  enumerable: true,
+  get: function get() {
+    return _linkHelpers.isValidWebUrl;
+  }
+});
+var _linkHelpers = require("../../link-helpers");
+var normalizeText = function normalizeText() {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return value.normalize('NFKC').toLocaleLowerCase().trim();
+};
+var getFuzzyScore = function getFuzzyScore(value, query) {
+  var normalizedValue = normalizeText(value);
+  var normalizedQuery = normalizeText(query);
+  if (!normalizedQuery) return 0;
+  if (normalizedValue === normalizedQuery) return 0;
+  if (normalizedValue.startsWith(normalizedQuery)) return 1;
+  var includedAt = normalizedValue.indexOf(normalizedQuery);
+  if (includedAt > -1) return 2 + includedAt;
+  var queryIndex = 0;
+  var firstMatchIndex = -1;
+  var previousMatchIndex = -1;
+  var gapScore = 0;
+  for (var valueIndex = 0; valueIndex < normalizedValue.length && queryIndex < normalizedQuery.length; valueIndex++) {
+    if (normalizedValue[valueIndex] !== normalizedQuery[queryIndex]) continue;
+    if (firstMatchIndex === -1) firstMatchIndex = valueIndex;
+    if (previousMatchIndex > -1) gapScore += valueIndex - previousMatchIndex - 1;
+    previousMatchIndex = valueIndex;
+    queryIndex++;
+  }
+  if (queryIndex !== normalizedQuery.length) return null;
+  return 100 + firstMatchIndex + gapScore;
+};
+var getFuzzyPageResults = exports.getFuzzyPageResults = function getFuzzyPageResults() {
+  var pages = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var query = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var limit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 8;
+  return pages.map(function (page, index) {
+    var nameScore = getFuzzyScore(page === null || page === void 0 ? void 0 : page.name, query);
+    return {
+      page: page,
+      index: index,
+      score: nameScore
+    };
+  }).filter(function (item) {
+    var _item$page;
+    return ((_item$page = item.page) === null || _item$page === void 0 ? void 0 : _item$page.id) && item.score !== null;
+  }).sort(function (a, b) {
+    return a.score - b.score || a.index - b.index;
+  }).slice(0, limit).map(function (item) {
+    return item.page;
+  });
+};
+var getWikiPageLinkOptions = exports.getWikiPageLinkOptions = function getWikiPageLinkOptions() {
+  var pages = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var query = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var linkedPageId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var linkedWikiId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
+  var limit = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 8;
+  var isLinkedPage = function isLinkedPage(page) {
+    return (page === null || page === void 0 ? void 0 : page.id) === linkedPageId && (!linkedWikiId || (page === null || page === void 0 ? void 0 : page.wikiRepoId) === linkedWikiId);
+  };
+  var linkedPage = pages.find(isLinkedPage) || null;
+  var searchablePages = linkedPage ? pages.filter(function (page) {
+    return !isLinkedPage(page);
+  }) : pages;
+  var pageResults = getFuzzyPageResults(searchablePages, query, limit);
+  var isLinkedPageMatched = Boolean(linkedPage && getFuzzyPageResults([linkedPage], query, 1).length);
+  return {
+    linkedPage: linkedPage,
+    pageResults: pageResults,
+    hasPageMatch: isLinkedPageMatched || pageResults.length > 0
+  };
+};