@difizen/libro-core 0.2.35-next.0 → 0.2.36

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

@@ -9,6 +9,7 @@ import {
   ViewInstance,
   ViewRender,
 } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
 import { Tooltip } from 'antd';
 import classnames from 'classnames';
 import type { FC } from 'react';
@@ -41,6 +42,7 @@ import {
 } from '../material-from-designer.js';
 import { hasErrorOutput } from '../output/index.js';
 
+import { CellOutputBottomBlankProvider } from './cell-protocol.js';
 import {
   CellExecutionTimeProvider,
   CellInputBottonBlankProvider,
@@ -50,10 +52,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 +69,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 +126,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 +155,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 +176,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 +236,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,13 +263,13 @@ 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={`${
                 cell.model.hasOutputsScrolled
-                  ? '取消固定 Output 高度'
-                  : '固定 Output 高度'
+                  ? l10n.t('取消固定 Output 高度')
+                  : l10n.t('固定 Output 高度')
               }`}
             >
               <div

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;
+      }
     }
   }
 
@@ -716,7 +724,7 @@
 
 .libro-side-toolbar-run-select-menu {
   .@{ant-prefix}-popover-content {
-    width: 262px;
+    width: 320px;
     height: 105px;
   }
 }
@@ -758,7 +766,7 @@
 }
 
 .libro-side-tooltip {
-  text-align: start;
+  text-align: center;
 }
 
 .libro-tooltip-text {

package/src/libro-model.ts

@@ -493,7 +493,7 @@ export class LibroModel implements NotebookModel, DndListModel {
       getOrigin(this.sharedModel).deleteCell(position);
       getOrigin(this.sharedModel).insertCells(position, cellData);
     });
-    //切分cell操作结束后进入编辑态
+    //切分 Cell操作结束后进入编辑态
     this.enterEditMode();
   };
 

package/src/libro-setting.ts

@@ -89,8 +89,8 @@ export const RightContentFixed: ConfigurationNode<boolean> = {
 
 export const OutputScrollBtnVisiable: ConfigurationNode<boolean> = {
   id: 'libro.cell.output.scroll.button.visiable',
-  description: l10n.t('cell输出区域高度固定按钮是否显示'),
-  title: l10n.t('cell输出区域高度固定按钮是否显示'),
+  description: l10n.t('Cell 输出区域高度固定按钮是否显示'),
+  title: l10n.t('Cell 输出区域高度固定按钮是否显示'),
   type: 'checkbox',
   defaultValue: true,
   schema: {

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/settings/settings-modal.tsx

@@ -1,6 +1,7 @@
 import type { ModalItem, ModalItemProps } from '@difizen/mana-app';
 import { ConfigurationRegistry } from '@difizen/mana-app';
 import { useInject, ViewManager, ViewRender } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
 import { Modal } from 'antd';
 import { useEffect, useState } from 'react';
 
@@ -33,7 +34,7 @@ export function SettingsModalComponent({ visible, close }: ModalItemProps<void>)
 
   return (
     <Modal
-      title="设置"
+      title={l10n.t('设置')}
       open={visible}
       onOk={() => close()}
       onCancel={() => close()}

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,
@@ -45,10 +46,10 @@ export class LibroToolbarContribution implements ToolbarContribution {
       id: DocumentCommands['Save'].id,
       command: DocumentCommands['Save'].id,
       icon: SaveIcon,
-      tooltip: (
+      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>
       ),
 
@@ -58,7 +59,7 @@ export class LibroToolbarContribution implements ToolbarContribution {
     registry.registerItem({
       id: NotebookCommands['Interrupt'].id,
       command: NotebookCommands['Interrupt'].id,
-      tooltip: (
+      tooltip: () => (
         <div className="libro-tooltip">
           <span className="libro-tooltip-text">{l10n.t('中断')}</span>
         </div>
@@ -71,7 +72,7 @@ export class LibroToolbarContribution implements ToolbarContribution {
     registry.registerItem({
       id: NotebookCommands['CloseAndShutdown'].id,
       command: NotebookCommands['CloseAndShutdown'].id,
-      tooltip: (
+      tooltip: () => (
         <div className="libro-tooltip">
           <span className="libro-tooltip-text">{l10n.t('关闭内核')}</span>
         </div>
@@ -84,7 +85,7 @@ export class LibroToolbarContribution implements ToolbarContribution {
     registry.registerItem({
       id: NotebookCommands['RestartClearOutput'].id,
       command: NotebookCommands['RestartClearOutput'].id,
-      tooltip: (
+      tooltip: () => (
         <div className="libro-tooltip">
           <span className="libro-tooltip-text">{l10n.t('重启并清空输出')}</span>
         </div>
@@ -97,10 +98,10 @@ export class LibroToolbarContribution implements ToolbarContribution {
     registry.registerItem({
       id: DocumentCommands['FormatCell'].id,
       command: DocumentCommands['FormatCell'].id,
-      tooltip: (
+      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>
       ),
 
@@ -110,7 +111,7 @@ export class LibroToolbarContribution implements ToolbarContribution {
     registry.registerItem({
       id: NotebookCommands['MoveCellUp'].id,
       command: NotebookCommands['MoveCellUp'].id,
-      tooltip: (
+      tooltip: () => (
         <div className="libro-side-tooltip">
           <span className="libro-tooltip-text">{l10n.t('上移')}</span>
           <span className="libro-tooltip-keybind">Up</span>
@@ -123,7 +124,7 @@ export class LibroToolbarContribution implements ToolbarContribution {
     registry.registerItem({
       id: NotebookCommands['MoveCellDown'].id,
       command: NotebookCommands['MoveCellDown'].id,
-      tooltip: (
+      tooltip: () => (
         <div className="libro-side-tooltip">
           <span className="libro-tooltip-text">{l10n.t('下移')}</span>
           <span className="libro-tooltip-keybind">Down</span>
@@ -136,7 +137,7 @@ export class LibroToolbarContribution implements ToolbarContribution {
     registry.registerItem({
       id: NotebookCommands['InsertCellBelow'].id,
       command: NotebookCommands['InsertCellBelow'].id,
-      tooltip: (
+      tooltip: () => (
         <div className="libro-side-tooltip">
           <span className="libro-tooltip-text">{l10n.t('增加')}</span>
           <span className="libro-tooltip-keybind">B</span>
@@ -149,7 +150,7 @@ export class LibroToolbarContribution implements ToolbarContribution {
     registry.registerItem({
       id: NotebookCommands['DeleteCell'].id,
       command: NotebookCommands['DeleteCell'].id,
-      tooltip: (
+      tooltip: () => (
         <div className="libro-side-tooltip">
           <span className="libro-tooltip-text">{l10n.t('删除')}</span>
           <span className="libro-tooltip-keybind">D D</span>
@@ -162,7 +163,7 @@ export class LibroToolbarContribution implements ToolbarContribution {
     registry.registerItem({
       id: NotebookCommands['UndoCellAction'].id,
       command: NotebookCommands['UndoCellAction'].id,
-      tooltip: (
+      tooltip: () => (
         <div className="libro-tooltip">
           <span className="libro-tooltip-text">{l10n.t('撤销')}</span>
           <span className="libro-tooltip-keybind">Z</span>
@@ -175,7 +176,7 @@ export class LibroToolbarContribution implements ToolbarContribution {
     registry.registerItem({
       id: NotebookCommands['RedoCellAction'].id,
       command: NotebookCommands['RedoCellAction'].id,
-      tooltip: (
+      tooltip: () => (
         <div className="libro-tooltip">
           <span className="libro-tooltip-text">{l10n.t('重做')}</span>
           <span className="libro-tooltip-keybind">Shift + Z</span>
@@ -203,7 +204,7 @@ export class LibroToolbarContribution implements ToolbarContribution {
     registry.registerItem({
       id: NotebookCommands['ClearAllCellOutput'].id,
       command: NotebookCommands['ClearAllCellOutput'].id,
-      tooltip: (
+      tooltip: () => (
         <div className="libro-tooltip">
           <span className="libro-tooltip-text">{l10n.t('清空输出')}</span>
         </div>

package/src/toolbar/side-toolar-more-select.tsx

@@ -1,4 +1,5 @@
 import type { Toolbar } from '@difizen/mana-app';
+import { isMacintosh } from '@difizen/mana-app';
 import {
   CommandRegistry,
   getOrigin,
@@ -17,84 +18,87 @@ import { MoreOutlined } from '../material-from-designer.js';
 
 import type { LibroToolbarArags } from './libro-toolbar-protocol.js';
 
-const codeItems: LibroSideToolbarMenuItemType[] = [
-  {
-    id: NotebookCommands['HideCellCode'].id,
-    label: (
-      <>
-        <span className="libro-menu-item-label">{l10n.t('隐藏 Code')}</span>
-        <span className="libro-menu-item-keybind">Cmd + &apos;</span>
-      </>
-    ),
-  },
-  {
-    id: NotebookCommands['ShowCellCode'].id,
-    label: (
-      <>
-        <span className="libro-menu-item-label">{l10n.t('显示 Code')}</span>
-        <span className="libro-menu-item-keybind">Cmd + &apos;</span>
-      </>
-    ),
-  },
-];
-
-const outputItems: LibroSideToolbarMenuItemType[] = [
-  {
-    id: NotebookCommands['HideCellOutputs'].id,
-    label: (
-      <>
-        <span className="libro-menu-item-label">{l10n.t('隐藏 Output')}</span>
-        <span className="libro-menu-item-keybind">Cmd + O</span>
-      </>
-    ),
-  },
-  {
-    id: NotebookCommands['ShowCellOutputs'].id,
-    label: (
-      <>
-        <span className="libro-menu-item-label">{l10n.t('显示 Output')}</span>
-        <span className="libro-menu-item-keybind">Cmd + O</span>
-      </>
-    ),
-  },
-];
-
-const moreItems: LibroSideToolbarMenuItemType[] = [
-  {
-    id: NotebookCommands['CopyCell'].id,
-    label: (
-      <>
-        <span className="libro-menu-item-label">{l10n.t('复制')}</span>
-        <span className="libro-menu-item-keybind">C</span>
-      </>
-    ),
-  },
-  {
-    id: NotebookCommands['CutCell'].id,
-    label: (
-      <>
-        <span className="libro-menu-item-label">{l10n.t('剪切')}</span>
-        <span className="libro-menu-item-keybind">X</span>
-      </>
-    ),
-  },
-  {
-    id: NotebookCommands['PasteCellBelow'].id,
-    label: (
-      <>
-        <span className="libro-menu-item-label">{l10n.t('粘贴')}</span>
-        <span className="libro-menu-item-keybind">V</span>
-      </>
-    ),
-  },
-];
-
 export const LibroSideToolbarMoreMenu: React.FC = () => {
   const command = useInject(CommandRegistry);
   const toolbar = useInject<Toolbar>(ToolbarInstance);
   const data = toolbar.currentArgs as LibroToolbarArags;
   const args = getOrigin(data) || [];
   const cell = useObserve(args[0]);
+  const codeItems: LibroSideToolbarMenuItemType[] = [
+    {
+      id: NotebookCommands['HideCellCode'].id,
+      label: (
+        <>
+          <span className="libro-menu-item-label">{l10n.t('隐藏 Code')}</span>
+          <span className="libro-menu-item-keybind">
+            {`${isMacintosh ? 'Cmd' : 'Ctrl'} + `}&apos;
+          </span>
+        </>
+      ),
+    },
+    {
+      id: NotebookCommands['ShowCellCode'].id,
+      label: (
+        <>
+          <span className="libro-menu-item-label">{l10n.t('显示 Code')}</span>
+          <span className="libro-menu-item-keybind">
+            {`${isMacintosh ? 'Cmd' : 'Ctrl'} + `}&apos;
+          </span>
+        </>
+      ),
+    },
+  ];
+
+  const outputItems: LibroSideToolbarMenuItemType[] = [
+    {
+      id: NotebookCommands['HideCellOutputs'].id,
+      label: (
+        <>
+          <span className="libro-menu-item-label">{l10n.t('隐藏 Output')}</span>
+          <span className="libro-menu-item-keybind">{`${isMacintosh ? 'Cmd' : 'Ctrl'} + O`}</span>
+        </>
+      ),
+    },
+    {
+      id: NotebookCommands['ShowCellOutputs'].id,
+      label: (
+        <>
+          <span className="libro-menu-item-label">{l10n.t('显示 Output')}</span>
+          <span className="libro-menu-item-keybind">{`${isMacintosh ? 'Cmd' : 'Ctrl'} + O`}</span>
+        </>
+      ),
+    },
+  ];
+
+  const moreItems: LibroSideToolbarMenuItemType[] = [
+    {
+      id: NotebookCommands['CopyCell'].id,
+      label: (
+        <>
+          <span className="libro-menu-item-label">{l10n.t('复制')}</span>
+          <span className="libro-menu-item-keybind">C</span>
+        </>
+      ),
+    },
+    {
+      id: NotebookCommands['CutCell'].id,
+      label: (
+        <>
+          <span className="libro-menu-item-label">{l10n.t('剪切')}</span>
+          <span className="libro-menu-item-keybind">X</span>
+        </>
+      ),
+    },
+    {
+      id: NotebookCommands['PasteCellBelow'].id,
+      label: (
+        <>
+          <span className="libro-menu-item-label">{l10n.t('粘贴')}</span>
+          <span className="libro-menu-item-keybind">V</span>
+        </>
+      ),
+    },
+  ];
   if (!cell) {
     return null;
   }