@seafile/sdoc-editor 2.0.2 → 2.0.3

package/dist/basic-sdk/extension/commons/search-list/index.css

@@ -0,0 +1,28 @@
+.sdoc-search-list {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+}
+
+.sdoc-search-list .sdoc-search-list-wrapper {
+  padding: 12px;
+}
+
+.sdoc-search-list .sdoc-search-list-wrapper>input {
+  font-size: 12px;
+  max-height: 30px;
+}
+
+.sdoc-search-list .sdoc-search-list-content-wrapper {
+  min-height: 0;
+  min-width: 0;
+  flex: 1;
+  overflow: auto;
+  max-height: 300px;
+}
+
+.sdoc-search-list .sdoc-search-list-with-no-results {
+  font-size: 12px;
+  padding: 4px 16px;
+}

package/dist/basic-sdk/extension/commons/search-list/index.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SearchList;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _keyCodes = _interopRequireDefault(require("../../../../constants/key-codes"));
+require("./index.css");
+function SearchList(_ref) {
+  let {
+    list: originalList,
+    listItem: ListItem,
+    onListItemClick,
+    onEscClick
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const inputWrapperRef = (0, _react.useRef)(null);
+  const isComposingRef = (0, _react.useRef)(null);
+  const listRefs = (0, _react.useRef)([]);
+  const [searchedList, setSearchedList] = (0, _react.useState)(originalList);
+  const [currentSelectIndex, setCurrentSelectIndex] = (0, _react.useState)(-1);
+
+  // search input
+  const onChange = (0, _react.useCallback)(event => {
+    if (isComposingRef.current) return;
+    const value = event.target.value.trim();
+    if (value) {
+      const list = originalList.filter(item => item.label.indexOf(value) > -1);
+      setSearchedList(list);
+    } else {
+      setSearchedList(originalList);
+    }
+  }, [originalList]);
+  const onCompositionStart = (0, _react.useCallback)(() => {
+    isComposingRef.current = true;
+  }, []);
+  const onCompositionEnd = (0, _react.useCallback)(e => {
+    isComposingRef.current = false;
+    onChange(e);
+  }, [onChange]);
+
+  // search content list
+  const onItemClick = (0, _react.useCallback)(item => {
+    onListItemClick && onListItemClick(item);
+  }, [onListItemClick]);
+  const onHandleInputFocus = (0, _react.useCallback)(isFocus => {
+    if (inputWrapperRef.current) {
+      queueMicrotask(() => {
+        isFocus ? inputWrapperRef.current.focus() : inputWrapperRef.current.blur();
+      });
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (currentSelectIndex === -1) {
+      onHandleInputFocus(true);
+    } else {
+      onHandleInputFocus(false);
+    }
+  }, [currentSelectIndex, onHandleInputFocus]);
+  const handleClick = (0, _react.useCallback)(event => {
+    if (inputWrapperRef !== null && inputWrapperRef !== void 0 && inputWrapperRef.current.contains(event.target) || inputWrapperRef.current === event.target) {
+      event.stopPropagation();
+      event.nativeEvent && event.nativeEvent.stopImmediatePropagation && event.nativeEvent.stopImmediatePropagation();
+      return;
+    }
+  }, []);
+  const scrollIntoView = (0, _react.useCallback)(index => {
+    listRefs.current[index].scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+      inline: 'nearest'
+    });
+  }, []);
+  const handleKeyDown = (0, _react.useCallback)(e => {
+    const {
+      UpArrow,
+      DownArrow,
+      Enter,
+      Esc
+    } = _keyCodes.default;
+    const {
+      keyCode
+    } = e;
+    if (keyCode === UpArrow) {
+      e.preventDefault();
+      if (currentSelectIndex > -1) {
+        setCurrentSelectIndex(currentSelectIndex - 1);
+        scrollIntoView(currentSelectIndex - 1);
+      }
+    }
+    if (keyCode === DownArrow) {
+      e.preventDefault();
+      if (currentSelectIndex === searchedList.length - 1) return;
+      if (currentSelectIndex < searchedList.length - 1) {
+        setCurrentSelectIndex(currentSelectIndex + 1);
+        scrollIntoView(currentSelectIndex + 1);
+      }
+    }
+    if (keyCode === Enter) {
+      e.preventDefault();
+      const item = searchedList[currentSelectIndex];
+      onItemClick(item);
+    }
+    if (keyCode === Esc) {
+      e.preventDefault();
+      onEscClick && onEscClick();
+    }
+  }, [currentSelectIndex, onEscClick, onItemClick, scrollIntoView, searchedList]);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('mousedown', handleClick);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('click', handleClick);
+    };
+  }, [handleClick, handleKeyDown]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-search-list"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-search-list-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+    innerRef: inputWrapperRef,
+    placeholder: t('Search_action'),
+    onChange: onChange,
+    onCompositionStart: onCompositionStart,
+    onCompositionEnd: onCompositionEnd
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-search-list-content-wrapper"
+  }, searchedList.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-search-list-with-no-results"
+  }, t('No_results')), searchedList.map((item, index) => {
+    const isSelected = index === currentSelectIndex;
+    return /*#__PURE__*/_react.default.createElement(ListItem, {
+      innerRef: el => listRefs.current[index] = el,
+      key: index,
+      item: item,
+      onItemClick: onItemClick,
+      isSelected: isSelected
+    });
+  })));
+}

package/dist/basic-sdk/extension/plugins/seatable-column/menu/column-list-item.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ColumnListItem;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+function ColumnListItem(_ref) {
+  let {
+    innerRef,
+    item,
+    onItemClick,
+    isSelected
+  } = _ref;
+  const onMouseDown = (0, _react.useCallback)(() => {
+    onItemClick(item);
+  }, [onItemClick, item]);
+  const clazzNames = (0, _classnames.default)('column-list-menu-item-container', {
+    'selected': isSelected
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: innerRef,
+    key: item.value,
+    className: clazzNames,
+    onClick: onMouseDown
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "column-list-menu-item"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: `control-icon ${item.iconClass}`
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "control-label"
+  }, item.label)));
+}

package/dist/basic-sdk/extension/plugins/seatable-column/menu/column-list-menu.css

@@ -8,8 +8,6 @@
     background-color: #fff;
     min-width: 12rem;
     width: 200px;
-    max-height: 300px;
-    overflow: auto;
     padding: 8px 0;
 }
 
@@ -46,3 +44,7 @@
     background-color: #f5f5f5;
     cursor: pointer;
 }
+
+.column-list-menu .column-list-menu-item-container.selected {
+    background-color: #e3e3e3;
+}

package/dist/basic-sdk/extension/plugins/seatable-column/menu/column-list-menu.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -10,6 +11,8 @@ var _column = require("../constants/column");
 var _helpers = require("../helpers");
 var _elementType = require("../../../constants/element-type");
 var _utils = require("../../../utils");
+var _searchList = _interopRequireDefault(require("../../../commons/search-list"));
+var _columnListItem = _interopRequireDefault(require("./column-list-item"));
 require("./column-list-menu.css");
 const NOT_SUPPORT_COLUMN_TYPES = ['button', 'file'];
 function ColumnListMenu(_ref) {
@@ -51,7 +54,7 @@ function ColumnListMenu(_ref) {
   const isActive = editor => {
     return (0, _helpers.getColumnType)(editor) === _elementType.SEATABLE_COLUMN;
   };
-  const onMousedown = (0, _react.useCallback)(option => {
+  const onListItemClick = (0, _react.useCallback)(option => {
     const active = isActive(editor);
     (0, _helpers.insertSeaTableColumn)(editor, active, option, insertPosition);
     toggle && toggle();
@@ -60,17 +63,9 @@ function ColumnListMenu(_ref) {
     ref: columnRef,
     className: "column-list-menu",
     style: computedStyle
-  }, options.map(option => {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      key: option.value,
-      className: "column-list-menu-item-container",
-      onClick: () => onMousedown(option)
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "column-list-menu-item"
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: `control-icon ${option.iconClass}`
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "control-label"
-    }, option.label)));
+  }, /*#__PURE__*/_react.default.createElement(_searchList.default, {
+    list: options,
+    listItem: _columnListItem.default,
+    onListItemClick: onListItemClick
   }));
 }

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

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -7,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _slateReact = require("@seafile/slate-react");
+var _mdToHtml = _interopRequireDefault(require("../../../../slate-convert/md-to-html"));
 const Column = _ref => {
   let {
     props,
@@ -19,15 +21,34 @@ const Column = _ref => {
   } = props;
   const isReadOnly = (0, _slateReact.useReadOnly)();
   const isSelected = (0, _slateReact.useSelected)();
+  const [columnValue, setColumnValue] = (0, _react.useState)('');
   const data = element.data || {};
   const {
-    key: columnKey,
-    name: columnName
+    key: columnKey
   } = data;
-  let displayValue = columnName ? `{${columnName}}` : '';
-  if (editor.getColumnCellValue) {
-    displayValue = editor.getColumnCellValue(columnKey) || 'null';
-  }
+  const column = editor.columns.find(item => item.key === columnKey);
+  const isLongTextColumn = (0, _react.useMemo)(() => {
+    return column && column.type === 'long-text';
+  }, [column]);
+  (0, _react.useEffect)(() => {
+    const data = element.data || {};
+    const {
+      key: columnKey,
+      name: columnName
+    } = data;
+    let displayValue = columnName ? `{${columnName}}` : '';
+    if (editor.getColumnCellValue) {
+      displayValue = editor.getColumnCellValue(columnKey) || 'null';
+      if (!isLongTextColumn) {
+        setColumnValue(displayValue);
+        return;
+      }
+      _mdToHtml.default.process(displayValue).then(res => {
+        displayValue = String(res);
+        setColumnValue(displayValue);
+      });
+    }
+  }, [editor, element.data, isLongTextColumn]);
   const [isClicked, setIsClicked] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
     if (isSelected && !isReadOnly) {
@@ -50,6 +71,7 @@ const Column = _ref => {
     margin: '0 10px',
     border: '1px solid transparent',
     userSelect: 'none',
+    display: 'inline-block',
     ...(isClicked && {
       border: '1px solid red'
     }),
@@ -80,7 +102,14 @@ const Column = _ref => {
   };
   return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, attributes, {
     style: style
-  }), displayValue, children);
+  }), !isLongTextColumn && columnValue, isLongTextColumn && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '10px'
+    },
+    dangerouslySetInnerHTML: {
+      __html: columnValue
+    }
+  }), children);
 };
 const renderColumn = (props, editor) => {
   return /*#__PURE__*/_react.default.createElement(Column, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
@@ -16,7 +16,7 @@
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "1.10.7",
     "deep-copy": "1.4.2",
-    "dtable-ui-component": "^5.1.9",
+    "dtable-ui-component": "6.0.0",
     "is-hotkey": "0.2.0",
     "is-url": "^1.2.4",
     "lodash.isequal": "4.5.0",