@seafile/sdoc-editor 0.3.27 → 0.3.28

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

@@ -22,6 +22,7 @@ export const LINK = 'link';
 export const SDOC_LINK = 'sdoc_link';
 export const FILE_LINK = 'file_link';
 export const IMAGE = 'image';
+export const IMAGE_BLOCK = 'image_block';
 export const CALL_OUT = 'callout';
 
 // font

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

@@ -1,6 +1,6 @@
 // extension plugin
 import * as ELEMENT_TYPE from './element-type';
-import { BLOCKQUOTE, TITLE, SUBTITLE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, CHECK_LIST_ITEM, CODE_BLOCK, CODE_LINE, TABLE, TABLE_CELL, TABLE_ROW, LINK, SDOC_LINK, FILE_LINK, IMAGE, TOP_LEVEL_TYPES, INLINE_LEVEL_TYPES, CALL_OUT } from './element-type';
+import { BLOCKQUOTE, TITLE, SUBTITLE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, CHECK_LIST_ITEM, CODE_BLOCK, CODE_LINE, TABLE, TABLE_CELL, TABLE_ROW, LINK, SDOC_LINK, FILE_LINK, IMAGE, IMAGE_BLOCK, TOP_LEVEL_TYPES, INLINE_LEVEL_TYPES, CALL_OUT } from './element-type';
 export { DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_LIST, DEFAULT_FONT_COLOR, RECENT_USED_HIGHLIGHT_COLORS_KEY, RECENT_USED_FONT_COLORS_KEY, RECENT_USED_TABLE_CELL_BACKGROUND_COLORS_KEY, DEFAULT_LAST_USED_FONT_COLOR, DEFAULT_LAST_USED_HIGHLIGHT_COLOR, DEFAULT_LAST_USED_TABLE_CELL_BACKGROUND_COLOR } from './color';
 export { FONT_SIZE, DEFAULT_FONT, FONT, GOOGLE_FONT_CLASS, RECENT_USED_FONTS_KEY, SDOC_FONT_SIZE } from './font';
 export { DIFF_TYPE, ADDED_STYLE, DELETED_STYLE } from './diff-view';
@@ -55,4 +55,4 @@ export const MOUSE_ENTER_EVENT_DISABLED_MAP = {
   [HEADER6]: [CALL_OUT],
   [CALL_OUT]: [CALL_OUT]
 };
-export { ELEMENT_TYPE, BLOCKQUOTE, TITLE, SUBTITLE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, CHECK_LIST_ITEM, CODE_BLOCK, CODE_LINE, TABLE, TABLE_CELL, TABLE_ROW, LINK, SDOC_LINK, FILE_LINK, IMAGE, TOP_LEVEL_TYPES, INLINE_LEVEL_TYPES, CALL_OUT };
+export { ELEMENT_TYPE, BLOCKQUOTE, TITLE, SUBTITLE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, CHECK_LIST_ITEM, CODE_BLOCK, CODE_LINE, TABLE, TABLE_CELL, TABLE_ROW, LINK, SDOC_LINK, FILE_LINK, IMAGE, IMAGE_BLOCK, TOP_LEVEL_TYPES, INLINE_LEVEL_TYPES, CALL_OUT };

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

@@ -1,7 +1,13 @@
 import blackBorder from '../../../../assets/images/black-border.png';
 import greyBorder from '../../../../assets/images/grey-border.png';
 import noBorder from '../../../../assets/images/no-border.png';
-export const IMAGE_DISPLAY_TYPE = ['Inline', 'Block'];
+export const IMAGE_DISPLAY_TYPE = [{
+  text: 'Inline',
+  value: 'paragraph'
+}, {
+  text: 'Block',
+  value: 'image_block'
+}];
 export const IMAGE_BORDER_TYPE = [{
   type: 'none',
   imgUrl: noBorder,

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

@@ -1,31 +1,35 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useCallback, useEffect, useState } from 'react';
-import { Transforms } from '@seafile/slate';
+import { Editor, Transforms } from '@seafile/slate';
 import { ReactEditor } from '@seafile/slate-react';
 import { withTranslation } from 'react-i18next';
 import classnames from 'classnames';
 import { ElementPopover } from '../../../commons';
 import Tooltip from '../../../../../components/tooltip';
 import ImagePreviewer from '../dialogs/image-previewer';
+import { generateEmptyElement } from '../../../core';
 import { getImageURL } from '../helpers';
 import { IMAGE_DISPLAY_TYPE, IMAGE_BORDER_TYPE } from '../constants';
-import { MENUS_CONFIG_MAP, TEXT_ALIGN } from '../../../constants';
+import { MENUS_CONFIG_MAP, TEXT_ALIGN, PARAGRAPH, IMAGE_BLOCK } from '../../../constants';
 import './index.css';
 const ImageHoverMenu = _ref => {
   let {
     editor,
     menuPosition,
     element,
+    parentNodeEntry,
     onHideImageHoverMenu,
     onShowCaption,
     t
   } = _ref;
   const {
     data,
-    display_type = IMAGE_DISPLAY_TYPE[0],
-    align,
     border_type = IMAGE_BORDER_TYPE[0].type
   } = element;
+  const {
+    align = 'left',
+    type
+  } = parentNodeEntry[0];
   const {
     caption = ''
   } = data;
@@ -55,11 +59,73 @@ const ImageHoverMenu = _ref => {
     event.stopPropagation();
     const path = ReactEditor.findPath(editor, element);
     if (path) {
-      Transforms.setNodes(editor, props, {
-        at: path
-      });
+      if (props['display_type'] === IMAGE_BLOCK && type === PARAGRAPH) {
+        // Remove old node
+        const nodeEntry = Editor.node(editor, [path[0]]);
+        const newNodeEntry = JSON.parse(JSON.stringify(nodeEntry.slice(0)));
+        Transforms.removeNodes(editor, {
+          at: [path[0]]
+        });
+        // Insert new node
+        const index = newNodeEntry[0].children.findIndex(item => item.id === element.id);
+        const beforeLeaf = newNodeEntry[0].children.slice(0, index);
+        const imageLeaf = newNodeEntry[0].children.slice(index, index + 1);
+        const afterLeaf = newNodeEntry[0].children.slice(index + 1);
+        let beforeNode = null,
+          centerNode = null,
+          afterNode = null;
+        let p = path[0];
+        if (!beforeLeaf.every(item => item.text.length === 0)) {
+          beforeNode = generateEmptyElement(PARAGRAPH);
+          beforeNode.children = beforeLeaf;
+          Transforms.insertNodes(editor, beforeNode, {
+            at: [p]
+          });
+          p = p + 1;
+        }
+        centerNode = generateEmptyElement(IMAGE_BLOCK);
+        centerNode.children = imageLeaf;
+        Transforms.insertNodes(editor, centerNode, {
+          at: [p]
+        });
+        p = p + 1;
+        if (!afterLeaf.every(item => item.text.length === 0)) {
+          afterNode = generateEmptyElement(PARAGRAPH);
+          afterNode.children = afterLeaf;
+          Transforms.insertNodes(editor, afterNode, {
+            at: [p]
+          });
+        }
+        return;
+      }
+      if (props['display_type'] === PARAGRAPH && type === IMAGE_BLOCK) {
+        const nodeEntry = Editor.node(editor, [path[0]]);
+        const newNodeEntry = JSON.parse(JSON.stringify(nodeEntry.slice(0)));
+        Transforms.removeNodes(editor, {
+          at: [path[0]]
+        });
+        const newNode = generateEmptyElement(PARAGRAPH);
+        newNode.children = newNodeEntry[0].children;
+        Transforms.insertNodes(editor, newNode, {
+          at: [path[0]]
+        });
+        return;
+      }
+      if (props['align']) {
+        Transforms.setNodes(editor, props, {
+          at: [path[0]]
+        });
+        onHideImageHoverMenu();
+        return;
+      }
+      if (props['border_type']) {
+        Transforms.setNodes(editor, props, {
+          at: path
+        });
+        onHideImageHoverMenu();
+        return;
+      }
     }
-    onHideImageHoverMenu();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React.createElement(ElementPopover, null, /*#__PURE__*/React.createElement("div", {
@@ -79,11 +145,11 @@ const ImageHoverMenu = _ref => {
     }
   }, /*#__PURE__*/React.createElement("span", {
     className: "mr-1"
-  }, t(display_type || IMAGE_DISPLAY_TYPE[0])), /*#__PURE__*/React.createElement("i", {
+  }, t(type === IMAGE_BLOCK ? 'Block' : 'Inline')), /*#__PURE__*/React.createElement("i", {
     className: "sdocfont sdoc-drop-down icon-font"
   }))), /*#__PURE__*/React.createElement("span", {
     className: "op-group-item"
-  }, display_type === IMAGE_DISPLAY_TYPE[1] && /*#__PURE__*/React.createElement("span", {
+  }, type === IMAGE_BLOCK && /*#__PURE__*/React.createElement("span", {
     role: "button",
     className: classnames('op-item', {
       'active': popoverState.alignPopover
@@ -112,7 +178,7 @@ const ImageHoverMenu = _ref => {
     target: "sdoc_image_border",
     placement: "top",
     fade: true
-  }, t('Image_border'))), display_type === IMAGE_DISPLAY_TYPE[1] && /*#__PURE__*/React.createElement("span", {
+  }, t('Image_border'))), type === IMAGE_BLOCK && /*#__PURE__*/React.createElement("span", {
     id: "sdoc_image_caption",
     role: "button",
     className: classnames('op-item', 'ml-1', {
@@ -147,16 +213,16 @@ const ImageHoverMenu = _ref => {
     className: "sdoc-image-popover sdoc-dropdown-menu"
   }, IMAGE_DISPLAY_TYPE.map(item => {
     return /*#__PURE__*/React.createElement("div", {
-      key: item,
+      key: item.value,
       className: "sdoc-dropdown-menu-item sdoc-dropdown-item-with-left-icon pr-2",
       onClick: event => onSelect(event, {
-        display_type: item
+        'display_type': item.value
       })
     }, /*#__PURE__*/React.createElement("div", {
       className: "sdoc-dropdown-item-content"
     }, /*#__PURE__*/React.createElement("i", {
       className: "sdoc-dropdown-item-content-icon"
-    }), /*#__PURE__*/React.createElement("span", null, t(item))), display_type === item && /*#__PURE__*/React.createElement("i", {
+    }), /*#__PURE__*/React.createElement("span", null, t(item.text))), type === item.value && /*#__PURE__*/React.createElement("i", {
       className: "sdocfont sdoc-check-mark sdoc-dropdown-item-right-icon"
     }));
   })), popoverState.alignPopover && /*#__PURE__*/React.createElement("div", {

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

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

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

@@ -3,10 +3,10 @@ import toaster from '../../../../components/toast';
 import context from '../../../../context';
 import EventBus from '../../../utils/event-bus';
 import { insertImage, hasSdocImages, getImageData, queryCopyMoveProgressView, resetCursor, isSingleImage } from './helpers';
-import { focusEditor } from '../../core';
+import { focusEditor, generateEmptyElement } from '../../core';
 import { getErrorMsg } from '../../../../utils';
 import { getSlateFragmentAttribute } from '../../../utils/document-utils';
-import { INSERT_POSITION, CLIPBOARD_FORMAT_KEY, CLIPBOARD_ORIGIN_SDOC_KEY, IMAGE } from '../../constants';
+import { INSERT_POSITION, CLIPBOARD_FORMAT_KEY, CLIPBOARD_ORIGIN_SDOC_KEY, IMAGE, IMAGE_BLOCK, PARAGRAPH } from '../../constants';
 import { INTERNAL_EVENT } from '../../../constants';
 const withImage = editor => {
   const {
@@ -14,7 +14,8 @@ const withImage = editor => {
     isVoid,
     insertData,
     deleteBackward,
-    insertFragment
+    insertFragment,
+    insertBreak
   } = editor;
   const newEditor = editor;
 
@@ -106,15 +107,42 @@ const withImage = editor => {
     }
   };
   newEditor.deleteBackward = unit => {
-    deleteBackward(unit);
-    // After the delete operation, if the selected image is selected, the cursor moves backward one position
     const {
       selection
     } = editor;
-    const [node, path] = Editor.parent(editor, selection);
+    const point = Editor.before(editor, selection, {
+      distance: 2
+    });
+    const [node, path] = Editor.node(editor, [point.path[0], point.path[1]]);
     if (Element.isElement(node) && node.type === IMAGE) {
+      // If the wrapping element is image_block, delete the wrapping element
+      const [parentNode, p] = Editor.node(editor, [path[0]]);
+      if (parentNode.type === IMAGE_BLOCK) {
+        Transforms.removeNodes(editor, {
+          at: p
+        });
+        return;
+      }
       focusEditor(editor, Path.next(path));
     }
+    deleteBackward(unit);
+  };
+  newEditor.insertBreak = () => {
+    const {
+      selection
+    } = editor;
+    if (selection == null) return insertBreak();
+    const path = Editor.path(editor, selection);
+    const [node] = Editor.node(editor, [path[0]]);
+    if (node.type === IMAGE_BLOCK) {
+      const p = generateEmptyElement(PARAGRAPH);
+      Transforms.insertNodes(editor, p, {
+        at: [path[0] + 1]
+      });
+      focusEditor(editor, [path[0] + 1]);
+      return;
+    }
+    insertBreak();
   };
   return newEditor;
 };

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

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useState, useCallback, useRef, useEffect } from 'react';
 import { ReactEditor, useSelected, useReadOnly } from '@seafile/slate-react';
-import { Transforms } from '@seafile/slate';
+import { Transforms, Editor } from '@seafile/slate';
 import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
 import { getImageURL, updateImage } from './helpers';
@@ -25,15 +25,10 @@ const Image = _ref => {
   } = _ref;
   const {
     data,
-    display_type,
-    align,
     border_type = IMAGE_BORDER_TYPE[0].type
   } = element;
-  const imageWrapStyle = _objectSpread(_objectSpread({}, style), {}, {
-    display: display_type === 'Block' ? 'block' : 'inline-block',
-    paddingTop: display_type === 'Block' ? '8px' : '',
-    textAlign: display_type === 'Block' ? align : ''
-  });
+  const path = ReactEditor.findPath(editor, element);
+  const nodeEntry = Editor.node(editor, [path[0]]);
   const imageStyle = {
     border: IMAGE_BORDER_TYPE.find(item => item.type === border_type).value
   };
@@ -195,7 +190,7 @@ const Image = _ref => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, isShowImagePlaceholder && /*#__PURE__*/React.createElement("span", Object.assign({
     className: classNames('sdoc-image-wrapper', className)
   }, attributes, {
-    style: imageWrapStyle
+    style: _objectSpread({}, style)
   }), /*#__PURE__*/React.createElement("img", {
     ref: imageRef,
     src: imagePlaceholder,
@@ -205,7 +200,7 @@ const Image = _ref => {
   }), children), !isShowImagePlaceholder && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", Object.assign({
     className: classNames('sdoc-image-wrapper', className)
   }, attributes, {
-    style: imageWrapStyle
+    style: _objectSpread({}, style)
   }), /*#__PURE__*/React.createElement("span", {
     className: "sdoc-image-inner"
   }, /*#__PURE__*/React.createElement("span", {
@@ -230,7 +225,7 @@ const Image = _ref => {
   }), isResizing && /*#__PURE__*/React.createElement("span", {
     className: "image-size",
     contentEditable: false
-  }, /*#__PURE__*/React.createElement("span", null, t('Width'), ':', parseInt(movingWidth || imageRef.current.clientWidth)), /*#__PURE__*/React.createElement("span", null, "\xA0\xA0"), /*#__PURE__*/React.createElement("span", null, t('Height'), ':', imageRef.current.clientHeight))), display_type === 'Block' && (isShowCaption || (data === null || data === void 0 ? void 0 : data.caption)) && /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.createElement("span", null, t('Width'), ':', parseInt(movingWidth || imageRef.current.clientWidth)), /*#__PURE__*/React.createElement("span", null, "\xA0\xA0"), /*#__PURE__*/React.createElement("span", null, t('Height'), ':', imageRef.current.clientHeight))), nodeEntry[0].type === 'image_block' && (isShowCaption || (data === null || data === void 0 ? void 0 : data.caption)) && /*#__PURE__*/React.createElement("input", {
     className: "sdoc-image-caption-input-wrapper",
     style: {
       width: (data === null || data === void 0 ? void 0 : data.width) || imageRef.current.clientWidth
@@ -244,10 +239,11 @@ const Image = _ref => {
     onCompositionStart: e => {
       e.stopPropagation();
     }
-  }))), children), isShowImageHoverMenu && !readOnly && /*#__PURE__*/React.createElement(ImageHoverMenu, {
+  }))), children), isSelected && isShowImageHoverMenu && !readOnly && /*#__PURE__*/React.createElement(ImageHoverMenu, {
     editor: editor,
     menuPosition: menuPosition,
     element: element,
+    parentNodeEntry: nodeEntry,
     onHideImageHoverMenu: () => {
       setIsShowImageHoverMenu(false);
     },
@@ -257,7 +253,7 @@ const Image = _ref => {
   })));
 };
 const SdocImage = withTranslation('sdoc-editor')(Image);
-function renderImage(props, editor) {
+export function renderImage(props, editor) {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const isSelected = useSelected();
 
@@ -279,4 +275,25 @@ function renderImage(props, editor) {
     isSelected: isSelected
   }));
 }
-export default renderImage;
+export function renderImageBlock(props, editor) {
+  const {
+    element,
+    children,
+    attributes
+  } = props;
+  const {
+    align
+  } = element;
+  let justifyContent = '';
+  if (align) {
+    justifyContent = align === 'left' ? 'start' : align === 'right' ? 'end' : align;
+  }
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: "sdoc-image-block-wrapper",
+    style: {
+      display: 'flex',
+      padding: '5px 0px',
+      justifyContent: "".concat(justifyContent)
+    }
+  }, attributes), children);
+}

package/dist/basic-sdk/extension/render/custom-element.js

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { useReadOnly, useSlateStatic } from '@seafile/slate-react';
-import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, CODE_LINE, IMAGE, ELEMENT_TYPE, SDOC_LINK, FILE_LINK, TITLE, SUBTITLE, CALL_OUT, SUPPORTED_SIDE_OPERATION_TYPE } from '../constants';
+import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, CODE_LINE, IMAGE, IMAGE_BLOCK, ELEMENT_TYPE, SDOC_LINK, FILE_LINK, TITLE, SUBTITLE, CALL_OUT, SUPPORTED_SIDE_OPERATION_TYPE } from '../constants';
 import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin, CalloutPlugin } from '../plugins';
 import { onDragOver, onDragLeave, onDrop } from '../toolbar/side-toolbar/event';
 import { getParentNode } from '../core';
@@ -101,6 +101,11 @@ const CustomRenderElement = props => {
           leaf
         }), editor);
       }
+    case IMAGE_BLOCK:
+      {
+        const [, renderImageBlock] = ImagePlugin.renderElements;
+        return renderImageBlock(_objectSpread({}, props), editor);
+      }
     case ELEMENT_TYPE.TABLE:
       {
         const [renderTable] = TablePlugin.renderElements;

package/package.json

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