@seafile/sdoc-editor 2.0.81 → 2.0.83

package/dist/extension/plugins/font/helpers.js

@@ -0,0 +1,167 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setFontSize = exports.setFont = exports.scaleFontSize = exports.loadFont = exports.isMenuDisabled = exports.hasFontLoaded = exports.getFontSize = exports.getFont = exports.generatorFontFamily = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _slate = require("@seafile/slate");
+var _context = _interopRequireDefault(require("../../../context"));
+var _commonUtils = require("../../../utils/common-utils");
+var _constants = require("../../constants");
+var _core = require("../../core");
+var isMenuDisabled = exports.isMenuDisabled = function isMenuDisabled(editor, readonly) {
+  if (readonly) return true;
+  if (!editor.selection) return true;
+  var _Editor$nodes = _slate.Editor.nodes(editor, {
+      match: function match(node) {
+        return !_slate.Editor.isEditor(node) && _slate.Element.isElement(node) && _slate.Editor.isBlock(editor, node);
+      },
+      universal: true,
+      mode: 'highest'
+    }),
+    _Editor$nodes2 = (0, _slicedToArray2["default"])(_Editor$nodes, 1),
+    match = _Editor$nodes2[0];
+  if (!match) return false;
+  var elementType = match[0].type;
+  if (elementType === _constants.CODE_BLOCK || elementType === _constants.IMAGE) {
+    return true;
+  }
+  return false;
+};
+
+// font size
+var getFontSize = exports.getFontSize = function getFontSize(editor) {
+  var selection = editor.selection;
+  var marks = _slate.Editor.marks(editor);
+  if (marks && marks[_constants.TEXT_STYLE_MAP.FONT_SIZE]) {
+    return marks[_constants.TEXT_STYLE_MAP.FONT_SIZE];
+  }
+  if (!selection) return _constants.SDOC_FONT_SIZE.DEFAULT;
+  if ((0, _core.isRangeAcrossBlocks)(editor)) return _constants.SDOC_FONT_SIZE.DEFAULT;
+  var _Editor$nodes3 = _slate.Editor.nodes(editor, {
+      at: _slate.Editor.unhangRange(editor, selection),
+      match: function match(n) {
+        if (!_slate.Editor.isEditor(n) && !_slate.Element.isElement(n)) {
+          if (n[_constants.TEXT_STYLE_MAP.FONT_SIZE]) return true;
+          var _parentNode = (0, _core.getParentNode)(editor.children, n.id);
+          if (!_parentNode) return false;
+          if ([_constants.TITLE, _constants.SUBTITLE].concat((0, _toConsumableArray2["default"])(_constants.HEADERS), [_constants.CODE_LINE]).includes(_parentNode.type)) {
+            return true;
+          }
+          return false;
+        }
+        if (!_slate.Editor.isEditor(n) && _slate.Editor.isVoid(editor, n)) {
+          var _parentNode2 = (0, _core.getParentNode)(editor.children, n.id);
+          if (!_parentNode2) return false;
+          if ([_constants.TITLE, _constants.SUBTITLE].concat((0, _toConsumableArray2["default"])(_constants.HEADERS), [_constants.CODE_LINE]).includes(_parentNode2.type)) {
+            return true;
+          }
+        }
+        return false;
+      }
+    }),
+    _Editor$nodes4 = (0, _slicedToArray2["default"])(_Editor$nodes3, 1),
+    match = _Editor$nodes4[0];
+  if (!match) return _constants.SDOC_FONT_SIZE.DEFAULT;
+  // has font-size attribute
+  var matched = match[0];
+  if (matched[_constants.TEXT_STYLE_MAP.FONT_SIZE]) {
+    return matched[_constants.TEXT_STYLE_MAP.FONT_SIZE];
+  }
+  var parentNode = (0, _core.getParentNode)(editor.children, matched.id);
+  return _constants.SDOC_FONT_SIZE[parentNode.type];
+};
+var setFontSize = exports.setFontSize = function setFontSize(editor, value) {
+  _slate.Editor.addMark(editor, _constants.TEXT_STYLE_MAP.FONT_SIZE, value);
+  (0, _core.focusEditor)(editor);
+};
+var scaleFontSize = exports.scaleFontSize = function scaleFontSize(editor, type) {
+  var isDisabled = isMenuDisabled(editor);
+  if (isDisabled) return;
+  var fontSize = getFontSize(editor);
+  var fontSizeValue = fontSize;
+  if (type === 'increase') {
+    fontSizeValue = fontSizeValue + 1;
+  }
+  if (type === 'reduce') {
+    fontSizeValue = fontSizeValue - 1;
+    if (fontSizeValue < 1) return;
+  }
+  setFontSize(editor, fontSizeValue);
+};
+
+// font
+var getFont = exports.getFont = function getFont(editor) {
+  var selection = editor.selection;
+  var marks = _slate.Editor.marks(editor);
+  if (marks && marks[_constants.TEXT_STYLE_MAP.FONT]) {
+    return marks[_constants.TEXT_STYLE_MAP.FONT];
+  }
+  if (!selection) return _constants.DEFAULT_FONT;
+  if ((0, _core.isRangeAcrossBlocks)(editor, {
+    at: selection
+  })) return _constants.DEFAULT_FONT;
+  var _Editor$nodes5 = _slate.Editor.nodes(editor, {
+      at: _slate.Editor.unhangRange(editor, selection),
+      match: function match(n) {
+        return !_slate.Editor.isEditor(n) && !_slate.Element.isElement(n) && n['font'];
+      }
+    }),
+    _Editor$nodes6 = (0, _slicedToArray2["default"])(_Editor$nodes5, 1),
+    match = _Editor$nodes6[0];
+  if (!match) return _constants.DEFAULT_FONT;
+  return match[0][_constants.TEXT_STYLE_MAP.FONT];
+};
+var setFont = exports.setFont = function setFont(editor, value) {
+  _slate.Editor.addMark(editor, _constants.TEXT_STYLE_MAP.FONT, value);
+  (0, _core.focusEditor)(editor);
+};
+var hasFontLoaded = exports.hasFontLoaded = function hasFontLoaded() {
+  var fontObject = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var fontWeight = arguments.length > 1 ? arguments[1] : undefined;
+  var name = fontObject.name,
+    isSystemOwn = fontObject.isSystemOwn;
+  if (isSystemOwn) return true;
+  if (!name) return true;
+  var nameString = name.split(' ').join('+');
+  var fontLinkId = "sdoc-font-link-".concat(nameString, "-").concat(fontWeight);
+  return document.getElementById(fontLinkId);
+};
+var loadFont = exports.loadFont = function loadFont() {
+  var fontObject = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var fontWeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 400;
+  var name = fontObject.name,
+    isSystemOwn = fontObject.isSystemOwn,
+    _fontObject$supportFo = fontObject.supportFontWeight,
+    supportFontWeight = _fontObject$supportFo === void 0 ? [] : _fontObject$supportFo;
+  if (isSystemOwn) return;
+  if (!name) return;
+  var validFontWeight = supportFontWeight.includes(fontWeight) ? fontWeight : supportFontWeight[0];
+  var nameString = name.split(' ').join('+');
+  var fontLinkId = "sdoc-font-link-".concat(nameString, "-").concat(validFontWeight);
+  if (document.getElementById(fontLinkId)) return;
+  var href = "https://fonts.googleapis.com/css?family=".concat(nameString, ":").concat(validFontWeight);
+  var fontLink = document.createElement('link');
+  fontLink.rel = 'stylesheet';
+  fontLink.href = href;
+  fontLink.id = fontLinkId;
+  fontLink.className = _constants.GOOGLE_FONT_CLASS;
+  document.body.appendChild(fontLink);
+};
+var generatorFontFamily = exports.generatorFontFamily = function generatorFontFamily(fontName, fontWeight) {
+  var lang = _context["default"].getSetting('lang') || 'zh-cn';
+  if (fontName === _constants.DEFAULT_FONT) {
+    return "'Arial', ".concat(lang === 'zh-cn' ? "\u5B8B\u4F53" : 'Arial', ", 'sans-serif'");
+  }
+  var fontObject = _constants.FONT.find(function (item) {
+    return item.name === fontName;
+  }) || {};
+  var usuallyFontFamilyName = fontObject.usuallyFontFamilyName,
+    fontFamilyName = fontObject.fontFamilyName;
+  loadFont(fontObject, fontWeight);
+  var validFontName = fontFamilyName && (0, _commonUtils.isMac)() ? fontFamilyName['mac'] : fontName;
+  return "".concat(validFontName, ", ").concat(lang === 'zh-cn' ? "\u5B8B\u4F53" : 'Arial', ", ").concat(usuallyFontFamilyName || 'sans-serif');
+};

package/dist/extension/plugins/font/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _plugin = _interopRequireDefault(require("./plugin"));
+var FontPlugin = {
+  type: 'font',
+  editorPlugin: _plugin["default"]
+};
+var _default = exports["default"] = FontPlugin;

package/dist/extension/plugins/font/menu/font-family/font-item.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactI18next = require("react-i18next");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("../../../../constants");
+var _helpers = require("../../helpers");
+var FontItem = function FontItem(_ref) {
+  var selectedFont = _ref.selectedFont,
+    fontObject = _ref.fontObject,
+    setFont = _ref.setFont;
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var fontName = fontObject.name;
+  var isSelected = selectedFont === fontName;
+  var isFontLoad = (0, _helpers.hasFontLoaded)(fontObject, 400);
+  var style = isFontLoad ? {
+    fontFamily: (0, _helpers.generatorFontFamily)(fontName, 400)
+  } : {};
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('sdoc-dropdown-menu-item', {
+      'position-relative': isSelected
+    }),
+    onClick: function onClick() {
+      return setFont(fontName);
+    }
+  }, isSelected && /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-check-mark"
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    style: style
+  }, fontName === _constants.DEFAULT_FONT ? t('Default_font') : fontName));
+};
+var _default = exports["default"] = FontItem;

package/dist/extension/plugins/font/menu/font-family/index.js

@@ -0,0 +1,164 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _tooltip = _interopRequireDefault(require("../../../../../components/tooltip"));
+var _context = _interopRequireDefault(require("../../../../../context"));
+var _localStorageUtils = _interopRequireDefault(require("../../../../../utils/local-storage-utils"));
+var _objectUtils = _interopRequireDefault(require("../../../../../utils/object-utils"));
+var _constants = require("../../../../constants");
+var _helpers = require("../../helpers");
+var _fontItem = _interopRequireDefault(require("./font-item"));
+require("./index.css");
+var FontFamily = function FontFamily(_ref) {
+  var _ref$isRichEditor = _ref.isRichEditor,
+    isRichEditor = _ref$isRichEditor === void 0 ? true : _ref$isRichEditor,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? 'menu-group-item' : _ref$className,
+    editor = _ref.editor,
+    readonly = _ref.readonly;
+  var _useState = (0, _react.useState)(_localStorageUtils["default"].getItem(_constants.RECENT_USED_FONTS_KEY, [])),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    recentUsedFonts = _useState2[0],
+    setRecentUsedFonts = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isShowMenu = _useState4[0],
+    setMenuShow = _useState4[1];
+  var _useState5 = (0, _react.useState)(_constants.FONT),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    fontList = _useState6[0],
+    setFontList = _useState6[1];
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var popoverRef = (0, _react.useRef)(null);
+  var disabled = (0, _helpers.isMenuDisabled)(editor, readonly);
+  var fontSizeButtonId = 'sdoc-button-font';
+  var selectedFont = (0, _helpers.getFont)(editor);
+  var lang = _context["default"].getSetting('lang');
+  (0, _react.useEffect)(function () {
+    if (lang === 'zh-cn') {
+      var chineseFonts = _constants.FONT.filter(function (item) {
+        return _objectUtils["default"].hasProperty(item, 'langOrder');
+      });
+      chineseFonts.sort(function (a, b) {
+        return b['langOrder'][lang] - a['langOrder'][lang];
+      });
+      var others = _constants.FONT.filter(function (item) {
+        return !_objectUtils["default"].hasProperty(item, 'langOrder');
+      });
+      setFontList([].concat((0, _toConsumableArray2["default"])(chineseFonts), (0, _toConsumableArray2["default"])(others)));
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var validClassName = (0, _classnames["default"])(className, 'sdoc-menu-with-dropdown sdoc-font-family-menu', {
+    'menu-show': isShowMenu,
+    'disabled': disabled,
+    'rich-icon-btn d-flex': isRichEditor,
+    'rich-icon-btn-disabled': isRichEditor && disabled,
+    'rich-icon-btn-hover': isRichEditor && !disabled,
+    'btn btn-icon btn-secondary btn-active d-flex': !isRichEditor
+  });
+  var fontRef = (0, _react.useRef)(null);
+  var toggle = (0, _react.useCallback)(function (event) {
+    popoverRef.current.toggle();
+    setMenuShow(!isShowMenu);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowMenu]);
+  var caretIconClass = "sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down');
+  var _ref2 = fontRef.current ? fontRef.current.getBoundingClientRect() : {
+      bottom: 92.5
+    },
+    bottom = _ref2.bottom;
+  var updateFont = (0, _react.useCallback)(function (fontName) {
+    toggle();
+    (0, _helpers.setFont)(editor, fontName);
+    if (recentUsedFonts[0] !== fontName) {
+      var fontNameIndex = recentUsedFonts.findIndex(function (item) {
+        return item === fontName;
+      });
+      var newRecentUsedFonts;
+      if (fontNameIndex === -1) {
+        newRecentUsedFonts = recentUsedFonts.slice(0, 9);
+      } else {
+        newRecentUsedFonts = recentUsedFonts.slice(0);
+        newRecentUsedFonts.splice(fontNameIndex, 1);
+      }
+      newRecentUsedFonts.unshift(fontName);
+      _localStorageUtils["default"].setItem(_constants.RECENT_USED_FONTS_KEY, newRecentUsedFonts);
+      setRecentUsedFonts(newRecentUsedFonts);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedFont, editor, isShowMenu, recentUsedFonts]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    className: validClassName,
+    id: fontSizeButtonId,
+    disabled: disabled,
+    ref: fontRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-menu-with-dropdown-icon"
+  }, /*#__PURE__*/_react["default"].createElement("div", null, selectedFont === _constants.DEFAULT_FONT ? t('Default_font') : selectedFont)), !disabled && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-menu-with-dropdown-triangle"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: caretIconClass
+  }))), /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: fontSizeButtonId
+  }, t('Font')), !disabled && /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
+    target: fontSizeButtonId,
+    className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-font-size-menu-popover sdoc-font-family-menu-popover",
+    trigger: "legacy",
+    placement: "bottom-start",
+    hideArrow: true,
+    toggle: toggle,
+    fade: false,
+    ref: popoverRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-font-size-menu-container",
+    style: {
+      maxHeight: window.innerHeight - bottom - 100
+    }
+  }, Array.isArray(recentUsedFonts) && recentUsedFonts.length > 0 && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-dropdown-menu-title-name"
+  }, t('Recently_used')), recentUsedFonts.map(function (item, index) {
+    var fontObject = _constants.FONT.find(function (font) {
+      return font.name === item;
+    });
+    return /*#__PURE__*/_react["default"].createElement(_fontItem["default"], {
+      key: "".concat(index, "-recently-used"),
+      fontObject: fontObject,
+      selectedFont: selectedFont,
+      setFont: updateFont
+    });
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-dropdown-menu-divider"
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-dropdown-menu-title-name"
+  }, t('All_fonts')), fontList.map(function (item, index) {
+    if (item.type === 'divide') {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sdoc-dropdown-menu-divider"
+      });
+    }
+    return /*#__PURE__*/_react["default"].createElement(_fontItem["default"], {
+      key: "".concat(index, "-all-font"),
+      fontObject: item,
+      selectedFont: selectedFont,
+      setFont: updateFont
+    });
+  }))));
+};
+var _default = exports["default"] = FontFamily;

package/dist/extension/plugins/font/menu/font-size/font-size-scale.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _tooltip = _interopRequireDefault(require("../../../../../components/tooltip"));
+var FontSizeScale = function FontSizeScale(_ref) {
+  var _ref$isRichEditor = _ref.isRichEditor,
+    isRichEditor = _ref$isRichEditor === void 0 ? true : _ref$isRichEditor,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? 'menu-group-item' : _ref$className,
+    children = _ref.children,
+    id = _ref.id,
+    disabled = _ref.disabled,
+    onClick = _ref.onClick,
+    tipMessage = _ref.tipMessage;
+  var validClassName = (0, _classnames["default"])(className, {
+    'disabled': disabled,
+    'rich-icon-btn': isRichEditor,
+    'rich-icon-btn-disabled': isRichEditor && disabled,
+    'rich-icon-btn-hover': isRichEditor && !disabled,
+    'btn btn-icon btn-secondary btn-active d-flex': !isRichEditor
+  });
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    className: validClassName,
+    disabled: disabled,
+    onClick: disabled ? function () {} : onClick,
+    id: id
+  }, children), tipMessage && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: id
+  }, tipMessage));
+};
+var _default = exports["default"] = FontSizeScale;

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

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _tooltip = _interopRequireDefault(require("../../../../../components/tooltip"));
+var _constants = require("../../../../constants");
+var _helpers = require("../../helpers");
+require("./index.css");
+var FontSize = function FontSize(_ref) {
+  var _ref$isRichEditor = _ref.isRichEditor,
+    isRichEditor = _ref$isRichEditor === void 0 ? true : _ref$isRichEditor,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? 'menu-group-item' : _ref$className,
+    editor = _ref.editor,
+    readonly = _ref.readonly;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isShowMenu = _useState2[0],
+    setMenuShow = _useState2[1];
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var popoverRef = (0, _react.useRef)(null);
+  var disabled = (0, _helpers.isMenuDisabled)(editor, readonly);
+  var fontSizeButtonId = 'sdoc-button-font-size';
+  var selectedFontSize = (0, _helpers.getFontSize)(editor);
+  var fontSizeRef = (0, _react.useRef)(null);
+  var toggle = (0, _react.useCallback)(function (event) {
+    popoverRef.current.toggle();
+    setMenuShow(!isShowMenu);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowMenu]);
+  var updateFontSize = (0, _react.useCallback)(function (item) {
+    var fontSize = item.value;
+    toggle();
+    (0, _helpers.setFontSize)(editor, fontSize);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, selectedFontSize, isShowMenu]);
+  var validClassName = (0, _classnames["default"])(className, 'sdoc-menu-with-dropdown sdoc-font-size-menu', {
+    'menu-show': isShowMenu,
+    'disabled': disabled,
+    'rich-icon-btn d-flex': isRichEditor,
+    'rich-icon-btn-disabled': isRichEditor && disabled,
+    'rich-icon-btn-hover': isRichEditor && !disabled,
+    '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 _ref2 = fontSizeRef.current ? fontSizeRef.current.getBoundingClientRect() : {
+      bottom: 92.5
+    },
+    bottom = _ref2.bottom;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    className: validClassName,
+    id: fontSizeButtonId,
+    disabled: disabled,
+    ref: fontSizeRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-menu-with-dropdown-icon"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "text-truncate"
+  }, selectedFontSize)), !disabled && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-menu-with-dropdown-triangle"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: caretIconClass
+  }))), /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: fontSizeButtonId
+  }, t('Font_size')), !disabled && /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
+    target: fontSizeButtonId,
+    className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-font-size-menu-popover",
+    trigger: "legacy",
+    placement: "bottom-start",
+    hideArrow: true,
+    toggle: toggle,
+    fade: false,
+    ref: popoverRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-font-size-menu-container",
+    style: {
+      maxHeight: window.innerHeight - bottom - 100
+    }
+  }, _constants.FONT_SIZE.map(function (item, index) {
+    var isSelected = selectedFontSize + '' === item.name;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: index,
+      className: (0, _classnames["default"])('sdoc-dropdown-menu-item', {
+        'position-relative': isSelected
+      }),
+      onClick: function onClick() {
+        return updateFontSize(item);
+      }
+    }, isSelected && /*#__PURE__*/_react["default"].createElement("i", {
+      className: "sdocfont sdoc-check-mark"
+    }), item.name);
+  }))));
+};
+var _default = exports["default"] = FontSize;

package/dist/extension/plugins/font/menu/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _fontFamily = _interopRequireDefault(require("./font-family"));
+var _fontSize = _interopRequireDefault(require("./font-size"));
+var Font = function Font(_ref) {
+  var editor = _ref.editor,
+    readonly = _ref.readonly;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_fontFamily["default"], {
+    editor: editor,
+    readonly: readonly
+  }), /*#__PURE__*/_react["default"].createElement(_fontSize["default"], {
+    editor: editor,
+    readonly: readonly
+  }));
+};
+var _default = exports["default"] = Font;

package/dist/extension/plugins/font/plugin.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _helpers = require("./helpers");
+var withFont = function withFont(editor) {
+  var newEditor = editor;
+  newEditor.increaseFontSize = function () {
+    (0, _helpers.scaleFontSize)(newEditor, 'increase');
+  };
+  newEditor.reduceFontSize = function () {
+    (0, _helpers.scaleFontSize)(newEditor, 'reduce');
+  };
+  return newEditor;
+};
+var _default = exports["default"] = withFont;

package/dist/extension/plugins/group/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _constants = require("../../constants");
+var _renderElem = require("./render-elem");
+var GroupPlugin = {
+  type: _constants.ELEMENT_TYPE.GROUP,
+  renderElements: [_renderElem.renderGroup]
+};
+var _default = exports["default"] = GroupPlugin;

package/dist/extension/plugins/group/render-elem.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderGroup = void 0;
+var _react = _interopRequireDefault(require("react"));
+var Group = function Group(_ref) {
+  var element = _ref.element,
+    attributes = _ref.attributes,
+    children = _ref.children,
+    className = _ref.className;
+  return /*#__PURE__*/_react["default"].createElement("div", Object.assign({
+    "data-id": element.id
+  }, attributes, {
+    className: className
+  }), children);
+};
+var renderGroup = exports.renderGroup = function renderGroup(props) {
+  return /*#__PURE__*/_react["default"].createElement(Group, props);
+};