@difizen/libro-core 0.2.34 → 0.2.35

package/es/module.js

@@ -4,7 +4,7 @@ import { ManaModule } from '@difizen/mana-app';
 import { LibroCellModule } from "./cell/libro-cell-module.js";
 import { CollapseService, CollapseServiceFactory, CollapseServiceOption, DefaultCollapseService } from "./collapse-service.js";
 import { LibroCommandModule } from "./command/index.js";
-import { BetweenCellProvider, CellExecutionTimeProvider, CellInputBottonBlankProvider, CellOutputVisulizationProvider, LibroBetweenCellContent, LibroCellExecutionTime, LibroCellInputBottonBlank, LibroCellVisualization } from "./components/index.js";
+import { BetweenCellProvider, CellExecutionTimeProvider, CellInputBottonBlankProvider, CellOutputBottomBlankProvider, CellOutputVisulizationProvider, LibroBetweenCellContent, LibroCellExecutionTime, LibroCellInputBottonBlank, LibroCellOutputBottomBlank, LibroCellVisualization } from "./components/index.js";
 import { LibroContentModule } from "./content/index.js";
 import { LibroFormatterModule } from "./formatter/index.js";
 import { LibroContextKey } from "./libro-context-key.js";
@@ -62,6 +62,9 @@ export var LibroModule = ManaModule.create().register(BaseWorkspaceService, Virt
 }, {
   token: CellInputBottonBlankProvider,
   useValue: LibroCellInputBottonBlank
+}, {
+  token: CellOutputBottomBlankProvider,
+  useValue: LibroCellOutputBottomBlank
 }, {
   token: CellOutputVisulizationProvider,
   useValue: LibroCellVisualization

package/es/toolbar/hide-all-selector.js

@@ -59,11 +59,11 @@ export var HideAllSelectInner = function HideAllSelectInner() {
     onClick: handleChange,
     items: [{
       key: 'hideAllInputs',
-      label: l10n.t('隐藏全部Code'),
+      label: l10n.t('隐藏全部 Code'),
       disabled: !isCodeVisiable
     }, {
       key: 'hideAllOutputs',
-      label: l10n.t('隐藏全部Output'),
+      label: l10n.t('隐藏全部 Output'),
       disabled: !isOutputVisible
     }, {
       key: 'hideAll',
@@ -71,11 +71,11 @@ export var HideAllSelectInner = function HideAllSelectInner() {
       disabled: !isCodeVisiable || !isOutputVisible
     }, {
       key: 'showAllInputs',
-      label: l10n.t('显示全部Code'),
+      label: l10n.t('显示全部 Code'),
       disabled: !isCodeHidden
     }, {
       key: 'showAllOutputs',
-      label: l10n.t('显示全部Output'),
+      label: l10n.t('显示全部 Output'),
       disabled: !isOutputHidden
     }, {
       key: 'showAll',

package/es/toolbar/libro-toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"libro-toolbar.d.ts","sourceRoot":"","sources":["../../src/toolbar/libro-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAEL,YAAY,EAEZ,mBAAmB,EAEpB,MAAM,mBAAmB,CAAC;AAI3B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AA0BnD,qBACa,wBAAyB,YAAW,mBAAmB;IAC5C,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IAC9C,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IAEpE,oBAAoB,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI;CA2LtD"}
+{"version":3,"file":"libro-toolbar.d.ts","sourceRoot":"","sources":["../../src/toolbar/libro-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAEL,YAAY,EAEZ,mBAAmB,EAEpB,MAAM,mBAAmB,CAAC;AAI3B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AA0BnD,qBACa,wBAAyB,YAAW,mBAAmB;IAC5C,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IAC9C,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IAEpE,oBAAoB,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI;CA2LtD"}

package/es/toolbar/libro-toolbar.js

@@ -8,6 +8,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) { var desc = {}; Object.keys(descriptor).forEach(function (key) { desc[key] = descriptor[key]; }); desc.enumerable = !!desc.enumerable; desc.configurable = !!desc.configurable; if ('value' in desc || desc.initializer) { desc.writable = true; } desc = decorators.slice().reverse().reduce(function (desc, decorator) { return decorator(target, property, desc) || desc; }, desc); if (context && desc.initializer !== void 0) { desc.value = desc.initializer ? desc.initializer.call(context) : void 0; desc.initializer = undefined; } if (desc.initializer === void 0) { Object.defineProperty(target, property, desc); desc = null; } return desc; }
 function _initializerWarningHelper(descriptor, context) { throw new Error('Decorating class property failed. Please ensure that ' + 'transform-class-properties is enabled and runs after the decorators transform.'); }
+import { isMacintosh } from '@difizen/mana-app';
 import { inject, ModalService, singleton, ToolbarContribution, useObserve } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n';
 import { DocumentCommands, NotebookCommands } from "../command/index.js";
@@ -55,7 +56,7 @@ export var LibroToolbarContribution = (_dec = singleton({
             children: l10n.t('保存')
           }), /*#__PURE__*/_jsx("span", {
             className: "libro-tooltip-keybind",
-            children: "Cmd + S"
+            children: "".concat(isMacintosh ? 'Cmd' : 'Ctrl', " + S")
           })]
         }),
         group: ['group1'],
@@ -113,7 +114,7 @@ export var LibroToolbarContribution = (_dec = singleton({
             children: l10n.t('格式化代码')
           }), /*#__PURE__*/_jsx("span", {
             className: "libro-tooltip-keybind",
-            children: "Shift+Option+F"
+            children: "Shift+".concat(isMacintosh ? 'Option' : 'Alt', "+F")
           })]
         }),
         group: ['sidetoolbar1'],

package/es/toolbar/side-toolar-more-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-toolar-more-select.d.ts","sourceRoot":"","sources":["../../src/toolbar/side-toolar-more-select.tsx"],"names":[],"mappings":";AA2FA,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAkE5C,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAazC,CAAC"}
+{"version":3,"file":"side-toolar-more-select.d.ts","sourceRoot":"","sources":["../../src/toolbar/side-toolar-more-select.tsx"],"names":[],"mappings":";AAgGA,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAkE5C,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAazC,CAAC"}

package/es/toolbar/side-toolar-more-select.js

@@ -4,6 +4,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { isMacintosh } from '@difizen/mana-app';
 import { CommandRegistry, getOrigin, ToolbarInstance, useInject, useObserve } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n';
 import { Menu, MenuContext } from '@difizen/mana-react';
@@ -12,17 +13,17 @@ import { ExecutableCellModel, ExecutableCellView } from "../cell/index.js";
 import { NotebookCommands } from "../command/index.js";
 import { MoreOutlined } from "../material-from-designer.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 var codeItems = [{
   id: NotebookCommands['HideCellCode'].id,
   label: /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("span", {
       className: "libro-menu-item-label",
       children: l10n.t('隐藏 Code')
-    }), /*#__PURE__*/_jsx("span", {
+    }), /*#__PURE__*/_jsxs("span", {
       className: "libro-menu-item-keybind",
-      children: "Cmd + '"
+      children: ["".concat(isMacintosh ? 'Cmd' : 'Ctrl', " + "), "'"]
     })]
   })
 }, {
@@ -31,9 +32,9 @@ var codeItems = [{
     children: [/*#__PURE__*/_jsx("span", {
       className: "libro-menu-item-label",
       children: l10n.t('显示 Code')
-    }), /*#__PURE__*/_jsx("span", {
+    }), /*#__PURE__*/_jsxs("span", {
       className: "libro-menu-item-keybind",
-      children: "Cmd + '"
+      children: ["".concat(isMacintosh ? 'Cmd' : 'Ctrl', " + "), "'"]
     })]
   })
 }];
@@ -45,7 +46,7 @@ var outputItems = [{
       children: l10n.t('隐藏 Output')
     }), /*#__PURE__*/_jsx("span", {
       className: "libro-menu-item-keybind",
-      children: "Cmd + O"
+      children: "".concat(isMacintosh ? 'Cmd' : 'Ctrl', " + O")
     })]
   })
 }, {
@@ -56,7 +57,7 @@ var outputItems = [{
       children: l10n.t('显示 Output')
     }), /*#__PURE__*/_jsx("span", {
       className: "libro-menu-item-keybind",
-      children: "Cmd + O"
+      children: "".concat(isMacintosh ? 'Cmd' : 'Ctrl', " + O")
     })]
   })
 }];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@difizen/libro-core",
-  "version": "0.2.34",
+  "version": "0.2.35",
   "description": "",
   "keywords": [
     "libro",
@@ -34,10 +34,10 @@
   ],
   "dependencies": {
     "@ant-design/icons": "^5.1.0",
-    "@difizen/libro-code-editor": "^0.2.34",
-    "@difizen/libro-common": "^0.2.34",
-    "@difizen/libro-shared-model": "^0.2.34",
-    "@difizen/libro-virtualized": "^0.2.34",
+    "@difizen/libro-code-editor": "^0.2.35",
+    "@difizen/libro-common": "^0.2.35",
+    "@difizen/libro-shared-model": "^0.2.35",
+    "@difizen/libro-virtualized": "^0.2.35",
     "@difizen/mana-app": "latest",
     "@difizen/mana-l10n": "latest",
     "@difizen/mana-react": "latest",

package/src/add-cell/libro-add-cell-view.tsx

@@ -36,29 +36,20 @@ export const LibroAddCell: React.FC = () => {
   };
   return (
     <div className="libro-add-cell-container default-add-cell-container">
-      {instance
-        .getCellList()
-        .sort((a, b) => {
-          if (a.order < b.order) {
-            return -1;
-          } else {
-            return 1;
-          }
-        })
-        .map((item: AddType) => {
-          return (
-            <Button
-              className="libro-add-cell-container-item "
-              key={item.name}
-              onClick={() => {
-                addCell(item.type);
-              }}
-              icon={<PlusOutlined className="libro-add-cell-icon" />}
-            >
-              {item.name}
-            </Button>
-          );
-        })}
+      {instance.getCellList().map((item: AddType) => {
+        return (
+          <Button
+            className="libro-add-cell-container-item "
+            key={item.name}
+            onClick={() => {
+              addCell(item.type);
+            }}
+            icon={<PlusOutlined className="libro-add-cell-icon" />}
+          >
+            {item.name}
+          </Button>
+        );
+      })}
     </div>
   );
 };

package/src/cell/README.md

@@ -6,7 +6,7 @@
 
 - LibroCellView
   - LibroEditorCellView: 带有文本编辑器相关能力
-    - LibroExecutableCellView: 带有执行、输出能力
+    - LibroEditableExecutableCellView: 带有执行、输出能力
       - LibroCodeCellView
         - AIStudioLibroCodeCellView
       - LibroSqlCellView

package/src/cell/libro-cell-service.ts

@@ -57,6 +57,7 @@ export class LibroCellService implements CellService, ApplicationContribution {
         metas.push(item.cellMeta);
       }
     });
+    metas.sort((a, b) => a.order.localeCompare(b.order));
     this.cellsMeta = metas;
   }
 

package/src/cell/libro-edit-cell-view.tsx

@@ -1,10 +1,28 @@
-import type { IEditor } from '@difizen/libro-code-editor';
-import { prop } from '@difizen/mana-app';
+import type {
+  CodeEditorView,
+  CodeEditorViewOptions,
+  IEditor,
+} from '@difizen/libro-code-editor';
+import { CodeEditorManager } from '@difizen/libro-code-editor';
+import { CellUri } from '@difizen/libro-common';
+import {
+  Disposable,
+  DisposableCollection,
+  getOrigin,
+  inject,
+  prop,
+  ViewOption,
+  ViewRender,
+  watch,
+} from '@difizen/mana-app';
 import type { ReactNode } from 'react';
 
-import type { CellView, EditorStatus } from '../libro-protocol.js';
+import { LibroContextKey } from '../libro-context-key.js';
+import type { CellView, CellViewOptions } from '../libro-protocol.js';
+import { EditorStatus } from '../libro-protocol.js';
 import { isCellView } from '../libro-protocol.js';
 
+import { CellService } from './libro-cell-protocol.js';
 import { LibroCellView } from './libro-cell-view.js';
 
 export interface EditorCellView extends CellView {
@@ -39,13 +57,139 @@ export abstract class LibroEditorCellView
   extends LibroCellView
   implements EditorCellView
 {
+  protected toDisposeOnEditor = new DisposableCollection();
   @prop()
   editor: IEditor | undefined;
 
+  @inject(LibroContextKey) protected readonly libroContextKey: LibroContextKey;
+  @inject(CodeEditorManager) codeEditorManager: CodeEditorManager;
+
   @prop()
-  editorStatus: EditorStatus;
+  editorView?: CodeEditorView;
 
-  renderEditor: () => ReactNode;
+  constructor(
+    @inject(ViewOption) options: CellViewOptions,
+    @inject(CellService) cellService: CellService,
+  ) {
+    super(options, cellService);
+  }
+
+  protected getEditorOption(): CodeEditorViewOptions {
+    const option: CodeEditorViewOptions = {
+      uuid: CellUri.from(this.parent.model.id, this.model.id).toString(),
+      editorHostId: this.parent.id + this.id,
+      model: this.model,
+      config: {
+        readOnly: !this.parent.model.inputEditable,
+        editable: this.parent.model.inputEditable,
+      },
+    };
+    return option;
+  }
+
+  protected async afterEditorReady() {
+    this.focusEditor();
+    this.toDisposeOnEditor.push(
+      watch(this.parent.model, 'inputEditable', () => {
+        this.editorView?.editor?.setOption(
+          'readOnly',
+          getOrigin(!this.parent.model.inputEditable),
+        );
+      }),
+    );
+    this.toDisposeOnEditor.push(
+      this.editorView?.onModalChange((val) => (this.hasModal = val)) ?? Disposable.NONE,
+    );
+    this.toDisposeOnEditor.push(
+      this.editor?.onModelContentChanged?.((e) => {
+        this.parent.model.onCellContentChange({ cell: this, changes: e });
+      }) ?? Disposable.NONE,
+    );
+  }
+
+  async createEditor() {
+    const option = this.getEditorOption();
+
+    this.editorStatus = EditorStatus.LOADING;
+
+    // 防止虚拟滚动中编辑器被频繁创建
+    if (this.editorView) {
+      this.editorStatus = EditorStatus.LOADED;
+      return;
+    }
+
+    const editorView = await this.codeEditorManager.getOrCreateEditorView(option);
+
+    this.editorView = editorView;
+    this.editorStatus = EditorStatus.LOADED;
+
+    editorView.onEditorStatusChange((e) => {
+      if (e.status === 'ready') {
+        this.editor = this.editorView!.editor;
+        this.afterEditorReady();
+      } else if (e.status === 'disposed') {
+        this.toDisposeOnEditor.dispose();
+      }
+    });
+  }
+
+  @prop()
+  editorStatus: EditorStatus = EditorStatus.NOTLOADED;
+
+  renderEditor = () => {
+    if (this.editorView) {
+      return <ViewRender view={this.editorView} />;
+    }
+    return null;
+  };
+
+  override onViewMount() {
+    this.createEditor();
+    //选中cell时才focus
+    if (this.parent.model.active?.id === this.id) {
+      this.focus(!this.parent.model.commandMode);
+    }
+  }
+
+  override shouldEnterEditorMode(e: React.FocusEvent<HTMLElement>) {
+    return getOrigin(this.editorView)?.editor?.host?.contains(
+      e.target as HTMLElement,
+    ) && this.parent.model.commandMode
+      ? true
+      : false;
+  }
+
+  protected focusEditor() {
+    //选中cell、编辑模式、非只读时才focus
+    if (
+      this.editorView?.editor &&
+      this.editorView.editorStatus === 'ready' &&
+      this.parent.model.active?.id === this.id &&
+      !this.parent.model.commandMode &&
+      this.libroContextKey.commandModeEnabled === true && // 排除弹窗等情况
+      this.parent.model.inputEditable
+    ) {
+      this.editorView?.editor.setOption('styleActiveLine', true);
+      this.editorView?.editor.setOption('highlightActiveLineGutter', true);
+      this.editorView?.editor.focus();
+    }
+  }
+
+  override focus = (toEdit: boolean) => {
+    if (toEdit) {
+      this.focusEditor();
+    } else {
+      if (this.container?.current?.parentElement?.contains(document.activeElement)) {
+        return;
+      }
+      this.container?.current?.parentElement?.focus();
+    }
+  };
+
+  override blur = () => {
+    this.editorView?.editor?.setOption('styleActiveLine', false);
+    this.editorView?.editor?.setOption('highlightActiveLineGutter', false);
+  };
 
   get wrapperCls() {
     return '';

package/src/cell/libro-executable-cell-view.ts

@@ -38,7 +38,7 @@ export const ExecutableCellView = {
  * 带有编辑器、执行、output相关能力的cell view，例如python、sql
  * model 必须为 ExecutableCellModel
  */
-export abstract class LibroExecutableCellView
+export abstract class LibroEditableExecutableCellView
   extends LibroEditorCellView
   implements ExecutableCellView
 {
@@ -79,3 +79,8 @@ export abstract class LibroExecutableCellView
     );
   }
 }
+
+/**
+ * @deprecated use LibroEditableExecutableCellView instead.
+ */
+export const LibroExecutableCellView = LibroEditableExecutableCellView;

package/src/components/cell-protocol.ts

@@ -10,6 +10,10 @@ export type CellInputBottonBlankProvider = FC<{ cell: CellView }>;
 
 export const CellInputBottonBlankProvider = Symbol('CellInputBottonBlankProvider');
 
+export type CellOutputBottomBlankProvider = FC<{ cell: CellView }>;
+
+export const CellOutputBottomBlankProvider = Symbol('CellOutputBottomBlankProvider');
+
 export type CellOutputVisulizationProvider = FC<{ cell: CellView }>;
 
 export const CellOutputVisulizationProvider = Symbol('CellOutputVisulizationProvider');

package/src/components/dnd-cell-item-render.tsx

@@ -41,6 +41,7 @@ import {
 } from '../material-from-designer.js';
 import { hasErrorOutput } from '../output/index.js';
 
+import { CellOutputBottomBlankProvider } from './cell-protocol.js';
 import {
   CellExecutionTimeProvider,
   CellInputBottonBlankProvider,
@@ -50,10 +51,6 @@ import {
 const CellInputContent = memo(function CellInputContent(props: { cell: CellView }) {
   const { cell } = props;
   const observableCell = useObserve(cell);
-
-  const CellExecutionTime = useInject<CellExecutionTimeProvider>(
-    CellExecutionTimeProvider,
-  );
   const CellInputBottonBlank = useInject<CellInputBottonBlankProvider>(
     CellInputBottonBlankProvider,
   );
@@ -71,7 +68,6 @@ const CellInputContent = memo(function CellInputContent(props: { cell: CellView
   }
   return (
     <div className="libro-cell-input-content">
-      <CellExecutionTime cell={cell} />
       <ViewRender view={observableCell} />
       <CellInputBottonBlank cell={cell} />
     </div>
@@ -129,6 +125,12 @@ export const CellOutputContent: React.FC<{ cell: CellView }> = memo(
     const CellOutputVisulization = useInject<CellOutputVisulizationProvider>(
       CellOutputVisulizationProvider,
     );
+    const CellOutputBottomBlank = useInject<CellOutputBottomBlankProvider>(
+      CellOutputBottomBlankProvider,
+    );
+    const CellExecutionTime = useInject<CellExecutionTimeProvider>(
+      CellExecutionTimeProvider,
+    );
 
     if (!ExecutableCellView.is(cell) || !ExecutableCellView.is(observableCell)) {
       return null;
@@ -152,8 +154,10 @@ export const CellOutputContent: React.FC<{ cell: CellView }> = memo(
       <div
         className={`libro-cell-output-content ${hasOutputsScrolled ? 'scrolled' : ''} `}
       >
+        <CellExecutionTime cell={cell} />
         <CellOutputVisulization cell={cell} />
-        <ViewRender view={cell.outputArea} />
+        {observableCell.outputArea.length > 0 && <ViewRender view={cell.outputArea} />}
+        <CellOutputBottomBlank cell={cell} />
       </div>
     );
   },
@@ -171,6 +175,12 @@ export const LibroCellInputBottonBlank: CellInputBottonBlankProvider = forwardRe
   },
 );
 
+export const LibroCellOutputBottomBlank: CellOutputBottomBlankProvider = forwardRef(
+  function LibroCellOutputBottomBlank() {
+    return null;
+  },
+);
+
 export const LibroCellVisualization: CellOutputVisulizationProvider = forwardRef(
   function LibroCellVisualization() {
     return null;
@@ -225,14 +235,7 @@ const CellOutput: React.FC<{ cell: CellView }> = forwardRef(function CellOutput(
   //   };
   // }, [outputRef.current, cell, isExecutingRef]);
 
-  if (!ExecutableCellView.is(cell)) {
-    return null;
-  }
-  if (
-    !isCellView(cell) ||
-    !ExecutableCellModel.is(cell.model) ||
-    !cell.outputArea?.length
-  ) {
+  if (!ExecutableCellView.is(cell) || !ExecutableCellModel.is(cell.model)) {
     return null;
   }
   const handleCellOutputCollapser = () => {
@@ -259,7 +262,7 @@ const CellOutput: React.FC<{ cell: CellView }> = forwardRef(function CellOutput(
           ref={outputCollapserRef}
           onClick={handleCellOutputCollapser}
         />
-        {outputScrollBtnVisiable && (
+        {outputScrollBtnVisiable && cell.outputArea.length > 0 && (
           <div className="libro-cell-output-scroll">
             <Tooltip
               title={`${

package/src/components/dnd-component/index.less

@@ -6,3 +6,7 @@
   //   overflow: auto !important;
   // }
 }
+
+.libro-dnd-cells-container {
+  padding-top: 8px;
+}

package/src/index.less

@@ -40,6 +40,7 @@
   height: 100%;
   padding: 0;
   overflow-y: auto;
+  scrollbar-gutter: stable;
 
   .libro-dnd-list-container {
     height: 100%;
@@ -83,6 +84,7 @@
 
     .mana-toolbar {
       .mana-toolbar-item {
+        height: 24px;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -408,6 +410,7 @@
   height: 41px;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
+  border-top: 1px solid var(--mana-libro-code-border-color);
 
   svg {
     position: absolute;
@@ -667,6 +670,11 @@
   .mana-menu-item {
     button {
       display: block;
+      padding: 0 12px;
+
+      .mana-menu-item-icon {
+        display: none;
+      }
     }
   }
 
@@ -758,7 +766,7 @@
 }
 
 .libro-side-tooltip {
-  text-align: start;
+  text-align: center;
 }
 
 .libro-tooltip-text {

package/src/module.ts

@@ -14,10 +14,12 @@ import {
   BetweenCellProvider,
   CellExecutionTimeProvider,
   CellInputBottonBlankProvider,
+  CellOutputBottomBlankProvider,
   CellOutputVisulizationProvider,
   LibroBetweenCellContent,
   LibroCellExecutionTime,
   LibroCellInputBottonBlank,
+  LibroCellOutputBottomBlank,
   LibroCellVisualization,
 } from './components/index.js';
 import { LibroContentModule } from './content/index.js';
@@ -93,6 +95,10 @@ export const LibroModule = ManaModule.create()
       token: CellInputBottonBlankProvider,
       useValue: LibroCellInputBottonBlank,
     },
+    {
+      token: CellOutputBottomBlankProvider,
+      useValue: LibroCellOutputBottomBlank,
+    },
     {
       token: CellOutputVisulizationProvider,
       useValue: LibroCellVisualization,

package/src/toolbar/hide-all-selector.tsx

@@ -78,12 +78,12 @@ export const HideAllSelectInner: React.FC = () => {
       items={[
         {
           key: 'hideAllInputs',
-          label: l10n.t('隐藏全部Code'),
+          label: l10n.t('隐藏全部 Code'),
           disabled: !isCodeVisiable,
         },
         {
           key: 'hideAllOutputs',
-          label: l10n.t('隐藏全部Output'),
+          label: l10n.t('隐藏全部 Output'),
           disabled: !isOutputVisible,
         },
         {
@@ -93,12 +93,12 @@ export const HideAllSelectInner: React.FC = () => {
         },
         {
           key: 'showAllInputs',
-          label: l10n.t('显示全部Code'),
+          label: l10n.t('显示全部 Code'),
           disabled: !isCodeHidden,
         },
         {
           key: 'showAllOutputs',
-          label: l10n.t('显示全部Output'),
+          label: l10n.t('显示全部 Output'),
           disabled: !isOutputHidden,
         },
         {

package/src/toolbar/libro-toolbar.tsx

@@ -1,4 +1,5 @@
 import type { ToolbarRegistry } from '@difizen/mana-app';
+import { isMacintosh } from '@difizen/mana-app';
 import {
   inject,
   ModalService,
@@ -48,7 +49,7 @@ export class LibroToolbarContribution implements ToolbarContribution {
       tooltip: (
         <div className="libro-tooltip">
           <span className="libro-tooltip-text">{l10n.t('保存')}</span>
-          <span className="libro-tooltip-keybind">Cmd + S</span>
+          <span className="libro-tooltip-keybind">{`${isMacintosh ? 'Cmd' : 'Ctrl'} + S`}</span>
         </div>
       ),
 
@@ -100,7 +101,7 @@ export class LibroToolbarContribution implements ToolbarContribution {
       tooltip: (
         <div className="libro-side-tooltip">
           <span className="libro-tooltip-text">{l10n.t('格式化代码')}</span>
-          <span className="libro-tooltip-keybind">Shift+Option+F</span>
+          <span className="libro-tooltip-keybind">{`Shift+${isMacintosh ? 'Option' : 'Alt'}+F`}</span>
         </div>
       ),