@difizen/libro-core 0.0.2-alpha.0

package/src/toolbar/libro-toolbar.tsx

@@ -0,0 +1,192 @@
+import type { ToolbarRegistry } from '@difizen/mana-app';
+import {
+  inject,
+  ModalService,
+  singleton,
+  ToolbarContribution,
+} from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+
+import { DocumentCommands, NotebookCommands } from '../command/index.js';
+
+import { ToolItemSelect } from './change-cell-to-selector.js';
+import { HideAllSelect } from './hide-all-selector.js';
+// import { RunSelect } from './run-selector';
+import { SaveIcon } from './save-icon.js';
+import { SideToolbarMoreSelect } from './side-toolar-more-select.js';
+// import { SideToolbarRunSelect } from './side-toolbar-run-select';
+@singleton({ contrib: [ToolbarContribution] })
+export class LibroToolbarContribution implements ToolbarContribution {
+  protected readonly modalService: ModalService;
+
+  constructor(@inject(ModalService) modalService: ModalService) {
+    this.modalService = modalService;
+  }
+
+  registerToolbarItems(registry: ToolbarRegistry): void {
+    registry.registerItem({
+      id: DocumentCommands['Save'].id,
+      command: DocumentCommands['Save'].id,
+      icon: SaveIcon,
+      tooltip: (
+        <div className="libro-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('保存')}</span>
+          <span className="libro-tooltip-keybind">Cmd + S</span>
+        </div>
+      ),
+
+      group: ['group1'],
+      order: '1',
+    });
+    registry.registerItem({
+      id: NotebookCommands['Interrupt'].id,
+      command: NotebookCommands['Interrupt'].id,
+      tooltip: (
+        <div className="libro-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('中断')}</span>
+        </div>
+      ),
+
+      showLabelInline: true,
+      group: ['group2'],
+      order: 'b-all',
+    });
+    registry.registerItem({
+      id: NotebookCommands['CloseAndShutdown'].id,
+      command: NotebookCommands['CloseAndShutdown'].id,
+      tooltip: (
+        <div className="libro-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('关闭内核')}</span>
+        </div>
+      ),
+
+      showLabelInline: true,
+      group: ['group2'],
+      order: 'b-all',
+    });
+    registry.registerItem({
+      id: NotebookCommands['RestartClearOutput'].id,
+      command: NotebookCommands['RestartClearOutput'].id,
+      tooltip: (
+        <div className="libro-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('重启并清空输出')}</span>
+        </div>
+      ),
+
+      showLabelInline: true,
+      group: ['group2'],
+      order: 'c-all',
+    });
+    registry.registerItem({
+      id: NotebookCommands['MoveCellUp'].id,
+      command: NotebookCommands['MoveCellUp'].id,
+      tooltip: (
+        <div className="libro-side-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('上移')}</span>
+          <span className="libro-tooltip-keybind">Up</span>
+        </div>
+      ),
+
+      group: ['sidetoolbar1'],
+      order: 'e',
+    });
+    registry.registerItem({
+      id: NotebookCommands['MoveCellDown'].id,
+      command: NotebookCommands['MoveCellDown'].id,
+      tooltip: (
+        <div className="libro-side-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('下移')}</span>
+          <span className="libro-tooltip-keybind">Down</span>
+        </div>
+      ),
+
+      group: ['sidetoolbar1'],
+      order: 'f',
+    });
+    registry.registerItem({
+      id: NotebookCommands['InsertCellBelow'].id,
+      command: NotebookCommands['InsertCellBelow'].id,
+      tooltip: (
+        <div className="libro-side-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('增加')}</span>
+          <span className="libro-tooltip-keybind">B</span>
+        </div>
+      ),
+
+      group: ['sidetoolbar2'],
+      order: 'g1',
+    });
+    registry.registerItem({
+      id: NotebookCommands['DeleteCell'].id,
+      command: NotebookCommands['DeleteCell'].id,
+      tooltip: (
+        <div className="libro-side-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('删除')}</span>
+          <span className="libro-tooltip-keybind">D D</span>
+        </div>
+      ),
+
+      group: ['sidetoolbar2'],
+      order: 'g2',
+    });
+    registry.registerItem({
+      id: NotebookCommands['UndoCellAction'].id,
+      command: NotebookCommands['UndoCellAction'].id,
+      tooltip: (
+        <div className="libro-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('撤销')}</span>
+          <span className="libro-tooltip-keybind">Z</span>
+        </div>
+      ),
+
+      group: ['group3'],
+      order: 'h1',
+    });
+    registry.registerItem({
+      id: NotebookCommands['RedoCellAction'].id,
+      command: NotebookCommands['RedoCellAction'].id,
+      tooltip: (
+        <div className="libro-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('重做')}</span>
+          <span className="libro-tooltip-keybind">Shift + Z</span>
+        </div>
+      ),
+
+      group: ['group3'],
+      order: 'h2',
+    });
+    registry.registerItem({
+      id: NotebookCommands['HideAllCell'].id,
+      command: NotebookCommands['HideAllCell'].id,
+      icon: HideAllSelect,
+      group: ['group3'],
+      order: 'i',
+    });
+    registry.registerItem({
+      id: NotebookCommands['ClearAllCellOutput'].id,
+      command: NotebookCommands['ClearAllCellOutput'].id,
+      tooltip: (
+        <div className="libro-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('清空输出')}</span>
+        </div>
+      ),
+
+      group: ['group3'],
+      order: 'j',
+    });
+    registry.registerItem({
+      id: NotebookCommands['ChangeCellTo'].id,
+      icon: ToolItemSelect,
+      command: NotebookCommands['ChangeCellTo'].id,
+      group: ['group4'],
+      order: 'k',
+    });
+    registry.registerItem({
+      id: NotebookCommands['More'].id,
+      icon: SideToolbarMoreSelect,
+      command: NotebookCommands['More'].id,
+      group: ['sidetoolbar3'],
+      order: 'm',
+    });
+  }
+}

package/src/toolbar/module.ts

@@ -0,0 +1,11 @@
+import { ManaModule } from '@difizen/mana-app';
+
+import { LibroToolbarContribution } from './libro-toolbar.js';
+import { RestartClearOutputsContribution } from './restart-clear-outputs-contribution.js';
+import { ShutdownContribution } from './shutdown-contribution.js';
+
+export const LibroToolbarModule = ManaModule.create().register(
+  LibroToolbarContribution,
+  RestartClearOutputsContribution,
+  ShutdownContribution,
+);

package/src/toolbar/restart-clear-outputs-contribution.tsx

@@ -0,0 +1,10 @@
+import { ModalContribution, singleton } from '@difizen/mana-app';
+
+import { RestartClearOutputModal } from './restart-clear-outputs-modal.js';
+
+@singleton({ contrib: ModalContribution })
+export class RestartClearOutputsContribution implements ModalContribution {
+  registerModal() {
+    return RestartClearOutputModal;
+  }
+}

package/src/toolbar/restart-clear-outputs-modal.tsx

@@ -0,0 +1,37 @@
+import type { ModalItemProps, ModalItem } from '@difizen/mana-app';
+import { Modal } from 'antd';
+import { useCallback } from 'react';
+
+import { NotebookCommands } from '../command/index.js';
+import type { LibroView } from '../libro-view.js';
+
+export const RestartClearOutputModalComponent: React.FC<ModalItemProps<LibroView>> = ({
+  visible,
+  close,
+  data,
+}: ModalItemProps<LibroView>) => {
+  const handleRestart = useCallback(() => {
+    data?.restartClearOutput();
+    close();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
+  return (
+    <Modal
+      title="Restart Kernel?"
+      open={visible}
+      onOk={handleRestart}
+      onCancel={() => close()}
+      width={'400px'}
+      centered={true}
+      className="libro-restart-kernel-modal"
+    >
+      Do you want to restart the current kernel? All variables will be lost.
+    </Modal>
+  );
+};
+
+export const RestartClearOutputModal: ModalItem<LibroView> = {
+  id: NotebookCommands['RestartClearOutput'].id,
+  component: RestartClearOutputModalComponent,
+};

package/src/toolbar/save-icon.tsx

@@ -0,0 +1,47 @@
+import {
+  SaveOutlined,
+  CheckOutlined,
+  CloseOutlined,
+  LoadingOutlined,
+} from '@ant-design/icons';
+import { useInject, ViewInstance } from '@difizen/mana-app';
+import type { Disposable } from '@difizen/mana-app';
+import type { FC } from 'react';
+import { useEffect, useCallback, useState } from 'react';
+
+import type { LibroView } from '../libro-view.js';
+
+export const SaveIcon: FC = () => {
+  const [saved, setSaved] = useState<boolean | undefined>(undefined);
+  const libroView = useInject<LibroView>(ViewInstance);
+
+  const handleSave = useCallback((result: boolean) => {
+    setSaved(result);
+    setTimeout(() => {
+      setSaved(undefined);
+    }, 500);
+  }, []);
+
+  useEffect(() => {
+    let toDispose: Disposable;
+    if (libroView) {
+      toDispose = libroView.onSave((result) => {
+        handleSave(result);
+      });
+    }
+    return () => {
+      toDispose?.dispose();
+    };
+  }, [handleSave, libroView]);
+  if (saved !== undefined) {
+    if (saved) {
+      return <CheckOutlined style={{ color: 'green' }} />;
+    } else {
+      return <CloseOutlined style={{ color: 'red' }} />;
+    }
+  }
+  if (libroView?.saving) {
+    return <LoadingOutlined />;
+  }
+  return <SaveOutlined />;
+};

package/src/toolbar/shutdown-contribution.tsx

@@ -0,0 +1,10 @@
+import { ModalContribution, singleton } from '@difizen/mana-app';
+
+import { ShutdownModal } from './shutdown-modal.js';
+
+@singleton({ contrib: ModalContribution })
+export class ShutdownContribution implements ModalContribution {
+  registerModal() {
+    return ShutdownModal;
+  }
+}

package/src/toolbar/shutdown-modal.tsx

@@ -0,0 +1,37 @@
+import type { ModalItemProps, ModalItem } from '@difizen/mana-app';
+import { Modal } from 'antd';
+import { useCallback } from 'react';
+
+import { NotebookCommands } from '../command/index.js';
+import type { LibroView } from '../libro-view.js';
+
+export const ShutdownModalComponent: React.FC<ModalItemProps<LibroView>> = ({
+  visible,
+  close,
+  data,
+}: ModalItemProps<LibroView>) => {
+  const handleShutdown = useCallback(() => {
+    data?.closeAndShutdown();
+    close();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
+  return (
+    <Modal
+      title="Shutdown Kernel?"
+      open={visible}
+      onOk={handleShutdown}
+      onCancel={() => close()}
+      width={'400px'}
+      centered={true}
+      className="libro-shut-down-kernel-modal"
+    >
+      Do you want to shutdown the current kernel?.
+    </Modal>
+  );
+};
+
+export const ShutdownModal: ModalItem<LibroView> = {
+  id: NotebookCommands['CloseAndShutdown'].id,
+  component: ShutdownModalComponent,
+};

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

@@ -0,0 +1,172 @@
+import type { Toolbar } from '@difizen/mana-app';
+import {
+  CommandRegistry,
+  getOrigin,
+  ToolbarInstance,
+  useInject,
+} from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+import { Menu, MenuContext } from '@difizen/mana-react';
+import { Popover } from 'antd';
+
+import { ExecutableCellModel, ExecutableCellView } from '../cell/index.js';
+import { NotebookCommands } from '../command/index.js';
+import type { LibroSideToolbarMenuItemType } from '../components/libro-side-toolbar-menu.js';
+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 = args[0];
+  if (!cell) {
+    return null;
+  }
+  const hasOutput =
+    ExecutableCellView.is(cell) && cell.outputArea?.length && cell.outputArea.length > 0
+      ? true
+      : false;
+  const nodes: React.ReactNode[] = [];
+  const baseCls = 'mana-menu';
+  const contextValue: MenuContext.Context = {
+    prefixCls: baseCls,
+  };
+  const codeMenuItem = cell.hasInputHidden ? 1 : 0;
+  nodes.push(
+    <Menu.Item
+      key={codeItems[codeMenuItem].id}
+      onClick={() => {
+        command.executeCommand(codeItems[codeMenuItem].id, ...args);
+        cell.hasInputHidden = !cell.hasInputHidden;
+      }}
+    >
+      {codeItems[codeMenuItem].label}
+    </Menu.Item>,
+  );
+  const outputMenuItem =
+    ExecutableCellModel.is(cell.model) && cell.model.hasOutputHidden ? 1 : 0;
+  nodes.push(
+    <Menu.Item
+      key={outputItems[outputMenuItem].id}
+      onClick={() => {
+        if (hasOutput) {
+          command.executeCommand(outputItems[outputMenuItem].id, ...args);
+          if (ExecutableCellModel.is(cell.model)) {
+            cell.model.hasOutputHidden = !cell.model.hasOutputHidden;
+          }
+        }
+      }}
+      disabled={!hasOutput}
+    >
+      {outputItems[outputMenuItem].label}
+    </Menu.Item>,
+  );
+  nodes.push(<Menu.Divider key="libro-menu-divider" />);
+  moreItems.forEach((item) => {
+    nodes.push(
+      <Menu.Item
+        key={item.id}
+        onClick={() => {
+          command.executeCommand(item.id, ...args);
+        }}
+      >
+        {item.label}
+      </Menu.Item>,
+    );
+  });
+  return (
+    <div className="libro-side-toolbar-menu">
+      <MenuContext.Provider value={contextValue}>{nodes} </MenuContext.Provider>
+    </div>
+  );
+};
+
+export const SideToolbarMoreSelect: React.FC = () => {
+  return (
+    <Popover
+      placement="leftTop"
+      content={<LibroSideToolbarMoreMenu />}
+      trigger="click"
+      overlayClassName="libro-popover-side-toolbar-menu libro-side-toolbar-more-select-menu"
+    >
+      <span>
+        <MoreOutlined />
+      </span>
+    </Popover>
+  );
+};

package/src/typings/index.d.ts

@@ -0,0 +1 @@
+declare module '*.less';