@seafile/sdoc-editor 0.1.98 → 0.1.100

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

@@ -1,3 +1,4 @@
+/* editor-comment css */
 .sdoc-comment-container {
   position: absolute;
   left: 0;
@@ -36,172 +37,112 @@
   width: 280px;
 }
 
-.sdoc-comment-container .comment-list-container {
+/* global comment css */
+.global-comments-popover {
   position: absolute;
-  /* background: rgba(255,255,255,.92);
-  border-radius: 8px;
-  box-shadow: 0 0 2px rgba(0,0,0,.04);
-  padding: 16px 0; */
-}
-
-.sdoc-comment-container .comment-ui-container {
-  background-color: #edf2fa;
-  border-radius: 8px;
-  box-shadow: 0 0 2px rgba(0,0,0,.04);
-  padding: 16px 0;
-  margin-bottom: 20px;
-  cursor: pointer;
-}
-
-.sdoc-comment-container .comment-ui-container.active {
-  position: relative;
-  left: -24px;
-  background: rgba(255, 255, 255, .92);
-  box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15);
+  right: 10px;
+  top: 50px;
+  z-index: 103;
+  width: 340px;
+  height: 600px;
 }
 
-.sdoc-comment-container .comment-list-container .comment-item-list {
-  max-height: 350px;
-  min-width: 280px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  margin: 0;
-}
-
-.sdoc-comment-container .comment-list-container .comment-item {
-  position: relative;
-  padding: 16px 16px 0;
-  cursor: default;
-}
-
-.sdoc-comment-container .comment-ui-container.active .comment-item:hover {
-  background: #fafafa;
-}
-
-.sdoc-comment-container .comment-item .comment-header,
-.sdoc-comment-container .comment-item .comment-author {
+.global-comments-popover .comments-panel-wrapper {
+  height: 100%;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.sdoc-comment-container .comment-item .comment-content {
-  padding-bottom: 10px;
-  margin-top: 10px;
-  margin-left: 30px;
+  flex-direction: column;
+  background: #fff;
+  border: 1px solid #EAECEF;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
 }
 
-.sdoc-comment-container .comment-header .comment-author__avatar {
+.global-comments-popover .comments-panel-header {
+  padding: 0 16px;
+  height: 46px;
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #EAECEF;
 }
 
-.sdoc-comment-container .comment-header .comment-author__avatar img {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
+.global-comments-popover .comments-panel-header .title {
+  color: #212529;
+  font-size: 16px;
+  font-weight: 500;
 }
 
-.sdoc-comment-container .comment-header .comment-author__info {
+.global-comments-popover .comments-panel-header .sdoc-close {
   display: flex;
-  flex-direction: column;
-  align-items: start;
+  align-items: center;
   justify-content: center;
-  padding-left: 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  cursor: pointer;
-}
-
-.sdoc-comment-container .comment-header .comment-author__info .name {
-  color: #1f1f1f;
   font-size: 14px;
-  line-height: 20px;
-  font-weight: 500;
+  font-weight: 700;
+  color: #999;
+  cursor: pointer;
 }
 
-.sdoc-comment-container .comment-header .comment-author__info .time {
-  color: #444746;
-  font-size: 12px;
-  line-height: 16px;
+.global-comments-popover .comments-panel-header .sdoc-close:hover {
+  color: #5a5a5a;
 }
 
-.sdoc-comment-container .comment-header .comment-operation {
-  line-height: 20px;
-  font-size: 20px;
-  color: rgb(70, 77, 90);
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
+.global-comments-popover .comments-panel-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 
-.sdoc-comment-container .comment-ui-container .comment-operation {
-  width: 32px;
-  height: 32px;
+.global-comments-popover .comments-panel-body__header {
+  height: 38px;
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
+  padding: 16px;
 }
 
-.sdoc-comment-container .comment-ui-container.active .comment-operation:hover {
-  border-radius: 100%;
-  background-color: #f0f0f0;
+.global-comments-popover .comments-panel-body__header .comment-type {
+  color: #212529;
+  font-size: 12px;
 }
 
-.sdoc-comment-container .comment-ui-container .comment-operation .sdoc-confirm {
-  color: #20a0ff;
-  font-weight: 800;
+.global-comments-popover .comments-panel-body__header .comment-type{
+  color: #212529;
+  font-size: 12px;
 }
 
-.sdoc-comment-menu {
-  padding: 0;
-  border-radius: 2px;
+.global-comments-popover .comments-panel-body__header .comment-count-tip {
+  color: #999;
+  font-size: 12px;
 }
 
-.sdoc-popover-menu {
-  background: rgb(255, 255, 255);
-  width: 130px;
-  padding: 8px 0;
-  height: auto;
+.global-comments-popover .comments-panel-body__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  overflow: auto;
 }
 
-.sdoc-popover-menu__item {
-  padding: 4px 24px;
-  height: 28px;
-  vertical-align: middle;
-  font-size: 14px;
-  background-color: transparent;
-  cursor: default;
-  color: #202428;
-  background-color: #fff;
+.global-comments-popover .comments-panel-body__content .sdoc-comment-list-container {
+  position: relative;
 }
 
-.sdoc-popover-menu__item:hover {
-  background-color: #20a0ff;
-  color: #fff;
+.global-comments-popover .comments-panel-body__content .comment-item-list {
+  max-width: 308px;
 }
 
-.sdoc-comment-container .comment-list-container .comment-editor-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 16px;
+.global-comments-popover .comments-panel-body__content .comment-ui-container.active {
+  left: 0;
 }
 
-.sdoc-comment-container .comment-list-container .comment-editor {
-  height: 40px;
-  width: 248px;
-  background: #fff;
-  border: 1px solid rgba(0, 0, 0, .12);
-  border-radius: 4px;
-  padding: 8px;
+.global-comments-popover .comments-panel-body__content .comment-ui-container.sdoc-resolved {
+  background: #f5f5f5;
 }
 
-.sdoc-comment-container .comment-list-container .comment-editor:focus-visible {
-  outline: none;
+.global-comments-popover .comments-panel-body__content .comment-ui-container.active.sdoc-resolved {
+  background: #f5f5f5;
 }
 
-.sdoc-comment-container .comment-list-container .comment-editor:focus {
-  border: 1px solid rgba(0, 0, 0, .12);
+.sdoc-comment-list-menu .dropdown-item {
+  font-size: 12px;
 }

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

@@ -8,7 +8,10 @@ export var commentDecorate = function commentDecorate(editor) {
       path = _ref2[1];
     var decorations = [];
     var comments = ((_editor$element_comme = editor.element_comments_map) === null || _editor$element_comme === void 0 ? void 0 : _editor$element_comme[node.id]) || [];
-    if (comments && comments.length > 0) {
+    var unresolvedComments = comments && comments.filter(function (item) {
+      return !item.resolved;
+    });
+    if (unresolvedComments && unresolvedComments.length > 0) {
       var decoration = {
         anchor: {
           path: path,
@@ -21,7 +24,7 @@ export var commentDecorate = function commentDecorate(editor) {
       };
       // rgba prevents occlusion of the cursor
       decoration['computed_bg_color'] = 'rgba(129, 237, 247, 0.5)';
-      decoration['comment_count'] = editor.element_comments_map[node.id].length;
+      decoration['comment_count'] = unresolvedComments === null || unresolvedComments === void 0 ? void 0 : unresolvedComments.length;
       decorations.push(decoration);
     }
     return decorations;

package/dist/basic-sdk/comment/hooks/use-comment-list.js

@@ -0,0 +1,39 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useEffect, useState } from 'react';
+import { useCommentContext } from './use-comment-context';
+import { COMMENT_TYPES } from '../comment/global-comment-header';
+var useCommentList = function useCommentList() {
+  var _useCommentContext = useCommentContext(),
+    commentsInfo = _useCommentContext.commentsInfo;
+  var _ref = commentsInfo || [],
+    comment_list = _ref.comment_list;
+  var _useState = useState(COMMENT_TYPES.all),
+    _useState2 = _slicedToArray(_useState, 2),
+    commentType = _useState2[0],
+    setCommentType = _useState2[1];
+  var _useState3 = useState([comment_list]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    commentList = _useState4[0],
+    setCommentList = _useState4[1];
+  useEffect(function () {
+    if (commentType === COMMENT_TYPES.all) {
+      setCommentList(comment_list);
+    } else if (commentType === COMMENT_TYPES.resolved) {
+      var _commentList = comment_list.filter(function (item) {
+        return item.resolved;
+      });
+      setCommentList(_commentList);
+    } else if (commentType === COMMENT_TYPES.unresolved) {
+      var _commentList2 = comment_list.filter(function (item) {
+        return !item.resolved;
+      });
+      setCommentList(_commentList2);
+    }
+  }, [commentType, comment_list]);
+  return {
+    commentList: commentList,
+    commentType: commentType,
+    setCommentType: setCommentType
+  };
+};
+export default useCommentList;

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import { useCommentContext } from './hooks/use-comment-context';
-import Comment from './comment';
+import { EditorComment, GlobalComment } from './comment';
 var CommentWrapper = function CommentWrapper() {
   var _useCommentContext = useCommentContext(),
     commentsInfo = _useCommentContext.commentsInfo;
   if (commentsInfo.isFetching) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Comment, null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorComment, null), /*#__PURE__*/React.createElement(GlobalComment, null));
 };
 export default CommentWrapper;

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

@@ -1,17 +1,28 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import deepCopy from 'deep-copy';
 export var formatCommentsData = function formatCommentsData(comments) {
-  var elementCommentsMap = {};
-  for (var i = 0; i < comments.length; i++) {
-    var item = comments[i];
+  var formatComments = [];
+  var dupComments = deepCopy(comments);
+  for (var i = 0; i < dupComments.length; i++) {
+    var item = dupComments[i];
 
     // the comment is not in sdoc document
-    if (!item.detail || item.resolved) continue;
+    if (!item.detail) continue;
     try {
       item.detail = JSON.parse(item.detail);
+      formatComments.push(item);
     } catch (err) {
       continue;
     }
+  }
+  return formatComments;
+};
+export var initElementCommentsMap = function initElementCommentsMap(comments) {
+  var elementCommentsMap = {};
+  var formatComments = formatCommentsData(comments);
+  for (var i = 0; i < formatComments.length; i++) {
+    var item = formatComments[i];
     var element_id = item.detail.element_id;
     if (!elementCommentsMap[element_id]) {
       elementCommentsMap[element_id] = [];
@@ -20,6 +31,45 @@ export var formatCommentsData = function formatCommentsData(comments) {
   }
   return elementCommentsMap;
 };
+export var initCommentList = function initCommentList(comments) {
+  // format comments
+  var formatComments = formatCommentsData(comments);
+
+  // sort comments by update time
+  return sortCommentList(formatComments);
+};
+export var sortCommentList = function sortCommentList(commentList) {
+  var newComments = commentList.map(function (item) {
+    var updated_at = item.updated_at,
+      replies = item.replies;
+    var replayUpdatedTimes = replies.map(function (item) {
+      return item.updated_at;
+    });
+    var updatedTimes = [updated_at].concat(_toConsumableArray(replayUpdatedTimes));
+    updatedTimes.sort(function (a, b) {
+      return new Date(a).getTime() <= new Date(b).getTime() ? 1 : -1;
+    });
+    item.updated_time = updatedTimes[0];
+    return item;
+  });
+  var unresolvedComments = [];
+  var resolvedComments = [];
+  // Differentiate between resolved and unresolved comments
+  newComments.forEach(function (item) {
+    if (item.resolved) {
+      resolvedComments.push(item);
+    } else {
+      unresolvedComments.push(item);
+    }
+  });
+  unresolvedComments.sort(function (a, b) {
+    return new Date(a.updated_time).getTime() <= new Date(b.updated_time).getTime() ? 1 : -1;
+  });
+  resolvedComments.sort(function (a, b) {
+    return new Date(a.updated_time).getTime() <= new Date(b.updated_time).getTime() ? 1 : -1;
+  });
+  return [].concat(unresolvedComments, resolvedComments);
+};
 export var initCommentsInfo = {
   isFetching: true,
   comment_list: [],
@@ -34,11 +84,11 @@ export var commentReducer = function commentReducer(state, action) {
       }
     case 'RECEIVE_STATE':
       {
-        var element_comments_map = formatCommentsData(action.payload);
+        var commentList = initCommentList(action.payload);
         return {
           isFetching: false,
-          comment_list: action.payload,
-          element_comments_map: element_comments_map,
+          comment_list: commentList,
+          element_comments_map: initElementCommentsMap(action.payload),
           error: false
         };
       }
@@ -52,41 +102,59 @@ export var commentReducer = function commentReducer(state, action) {
       }
     case 'INSERT_COMMENT':
       {
-        var _element_comments_map = state.element_comments_map;
+        var element_comments_map = state.element_comments_map,
+          comment_list = state.comment_list;
         var _action$payload = action.payload,
           element_id = _action$payload.element_id,
           comment = _action$payload.comment;
-        if (!_element_comments_map[element_id]) {
-          _element_comments_map[element_id] = [];
+        if (!element_comments_map[element_id]) {
+          element_comments_map[element_id] = [];
         }
-        _element_comments_map[element_id] = [].concat(_toConsumableArray(_element_comments_map[element_id]), [comment]);
+        element_comments_map[element_id] = [].concat(_toConsumableArray(element_comments_map[element_id]), [comment]);
+        var _commentList = [comment].concat(_toConsumableArray(comment_list));
         return _objectSpread(_objectSpread({}, state), {}, {
-          element_comments_map: _objectSpread({}, _element_comments_map)
+          element_comments_map: _objectSpread({}, element_comments_map),
+          comment_list: _commentList
         });
       }
     case 'DELETE_COMMENT':
       {
-        var _element_comments_map2 = state.element_comments_map;
+        var _element_comments_map = state.element_comments_map,
+          _comment_list = state.comment_list;
         var _action$payload2 = action.payload,
           _element_id = _action$payload2.element_id,
           comment_id = _action$payload2.comment_id;
-        if (_element_comments_map2[_element_id]) {
-          _element_comments_map2[_element_id] = _element_comments_map2[_element_id].filter(function (item) {
+        if (_element_comments_map[_element_id]) {
+          _element_comments_map[_element_id] = _element_comments_map[_element_id].filter(function (item) {
             return item.id !== comment_id;
           });
         }
+        var _commentList2 = _comment_list.filter(function (item) {
+          return item.id === comment_id;
+        });
         return _objectSpread(_objectSpread({}, state), {}, {
-          element_comments_map: _objectSpread({}, _element_comments_map2)
+          element_comments_map: _objectSpread({}, _element_comments_map),
+          comment_list: _commentList2
         });
       }
     case 'UPDATE_COMMENT':
       {
-        var _element_comments_map3 = state.element_comments_map;
+        var _element_comments_map2 = state.element_comments_map,
+          _comment_list2 = state.comment_list;
         var _action$payload3 = action.payload,
           _element_id2 = _action$payload3.element_id,
           _comment_id = _action$payload3.comment_id,
           _comment = _action$payload3.comment;
-        _element_comments_map3[_element_id2] = _element_comments_map3[_element_id2].map(function (item) {
+        _element_comments_map2[_element_id2] = _element_comments_map2[_element_id2].map(function (item) {
+          if (item.id === _comment_id) {
+            item.comment = _comment.comment;
+            item.detail = _comment.detail;
+            item.updated_at = _comment.updated_at;
+            return item;
+          }
+          return item;
+        });
+        var _commentList3 = _comment_list2.map(function (item) {
           if (item.id === _comment_id) {
             item.comment = _comment.comment;
             item.detail = _comment.detail;
@@ -96,42 +164,55 @@ export var commentReducer = function commentReducer(state, action) {
           return item;
         });
         return _objectSpread(_objectSpread({}, state), {}, {
-          element_comments_map: _objectSpread({}, _element_comments_map3)
+          element_comments_map: _objectSpread({}, _element_comments_map2),
+          comment_list: _commentList3
         });
       }
     case 'UPDATE_COMMENT_STATE':
       {
-        var _element_comments_map4 = state.element_comments_map;
+        var _element_comments_map3 = state.element_comments_map,
+          _comment_list3 = state.comment_list;
         var _action$payload4 = action.payload,
           _element_id3 = _action$payload4.element_id,
           _comment_id2 = _action$payload4.comment_id,
           _comment2 = _action$payload4.comment;
 
         // modify comment state
-        _element_comments_map4[_element_id3] = _element_comments_map4[_element_id3].map(function (item) {
+        _element_comments_map3[_element_id3] = _element_comments_map3[_element_id3].map(function (item) {
           if (item.id === _comment_id2) {
             item.resolved = _comment2.resolved;
             return item;
           }
           return item;
         });
-
-        // remove it form current list
-        _element_comments_map4[_element_id3] = _element_comments_map4[_element_id3].filter(function (item) {
-          return item.id !== _comment_id2;
+        var _commentList4 = _comment_list3.map(function (item) {
+          if (item.id === _comment_id2) {
+            item.resolved = _comment2.resolved;
+            return item;
+          }
+          return item;
         });
         return _objectSpread(_objectSpread({}, state), {}, {
-          element_comments_map: _objectSpread({}, _element_comments_map4)
+          element_comments_map: _objectSpread({}, _element_comments_map3),
+          comment_list: sortCommentList(_commentList4)
         });
       }
     case 'INSERT_REPLY':
       {
-        var _element_comments_map5 = state.element_comments_map;
+        var _element_comments_map4 = state.element_comments_map,
+          _comment_list4 = state.comment_list;
         var _action$payload5 = action.payload,
           _element_id4 = _action$payload5.element_id,
           _comment_id3 = _action$payload5.comment_id,
           reply = _action$payload5.reply;
-        _element_comments_map5[_element_id4] = _element_comments_map5[_element_id4].map(function (item) {
+        _element_comments_map4[_element_id4] = _element_comments_map4[_element_id4].map(function (item) {
+          if (item.id === _comment_id3) {
+            item.replies = [].concat(_toConsumableArray(item.replies), [reply]);
+            return item;
+          }
+          return item;
+        });
+        var _commentList5 = _comment_list4.map(function (item) {
           if (item.id === _comment_id3) {
             item.replies = [].concat(_toConsumableArray(item.replies), [reply]);
             return item;
@@ -139,17 +220,28 @@ export var commentReducer = function commentReducer(state, action) {
           return item;
         });
         return _objectSpread(_objectSpread({}, state), {}, {
-          element_comments_map: _objectSpread({}, _element_comments_map5)
+          element_comments_map: _objectSpread({}, _element_comments_map4),
+          comment_list: _commentList5
         });
       }
     case 'DELETE_REPLY':
       {
-        var _element_comments_map6 = state.element_comments_map;
+        var _element_comments_map5 = state.element_comments_map,
+          _comment_list5 = state.comment_list;
         var _action$payload6 = action.payload,
           _element_id5 = _action$payload6.element_id,
           _comment_id4 = _action$payload6.comment_id,
           reply_id = _action$payload6.reply_id;
-        _element_comments_map6[_element_id5] = _element_comments_map6[_element_id5].map(function (item) {
+        _element_comments_map5[_element_id5] = _element_comments_map5[_element_id5].map(function (item) {
+          if (item.id === _comment_id4) {
+            item.replies = item.replies.filter(function (reply) {
+              return reply.id !== reply_id;
+            });
+            return item;
+          }
+          return item;
+        });
+        var _commentList6 = _comment_list5.map(function (item) {
           if (item.id === _comment_id4) {
             item.replies = item.replies.filter(function (reply) {
               return reply.id !== reply_id;
@@ -159,18 +251,33 @@ export var commentReducer = function commentReducer(state, action) {
           return item;
         });
         return _objectSpread(_objectSpread({}, state), {}, {
-          element_comments_map: _objectSpread({}, _element_comments_map6)
+          element_comments_map: _objectSpread({}, _element_comments_map5),
+          comment_list: _commentList6
         });
       }
     case 'UPDATE_REPLY':
       {
-        var _element_comments_map7 = state.element_comments_map;
+        var _element_comments_map6 = state.element_comments_map,
+          _comment_list6 = state.comment_list;
         var _action$payload7 = action.payload,
           _element_id6 = _action$payload7.element_id,
           _comment_id5 = _action$payload7.comment_id,
           _reply_id = _action$payload7.reply_id,
           _reply = _action$payload7.reply;
-        _element_comments_map7[_element_id6] = _element_comments_map7[_element_id6].map(function (item) {
+        _element_comments_map6[_element_id6] = _element_comments_map6[_element_id6].map(function (item) {
+          if (item.id === _comment_id5) {
+            item.replies = item.replies.map(function (replyItem) {
+              if (replyItem.id === _reply_id) {
+                // need update replay updated_at
+                return _objectSpread(_objectSpread({}, replyItem), _reply);
+              }
+              return replyItem;
+            });
+            return item;
+          }
+          return item;
+        });
+        var _commentList7 = _comment_list6.map(function (item) {
           if (item.id === _comment_id5) {
             item.replies = item.replies.map(function (replyItem) {
               if (replyItem.id === _reply_id) {
@@ -184,7 +291,8 @@ export var commentReducer = function commentReducer(state, action) {
           return item;
         });
         return _objectSpread(_objectSpread({}, state), {}, {
-          element_comments_map: _objectSpread({}, _element_comments_map7)
+          element_comments_map: _objectSpread({}, _element_comments_map6),
+          comment_list: _commentList7
         });
       }
     default:

package/dist/components/doc-operations/comments-operation/index.js

@@ -0,0 +1,14 @@
+import React, { useCallback } from 'react';
+import { EventBus } from '../../../basic-sdk';
+export default function CommentsOperation() {
+  var onCommentsToggle = useCallback(function () {
+    var eventBus = EventBus.getInstance();
+    eventBus.dispatch('COMMENT_LIST_CLICK');
+  }, []);
+  return /*#__PURE__*/React.createElement("span", {
+    className: "op-item",
+    onClick: onCommentsToggle
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-comments mr-1"
+  }));
+}

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import { withTranslation } from 'react-i18next';
+import context from '../../context';
 import RevisionOperations from './revision-operations';
 import HistoryOperation from './history-operation';
 import CollaboratorsOperation from './collaborators-operation';
 import MoreOperations from './more-operations';
-import context from '../../context';
+import CommentsOperation from './comments-operation';
 import './style.css';
 var DocOperations = function DocOperations(_ref) {
   var isShowChanges = _ref.isShowChanges,
@@ -15,7 +16,7 @@ var DocOperations = function DocOperations(_ref) {
   }, /*#__PURE__*/React.createElement(RevisionOperations, {
     isShowChanges: isShowChanges,
     toggleViewChanges: toggleViewChanges
-  }), !isSdocRevision && /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React.createElement(CommentsOperation, null), !isSdocRevision && /*#__PURE__*/React.createElement("span", {
     className: "op-item"
   }, /*#__PURE__*/React.createElement("i", {
     className: "sdocfont sdoc-share"