@seafile/sdoc-editor 1.0.220 → 1.0.221-alph-0.0.1

package/dist/basic-sdk/extension/plugins/image/use-upload-image.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _context = _interopRequireDefault(require("../../../../context"));
+var _helpers = require("./helpers");
+const updateImageNode = async function (editor, element, newUrl) {
+  let isError = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  const nodePath = _slateReact.ReactEditor.findPath(editor, element);
+  const newData = {
+    ...element.data,
+    src: newUrl,
+    is_copy_error: isError
+  };
+  _slate.Transforms.setNodes(editor, {
+    data: newData
+  }, {
+    at: nodePath
+  });
+};
+const useImageUpload = _ref => {
+  let {
+    editor,
+    element
+  } = _ref;
+  const {
+    data
+  } = element;
+  const {
+    is_copy_error = false
+  } = data;
+  const [isLoading, setIsLoading] = (0, _react.useState)(false);
+  const [isCopyError, setIsCopyError] = (0, _react.useState)(is_copy_error);
+  (0, _react.useEffect)(() => {
+    const {
+      src: url
+    } = data;
+    if (isCopyError) return;
+    if (!(0, _helpers.isImagUrlIsFromCopy)(url)) return;
+    const downloadAndUploadImages = async url => {
+      try {
+        const response = await fetch(url);
+        if (response.ok) {
+          const blob = await response.blob();
+          const file = new File([blob], 'downloaded_image.png', {
+            type: blob.type
+          });
+          const imageUrl = await _context.default.uploadLocalImage([file]);
+          if (imageUrl && imageUrl[0]) {
+            updateImageNode(editor, element, imageUrl[0]);
+          }
+        } else {
+          throw new Error(`HTTP error status: ${response.status}`);
+        }
+      } catch (error) {
+        console.error(error);
+        updateImageNode(editor, element, url, true);
+        setIsCopyError(true);
+      } finally {
+        setTimeout(() => {
+          setIsLoading(false);
+        }, 500);
+      }
+    };
+    downloadAndUploadImages(url);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return {
+    isCopyImageLoading: isLoading,
+    setCopyImageLoading: setIsLoading,
+    isCopyImageError: isCopyError
+  };
+};
+var _default = exports.default = useImageUpload;

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

@@ -119,6 +119,12 @@ Object.defineProperty(exports, "SeaTableColumnPlugin", {
     return _seatableColumn.default;
   }
 });
+Object.defineProperty(exports, "SeaTableRowPlugin", {
+  enumerable: true,
+  get: function () {
+    return _seatableRow.default;
+  }
+});
 Object.defineProperty(exports, "SeaTableViewsPlugin", {
   enumerable: true,
   get: function () {
@@ -186,6 +192,7 @@ var _mention = _interopRequireDefault(require("./mention"));
 var _quickInsert = _interopRequireDefault(require("./quick-insert"));
 var _wikiLink = _interopRequireDefault(require("./wiki-link"));
 var _seatableColumn = _interopRequireDefault(require("./seatable-column"));
+var _seatableRow = _interopRequireDefault(require("./seatable-row"));
 var _seatableTables = _interopRequireDefault(require("./seatable-tables"));
 var _group = _interopRequireDefault(require("./group"));
 const Plugins = [_markdown.default, _html.default, _header.default, _link.default, _blockquote.default, _list.default, _checkList.default, _codeBlock.default, _image.default, _video.default, _table.default, _multiColumn.default, _textStyle.default, _textAlign.default, _font.default, _sdocLink.default, _paragraph.default, _fileLink.default, _callout.default, _searchReplace.default, _quickInsert.default, _group.default];

package/dist/basic-sdk/extension/plugins/multi-column/plugin.js

@@ -82,7 +82,7 @@ const withMultiColumn = editor => {
     const nextNode = _slate.Editor.next(newEditor);
     const nextColumnIndex = nextNode[1][1];
     const currentMultiColumnEntry = (0, _core.getSelectedNodeEntryByType)(editor, _constants.ELEMENT_TYPE.MULTI_COLUMN);
-    if (!currentMultiColumnEntry) return deleteBackward(unit);
+    if (!currentMultiColumnEntry) return deleteForward(unit);
     const {
       column,
       children: childColumn

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/menu/index.js

@@ -1,12 +1,11 @@
 "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 = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../../constants");
 var _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
@@ -21,7 +20,6 @@ const SeaTableColumnMenu = _ref => {
     toggle,
     isHidden = false
   } = _ref;
-  const dropDownMenuRef = (0, _react.useRef)(null);
   const disabled = (0, _helpers.isMenuDisabled)(editor, readonly);
   const menuConfig = _constants.MENUS_CONFIG_MAP[_constants.ELEMENT_TYPE.SEATABLE_COLUMN];
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
@@ -29,22 +27,20 @@ const SeaTableColumnMenu = _ref => {
     menuConfig: menuConfig,
     className: (0, _classnames.default)('pr-2 sdoc-dropdown-menu-item-relative', {
       'sdoc-dropdown-menu-item-hidden': isHidden
-    }),
-    ref: dropDownMenuRef
+    })
   }, !disabled && /*#__PURE__*/_react.default.createElement("i", {
     className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
-  }), !disabled && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+  })), !disabled && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
     target: menuConfig.id,
     hideArrow: true,
     trigger: "hover",
     fade: false,
-    popperClassName: "seatable-column-popover",
-    container: dropDownMenuRef === null || dropDownMenuRef === void 0 ? void 0 : dropDownMenuRef.current
+    popperClassName: "seatable-column-popover"
   }, /*#__PURE__*/_react.default.createElement(_columnListMenu.default, {
     editor: editor,
     readonly: readonly,
     insertPosition: insertPosition,
     toggle: toggle
-  }))));
+  })));
 };
 var _default = exports.default = SeaTableColumnMenu;

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

@@ -8,7 +8,8 @@ var _constants = require("../../constants");
 const withColumn = editor => {
   const {
     isInline,
-    isVoid
+    isVoid,
+    markableVoid
   } = editor;
   const newEditor = editor;
   newEditor.isInline = element => {
@@ -25,6 +26,13 @@ const withColumn = editor => {
     if (type === _constants.ELEMENT_TYPE.SEATABLE_COLUMN) return true;
     return isVoid(element);
   };
+  newEditor.markableVoid = element => {
+    const {
+      type
+    } = element;
+    if (type === _constants.ELEMENT_TYPE.SEATABLE_COLUMN) return true;
+    return markableVoid(element);
+  };
   return newEditor;
 };
 var _default = exports.default = withColumn;

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) {
@@ -36,16 +57,59 @@ const Column = _ref => {
       setIsClicked(false);
     }
   }, [isSelected, isReadOnly]);
+  const {
+    font_size = null,
+    font = null,
+    bold = null,
+    italic = null,
+    underline = null,
+    color = null,
+    highlight_color = null,
+    strikethrough = null
+  } = element.children[0];
   const style = {
     margin: '0 10px',
     border: '1px solid transparent',
+    userSelect: 'none',
+    display: 'inline-block',
     ...(isClicked && {
       border: '1px solid red'
+    }),
+    ...(font_size && {
+      fontSize: font_size
+    }),
+    ...(font && {
+      fontFamily: font
+    }),
+    ...(bold && {
+      fontWeight: 600
+    }),
+    ...(italic && {
+      fontStyle: 'italic'
+    }),
+    ...(underline && {
+      textDecoration: 'underline'
+    }),
+    ...(color && {
+      color: color
+    }),
+    ...(highlight_color && {
+      backgroundColor: highlight_color
+    }),
+    ...(strikethrough && {
+      textDecoration: 'line-through'
     })
   };
   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/dist/basic-sdk/extension/plugins/seatable-row/dialog/add-seatable-row-dialog/helpers.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRowName = void 0;
+var _dtableUtils = require("dtable-utils");
+const getRowName = (columns, row, formula_rows) => {
+  if (!row) return '';
+  const displayColumn = columns.find(column => column.key === '0000');
+  if (!displayColumn) return '';
+  const {
+    type,
+    key,
+    data
+  } = displayColumn;
+  let formulaRows;
+  if (formula_rows) {
+    formulaRows = formula_rows;
+  } else {
+    const view = window.app.getSelectedView();
+    formulaRows = view.formula_rows || {};
+  }
+  const tables = window.app.state.value.tables;
+  const departments = window.app.state;
+  const collaborators = window.app.state.collaboratorsWithAppUsers;
+  return (0, _dtableUtils.getCellValueDisplayString)(row, type, key, {
+    formulaRows,
+    data,
+    tables,
+    collaborators,
+    departments
+  });
+};
+exports.getRowName = getRowName;

package/dist/basic-sdk/extension/plugins/seatable-row/dialog/add-seatable-row-dialog/index.css

@@ -0,0 +1,106 @@
+.seatable-rows-select-dialog {
+  max-width: 520px;
+}
+
+.seatable-rows-select-dialog .sdoc-seatable-rows-select-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 1rem;
+  border-top: 1px solid #e9ecef;
+}
+
+.seatable-rows-select-dialog .modal-header-container {
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 57px;
+  padding: 16px;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.seatable-rows-select-dialog .modal-title-container {
+  flex: 1;
+  white-space: nowrap;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: auto;
+}
+
+.seatable-rows-close-dialog {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+}
+
+.modal-header-container .sdoc-close1 {
+  font-size: 16px;
+  color: #666666;
+}
+
+.modal-header-container .sdoc-close1:hover {
+  background-color: #EFEFEF;
+  border-radius: 3px;
+  height: 28px;
+  width: 28px;
+}
+
+.seatable-rows-select-dialog .seatable-table-wrapper {
+  max-height: 207px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  border: 2px solid transparent;
+}
+
+.seatable-rows-select-dialog .seatable-table-wrapper table td,
+.seatable-rows-select-dialog .seatable-table-wrapper table th {
+  border-width: 0 1px 1px 0;
+  border-style: solid;
+  border-color: #ccc;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.seatable-rows-select-dialog .seatable-view-records {
+  width: max-content;
+  border-top: 1px solid #ddd;
+  border-left: 1px solid #ddd;
+  border-collapse: collapse;
+  border-spacing: 2px;
+}
+
+.seatable-rows-select-dialog .seatable-view-column-header-row {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.seatable-rows-select-dialog .seatable-view-column-header-row th {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex: unset !important;
+}
+
+.seatable-rows-select-dialog .seatable-view-body-row {
+  display: block;
+  height: calc(100% - 32px);
+  max-height: 170px;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+.seatable-rows-select-dialog tbody td,
+.seatable-rows-select-dialog thead th {
+  height: 32px;
+  padding: 0 8px;
+}
+
+.seatable-rows-select-dialog .seatable-view-body-column-row.isSelected {
+  background-color: rgb(222, 232, 254);
+}

package/dist/basic-sdk/extension/plugins/seatable-row/dialog/add-seatable-row-dialog/index.js

@@ -0,0 +1,81 @@
+"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 = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _helpers = require("../../helpers");
+var _seatableTable = _interopRequireDefault(require("./seatable-table"));
+require("./index.css");
+var _seatableTableRecord = _interopRequireDefault(require("./seatable-table-record"));
+const AddSeatableRowDialog = _ref => {
+  let {
+    editor,
+    closeDialog,
+    handleSubmit,
+    data
+  } = _ref;
+  const {
+    table
+  } = data;
+  const [rowRecordsErrorMessage, setRowRecordsErrorMessage] = (0, _react.useState)('');
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  // const [table, setTable] = useState({});
+  const [selectedRowsID, setSelectedRowsID] = (0, _react.useState)([]);
+  const submit = (0, _react.useCallback)(() => {
+    setRowRecordsErrorMessage('');
+    if (selectedRowsID.length === 0) {
+      setRowRecordsErrorMessage(t('Select_one_row_record'));
+      return;
+    }
+    if (selectedRowsID.length > 1) {
+      setRowRecordsErrorMessage(t('Selected_row_records_cannot_exceed_1_rows'));
+      return;
+    }
+    if (selectedRowsID.length === 1) {
+      (0, _helpers.insertSeaTableRow)(editor, tableID, selectedRowsID, 'after');
+    }
+    handleSubmit && handleSubmit();
+    closeDialog();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, selectedRowsID]);
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+    isOpen: true,
+    autoFocus: false,
+    toggle: closeDialog,
+    className: "seatable-rows-select-dialog",
+    zIndex: 1071,
+    returnFocusAfterClose: false
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "modal-header-container"
+  }, /*#__PURE__*/_react.default.createElement("h5", {
+    className: "modal-title-container"
+  }, t('Select_seatable_rows')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdocfont sdoc-close1 seatable-rows-close-dialog",
+    onClick: closeDialog
+  })), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, null, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "form-group"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, table.name), /*#__PURE__*/_react.default.createElement(_seatableTableRecord.default, {
+    table: table
+  }), rowRecordsErrorMessage && /*#__PURE__*/_react.default.createElement(_reactstrap.Alert, {
+    color: "danger",
+    className: "mt-2"
+  }, t(rowRecordsErrorMessage))))), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalFooter, {
+    className: "sdoc-seatable-rows-select-footer"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+    color: "secondary",
+    onClick: closeDialog
+  }, t('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+    color: "primary",
+    disabled: false,
+    onClick: submit
+  }, t('Add_rows_record'))));
+};
+var _default = exports.default = AddSeatableRowDialog;