@difizen/libro-core 1.0.2 → 1.0.3

package/src/index.less

@@ -784,6 +784,7 @@
   font-size: 14px;
   font-family: PingFangSC;
   line-height: 22px;
+  white-space: nowrap;
 }
 
 .libro-tooltip-keybind {

package/src/libro-model.ts

@@ -4,16 +4,16 @@ import type {
   INotebookContent,
   INotebookMetadata,
 } from '@difizen/libro-common';
+import { getOrigin, ConfigurationService } from '@difizen/libro-common/app';
+import { Emitter } from '@difizen/libro-common/app';
+import { prop } from '@difizen/libro-common/app';
+import { inject, transient } from '@difizen/libro-common/app';
+import { createMutex, YNotebook } from '@difizen/libro-shared-model';
 import type {
   CellTypeAdaptor,
   ISharedNotebook,
   NotebookChange,
 } from '@difizen/libro-shared-model';
-import { createMutex, YNotebook } from '@difizen/libro-shared-model';
-import { getOrigin, ConfigurationService } from '@difizen/libro-common/app';
-import { Emitter } from '@difizen/libro-common/app';
-import { prop } from '@difizen/libro-common/app';
-import { inject, transient } from '@difizen/libro-common/app';
 import { v4 } from 'uuid';
 
 import { LibroContentService } from './content/index.js';
@@ -108,6 +108,9 @@ export class LibroModel implements NotebookModel, DndListModel {
   @prop()
   cellsEditable = true;
 
+  @prop()
+  noEditorMode = false;
+
   get executable() {
     return this.outputEditable && this.runnable;
   }

package/src/libro-protocol.ts

@@ -88,6 +88,7 @@ export interface BaseNotebookModel {
   active?: CellView | undefined;
   activeIndex: number;
   dndAreaNullEnable: boolean;
+  noEditorMode: boolean;
 
   /**
    * Controlling whether the cell input is editable
@@ -280,6 +281,8 @@ export interface CellView extends View {
 
   editorStatus?: EditorStatus;
 
+  isLargeOutputDisplay?: boolean;
+
   calcEditorAreaHeight?: () => number;
 
   calcEditorOffset?: () => number;

package/src/libro-setting-contribution.ts

@@ -7,6 +7,7 @@ import {
   CollapserClickActive,
   EnterEditModeWhenAddCell,
   HeaderToolbarVisible,
+  LargeOutputDisplay,
   MultiSelectionWhenShiftClick,
   RightContentFixed,
 } from './libro-setting.js';
@@ -23,6 +24,7 @@ export class LibroSettingContribution implements ConfigurationContribution {
       CollapserClickActive,
       MultiSelectionWhenShiftClick,
       RightContentFixed,
+      LargeOutputDisplay,
     ];
   }
 }

package/src/libro-setting.ts

@@ -119,3 +119,14 @@ export const SpmReporter: ConfigurationNode<boolean> = {
     type: 'boolean',
   },
 };
+
+export const LargeOutputDisplay: ConfigurationNode<boolean> = {
+  id: 'libro.output.large.display',
+  description: l10n.t('是否优化长文本 output 显示'),
+  title: 'Output',
+  type: 'checkbox',
+  defaultValue: true,
+  schema: {
+    type: 'boolean',
+  },
+};

package/src/libro-view.tsx

@@ -1,5 +1,6 @@
 import { ToTopOutlined } from '@ant-design/icons';
 import type { IModelContentChange } from '@difizen/libro-code-editor';
+import type { MultilineString } from '@difizen/libro-common';
 import {
   concatMultilineString,
   copy2clipboard,
@@ -386,6 +387,14 @@ export class LibroView extends BaseView implements NotebookView {
     return this.cellScrollEmitter.event;
   }
 
+  outputRenderTabEmitter = new Emitter<{
+    mimeType: string;
+    data: MultilineString | null;
+  }>();
+  get onOutputRenderTab() {
+    return this.outputRenderTabEmitter.event;
+  }
+
   protected initializedDefer = new Deferred<void>();
 
   get initialized() {
@@ -432,6 +441,12 @@ export class LibroView extends BaseView implements NotebookView {
   async initialize() {
     this.model.isInitialized = false;
     const options = await this.model.initialize();
+    if (
+      options.length > 30 ||
+      (this.model.options['fileSize'] || 0) / (1024 * 1024) >= 5
+    ) {
+      this.addLargeFileWarning();
+    }
     this.configurationService
       .get(AutoInsertWhenNoCell)
       .then((value) => {
@@ -477,6 +492,48 @@ export class LibroView extends BaseView implements NotebookView {
 
   override view = LibroRender;
 
+  addLargeFileWarning = () => {
+    const skipWarning =
+      localStorage.getItem(
+        'largefile' + `${this.options.modelId || this.options.id}`,
+      ) === 'true';
+    if (!skipWarning) {
+      const warningBox = document.createElement('div');
+      warningBox.style.position = 'fixed';
+      warningBox.style.top = '20px';
+      warningBox.style.left = '50%';
+      warningBox.style.display = 'flex';
+      warningBox.style.alignItems = 'center';
+      warningBox.style.color = '#000000E0';
+      warningBox.style.transform = 'translateX(-50%)';
+      warningBox.style.fontSize = '14px';
+      warningBox.style.background = '#ffffff';
+      warningBox.style.padding = '9px 12px';
+      warningBox.style.zIndex = '9999';
+      warningBox.style.borderRadius = '8px';
+      warningBox.style.boxShadow =
+        '0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05)';
+      warningBox.innerHTML = `
+                <svg style="display: inline-block; margin-right: 8px" viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="#faad14" aria-hidden="true" data-macaca-recorder-select-tag="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg>
+                <span style ="line-height: 32px">即将打开的文件(内容过大 / cell 过多)，可能会导致操作卡顿，请耐心等待～</span>
+                <a style="margin-left: 8px; color: #1677ff;">我知道了</a>
+                `;
+      warningBox.querySelector('a')?.addEventListener('click', () => {
+        // 将用户偏好保存到 localStorage
+        localStorage.setItem(
+          'largefile' + `${this.options.modelId || this.options.id}`,
+          'true',
+        );
+        document.body.removeChild(warningBox);
+      });
+      document.body.appendChild(warningBox);
+      // 可选：自动移除提示框
+      setTimeout(() => {
+        document.body.removeChild(warningBox);
+      }, 2000);
+    }
+  };
+
   override onViewMount = () => {
     this.libroService.active = this;
     this.libroSlotManager.setup(this);
@@ -487,17 +544,11 @@ export class LibroView extends BaseView implements NotebookView {
       });
     }
     if (
-      this.model.cells.length > 30 ||
-      (this.options['fileSize'] || 0) / (1024 * 1024) >= 5
+      this.model.isInitialized &&
+      (this.model.cells.length > 30 ||
+        (this.model.options['fileSize'] || 0) / (1024 * 1024) >= 5)
     ) {
-      message.warning(
-        <div>
-          {l10n.t(
-            '即将打开的文件(内容过大 / cell 过多)，可能会导致操作卡顿，请耐心等待～',
-          )}
-          <Button type="link">{l10n.t('我知道了')}</Button>
-        </div>,
-      );
+      this.addLargeFileWarning();
     }
     // this.libroService.libroPerformanceStatistics.setRenderEnd(new Date());
 

package/src/output/output-area.tsx

@@ -1,4 +1,6 @@
-import type { IOutput } from '@difizen/libro-common';
+import type { IOutput, JSONObject } from '@difizen/libro-common';
+import { concatMultilineString } from '@difizen/libro-common';
+import { getBundleOptions } from '@difizen/libro-common';
 import { isError, isStream } from '@difizen/libro-common';
 import type { ViewComponent, Contribution } from '@difizen/libro-common/app';
 import {
@@ -13,7 +15,6 @@ import {
 } from '@difizen/libro-common/app';
 import { Emitter, prop, contrib, inject, transient } from '@difizen/libro-common/app';
 import { useEffect, forwardRef } from 'react';
-import { v4 } from 'uuid';
 
 import { ExecutableCellView } from '../cell/index.js';
 import type { CellView } from '../libro-protocol.js';
@@ -28,7 +29,6 @@ import { OutputContribution } from './output-protocol.js';
 const LibroOutputAreaRender = forwardRef<HTMLDivElement>(
   function LibroOutputAreaRender(props, ref) {
     const outputArea = useInject<LibroOutputArea>(ViewInstance);
-
     // const cellModel = outputArea.cell.model;
     // const executing = ExecutableCellModel.is(cellModel) && cellModel.executing;
 
@@ -72,8 +72,6 @@ export class LibroOutputArea extends BaseView implements BaseOutputArea {
   @prop()
   outputs: BaseOutputView[] = [];
 
-  // lastOutputContainerHeight?: number;
-
   constructor(@inject(ViewOption) option: IOutputAreaOption) {
     super();
     this.cell = option.cell;
@@ -86,6 +84,8 @@ export class LibroOutputArea extends BaseView implements BaseOutputArea {
 
   protected clearNext = false;
   protected lastStream = '';
+  protected lastDisplayStream: string[] = [];
+  protected isFirstLastOverHeight = true;
 
   protected lastName?: 'stdout' | 'stderr';
 
@@ -108,7 +108,7 @@ export class LibroOutputArea extends BaseView implements BaseOutputArea {
     const provider = this.findProvider(options);
 
     return provider.factory({
-      output: { _librOutputId: v4(), ...options },
+      output: options,
       trusted: this.cell.model.trusted,
       cell: this.cell,
     });
@@ -131,26 +131,56 @@ export class LibroOutputArea extends BaseView implements BaseOutputArea {
       // In order to get a list change event, we add the previous
       // text to the current item and replace the previous item.
       // This also replaces the metadata of the last item.
-      this.lastStream += normalize(output.text);
+      const normalizeOutput = normalize(output.text);
+      this.lastStream += normalizeOutput;
       this.lastStream = removeOverwrittenChars(this.lastStream);
       output.text = this.lastStream;
       const index = this.length - 1;
-      this.set(index, output);
+      const outputModel = this.outputs[index];
+      const containerRec = outputModel.container?.current?.getBoundingClientRect();
+
+      if ((containerRec?.height || 0) > 240) {
+        if (this.isFirstLastOverHeight) {
+          this.lastDisplayStream = [concatMultilineString(this.lastStream)];
+          this.lastDisplayStream.push('\n...\n');
+          this.isFirstLastOverHeight = false;
+        } else {
+          this.lastDisplayStream = [
+            ...this.lastDisplayStream,
+            ...splitWithNewline(normalizeOutput), //考虑有可能一次性输出多个带换行符的内容
+          ];
+        }
+        output['is_over_height'] = true;
+        output['display_text'] = this.lastDisplayStream;
+      }
+      this.set(index, output, true);
       return this.length;
     }
-
+    this.isFirstLastOverHeight = true;
     if (isStream(output)) {
-      output.text = removeOverwrittenChars(normalize(output.text));
+      const text = removeOverwrittenChars(normalize(output.text));
+      output.text = text;
+      const split_text = splitWithNewline(text);
+      if (this.isFirstLastOverHeight && split_text.length > 15) {
+        this.lastDisplayStream = [concatMultilineString(split_text.slice(0, 15))];
+        this.lastDisplayStream.push('\n...\n');
+        this.lastDisplayStream = [...this.lastDisplayStream, ...split_text.slice(15)];
+        this.isFirstLastOverHeight = false;
+        output['is_over_height'] = true;
+        output['display_text'] = this.lastDisplayStream;
+      }
     }
-
     const outputModel = this.doCreateOutput(output);
 
     // Update the stream information.
     if (isStream(output)) {
-      this.lastStream = normalize(output.text);
+      const normalizedOutput = normalize(output.text);
+      this.lastStream = normalizedOutput;
       this.lastName = output.name;
     } else {
       this.lastStream = '';
+      this.lastDisplayStream = [];
+      this.isFirstLastOverHeight = true;
     }
     const model = await outputModel;
     model.onDisposed(() => {
@@ -165,18 +195,29 @@ export class LibroOutputArea extends BaseView implements BaseOutputArea {
     this.outputs = outputs;
   }
 
-  set = async (index: number, output: IOutput) => {
-    const outputModel = this.doCreateOutput(output);
-    const current = this.outputs[index];
-    current.dispose();
-    const model = await outputModel;
-    model.onDisposed(() => {
-      this.remove(model);
-    });
-    this.outputs[index] = model;
+  set = async (index: number, output: IOutput, shouldReplace?: boolean) => {
+    if (shouldReplace) {
+      const outputModel = this.outputs[index];
+      const { data } = getBundleOptions(output);
+      outputModel.raw = output;
+      outputModel.data = data as JSONObject;
+      outputModel.onUpdateEmitter.fire();
+      // outputModel.data
+    } else {
+      const outputModel = this.doCreateOutput(output);
+      const current = this.outputs[index];
+      current.dispose();
+      const model = await outputModel;
+      model.onDisposed(() => {
+        this.remove(model);
+      });
+      this.outputs[index] = model;
+    }
   };
   clear(wait?: boolean | undefined) {
     this.lastStream = '';
+    this.lastDisplayStream = [];
+    this.isFirstLastOverHeight = true;
     if (wait) {
       this.clearNext = true;
       return;
@@ -264,6 +305,24 @@ export function removeOverwrittenChars(text: string): string {
   return fixCarriageReturn(fixBackspace(text));
 }
 
+function splitWithNewline(input: string): string[] {
+  const parts = input.split(/(\n)/);
+  const result: string[] = [];
+
+  for (let i = 0; i < parts.length; i += 2) {
+    const text = parts[i];
+    const newline = parts[i + 1] || '';
+    const combined = text + newline;
+
+    // 仅保留非空项
+    if (text || newline) {
+      result.push(combined);
+    }
+  }
+
+  return result;
+}
+
 /**
  * Normalize an output.
  */

package/src/output/output-model.tsx

@@ -1,5 +1,5 @@
 import type { IOutput, JSONObject, PartialJSONObject } from '@difizen/libro-common';
-import { BaseView, prop, view, ViewOption } from '@difizen/libro-common/app';
+import { BaseView, Emitter, prop, view, ViewOption } from '@difizen/libro-common/app';
 import { inject, transient } from '@difizen/libro-common/app';
 import type { FC } from 'react';
 import { v4 } from 'uuid';
@@ -32,6 +32,13 @@ export class LibroOutputView extends BaseView implements BaseOutputView {
 
   @prop()
   data: JSONObject;
+
+  onUpdateEmitter = new Emitter<void>();
+
+  get onUpdate() {
+    return this.onUpdateEmitter.event;
+  }
+
   @prop()
   metadata: PartialJSONObject;
   type: string;
@@ -44,6 +51,9 @@ export class LibroOutputView extends BaseView implements BaseOutputView {
     this.type = 'libro-default-output';
     this.data = {};
     this.metadata = {};
+    this.onUpdate(() => {
+      this.cell.parent.model.onChange?.();
+    });
   }
 
   render: FC<{ output: BaseOutputView }> = LibroOutputModelRender;

package/src/output/output-protocol.ts

@@ -3,7 +3,7 @@ import type {
   ReadonlyPartialJSONObject,
   JSONObject,
 } from '@difizen/libro-common';
-import type { Event } from '@difizen/libro-common/app';
+import type { Emitter, Event } from '@difizen/libro-common/app';
 import type { View } from '@difizen/libro-common/app';
 import { Syringe } from '@difizen/libro-common/app';
 
@@ -100,7 +100,13 @@ export interface BaseOutputView extends View {
   /**
    * The data associated with the model.
    */
-  readonly data: JSONObject;
+  data: JSONObject;
+
+  onUpdateEmitter: Emitter<void>;
+
+  onUpdate: Event<void>;
+
+  isTabRender?: boolean;
 
   /**
    * The metadata associated with the model.

package/src/toolbar/index.less

@@ -4,16 +4,16 @@
 .libro-hide-selector-menu {
   .@{ant-prefix}-dropdown-menu {
     background-color: var(--mana-libro-popover-background-color);
-  }
-  .@{ant-prefix}-dropdown-menu-item {
-    color: var(--mana-libro-toolbar-menu-label-color);
-  }
-  .@{ant-prefix}-dropdown-menu-item-disabled {
-    color: var(--mana-libro-toolbar-menu-disabled-label-color) !important;
-  }
-  .@{ant-prefix}-dropdown-menu-item.@{ant-prefix}-dropdown-menu-item-disabled:hover,
-  .@{ant-prefix}-dropdown-menu-item:hover {
-    background-color: var(--mana-libro-menu-hover-color);
+    .@{ant-prefix}-dropdown-menu-item {
+      color: var(--mana-libro-toolbar-menu-label-color);
+    }
+    .@{ant-prefix}-dropdown-menu-item-disabled {
+      color: var(--mana-libro-toolbar-menu-disabled-label-color);
+    }
+    .@{ant-prefix}-dropdown-menu-item.@{ant-prefix}-dropdown-menu-item-disabled:hover,
+    .@{ant-prefix}-dropdown-menu-item:hover {
+      background-color: var(--mana-libro-menu-hover-color);
+    }
   }
 }