@seafile/sdoc-editor 0.1.134 → 0.1.135

package/dist/basic-sdk/assets/css/default.css

@@ -1,8 +1,10 @@
 /* modify default css */
-.sdoc-editor-container .article {
-  font-size: 16px;
+.sdoc-editor-container .article,
+.sdoc-editor-container .sdoc-code-block-pre {
+  font-size: 11pt;
 }
 
-.sdoc-editor-container .sdoc-code-block-pre {
-  font-size: 14px;
+.sdoc-editor-container .article p {
+  padding: 0;
+  margin: 0;
 }

package/dist/basic-sdk/assets/css/sdoc-editor-plugins.css

@@ -1,6 +1,24 @@
 /* header */ 
-.sdoc-editor-container .article h2 {
-  border-bottom: none;
+.sdoc-editor-container .article .sdoc-header-title,
+.sdoc-editor-container .article .sdoc-header-subtitle,
+.sdoc-editor-container .article .sdoc-header-1,
+.sdoc-editor-container .article .sdoc-header-2,
+.sdoc-editor-container .article .sdoc-header-3,
+.sdoc-editor-container .article .sdoc-header-4,
+.sdoc-editor-container .article .sdoc-header-5,
+.sdoc-editor-container .article .sdoc-header-6 {
+  line-height: 1.1;
+  margin: 1.2em 0 0.4em;
+  font-weight: bold;
+}
+
+.sdoc-editor-container .article .sdoc-header-2,
+.sdoc-editor-container .article .sdoc-header-3 {
+  line-height: 1.5;
+}
+
+.sdoc-editor-container .article .sdoc-header-4 {
+  line-height: 1.125;
 }
 
 /* list  */

package/dist/basic-sdk/extension/constants/element-type.js

@@ -7,6 +7,8 @@ export var SUPERSCRIPT = 'superscript';
 export var SUBSCRIPT = 'subscript';
 export var COLOR = 'color';
 export var HIGHLIGHT_COLOR = 'highlight-color';
+export var TITLE = 'title';
+export var SUBTITLE = 'subtitle';
 export var HEADER = 'header';
 export var HEADER1 = 'header1';
 export var HEADER2 = 'header2';

package/dist/basic-sdk/extension/constants/font.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _HEADER_FONT_SIZE;
+var _SDOC_FONT_SIZE;
 import * as ELEMENT_TYPE from './element-type';
 
 // font family
@@ -30,82 +30,7 @@ var FONT_WEIGHT_400_AND_ODD = [100, 300, 400, 500, 700, 900];
 var FONT_WEIGHT_400_700 = [400, 700];
 var FONT_WEIGHT_100_400_700 = [100, 400, 700];
 var FONT_WEIGHT_100_400_700_800 = [100, 400, 700, 800];
-export var SPECIAL_FONT_SIZE_NAME = ['初号', '小初', '一号', '小一', '二号', '小二', '三号', '小三', '四号', '小四', '五号', '小五'];
-export var DEFAULT_COMMON_FONT_SIZE = 16;
-export var DEFAULT_CODE_FONT_SIZE = 14;
 export var FONT_SIZE = [{
-  name: '初号',
-  value: 42,
-  langOrder: {
-    'zh-cn': 0
-  }
-}, {
-  name: '小初',
-  value: 36,
-  langOrder: {
-    'zh-cn': 0
-  }
-}, {
-  name: '一号',
-  value: 26,
-  langOrder: {
-    'zh-cn': 0
-  }
-}, {
-  name: '小一',
-  value: 24,
-  langOrder: {
-    'zh-cn': 0
-  }
-}, {
-  name: '二号',
-  value: 22,
-  langOrder: {
-    'zh-cn': 0
-  }
-}, {
-  name: '小二',
-  value: 18,
-  langOrder: {
-    'zh-cn': 0
-  }
-}, {
-  name: '三号',
-  value: 16,
-  langOrder: {
-    'zh-cn': 0
-  }
-}, {
-  name: '小三',
-  value: 15,
-  langOrder: {
-    'zh-cn': 0
-  }
-}, {
-  name: '四号',
-  value: 14,
-  langOrder: {
-    'zh-cn': 0
-  }
-}, {
-  name: '小四',
-  value: 12,
-  langOrder: {
-    'zh-cn': 0
-  }
-}, {
-  name: '五号',
-  value: 10.5,
-  langOrder: {
-    'zh-cn': 0
-  }
-}, {
-  name: '小五',
-  value: 9,
-  langOrder: {
-    'zh-cn': 0
-  }
-}, {
   name: '9',
   value: 9
 }, {
@@ -595,4 +520,6 @@ export var FONT = [
 } // 楷体
 ];
 
-export var HEADER_FONT_SIZE = (_HEADER_FONT_SIZE = {}, _defineProperty(_HEADER_FONT_SIZE, ELEMENT_TYPE.HEADER1, 32), _defineProperty(_HEADER_FONT_SIZE, ELEMENT_TYPE.HEADER2, 28), _defineProperty(_HEADER_FONT_SIZE, ELEMENT_TYPE.HEADER3, 24), _defineProperty(_HEADER_FONT_SIZE, ELEMENT_TYPE.HEADER4, 18), _defineProperty(_HEADER_FONT_SIZE, ELEMENT_TYPE.HEADER5, 16), _defineProperty(_HEADER_FONT_SIZE, ELEMENT_TYPE.HEADER6, 14), _HEADER_FONT_SIZE);
+export var SDOC_FONT_SIZE = (_SDOC_FONT_SIZE = {
+  DEFAULT: 11
+}, _defineProperty(_SDOC_FONT_SIZE, ELEMENT_TYPE.TITLE, 26), _defineProperty(_SDOC_FONT_SIZE, ELEMENT_TYPE.SUBTITLE, 15), _defineProperty(_SDOC_FONT_SIZE, ELEMENT_TYPE.HEADER1, 20), _defineProperty(_SDOC_FONT_SIZE, ELEMENT_TYPE.HEADER2, 16), _defineProperty(_SDOC_FONT_SIZE, ELEMENT_TYPE.HEADER3, 14), _defineProperty(_SDOC_FONT_SIZE, ELEMENT_TYPE.HEADER4, 12), _defineProperty(_SDOC_FONT_SIZE, ELEMENT_TYPE.HEADER5, 11), _defineProperty(_SDOC_FONT_SIZE, ELEMENT_TYPE.HEADER6, 11), _defineProperty(_SDOC_FONT_SIZE, ELEMENT_TYPE.CODE_LINE, 11), _SDOC_FONT_SIZE);

package/dist/basic-sdk/extension/constants/index.js

@@ -2,10 +2,10 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _MENUS_CONFIG_MAP, _HEADER_TITLE_MAP;
 // extension plugin
 import * as ELEMENT_TYPE from './element-type';
-import { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, SUPERSCRIPT, SUBSCRIPT, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, TEXT_STYLE_MORE, BOLD_ITALIC, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER, CLEAR_FORMAT, COLOR, HIGHLIGHT_COLOR, SDOC_LINK } from './element-type';
-import KEYBOARD from './keyboard';
+import { BLOCKQUOTE, HEADER, TITLE, SUBTITLE, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, SUPERSCRIPT, SUBSCRIPT, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, TEXT_STYLE_MORE, BOLD_ITALIC, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER, CLEAR_FORMAT, COLOR, HIGHLIGHT_COLOR, SDOC_LINK } from './element-type';
+import { KEYBOARD, MAC_HOTKEYS, WIN_HOTKEYS } from './keyboard';
 import { DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_LIST, DEFAULT_FONT_COLOR, RECENT_USED_HIGHLIGHT_COLORS_KEY, RECENT_USED_FONT_COLORS_KEY, RECENT_USED_TABLE_CELL_BG_COLORS_KEY, DEFAULT_LAST_USED_FONT_COLOR, DEFAULT_LAST_USED_HIGHLIGHT_COLOR, DEFAULT_LAST_USED_TABLE_CELL_BG_COLOR } from './color';
-import { SPECIAL_FONT_SIZE_NAME, DEFAULT_COMMON_FONT_SIZE, FONT_SIZE, DEFAULT_FONT, FONT, GOOGLE_FONT_CLASS, RECENT_USED_FONTS_KEY, HEADER_FONT_SIZE, DEFAULT_CODE_FONT_SIZE } from './font';
+import { FONT_SIZE, DEFAULT_FONT, FONT, GOOGLE_FONT_CLASS, RECENT_USED_FONTS_KEY, SDOC_FONT_SIZE } from './font';
 
 // history
 export var UNDO = 'undo';
@@ -137,7 +137,7 @@ export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CO
   text: 'Insert'
 }), _MENUS_CONFIG_MAP);
 export var HEADERS = [HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6];
-export var HEADER_TITLE_MAP = (_HEADER_TITLE_MAP = {}, _defineProperty(_HEADER_TITLE_MAP, HEADER1, 'Header_one'), _defineProperty(_HEADER_TITLE_MAP, HEADER2, 'Header_two'), _defineProperty(_HEADER_TITLE_MAP, HEADER3, 'Header_three'), _defineProperty(_HEADER_TITLE_MAP, HEADER4, 'Header_four'), _defineProperty(_HEADER_TITLE_MAP, HEADER5, 'Header_five'), _defineProperty(_HEADER_TITLE_MAP, HEADER6, 'Header_six'), _defineProperty(_HEADER_TITLE_MAP, PARAGRAPH, 'Paragraph'), _HEADER_TITLE_MAP);
+export var HEADER_TITLE_MAP = (_HEADER_TITLE_MAP = {}, _defineProperty(_HEADER_TITLE_MAP, TITLE, 'Title'), _defineProperty(_HEADER_TITLE_MAP, SUBTITLE, 'Subtitle'), _defineProperty(_HEADER_TITLE_MAP, HEADER1, 'Header_one'), _defineProperty(_HEADER_TITLE_MAP, HEADER2, 'Header_two'), _defineProperty(_HEADER_TITLE_MAP, HEADER3, 'Header_three'), _defineProperty(_HEADER_TITLE_MAP, HEADER4, 'Header_four'), _defineProperty(_HEADER_TITLE_MAP, HEADER5, 'Header_five'), _defineProperty(_HEADER_TITLE_MAP, HEADER6, 'Header_six'), _defineProperty(_HEADER_TITLE_MAP, PARAGRAPH, 'Paragraph'), _HEADER_TITLE_MAP);
 export var DIFF_TYPE = {
   ADD: 'add',
   DELETE: 'delete',
@@ -156,7 +156,6 @@ export var ADDED_STYLE = {
   computed_bg_color: '#e6ffed',
   color: 'rgb(137, 181, 66)'
 };
-export var HEADER_TYPE_ARRAY = ['header1', 'header2', 'header3', 'header4', 'header5', 'header6'];
 export var LIST_TYPE_ARRAY = ['unordered_list', 'ordered_list'];
 export var TRANSPARENT = 'transparent';
 export var CLIPBOARD_FORMAT_KEY = 'x-slate-fragment';
@@ -232,4 +231,4 @@ export var SIDE_MENUS_CONFIG = [{
   type: BLOCKQUOTE,
   title: 'Quote'
 }];
-export { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, SUPERSCRIPT, SUBSCRIPT, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, TEXT_STYLE_MORE, BOLD_ITALIC, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER, ELEMENT_TYPE, KEYBOARD, DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_LIST, CLEAR_FORMAT, DEFAULT_FONT_COLOR, RECENT_USED_HIGHLIGHT_COLORS_KEY, RECENT_USED_FONT_COLORS_KEY, RECENT_USED_TABLE_CELL_BG_COLORS_KEY, DEFAULT_LAST_USED_FONT_COLOR, DEFAULT_LAST_USED_HIGHLIGHT_COLOR, DEFAULT_LAST_USED_TABLE_CELL_BG_COLOR, SPECIAL_FONT_SIZE_NAME, DEFAULT_COMMON_FONT_SIZE, DEFAULT_CODE_FONT_SIZE, FONT_SIZE, DEFAULT_FONT, FONT, GOOGLE_FONT_CLASS, RECENT_USED_FONTS_KEY, HEADER_FONT_SIZE, SDOC_LINK };
+export { BLOCKQUOTE, HEADER, TITLE, SUBTITLE, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, SUPERSCRIPT, SUBSCRIPT, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, TEXT_STYLE_MORE, BOLD_ITALIC, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER, ELEMENT_TYPE, KEYBOARD, MAC_HOTKEYS, WIN_HOTKEYS, DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_LIST, CLEAR_FORMAT, DEFAULT_FONT_COLOR, RECENT_USED_HIGHLIGHT_COLORS_KEY, RECENT_USED_FONT_COLORS_KEY, RECENT_USED_TABLE_CELL_BG_COLORS_KEY, DEFAULT_LAST_USED_FONT_COLOR, DEFAULT_LAST_USED_HIGHLIGHT_COLOR, DEFAULT_LAST_USED_TABLE_CELL_BG_COLOR, FONT_SIZE, DEFAULT_FONT, FONT, GOOGLE_FONT_CLASS, RECENT_USED_FONTS_KEY, SDOC_FONT_SIZE, SDOC_LINK };

package/dist/basic-sdk/extension/constants/keyboard.js

@@ -1,7 +1,39 @@
-var KEYBOARD = {
+export var KEYBOARD = {
   UP: 'up',
   RIGHT: 'right',
   DOWN: 'down',
   LEFT: 'left'
 };
-export default KEYBOARD;
+export var MAC_HOTKEYS = {
+  paragraph: '⌘+⌥+0',
+  title: '⌘+⌥+.',
+  subtitle: '⌘+⌥+,',
+  header1: '⌘+⌥+1',
+  header2: '⌘+⌥+2',
+  header3: '⌘+⌥+3',
+  header4: '⌘+⌥+4',
+  header5: '⌘+⌥+5',
+  header6: '⌘+⌥+6'
+};
+export var MAC_HOTKEYS_EVENT = {
+  paragraph: 'cmd+opt+0',
+  title: 'cmd+opt+.',
+  subtitle: 'cmd+opt+,',
+  header1: 'cmd+opt+1',
+  header2: 'cmd+opt+2',
+  header3: 'cmd+opt+3',
+  header4: 'cmd+opt+4',
+  header5: 'cmd+opt+5',
+  header6: 'cmd+opt+6'
+};
+export var WIN_HOTKEYS = {
+  paragraph: 'ctrl+alt+0',
+  title: 'ctrl+alt+.',
+  subtitle: 'ctrl+alt+,',
+  header1: 'ctrl+alt+1',
+  header2: 'ctrl+alt+2',
+  header3: 'ctrl+alt+3',
+  header4: 'ctrl+alt+4',
+  header5: 'ctrl+alt+5',
+  header6: 'ctrl+alt+6'
+};

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

@@ -1,6 +1,7 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Editor, Element } from '@seafile/slate';
-import { CODE_BLOCK, DEFAULT_COMMON_FONT_SIZE, IMAGE, FONT_SIZE, SPECIAL_FONT_SIZE_NAME, DEFAULT_FONT, GOOGLE_FONT_CLASS, FONT, HEADER_FONT_SIZE, HEADERS, ELEMENT_TYPE, DEFAULT_CODE_FONT_SIZE } from '../../constants';
+import { CODE_BLOCK, IMAGE, DEFAULT_FONT, GOOGLE_FONT_CLASS, FONT, SDOC_FONT_SIZE, HEADERS, TITLE, SUBTITLE, CODE_LINE } from '../../constants';
 import { focusEditor, getParentNode } from '../../core';
 import context from '../../../../context';
 import { isMac } from '../../../../utils';
@@ -28,14 +29,16 @@ export var getFontSize = function getFontSize(editor) {
   var selection = editor.selection;
   var marks = Editor.marks(editor);
   if (marks && marks['font-size']) return marks['font-size'];
-  if (!selection) return DEFAULT_COMMON_FONT_SIZE;
+  if (!selection) return SDOC_FONT_SIZE.DEFAULT;
   var _Editor$nodes3 = Editor.nodes(editor, {
       at: Editor.unhangRange(editor, selection),
       match: function match(n) {
         if (!Editor.isEditor(n) && !Element.isElement(n)) {
           if (n['font-size']) return true;
           var _parentNode = getParentNode(editor.children, n.id);
-          if (_parentNode && (HEADERS.includes(_parentNode.type) || _parentNode.type === ELEMENT_TYPE.CODE_LINE)) {
+          if (!_parentNode) return false;
+          // title | subtitle | header | code-line
+          if ([TITLE, SUBTITLE].concat(_toConsumableArray(HEADERS), [CODE_LINE]).includes(_parentNode.type)) {
             return true;
           }
           return false;
@@ -45,13 +48,14 @@ export var getFontSize = function getFontSize(editor) {
     }),
     _Editor$nodes4 = _slicedToArray(_Editor$nodes3, 1),
     match = _Editor$nodes4[0];
-  if (!match) return DEFAULT_COMMON_FONT_SIZE;
+  if (!match) return SDOC_FONT_SIZE.DEFAULT;
+  // has font-size attrubute
   var matched = match[0];
   if (matched['font-size']) return matched['font-size'];
+
+  // title | subtitle | header | code-line
   var parentNode = getParentNode(editor.children, matched.id);
-  if (HEADERS.includes(parentNode.type)) return HEADER_FONT_SIZE[parentNode.type];
-  if (parentNode.type === ELEMENT_TYPE.CODE_LINE) return DEFAULT_CODE_FONT_SIZE;
-  return DEFAULT_COMMON_FONT_SIZE;
+  return SDOC_FONT_SIZE[parentNode.type];
 };
 export var setFontSize = function setFontSize(editor, value) {
   Editor.addMark(editor, 'font-size', value);
@@ -62,12 +66,6 @@ export var scaleFontSize = function scaleFontSize(editor, type) {
   if (isDisabled) return;
   var fontSize = getFontSize(editor);
   var fontSizeValue = fontSize;
-  if (SPECIAL_FONT_SIZE_NAME.includes(fontSize)) {
-    var fontItem = FONT_SIZE.find(function (item) {
-      return item.name === fontSize;
-    });
-    fontSizeValue = fontItem ? fontItem.value : DEFAULT_COMMON_FONT_SIZE;
-  }
   if (type === 'increase') {
     fontSizeValue = fontSizeValue + 1;
   }

package/dist/basic-sdk/extension/plugins/font/menu/font-size/index.js

@@ -4,8 +4,7 @@ import { UncontrolledPopover } from 'reactstrap';
 import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
 import { isMenuDisabled, getFontSize, setFontSize } from '../../helpers';
-import { DEFAULT_COMMON_FONT_SIZE, FONT_SIZE, SPECIAL_FONT_SIZE_NAME } from '../../../../constants';
-import context from '../../../../../../context';
+import { FONT_SIZE } from '../../../../constants';
 import Tooltip from '../../../../commons/tooltip';
 import './index.css';
 var FontSize = function FontSize(_ref) {
@@ -23,15 +22,6 @@ var FontSize = function FontSize(_ref) {
   var disabled = isMenuDisabled(editor, readonly);
   var fontSizeButtonId = 'sdoc-button-font-size';
   var selectedFontSize = getFontSize(editor);
-  var lang = (context.getSetting('lang') || '').toLowerCase();
-  if (SPECIAL_FONT_SIZE_NAME.includes(selectedFontSize)) {
-    var fontItem = FONT_SIZE.find(function (item) {
-      return item.name === selectedFontSize;
-    });
-    if (lang !== 'zh-cn') {
-      selectedFontSize = fontItem ? fontItem.value : DEFAULT_COMMON_FONT_SIZE;
-    }
-  }
   var fontSizeRef = useRef(null);
   var toggle = useCallback(function (event) {
     popoverRef.current.toggle();
@@ -40,7 +30,7 @@ var FontSize = function FontSize(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isShowMenu]);
   var updateFontSize = useCallback(function (item) {
-    var fontSize = SPECIAL_FONT_SIZE_NAME.includes(item.name) ? item.name : item.value;
+    var fontSize = item.value;
     toggle();
     setFontSize(editor, fontSize);
 
@@ -55,9 +45,6 @@ var FontSize = function FontSize(_ref) {
     'btn btn-icon btn-secondary btn-active d-flex': !isRichEditor
   });
   var caretIconClass = "sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down');
-  var fontSizeList = FONT_SIZE.filter(function (item) {
-    return item.lang ? item.lang === lang : true;
-  });
   var _ref2 = fontSizeRef.current ? fontSizeRef.current.getBoundingClientRect() : {
       bottom: 92.5
     },
@@ -92,7 +79,7 @@ var FontSize = function FontSize(_ref) {
     style: {
       maxHeight: window.innerHeight - bottom - 100
     }
-  }, fontSizeList.map(function (item, index) {
+  }, FONT_SIZE.map(function (item, index) {
     var isSelected = selectedFontSize + '' === item.name;
     return /*#__PURE__*/React.createElement("div", {
       key: index,

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

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Editor, Transforms } from '@seafile/slate';
 import { getNodeType, isTextNode, getParentNode } from '../../core';
-import { ELEMENT_TYPE } from '../../constants';
+import { ELEMENT_TYPE, SUBTITLE, TITLE } from '../../constants';
 export var isMenuDisabled = function isMenuDisabled(editor) {
   var readonly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   if (readonly) return true;
@@ -17,6 +17,8 @@ export var isMenuDisabled = function isMenuDisabled(editor) {
         if (type === ELEMENT_TYPE.CODE_BLOCK) return true;
         if (type === ELEMENT_TYPE.PARAGRAPH) return true;
         if (type.startsWith('header')) return true;
+        if (type === TITLE) return true;
+        if (type === SUBTITLE) return true;
         return false;
       },
       universal: true,
@@ -29,7 +31,11 @@ export var isMenuDisabled = function isMenuDisabled(editor) {
 export var getHeaderType = function getHeaderType(editor) {
   var _Editor$nodes3 = Editor.nodes(editor, {
       match: function match(n) {
-        return getNodeType(n).includes('header');
+        var nodeType = getNodeType(n);
+        if (nodeType.includes('header')) return true;
+        if (nodeType === TITLE) return true;
+        if (nodeType === SUBTITLE) return true;
+        return false;
       },
       universal: true
     }),
@@ -42,7 +48,12 @@ export var getHeaderType = function getHeaderType(editor) {
 };
 export var setHeaderType = function setHeaderType(editor, type) {
   if (!type) return;
-  Transforms.setNodes(editor, {
-    type: type
-  });
+  var newProperties = {
+    type: type,
+    align: 'left'
+  };
+  if (type === TITLE || type === SUBTITLE) {
+    newProperties['align'] = 'center';
+  }
+  Transforms.setNodes(editor, newProperties);
 };

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

@@ -1,10 +1,10 @@
 import { HEADER } from '../../constants';
 import withHeader from './plugin';
-import renderHeader from './render-elem';
+import { renderTitle, renderHeader, renderSubtitle } from './render-elem';
 var HeaderPlugin = {
   type: HEADER,
   nodeType: 'element',
   editorPlugin: withHeader,
-  renderElements: [renderHeader]
+  renderElements: [renderTitle, renderSubtitle, renderHeader]
 };
 export default HeaderPlugin;

package/dist/basic-sdk/extension/plugins/header/menu/index.js

@@ -7,7 +7,7 @@ import React, { Fragment } from 'react';
 import { withTranslation } from 'react-i18next';
 import classnames from 'classnames';
 import { getHeaderType, isMenuDisabled, setHeaderType } from '../helpers';
-import { HEADERS, HEADER_TITLE_MAP, PARAGRAPH } from '../../../constants';
+import { HEADERS, HEADER_TITLE_MAP, MAC_HOTKEYS, PARAGRAPH, SDOC_FONT_SIZE, SUBTITLE, TITLE, WIN_HOTKEYS } from '../../../constants';
 import Tooltip from '../../../commons/tooltip';
 import './style.css';
 var HeaderMenu = /*#__PURE__*/function (_React$Component) {
@@ -69,8 +69,6 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
         var editor = _this.props.editor;
         var active = _this.isActive(type);
         var newType = active ? 'paragraph' : type;
-
-        // 执行命令
         setHeaderType(editor, newType);
         _this.setState({
           isShowHeaderPopover: false
@@ -82,10 +80,10 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
     _this.setMenuRef = function (ref) {
       _this.menu = ref;
     };
-    _this.getToolTip = function (index) {
+    _this.getToolTip = function (type) {
       //chrome in Mac: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36"
-      var isMac = window.navigator.userAgent.indexOf('Macintosh') != -1;
-      return isMac ? "\u2318 +\u2325 +".concat(index) : "ctrl+alt+".concat(index);
+      var isMac = window.navigator.userAgent.indexOf('Macintosh') !== -1;
+      return isMac ? MAC_HOTKEYS[type] : WIN_HOTKEYS[type];
     };
     _this.state = {
       isShowHeaderPopover: false
@@ -101,7 +99,7 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
       var headerIconClass = "sdocfont sdoc-".concat(isShowHeaderPopover ? 'caret-up' : 'drop-down');
       var currentType = this.getValue();
       var disabled = this.isDisabled();
-      var itemList = [PARAGRAPH, 'divider'].concat(_toConsumableArray(HEADERS));
+      var itemList = [PARAGRAPH, 'divider', TITLE, SUBTITLE, 'divider'].concat(_toConsumableArray(HEADERS));
       return /*#__PURE__*/React.createElement("div", {
         className: "header-menu"
       }, /*#__PURE__*/React.createElement("div", {
@@ -117,15 +115,14 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
         ref: this.setMenuRef,
         className: "header-popover sdoc-dropdown-menu"
       }, itemList.map(function (item, index) {
-        if (item == 'divider') {
+        if (item === 'divider') {
           return /*#__PURE__*/React.createElement("div", {
             key: index,
             className: "sdoc-dropdown-menu-divider"
           });
         }
-        var isSelected = currentType == item;
-        var titleIndex = index == 0 ? 0 : index - 1;
-        var id = "".concat(item, "-").concat(titleIndex);
+        var id = "".concat(item, "-").concat(index);
+        var isSelected = currentType === item;
         return /*#__PURE__*/React.createElement(Fragment, {
           key: index
         }, /*#__PURE__*/React.createElement("div", {
@@ -137,11 +134,13 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
         }, isSelected && /*#__PURE__*/React.createElement("i", {
           className: "sdocfont sdoc-check-mark"
         }), /*#__PURE__*/React.createElement("span", {
-          className: item
+          style: {
+            fontSize: "".concat(SDOC_FONT_SIZE[item], "pt")
+          }
         }, t(HEADER_TITLE_MAP[item]))), /*#__PURE__*/React.createElement(Tooltip, {
           target: id,
           placement: "right"
-        }, _this2.getToolTip(titleIndex)));
+        }, _this2.getToolTip(item)));
       })));
     }
   }]);

package/dist/basic-sdk/extension/plugins/header/menu/style.css

@@ -49,6 +49,7 @@
   top: 42px;
   left: 8px;
   padding: 8px 0;
+  width: 180px;
   background-color: #fff;
   border: 1px solid #e5e6e8;
   border-radius: 2px;
@@ -61,6 +62,9 @@
 
 .header-menu .header-popover .sdoc-dropdown-menu-item {
   font-size: 14px;
+  height: auto;
+  padding: 9px 16px 9px 28px;
+  line-height: 1;
 }
 
 .header-menu .header-popover .sdoc-dropdown-menu-item .sdoc-check-mark {
@@ -69,28 +73,3 @@
   transform: scale(.8);
   color: #798d99;
 }
-
-.header-menu .header-popover .header1 {
-  font-size: 18px;
-}
-
-.header-menu .header-popover .header2 {
-  font-size: 16px;
-}
-
-.header-menu .header-popover .header3 {
-  font-size: 14px;
-}
-
-.header-menu .header-popover .header4 {
-  font-size: 12px;
-}
-
-.header-menu .header-popover .header5 {
-  font-size: 11px;
-}
-
-.header-menu .header-popover .header6 {
-  font-size: 11px;
-}
-

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

@@ -1,8 +1,11 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Editor, Element, Transforms, Node } from '@seafile/slate';
-import { PARAGRAPH, HEADER_TYPE_ARRAY, LIST_TYPE_ARRAY } from '../../constants';
+import { PARAGRAPH, HEADERS, LIST_TYPE_ARRAY, TITLE, SUBTITLE } from '../../constants';
 import { generateEmptyElement, getSelectedNodeByTypes } from '../../core';
 import { isMenuDisabled, setHeaderType } from './helpers';
+import isHotkey from 'is-hotkey';
+import { MAC_HOTKEYS_EVENT, WIN_HOTKEYS } from '../../constants/keyboard';
+import { isMac } from '../../../../utils';
 var isSelectionAtLineEnd = function isSelectionAtLineEnd(editor, path) {
   var selection = editor.selection;
   if (!selection) return false;
@@ -19,7 +22,11 @@ var withHeader = function withHeader(editor) {
   newEditor.insertBreak = function () {
     var _Editor$nodes = Editor.nodes(newEditor, {
         match: function match(n) {
-          return Element.isElement(n) && n.type.startsWith('header');
+          if (!Element.isElement(n)) return false;
+          if (n.type.startsWith('header')) return true;
+          if (n.type === TITLE) return true;
+          if (n.type === SUBTITLE) return true;
+          return false;
         },
         // Matches nodes whose node.type starts with header
         universal: true
@@ -56,7 +63,7 @@ var withHeader = function withHeader(editor) {
   };
   newEditor.insertFragment = function (data) {
     var _data$, _data$$children;
-    var headerNode = getSelectedNodeByTypes(editor, HEADER_TYPE_ARRAY);
+    var headerNode = getSelectedNodeByTypes(editor, HEADERS);
     var headerText = Node.string(headerNode || {
       children: []
     });
@@ -69,13 +76,26 @@ var withHeader = function withHeader(editor) {
     }
     return insertFragment(data);
   };
-
-  // for hotkey
-  newEditor.setParagraphHeadingType = function (type) {
-    if (isMenuDisabled(newEditor)) {
-      return false;
+  newEditor.onHotKeyDown = function (event) {
+    var HOT_KEYS = isMac() ? MAC_HOTKEYS_EVENT : WIN_HOTKEYS;
+    var hotEntries = Object.entries(HOT_KEYS);
+    var isHeaderEvent = false;
+    var headerType = '';
+    for (var index = 0; index < hotEntries.length; index++) {
+      var _hotEntries$index = _slicedToArray(hotEntries[index], 2),
+        key = _hotEntries$index[0],
+        value = _hotEntries$index[1];
+      isHeaderEvent = isHotkey(value, event);
+      if (isHeaderEvent) {
+        headerType = key;
+        break;
+      }
     }
-    setHeaderType(newEditor, type);
+    if (!isHeaderEvent) return false;
+    event.preventDefault();
+    if (isMenuDisabled(newEditor)) return true;
+    setHeaderType(newEditor, headerType);
+    return true;
   };
   return newEditor;
 };