@seafile/seafile-editor 0.4.8 → 1.0.0

package/site/setting.js

@@ -0,0 +1,36 @@
+/** (1/4) initialize config object */
+let config = {
+  serviceUrl: 'https://dev.seafile.com/seahub',
+  username: '**',
+  password: '***',
+  name: '***',
+  contact_email: '**',
+  lib_name: '个人资料',
+  repoID: '2a77b4e3-0040-4c77-86e2-306cc8f53264',
+  // seafileCollabServer: 'http://127.0.0.1:4000',
+  dirPath: '/',
+  filePath: '/aaa.md',
+  fileName: 'aaa.md',
+};
+
+/** (2/4) load local development settings ./setting.local.js (if exist) */
+try {
+  config.local = require('./setting.local.js').default || {};
+  config = {...config, ...{loadVerbose: true}, ...config.local};
+  config.loadVerbose && console.log('[SeaTable Plugin Development] Configuration merged with "./src/setting.local.js" (this message can be disabled by adding `loadVerbose: false` to the local development settings)');
+  delete config.local;
+  delete config.loadVerbose;
+} catch (error) {
+  // fall-through by intention
+  console.error('[SeaTable Plugin Development] Please create "./src/setting.local.js" (from `setting.local.dist.js`)');
+  throw error;
+}
+
+/** (3/4) remove server trailing slash(es) (if any, common configuration error)*/
+if (config.serviceUrl !== config.serviceUrl.replace(/\/+$/, '')) {
+  console.log(`[SeaTable Plugin Development] Server "${config.server}" trailing slash(es) removed (this message will go away by correcting the \`server: ...\` entry in the local development settings)`);
+  config.serviceUrl = config.serviceUrl.replace(/\/+$/, '');
+}
+
+/* (4/4) init window.dtablePluginConfig  */
+export { config as serverConfig };

package/site/setting.local.dist.js

@@ -0,0 +1,23 @@
+const config = {
+  serviceUrl: 'http://127.0.0.1', // required
+  name: '**', // required, current user's name
+  username: '**', // required
+  password: '**', // required
+  avatarURL: '**', // required, current user's avatar_url
+  contact_email: '**',
+  lib_name: '**',
+  repoID: '8c911722-6a67-420d-a52d-aa6e8dcd6279', // required
+  dirPath: '/', // required
+  docPath: '/aaa.sdoc',  // required
+  docName: 'aaa.sdoc', // required
+  docUuid: '66d73184-4a41-4ee9-9e12-3a64c3527fbb', // required
+  sdocServer: 'http://127.0.0.1:7070', // required
+  accessToken: '',
+  isDevelopment: true,
+  isOpenSocket: false,  // required
+  lang: 'en', // optional
+  assetsUrl: '/api/v2.1/seadoc/download-image/bf93b0a6-2d02-431a-9de5-9ec7a6f357c9', // required
+  isShowInternalLink: false, // required
+}
+
+export default config;

package/src/assets/css/slate-editor.css

@@ -0,0 +1,57 @@
+.sf-slate-editor-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.sf-slate-editor-container .sf-slate-editor-toolbar {
+  display: flex;
+  justify-content: center;
+  height: 44px;
+  align-items: center;
+  padding: 0 10px;
+  background-color: #fff;
+  user-select: none;
+  border-bottom: 1px solid #e5e6e8;
+  position: relative;
+  z-index: 102;
+}
+
+.sf-slate-editor-container .sf-slate-editor-content {
+  width: 100%;
+  height: calc(100% - 44px);
+  display: flex;
+  background: #f5f5f5;
+  position: relative;
+  min-height: 0;
+}
+
+.sf-slate-editor-container .sf-slate-scroll-container {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+.sf-slate-editor-container .sf-slate-article-container {
+  flex: 1;
+  position: relative;
+  max-width: 950px;
+  min-width: 400px;
+  margin: 0 auto;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.sf-slate-editor-container .sf-slate-editor-content .article {
+  max-width: 950px;
+  min-height: 1200px;
+  padding: 40px 60px;
+  background-color: #fff;
+  border: 1px solid #e5e6e8;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
+}
+
+.sf-slate-editor-container .sf-slate-editor-content .article div:first-child {
+  outline: none;
+}

package/src/constants/event-types.js

@@ -0,0 +1,11 @@
+export const INTERNAL_EVENTS = {
+  ON_ARTICLE_INFO_TOGGLE: 'on_article_info_toggle',
+  ON_MOUSE_ENTER_BLOCK: 'on_mouse_enter_block',
+  ON_OPEN_LINK_POPOVER: 'on_open_link_popover',
+  ON_CLOSE_LINK_POPOVER: 'on_close_link_popover',
+  ON_OPEN_FORMULA_DIALOG: 'on_open_formula_dialog',
+};
+
+export const EXTERNAL_EVENTS = {
+  ON_HELP_INFO_TOGGLE: 'on_help_info_toggle'
+};

package/src/constants/hot-keys.js

@@ -0,0 +1,47 @@
+export const HELPER_HOTKEYS = [
+  {
+    'Make_list': [['*/-', 'space']],
+    'Make_ordered_list': [['1.', 'space']],
+    'Insert_new_item': [['Enter']],
+    'Insert_child_in_item': [['Shift', 'Enter']],
+    'Increase_depth': [['Tab']]
+  },
+  {
+    'Heading_1': [['#', 'space']],
+    'Heading_2': [['##', 'space']],
+    'Heading_3': [['###', 'space']],
+    'Heading_4': [['####', 'space']],
+    'Heading_5': [['#####', 'space']],
+    'Heading_6': [['######', 'space']]
+  },
+  {
+    'Make_code_block': [['```']],
+    'Insert_new_line': [['Enter']],
+    'Escape_code_block': [['Ctrl', 'Enter'], ['Cmd', 'Enter']],
+    'Insert_indent': [['Tab']]
+  },
+  {
+    'Make_block_quote': [['>', 'space']],
+    'Escape_block_quote': [['Enter']],
+  },
+  {
+    'Insert_table_row': [['Enter']],
+    'Escape_table': [['Ctrl', 'Enter'], ['Cmd', 'Enter']]
+  },
+  {
+    'Insert_formula': [['Ctrl', '$'], ['Cmd', '$']],
+  },
+  {
+    'Bold': [['**bold** / __bold__', 'space']],
+    'Italic': [['*italic* / _italic_', 'space']],
+    'Italic_bold': [['***italic*** / ___italic___', 'space']],
+    'Inline_code': [['`code`', 'space']]
+  },
+  {
+    'Save_file': [['Ctrl', 's'], ['Cmd', 's']],
+  },
+  {
+    'Paste_screen_shot': [['Ctrl', 'v'], ['Cmd', 'v']],
+    'Drag_image_from_anywhere_to_upload_it': []
+  }
+];

package/src/containers/article-info/index.js

@@ -0,0 +1,49 @@
+import React, { useCallback, useState } from 'react';
+import Outline from '../outline';
+import { useSlateStatic } from 'slate-react';
+
+import './style.css';
+
+const TAB_TYPES = {
+  OUTLINE: 'outline',
+  FILE_DETAIL: 'file_detail',
+};
+
+export default function ArticleInfo({ children }) {
+  const editor = useSlateStatic();
+  const [activeTab, setActiveTab] = useState(TAB_TYPES.OUTLINE);
+  const onOutlineClick = useCallback(() => {
+    if (activeTab === TAB_TYPES.OUTLINE) return;
+    setActiveTab(TAB_TYPES.OUTLINE);
+  }, [activeTab]);
+
+  const onDetailClick = useCallback(() => {
+    if (activeTab === TAB_TYPES.FILE_DETAIL) return;
+    setActiveTab(TAB_TYPES.FILE_DETAIL);
+  }, [activeTab]);
+
+  console.log(children);
+
+  return (
+    <div className="sf-article-info-container">
+      <ul className="sf-article-info-nav nav">
+        <li className="nav-item">
+          <span className={`nav-link ${activeTab === TAB_TYPES.OUTLINE && 'active'}`} onClick={onOutlineClick}><i className="iconfont icon-list-ul"/></span>
+        </li>
+        <li className="nav-item">
+          <span className={`nav-link ${activeTab === TAB_TYPES.FILE_DETAIL && 'active'}`} onClick={onDetailClick}><i className={'iconfont icon-info-circle'}/></span>
+        </li>
+      </ul>
+      <div className="sf-article-info-content">
+        {activeTab === TAB_TYPES.OUTLINE && (
+          <Outline editor={editor} />
+        )}
+        {activeTab === TAB_TYPES.FILE_DETAIL && (
+          <>
+            { children }
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/containers/article-info/style.css

@@ -0,0 +1,52 @@
+.sf-article-info-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f5f5;
+  user-select: none;
+}
+
+.sf-article-info-container .nav {
+  padding: 10px 0;
+  min-width: 125px;
+  height: 36px;
+  border-bottom: 1px solid #eee;
+  background-color: #fff;
+  justify-content: space-around;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+}
+
+.sf-article-info-container .nav .nav-item {
+  padding: 0 0.75rem;
+}
+
+.sf-article-info-container .nav .nav-link {
+  padding: 0 0.75rem;
+  transition: 0.3s color;
+  margin-right: 0;
+}
+
+.sf-article-info-container .nav-link {
+  color: #888;
+}
+
+.sf-article-info-container .nav .nav-link.active {
+  color: #ff9800;
+  border-bottom: 0;
+}
+
+.sf-article-info-container .nav .iconfont {
+  font-weight: 700;
+  font-size: 0.875rem;
+}
+
+.sf-article-info-container .sf-article-info-content {
+  flex: 1;
+  font-size: 0.937rem;
+  overflow: hidden;
+}
+
+.sf-article-info-container .sf-article-info-content:hover {
+  overflow: auto;
+}

package/src/containers/custom/get-event-transfer.js

@@ -0,0 +1,28 @@
+const getEventTransfer = (data) => {
+  const fragmentString = data.getData('application/x-slate-fragment');
+  const textContent = data.getData('text') || data.getData('text/plain') || '';
+  let fragmentContent = fragmentString ? JSON.parse(decodeURIComponent(window.atob(fragmentString))) : null;
+  const htmlContent = data.getData('text/html') || '';
+  const hasRtfContent = data.types.includes('text/rtf');
+
+  /**
+   *  compat old version slate: if clipboard content is old version slate fragment
+   *  return  html content
+   */
+  const files = data.files;
+  let type = 'text';
+  // Paste rtf format content which copied from PPT or Word or Excel as text to document
+  if (hasRtfContent) {
+    type = 'text';
+  } else if (files.length > 0) {
+    type = 'file';
+  } else if (fragmentContent && Array.isArray(fragmentContent)) {
+    type = 'fragment';
+  } else if (htmlContent) {
+    type = 'html';
+  }
+
+  return { text: textContent, html: htmlContent, fragment: fragmentContent, type, files: files };
+};
+
+export default getEventTransfer;

package/{dist → src}/containers/custom/set-event-transfer.js

@@ -1,22 +1,23 @@
 import { Node } from 'slate';
-var TRANSFER_TYPES = {
+
+const TRANSFER_TYPES = {
   fragment: 'application/x-slate-fragment',
   html: 'text/html',
-  text: 'text/plain'
+  text: 'text/plain',
 };
 
-// tranfrom slate fragment and write to clipboard
+// transform slate fragment and write to clipboard
 function setEventTransfer(event, type, content) {
-  var mime = TRANSFER_TYPES[type];
-  var transfer = event.dataTransfer || event.clipboardData;
+  const mime = TRANSFER_TYPES[type];
+  const transfer = event.dataTransfer || event.clipboardData;
   if (type === 'fragment') {
     // use the same encoding as slate
-    var encodedContent = window.btoa(encodeURIComponent(JSON.stringify(content)));
+    const encodedContent = window.btoa(encodeURIComponent(JSON.stringify(content)));
     transfer.setData(mime, encodedContent);
-    var texts = '';
-    var textItem = '';
-    content.forEach(function (element) {
-      textItem = Node.text(element).replace(/\ufeff/, '');
+    let texts = '';
+    let textItem = '';
+    content.forEach(element => {
+      textItem = Node.string(element).replace(/\ufeff/, '');
       texts += textItem + '\r\n';
     });
     transfer.setData('text', texts);
@@ -27,4 +28,5 @@ function setEventTransfer(event, type, content) {
     transfer.setData('text', content);
   }
 }
-export default setEventTransfer;
+
+export default setEventTransfer;

package/src/containers/hotkeys-helper/classify-hotkeys.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { isMac } from '../../utils/common';
+
+export default function ClassifyHotkeys({ title, shortcutData, shortcutDataNames }) {
+  return (
+    <div className='sf-editor-classify-hotkeys'>
+      <h5 className='hotkey-type'>{title}</h5>
+      <ul className='hotkey-list'>
+        {Object.keys(shortcutData).map(key => {
+          const shortcutName = shortcutDataNames[key];
+          let hotkeys = shortcutData[key];
+          if (hotkeys.length !== 0) {
+            hotkeys = hotkeys.length > 1 && isMac() ? hotkeys[1] : hotkeys[0];
+          }
+          return (
+            <li className='hotkey-shortcuts' key={shortcutName}>
+              <div className='hotkey-shortcuts-left'>
+                {shortcutName}
+              </div>
+              <div className='hotkey-shortcuts-right'>
+                {hotkeys[0] && <div className='key hotkey-first'>{hotkeys[0]}</div>}
+                {hotkeys[1] && <div className='key hotkey-second'>{hotkeys[1]}</div>}
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

package/src/containers/hotkeys-helper/index.js

@@ -0,0 +1,43 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import ClassifyHotkeys from './classify-hotkeys';
+import { HELPER_HOTKEYS } from '../../constants/hot-keys';
+import { EXTERNAL_EVENTS } from '../../constants/event-types';
+import EventBus from '../../utils/event-bus';
+
+import './style.css';
+
+export default function HotkeysHelper() {
+  const { t } = useTranslation();
+  const useHelp = t('userHelp', { returnObjects: true });
+  const { title, userHelpData } = useHelp;
+
+  const onCloseClick = useCallback(() => {
+    const eventBus = EventBus.getInstance();
+    eventBus.dispatch(EXTERNAL_EVENTS.ON_HELP_INFO_TOGGLE, false);
+  }, []);
+
+  return (
+    <div className='sf-editor-helper'>
+      <div className='sf-editor-helper__header'>
+        <div className='title'>{title}</div>
+        <div className="help-close" onClick={onCloseClick}><i className="iconfont icon-times-circle"></i></div>
+      </div>
+      <div className='sf-editor-helper__content'>
+        {userHelpData.map((item, index) => {
+          const shortcutData = HELPER_HOTKEYS[index];
+          const { shortcutType: title, shortcutData: shortcutDataNames } = item;
+
+          return (
+            <ClassifyHotkeys
+              key={`use-hotkey-${index}`}
+              title={title}
+              shortcutData={shortcutData}
+              shortcutDataNames={shortcutDataNames}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/{dist/assets/css/user-help.css → src/containers/hotkeys-helper/style.css}

@@ -1,17 +1,17 @@
 
-.seafile-editor-help {
-  width: 250px;
+.sf-editor-helper {
   height: 100%;
-  flex: 0 0 350px;
+  flex: 1 0 350px;
   background-color: #fff;
   overflow-y: auto;
   overflow-x: hidden;
   border-left: 1px solid #eee;
 }
 
-.seafile-editor-help .help-header{
+.sf-editor-helper__header {
   height: 50px;
   background-color: rgb(250,250,249);
+  display: flex;
   justify-content: space-between;
   padding: 0 10px;
   box-sizing: border-box;
@@ -20,21 +20,16 @@
   font-size: 1rem;
 }
 
-.seafile-editor-help .help-title {
+.sf-editor-helper__header .title {
   font-weight: bolder;
   margin-bottom: 0;
 }
 
-.seafile-editor-help .help-close {
-  font-weight: normal;
-  color: #b9b9b9;
-}
-
-.seafile-editor-help .help-close:hover {
-  color: #888;
+.sf-editor-helper__header .help-close {
+  cursor: pointer;
 }
 
-.seafile-editor-help .help-content {
+.sf-editor-helper__content {
   height: calc(100% - 50px);
   overflow-y: auto;
   padding: 0 15px;
@@ -42,28 +37,45 @@
   font-size: 0.8rem;
 }
 
-.seafile-editor-help .help-shortcut {
+.sf-editor-helper .sf-editor-classify-hotkeys {
   display: flex;
-  border-bottom: 1px solid #eee;
+  flex-direction: column;
   justify-content: space-between;
   color: #2c2d30;
+  /* border-bottom: 1px solid #eee; */
+  /* padding: 10px 0; */
+}
+
+.sf-editor-helper .sf-editor-classify-hotkeys .hotkey-type {
+  border-bottom: 1px solid #eee;
+  line-height: 2;
+  font-weight: bolder;
+  margin: 10px 0 0 0;
+}
+
+.sf-editor-helper .sf-editor-classify-hotkeys .hotkey-list {
+  list-style: none;
+  padding: 0;
+}
+
+.sf-editor-helper .sf-editor-classify-hotkeys .hotkey-shortcuts {
+  display: flex;
+  justify-content: space-between;
   padding: 10px 0;
+  border-bottom: 1px solid #eee;
+  color: #2c2d30;
 }
 
-.seafile-editor-help .help-shortcut-left {
+.sf-editor-helper .sf-editor-classify-hotkeys .hotkey-shortcuts-left {
   word-break: break-all;
   line-height: 30px;
 }
 
-.seafile-editor-help .help-content .help-shortcut-type {
-  border-bottom: 1px solid #eee;
-  /*height: 50px;*/
-  line-height: 2;
-  font-weight: bolder;
-  margin: 10px 0 0 0;
+.sf-editor-helper .sf-editor-classify-hotkeys .hotkey-shortcuts-right {
+  min-width: max-content;
 }
 
-.seafile-editor-help .help-shortcut .key {
+.sf-editor-helper .sf-editor-classify-hotkeys .hotkey-shortcuts-right .key {
   display: inline-block;
   border-radius: 3px;
   background-color: #e8e8e8;
@@ -75,10 +87,6 @@
   line-height: 20px;
 }
 
-.seafile-editor-help .help-shortcut-right {
-  min-width: max-content;
-}
-
-.seafile-editor-help .help-shortcut-right-container:not(:first-child) {
+/* .sf-editor-helper .sf-editor-classify-hotkeys .hotkey-shortcuts-right:not(:first-child) {
   margin-top: 10px;
-}
+} */

package/src/containers/loading/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import './style.css';
+
+class Loading extends React.Component {
+  render() {
+    return (
+      <div className="empty-loading-page">
+        <div className="lds-ripple page-centered"><div></div><div></div></div>
+      </div>
+    );
+  }
+}
+
+export default Loading;

package/src/containers/loading/style.css

@@ -0,0 +1,49 @@
+.empty-loading-page {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+}
+
+.page-centered {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  /* bring your own prefixes */
+  transform: translate(-50%, -50%);
+}
+
+.lds-ripple {
+  display: inline-block;
+  position: relative;
+  width: 64px;
+  height: 64px;
+}
+
+.lds-ripple div {
+  position: absolute;
+  border: 4px solid #eb8205;
+  opacity: 1;
+  border-radius: 50%;
+  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+
+.lds-ripple div:nth-child(2) {
+  animation-delay: -0.5s;
+}
+
+@keyframes lds-ripple {
+  0% {
+    top: 28px;
+    left: 28px;
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    top: -1px;
+    left: -1px;
+    width: 58px;
+    height: 58px;
+    opacity: 0;
+  }
+}

package/src/containers/outline/index.js

@@ -0,0 +1,75 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+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 = ({ editor }) => {
+  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?.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 (
+    <div className="sf-editor-outline">
+      {headerList.length === 0 && (
+        <div className="empty-container">{t('No_out_line')}</div>
+      )}
+      {headerList.length > 0 && headerList.map((node, index) => {
+        return <OutlineItem key={index} node={node} activeId={activeId} />;
+      })}
+    </div>
+  );
+};
+
+Outline.propTypes = {
+  editor: PropTypes.object,
+};
+
+export default Outline;