@seafile/sdoc-editor 2.0.202 → 2.0.204

package/dist/extension/commons/file-link-preview/index.css

@@ -106,7 +106,7 @@
 .file-preview-panel-body .sdoc-article-container .article.sdoc-editor__article {
   border: none;
   box-shadow: none;
-  padding: 8px;
+  padding: 8px 16px;
 }
 
 .file-preview-panel-body .sdoc-article-container .sdoc-table-wrapper {

package/dist/extension/constants/index.js

@@ -201,7 +201,7 @@ Object.defineProperty(exports, "HEADER6", {
     return _elementType.HEADER6;
   }
 });
-exports.HEADER_TITLE_MAP = exports.HEADERS = void 0;
+exports.HEADER_TITLE_MAP = exports.HEADER_TAG = exports.HEADERS = void 0;
 Object.defineProperty(exports, "IMAGE", {
   enumerable: true,
   get: function get() {
@@ -498,6 +498,14 @@ var _menusConfig = require("./menus-config");
 var _MOUSE_ENTER_EVENT_DI; // extension plugin
 // eslint-disable-next-line no-duplicate-imports
 var HEADERS = exports.HEADERS = [_elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6];
+var HEADER_TAG = exports.HEADER_TAG = {
+  header1: 'H1',
+  header2: 'H2',
+  header3: 'H3',
+  header4: 'H4',
+  header5: 'H5',
+  header6: 'H6'
+};
 var HEADER_TITLE_MAP = exports.HEADER_TITLE_MAP = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _elementType.TITLE, 'Title'), _elementType.SUBTITLE, 'Subtitle'), _elementType.HEADER1, 'Header_one'), _elementType.HEADER2, 'Header_two'), _elementType.HEADER3, 'Header_three'), _elementType.HEADER4, 'Header_four'), _elementType.HEADER5, 'Header_five'), _elementType.HEADER6, 'Header_six'), _elementType.PARAGRAPH, 'Paragraph');
 var TRANSPARENT = exports.TRANSPARENT = 'transparent';
 var CLIPBOARD_FORMAT_KEY = exports.CLIPBOARD_FORMAT_KEY = 'x-slate-fragment';

package/dist/extension/plugins/link/dialog/add-link-dialog/index.css

@@ -107,7 +107,33 @@
 
 .link-block-wrapper .link-block-container {
   width: 100%;
-  margin: 5px 0;
+  padding: 5px 0;
+}
+
+.link-block-wrapper .link-header-block-container {
+  width: 100%;
+  padding: 5px 0;
+  display: flex;
+  color: #495057;
+  cursor: pointer;
+}
+
+.link-block-wrapper .link-header-block-container:hover {
+  background-color: rgb(245, 245, 245);
+}
+
+.link-block-wrapper .link-header-block-container .heading-prefix {
+  margin-right: 6px;
+  padding-left: 0.75rem;
+}
+
+.link-block-wrapper .link-header-block-container .linked-header-block-item {
+  display: block;
+  font-size: 15px;
+  margin-right: 5px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .link-block-wrapper .link-block-container .linked-block-item {
@@ -117,6 +143,25 @@
   padding-left: 0.75rem;
 }
 
+.selected-linked-block-wrapper .selected-linked-block .linked-header-block-item,
+.selected-linked-block .sdoc-header-1,
+.selected-linked-block .sdoc-header-2,
+.selected-linked-block .sdoc-header-3,
+.selected-linked-block .sdoc-header-4,
+.selected-linked-block .sdoc-header-5,
+.selected-linked-block .sdoc-header-6 {
+  color: #495057;
+  font-size: 15px !important;
+  font-weight: normal;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.selected-linked-block-wrapper .selected-linked-block .heading-prefix {
+  display: none;
+}
+
 .link-block-wrapper .select-block-wrapper blockquote,
 .link-block-wrapper .link-block-container blockquote {
   border-left: 4px solid #ddd;

package/dist/extension/plugins/link/dialog/add-link-dialog/index.js

@@ -64,30 +64,34 @@ var AddLinkDialog = function AddLinkDialog(_ref) {
     _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
     selectedBlockId = _useState10[0],
     setSelectedBlockId = _useState10[1];
-  var _useState11 = (0, _react.useState)(false),
+  var _useState11 = (0, _react.useState)([]),
     _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    isOpenSelect = _useState12[0],
-    setIsOpenSelect = _useState12[1];
+    headerList = _useState12[0],
+    setheaderList = _useState12[1];
   var _useState13 = (0, _react.useState)(false),
     _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-    isOpenSelectHeader = _useState14[0],
-    setIsOpenSelectHeader = _useState14[1];
+    isOpenSelect = _useState14[0],
+    setIsOpenSelect = _useState14[1];
   var _useState15 = (0, _react.useState)(false),
     _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
-    isOpenSelectImageBlock = _useState16[0],
-    setIsOpenSelectImageBlock = _useState16[1];
+    isOpenSelectHeader = _useState16[0],
+    setIsOpenSelectHeader = _useState16[1];
   var _useState17 = (0, _react.useState)(false),
     _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
-    isOpenSelectCodeBlock = _useState18[0],
-    setIsOpenSelectCodeBlock = _useState18[1];
+    isOpenSelectImageBlock = _useState18[0],
+    setIsOpenSelectImageBlock = _useState18[1];
   var _useState19 = (0, _react.useState)(false),
     _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
-    isOpenSelectBlockquote = _useState20[0],
-    setIsOpenSelectBlockquote = _useState20[1];
-  var _useState21 = (0, _react.useState)(''),
+    isOpenSelectCodeBlock = _useState20[0],
+    setIsOpenSelectCodeBlock = _useState20[1];
+  var _useState21 = (0, _react.useState)(false),
     _useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
-    htmlString = _useState22[0],
-    setHtmlString = _useState22[1];
+    isOpenSelectBlockquote = _useState22[0],
+    setIsOpenSelectBlockquote = _useState22[1];
+  var _useState23 = (0, _react.useState)(''),
+    _useState24 = (0, _slicedToArray2["default"])(_useState23, 2),
+    htmlString = _useState24[0],
+    setHtmlString = _useState24[1];
   var submit = (0, _react.useCallback)(function () {
     setLinkErrorMessage('');
     setTitleErrorMessage('');
@@ -144,7 +148,7 @@ var AddLinkDialog = function AddLinkDialog(_ref) {
     }));
   }, [closeDialog]);
   var handleOnChangeBlock = function handleOnChangeBlock(e) {
-    var block = e.target.closest('.linked-block-item');
+    var block = e.target.closest('.linked-block-item') || e.currentTarget.querySelector('.linked-header-block-item');
     if (block) {
       var clone = block.cloneNode(true);
       var displayContainer = document.getElementById('selected-block-display');
@@ -175,6 +179,7 @@ var AddLinkDialog = function AddLinkDialog(_ref) {
     };
   }, [linked_id]);
   (0, _react.useEffect)(function () {
+    // Get codeblock，blockquote，image html
     var genHtml = /*#__PURE__*/function () {
       var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/(0, _regenerator2["default"])().m(function _callee() {
         var list, mdValue, ids, processor, file;
@@ -207,7 +212,15 @@ var AddLinkDialog = function AddLinkDialog(_ref) {
     }();
     genHtml();
   }, [editor.children]);
-  var headersHTML = (0, _helpers.parseHtmlString)(htmlString, 'h1,h2,h3,h4,h5,h6');
+  (0, _react.useEffect)(function () {
+    // Get header node list
+    var headerList = editor.children.filter(function (node) {
+      return _slate.Element.isElement(node) && !(0, _helpers.isEmptyNode)(node) && _constants.HEADERS.includes(node.type);
+    });
+    if (headerList.length > 0) {
+      setheaderList(headerList);
+    }
+  }, [editor.children]);
   var imagesHTML = (0, _helpers.parseHtmlString)(htmlString, 'img');
   var codeBlockHTML = (0, _helpers.parseHtmlString)(htmlString, 'pre');
   var blockquoteHTML = (0, _helpers.parseHtmlString)(htmlString, 'blockquote');
@@ -279,7 +292,7 @@ var AddLinkDialog = function AddLinkDialog(_ref) {
     className: "sdoc-file-icon sdoc-file-icon-toggle sdocfont sdoc-right-slide"
   })), isOpenSelect && /*#__PURE__*/_react["default"].createElement("div", {
     className: "link-block-wrapper"
-  }, headersHTML && /*#__PURE__*/_react["default"].createElement("div", {
+  }, headerList.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])('select-block-wrapper', {
       'expanded': isOpenSelectHeader
     }),
@@ -290,14 +303,20 @@ var AddLinkDialog = function AddLinkDialog(_ref) {
     className: "sdoc-file-icon sdoc-file-icon-toggle sdocfont sdoc-right-slide"
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "title"
-  }, t('Header'))), isOpenSelectHeader && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "link-block-container",
-    dangerouslySetInnerHTML: {
-      __html: headersHTML
-    },
-    onClick: function onClick(e) {
-      return handleOnChangeBlock(e);
-    }
+  }, t('Header'))), isOpenSelectHeader && headerList.map(function (header, key) {
+    var headerContext = _slate.Node.string(header);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "link-header-block-container",
+      key: key,
+      onClick: function onClick(e) {
+        return handleOnChangeBlock(e);
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "heading-prefix"
+    }, _constants.HEADER_TAG[header.type]), /*#__PURE__*/_react["default"].createElement("div", {
+      "data-id": header.id,
+      className: "linked-header-block-item"
+    }, headerContext));
   }), imagesHTML && /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])('select-block-wrapper', {
       'expanded': isOpenSelectImageBlock

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "2.0.202",
+  "version": "2.0.204",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a0f7311114597313bfe8367fc8725a8e1c2f8e89"
+  "gitHead": "30b9fce37069a7f6e1131e8359ed77526a24aef7"
 }