@seafile/sdoc-editor 0.4.1 → 0.4.2-2

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/extension/plugins/file-link/render-elem.js

@@ -86,9 +86,9 @@ const FileLink = _ref => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   let style = {};
-  if (element.ADD) {
+  if (element.add) {
     style = _objectSpread({}, ADDED_STYLE);
-  } else if (element.DELETE) {
+  } else if (element.delete) {
     style = _objectSpread({}, DELETED_STYLE);
   }
   if (style.computed_background_color) {

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

@@ -13,6 +13,7 @@ import { IMAGE_BORDER_TYPE } from './constants';
 import { ADDED_STYLE, DELETED_STYLE, IMAGE_BLOCK } from '../../constants';
 import imagePlaceholder from '../../../assets/images/image-placeholder.png';
 const Image = _ref => {
+  var _imageRef$current, _imageRef$current2;
   let {
     element,
     editor,
@@ -228,11 +229,11 @@ const Image = _ref => {
   }), isResizing && /*#__PURE__*/React.createElement("span", {
     className: "image-size",
     contentEditable: false
-  }, /*#__PURE__*/React.createElement("span", null, t('Width'), ':', parseInt(movingWidth || imageRef.current.clientWidth)), /*#__PURE__*/React.createElement("span", null, "\xA0\xA0"), /*#__PURE__*/React.createElement("span", null, t('Height'), ':', imageRef.current.clientHeight))), nodeEntry[0].type === IMAGE_BLOCK && show_caption && /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.createElement("span", null, t('Width'), ':', parseInt(movingWidth || ((_imageRef$current = imageRef.current) === null || _imageRef$current === void 0 ? void 0 : _imageRef$current.clientWidth))), /*#__PURE__*/React.createElement("span", null, "\xA0\xA0"), /*#__PURE__*/React.createElement("span", null, t('Height'), ':', imageRef.current.clientHeight))), nodeEntry[0].type === IMAGE_BLOCK && show_caption && /*#__PURE__*/React.createElement("input", {
     id: "sdoc-image-caption-input",
     className: "sdoc-image-caption-input-wrapper",
     style: {
-      width: (data === null || data === void 0 ? void 0 : data.width) || imageRef.current.clientWidth
+      width: (data === null || data === void 0 ? void 0 : data.width) || ((_imageRef$current2 = imageRef.current) === null || _imageRef$current2 === void 0 ? void 0 : _imageRef$current2.clientWidth)
     },
     placeholder: t('Insert_caption'),
     value: caption,
@@ -267,8 +268,11 @@ export function renderImage(props, editor) {
   if (leaf && leaf.computed_background_color) {
     style['backgroundColor'] = leaf.computed_background_color;
   }
-  if (element.ADD || element.DELETE) {
-    style = Object.assign({}, style, element.ADD ? ADDED_STYLE : DELETED_STYLE);
+  if (element.add || element.delete) {
+    style = Object.assign({}, style, element.add ? ADDED_STYLE : DELETED_STYLE);
+    if (style.computed_background_color) {
+      style['backgroundColor'] = style.computed_background_color;
+    }
   }
   return /*#__PURE__*/React.createElement(SdocImage, Object.assign({}, props, {
     style: style,

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

@@ -88,9 +88,9 @@ const SdocFileLink = _ref => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   let style = {};
-  if (element.ADD) {
+  if (element.add) {
     style = _objectSpread({}, ADDED_STYLE);
-  } else if (element.DELETE) {
+  } else if (element.delete) {
     style = _objectSpread({}, DELETED_STYLE);
   }
   if (style.computed_background_color) {

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,44 @@
+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
+  } = _ref;
+  const validEditor = editor || withNodeId(createDefaultEditor());
+  const slateValue = (document || generateDefaultDocContent()).children;
+  const scrollRef = useRef(null);
+  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
+    }
+  }, /*#__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/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,17 @@
+import React from 'react';
+import context from '../context';
+import ErrorBoundary from './error-boundary';
+import { SDocMdViewer } from '../basic-sdk';
+import '../assets/css/simple-viewer.css';
+context.initApi();
+const MarkdownViewer = _ref => {
+  let {
+    document,
+    showOutline
+  } = _ref;
+  return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(SDocMdViewer, {
+    document: document,
+    showOutline: showOutline
+  }));
+};
+export default MarkdownViewer;

package/package.json

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