@seafile/sdoc-editor 0.1.120 → 0.1.121

package/dist/basic-sdk/extension/commons/tooltip/index.css

@@ -4,7 +4,18 @@
   background-color: #303133;
 }
 
-.bs-tooltip-bottom.sdoc-tooltip .arrow::before,
 .sdoc-tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
   border-bottom-color: #303133;
 }
+
+.sdoc-tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before {
+  border-top-color: #303133;
+}
+
+.sdoc-tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before {
+  border-right-color: #303133;
+}
+
+.sdoc-tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before {
+  border-left-color: #303133;
+}

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

@@ -130,10 +130,11 @@ export var loadFont = function loadFont() {
   fontLink.className = GOOGLE_FONT_CLASS;
   document.body.appendChild(fontLink);
 };
-export var generatorFontFamily = function generatorFontFamily(fontName, fontWeight) {
+export var generatorFontFamily = function generatorFontFamily(fontName, fontWeight, leaf) {
+  var isCodeBlock = leaf && Object.keys(leaf).includes('token');
   var lang = context.getSetting('lang') || 'zh-cn';
   if (fontName === DEFAULT_FONT) {
-    return "'Arial', ".concat(lang === 'zh-cn' ? "\u5B8B\u4F53" : 'Arial', ", 'sans-serif'");
+    return "".concat(isCodeBlock ? 'monospace' : 'Arial', ", ").concat(lang === 'zh-cn' ? "\u5B8B\u4F53" : 'Arial', ", 'sans-serif'");
   }
   var fontObject = FONT.find(function (item) {
     return item.name === fontName;
@@ -142,5 +143,5 @@ export var generatorFontFamily = function generatorFontFamily(fontName, fontWeig
     fontFamilyName = fontObject.fontFamilyName;
   loadFont(fontObject, fontWeight);
   var validFontName = fontFamilyName && isMac() ? fontFamilyName['mac'] : fontName;
-  return "".concat(validFontName, ", ").concat(lang === 'zh-cn' ? "\u5B8B\u4F53" : 'Arial', ", ").concat(usuallyFontFamilyName || 'sans-serif');
+  return "".concat(isCodeBlock ? 'monospace' : validFontName, ", ").concat(lang === 'zh-cn' ? "\u5B8B\u4F53" : 'Arial', ", ").concat(usuallyFontFamilyName || 'sans-serif');
 };

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

@@ -1,12 +1,14 @@
+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 React, { Fragment } from 'react';
 import { withTranslation } from 'react-i18next';
 import classnames from 'classnames';
 import { getHeaderType, isMenuDisabled, setHeaderType } from '../helpers';
-import { HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, HEADER_TITLE_MAP, PARAGRAPH } from '../../../constants';
+import { HEADERS, HEADER_TITLE_MAP, PARAGRAPH } from '../../../constants';
+import Tooltip from '../../../commons/tooltip';
 import './style.css';
 var HeaderMenu = /*#__PURE__*/function (_React$Component) {
   _inherits(HeaderMenu, _React$Component);
@@ -78,6 +80,11 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
     _this.setMenuRef = function (ref) {
       _this.menu = ref;
     };
+    _this.getToolTip = function (index) {
+      //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);
+    };
     _this.state = {
       isShowHeaderPopover: false
     };
@@ -86,11 +93,13 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
   _createClass(HeaderMenu, [{
     key: "render",
     value: function render() {
+      var _this2 = this;
       var t = this.props.t;
       var isShowHeaderPopover = this.state.isShowHeaderPopover;
       var headerIconClass = "sdocfont sdoc-".concat(isShowHeaderPopover ? 'caret-up' : 'drop-down');
-      var headerType = this.getValue();
+      var currentType = this.getValue();
       var disabled = this.isDisabled();
+      var itemList = [PARAGRAPH, 'divider'].concat(_toConsumableArray(HEADERS));
       return /*#__PURE__*/React.createElement("div", {
         className: "header-menu"
       }, /*#__PURE__*/React.createElement("div", {
@@ -100,35 +109,38 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
         onClick: disabled ? function () {} : this.onToggleClick
       }, /*#__PURE__*/React.createElement("span", {
         className: "active"
-      }, t(HEADER_TITLE_MAP[headerType])), !disabled && /*#__PURE__*/React.createElement("span", {
+      }, t(HEADER_TITLE_MAP[currentType])), !disabled && /*#__PURE__*/React.createElement("span", {
         className: headerIconClass
       })), isShowHeaderPopover && /*#__PURE__*/React.createElement("div", {
         ref: this.setMenuRef,
         className: "header-popover sdoc-dropdown-menu"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-dropdown-menu-item",
-        onClick: this.onMouseDown(PARAGRAPH)
-      }, t(HEADER_TITLE_MAP.paragraph)), /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-dropdown-menu-divider"
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-dropdown-menu-item",
-        onClick: this.onMouseDown(HEADER1)
-      }, t(HEADER_TITLE_MAP.header1)), /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-dropdown-menu-item",
-        onClick: this.onMouseDown(HEADER2)
-      }, t(HEADER_TITLE_MAP.header2)), /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-dropdown-menu-item",
-        onClick: this.onMouseDown(HEADER3)
-      }, t(HEADER_TITLE_MAP.header3)), /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-dropdown-menu-item",
-        onClick: this.onMouseDown(HEADER4)
-      }, t(HEADER_TITLE_MAP.header4)), /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-dropdown-menu-item",
-        onClick: this.onMouseDown(HEADER5)
-      }, t(HEADER_TITLE_MAP.header5)), /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-dropdown-menu-item",
-        onClick: this.onMouseDown(HEADER6)
-      }, t(HEADER_TITLE_MAP.header6))));
+      }, itemList.map(function (item, index) {
+        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);
+        return /*#__PURE__*/React.createElement(Fragment, {
+          key: index
+        }, /*#__PURE__*/React.createElement("div", {
+          id: id,
+          className: classnames('sdoc-dropdown-menu-item', {
+            'position-relative': isSelected
+          }),
+          onClick: _this2.onMouseDown(item)
+        }, isSelected && /*#__PURE__*/React.createElement("i", {
+          className: "sdocfont sdoc-check-mark"
+        }), /*#__PURE__*/React.createElement("span", {
+          className: item
+        }, t(HEADER_TITLE_MAP[item]))), /*#__PURE__*/React.createElement(Tooltip, {
+          target: id,
+          placement: "right"
+        }, _this2.getToolTip(titleIndex)));
+      })));
     }
   }]);
   return HeaderMenu;

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

@@ -62,3 +62,35 @@
 .header-menu .header-popover .sdoc-dropdown-menu-item {
   font-size: 14px;
 }
+
+.header-menu .header-popover .sdoc-dropdown-menu-item .sdoc-check-mark {
+  position: absolute;
+  left: 8px;
+  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

@@ -2,6 +2,7 @@ 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 { generateEmptyElement, getSelectedNodeByTypes } from '../../core';
+import { isMenuDisabled, setHeaderType } from './helpers';
 var isSelectionAtLineEnd = function isSelectionAtLineEnd(editor, path) {
   var selection = editor.selection;
   if (!selection) return false;
@@ -68,6 +69,14 @@ var withHeader = function withHeader(editor) {
     }
     return insertFragment(data);
   };
+
+  // for hotkey
+  newEditor.setParagraphHeadingType = function (type) {
+    if (isMenuDisabled(newEditor)) {
+      return false;
+    }
+    setHeaderType(newEditor, type);
+  };
   return newEditor;
 };
 export default withHeader;

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

@@ -51,7 +51,7 @@ var renderText = function renderText(props, editor) {
   }
   var font = leaf['font'] || DEFAULT_FONT;
   var fontWeight = leaf.BOLD ? 600 : 400;
-  style['fontFamily'] = generatorFontFamily(font, fontWeight);
+  style['fontFamily'] = generatorFontFamily(font, fontWeight, leaf);
   if (leaf.BOLD) {
     markedChildren = /*#__PURE__*/React.createElement("strong", null, markedChildren);
   }

package/dist/basic-sdk/utils/event-handler.js

@@ -1,9 +1,10 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import isHotkey from 'is-hotkey';
 import EventBus from '../utils/event-bus';
 import { getSelectedNodeByType } from '../extension/core/queries/';
-import { ELEMENT_TYPE } from '../extension/constants';
+import { ELEMENT_TYPE, PARAGRAPH, HEADERS } from '../extension/constants';
 import { INTERNAL_EVENT } from '../constants';
 var EventProxy = /*#__PURE__*/_createClass(function EventProxy(_editor) {
   var _this = this;
@@ -11,6 +12,15 @@ var EventProxy = /*#__PURE__*/_createClass(function EventProxy(_editor) {
   this.onKeyDown = function (event) {
     var editor = _this.editor;
 
+    // paragrah, headings
+    var paragraphHeadingList = [PARAGRAPH].concat(_toConsumableArray(HEADERS));
+    paragraphHeadingList.forEach(function (item, index) {
+      if (isHotkey("cmd+opt+".concat(index), event) || isHotkey("ctrl+alt+".concat(index), event)) {
+        event.preventDefault();
+        editor.setParagraphHeadingType(item);
+      }
+    });
+
     // bold
     if (isHotkey('mod+b', event)) {
       event.preventDefault();

package/package.json

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