@seafile/sdoc-editor 0.1.27 → 0.1.28-beta1

package/dist/assets/css/diff-viewer.css

@@ -0,0 +1,13 @@
+.sdoc-diff-added {
+  background-color: #e6ffed;
+  padding: 0 5px;
+  margin: 0 -5px;
+  overflow: hidden;
+}
+
+.sdoc-diff-removed {
+  background-color: #ffeef0;
+  padding: 0 5px;
+  margin: 0 -5px;
+  overflow: hidden;
+}

package/dist/basic-sdk/assets/css/layout.css

@@ -1,8 +1,3 @@
-.dlThau {
-  margin: 0;
-  padding-inline-start: 24px;
-}
-
 .sdoc-editor-container {
   flex: 1;
   display: flex;

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

@@ -8,3 +8,64 @@
   margin: 0;
   padding-inline-start: 24px;
 }
+
+/* image */
+.sdoc-editor-container .article .sdoc-image {
+  position: relative;
+  display: inline-block;
+  margin: 0 3px;
+}
+
+.sdoc-editor-container .article .image-selected {
+  box-shadow: 0 0 0 2px #007bff;
+}
+
+.sdoc-editor-container .article .image-resizer {
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  right: -5px;
+  bottom: -5px;
+  background-color: #007bff;
+  border: 1px solid #fff;
+  cursor: se-resize;
+}
+
+.sdoc-editor-container .article .image-full-screen {
+  position: absolute;
+  height: 26px;
+  display: inline-block;
+  width: 26px;
+  top: 0;
+  right: -32px;
+  text-align: center;
+  line-height: 20px;
+  padding: 2px;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  background-color: #fff;
+  user-select: none!important;
+  z-index: 1000;
+}
+
+.sdoc-editor-container .article .image-full-screen:hover {
+  display: block;
+  background-color: #efefef;
+}
+
+.sdoc-editor-container .article .image-size {
+  display: inline-block;
+  padding: 5px;
+  height: 22px;
+  position: absolute;
+  bottom: -25px;
+  left: 100%;
+  transform: translateX(5px);
+  border-radius: 3px;
+  line-height: 12px;
+  color: #fff;
+  background-color: #4c4c4c;
+  font-size: 12px;
+}
+

package/dist/basic-sdk/extension/constants/element-type.js

@@ -0,0 +1,29 @@
+export var BLOCKQUOTE = 'blockquote';
+export var BOLD = 'bold';
+export var ITALIC = 'italic';
+export var HEADER = 'header';
+export var HEADER1 = 'header1';
+export var HEADER2 = 'header2';
+export var HEADER3 = 'header3';
+export var HEADER4 = 'header4';
+export var HEADER5 = 'header5';
+export var HEADER6 = 'header6';
+export var ORDERED_LIST = 'ordered_list';
+export var UNORDERED_LIST = 'unordered_list'; // unordered_list can not work
+export var LIST_ITEM = 'list-item';
+export var LIST_LIC = 'list-lic'; // placeholder
+export var CHECK_LIST = 'check-list';
+export var CHECK_LIST_ITEM = 'check-list-item';
+export var PARAGRAPH = 'paragraph';
+export var LINK = 'link';
+export var HTML = 'html';
+export var CODE_BLOCK = 'code-block';
+export var CODE_LINE = 'code-line';
+export var IMAGE = 'image';
+export var TABLE = 'table';
+export var TABLE_CELL = 'table-cell';
+export var TABLE_ROW = 'table-row';
+export var FORMULA = 'formula';
+export var COLUMN = 'column';
+export var TEXT_STYLE = 'text-style';
+export var BOLD_ITALIC = 'bold-italic';

package/dist/basic-sdk/extension/constants/index.js

@@ -1,35 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _MENUS_CONFIG_MAP, _HEADER_TITLE_MAP;
 // extension plugin
-export var BLOCKQUOTE = 'blockquote';
-export var BOLD = 'bold';
-export var ITALIC = 'italic';
-export var HEADER = 'header';
-export var HEADER1 = 'header1';
-export var HEADER2 = 'header2';
-export var HEADER3 = 'header3';
-export var HEADER4 = 'header4';
-export var HEADER5 = 'header5';
-export var HEADER6 = 'header6';
-export var ORDERED_LIST = 'ordered_list';
-export var UNORDERED_LIST = 'unordered_list'; // unordered_list can not work
-export var LIST_ITEM = 'list-item';
-export var LIST_LIC = 'list-lic'; // placeholder
-export var CHECK_LIST = 'check-list';
-export var CHECK_LIST_ITEM = 'check-list-item';
-export var PARAGRAPH = 'paragraph';
-export var LINK = 'link';
-export var HTML = 'html';
-export var CODE_BLOCK = 'code-block';
-export var CODE_LINE = 'code-line';
-export var IMAGE = 'image';
-export var TABLE = 'table';
-export var TABLE_CELL = 'table-cell';
-export var TABLE_ROW = 'table-row';
-export var FORMULA = 'formula';
-export var COLUMN = 'column';
-export var TEXTSTYLE = 'text-style';
-export var BOLD_ITALIC = 'bold-italic';
+import * as ELEMENT_TYPE from './element-type';
+import { BLOCKQUOTE, BOLD, ITALIC, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, PARAGRAPH, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, BOLD_ITALIC } from './element-type';
 
 // history
 export var UNDO = 'undo';
@@ -60,7 +33,11 @@ export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CO
   id: "sdoc_".concat(LINK),
   iconClass: 'iconfont icon-link',
   text: 'insert_link'
-}), _defineProperty(_MENUS_CONFIG_MAP, TEXTSTYLE, [{
+}), _defineProperty(_MENUS_CONFIG_MAP, IMAGE, {
+  id: "sdoc_".concat(IMAGE),
+  iconClass: 'iconfont icon-image',
+  text: 'insert_image'
+}), _defineProperty(_MENUS_CONFIG_MAP, TEXT_STYLE, [{
   id: ITALIC,
   iconClass: 'iconfont icon-italic',
   text: 'italic',
@@ -81,4 +58,11 @@ export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CO
   text: 'redo',
   type: 'redo'
 }), _MENUS_CONFIG_MAP);
-export var HEADER_TITLE_MAP = (_HEADER_TITLE_MAP = {}, _defineProperty(_HEADER_TITLE_MAP, HEADER1, 'header_one'), _defineProperty(_HEADER_TITLE_MAP, HEADER2, 'header_two'), _defineProperty(_HEADER_TITLE_MAP, HEADER3, 'header_three'), _defineProperty(_HEADER_TITLE_MAP, HEADER4, 'header_four'), _defineProperty(_HEADER_TITLE_MAP, HEADER5, 'header_five'), _defineProperty(_HEADER_TITLE_MAP, HEADER6, 'header_six'), _defineProperty(_HEADER_TITLE_MAP, PARAGRAPH, 'paragraph'), _HEADER_TITLE_MAP);
+export var HEADER_TITLE_MAP = (_HEADER_TITLE_MAP = {}, _defineProperty(_HEADER_TITLE_MAP, HEADER1, 'header_one'), _defineProperty(_HEADER_TITLE_MAP, HEADER2, 'header_two'), _defineProperty(_HEADER_TITLE_MAP, HEADER3, 'header_three'), _defineProperty(_HEADER_TITLE_MAP, HEADER4, 'header_four'), _defineProperty(_HEADER_TITLE_MAP, HEADER5, 'header_five'), _defineProperty(_HEADER_TITLE_MAP, HEADER6, 'header_six'), _defineProperty(_HEADER_TITLE_MAP, PARAGRAPH, 'paragraph'), _HEADER_TITLE_MAP);
+export var DIFF_TYPE = {
+  ADD: 'add',
+  DELETE: 'delete',
+  MODIFY: 'modify',
+  COMMON: 'common'
+};
+export { BLOCKQUOTE, BOLD, ITALIC, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, PARAGRAPH, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, BOLD_ITALIC, ELEMENT_TYPE };

package/dist/basic-sdk/extension/plugins/header/menu/index.js

@@ -6,6 +6,7 @@ import React from 'react';
 import { withTranslation } from 'react-i18next';
 import { getHeaderType, isMenuDisabled, setHeaderType } from '../helpers';
 import { HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, HEADER_TITLE_MAP, PARAGRAPH } from '../../../constants';
+import './style.css';
 var HeaderMenu = /*#__PURE__*/function (_React$Component) {
   _inherits(HeaderMenu, _React$Component);
   var _super = _createSuper(HeaderMenu);

package/dist/basic-sdk/extension/plugins/image/dialogs/image-previewer.js

@@ -0,0 +1,95 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import Lightbox from '@seafile/react-image-lightbox';
+import '@seafile/react-image-lightbox/style.css';
+var ImagePreviewer = /*#__PURE__*/function (_React$Component) {
+  _inherits(ImagePreviewer, _React$Component);
+  var _super = _createSuper(ImagePreviewer);
+  function ImagePreviewer(props) {
+    var _this;
+    _classCallCheck(this, ImagePreviewer);
+    _this = _super.call(this, props);
+    _this.getImageNodes = function (nodes) {
+      var nodeIndex = 0;
+      var list = [];
+      while (nodes && nodeIndex <= nodes.length - 1) {
+        var currentNode = nodes[nodeIndex];
+        if (currentNode.type === 'image') {
+          currentNode.data.src && list.push(currentNode.data.src);
+        } else {
+          list.push.apply(list, _toConsumableArray(_this.getImageNodes(currentNode.children)));
+        }
+        nodeIndex++;
+      }
+      return list;
+    };
+    _this.moveToPrevImage = function () {
+      _this.setState(function (prevState) {
+        return {
+          imageIndex: (prevState.imageIndex + _this.images.length - 1) % _this.images.length
+        };
+      });
+    };
+    _this.moveToNextImage = function () {
+      _this.setState(function (prevState) {
+        return {
+          imageIndex: (prevState.imageIndex + 1) % _this.images.length
+        };
+      });
+    };
+    var editor = props.editor,
+      imageUrl = props.imageUrl;
+    _this.images = _this.getImageNodes(editor.children);
+    _this.state = {
+      imageIndex: _this.images.findIndex(function (item) {
+        return item === imageUrl;
+      })
+    };
+    return _this;
+  }
+  _createClass(ImagePreviewer, [{
+    key: "render",
+    value: function render() {
+      var imageIndex = this.state.imageIndex;
+      var imageItemsLength = this.images.length;
+      var mainSrc = this.images[imageIndex] || '';
+      var imageTitle = '';
+      try {
+        imageTitle = mainSrc ? decodeURI(mainSrc.slice(mainSrc.lastIndexOf('/') + 1)) : '';
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error);
+      }
+      var imageTitleEl = /*#__PURE__*/React.createElement("span", {
+        className: "d-flex"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "text-truncate"
+      }, imageTitle), /*#__PURE__*/React.createElement("span", {
+        className: "flex-shrink-0"
+      }, "(", imageIndex + 1, "/", this.images.length, ")"));
+      return /*#__PURE__*/React.createElement(Lightbox, {
+        wrapperClassName: "sf-editor-image-previewer",
+        imageTitle: imageTitleEl,
+        mainSrc: mainSrc,
+        toolbarButtons: [],
+        nextSrc: this.images[(imageIndex + 1) % imageItemsLength],
+        prevSrc: this.images[(imageIndex + imageItemsLength - 1) % imageItemsLength],
+        onCloseRequest: this.props.toggleImagePreviewer,
+        onMovePrevRequest: this.moveToPrevImage,
+        onMoveNextRequest: this.moveToNextImage,
+        imagePadding: 70,
+        reactModalStyle: {
+          overlay: {
+            zIndex: 1071
+          }
+        }
+      });
+    }
+  }]);
+  return ImagePreviewer;
+}(React.Component);
+export default ImagePreviewer;

package/dist/basic-sdk/extension/plugins/image/dialogs/insert-web-image-dialog.js

@@ -0,0 +1,69 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import { withTranslation } from 'react-i18next';
+import { Modal, ModalHeader, ModalBody, ModalFooter, FormGroup, Label, Input, Button } from 'reactstrap';
+var InsertWebImageDialog = /*#__PURE__*/function (_Component) {
+  _inherits(InsertWebImageDialog, _Component);
+  var _super = _createSuper(InsertWebImageDialog);
+  function InsertWebImageDialog(props) {
+    var _this;
+    _classCallCheck(this, InsertWebImageDialog);
+    _this = _super.call(this, props);
+    _this.onValueChanged = function (event) {
+      var value = event.target.value;
+      _this.setState({
+        url: value
+      });
+    };
+    _this.onKeyDown = function (event) {
+      if (event.keyCode === 13) {
+        _this.handleSubmit();
+        return;
+      }
+    };
+    _this.handleSubmit = function () {
+      var url = _this.state.url;
+      if (!url) return;
+      _this.props.onInsertImage(url);
+    };
+    _this.onDialogToggle = function () {
+      _this.props.onDialogToggle();
+    };
+    _this.state = {
+      url: ''
+    };
+    return _this;
+  }
+  _createClass(InsertWebImageDialog, [{
+    key: "render",
+    value: function render() {
+      var t = this.props.t;
+      var url = this.state.url;
+      return /*#__PURE__*/React.createElement(Modal, {
+        isOpen: true,
+        toggle: this.onDialogToggle,
+        autoFocus: false
+      }, /*#__PURE__*/React.createElement(ModalHeader, null, t('insert_image')), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
+        for: "insert_image"
+      }, t('image_address')), /*#__PURE__*/React.createElement(Input, {
+        id: "insert_image",
+        autoFocus: true,
+        value: url,
+        onChange: this.onValueChanged,
+        onKeyDown: this.onKeyDown
+      }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+        color: "secondary",
+        onClick: this.onDialogToggle
+      }, t('cancel')), /*#__PURE__*/React.createElement(Button, {
+        color: "primary",
+        disabled: url.length === 0,
+        onClick: this.handleSubmit
+      }, t('submit'))));
+    }
+  }]);
+  return InsertWebImageDialog;
+}(Component);
+export default withTranslation('sdoc-editor')(InsertWebImageDialog);

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

@@ -0,0 +1,54 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { Editor, Range, Transforms } from '@seafile/slate';
+import { BLOCKQUOTE, CODE_BLOCK, IMAGE, ORDERED_LIST, UNORDERED_LIST } from '../../constants';
+import { generateEmptyElement, getNodeType } from '../../core';
+export var isInsertImageMenuDisabled = function isInsertImageMenuDisabled(editor) {
+  var selection = editor.selection;
+  if (selection === null) return true;
+  if (!Range.isCollapsed(selection)) return true;
+  var _Editor$nodes = Editor.nodes(editor, {
+      match: function match(n) {
+        var type = getNodeType(n);
+        if (type === CODE_BLOCK) return true;
+        if (type === ORDERED_LIST) return true;
+        if (type === UNORDERED_LIST) return true;
+        if (type.startsWith('header')) return true;
+        if (type === BLOCKQUOTE) return true;
+        if (Editor.isVoid(editor, n)) return true;
+        return false;
+      },
+      universal: true
+    }),
+    _Editor$nodes2 = _slicedToArray(_Editor$nodes, 1),
+    match = _Editor$nodes2[0];
+  if (match) return true;
+  return false;
+};
+export var generateImageNode = function generateImageNode(src) {
+  var element = generateEmptyElement(IMAGE);
+  return _objectSpread(_objectSpread({}, element), {}, {
+    data: {
+      src: src
+    }
+  });
+};
+export var insertImage = function insertImage(editor, src, selection) {
+  if (!src) return;
+  if (isInsertImageMenuDisabled(editor)) return;
+  var imageNode = generateImageNode(src);
+  Transforms.insertNodes(editor, imageNode, {
+    at: selection
+  });
+};
+export var updateImage = function updateImage(editor, data) {
+  Transforms.setNodes(editor, {
+    data: data
+  }, {
+    match: function match(n) {
+      return getNodeType(n) === IMAGE;
+    },
+    at: editor.selection,
+    voids: true
+  });
+};

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

@@ -0,0 +1,14 @@
+import { IMAGE } from '../../constants';
+import ImageMenu from './menu';
+import Image from './model';
+import withImage from './plugin';
+import renderImage from './render-elem';
+var ImagePlugin = {
+  type: IMAGE,
+  nodeType: 'element',
+  model: Image,
+  editorMenus: [ImageMenu],
+  editorPlugin: withImage,
+  renderElements: [renderImage]
+};
+export default ImagePlugin;

package/dist/basic-sdk/extension/plugins/image/menu/index.js

@@ -0,0 +1,150 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Fragment } from 'react';
+import { withTranslation } from 'react-i18next';
+import { insertImage, isInsertImageMenuDisabled } from '../helpers';
+import context from '../../../../../context';
+import { IMAGE, MENUS_CONFIG_MAP } from '../../../constants';
+import { MenuItem } from '../../../menu';
+import InsertWebImageDialog from '../dialogs/insert-web-image-dialog';
+import './style.css';
+var ImageMenu = /*#__PURE__*/function (_React$Component) {
+  _inherits(ImageMenu, _React$Component);
+  var _super = _createSuper(ImageMenu);
+  function ImageMenu(props) {
+    var _this;
+    _classCallCheck(this, ImageMenu);
+    _this = _super.call(this, props);
+    _this.registerEventHandler = function () {
+      document.addEventListener('mousedown', _this.onHideImageMenu);
+    };
+    _this.unregisterEventHandler = function () {
+      document.removeEventListener('mousedown', _this.onHideImageMenu);
+    };
+    _this.onHideImageMenu = function () {
+      _this.setState({
+        isShowImagePopover: false
+      }, function () {
+        _this.unregisterEventHandler();
+      });
+    };
+    _this.isActive = function () {
+      return false;
+    };
+    _this.isDisabled = function () {
+      var editor = _this.props.editor;
+      return isInsertImageMenuDisabled(editor);
+    };
+    _this.onToggleClick = function (event) {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      var isShowImagePopover = !_this.state.isShowImagePopover;
+      if (isShowImagePopover) {
+        _this.setState({
+          isShowImagePopover: isShowImagePopover
+        }, function () {
+          _this.registerEventHandler();
+        });
+      } else {
+        _this.setState({
+          isShowImagePopover: isShowImagePopover
+        }, function () {
+          _this.unregisterEventHandler();
+        });
+      }
+    };
+    _this.onInsertWebImageToggle = function () {
+      var editor = _this.props.editor;
+      _this.selection = editor.selection;
+      _this.setState({
+        isShowInsertImageDialog: true,
+        isShowImagePopover: false
+      }, function () {
+        _this.unregisterEventHandler();
+      });
+    };
+    _this.onInsertLocalImageToggle = function () {
+      var editor = _this.props.editor;
+      _this.selection = editor.selection;
+      _this.input.click();
+      _this.setState({
+        isShowImagePopover: false
+      }, function () {
+        _this.unregisterEventHandler();
+      });
+    };
+    _this.onInsertImage = function (url) {
+      var editor = _this.props.editor;
+      insertImage(editor, url, _this.selection);
+      _this.onCloseInsertDialog();
+    };
+    _this.onCloseInsertDialog = function () {
+      _this.setState({
+        isShowInsertImageDialog: false
+      });
+    };
+    _this.onFileChanged = function (event) {
+      var editor = _this.props.editor;
+      var file = event.target.files[0];
+      context.uploadLocalImage(file).then(function (fileUrl) {
+        console.log(fileUrl);
+        insertImage(editor, fileUrl, _this.selection);
+        console.log(editor.children);
+      });
+    };
+    _this.setInputRef = function (ref) {
+      _this.input = ref;
+    };
+    _this.state = {
+      isShowImagePopover: false,
+      isShowInsertImageDialog: false
+    };
+    return _this;
+  }
+  _createClass(ImageMenu, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        isRichEditor = _this$props.isRichEditor,
+        className = _this$props.className,
+        t = _this$props.t;
+      var _this$state = this.state,
+        isShowImagePopover = _this$state.isShowImagePopover,
+        isShowInsertImageDialog = _this$state.isShowInsertImageDialog;
+      var menuConfig = MENUS_CONFIG_MAP[IMAGE];
+      var props = _objectSpread(_objectSpread({
+        isRichEditor: isRichEditor,
+        className: className
+      }, menuConfig), {}, {
+        disabled: this.isDisabled(),
+        isActive: this.isActive(),
+        onMouseDown: this.onToggleClick
+      });
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "image-menu"
+      }, /*#__PURE__*/React.createElement("input", {
+        ref: this.setInputRef,
+        type: "file",
+        accept: "image/*",
+        className: "locale-image-uploader",
+        onChange: this.onFileChanged
+      }), /*#__PURE__*/React.createElement(MenuItem, props), isShowImagePopover && /*#__PURE__*/React.createElement("div", {
+        className: "image-popover"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "image-menu-item",
+        onMouseDown: this.onInsertWebImageToggle
+      }, t('insert_network_image')), /*#__PURE__*/React.createElement("div", {
+        className: "image-menu-item",
+        onMouseDown: this.onInsertLocalImageToggle
+      }, t('upload_local_image')))), isShowInsertImageDialog && /*#__PURE__*/React.createElement(InsertWebImageDialog, {
+        onInsertImage: this.onInsertImage,
+        onDialogToggle: this.onCloseInsertDialog
+      }));
+    }
+  }]);
+  return ImageMenu;
+}(React.Component);
+export default withTranslation('sdoc-editor')(ImageMenu);

package/dist/basic-sdk/extension/plugins/image/menu/style.css

@@ -0,0 +1,43 @@
+.image-menu {
+  position: relative;
+}
+
+.image-menu .image-popover {
+  position: absolute;
+  top: 36px;
+  left: 0px;
+  padding: 8px 0;
+  background-color: #fff;
+  border: 1px solid #e5e6e8;
+  border-radius: 2px;
+  box-shadow: 0 0 10px #ccc;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  z-index: 10;
+  white-space:nowrap;
+}
+
+.image-menu .image-popover .image-menu-item {
+  cursor: pointer;
+  height: 30px;
+  padding: 4px 24px;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  font-size: 0.9375rem;
+}
+
+.image-menu .image-popover .image-menu-item:hover {
+  background-color: rgb(245, 245, 245);
+}
+
+.image-menu .locale-image-uploader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  font-size: 0;
+}

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

@@ -0,0 +1,14 @@
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import { IMAGE } from '../../constants';
+var Image = /*#__PURE__*/_createClass(function Image(options) {
+  _classCallCheck(this, Image);
+  this.type = options.type || IMAGE;
+  this.data = options.data || {
+    src: ''
+  };
+  this.children = options.children || [{
+    text: ''
+  }];
+});
+export default Image;

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

@@ -0,0 +1,37 @@
+import context from '../../../../context';
+import { insertImage } from './helpers';
+var withImage = function withImage(editor) {
+  var isInline = editor.isInline,
+    isVoid = editor.isVoid,
+    insertData = editor.insertData;
+  var newEditor = editor;
+
+  // rewrite isInline
+  newEditor.isInline = function (elem) {
+    var type = elem.type;
+    if (type === 'image') {
+      return true;
+    }
+    return isInline(elem);
+  };
+
+  // rewrite isVoid
+  newEditor.isVoid = function (elem) {
+    var type = elem.type;
+    if (type === 'image') {
+      return true;
+    }
+    return isVoid(elem);
+  };
+  newEditor.insertData = function (data) {
+    if (data.types && data.types.includes('Files') && data.files[0].type.includes('image')) {
+      context.uploadLocalImage(data.files[0]).then(function (fileUrl) {
+        insertImage(newEditor, fileUrl, editor.selection);
+      });
+      return;
+    }
+    insertData(data);
+  };
+  return newEditor;
+};
+export default withImage;