@seafile/seafile-editor 0.3.97 → 0.3.100

package/dist/example/assets/css/seafile-editor-main.css

@@ -0,0 +1,125 @@
+.seafile-markdown-editor {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+
+.seafile-markdown-editor .markdown-editor-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  border-bottom: 1px solid #e5e5e5;
+  background-color: #fff;
+  user-select: none;
+  box-shadow: 0 3px 2px -2px rgba(200,200,200,.15);
+  z-index: 3;
+}
+
+.seafile-markdown-editor .markdown-editor-toolbar .editor-btn-group {
+  height: 100%;
+  padding: 5px 0 5px 5px;
+  font-size: 0.75rem;
+  border-right: 1px solid #e5e5e5;
+  color: #555555;
+}
+
+.seafile-markdown-editor .markdown-editor-content {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.seafile-markdown-editor .markdown-editor-content .markdown-editor-wrapper {
+  flex: 1;
+  display: flex;
+  position: relative;
+  overflow-x: hidden;
+  min-height: 0;
+  min-width: 0;
+  background-color: #fafaf9;
+}
+
+.seafile-markdown-editor .markdown-editor-content .markdown-help-wrapper {
+  width: 0;
+  display: flex;
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+}
+
+.seafile-markdown-editor .markdown-editor-content .markdown-help-wrapper.show {
+  width: 300px;
+  background-color: #fff;
+  border-left: 1px solid #e6e6dd;
+  position: relative;
+}
+
+
+.seafile-markdown-editor .markdown-editor-content .markdown-help-wrapper .file-info {
+  flex: 1;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+
+.seafile-markdown-editor .markdown-editor-content .markdown-help-wrapper .help-info {
+  flex: 1;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+
+.seafile-markdown-editor ::-webkit-scrollbar{
+  width: 8px;
+  height: 8px;
+}
+
+.seafile-markdown-editor ::-webkit-scrollbar-button {
+  display: none;
+}
+
+.seafile-markdown-editor ::-webkit-scrollbar-thumb {
+  background-color: rgb(206, 206, 212);
+  border-radius: 10px;
+}
+
+@media (max-width: 991.8px) {
+  .seafile-editor {
+    min-width: calc(100% - 40px);
+  }
+
+  .seafile-editor-main-panel {
+    width: calc(100% - 200px);
+  }
+
+  .seafile-editor-side-panel {
+    min-width: 200px;
+  }
+
+  .editor-container {
+    width: 100%;
+  }
+
+  .editor-container .editor {
+    margin: 20px !important;
+    padding: 20px 30px;
+  }
+}
+
+@media (max-width: 768px) {
+  .editor-container .editor {
+    margin: 0 !important;
+    padding: 10px 15px;
+    border: 0;
+  }
+}
+
+.full-screen .editor-container .article {
+  margin: 20px auto;
+  max-width: 950px;
+}

package/dist/example/assets/css/seafile-editor-side.css

@@ -0,0 +1,89 @@
+.seafile-markdown-editor .markdown-help-wrapper .side-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f5f5;
+  user-select: none;
+}
+
+.seafile-markdown-editor .side-panel .nav {
+  padding: 10px 0;
+  min-width: 125px;
+  border-bottom: 1px solid #eee;
+  height: 36px;
+  flex-wrap: nowrap;
+}
+
+.seafile-markdown-editor .side-panel .nav .nav-item {
+  padding: 0 0.75rem;
+}
+
+.seafile-markdown-editor .side-panel .nav .nav-link {
+  padding: 0 0.75rem;
+  transition: 0.3s color;
+  margin-right: 0;
+}
+
+.seafile-markdown-editor .side-panel .nav-link {
+  color: #888;
+}
+
+.seafile-markdown-editor .side-panel .nav .nav-link.active {
+  color: #f19645;
+  border-bottom: 0;
+}
+
+.seafile-markdown-editor .side-panel .nav .iconfont {
+  font-weight: 700;
+  font-size: 0.875rem;
+}
+
+.seafile-markdown-editor .side-panel-content {
+  font-size: 0.937rem;
+  overflow: hidden;
+}
+
+.seafile-markdown-editor .side-panel-content:hover {
+  overflow: auto;
+}
+
+.image-view {
+  width: 200px;
+  height: 150px;
+  position: absolute;
+  background-color: #fff;
+  z-index: 1004;
+  box-shadow: 0 0 10px #aaa;
+  border-radius: 3px;
+  line-height: 150px;
+  overflow: hidden;
+  font-size: 0;
+  text-align: center;
+}
+
+.image-view img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.image-view i {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  line-height: 150px;
+  font-size: 30px;
+  color: #eb8205;
+  -moz-animation: rotate 1.5s ease infinite;
+  -webkit-animation: rotate 1.5s ease infinite;
+  animation: rotate 1.5s ease infinite;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/dist/example/assets/css/side-panel.css

@@ -0,0 +1,81 @@
+.seafile-rich-editor .side-panel {
+  user-select: none;
+  height:100%;
+  background-color: #f5f5f5;
+}
+.seafile-rich-editor .side-panel .nav {
+  border-bottom: 1px solid #eee;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  min-width: 125px;
+  height: 36px;
+  flex-wrap: nowrap;
+}
+.seafile-rich-editor .side-panel .nav .nav-item {
+  padding: 0 0.75rem;
+}
+.seafile-rich-editor .side-panel .nav .nav-link {
+  padding: 0 0.75rem;
+  transition: 0.3s color;
+  margin-right: 0;
+}
+.seafile-rich-editor .side-panel .nav-link {
+  color: #888;
+}
+.seafile-rich-editor .side-panel .nav .nav-link.active {
+  color: #f19645;
+  border-bottom: 0;
+}
+.seafile-rich-editor .side-panel .nav .iconfont {
+  font-weight: 700;
+  font-size: 0.875rem;
+}
+.seafile-rich-editor .side-panel-content {
+  font-size: 0.937rem;
+  overflow: hidden;
+}
+
+.seafile-rich-editor .side-panel-content:hover {
+  overflow: auto;
+}
+
+.image-view {
+  width: 200px;
+  height: 150px;
+  position: absolute;
+  background-color: #fff;
+  z-index: 1004;
+  box-shadow: 0 0 10px #aaa;
+  border-radius: 3px;
+  line-height: 150px;
+  overflow: hidden;
+  font-size: 0;
+  text-align: center;
+}
+
+.image-view img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.image-view i {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  line-height: 150px;
+  font-size: 30px;
+  color: #eb8205;
+  -moz-animation: rotate 1.5s ease infinite;
+  -webkit-animation: rotate 1.5s ease infinite;
+  animation: rotate 1.5s ease infinite;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/dist/{components → example/components}/comment-panel.js

@@ -5,13 +5,14 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import dayjs from 'dayjs';
-import { processor } from '../utils/seafile-markdown2html';
+import { processor } from '../../utils/seafile-markdown2html';
 import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
-import ParticipantsList from './participants-list';
-import toaster from '../components/toast';
 import { MentionsInput, Mention } from 'react-mentions';
-import { defaultStyle } from '../css/react-mentions-default-style';
-import '../css/richeditor/comments-list.css';
+import toaster from '../../components/toast';
+import ParticipantsList from './participants-list';
+import EditorBuilder from '../../editor/editor-builder';
+import { defaultStyle } from '../assets/css/react-mentions-default-style';
+import '../assets/css/comments-list.css';
 
 var CommentPanel = /*#__PURE__*/function (_React$Component) {
   _inherits(CommentPanel, _React$Component);
@@ -136,6 +137,11 @@ var CommentPanel = /*#__PURE__*/function (_React$Component) {
       _this.toBeAddedParticipant.push(email);
     };
 
+    _this.scrollToQuote = function (path) {
+      var editorRef = EditorBuilder.getEditorRef();
+      editorRef && editorRef.scrollToQuote(path);
+    };
+
     _this.renderUserSuggestion = function (entry, search, highlightedDisplay, index, focused) {
       return /*#__PURE__*/React.createElement("div", {
         className: "user ".concat(focused ? 'focused' : '')
@@ -191,7 +197,7 @@ var CommentPanel = /*#__PURE__*/function (_React$Component) {
           editComment: _this2.editComment,
           showResolvedComment: _this2.state.showResolvedComment,
           editorApi: _this2.props.editorApi,
-          scrollToQuote: _this2.props.scrollToQuote
+          scrollToQuote: _this2.scrollToQuote
         }));
       }), this.state.commentsList.length === 0 && /*#__PURE__*/React.createElement("li", {
         className: "comment-vacant"

package/dist/{components → example/components}/detail-list-view.js

@@ -6,7 +6,7 @@ import React from 'react';
 import dayjs from 'dayjs/';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import ParticipantsList from './participants-list';
-import '../css/richeditor/detail-list-view.css';
+import '../assets/css/detail-list-view.css';
 
 require('dayjs/locale/zh-cn');
 

package/dist/{components → example/components}/participants-list.js

@@ -4,7 +4,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { Tooltip } from 'reactstrap';
-import '../css/richeditor/participants-list.css';
+import '../assets/css/participants-list.css';
 
 var ParticipantsList = /*#__PURE__*/function (_React$Component) {
   _inherits(ParticipantsList, _React$Component);

package/dist/{components → example/components}/side-panel.js

@@ -5,9 +5,10 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react';
-import OutlineView from './outline';
+import OutlineView from '../../components/outline';
 import CommentPanel from './comment-panel';
 import DetailListView from './detail-list-view';
+import '../assets/css/side-panel.css';
 
 var SidePanel = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(SidePanel, _React$PureComponent);
@@ -146,17 +147,14 @@ var SidePanel = /*#__PURE__*/function (_React$PureComponent) {
       })))), /*#__PURE__*/React.createElement("div", {
         className: "side-panel-content flex-fill"
       }, this.state.navItem === 'outline' && /*#__PURE__*/React.createElement(OutlineView, {
-        editor: this.props.editor,
-        document: this.props.document,
-        t: this.props.t
+        document: this.props.document
       }), this.state.navItem === 'commentsPanel' && /*#__PURE__*/React.createElement(CommentPanel, {
         editorApi: this.props.editorApi,
-        t: this.props.t,
-        scrollToQuote: this.props.scrollToQuote,
         relistComment: this.props.relistComment,
         openDialogs: this.props.openDialogs,
         participants: this.props.participants,
-        onParticipantsChange: this.props.onParticipantsChange
+        onParticipantsChange: this.props.onParticipantsChange,
+        t: this.props.t
       }), this.state.navItem === 'detail' && /*#__PURE__*/React.createElement(DetailListView, {
         t: this.props.t,
         fileTagList: this.props.fileTagList,

package/dist/example/seafile-editor.js

@@ -0,0 +1,137 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+import EditorBuilder from '../editor/editor-builder';
+import MarkdownEditor from '../editor/markdown-editor';
+import Toolbar from '../components/toolbar';
+import UserHelp from '../components/user-help';
+import SidePanel from './components/side-panel';
+import './assets/css/seafile-editor-main.css';
+import './assets/css/seafile-editor-side.css';
+
+var SeafileEditor = /*#__PURE__*/function (_React$Component) {
+  _inherits(SeafileEditor, _React$Component);
+
+  var _super = _createSuper(SeafileEditor);
+
+  function SeafileEditor(props) {
+    var _this;
+
+    _classCallCheck(this, SeafileEditor);
+
+    _this = _super.call(this, props);
+
+    _this.toggleSidePanel = function () {
+      _this.setState({
+        isShowSidePanel: !_this.state.isShowSidePanel,
+        isShowHelpPanel: false
+      });
+    };
+
+    _this.showHelpDialog = function () {
+      _this.setState({
+        isShowSidePanel: false,
+        isShowHelpPanel: true
+      });
+    };
+
+    _this.hideHelpDialog = function () {
+      _this.setState({
+        isShowHelpPanel: false
+      });
+    };
+
+    _this.toggleCommentBtn = function () {
+      var isSupport = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+      _this.setState({
+        isSupportComment: isSupport
+      });
+    };
+
+    _this.onAddComment = function () {
+      _this.setState({
+        relistComment: _this.state.relistComment + 1
+      });
+    };
+
+    _this.insertRepoFile = function () {
+      if (_this.props.readOnly) return;
+      _this.props.openDialogs && _this.props.openDialogs('insert_file');
+    };
+
+    _this.addLink = function (fileName, url, isImage) {
+      var editorRef = EditorBuilder.getEditorRef();
+      editorRef.addLink(fileName, url, isImage);
+    };
+
+    _this.state = {
+      isShowSidePanel: false,
+      isSupportComment: false,
+      relistComment: 0
+    };
+    window.richMarkdownEditor = _assertThisInitialized(_this);
+    return _this;
+  }
+
+  _createClass(SeafileEditor, [{
+    key: "render",
+    value: function render() {
+      var hasSidePanel = true;
+      var _this$state = this.state,
+          isShowSidePanel = _this$state.isShowSidePanel,
+          isShowHelpPanel = _this$state.isShowHelpPanel;
+      var isShowHelpWrapper = isShowSidePanel || isShowHelpPanel;
+      var helpWrapperStyle = isShowHelpPanel ? {
+        width: '350px'
+      } : {};
+      return /*#__PURE__*/React.createElement("div", {
+        className: "seafile-markdown-editor"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "markdown-editor-toolbar"
+      }, /*#__PURE__*/React.createElement(Toolbar, {
+        hasSidePanel: hasSidePanel,
+        isShowSidePanel: isShowSidePanel,
+        toggleSidePanel: this.toggleSidePanel,
+        insertRepoFile: this.insertRepoFile
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "markdown-editor-content"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "markdown-editor-wrapper ".concat(isShowHelpWrapper ? '' : 'full-screen')
+      }, /*#__PURE__*/React.createElement(MarkdownEditor, {
+        scriptSource: this.props.scriptSource,
+        value: this.props.value,
+        editorApi: this.props.editorApi,
+        onSave: this.props.onSave,
+        onChange: this.props.onChange,
+        resetRichValue: this.props.resetRichValue,
+        isSupportComment: this.state.isSupportComment,
+        onAddComment: this.onAddComment
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "markdown-help-wrapper ".concat(isShowHelpWrapper ? 'show' : ''),
+        style: helpWrapperStyle
+      }, isShowSidePanel && /*#__PURE__*/React.createElement(SidePanel, {
+        document: this.props.value,
+        fileInfo: this.props.fileInfo,
+        editorApi: this.props.editorApi,
+        relistComment: this.state.relistComment,
+        fileTagList: this.props.fileTagList,
+        participants: this.props.participants,
+        onParticipantsChange: this.props.onParticipantsChange,
+        toggleCommentBtn: this.toggleCommentBtn,
+        openDialogs: this.props.openDialogs,
+        t: this.props.t
+      }), isShowHelpPanel && /*#__PURE__*/React.createElement(UserHelp, {
+        hideHelpDialog: this.hideHelpDialog
+      }))));
+    }
+  }]);
+
+  return SeafileEditor;
+}(React.Component);
+
+export default withTranslation('seafile-editor')(SeafileEditor);

package/dist/index.js

@@ -0,0 +1,9 @@
+import DiffViewer from './viewer/diff-viewer';
+import MarkdownViewer from './viewer/markdown-viewer';
+import { deserialize, serialize } from "./utils/slate2markdown";
+import { processor } from './utils/seafile-markdown2html';
+import { EditorBuilder, MarkdownEditor, SimpleEditor, PlainMarkdownEditor } from './editor';
+import Toolbar from './components/toolbar';
+import Outline from './components/outline';
+import UserHelp from './components/user-help';
+export { EditorBuilder, MarkdownEditor, SimpleEditor, PlainMarkdownEditor, DiffViewer, MarkdownViewer, Toolbar, Outline, UserHelp, deserialize, serialize, processor };

package/dist/index.local.js

@@ -0,0 +1,58 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Suspense } from 'react';
+import ReactDOM from 'react-dom';
+import { Router } from '@reach/router';
+import { I18nextProvider } from 'react-i18next';
+import Loading from './components/loading';
+import SFChooser from './pages/seafile-editor-chooser';
+import SFRichMdEditor from './pages/seafile-markdown-editor';
+import SFSimpleMdEditor from './pages/seafile-simple-editor';
+import SFMarkdownViewer from './pages/seafile-markdown-viewer';
+import i18n from './_i18n';
+import './assets/css/index.css';
+
+var App = /*#__PURE__*/function (_React$Component) {
+  _inherits(App, _React$Component);
+
+  var _super = _createSuper(App);
+
+  function App() {
+    _classCallCheck(this, App);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(App, [{
+    key: "render",
+    value: function render() {
+      var style = {
+        display: 'flex',
+        width: '100%',
+        height: '100%'
+      };
+      return /*#__PURE__*/React.createElement(Router, {
+        primary: false,
+        style: style
+      }, /*#__PURE__*/React.createElement(SFChooser, {
+        path: "/"
+      }), /*#__PURE__*/React.createElement(SFMarkdownViewer, {
+        path: "/markdownviewer"
+      }), /*#__PURE__*/React.createElement(SFSimpleMdEditor, {
+        path: "/simple-editor"
+      }), /*#__PURE__*/React.createElement(SFRichMdEditor, {
+        path: "/seafile-markdown-editor"
+      }));
+    }
+  }]);
+
+  return App;
+}(React.Component);
+
+ReactDOM.render( /*#__PURE__*/React.createElement(I18nextProvider, {
+  i18n: i18n
+}, /*#__PURE__*/React.createElement(Suspense, {
+  fallback: /*#__PURE__*/React.createElement(Loading, null)
+}, /*#__PURE__*/React.createElement(App, null))), document.getElementById('root'));

package/dist/pages/seafile-editor/index.js

@@ -0,0 +1,38 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import SeafileEditor from './seafile-editor';
+import LoadScript from '../../editor/load-script';
+
+var SeafileEditorWithErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(SeafileEditorWithErrorBoundary, _React$Component);
+
+  var _super = _createSuper(SeafileEditorWithErrorBoundary);
+
+  function SeafileEditorWithErrorBoundary() {
+    _classCallCheck(this, SeafileEditorWithErrorBoundary);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(SeafileEditorWithErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error) {
+      console.error(error);
+      this.forceUpdate();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(LoadScript, {
+        scriptSource: this.props.scriptSource
+      }, /*#__PURE__*/React.createElement(SeafileEditor, this.props));
+    }
+  }]);
+
+  return SeafileEditorWithErrorBoundary;
+}(React.Component);
+
+export default SeafileEditorWithErrorBoundary;