@seafile/sdoc-editor 0.4.26 → 0.4.28

package/dist/basic-sdk/extension/plugins/callout/constant.js

@@ -44,4 +44,10 @@ export const CALLOUT_COLOR_MAP = {
     background_color: '#fde8ff'
   }
 };
+export const CALLOUT_ICON_MAP = {
+  'trumpet': '📢',
+  'bulb': '💡',
+  'prohibited': '🚫',
+  'warning': '⚠️'
+};
 export const CALLOUT_ALLOWED_INSIDE_TYPES = [CALL_OUT, ORDERED_LIST, UNORDERED_LIST, PARAGRAPH, TITLE, SUBTITLE, BLOCKQUOTE, ...HEADERS, ...LIST_ITEM_CORRELATION_TYPE, CHECK_LIST_ITEM, IMAGE, LINK, SDOC_LINK];

package/dist/basic-sdk/extension/plugins/callout/helper.js

@@ -80,6 +80,22 @@ export const changeFillBackgroundColor = (editor, background_color) => {
   });
   Transforms.select(editor, Editor.start(editor, editor.selection));
 };
+export const setCalloutIcon = (editor, icon_name) => {
+  Transforms.setNodes(editor, {
+    callout_icon: icon_name
+  }, {
+    match: n => n.type === CALL_OUT
+  });
+  Transforms.select(editor, Editor.start(editor, editor.selection));
+};
+export const deleteCalloutIcon = editor => {
+  Transforms.setNodes(editor, {
+    callout_icon: ''
+  }, {
+    match: n => n.type === CALL_OUT
+  });
+  Transforms.select(editor, Editor.start(editor, editor.selection));
+};
 
 // Check is cursor in callout
 export const getCalloutEntry = function (editor) {

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

@@ -2,7 +2,7 @@ import isHotkey from 'is-hotkey';
 import { Editor, Transforms } from '@seafile/slate';
 import { PARAGRAPH, INSERT_POSITION, CODE_BLOCK } from '../../constants';
 import { isSelectionAtBlockStart } from '../../core';
-import { getCalloutEntry, isCalloutContentEmpty, unwrapCallout } from './helper';
+import { deleteCalloutIcon, getCalloutEntry, isCalloutContentEmpty, unwrapCallout } from './helper';
 import { insertElement } from '../../toolbar/side-toolbar/helpers';
 import EventBus from '../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../constants';
@@ -23,6 +23,11 @@ const withCallout = editor => {
   newEditor.deleteBackward = unit => {
     const calloutEntry = getCalloutEntry(editor);
     if (calloutEntry) {
+      const node = calloutEntry[0];
+      if (isSelectionAtBlockStart(editor) && !!node.callout_icon) {
+        deleteCalloutIcon(editor);
+        return;
+      }
       if (isSelectionAtBlockStart(editor) && isCalloutContentEmpty(calloutEntry)) {
         unwrapCallout(editor);
         return;

package/dist/basic-sdk/extension/plugins/callout/render-elem/{color-selector.js → callout-color-selector/index.js}

@@ -1,34 +1,38 @@
 import React, { useCallback } from 'react';
 import { Transforms } from '@seafile/slate';
-import { CALLOUT_COLOR_MAP } from '../constant';
-import { findPath } from '../../../core';
-import { changeFillBackgroundColor } from '../helper';
-import { ElementPopover } from '../../../commons';
-import './index.css';
+import { CALLOUT_COLOR_MAP } from '../../constant';
+import { findPath } from '../../../../core';
+import { changeFillBackgroundColor } from '../../helper';
+import './style.css';
 const ColorSelector = _ref => {
   let {
     editor,
     element,
-    popoverPosition
+    onCloseSelector
   } = _ref;
   const onColorClick = useCallback(event => {
+    event.stopPropagation();
+    let target = event.target;
+    while (!target.dataset || !target.dataset.backgroundColor) {
+      target = target.parentNode;
+    }
     const {
       backgroundColor
-    } = event.target.dataset;
+    } = target.dataset;
     const currentPath = findPath(editor, element);
     Transforms.select(editor, currentPath);
     changeFillBackgroundColor(editor, backgroundColor);
-  }, [editor, element]);
+    onCloseSelector();
+  }, [editor, element, onCloseSelector]);
   const isShowCheckedIcon = useCallback(currentBackgroundColor => {
     const {
       background_color
     } = element.style || {};
     return background_color && background_color === currentBackgroundColor;
   }, [element.style]);
-  return /*#__PURE__*/React.createElement(ElementPopover, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "sdoc-callout-color-selector-container",
-    contentEditable: false,
-    style: popoverPosition
+    contentEditable: false
   }, /*#__PURE__*/React.createElement("ul", {
     className: "sdoc-color-selector-list"
   }, Object.values(CALLOUT_COLOR_MAP).map((_ref2, index) => {
@@ -49,6 +53,6 @@ const ColorSelector = _ref => {
     }, isShowCheckedIcon(background_color) && /*#__PURE__*/React.createElement("i", {
       className: "sdoc-callout-color-checked-icon sdocfont sdoc-check-mark"
     }));
-  }))));
+  })));
 };
 export default ColorSelector;

package/dist/basic-sdk/extension/plugins/callout/render-elem/callout-color-selector/style.css

@@ -0,0 +1,39 @@
+.sdoc-callout-color-selector-container {
+  position: absolute;
+  padding: 10px;
+  left: 0;
+  top: 36.5px;
+  background-color: #fff;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  z-index: 100;
+}
+
+.sdoc-callout-color-selector-container .sdoc-color-selector-list {
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+
+.sdoc-callout-color-selector-container .sdoc-color-selector-list .sdoc-callout-color-item {
+  position: relative;
+  margin-right: 10px;
+  width: 20px;
+  height: 20px;
+  list-style: none;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.sdoc-callout-color-selector-container .sdoc-color-selector-list .sdoc-callout-color-item:last-child {
+  margin-right: 0px;
+}
+
+.sdoc-callout-color-selector-container .sdoc-color-selector-list .sdoc-callout-color-item .sdoc-callout-color-checked-icon {
+  position: absolute;
+  top: 1px;
+  left: 3px;
+  font-size: 12px;
+}

package/dist/basic-sdk/extension/plugins/callout/render-elem/callout-hover-menu/index.js

@@ -0,0 +1,69 @@
+import React, { useCallback, useState } from 'react';
+import classNames from 'classnames';
+import { ElementPopover } from '../../../../commons';
+import ColorSelector from '../callout-color-selector';
+import IconSelector from '../callout-icon';
+import './style.css';
+export default function CalloutHoverMenu(_ref) {
+  let {
+    editor,
+    element,
+    popoverPosition
+  } = _ref;
+  const [isShowColorSelector, setIsShowColorSelector] = useState(false);
+  const [isShowIcon, setIsShowIcon] = useState(false);
+  const onColorSelectorToggle = useCallback(event => {
+    event.stopPropagation();
+    if (!isShowColorSelector) {
+      setIsShowIcon(false);
+    }
+    setIsShowColorSelector(!isShowColorSelector);
+  }, [isShowColorSelector, setIsShowColorSelector]);
+  const onIconToggle = useCallback(event => {
+    event.stopPropagation();
+    if (!isShowIcon) {
+      setIsShowColorSelector(false);
+    }
+    setIsShowIcon(!isShowIcon);
+  }, [isShowIcon, setIsShowIcon]);
+  const onCloseSelector = useCallback(() => {
+    setIsShowColorSelector(false);
+    setIsShowIcon(false);
+  }, []);
+  const firstItemClass = classNames({
+    'callout-menu-item': true,
+    'color-active': isShowColorSelector
+  });
+  const secondItemClass = classNames({
+    'callout-menu-item': true,
+    'icon-active': isShowIcon
+  });
+  return /*#__PURE__*/React.createElement(ElementPopover, null, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-callout-hover-menu",
+    style: popoverPosition
+  }, /*#__PURE__*/React.createElement("div", {
+    className: firstItemClass,
+    onClick: onColorSelectorToggle
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sdocfont sdoc-callout-color mr-1"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "sdocfont sdoc-drop-down"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "callout-menu-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: secondItemClass,
+    onClick: onIconToggle
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sdocfont sdoc-callout-icon mr-1"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "sdocfont sdoc-drop-down"
+  })), isShowColorSelector && /*#__PURE__*/React.createElement(ColorSelector, {
+    editor: editor,
+    element: element,
+    onCloseSelector: onCloseSelector
+  }), isShowIcon && /*#__PURE__*/React.createElement(IconSelector, {
+    editor: editor,
+    element: element,
+    onCloseSelector: onCloseSelector
+  })));
+}

package/dist/basic-sdk/extension/plugins/callout/render-elem/callout-hover-menu/style.css

@@ -0,0 +1,43 @@
+.sdoc-callout-hover-menu {
+  position: absolute;
+  padding: 7px;
+  height: 36px;
+  background-color: #fff;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  z-index: 100;
+  display: flex;
+}
+
+.sdoc-callout-hover-menu .callout-menu-item {
+  padding: 0 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #aaa;
+  cursor: pointer;
+}
+
+.sdoc-callout-hover-menu .callout-menu-item:hover {
+  color: #444;
+}
+
+.sdoc-callout-hover-menu .callout-menu-item .sdocfont {
+  font-size: 12px;
+  color: #444;
+}
+
+.sdoc-callout-hover-menu .callout-menu-item .sdoc-drop-down {
+  color: #999;
+}
+
+.sdoc-callout-hover-menu .callout-menu-item.color-active,
+.sdoc-callout-hover-menu .callout-menu-item.icon-active {
+  background-color: #f2f2f2;
+  border-radius: 2px;
+}
+
+.sdoc-callout-hover-menu .callout-menu-divider {
+  border-left: 1px solid #ccc;
+  margin: 4px 8px;
+}

package/dist/basic-sdk/extension/plugins/callout/render-elem/callout-icon/index.js

@@ -0,0 +1,38 @@
+import React, { useCallback } from 'react';
+import { Transforms } from '@seafile/slate';
+import { findPath } from '../../../../core';
+import { setCalloutIcon } from '../../helper';
+import { CALLOUT_ICON_MAP } from '../../constant';
+import './style.css';
+const IconSelector = _ref => {
+  let {
+    editor,
+    element,
+    onCloseSelector
+  } = _ref;
+  const onImageClick = useCallback(event => {
+    event.stopPropagation();
+    const {
+      image
+    } = event.target.dataset;
+    if (!image) return;
+    const currentPath = findPath(editor, element);
+    Transforms.select(editor, currentPath);
+    setCalloutIcon(editor, image);
+    onCloseSelector();
+  }, [editor, element, onCloseSelector]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-callout-icon-selector-container",
+    onClick: onImageClick
+  }, Object.keys(CALLOUT_ICON_MAP).map(key => {
+    const content = CALLOUT_ICON_MAP[key];
+    return /*#__PURE__*/React.createElement("div", {
+      key: key,
+      className: "icon-item"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: 'sdoc-emoji ' + key,
+      "data-image": key
+    }, content));
+  }));
+};
+export default IconSelector;

package/dist/basic-sdk/extension/plugins/callout/render-elem/callout-icon/style.css

@@ -0,0 +1,33 @@
+.sdoc-callout-icon-selector-container {
+  position: absolute;
+  padding: 4px;
+  left: 40px;
+  top: 36.5px;
+  background-color: #fff;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  display: flex;
+  min-width: 100px;
+  z-index: 100;
+}
+
+.sdoc-callout-icon-selector-container .icon-item {
+  width: 32px;
+  height: 32px;
+  margin: 0 4px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.sdoc-callout-icon-selector-container .icon-item:hover {
+  background-color: #f2f2f2;
+}
+
+.sdoc-callout-icon-selector-container .icon-item img {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}

package/dist/basic-sdk/extension/plugins/callout/render-elem/index.css

@@ -8,50 +8,41 @@
   border-width: 1px;
   border-style: solid;
   border-radius: 5px;
+  display: flex;
+}
+
+.sdoc-callout-container .callout-content {
+  flex: 1;
 }
 
 .sdoc-callout-container .sdoc-callout-placeholder {
   position: absolute;
   top: 15px;
-  left: 10px;
+  left: 26px;
   color: #b8b6b6;
   pointer-events: none;
 }
 
-.sdoc-callout-color-selector-container {
-  position: absolute;
-  padding: 10px;
-  background-color: #fff;
-  border: 1px solid #eee;
-  border-radius: 3px;
-  z-index: 100;
+.sdoc-emoji {
+  font-family: "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols;
+  white-space: nowrap;
+  height: 24px;
+  width: 24px;
+  line-height: 24px;
+  font-size: 21px;
 }
 
-.sdoc-callout-color-selector-container .sdoc-color-selector-list {
-  display: flex;
-  margin: 0;
-  padding: 0;
+.sdoc-emoji.wraning {
+  color: block;
 }
 
-.sdoc-callout-color-selector-container .sdoc-color-selector-list .sdoc-callout-color-item {
-  position: relative;
-  margin-right: 10px;
-  width: 16px;
-  height: 16px;
-  list-style: none;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 3px;
-  cursor: pointer;
+.sdoc-callout-container .callout-icon {
+  width: 18px;
+  margin-right: 8px;
+  margin-top: 2px;
 }
 
-.sdoc-callout-color-selector-container .sdoc-color-selector-list .sdoc-callout-color-item:last-child {
-  margin-right: 0px;
+.sdoc-callout-container .callout-icon .sdoc-emoji {
+  font-size: 16px;
 }
 
-.sdoc-callout-color-selector-container .sdoc-color-selector-list .sdoc-callout-color-item .sdoc-callout-color-checked-icon {
-  position: absolute;
-  top: -2px;
-  font-size: 12px;
-  left: 1px;
-}

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

@@ -3,11 +3,11 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Node } from '@seafile/slate';
 import { useReadOnly, useSelected } from '@seafile/slate-react';
 import { useTranslation } from 'react-i18next';
-import ColorSelector from './color-selector';
-import { CALLOUT_COLOR_MAP } from '../constant';
+import { CALLOUT_COLOR_MAP, CALLOUT_ICON_MAP } from '../constant';
 import { INTERNAL_EVENT } from '../../../../constants';
 import EventBus from '../../../../utils/event-bus';
 import { useScrollContext } from '../../../../hooks/use-scroll-context';
+import CalloutHoverMenu from './callout-hover-menu';
 import './index.css';
 const renderCallout = (_ref, editor) => {
   let {
@@ -41,6 +41,13 @@ const renderCallout = (_ref, editor) => {
       borderColor
     };
   }, [element.style, isSelected]);
+  const calloutIcon = useMemo(() => {
+    const {
+      callout_icon = ''
+    } = element;
+    if (!callout_icon) return null;
+    return CALLOUT_ICON_MAP[callout_icon];
+  }, [element]);
   const isShowPlaceholder = useCallback(() => {
     if (isSelected) return false;
     // If element contains more than one element or element is not paragraph, show placeholder
@@ -60,7 +67,7 @@ const renderCallout = (_ref, editor) => {
         top,
         left
       } = calloutRef.current.getBoundingClientRect();
-      const menuTop = top - 42; // top = top distance - menu height
+      const menuTop = top - 36; // top = top distance - menu height
       const newMenuPosition = {
         top: menuTop,
         left: left // left = code-block left distance
@@ -84,6 +91,11 @@ const renderCallout = (_ref, editor) => {
       observerRefValue.removeEventListener('scroll', handleScroll);
     };
   }, [handleScroll, readOnly, scrollRef]);
+  useEffect(() => {
+    if (!isSelected) {
+      setIsShowColorSelector(false);
+    }
+  }, [isSelected]);
   const handleDisplayColorSelector = useCallback(() => {
     if (readOnly) return;
     const {
@@ -103,17 +115,22 @@ const renderCallout = (_ref, editor) => {
   }, [handleDisplayColorSelector]);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
     "data-id": element.id,
-    className: "sdoc-callout-white-wrapper",
-    onMouseLeave: handleCloseColorSelector
+    className: "sdoc-callout-white-wrapper"
   }), /*#__PURE__*/React.createElement("div", {
     onClick: handleClick,
     ref: calloutRef,
     className: "".concat(attributes.className, " sdoc-callout-container"),
     style: containerStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "callout-icon"
+  }, element.callout_icon && /*#__PURE__*/React.createElement("span", {
+    className: 'sdoc-emoji ' + element.callout_icon
+  }, calloutIcon)), /*#__PURE__*/React.createElement("div", {
+    className: "callout-content"
   }, children, isShowPlaceholder() && /*#__PURE__*/React.createElement("div", {
     contentEditable: false,
     className: "sdoc-callout-placeholder"
-  }, t('Please_enter...')), isShowColorSelector && /*#__PURE__*/React.createElement(ColorSelector, {
+  }, t('Please_enter...'))), isShowColorSelector && /*#__PURE__*/React.createElement(CalloutHoverMenu, {
     editor: editor,
     element: element,
     popoverPosition: popoverPosition

package/dist/basic-sdk/extension/plugins/search-replace/helper.js

@@ -234,7 +234,15 @@ export const scrollIntoView = (articleContainerTop, highlightX, highlightY, code
 };
 const getNowrapCodeBlockInfos = editor => {
   const codeBlockEntries = Editor.nodes(editor, {
-    match: n => n.type === CODE_BLOCK && n.style['white_space'] === 'nowrap',
+    match: n => {
+      var _n$style;
+      const isCodeBlock = Element.isElement(n) && n.type === CODE_BLOCK;
+      if (!isCodeBlock) return false;
+      // To compatible with old version,which has no style property with white_space, by default, it is 'nowrap'
+      const nodeWhiteSpace = (n === null || n === void 0 ? void 0 : (_n$style = n.style) === null || _n$style === void 0 ? void 0 : _n$style['white_space']) || 'nowrap';
+      if (nodeWhiteSpace === 'nowrap') return true;
+      return false;
+    },
     at: []
   }) || [];
 

package/dist/components/doc-info/index.js

@@ -8,6 +8,7 @@ import { DateUtils } from '../../utils';
 import DraftDropdown from '../draft-dropdown';
 import RevisionAvatar from '../../assets/images/revision-avatar.png';
 import FileTagQuickView from '../doc-operations/tag-operation/file-tag-quick-view';
+import freezedImg from '../../basic-sdk/assets/images/sdoc-freezed.png';
 import './index.css';
 const DocInfo = _ref => {
   let {
@@ -55,9 +56,10 @@ const DocInfo = _ref => {
     onClick: onInternalLinkClick
   })), isFreezed && /*#__PURE__*/React.createElement("span", {
     className: "doc-icon"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "sdocfont sdoc-freezed",
-    title: t('Freezed')
+  }, /*#__PURE__*/React.createElement("img", {
+    src: freezedImg,
+    alt: t('Freezed'),
+    width: "16px"
   })), /*#__PURE__*/React.createElement(FileTagQuickView, null), /*#__PURE__*/React.createElement(TipMessage, {
     isEditMode: isEditMode
   }));

package/package.json

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