@difizen/libro-core 0.2.0 → 0.2.2

package/src/index.less

@@ -56,13 +56,15 @@
 .libro-view-top {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   width: 100%;
   height: 44px;
   // background-color: var(--mana-color-bg-elevated);
   border-bottom: 1px solid var(--mana-libro-toptoolbar-border-color);
 
   .libro-header-left {
-    width: 265px;
+    width: 240px;
+    flex-shrink: 0;
 
     .mana-toolbar {
       justify-content: left;
@@ -71,13 +73,12 @@
 
   .libro-header-center {
     .mana-toolbar {
-      justify-content: center;
+      justify-content: flex-start;
     }
   }
 
   .libro-header-center,
   .libro-header-right {
-    flex: 1;
     overflow: hidden;
 
     .mana-toolbar {
@@ -122,6 +123,7 @@
 
   .libro-header-right {
     color: unset;
+    flex: 0 0 auto;
   }
 
   .libro-keybind-instructions-icon {

package/src/index.tsx

@@ -19,6 +19,7 @@ export * from './collapse-service.js';
 export * from './formatter/index.js';
 export * from './libro-setting.js';
 export * from './settings/index.js';
-
 export * from './virtualized-manager.js';
 export * from './virtualized-manager-helper.js';
+export * from './libro-workspace-service.js';
+export * from './libro-context-key.js';

package/src/libro-context-key.ts

@@ -7,7 +7,7 @@ import { LibroContextKeys } from './libro-protocol.js';
 import { LibroService } from './libro-service.js';
 
 @singleton()
-export class LirboContextKey {
+export class LibroContextKey {
   protected readonly contextKeyService: ContextKeyService;
   protected readonly libroService: LibroService;
   protected toDisposeOnActiveChanged?: Disposable;
@@ -78,3 +78,7 @@ export class LirboContextKey {
     }
   };
 }
+/**
+ * @deprecated use LibroContextKey instead.
+ */
+export const LirboContextKey = LibroContextKey;

package/src/libro-model.ts

@@ -78,6 +78,8 @@ export class LibroModel implements NotebookModel, DndListModel {
 
   id: string;
 
+  version = 0;
+
   /**
    * The shared notebook model.
    */
@@ -92,9 +94,28 @@ export class LibroModel implements NotebookModel, DndListModel {
   lastClipboardInteraction?: string;
 
   clipboard?: CellView | CellView[];
+  @prop()
+  inputEditable = true;
+
+  @prop()
+  outputEditable = true;
+
+  @prop()
+  cellsEditable = true;
+
+  get executable() {
+    return this.outputEditable && this.runnable;
+  }
+
+  set executable(value: boolean) {
+    this.runnable = value;
+  }
 
   @prop()
-  quickEditMode = false;
+  savable = true;
+
+  @prop()
+  runnable = true;
 
   @prop()
   commandMode = true;
@@ -108,9 +129,6 @@ export class LibroModel implements NotebookModel, DndListModel {
   @prop()
   dirty = false;
 
-  @prop()
-  readOnly = false;
-
   @prop()
   cells: CellView[] = [];
 
@@ -234,7 +252,7 @@ export class LibroModel implements NotebookModel, DndListModel {
         currpos += delta.retain;
       }
     });
-    if (this.readOnly && !this.isInitialized) {
+    if (!this.inputEditable && !this.isInitialized) {
       this.selectCell(undefined);
       return;
     }
@@ -298,6 +316,7 @@ export class LibroModel implements NotebookModel, DndListModel {
   }
 
   onChange() {
+    this.version++;
     this.dirty = true;
     this.onChangedEmitter.fire(true);
   }

package/src/libro-protocol.ts

@@ -71,6 +71,7 @@ export interface ICellContentChange {
 }
 export interface BaseNotebookModel {
   id: string;
+  version: number;
   /**
    * The dirty state of the model.
    * #### Notes
@@ -84,16 +85,26 @@ export interface BaseNotebookModel {
   active?: CellView | undefined;
   activeIndex: number;
   dndAreaNullEnable: boolean;
+
   /**
-   * The read-only state of the model.
+   * Controlling whether the cell input is editable
    */
-  readOnly: boolean;
+  inputEditable: boolean;
+
+  outputEditable: boolean;
 
   /**
-   * The quick edit mode the model.
+   * Controlling whether the cells list is editable
    */
-  quickEditMode: boolean;
-
+  cellsEditable: boolean;
+  /**
+   * Controlling whether the cells can execute
+   */
+  runnable: boolean;
+  /**
+   * Controlling whether the notebook can save
+   */
+  savable: boolean;
   /**
    * The command mode of the model.
    */
@@ -322,6 +333,8 @@ export interface CellModel extends IModel, Disposable {
    */
   id: string;
 
+  version: number;
+
   source: string;
 
   /**

package/src/libro-service.ts

@@ -41,6 +41,10 @@ export class LibroService implements NotebookService, Disposable {
   protected themeService: ThemeService;
   @prop()
   themeMode: string;
+
+  @prop()
+  hasFormatter = false;
+
   constructor(@inject(ThemeService) themeService: ThemeService) {
     this.themeService = themeService;
     this.themeMode = this.themeService.getCurrentTheme().type;
@@ -134,7 +138,7 @@ export class LibroService implements NotebookService, Disposable {
       }
     }
     const model = this.libroModelFactory(options);
-    this.libroViewTracker.modelCache.set(model.id, model);
+    this.libroViewTracker.modelCache.set(options.modelId || model.id, model);
     return model;
   }
   async getOrCreateView(options: NotebookOption): Promise<NotebookView> {

package/src/libro-setting.ts

@@ -97,3 +97,14 @@ export const OutputScrollBtnVisiable: ConfigurationNode<boolean> = {
     type: 'boolean',
   },
 };
+
+export const SupportCodeFormat: ConfigurationNode<boolean> = {
+  id: 'libro.language.codeformat',
+  description: l10n.t('是否支持代码格式化'),
+  title: l10n.t('是否支持代码格式化'),
+  type: 'checkbox',
+  defaultValue: false,
+  schema: {
+    type: 'boolean',
+  },
+};

package/src/libro-view.tsx

@@ -49,7 +49,7 @@ import {
   DndList,
 } from './components/index.js';
 import { LibroViewHeader } from './components/libro-view-header.js';
-import { LirboContextKey } from './libro-context-key.js';
+import { LibroContextKey } from './libro-context-key.js';
 import { LibroModel } from './libro-model.js';
 import { NotebookService, notebookViewFactoryId } from './libro-protocol.js';
 import type {
@@ -234,14 +234,23 @@ export const LibroRender = forwardRef<HTMLDivElement>(function LibroRender(props
         const dndDom = ref?.current?.getElementsByClassName(
           'libro-dnd-cells-container',
         )[0];
-        if (!dndDom?.contains(e.relatedTarget) && instance.model.readOnly) {
+        if (
+          !dndDom?.contains(e.relatedTarget) &&
+          (!instance.model.inputEditable ||
+            !instance.model.outputEditable ||
+            !instance.model.cellsEditable)
+        ) {
           instance.selectCell(undefined);
         }
       } else {
         instance.enterCommandMode(false);
         libroService.focus = undefined;
         instance.onBlurEmitter.fire('');
-        if (instance.model.readOnly) {
+        if (
+          !instance.model.inputEditable ||
+          !instance.model.outputEditable ||
+          !instance.model.cellsEditable
+        ) {
           instance.selectCell(undefined);
         }
       }
@@ -275,8 +284,8 @@ export class LibroView extends BaseView implements NotebookView {
     </div>
   );
   dndContentRender: FC<DndContentProps> = DndCellContainer;
-  dndItemRender: ForwardRefExoticComponent<
-    DndItemProps & RefAttributes<HTMLDivElement>
+  dndItemRender: React.MemoExoticComponent<
+    ForwardRefExoticComponent<DndItemProps & RefAttributes<HTMLDivElement>>
   > = DndCellItemRender;
   protected onCellCreateEmitter: Emitter<CellView> = new Emitter();
   get onCellCreate() {
@@ -295,7 +304,7 @@ export class LibroView extends BaseView implements NotebookView {
   @inject(CellService) cellService: CellService;
   @inject(LibroService) libroService: LibroService;
   @inject(LibroSlotManager) libroSlotManager: LibroSlotManager;
-  @inject(LirboContextKey) contextKey: LirboContextKey;
+  @inject(LibroContextKey) contextKey: LibroContextKey;
 
   @inject(ViewManager) protected viewManager: ViewManager;
   @inject(ConfigurationService) protected configurationService: ConfigurationService;
@@ -586,7 +595,7 @@ export class LibroView extends BaseView implements NotebookView {
       }),
     )
       .then((resultList) => {
-        return resultList.every((item) => !!item);
+        return resultList.filter((item) => item !== undefined).every((item) => !!item);
       })
       .catch((reason: any) => {
         if (reason.message.startsWith('KernelReplyNotOK')) {

package/src/libro-workspace-service.ts

@@ -0,0 +1,28 @@
+import { Deferred, URI } from '@difizen/mana-app';
+import { singleton } from '@difizen/mana-app';
+
+import type { NotebookView } from './libro-protocol.js';
+
+export const ILibroWorkspaceService = Symbol('ILibroWorkspaceService');
+export interface ILibroWorkspaceService {
+  ready: Promise<void>;
+  get workspaceRoot(): URI;
+  get notebooks(): NotebookView[];
+  get files(): URI[];
+}
+
+@singleton({ contrib: ILibroWorkspaceService })
+export class BaseWorkspaceService implements ILibroWorkspaceService {
+  protected deferred = new Deferred<void>();
+  ready = this.deferred.promise;
+
+  get workspaceRoot() {
+    return new URI('/');
+  }
+  get notebooks() {
+    return [];
+  }
+  get files() {
+    return [];
+  }
+}

package/src/material-from-designer.tsx

@@ -41,7 +41,7 @@ export const PauseCircleOutlined: React.FC = () => (
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
     <g id="原色" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-      <g id="time-out" fillRule="nonzero" fill="#7B7B7B">
+      <g id="time-out" fillRule="nonzero" fill="currentColor">
         <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="20" height="20" />
         <path
           d="M10,1.25 C5.16796875,1.25 1.25,5.16796875 1.25,10 C1.25,14.8320312 5.16796875,18.75 10,18.75 C14.8320312,18.75 18.75,14.8320312 18.75,10 C18.75,5.16796875 14.8320312,1.25 10,1.25 Z M10,17.265625 C5.98828125,17.265625 2.734375,14.0117187 2.734375,10 C2.734375,5.98828125 5.98828125,2.734375 10,2.734375 C14.0117187,2.734375 17.265625,5.98828125 17.265625,10 C17.265625,14.0117187 14.0117187,17.265625 10,17.265625 Z M8.28125,6.875 L7.34375,6.875 C7.2578125,6.875 7.1875,6.9453125 7.1875,7.03125 L7.1875,12.96875 C7.1875,13.0546875 7.2578125,13.125 7.34375,13.125 L8.28125,13.125 C8.3671875,13.125 8.4375,13.0546875 8.4375,12.96875 L8.4375,7.03125 C8.4375,6.9453125 8.3671875,6.875 8.28125,6.875 Z M12.65625,6.875 L11.71875,6.875 C11.6328125,6.875 11.5625,6.9453125 11.5625,7.03125 L11.5625,12.96875 C11.5625,13.0546875 11.6328125,13.125 11.71875,13.125 L12.65625,13.125 C12.7421875,13.125 12.8125,13.0546875 12.8125,12.96875 L12.8125,7.03125 C12.8125,6.9453125 12.7421875,6.875 12.65625,6.875 Z"
@@ -65,7 +65,7 @@ export const Reload: React.FC = () => (
       <g
         id="2.1-kernel-状态展示"
         transform="translate(-776.000000, -80.000000)"
-        fill="#7B7B7B"
+        fill="currentColor"
         fillRule="nonzero"
       >
         <g id="编组-24" transform="translate(637.000000, 80.000000)">
@@ -547,3 +547,33 @@ export const DisableOutputScroll: React.FC = () => (
     </g>
   </svg>
 );
+
+export const FormatCellIcon: React.FC = () => {
+  return (
+    <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
+      <g id="页面-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="file" fill="#000000">
+          <rect
+            id="矩形"
+            fillRule="nonzero"
+            opacity="0"
+            x="0"
+            y="0"
+            width="16"
+            height="16"
+          ></rect>
+          <path
+            d="M13.353125,4.509375 L9.990625,1.146875 C9.896875,1.053125 9.7703125,1 9.6375,1 L3,1 C2.7234375,1 2.5,1.2234375 2.5,1.5 L2.5,14.5 C2.5,14.7765625 2.7234375,15 3,15 L13,15 C13.2765625,15 13.5,14.7765625 13.5,14.5 L13.5,4.8640625 C13.5,4.73125 13.446875,4.603125 13.353125,4.509375 Z M12.346875,5.09375 L9.40625,5.09375 L9.40625,2.153125 L12.346875,5.09375 Z M12.375,13.875 L3.625,13.875 L3.625,2.125 L8.34375,2.125 L8.34375,5.5 C8.34375,5.8625 8.6375,6.15625 9,6.15625 L12.375,6.15625 L12.375,13.875 Z"
+            id="形状"
+            fillRule="nonzero"
+          ></path>
+          <path
+            d="M9.37349398,7 C9.47995851,7 9.56626506,7.08630655 9.56626506,7.19277108 L9.56626506,12.2048193 C9.56626506,12.3112838 9.47995851,12.3975904 9.37349398,12.3975904 L6.19277108,12.3975904 C6.08630655,12.3975904 6,12.3112838 6,12.2048193 L6,7.19277108 C6,7.08630655 6.08630655,7 6.19277108,7 L9.37349398,7 Z M8.81980094,7.74698795 L6.79570456,7.74698795 C6.68924003,7.74698795 6.60293347,7.83329451 6.60293347,7.93975904 L6.60293347,9.86746988 C6.60293347,9.97393441 6.68924003,10.060241 6.79570456,10.060241 L8.81980094,10.060241 C8.92626547,10.060241 9.01257203,9.97393441 9.01257203,9.86746988 L9.01257203,7.93975904 C9.01257203,7.83329451 8.92626547,7.74698795 8.81980094,7.74698795 Z"
+            id="形状结合"
+            transform="translate(7.783133, 9.698795) scale(1, -1) rotate(45.000000) translate(-7.783133, -9.698795) "
+          ></path>
+        </g>
+      </g>
+    </svg>
+  );
+};

package/src/module.ts

@@ -22,7 +22,7 @@ import {
 } from './components/index.js';
 import { LibroContentModule } from './content/index.js';
 import { LibroFormatterModule } from './formatter/index.js';
-import { LirboContextKey } from './libro-context-key.js';
+import { LibroContextKey } from './libro-context-key.js';
 import { LibroModel } from './libro-model.js';
 import {
   ModelFactory,
@@ -34,6 +34,7 @@ import { LibroService } from './libro-service.js';
 import { LibroSettingContribution } from './libro-setting-contribution.js';
 import { LibroViewTracker } from './libro-view-tracker.js';
 import { LibroView } from './libro-view.js';
+import { BaseWorkspaceService } from './libro-workspace-service.js';
 import { OutputModule } from './output/index.js';
 import { LibroSlotModule } from './slot/index.js';
 import { LibroColorRegistry } from './theme/libro-color-registry.js';
@@ -42,9 +43,10 @@ import { VirtualizedManager } from './virtualized-manager.js';
 
 export const LibroModule = ManaModule.create()
   .register(
+    BaseWorkspaceService,
     VirtualizedManager,
     LibroService,
-    LirboContextKey,
+    LibroContextKey,
     LibroModel,
     LibroView,
     LibroSettingContribution,

package/src/output/output-area.tsx

@@ -35,7 +35,15 @@ const LibroOutputAreaRender = forwardRef<HTMLDivElement>(
     useEffect(() => {
       outputArea.onUpdateEmitter.fire();
     }, [outputArea.onUpdateEmitter, outputArea.outputs]);
-
+    const childrenCannotClear = [];
+    const children = [];
+    for (const output of outputArea.outputs) {
+      if (output.allowClear === false) {
+        childrenCannotClear.push(output);
+      } else {
+        children.push(output);
+      }
+    }
     return (
       <div
         className="libro-output-area"
@@ -43,7 +51,10 @@ const LibroOutputAreaRender = forwardRef<HTMLDivElement>(
         //设置最小高度，用于优化长文本输出再次执行时的页面的滚动控制
         // style={{ minHeight: `${executing ? outputArea.lastOutputContainerHeight + 'px' : 'unset'}` }}
       >
-        {outputArea.outputs.map((output) => {
+        {childrenCannotClear.map((output) => {
+          return <ViewRender view={output} key={output.id} />;
+        })}
+        {children.map((output) => {
           return <ViewRender view={output} key={output.id} />;
         })}
       </div>
@@ -103,10 +114,10 @@ export class LibroOutputArea extends BaseView implements BaseOutputArea {
     });
   }
   add = async (output: IOutput): Promise<number> => {
-    // if (this.clearNext) {
-    //   this.clear();
-    //   this.clearNext = false;
-    // }
+    if (this.clearNext) {
+      this.clear();
+      this.clearNext = false;
+    }
     // Consolidate outputs if they are stream outputs of the same kind.
     if (
       isStream(output) &&
@@ -141,13 +152,28 @@ export class LibroOutputArea extends BaseView implements BaseOutputArea {
     } else {
       this.lastStream = '';
     }
-    return this.outputs.push(await outputModel);
+    const model = await outputModel;
+    model.onDisposed(() => {
+      this.remove(model);
+    });
+    return this.outputs.push(model);
   };
+
+  protected remove(model: BaseOutputView) {
+    let outputs = [...this.outputs];
+    outputs = outputs.filter((item) => item !== model);
+    this.outputs = outputs;
+  }
+
   set = async (index: number, output: IOutput) => {
     const outputModel = this.doCreateOutput(output);
     const current = this.outputs[index];
     current.dispose();
-    this.outputs[index] = await outputModel;
+    const model = await outputModel;
+    model.onDisposed(() => {
+      this.remove(model);
+    });
+    this.outputs[index] = model;
   };
   clear(wait?: boolean | undefined) {
     this.lastStream = '';
@@ -158,7 +184,6 @@ export class LibroOutputArea extends BaseView implements BaseOutputArea {
     this.outputs.forEach((output) => {
       output.dispose();
     });
-    this.outputs = [];
   }
   fromJSON = async (values: IOutput[]) => {
     if (!values) {

package/src/output/output-model.tsx

@@ -26,6 +26,10 @@ export class LibroOutputView extends BaseView implements BaseOutputView {
 
   @prop()
   raw: IOutput;
+
+  @prop()
+  allowClear = true;
+
   @prop()
   data: JSONObject;
   @prop()
@@ -45,7 +49,7 @@ export class LibroOutputView extends BaseView implements BaseOutputView {
   render: FC<{ output: BaseOutputView }> = LibroOutputModelRender;
 
   override dispose() {
-    //
+    super.dispose();
   }
   toJSON() {
     return this.raw;

package/src/output/output-protocol.ts

@@ -126,6 +126,11 @@ export interface BaseOutputView extends View {
    * Depending on the implementation of the mime model,
    */
   setData(options: ISetDataOptions): void;
+
+  /**
+   * undefined is considered allowed
+   */
+  allowClear?: boolean;
 }
 
 /**

package/src/theme/libro-color-registry.ts

@@ -343,7 +343,7 @@ export class LibroColorRegistry implements ColorContribution {
       },
       {
         id: 'libro.editor.gutter.number.color',
-        defaults: { dark: '#A8EABF', light: '#A4AECB' },
+        defaults: { dark: '#A8AEBF', light: '#A4AECB' },
         description: '',
       },
       {

package/src/toolbar/change-cell-to-selector.tsx

@@ -3,9 +3,10 @@ import {
   ToolbarInstance,
   getOrigin,
   CommandRegistry,
+  ThemeService,
 } from '@difizen/mana-app';
 import type { Toolbar } from '@difizen/mana-app';
-import { Select } from 'antd';
+import { ConfigProvider, Select, theme } from 'antd';
 import { memo } from 'react';
 
 import type { CellMeta } from '../cell/index.js';
@@ -28,13 +29,21 @@ export const ToolItemSelectInner: React.FC = () => {
   const data = toolbar.currentArgs as LibroToolbarArags;
   const command = useInject(CommandRegistry);
   const curCell = data?.[0];
+  const themeService = useInject(ThemeService);
 
   const handleChange = (value: string) => {
     const args = getOrigin(data) || [];
     command.executeCommand(NotebookCommands['ChangeCellTo'].id, ...args, value);
   };
   return (
-    <>
+    <ConfigProvider
+      theme={{
+        algorithm:
+          themeService.getCurrentTheme().type === 'dark'
+            ? theme.darkAlgorithm
+            : theme.defaultAlgorithm,
+      }}
+    >
       <Select
         value={curCell?.model?.type}
         size={'small'}
@@ -51,7 +60,7 @@ export const ToolItemSelectInner: React.FC = () => {
           );
         })}
       </Select>
-    </>
+    </ConfigProvider>
   );
 };