@seafile/comment-editor 0.0.1-alpha.0

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

@@ -0,0 +1,173 @@
+"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 _slate = require("@seafile/slate");
+var _context = _interopRequireDefault(require("../../../context"));
+var _commonUtils = require("../../../utils/common-utils");
+var _constants = require("../../constants");
+var _core = require("../../core");
+const isMenuDisabled = (editor, readonly) => {
+  if (readonly) return true;
+  if (!editor.selection) return true;
+  const [match] = _slate.Editor.nodes(editor, {
+    match: node => {
+      return !_slate.Editor.isEditor(node) && _slate.Element.isElement(node) && _slate.Editor.isBlock(editor, node);
+    },
+    universal: true,
+    mode: 'highest'
+  });
+  if (!match) return false;
+  const elementType = match[0].type;
+  if (elementType === _constants.CODE_BLOCK || elementType === _constants.IMAGE) {
+    return true;
+  }
+  return false;
+};
+
+// font size
+exports.isMenuDisabled = isMenuDisabled;
+const getFontSize = editor => {
+  const {
+    selection
+  } = editor;
+  const 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;
+  const [match] = _slate.Editor.nodes(editor, {
+    at: _slate.Editor.unhangRange(editor, selection),
+    match: n => {
+      if (!_slate.Editor.isEditor(n) && !_slate.Element.isElement(n)) {
+        if (n[_constants.TEXT_STYLE_MAP.FONT_SIZE]) return true;
+        const parentNode = (0, _core.getParentNode)(editor.children, n.id);
+        if (!parentNode) return false;
+        if ([_constants.TITLE, _constants.SUBTITLE, ..._constants.HEADERS, _constants.CODE_LINE].includes(parentNode.type)) {
+          return true;
+        }
+        return false;
+      }
+      if (!_slate.Editor.isEditor(n) && _slate.Editor.isVoid(editor, n)) {
+        const parentNode = (0, _core.getParentNode)(editor.children, n.id);
+        if (!parentNode) return false;
+        if ([_constants.TITLE, _constants.SUBTITLE, ..._constants.HEADERS, _constants.CODE_LINE].includes(parentNode.type)) {
+          return true;
+        }
+      }
+      return false;
+    }
+  });
+  if (!match) return _constants.SDOC_FONT_SIZE.DEFAULT;
+  // has font-size attribute
+  const matched = match[0];
+  if (matched[_constants.TEXT_STYLE_MAP.FONT_SIZE]) {
+    return matched[_constants.TEXT_STYLE_MAP.FONT_SIZE];
+  }
+  const parentNode = (0, _core.getParentNode)(editor.children, matched.id);
+  return _constants.SDOC_FONT_SIZE[parentNode.type];
+};
+exports.getFontSize = getFontSize;
+const setFontSize = (editor, value) => {
+  _slate.Editor.addMark(editor, _constants.TEXT_STYLE_MAP.FONT_SIZE, value);
+  (0, _core.focusEditor)(editor);
+};
+exports.setFontSize = setFontSize;
+const scaleFontSize = (editor, type) => {
+  const isDisabled = isMenuDisabled(editor);
+  if (isDisabled) return;
+  const fontSize = getFontSize(editor);
+  let fontSizeValue = fontSize;
+  if (type === 'increase') {
+    fontSizeValue = fontSizeValue + 1;
+  }
+  if (type === 'reduce') {
+    fontSizeValue = fontSizeValue - 1;
+    if (fontSizeValue < 1) return;
+  }
+  setFontSize(editor, fontSizeValue);
+};
+
+// font
+exports.scaleFontSize = scaleFontSize;
+const getFont = editor => {
+  const {
+    selection
+  } = editor;
+  const 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;
+  const [match] = _slate.Editor.nodes(editor, {
+    at: _slate.Editor.unhangRange(editor, selection),
+    match: n => !_slate.Editor.isEditor(n) && !_slate.Element.isElement(n) && n['font']
+  });
+  if (!match) return _constants.DEFAULT_FONT;
+  return match[0][_constants.TEXT_STYLE_MAP.FONT];
+};
+exports.getFont = getFont;
+const setFont = (editor, value) => {
+  _slate.Editor.addMark(editor, _constants.TEXT_STYLE_MAP.FONT, value);
+  (0, _core.focusEditor)(editor);
+};
+exports.setFont = setFont;
+const hasFontLoaded = function () {
+  let fontObject = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let fontWeight = arguments.length > 1 ? arguments[1] : undefined;
+  const {
+    name,
+    isSystemOwn
+  } = fontObject;
+  if (isSystemOwn) return true;
+  if (!name) return true;
+  const nameString = name.split(' ').join('+');
+  const fontLinkId = `sdoc-font-link-${nameString}-${fontWeight}`;
+  return document.getElementById(fontLinkId);
+};
+exports.hasFontLoaded = hasFontLoaded;
+const loadFont = function () {
+  let fontObject = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let fontWeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 400;
+  const {
+    name,
+    isSystemOwn,
+    supportFontWeight = []
+  } = fontObject;
+  if (isSystemOwn) return;
+  if (!name) return;
+  const validFontWeight = supportFontWeight.includes(fontWeight) ? fontWeight : supportFontWeight[0];
+  const nameString = name.split(' ').join('+');
+  const fontLinkId = `sdoc-font-link-${nameString}-${validFontWeight}`;
+  if (document.getElementById(fontLinkId)) return;
+  const href = `https://fonts.googleapis.com/css?family=${nameString}:${validFontWeight}`;
+  const fontLink = document.createElement('link');
+  fontLink.rel = 'stylesheet';
+  fontLink.href = href;
+  fontLink.id = fontLinkId;
+  fontLink.className = _constants.GOOGLE_FONT_CLASS;
+  document.body.appendChild(fontLink);
+};
+exports.loadFont = loadFont;
+const generatorFontFamily = (fontName, fontWeight) => {
+  const lang = _context.default.getSetting('lang') || 'zh-cn';
+  if (fontName === _constants.DEFAULT_FONT) {
+    return `'Arial', ${lang === 'zh-cn' ? '\u5b8b\u4f53' : 'Arial'}, 'sans-serif'`;
+  }
+  const fontObject = _constants.FONT.find(item => item.name === fontName) || {};
+  const {
+    usuallyFontFamilyName,
+    fontFamilyName
+  } = fontObject;
+  loadFont(fontObject, fontWeight);
+  const validFontName = fontFamilyName && (0, _commonUtils.isMac)() ? fontFamilyName['mac'] : fontName;
+  return `${validFontName}, ${lang === 'zh-cn' ? '\u5b8b\u4f53' : 'Arial'}, ${usuallyFontFamilyName || 'sans-serif'}`;
+};
+exports.generatorFontFamily = generatorFontFamily;

package/dist/basic-sdk/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"));
+const FontPlugin = {
+  type: 'font',
+  editorPlugin: _plugin.default
+};
+var _default = exports.default = FontPlugin;

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

@@ -0,0 +1,39 @@
+"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");
+const FontItem = _ref => {
+  let {
+    selectedFont,
+    fontObject,
+    setFont
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const fontName = fontObject.name;
+  const isSelected = selectedFont === fontName;
+  const isFontLoad = (0, _helpers.hasFontLoaded)(fontObject, 400);
+  const 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: () => 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/basic-sdk/extension/plugins/font/menu/font-family/index.css

@@ -0,0 +1,40 @@
+.menu-group .menu-group-item.sdoc-menu-with-dropdown.sdoc-font-family-menu {
+  width: 76px;
+  max-width: 76px;
+}
+
+.menu-group .menu-group-item.sdoc-menu-with-dropdown.sdoc-font-family-menu.disabled {
+  width: 70px !important;
+}
+
+.sdoc-font-family-menu .sdoc-menu-with-dropdown-icon,
+.sdoc-font-family-menu .sdoc-menu-with-dropdown-icon div {
+  width: 64px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+}
+
+.sdoc-font-family-menu .sdoc-menu-with-dropdown-icon div {
+  padding-left: 5px;
+  color: #212529;
+}
+
+.menu-group .menu-group-item.sdoc-menu-with-dropdown.sdoc-font-family-menu.disabled .sdoc-menu-with-dropdown-icon {
+  width: 70px !important;
+}
+
+.menu-group .menu-group-item.sdoc-menu-with-dropdown.sdoc-font-family-menu.disabled .sdoc-menu-with-dropdown-icon div {
+  padding-right: 5px;
+  width: 70px;
+  color: #BDBDBD;
+}
+
+/* sdoc-font-family-menu-popover */
+.sdoc-font-family-menu-popover .sdoc-dropdown-menu-title-name {
+  padding: 8px 10px;
+  color: gray;
+  cursor: default;
+  font-size: 14px;
+}

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

@@ -0,0 +1,145 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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");
+const FontFamily = _ref => {
+  let {
+    isRichEditor = true,
+    className = 'menu-group-item',
+    editor,
+    readonly
+  } = _ref;
+  const [recentUsedFonts, setRecentUsedFonts] = (0, _react.useState)(_localStorageUtils.default.getItem(_constants.RECENT_USED_FONTS_KEY, []));
+  const [isShowMenu, setMenuShow] = (0, _react.useState)(false);
+  const [fontList, setFontList] = (0, _react.useState)(_constants.FONT);
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const popoverRef = (0, _react.useRef)(null);
+  const disabled = (0, _helpers.isMenuDisabled)(editor, readonly);
+  const fontSizeButtonId = 'sdoc-button-font';
+  let selectedFont = (0, _helpers.getFont)(editor);
+  const lang = _context.default.getSetting('lang');
+  (0, _react.useEffect)(() => {
+    if (lang === 'zh-cn') {
+      const chineseFonts = _constants.FONT.filter(item => _objectUtils.default.hasProperty(item, 'langOrder'));
+      chineseFonts.sort((a, b) => b['langOrder'][lang] - a['langOrder'][lang]);
+      const others = _constants.FONT.filter(item => !_objectUtils.default.hasProperty(item, 'langOrder'));
+      setFontList([...chineseFonts, ...others]);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const 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
+  });
+  const fontRef = (0, _react.useRef)(null);
+  const toggle = (0, _react.useCallback)(event => {
+    popoverRef.current.toggle();
+    setMenuShow(!isShowMenu);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowMenu]);
+  const caretIconClass = `sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-${isShowMenu ? 'caret-up' : 'drop-down'}`;
+  const {
+    bottom
+  } = fontRef.current ? fontRef.current.getBoundingClientRect() : {
+    bottom: 92.5
+  };
+  const updateFont = (0, _react.useCallback)(fontName => {
+    toggle();
+    (0, _helpers.setFont)(editor, fontName);
+    if (recentUsedFonts[0] !== fontName) {
+      const fontNameIndex = recentUsedFonts.findIndex(item => item === fontName);
+      let 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((item, index) => {
+    const fontObject = _constants.FONT.find(font => font.name === item);
+    return /*#__PURE__*/_react.default.createElement(_fontItem.default, {
+      key: `${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((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: `${index}-all-font`,
+      fontObject: item,
+      selectedFont: selectedFont,
+      setFont: updateFont
+    });
+  }))));
+};
+var _default = exports.default = FontFamily;

package/dist/basic-sdk/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"));
+const FontSizeScale = _ref => {
+  let {
+    isRichEditor = true,
+    className = 'menu-group-item',
+    children,
+    id,
+    disabled,
+    onClick,
+    tipMessage
+  } = _ref;
+  const 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 ? () => {} : onClick,
+    id: id
+  }, children), tipMessage && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    target: id
+  }, tipMessage));
+};
+var _default = exports.default = FontSizeScale;

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

@@ -0,0 +1,40 @@
+.menu-group .sdoc-menu-with-dropdown.sdoc-font-size-menu {
+  width: 46px;
+}
+
+.menu-group .sdoc-menu-with-dropdown.sdoc-font-size-menu.disabled {
+  width: 34px !important;
+}
+
+.menu-group .sdoc-font-size-menu .sdoc-menu-with-dropdown-icon,
+.menu-group .sdoc-font-size-menu .sdoc-menu-with-dropdown-icon div {
+  width: 34px;
+  font-size: 14px;
+}
+
+.menu-group .sdoc-font-size-menu .sdoc-menu-with-dropdown-icon div {
+  padding-left: 5px;
+  color: #212529;
+}
+
+.menu-group .sdoc-menu-with-dropdown.sdoc-font-size-menu.disabled .sdoc-menu-with-dropdown-icon div {
+  padding-right: 5px;
+  color: #BDBDBD;
+}
+
+.sdoc-font-size-menu-popover .sdoc-dropdown-menu-item .sdoc-check-mark {
+  position: absolute;
+  left: 8px;
+  color: #798d99;
+}
+
+.sdoc-font-size-menu-popover .sdoc-font-size-menu-container {
+  height: fit-content;
+  padding: 8px 0;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+.sdoc-font-size-menu-popover .sdoc-dropdown-menu-item {
+  font-size: 14px;
+}

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

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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");
+const FontSize = _ref => {
+  let {
+    isRichEditor = true,
+    className = 'menu-group-item',
+    editor,
+    readonly
+  } = _ref;
+  const [isShowMenu, setMenuShow] = (0, _react.useState)(false);
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const popoverRef = (0, _react.useRef)(null);
+  const disabled = (0, _helpers.isMenuDisabled)(editor, readonly);
+  const fontSizeButtonId = 'sdoc-button-font-size';
+  let selectedFontSize = (0, _helpers.getFontSize)(editor);
+  const fontSizeRef = (0, _react.useRef)(null);
+  const toggle = (0, _react.useCallback)(event => {
+    popoverRef.current.toggle();
+    setMenuShow(!isShowMenu);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowMenu]);
+  const updateFontSize = (0, _react.useCallback)(item => {
+    const fontSize = item.value;
+    toggle();
+    (0, _helpers.setFontSize)(editor, fontSize);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, selectedFontSize, isShowMenu]);
+  const 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
+  });
+  const caretIconClass = `sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-${isShowMenu ? 'caret-up' : 'drop-down'}`;
+  const {
+    bottom
+  } = fontSizeRef.current ? fontSizeRef.current.getBoundingClientRect() : {
+    bottom: 92.5
+  };
+  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((item, index) => {
+    const isSelected = selectedFontSize + '' === item.name;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index,
+      className: (0, _classnames.default)('sdoc-dropdown-menu-item', {
+        'position-relative': isSelected
+      }),
+      onClick: () => updateFontSize(item)
+    }, isSelected && /*#__PURE__*/_react.default.createElement("i", {
+      className: "sdocfont sdoc-check-mark"
+    }), item.name);
+  }))));
+};
+var _default = exports.default = FontSize;

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

@@ -0,0 +1,24 @@
+"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"));
+const Font = _ref => {
+  let {
+    editor,
+    readonly
+  } = _ref;
+  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/basic-sdk/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");
+const withFont = editor => {
+  const newEditor = editor;
+  newEditor.increaseFontSize = () => {
+    (0, _helpers.scaleFontSize)(newEditor, 'increase');
+  };
+  newEditor.reduceFontSize = () => {
+    (0, _helpers.scaleFontSize)(newEditor, 'reduce');
+  };
+  return newEditor;
+};
+var _default = exports.default = withFont;

package/dist/basic-sdk/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");
+const GroupPlugin = {
+  type: _constants.ELEMENT_TYPE.GROUP,
+  renderElements: [_renderElem.renderGroup]
+};
+var _default = exports.default = GroupPlugin;

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

@@ -0,0 +1,25 @@
+"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"));
+const Group = _ref => {
+  let {
+    element,
+    attributes,
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
+    "data-id": element.id
+  }, attributes, {
+    className: className
+  }), children);
+};
+const renderGroup = props => {
+  return /*#__PURE__*/_react.default.createElement(Group, props);
+};
+exports.renderGroup = renderGroup;