@seafile/sdoc-editor 0.1.125 → 0.1.127

package/dist/basic-sdk/comment/comment/editor-comment.js

@@ -1,5 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useSlateStatic } from '@seafile/slate-react';
+import { Node } from '@seafile/slate';
 import useSelectionUpdate from '../../hooks/use-selection-update';
 import { useCursorPosition } from '../helper';
 import CommentList from './comment-list';
@@ -7,6 +9,7 @@ import { useSelectionElement } from '../../hooks/use-selection-element';
 import { useCommentContext } from '../hooks/use-comment-context';
 var EditorComment = function EditorComment() {
   useSelectionUpdate();
+  var editor = useSlateStatic();
   var selectionElement = useSelectionElement();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -17,10 +20,16 @@ var EditorComment = function EditorComment() {
   }, []);
   var cursor = useCursorPosition();
   var style = useMemo(function () {
+    var _Node$string;
+    if (selectionElement && ((_Node$string = Node.string(selectionElement)) === null || _Node$string === void 0 ? void 0 : _Node$string.length) === 0) {
+      return {
+        top: '-99999px'
+      };
+    }
     return {
       top: cursor.y === 0 || isShowComments ? '-99999px' : cursor.y
     };
-  }, [cursor, isShowComments]);
+  }, [cursor, isShowComments, selectionElement]);
 
   // When selectionElement update, recalculate comment's panel state
   var _useState3 = useState([]),
@@ -41,7 +50,7 @@ var EditorComment = function EditorComment() {
     }
     setComments([]);
     setIsShowComments(false);
-  }, [element_comments_map, selectionElement]);
+  }, [element_comments_map, selectionElement, editor.selection]);
   return /*#__PURE__*/React.createElement("div", {
     className: "sdoc-comment-container"
   }, /*#__PURE__*/React.createElement("div", {

package/dist/basic-sdk/comment/comment/style.css

@@ -29,6 +29,7 @@
 
 .sdoc-comment-container .comment-container-right .comment-add-wrapper .sdocfont:hover {
   color: #333;
+  cursor: pointer;
 }
 
 .sdoc-comment-container .comment-container-right .comment-list-wrapper {

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

@@ -1,6 +1,7 @@
 export var INTERNAL_EVENT = {
   CANCEL_TABLE_SELECT_RANGE: 'cancel_table_select_range',
   SET_TABLE_SELECT_RANGE: 'set_table_select_range',
-  HIDDEN_CODE_BLOCK_HOVER_MENU: 'hidden_code_block_hover_menu'
+  HIDDEN_CODE_BLOCK_HOVER_MENU: 'hidden_code_block_hover_menu',
+  ON_MOUSE_ENTER_BLOCK: 'on_mouse_enter_block'
 };
 export var PAGE_EDIT_AREA_WIDTH = 672; // 672 = 794 - 2[borderLeft + borderRight] - 120[paddingLeft + paddingRight]

package/dist/basic-sdk/editor.js

@@ -22,6 +22,7 @@ import ArticleContainer from './layout/article-container';
 import './assets/css/layout.css';
 import './assets/css/sdoc-editor-plugins.css';
 import './assets/css/dropdown-menu.css';
+import SideToolbar from './extension/toolbar/side-toolbar';
 var SDocEditor = forwardRef(function (_ref, ref) {
   var document = _ref.document,
     config = _ref.config;
@@ -241,6 +242,6 @@ var SDocEditor = forwardRef(function (_ref, ref) {
     onMouseDown: onMouseDown,
     decorate: decorate,
     onCut: eventProxy.onCut
-  })), /*#__PURE__*/React.createElement(CommentContextProvider, null, /*#__PURE__*/React.createElement(CommentWrapper, null)))))))))));
+  })), /*#__PURE__*/React.createElement(SideToolbar, null), /*#__PURE__*/React.createElement(CommentContextProvider, null, /*#__PURE__*/React.createElement(CommentWrapper, null)))))))))));
 });
 export default SDocEditor;

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

@@ -161,4 +161,75 @@ export var LIST_TYPE_ARRAY = ['unordered_list', 'ordered_list'];
 export var TRANSPARENT = 'transparent';
 export var CLIPBOARD_FORMAT_KEY = 'x-slate-fragment';
 export var INSERT_FILE_DISPLAY_TYPE = ['text_link', 'icon_link', 'card_link'];
+export var SIDE_MENUS_CONFIG = [{
+  id: PARAGRAPH,
+  iconClass: 'sdocfont sdoc-text',
+  type: PARAGRAPH,
+  title: 'Paragraph'
+}, {
+  id: HEADER1,
+  iconClass: 'sdocfont sdoc-header1',
+  type: HEADER1,
+  title: 'Header_one'
+}, {
+  id: HEADER2,
+  iconClass: 'sdocfont sdoc-header2',
+  type: HEADER2,
+  title: 'Header_two'
+}, {
+  id: HEADER3,
+  iconClass: 'sdocfont sdoc-header3',
+  type: HEADER3,
+  title: 'Header_three'
+}, {
+  id: HEADER4,
+  iconClass: 'sdocfont sdoc-header4',
+  type: HEADER4,
+  title: 'Header_four'
+}, {
+  id: HEADER5,
+  iconClass: 'sdocfont sdoc-header5',
+  type: HEADER5,
+  title: 'Header_five'
+}, {
+  id: HEADER6,
+  iconClass: 'sdocfont sdoc-header6',
+  type: HEADER6,
+  title: 'Header_six'
+}, {
+  id: UNORDERED_LIST,
+  iconClass: 'sdocfont sdoc-list-ul',
+  type: UNORDERED_LIST,
+  title: 'Unordered_list'
+}, {
+  id: ORDERED_LIST,
+  iconClass: 'sdocfont sdoc-list-ol',
+  type: ORDERED_LIST,
+  title: 'Ordered_list'
+}, {
+  id: CHECK_LIST_ITEM,
+  iconClass: 'sdocfont sdoc-check-square',
+  type: CHECK_LIST_ITEM,
+  title: 'Check_list_item'
+}, {
+  id: ALIGN_LEFT,
+  iconClass: 'sdocfont sdoc-align-left',
+  type: 'left',
+  title: 'Left'
+}, {
+  id: ALIGN_CENTER,
+  iconClass: 'sdocfont sdoc-align-center',
+  type: 'center',
+  title: 'Center'
+}, {
+  id: ALIGN_RIGHT,
+  iconClass: 'sdocfont sdoc-align-right',
+  type: 'right',
+  title: 'Right'
+}, {
+  id: BLOCKQUOTE,
+  iconClass: 'sdocfont sdoc-quote1',
+  type: BLOCKQUOTE,
+  title: 'Quote'
+}];
 export { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, SUPERSCRIPT, SUBSCRIPT, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, TEXT_STYLE_MORE, BOLD_ITALIC, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER, ELEMENT_TYPE, KEYBOARD, DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_LIST, CLEAR_FORMAT, DEFAULT_FONT_COLOR, RECENT_USED_HIGHLIGHT_COLORS_KEY, RECENT_USED_FONT_COLORS_KEY, RECENT_USED_TABLE_CELL_BG_COLORS_KEY, DEFAULT_LAST_USED_FONT_COLOR, DEFAULT_LAST_USED_HIGHLIGHT_COLOR, DEFAULT_LAST_USED_TABLE_CELL_BG_COLOR, SPECIAL_FONT_SIZE_NAME, DEFAULT_COMMON_FONT_SIZE, FONT_SIZE, DEFAULT_FONT, FONT, GOOGLE_FONT_CLASS, RECENT_USED_FONTS_KEY, HEADER_FONT_SIZE, SDOC_LINK };

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

@@ -4,7 +4,7 @@ import { withHistory } from '@seafile/slate-history';
 import Plugins from './plugins';
 import renderElement from './render/render-element';
 import renderLeaf from './render/render-leaf';
-import { Toolbar, ContextToolbar } from './toolbar';
+import { Toolbar, ContextToolbar, SideToolbar } from './toolbar';
 var baseEditor = withHistory(withReact(createEditor()));
 var defaultEditor = Plugins === null || Plugins === void 0 ? void 0 : Plugins.reduce(function (editor, pluginItem) {
   var withPlugin = pluginItem.editorPlugin;
@@ -14,4 +14,4 @@ var defaultEditor = Plugins === null || Plugins === void 0 ? void 0 : Plugins.re
   return editor;
 }, baseEditor);
 export default defaultEditor;
-export { renderLeaf, renderElement, Toolbar, ContextToolbar };
+export { renderLeaf, renderElement, Toolbar, ContextToolbar, SideToolbar };

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

@@ -7,7 +7,8 @@ var renderBlockquote = function renderBlockquote(props, editor) {
     textAlign: element.align
   };
   return /*#__PURE__*/React.createElement("blockquote", Object.assign({
-    "data-id": element.id
+    "data-id": element.id,
+    "data-root": "true"
   }, attributes, {
     style: style
   }), children);

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

@@ -1,7 +1,7 @@
 import withCheckList from './plugin';
-import { CheckListItem, renderCheckList } from './render-elem';
+import { renderCheckListItem } from './render-elem';
 var CheckListPlugin = {
   editorPlugin: withCheckList,
-  renderElements: [renderCheckList, CheckListItem]
+  renderElements: [renderCheckListItem]
 };
 export default CheckListPlugin;

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

@@ -5,14 +5,6 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { Transforms } from '@seafile/slate';
 import { ReactEditor } from '@seafile/slate-react';
-var renderCheckList = function renderCheckList(props, editor) {
-  var attributes = props.attributes,
-    children = props.children,
-    style = props.style;
-  return /*#__PURE__*/React.createElement("p", Object.assign({}, attributes, {
-    style: style
-  }), children);
-};
 var CheckListItem = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(CheckListItem, _React$PureComponent);
   var _super = _createSuper(CheckListItem);
@@ -53,7 +45,8 @@ var CheckListItem = /*#__PURE__*/function (_React$PureComponent) {
         textAlign: align
       };
       return /*#__PURE__*/React.createElement("div", Object.assign({
-        "data-id": id
+        "data-id": id,
+        "data-root": "true"
       }, attributes, {
         style: style
       }), /*#__PURE__*/React.createElement("span", {
@@ -70,4 +63,8 @@ var CheckListItem = /*#__PURE__*/function (_React$PureComponent) {
   }]);
   return CheckListItem;
 }(React.PureComponent);
-export { CheckListItem, renderCheckList };
+export var renderCheckListItem = function renderCheckListItem(props, editor) {
+  return /*#__PURE__*/React.createElement(CheckListItem, Object.assign({}, props, {
+    editor: editor
+  }));
+};

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

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useEffect, useState, useRef } from 'react';
-import { ReactEditor, useSlateStatic, useReadOnly } from '@seafile/slate-react';
+import { ReactEditor, useReadOnly } from '@seafile/slate-react';
 import { Transforms } from '@seafile/slate';
 import EventBus from '../../../utils/event-bus';
 import { useScrollContext } from '../../../hooks/use-scroll-context';
@@ -10,14 +10,13 @@ import { setClipboardData } from './helpers';
 import { INTERNAL_EVENT } from '../../../constants';
 import '../../../assets/css/code-block.css';
 var CodeBlock = function CodeBlock(_ref) {
-  var codeBlockProps = _ref.codeBlockProps;
+  var attributes = _ref.attributes,
+    children = _ref.children,
+    element = _ref.element,
+    editor = _ref.editor;
   var readOnly = useReadOnly();
-  var editor = useSlateStatic();
   var codeBlockRef = useRef();
   var scrollRef = useScrollContext();
-  var attributes = codeBlockProps.attributes,
-    children = codeBlockProps.children,
-    element = codeBlockProps.element;
   var _element$style = element.style,
     style = _element$style === void 0 ? {
       white_space: 'nowrap'
@@ -127,6 +126,7 @@ var CodeBlock = function CodeBlock(_ref) {
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     "data-id": element.id,
+    "data-root": "true",
     ref: codeBlockRef,
     className: 'sdoc-code-block-container',
     onClick: onFocusCodeBlock,
@@ -148,10 +148,9 @@ var CodeBlock = function CodeBlock(_ref) {
   }));
 };
 export var renderCodeBlock = function renderCodeBlock(props, editor) {
-  return /*#__PURE__*/React.createElement(CodeBlock, {
-    codeBlockProps: _objectSpread({}, props),
+  return /*#__PURE__*/React.createElement(CodeBlock, Object.assign({}, props, {
     editor: editor
-  });
+  }));
 };
 export var renderCodeLine = function renderCodeLine(props, editor) {
   var element = props.element,

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

@@ -19,8 +19,8 @@ var renderHeader = function renderHeader(props, editor) {
     isShowPlaceHolder = true;
   }
   return /*#__PURE__*/React.createElement(Tag, Object.assign({
-    id: element.id,
-    "data-id": element.id
+    "data-id": element.id,
+    "data-root": "true"
   }, attributes, {
     style: _objectSpread({
       position: isShowPlaceHolder ? 'relative' : ''

package/dist/basic-sdk/extension/plugins/link/menu/add-link-dialog.js

@@ -56,12 +56,17 @@ var AddLinkDialog = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props = _this.props,
         editor = _this$props.editor,
         propsUrl = _this$props.url,
-        propsTitle = _this$props.title;
+        propsTitle = _this$props.title,
+        propsInsertLink = _this$props.insertLink;
       var isEdit = propsUrl && propsTitle;
       if (isEdit) {
         updateLink(editor, title, url);
       } else {
-        insertLink(editor, title, url);
+        if (propsInsertLink) {
+          propsInsertLink(editor, title, url);
+        } else {
+          insertLink(editor, title, url);
+        }
       }
       _this.props.onLinkDialogToggle();
     };

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

@@ -7,6 +7,7 @@ var renderList = function renderList(props, editor) {
   var Tag = node.type === ORDERED_LIST ? 'ol' : 'ul';
   return /*#__PURE__*/React.createElement(Tag, Object.assign({
     "data-id": node.id,
+    "data-root": "true",
     className: "list-container d-flex flex-column"
   }, attributes), children);
 };
@@ -27,7 +28,8 @@ var renderListItem = function renderListItem(props, editor) {
       className = '';
   }
   return /*#__PURE__*/React.createElement("li", Object.assign({
-    "data-id": element.id
+    "data-id": element.id,
+    "data-root": "true"
   }, attributes, {
     className: className
   }), children);

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

@@ -21,7 +21,8 @@ var Paragraph = function Paragraph(_ref) {
     textAlign: element.align
   };
   return /*#__PURE__*/React.createElement("p", Object.assign({
-    "data-id": element.id
+    "data-id": element.id,
+    "data-root": "true"
   }, attributes, {
     style: _objectSpread({
       position: isShowPlaceHolder ? 'relative' : ''

package/dist/basic-sdk/extension/plugins/sdoc-link/dialogs/select-sdoc-file-dialog/index.css

@@ -0,0 +1,55 @@
+.sdoc-file-select-dialog {
+  max-width: 620px;
+}
+
+.sdoc-file-select-dialog .sdoc-file-select-modal {
+  width: 620px;
+}
+
+.sdoc-file-select-dialog .sdoc-file-select-container {
+  display: flex;
+}
+
+.sdoc-file-select-dialog .sdoc-file-select-left {
+  border-right: 1px solid #e9ecef;
+  width: 150px;
+  padding: 12px 8px;
+}
+
+.sdoc-file-select-dialog .sdoc-file-select-left .sdoc-file-select-nav-item {
+  padding: 5px 0 5px 8px;
+  border-radius: 3px;
+  display: inline-block;
+  cursor: pointer;
+  width: 100%;
+}
+
+.sdoc-file-select-dialog .sdoc-file-select-left .sdoc-file-select-nav-item:hover {
+  background-color: #f5f5f5;
+}
+
+.sdoc-file-select-dialog .sdoc-file-select-container .sdoc-file-select-left .selected-sdoc-file-select-nav-item {
+  background-color: #ff8000;
+  color: #fff;
+}
+
+.sdoc-file-select-dialog .sdoc-file-select-right {
+  height: 440px;
+  width: 468px;
+  display: flex;
+  padding: 0;
+  flex-direction: column;
+}
+
+.sdoc-file-select-dialog .sdoc-file-select-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 1rem;
+  border-top: 1px solid #e9ecef;
+}
+
+.sdoc-file-select-dialog .highlight-bg-color {
+  background-color: #FF8000;
+  border-color: #FF8000;
+}

package/dist/basic-sdk/extension/plugins/sdoc-link/{menu/sdoc-link-file-dialog.js → dialogs/select-sdoc-file-dialog/index.js}

@@ -1,14 +1,15 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useState } from 'react';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { withTranslation } from 'react-i18next';
+import { Button, Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { useTranslation } from 'react-i18next';
 import LocalFiles from './local-files';
-import { insertSdocFileLink } from '../helpers';
-import './sdoc-link-file-dialog.css';
-var SdocLinkFileDialog = function SdocLinkFileDialog(_ref) {
+import { insertSdocFileLink } from '../../helpers';
+import './index.css';
+var SelectSdocFileDialog = function SelectSdocFileDialog(_ref) {
   var editor = _ref.editor,
-    onDialogToggle = _ref.onDialogToggle,
-    t = _ref.t;
+    toggle = _ref.toggle;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     currentSelectedFile = _useState2[0],
@@ -16,8 +17,13 @@ var SdocLinkFileDialog = function SdocLinkFileDialog(_ref) {
   var onSelectedFile = useCallback(function (fileInfo) {
     setCurrentSelectedFile(fileInfo);
   }, []);
+  var closeDialog = useCallback(function () {
+    toggle(false);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   var onSubmit = useCallback(function () {
-    onDialogToggle(false);
+    closeDialog(false);
     if (currentSelectedFile) {
       insertSdocFileLink(editor, currentSelectedFile.name, currentSelectedFile.doc_uuid);
     }
@@ -27,36 +33,37 @@ var SdocLinkFileDialog = function SdocLinkFileDialog(_ref) {
     isOpen: true,
     autoFocus: false,
     zIndex: 1071,
-    returnFocusAfterClose: false
+    returnFocusAfterClose: false,
+    className: "sdoc-file-select-dialog",
+    contentClassName: "sdoc-file-select-modal"
   }, /*#__PURE__*/React.createElement(ModalHeader, {
-    toggle: function toggle() {
-      return onDialogToggle(false);
-    }
-  }, t('Select_sdoc_document')), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-file-addition-container"
+    toggle: closeDialog
+  }, t('Select_sdoc_document')), /*#__PURE__*/React.createElement(ModalBody, {
+    className: "p-0"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-file-addition-left"
+    className: "sdoc-file-select-container"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-file-addition-nav"
+    className: "sdoc-file-select-left"
   }, /*#__PURE__*/React.createElement("div", {
-    className: 'sdoc-addition-item selected-sdoc-addition-item',
-    onClick: onDialogToggle
+    className: "sdoc-file-select-nav"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-file-select-nav-item selected-sdoc-file-select-nav-item"
   }, t('Local_file')))), /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-file-addition-right"
+    className: "sdoc-file-select-right"
   }, /*#__PURE__*/React.createElement(LocalFiles, {
     onSelectedFile: onSelectedFile,
-    toggle: function toggle() {
-      return onDialogToggle(false);
-    }
-  })))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    toggle: closeDialog
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-file-select-footer"
+  }, /*#__PURE__*/React.createElement(Button, {
     color: "secondary",
-    onClick: function onClick() {
-      return onDialogToggle(false);
-    }
+    className: "mr-2",
+    onClick: closeDialog
   }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
     color: "primary",
-    disabled: false,
+    className: "highlight-bg-color",
+    disabled: !currentSelectedFile,
     onClick: onSubmit
-  }, t('Confirm'))));
+  }, t('Confirm')))))));
 };
-export default withTranslation('sdoc-editor')(SdocLinkFileDialog);
+export default SelectSdocFileDialog;

package/dist/basic-sdk/extension/plugins/sdoc-link/dialogs/select-sdoc-file-dialog/local-files/index.css

@@ -0,0 +1,75 @@
+.sdoc-files-tree {
+  flex: 1;
+  padding: 16px;
+  overflow: auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.sdoc-files-tree .sdoc-file-info {
+  border-radius: 2px;
+  height: 1.5rem;
+  line-height: 1.625;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+  padding-left: 2.8rem;
+}
+
+.sdoc-files-tree .sdoc-file-info:hover {
+  cursor: pointer;
+  background: #fdefb9;
+  box-shadow: inset 0 0 1px #999;
+}
+
+.sdoc-files-tree .sdoc-file-info .sdoc-file-icon-container {
+  width: 2.8rem;
+  height: 100%;
+  padding-left: 1.5rem;
+  position: absolute;
+  left: 0;
+}
+
+.sdoc-files-tree .sdoc-file-info .sdoc-file-icon {
+  color: #9aa0ac;
+}
+
+.sdoc-files-tree .sdoc-file-info.active {
+  background: #ff8000;
+  box-shadow: inset 0 0 1px #999;
+  color: #fff;
+}
+
+.sdoc-files-tree .sdoc-file-info.active .sdoc-file-icon {
+  color: #fff;
+}
+
+.sdoc-files-tree .sdoc-file-icon-toggle {
+  height: 1.5rem;
+  width: 1.5rem;
+  line-height: 1.5rem !important;
+  font-size: 12px !important;
+  transform: scale(.8);
+  text-align: center;
+  position: absolute;
+  left: 0;
+}
+
+.sdoc-files-tree .sdoc-file-info.expanded .sdoc-file-icon-toggle {
+  transform: rotate(90deg) scale(.8);
+}
+
+.sdoc-files-tree .sdoc-file-info .sdoc-file-name {
+  font-size: 14px;
+}
+
+.sdoc-files-tree .sdoc-folder-children {
+  padding-left: 20px;
+}
+
+.sdoc-files-tree .sdoc-folder-children-empty {
+  color: #999;
+  padding: 4px 20px;
+}