@zjlab-fe/data-hub-ui 0.32.0 → 0.32.1

package/es/components/notion-editor/index.js

@@ -112,6 +112,7 @@ const parseCopyPasteBlocks = (plainText, docId) => {
 const NotionEditor = forwardRef(({ initContent, editable = false, className = '', docId, onChange, onImageUpload, onFileUpload, onImageUploadByUrl, }, ref) => {
     const placeholder = '输入 "/" 快速插入内容';
     const docIdRef = useRef(docId);
+    const containerRef = useRef(null);
     const [tocCollapsed, setTocCollapsed] = useState(false);
     const [tocItems, setTocItems] = useState([]);
     docIdRef.current = docId;
@@ -239,7 +240,8 @@ const NotionEditor = forwardRef(({ initContent, editable = false, className = ''
     const showToc = tocItems.length > 0;
     const tocTitle = useMemo(() => (tocCollapsed ? '展开目录' : '收起目录'), [tocCollapsed]);
     const handleTocItemClick = useCallback((blockId) => {
-        const target = document.querySelector(`.data-hub-ui-blocknote-editor [data-id="${CSS.escape(blockId)}"]`);
+        var _a;
+        const target = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.data-hub-ui-blocknote-editor [data-id="${CSS.escape(blockId)}"]`);
         target === null || target === void 0 ? void 0 : target.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }, []);
     useImperativeHandle(ref, () => ({
@@ -254,7 +256,7 @@ const NotionEditor = forwardRef(({ initContent, editable = false, className = ''
         focus: () => editor === null || editor === void 0 ? void 0 : editor.focus(),
         isEmpty: () => { var _a; return (_a = editor === null || editor === void 0 ? void 0 : editor.isEmpty) !== null && _a !== void 0 ? _a : true; },
     }));
-    return (jsxs("div", { className: `data-hub-ui-blocknote-editor-wrapper ${tocCollapsed ? 'is-toc-collapsed' : ''} ${className}`, children: [jsx(BlockNoteView, { editor: editor, formattingToolbar: false, onChange: handleChange, theme: "light", className: "data-hub-ui-blocknote-editor", children: jsx(FormattingToolbarController, { formattingToolbar: () => (jsxs(FormattingToolbar, { children: [getFormattingToolbarItems(), jsx(BasicTextStyleButton, { basicTextStyle: "code" })] })) }) }), showToc && (jsxs("aside", { className: `data-hub-ui-blocknote-toc ${tocCollapsed ? 'is-collapsed' : ''}`, children: [jsxs("button", { type: "button", className: "data-hub-ui-blocknote-toc__toggle", "aria-label": tocTitle, "aria-expanded": !tocCollapsed, onClick: () => setTocCollapsed((value) => !value), children: [jsx("span", { children: "\u76EE\u5F55" }), jsx("span", { className: "data-hub-ui-blocknote-toc__toggle-icon", children: tocCollapsed ? '‹' : '›' })] }), !tocCollapsed && (jsx("nav", { className: "data-hub-ui-blocknote-toc__list", "aria-label": "\u6587\u6863\u76EE\u5F55", children: tocItems.map((item) => (jsx("button", { type: "button", className: "data-hub-ui-blocknote-toc__item", style: { '--toc-level': item.level }, title: item.title, onClick: () => handleTocItemClick(item.id), children: item.title }, item.id))) }))] }))] }));
+    return (jsxs("div", { ref: containerRef, className: `data-hub-ui-blocknote-editor-wrapper ${tocCollapsed ? 'is-toc-collapsed' : ''} ${className}`, children: [jsx(BlockNoteView, { editor: editor, formattingToolbar: false, onChange: handleChange, theme: "light", className: "data-hub-ui-blocknote-editor", children: jsx(FormattingToolbarController, { formattingToolbar: () => (jsxs(FormattingToolbar, { children: [getFormattingToolbarItems(), jsx(BasicTextStyleButton, { basicTextStyle: "code" })] })) }) }), showToc && (jsxs("aside", { className: `data-hub-ui-blocknote-toc ${tocCollapsed ? 'is-collapsed' : ''}`, children: [jsxs("button", { type: "button", className: "data-hub-ui-blocknote-toc__toggle", "aria-label": tocTitle, "aria-expanded": !tocCollapsed, onClick: () => setTocCollapsed((value) => !value), children: [jsx("span", { children: "\u76EE\u5F55" }), jsx("span", { className: "data-hub-ui-blocknote-toc__toggle-icon", children: tocCollapsed ? '‹' : '›' })] }), !tocCollapsed && (jsx("nav", { className: "data-hub-ui-blocknote-toc__list", "aria-label": "\u6587\u6863\u76EE\u5F55", children: tocItems.map((item) => (jsx("button", { type: "button", className: "data-hub-ui-blocknote-toc__item", style: { '--toc-level': item.level }, title: item.title, onClick: () => handleTocItemClick(item.id), children: item.title }, item.id))) }))] }))] }));
 });
 NotionEditor.displayName = 'NotionEditor';
 

package/es/components/notion-editor/index.scss.js

@@ -24,11 +24,10 @@ function useStyle() {
 }
 .data-hub-ui-blocknote-toc {
   position: sticky;
-  top: 10px;
+  top: 30px;
   display: flex;
   flex-direction: column;
   width: 240px;
-  max-height: 560px;
   overflow: hidden;
   color: #334155;
   font-size: 13px;
@@ -76,7 +75,7 @@ function useStyle() {
   flex: 1;
   gap: 2px;
   min-height: 0;
-  max-height: 516px;
+  max-height: 500px;
   margin-top: 8px;
   padding: 4px 0 4px 8px;
   overflow-y: auto;
@@ -105,25 +104,9 @@ function useStyle() {
   color: #2563eb;
   background: #eff6ff;
 }
-@media (max-width: 960px) {
-  .data-hub-ui-blocknote-editor-wrapper {
-    display: block;
-    padding: 16px 24px;
-  }
-  .data-hub-ui-blocknote-toc {
-    position: sticky;
-    top: 0;
-    right: auto;
-    width: 100%;
-    max-height: none;
-    margin-bottom: 12px;
-    background: #ffffff;
-  }
-  .data-hub-ui-blocknote-toc.is-collapsed {
-    width: 42px;
-  }
+@media (max-height: 640px) {
   .data-hub-ui-blocknote-toc__list {
-    max-height: 220px;
+    max-height: 400px;
   }
 }
 .data-hub-ui-blocknote-editor .bn-editor {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zjlab-fe/data-hub-ui",
-  "version": "0.32.0",
+  "version": "0.32.1",
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "dist/types/index.d.ts",