@seafile/sdoc-editor 0.1.41 → 0.1.43

package/dist/basic-sdk/editor.js

@@ -1,14 +1,17 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 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 { Editable, Slate } from '@seafile/slate-react';
+import { Editable, Slate, ReactEditor } from '@seafile/slate-react';
+import { Editor } from '@seafile/slate';
 import editor, { renderLeaf as _renderLeaf, renderElement as _renderElement, Toolbar } from './extension';
 import { SocketManager, withSocketIO } from './socket';
 import withNodeId from './node-id';
 import SDocOutline from './outline';
 import EventProxy from './utils/event-handler';
+import { focusEditor } from './extension/core';
 import './assets/css/layout.css';
 import './assets/css/sdoc-editor-plugins.css';
 var SDocEditor = /*#__PURE__*/function (_React$Component) {
@@ -28,6 +31,22 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
       });
       onValueChanged && onValueChanged(slateValue);
     };
+    _this.onDOMBeforeInput = function (e) {
+      var slateValue = _this.state.slateValue;
+      if (e.data && e.data !== '') {
+        var _node$;
+        var node = Editor.parent(_this.editor, editor.selection);
+        _this.editor.onDOMBeforeInputId = (_node$ = node[0]) === null || _node$ === void 0 ? void 0 : _node$.id;
+        _this.setState({
+          slateValue: _toConsumableArray(slateValue)
+        });
+      } else {
+        _this.editor.onDOMBeforeInputId = null;
+        _this.setState({
+          slateValue: _toConsumableArray(slateValue)
+        });
+      }
+    };
     var children = props.document.children;
     _this.state = {
       slateValue: children,
@@ -51,6 +70,8 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
       if (isOpenSocket) {
         this.socketManager = SocketManager.getInstance(this.editor, document, config);
       }
+      var firstNodepath = ReactEditor.findPath(editor, this.editor.children[0]);
+      focusEditor(this.editor, firstNodepath);
     }
   }, {
     key: "componentWillUnmount",
@@ -83,14 +104,14 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement("div", {
         className: "article"
       }, /*#__PURE__*/React.createElement(Editable, {
-        placeholder: "Enter some text...",
         renderElement: function renderElement(props) {
           return _renderElement(props, _this2.editor);
         },
         renderLeaf: function renderLeaf(props) {
           return _renderLeaf(props, _this2.editor);
         },
-        onKeyDown: this.eventProxy.onKeyDown
+        onKeyDown: this.eventProxy.onKeyDown,
+        onDOMBeforeInput: this.onDOMBeforeInput
       }))))));
     }
   }]);

package/dist/basic-sdk/extension/core/utils/index.js

@@ -1,5 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from 'react';
 import slugid from 'slugid';
+import { useTranslation } from 'react-i18next';
 export var match = function match(node, path, predicate) {
   if (!predicate) return true;
   if (typeof predicate === 'object') {
@@ -24,4 +26,22 @@ export var generateEmptyElement = function generateEmptyElement(type) {
       text: ''
     }]
   };
-};
+};
+export function Placeholder(props) {
+  var title = props.title;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: 'absolute',
+      top: '0px',
+      color: 'rgba(191,191,191,1)',
+      pointerEvents: 'none',
+      width: '100%',
+      maxWidth: '100%',
+      display: 'block',
+      userSelect: 'none',
+      textDecoration: 'none'
+    }
+  }, t(title));
+}

package/dist/basic-sdk/extension/plugins/blockquote/helpers.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Editor, Transforms } from '@seafile/slate';
 import { BLOCKQUOTE } from '../../constants';
-import { getNodeType } from '../../core';
+import { focusEditor, getNodeType } from '../../core';
 export var isMenuDisabled = function isMenuDisabled(editor) {
   if (editor.selection == null) return true;
   var _Editor$nodes = Editor.nodes(editor, {
@@ -46,4 +46,5 @@ export var setBlockQuoteType = function setBlockQuoteType(editor, type) {
   }, {
     mode: 'highest'
   });
+  focusEditor(editor);
 };

package/dist/basic-sdk/extension/plugins/header/plugin.js

@@ -29,6 +29,18 @@ var withHeader = function withHeader(editor) {
       insertBreak();
       return;
     }
+    var nextNode = Editor.next(editor, {
+      at: match[1]
+    });
+    if (nextNode) {
+      var _nextNode = _slicedToArray(nextNode, 2),
+        node = _nextNode[0],
+        path = _nextNode[1];
+      if (node && node.children[0].text === '') {
+        Transforms.select(editor, path);
+        return;
+      }
+    }
     var isAtLineEnd = isSelectionAtLineEnd(editor, match[1]);
 
     // 如果在行末插入一个空 p，否则正常换行

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import { Node } from '@seafile/slate';
+import { Placeholder } from '../../core';
 var renderHeader = function renderHeader(props, editor) {
   var element = props.element,
     attributes = props.attributes,
@@ -6,9 +8,20 @@ var renderHeader = function renderHeader(props, editor) {
   var type = element.type;
   var level = type.split('header')[1];
   var Tag = "h".concat(level);
+  var isShowPlaceHolder = false;
+  var firstChild = editor.children[0];
+  if (firstChild.id === element.id && Node.string(element) === '' && (editor === null || editor === void 0 ? void 0 : editor.onDOMBeforeInputId) !== (element === null || element === void 0 ? void 0 : element.id)) {
+    isShowPlaceHolder = true;
+  }
   return /*#__PURE__*/React.createElement(Tag, Object.assign({
     id: element.id,
     "data-id": element.id
-  }, attributes), children);
+  }, attributes, {
+    style: {
+      position: isShowPlaceHolder ? 'relative' : ''
+    }
+  }), isShowPlaceHolder && /*#__PURE__*/React.createElement(Placeholder, {
+    title: 'Please_enter_the_title'
+  }), children);
 };
 export default renderHeader;

package/dist/basic-sdk/extension/plugins/table/dialog/custom-table-size-dialog/index.js

@@ -79,10 +79,10 @@ var CustomTableSizeDialog = /*#__PURE__*/function (_Component) {
       })))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
         color: "secondary",
         onClick: this.toggle
-      }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
+      }, t('cancel')), /*#__PURE__*/React.createElement(Button, {
         color: "primary",
         onClick: this.handleSubmit
-      }, t('Submit'))));
+      }, t('submit'))));
     }
   }]);
   return CustomTableSizeDialog;

package/dist/basic-sdk/extension/render/render-element.js

@@ -1,16 +1,44 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React from 'react';
+import { Node, Editor } from '@seafile/slate';
 import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, LIST_LIC, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, IMAGE, ELEMENT_TYPE } from '../constants';
 import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin } from '../plugins';
+import { Placeholder, findNode } from '../core';
 var renderElement = function renderElement(props, editor) {
   var attributes = props.attributes,
     children = props.children,
     element = props.element;
   switch (element.type) {
     case PARAGRAPH:
-      return /*#__PURE__*/React.createElement("p", Object.assign({
-        "data-id": element.id
-      }, attributes), children);
+      {
+        var isShowPlaceHolder = false;
+        if (editor.children.length < 3) {
+          var firstParagraphNode = findNode(editor, {
+            at: [],
+            match: function match(node) {
+              return node.type === 'paragraph';
+            }
+          });
+          if (firstParagraphNode) {
+            var _firstParagraphNode = _slicedToArray(firstParagraphNode, 2),
+              node = _firstParagraphNode[0],
+              path = _firstParagraphNode[1];
+            var nextNode = Editor.next(editor, {
+              at: path
+            });
+            isShowPlaceHolder = (node === null || node === void 0 ? void 0 : node.id) === (element === null || element === void 0 ? void 0 : element.id) && Node.string(element) === '' && !nextNode && (editor === null || editor === void 0 ? void 0 : editor.onDOMBeforeInputId) !== (element === null || element === void 0 ? void 0 : element.id);
+          }
+        }
+        return /*#__PURE__*/React.createElement("p", Object.assign({
+          "data-id": element.id
+        }, attributes, {
+          style: {
+            position: isShowPlaceHolder ? 'relative' : ''
+          }
+        }), children, isShowPlaceHolder && /*#__PURE__*/React.createElement(Placeholder, {
+          title: 'Please_enter_the_text'
+        }));
+      }
     case HEADER1:
     case HEADER2:
     case HEADER3:

package/package.json

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

package/public/locales/en/sdoc-editor.json

@@ -242,5 +242,7 @@
   "Open_link": "Open link",
   "Customize_the_number_of_rows_and_columns": "Customize the number of rows and columns",
   "Rows": "Rows",
-  "Columns": "Columns"
+  "Columns": "Columns",
+  "Please_enter_the_title": "Please enter the title",
+  "Please_enter_the_text": "Please enter the text"
 }

package/public/locales/zh-CN/sdoc-editor.json

@@ -236,5 +236,7 @@
   "Open_link": "打开链接",
   "Customize_the_number_of_rows_and_columns": "自定义行列数",
   "Rows": "行数",
-  "Columns": "列数"
+  "Columns": "列数",
+  "Please_enter_the_title": "请输入标题",
+  "Please_enter_the_text": "请输入正文"
 }