@seafile/sdoc-editor 0.4.2 → 0.4.4-1

package/dist/api/seafile-api.js

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import slugid from 'slugid';
 class SeafileAPI {
   constructor(server, token) {
     this.deleteSdocRevision = docUuid => {
@@ -25,16 +26,15 @@ class SeafileAPI {
       return this.req.post(url, form);
     }
   }
-  getImageFileNameWithTimestamp(file) {
-    var d = Date.now();
-    return 'image-' + d.toString() + file.name.slice(file.name.lastIndexOf('.'));
+  getImageFileNameWithUuid(file) {
+    return 'image-' + slugid.nice() + file.name.slice(file.name.lastIndexOf('.'));
   }
   uploadSdocImage(docUuid, imageFiles) {
     const url = '/api/v2.1/seadoc/upload-image/' + docUuid + '/';
     const form = new FormData();
     for (const fileItem of imageFiles) {
       if (fileItem.type.startsWith('image/')) {
-        const fileName = this.getImageFileNameWithTimestamp(fileItem);
+        const fileName = this.getImageFileNameWithUuid(fileItem);
         const file = new File([fileItem], fileName, {
           type: fileItem.type
         });

package/dist/basic-sdk/assets/css/sdoc-md-viewer.css

@@ -0,0 +1,29 @@
+.sdoc-editor-container {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+.sdoc-md-scroll-container {
+  display: flex;
+  overflow: auto;
+}
+
+.sdoc-md-scroll-container .sdoc-article-container {
+  width: 100%;
+  margin: 0 340px 0 40px !important;
+}
+
+.sdoc-md-scroll-container .sdoc-article-container .article .sdoc-header-2 {
+  border-bottom: 1px solid #ccc;
+}
+
+.sdoc-md-outline-container {
+  height: 80%;
+  overflow-y: auto;
+  padding-right: 1rem;
+  position: fixed;
+  right: 0;
+  top: 97px;
+  width: 300px;
+}

package/dist/basic-sdk/editor/editable-article.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo, Fragment } from 'react';
 import { Editable, ReactEditor, Slate } from '@seafile/slate-react';
+import { Editor } from '@seafile/slate';
 import { renderLeaf, renderElement, ContextToolbar, SideToolbar } from '../extension';
 import { getAboveBlockNode, getNextNode, getPrevNode, isSelectionAtBlockEnd, isSelectionAtBlockStart } from '../extension/core';
 import EventProxy from '../utils/event-handler';
@@ -12,6 +13,7 @@ import EventBus from '../utils/event-bus';
 import { ArticleContainer } from '../layout';
 import { useScrollContext } from '../hooks/use-scroll-context';
 import { SetNodeToDecorations } from '../highlight';
+import { IMAGE } from '../extension/constants';
 const EditableArticle = _ref => {
   let {
     isShowComment,
@@ -132,6 +134,24 @@ const EditableArticle = _ref => {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [scrollRef]);
+  const handleScrollIntoView = useCallback((editor, domRange) => {
+    try {
+      const {
+        selection
+      } = editor;
+      const [imageNodeEntry] = Editor.nodes(editor, {
+        match: n => n.type === IMAGE
+      });
+      if (imageNodeEntry) return;
+      const domNode = ReactEditor.toDOMNode(editor, selection.focus.path);
+      if (!domNode) return;
+      domNode.scrollIntoView({
+        block: 'nearest'
+      });
+    } catch (error) {
+      // 
+    }
+  }, []);
   return /*#__PURE__*/React.createElement(Slate, {
     editor: editor,
     value: slateValue,
@@ -139,6 +159,7 @@ const EditableArticle = _ref => {
   }, /*#__PURE__*/React.createElement(ArticleContainer, {
     editor: editor
   }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ContextToolbar, null), /*#__PURE__*/React.createElement(SetNodeToDecorations, null), /*#__PURE__*/React.createElement(Editable, {
+    scrollSelectionIntoView: handleScrollIntoView,
     cursors: cursors,
     renderElement: renderElement,
     renderLeaf: renderLeaf,

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

@@ -33,7 +33,8 @@ export const changeToCodeBlock = function (editor) {
   let language = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INSERT_POSITION.CURRENT;
   // Summarizes the strings for the selected highest-level node
-  let strArr = [];
+  let strArr = [],
+    path = Editor.path(editor, editor.selection);
   if (position === INSERT_POSITION.AFTER) {
     strArr = [''];
   } else {
@@ -72,7 +73,6 @@ export const changeToCodeBlock = function (editor) {
       }]
     }]
   };
-  const path = Editor.path(editor, editor.selection);
   if (position === INSERT_POSITION.AFTER) {
     Transforms.insertNodes(editor, newCodeBlockNode, {
       mode: 'highest',

package/dist/basic-sdk/index.js

@@ -1,6 +1,6 @@
 import SDocEditor from './editor/sdoc-editor';
 import RevisionEditor from './editor/revision-editor';
-import { DiffViewer, SDocViewer, PublishedRevisionDiffViewer } from './views';
+import { DiffViewer, SDocViewer, PublishedRevisionDiffViewer, SDocMdViewer } from './views';
 import SDocOutline from './outline';
 import EventBus from './utils/event-bus';
-export { SDocEditor, RevisionEditor, SDocViewer, SDocOutline, EventBus, DiffViewer, PublishedRevisionDiffViewer };
+export { SDocEditor, RevisionEditor, SDocViewer, SDocOutline, EventBus, DiffViewer, PublishedRevisionDiffViewer, SDocMdViewer };

package/dist/basic-sdk/md-outline/index.js

@@ -0,0 +1,70 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import OutlineItem from './outline-item';
+import { useScrollContext } from '../hooks/use-scroll-context';
+import './style.css';
+const getHeaderList = children => {
+  const headerList = [];
+  children.forEach(node => {
+    if (node.type === 'header2' || node.type === 'header3') {
+      headerList.push(node);
+    }
+  });
+  return headerList;
+};
+const Outline = _ref => {
+  let {
+    editor
+  } = _ref;
+  const {
+    t
+  } = useTranslation();
+  const scrollRef = useScrollContext();
+  const [headerList, setHeaderList] = useState([]);
+  const [activeId, setActiveId] = useState('');
+  useEffect(() => {
+    const headerList = getHeaderList(editor.children);
+    setHeaderList(headerList);
+  }, [editor.children]);
+  const handleScroll = useCallback(e => {
+    const scrollTop = scrollRef.current.scrollTop;
+    const styles = getComputedStyle(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current);
+    const paddingTop = parseInt(styles.paddingTop);
+    for (let i = 0; i < headerList.length; i++) {
+      const headerItem = headerList[i];
+      const dom = document.getElementById(headerItem.id);
+      const {
+        offsetTop,
+        offsetHeight
+      } = dom;
+      const styles = getComputedStyle(dom);
+      const marginTop = parseInt(styles.marginTop);
+      if (offsetTop + offsetHeight + marginTop > scrollTop - paddingTop) {
+        setActiveId(headerItem.id);
+        break;
+      }
+    }
+  }, [headerList, scrollRef]);
+  useEffect(() => {
+    let observerRefValue = null;
+    if (scrollRef.current) {
+      scrollRef.current.addEventListener('scroll', handleScroll);
+      observerRefValue = scrollRef.current;
+    }
+    return () => {
+      observerRefValue.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll, scrollRef]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-md-editor-outline"
+  }, headerList.length === 0 && /*#__PURE__*/React.createElement("div", {
+    className: "empty-container"
+  }, t('No_out_line')), headerList.length > 0 && headerList.map((node, index) => {
+    return /*#__PURE__*/React.createElement(OutlineItem, {
+      key: index,
+      node: node,
+      activeId: activeId
+    });
+  }));
+};
+export default Outline;

package/dist/basic-sdk/md-outline/outline-item.js

@@ -0,0 +1,24 @@
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+const OutlineItem = _ref => {
+  let {
+    node,
+    activeId
+  } = _ref;
+  const onItemClick = useCallback(() => {
+    const {
+      id
+    } = node;
+    document.getElementById(id).scrollIntoView();
+  }, [node]);
+  const className = classNames({
+    'outline-h2': node.type === 'header2',
+    'outline-h3': node.type === 'header3',
+    'active': node.id === activeId
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: className,
+    onClick: onItemClick
+  }, node.children.map(child => child.text).join(''));
+};
+export default OutlineItem;

package/dist/basic-sdk/md-outline/style.css

@@ -0,0 +1,45 @@
+.sdoc-md-editor-outline {
+  border-left: 1px solid #ddd;
+  padding: .5rem 1rem .5rem 0;
+}
+
+.sdoc-md-editor-outline .outline-h2, 
+.sdoc-md-editor-outline .outline-h3 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sdoc-md-editor-outline .outline-h2 {
+  margin-left: 20px;
+  line-height: 2.5;
+  color:#364149;
+  white-space: nowrap;
+  cursor:pointer;
+}
+
+.sdoc-md-editor-outline .outline-h2:hover {
+  color: #eb8205;
+}
+
+.sdoc-md-editor-outline .outline-h3 {
+  margin-left: 40px;
+  line-height: 2.5;
+  color:#364149;
+  white-space: nowrap;
+  cursor:pointer;
+}
+
+.sdoc-md-editor-outline .outline-h3:hover {
+  color: #eb8205;
+}
+
+.sdoc-md-editor-outline .empty-container {
+  margin-top: 10px;
+  text-align: center;
+}
+
+.sdoc-md-editor-outline .outline-h2.active,
+.sdoc-md-editor-outline .outline-h3.active {
+  color: #eb8205;
+}

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

@@ -2,4 +2,5 @@ import SDocViewer from './sdoc-viewer';
 import DiffViewer from './sdoc-diff-viewer';
 import RevisionDiffViewer from './revision-diff-viewer';
 import PublishedRevisionDiffViewer from './published-revision-diff-viewer';
-export { SDocViewer, DiffViewer, RevisionDiffViewer, PublishedRevisionDiffViewer };
+import SDocMdViewer from './sdoc-md-viewer';
+export { SDocViewer, DiffViewer, RevisionDiffViewer, PublishedRevisionDiffViewer, SDocMdViewer };

package/dist/basic-sdk/views/sdoc-md-viewer.js

@@ -0,0 +1,46 @@
+import React, { useRef } from 'react';
+import { createDefaultEditor } from '../extension';
+import withNodeId from '../node-id';
+import { generateDefaultDocContent } from '../../utils';
+import { EditorContainer } from '../layout';
+import ReadOnlyArticle from './readonly-article';
+import { ColorProvider } from '../hooks/use-color-context';
+import { ScrollContext } from '../hooks/use-scroll-context';
+import Outline from '../md-outline';
+import '../assets/css/sdoc-md-viewer.css';
+const SDocMdViewer = _ref => {
+  let {
+    editor,
+    document,
+    showOutline,
+    scrollRef: propsScrollRef
+  } = _ref;
+  const validEditor = editor || withNodeId(createDefaultEditor());
+  const slateValue = (document || generateDefaultDocContent()).children;
+  const scrollRef = useRef(null);
+  const currentScrollRef = propsScrollRef || scrollRef;
+  return /*#__PURE__*/React.createElement(EditorContainer, {
+    editor: validEditor,
+    readonly: true
+  }, /*#__PURE__*/React.createElement(ColorProvider, null, /*#__PURE__*/React.createElement("div", {
+    ref: scrollRef,
+    className: "sdoc-md-scroll-container"
+  }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
+    value: {
+      scrollRef: currentScrollRef
+    }
+  }, /*#__PURE__*/React.createElement(ReadOnlyArticle, {
+    editor: validEditor,
+    slateValue: slateValue,
+    isShowComment: false
+  }), showOutline && /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-md-outline-container"
+  }, /*#__PURE__*/React.createElement(Outline, {
+    editor: validEditor
+  }))))));
+};
+SDocMdViewer.defaultProps = {
+  showToolbar: false,
+  showOutline: false
+};
+export default SDocMdViewer;

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

@@ -19,7 +19,9 @@ const DocInfo = _ref => {
   } = _ref;
   const onInternalLinkClick = useCallback(() => {
     const eventBus = EventBus.getInstance();
-    eventBus.dispatch(EXTERNAL_EVENT.INTERNAL_LINK_CLICK);
+    eventBus.dispatch(EXTERNAL_EVENT.INTERNAL_LINK_CLICK, {
+      internalLink: window.location.href
+    });
   }, []);
   const toggleStar = useCallback(() => {
     const eventBus = EventBus.getInstance();
@@ -80,7 +82,13 @@ const DocInfo = _ref => {
     className: "doc-name"
   }, oldDocName), /*#__PURE__*/React.createElement("div", {
     className: "sdoc-revision-order"
-  }, t('Revision') + ' ' + revisionId), isPublished && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, t('Revision') + ' ' + revisionId), isShowInternalLink && /*#__PURE__*/React.createElement("span", {
+    className: "doc-icon"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "internal-link sdocfont sdoc-link",
+    title: t('Internal_link'),
+    onClick: onInternalLinkClick
+  })), isPublished && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-revision-published-tip"
   }, t('Published')), /*#__PURE__*/React.createElement("div", {
     className: "sdoc-revision-source-doc",

package/dist/index.js

@@ -4,4 +4,5 @@ import SimpleEditor from './pages/simple-editor';
 import SimpleViewer from './pages/simple-viewer';
 import DiffViewer from './pages/diff-viewer';
 import PublishedRevisionViewer from './pages/published-revision-viewer';
-export { SDocViewer, SimpleEditor, SimpleViewer, EventBus, EXTERNAL_EVENT, DiffViewer, PublishedRevisionViewer };
+import MarkdownViewer from './pages/markdown-viewer';
+export { SDocViewer, SimpleEditor, SimpleViewer, EventBus, EXTERNAL_EVENT, DiffViewer, PublishedRevisionViewer, MarkdownViewer };

package/dist/pages/markdown-viewer.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import context from '../context';
+import ErrorBoundary from './error-boundary';
+import { SDocMdViewer } from '../basic-sdk';
+import '../assets/css/simple-viewer.css';
+const MarkdownViewer = _ref => {
+  let {
+    document,
+    showOutline,
+    scrollRef
+  } = _ref;
+  context.initApi();
+  return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(SDocMdViewer, {
+    document: document,
+    showOutline: showOutline,
+    scrollRef: scrollRef
+  }));
+};
+export default MarkdownViewer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.4.2",
+  "version": "0.4.4-1",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",