@seafile/sdoc-editor 3.0.95 → 3.0.96

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

@@ -276,7 +276,6 @@
   background: #FAFAFA;
   border: 1px solid #f0f0f0;
   position: relative;
-  overflow-y: hidden !important;
 }
 
 .sdoc-code-block-pre.hidden {
@@ -320,7 +319,7 @@
 .sdoc-code-block-code.hide-code {
   max-height: 580.2px;
   display: block;
-  overflow: hidden;
+  overflow: scroll;
 }
 
 .sdoc-code-block-code .sdoc-code-line {

package/dist/extension/plugins/code-block/render-elem.js

@@ -18,6 +18,8 @@ var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
 var _core = require("../../core");
 var _helpers = require("./helpers");
 var _hoverMenu = _interopRequireDefault(require("./hover-menu"));
+// Max code-block content display height
+var HIDDEN_CODE_BLOCK_MAX_HEIGHT = 570;
 var CodeBlock = function CodeBlock(_ref) {
   var attributes = _ref.attributes,
     children = _ref.children,
@@ -25,6 +27,7 @@ var CodeBlock = function CodeBlock(_ref) {
     editor = _ref.editor;
   var readOnly = (0, _slateReact.useReadOnly)();
   var codeBlockRef = (0, _react.useRef)();
+  var codeContentRef = (0, _react.useRef)();
   var scrollRef = (0, _useScrollContext.useScrollContext)();
   var _element$style = element.style,
     style = _element$style === void 0 ? {
@@ -46,6 +49,10 @@ var CodeBlock = function CodeBlock(_ref) {
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     showAllCode = _useState6[0],
     setShowAllCode = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    isCodeBlockOverflow = _useState8[0],
+    setIsCodeBlockOverflow = _useState8[1];
   var onChangeLanguage = (0, _react.useCallback)(function (lang) {
     var language = lang.value;
     var path = _slateReact.ReactEditor.findPath(editor, element);
@@ -138,10 +145,19 @@ var CodeBlock = function CodeBlock(_ref) {
   var handleScroll = function handleScroll() {
     _eventBus["default"].getInstance().dispatch(_constants.INTERNAL_EVENT.UPDATE_SEARCH_REPLACE_HIGHLIGHT);
   };
-  var isHiddenCodeBlockParts = children.length > 30;
-  var toggleHidden = function toggleHidden() {
-    setShowAllCode(!showAllCode);
-  };
+  var toggleHidden = (0, _react.useCallback)(function () {
+    setShowAllCode(function (prev) {
+      return !prev;
+    });
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (!codeContentRef.current) return;
+    if (codeContentRef.current.clientHeight > Number(HIDDEN_CODE_BLOCK_MAX_HEIGHT)) {
+      setIsCodeBlockOverflow(true);
+    } else {
+      setIsCodeBlockOverflow(false);
+    }
+  }, [children]);
   return /*#__PURE__*/_react["default"].createElement("div", Object.assign({
     "data-id": element.id
   }, attributes, {
@@ -151,12 +167,13 @@ var CodeBlock = function CodeBlock(_ref) {
   }), /*#__PURE__*/_react["default"].createElement("pre", {
     onScroll: handleScroll,
     className: (0, _classnames["default"])('sdoc-code-block-pre', {
-      'hidden': isHiddenCodeBlockParts
+      'hidden': isCodeBlockOverflow
     }),
     ref: codeBlockRef
   }, /*#__PURE__*/_react["default"].createElement("code", {
+    ref: codeContentRef,
     className: "sdoc-code-block-code ".concat(white_space === 'nowrap' ? 'sdoc-code-no-wrap' : '', " ").concat(!showAllCode ? 'hide-code' : '')
-  }, children)), children.length > 30 && /*#__PURE__*/_react["default"].createElement("span", {
+  }, children)), isCodeBlockOverflow && /*#__PURE__*/_react["default"].createElement("span", {
     className: "sdoc-code-block-hidden-icon",
     onClick: toggleHidden,
     contentEditable: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "3.0.95",
+  "version": "3.0.96",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "78bd4ccf93aa2e6399e6b5a46f79a84fb5b0f638"
+  "gitHead": "ed0225dc45084b5d615ae9df8ba9dc6a5d025c8f"
 }