@seafile/sdoc-editor 3.0.100 → 3.0.102

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

@@ -266,164 +266,3 @@
   border-radius: 3px;
   cursor: pointer;
 }
-
-/* code_block */
-.sdoc-code-block-container {
-  position: relative;
-}
-
-.sdoc-code-block-pre {
-  background: #FAFAFA;
-  border: 1px solid #f0f0f0;
-  position: relative;
-}
-
-.sdoc-editor__article .sdoc-code-block-pre {
-  display: flex;
-  position: relative;
-  overflow: auto;
-}
-
-.sdoc-editor__article .sdoc-code-block-pre::after {
-  content: '';
-  position: sticky;
-  right: -16px;
-  top: 0;
-  bottom: 0;
-  width: 16px;
-  background: inherit;
-  pointer-events: none;
-  display: inline-block;
-  flex-shrink: 0;
-}
-
-.sdoc-code-block-pre.hidden {
-  padding-bottom: 48px !important;
-}
-
-.sdoc-code-block-pre .sdoc-code-no-wrap {
-  white-space: nowrap;
-}
-
-.sdoc-code-block-pre .sdoc-code-no-wrap .sdoc-code-line>span {
-  white-space: pre;
-}
-
-.sdoc-code-block-container .sdoc-code-block-hidden-icon {
-  height: 32px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 48%;
-  bottom: 8px;
-}
-
-.sdoc-code-block-container .sdoc-code-block-hidden-icon .icon-container {
-  width: 32px;
-  height: 20px;
-  background-color: #999;
-  border-radius: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-
-.sdoc-code-block-container .sdoc-code-block-hidden-icon .icon-container .sdocfont {
-  color: #fff;
-  font-size: 12px;
-}
-
-.sdoc-code-block-code.hide-code {
-  max-height: 580.2px;
-  display: block;
-}
-
-.sdoc-code-block-code .sdoc-code-line {
-  position: relative;
-  counter-increment: number;
-  margin-left: 32px;
-}
-
-.sdoc-code-block-code .sdoc-code-line::before {
-  content: counter(number);
-  color: #ccc;
-  width: 40px;
-  text-align: end;
-  position: absolute;
-  left: -50px;
-}
-
-.sdoc-code-line .token.comment,
-.sdoc-code-line .token.prolog,
-.sdoc-code-line .token.doctype,
-.sdoc-code-line .token.cdata {
-  color: slategray;
-}
-
-.sdoc-code-line .token.punctuation {
-  color: #999;
-}
-
-.sdoc-code-line .token.namespace {
-  opacity: .7;
-}
-
-.sdoc-code-line .token.property,
-.sdoc-code-line .token.tag,
-.sdoc-code-line .token.boolean,
-.sdoc-code-line .token.number,
-.sdoc-code-line .token.constant,
-.sdoc-code-line .token.symbol,
-.sdoc-code-line .token.deleted {
-  color: #905;
-  padding: 0rem;
-}
-
-.sdoc-code-line .token.selector,
-.sdoc-code-line .token.attr-name,
-.sdoc-code-line .token.string,
-.sdoc-code-line .token.char,
-.sdoc-code-line .token.builtin,
-.sdoc-code-line .token.inserted {
-  color: #690;
-}
-
-.sdoc-code-line .token.operator,
-.sdoc-code-line .token.entity,
-.sdoc-code-line .token.url,
-.sdoc-code-line .language-css .token.string,
-.sdoc-code-line .style .token.string {
-  color: #9a6e3a;
-}
-
-.sdoc-code-line .token.atrule,
-.sdoc-code-line .token.attr-value,
-.sdoc-code-line .token.keyword {
-  color: #07a;
-}
-
-.sdoc-code-line .token.function,
-.sdoc-code-line .token.class-name {
-  color: #DD4A68;
-}
-
-.sdoc-code-line .token.regex,
-.sdoc-code-line .token.important,
-.sdoc-code-line .token.variable {
-  color: #e90;
-}
-
-.sdoc-code-line .sdoc-code-line .token.important,
-.sdoc-code-line .token.bold {
-  font-weight: bold;
-}
-
-.sdoc-code-line .token.italic {
-  font-style: italic;
-}
-
-.sdoc-code-line .token.entity {
-  cursor: help;
-}

package/dist/extension/plugins/code-block/element.css

@@ -0,0 +1,175 @@
+/* code_block */
+.sdoc-code-block-container {
+  position: relative;
+}
+
+.sdoc-code-block-pre {
+  background: #FAFAFA;
+  border: 1px solid #f0f0f0;
+  display: flex;
+  position: unset;
+  overflow: auto;
+}
+
+.sdoc-code-block-pre::after {
+  content: '';
+  position: sticky;
+  right: -16px;
+  top: 0;
+  bottom: 0;
+  width: 16px;
+  background: inherit;
+  pointer-events: none;
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+.sdoc-code-block-code {
+  display: block;
+  height: 100%;
+  word-break: break-all;
+}
+
+.sdoc-code-block-code.sdoc-code-no-wrap {
+  white-space: nowrap;
+}
+
+.sdoc-code-block-code.sdoc-code-no-wrap .sdoc-code-line>span {
+  white-space: pre;
+}
+
+.sdoc-code-block-code .sdoc-code-line {
+  position: relative;
+  counter-increment: number;
+  margin-left: 32px;
+}
+
+.sdoc-code-block-code .sdoc-code-line::before {
+  content: counter(number);
+  color: #ccc;
+  width: 40px;
+  text-align: end;
+  position: absolute;
+  left: -50px;
+}
+
+.sdoc-code-line .token.comment,
+.sdoc-code-line .token.prolog,
+.sdoc-code-line .token.doctype,
+.sdoc-code-line .token.cdata {
+  color: slategray;
+}
+
+.sdoc-code-line .token.punctuation {
+  color: #999;
+}
+
+.sdoc-code-line .token.namespace {
+  opacity: .7;
+}
+
+.sdoc-code-line .token.property,
+.sdoc-code-line .token.tag,
+.sdoc-code-line .token.boolean,
+.sdoc-code-line .token.number,
+.sdoc-code-line .token.constant,
+.sdoc-code-line .token.symbol,
+.sdoc-code-line .token.deleted {
+  color: #905;
+  padding: 0rem;
+}
+
+.sdoc-code-line .token.selector,
+.sdoc-code-line .token.attr-name,
+.sdoc-code-line .token.string,
+.sdoc-code-line .token.char,
+.sdoc-code-line .token.builtin,
+.sdoc-code-line .token.inserted {
+  color: #690;
+}
+
+.sdoc-code-line .token.operator,
+.sdoc-code-line .token.entity,
+.sdoc-code-line .token.url,
+.sdoc-code-line .language-css .token.string,
+.sdoc-code-line .style .token.string {
+  color: #9a6e3a;
+}
+
+.sdoc-code-line .token.atrule,
+.sdoc-code-line .token.attr-value,
+.sdoc-code-line .token.keyword {
+  color: #07a;
+}
+
+.sdoc-code-line .token.function,
+.sdoc-code-line .token.class-name {
+  color: #DD4A68;
+}
+
+.sdoc-code-line .token.regex,
+.sdoc-code-line .token.important,
+.sdoc-code-line .token.variable {
+  color: #e90;
+}
+
+.sdoc-code-line .sdoc-code-line .token.important,
+.sdoc-code-line .token.bold {
+  font-weight: bold;
+}
+
+.sdoc-code-line .token.italic {
+  font-style: italic;
+}
+
+.sdoc-code-line .token.entity {
+  cursor: help;
+}
+
+/* Special treatment */
+.sdoc-code-block-pre.exceeding-height {
+  padding-bottom: 48px;
+  max-height: 640px;
+}
+
+.sdoc-code-block-pre.exceeding-height.expanded {
+  max-height: fit-content;
+}
+
+.sdoc-code-block-pre.exceeding-height .sdoc-code-block-hidden-icon-container {
+  width: 100%;
+  height: 48px;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  bottom: 0;
+  left: 0;
+}
+
+.sdoc-code-block-pre.exceeding-height .sdoc-code-block-hidden-icon-container.hidden {
+  background: linear-gradient(0deg, #F5F7fA 0, rgba(245, 247, 250, 0.8) 100%);
+}
+
+.sdoc-code-block-pre.exceeding-height .sdoc-code-block-hidden-icon {
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.sdoc-code-block-pre.exceeding-height .sdoc-code-block-hidden-icon .icon-container {
+  width: 32px;
+  height: 20px;
+  background-color: #999;
+  border-radius: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.sdoc-code-block-pre.exceeding-height .sdoc-code-block-hidden-icon .icon-container .sdocfont {
+  color: #fff;
+  font-size: 12px;
+}

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

@@ -18,6 +18,7 @@ var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
 var _core = require("../../core");
 var _helpers = require("./helpers");
 var _hoverMenu = _interopRequireDefault(require("./hover-menu"));
+require("./element.css");
 // Max code-block content display height
 var HIDDEN_CODE_BLOCK_MAX_HEIGHT = 570;
 var CodeBlock = function CodeBlock(_ref) {
@@ -167,15 +168,18 @@ var CodeBlock = function CodeBlock(_ref) {
   }), /*#__PURE__*/_react["default"].createElement("pre", {
     onScroll: handleScroll,
     className: (0, _classnames["default"])('sdoc-code-block-pre', {
-      'hidden': isCodeBlockOverflow
+      'exceeding-height': isCodeBlockOverflow,
+      'expanded': showAllCode
     }),
     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), !showAllCode && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "sdoc-code-block-per-padding"
-  })), isCodeBlockOverflow && /*#__PURE__*/_react["default"].createElement("span", {
+  }, children), isCodeBlockOverflow && /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('sdoc-code-block-hidden-icon-container', {
+      'hidden': !showAllCode
+    })
+  }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "sdoc-code-block-hidden-icon",
     onClick: toggleHidden,
     contentEditable: false,
@@ -186,7 +190,7 @@ var CodeBlock = function CodeBlock(_ref) {
     className: "sdocfont sdoc-arrow-down arrow"
   }) : /*#__PURE__*/_react["default"].createElement("i", {
     className: "sdocfont sdoc-arrow-up arrow"
-  }))), showHoverMenu && /*#__PURE__*/_react["default"].createElement(_hoverMenu["default"], {
+  }))))), showHoverMenu && /*#__PURE__*/_react["default"].createElement(_hoverMenu["default"], {
     menuPosition: menuPosition,
     onChangeLanguage: onChangeLanguage,
     language: element.language,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "3.0.100",
+  "version": "3.0.102",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ec117df28e801deb10aca55c08c76cb3f310dc9d"
+  "gitHead": "479a87475e8ebfb8bcb6b80554828eef0865f7eb"
 }