@difizen/libro-core 0.1.1 → 0.1.2

package/src/components/libro-virtualized-render.tsx

@@ -0,0 +1,178 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { AutoSizer, List } from '@difizen/libro-virtualized';
+import type { ReactNode } from 'react';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+
+import { EditorCellView } from '../cell/index.js';
+import type { CellView, ScrollParams } from '../libro-protocol.js';
+import type { LibroView } from '../libro-view.js';
+
+import { DndCellRender } from './dnd-component/index.js';
+
+interface LibroVirtualizedRowProps {
+  style: Record<string, string>;
+  cell: CellView;
+}
+
+export const LibroVirtualizedRow: React.FC<LibroVirtualizedRowProps> = memo(
+  function LibroVirtualizedRow({ style, cell }: LibroVirtualizedRowProps) {
+    const itemRef = useRef(null);
+
+    // MarkDown Cell 需要隐藏其在虚拟滚动部分的占位div
+    const isHidden = cell.hasInputHidden;
+
+    return (
+      <div ref={itemRef} style={{ ...style, visibility: 'hidden' }}>
+        {isHidden || !cell.renderEditorIntoVirtualized || !EditorCellView.is(cell) ? (
+          <></>
+        ) : (
+          // cell.editorView && <ViewRender view={cell.editorView} />
+          cell.renderEditor && cell.renderEditor()
+        )}
+      </div>
+    );
+  },
+);
+
+// 已经在上层判断是否为虚拟滚动
+export const LibroCellsOutputRender: React.FC<{
+  cells: CellView[];
+  libroView: LibroView;
+  addCellButtons: ReactNode;
+}> = ({ cells, libroView, addCellButtons }) => {
+  const parentRef = useRef(null);
+  const listRef = useRef<List | null>(null);
+  const noEditorAreaRef = useRef<HTMLDivElement | null>(null);
+
+  const [editorsOffset, setEditorsOffset] = useState<number[]>([]);
+
+  const editorAreaHeight = useMemo(() => {
+    const inputHeight = cells.map((cell: CellView) => {
+      if (cell.editorAreaHeight) {
+        return cell.editorAreaHeight;
+      } else {
+        return 0;
+      }
+    });
+    return inputHeight;
+  }, [cells]);
+
+  const noEditorAreaHeight = useMemo(() => {
+    // 如果只有一个Cell，则它的最小高度是200，防止右侧边栏被隐藏。
+    const lastCellHeight = Math.max(
+      cells[cells.length - 1].noEditorAreaHeight || 0,
+      120,
+    );
+
+    const outputHeight = cells.map((cell: CellView, idx: number) => {
+      if (idx === cells.length - 1) {
+        return lastCellHeight;
+      }
+
+      if (cell.noEditorAreaHeight) {
+        return cell.noEditorAreaHeight;
+      } else {
+        return 0;
+      }
+    });
+
+    if (addCellButtons) {
+      outputHeight.push(90);
+    } //
+
+    return outputHeight;
+  }, [cells, addCellButtons]);
+
+  const totalSize = useMemo(
+    () => noEditorAreaHeight.reduce((pre, cur) => pre + cur),
+    [noEditorAreaHeight],
+  );
+
+  useEffect(() => {
+    if (!listRef || !listRef.current || !libroView.model) {
+      return;
+    }
+
+    libroView.model.onScrollToCellView((params: ScrollParams) => {
+      // listRef.current!.scrollToRow(index);
+      listRef.current!.scrollToLine(params.cellIndex, params.lineIndex || 1);
+    });
+    return () => {
+      libroView.model.disposeScrollToCellViewEmitter();
+    };
+  }, [listRef, libroView]);
+
+  // 在Cell的高度变化时，触发重新计算所有Cell的高度偏移值
+  useEffect(() => {
+    if (!noEditorAreaRef.current) {
+      return;
+    }
+
+    const newCellOffsets: number[] = [];
+    const childNum = noEditorAreaRef.current.childNodes.length || 0;
+    noEditorAreaRef.current.childNodes.forEach((child, index) => {
+      // 最后一个child元素是 addCellButtons
+      if (index === childNum - 1) {
+        return;
+      }
+
+      const offsetTop = (child as HTMLDivElement).offsetTop;
+
+      let offset = 0;
+      if (cells[index].calcEditorOffset) {
+        offset += cells[index].calcEditorOffset!();
+      }
+
+      newCellOffsets[index] = offsetTop + offset;
+    });
+
+    setEditorsOffset(newCellOffsets);
+  }, [noEditorAreaRef.current, cells]);
+
+  // 绘制所有的非编辑器区域
+  const noEditorArea = useMemo(() => {
+    return (
+      <div
+        style={{
+          position: 'absolute',
+          visibility: 'visible',
+          width: '100%',
+          height: '100%',
+        }}
+        ref={noEditorAreaRef}
+      >
+        {cells
+          .filter((cell) => cell.collapsedHidden === false)
+          .map((cell, index) => {
+            return <DndCellRender cell={cell} key={cell.id} index={index} />;
+          })}
+        {addCellButtons}
+      </div>
+    );
+  }, [cells, addCellButtons]);
+
+  return (
+    <AutoSizer style={{ height: '100%', width: '100%' }} ref={parentRef}>
+      {({ width, height }: { width: number; height: number }) => {
+        return (
+          <List
+            ref={listRef}
+            width={width}
+            height={height}
+            rowCount={cells.length}
+            rowHeight={50}
+            // rowHeight={getOrCreateCache(libroView.id).rowHeight}
+            rowRenderer={({ key, index, style }: any) => (
+              <LibroVirtualizedRow key={key} style={style} cell={cells[index]} />
+            )}
+            cellsHeight={noEditorAreaHeight}
+            totalSize={totalSize}
+            editorAreaHeight={editorAreaHeight}
+            noEditorArea={noEditorArea}
+            editorsOffset={editorsOffset}
+          />
+        );
+      }}
+    </AutoSizer>
+  );
+};

package/src/content/index.ts

@@ -2,3 +2,4 @@ export * from './libro-content-contribution.js';
 export * from './libro-content-protocol.js';
 export * from './libro-content-service.js';
 export * from './libro-content-module.js';
+export * from './libro-save-content-contribution.js';

package/src/content/libro-content-contribution.ts

@@ -1,12 +1,11 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { singleton } from '@difizen/mana-app';
 
 import { ContentContribution } from './libro-content-protocol.js';
 
 @singleton({ contrib: ContentContribution })
 export class DefaultContentContribution implements ContentContribution {
-  canHandle = (_options: Record<string, any>, _model: any) => 1;
-  loadContent(_options: Record<string, any>, _model: any) {
+  canHandle = (options: Record<string, any>, model: any) => 1;
+  loadContent(options: Record<string, any>, model: any) {
     return Promise.resolve({
       metadata: {},
       cells: [],

package/src/content/libro-content-module.ts

@@ -1,9 +1,17 @@
 import { ManaModule } from '@difizen/mana-app';
 
 import { DefaultContentContribution } from './libro-content-contribution.js';
-import { ContentContribution } from './libro-content-protocol.js';
+import {
+  ContentContribution,
+  ContentSaveContribution,
+} from './libro-content-protocol.js';
 import { LibroContentService } from './libro-content-service.js';
+import { DefaultSaveContentContribution } from './libro-save-content-contribution.js';
 
 export const LibroContentModule = ManaModule.create()
-  .contribution(ContentContribution)
-  .register(DefaultContentContribution, LibroContentService);
+  .contribution(ContentContribution, ContentSaveContribution)
+  .register(
+    DefaultContentContribution,
+    LibroContentService,
+    DefaultSaveContentContribution,
+  );

package/src/content/libro-content-protocol.ts

@@ -6,3 +6,9 @@ export interface ContentContribution {
   canHandle: (options: Record<string, any>, model: any) => number;
   loadContent: (options: Record<string, any>, model: any) => Promise<INotebookContent>;
 }
+
+export const ContentSaveContribution = Syringe.defineToken('ContentSaveContribution');
+export interface ContentSaveContribution {
+  canHandle: (options: Record<string, any>, model: any) => number;
+  saveContent: (options: Record<string, any>, model: any) => Promise<void>;
+}

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

@@ -1,17 +1,19 @@
 import type { Contribution } from '@difizen/mana-app';
 import { contrib, Priority, singleton } from '@difizen/mana-app';
 
-import { ContentContribution } from './libro-content-protocol.js';
+import {
+  ContentContribution,
+  ContentSaveContribution,
+} from './libro-content-protocol.js';
 
 @singleton()
 export class LibroContentService {
-  protected contentProvider: Contribution.Provider<ContentContribution>;
-  constructor(
-    @contrib(ContentContribution)
-    contentProvider: Contribution.Provider<ContentContribution>,
-  ) {
-    this.contentProvider = contentProvider;
-  }
+  @contrib(ContentContribution)
+  contentProvider: Contribution.Provider<ContentContribution>;
+
+  @contrib(ContentSaveContribution)
+  contentSaveProvider: Contribution.Provider<ContentSaveContribution>;
+
   protected findProvider(
     options: Record<string, any>,
     model: any,
@@ -27,4 +29,20 @@ export class LibroContentService {
   loadLibroContent(options: Record<string, any>, model: any) {
     return this.findProvider(options, model).loadContent(options, model);
   }
+
+  protected findSaveProvider(
+    options: Record<string, any>,
+    model: any,
+  ): ContentSaveContribution {
+    const prioritized = Priority.sortSync(
+      this.contentSaveProvider.getContributions(),
+      (contribution) => contribution.canHandle(options, model),
+    );
+    const sorted = prioritized.map((c) => c.value);
+    return sorted[0]!;
+  }
+
+  saveLibroContent(options: Record<string, any>, model: any) {
+    return this.findSaveProvider(options, model).saveContent(options, model);
+  }
 }

package/src/content/libro-save-content-contribution.ts

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { singleton } from '@difizen/mana-app';
+
+import { ContentSaveContribution } from './libro-content-protocol.js';
+
+@singleton({ contrib: ContentSaveContribution })
+export class DefaultSaveContentContribution implements ContentSaveContribution {
+  canHandle = (options: Record<string, any>, model: any) => 1;
+  saveContent(options: Record<string, any>, model: any) {
+    return Promise.resolve();
+  }
+}

package/src/formatter/index.ts

@@ -0,0 +1,5 @@
+export * from './libro-formatter-manager.js';
+export * from './libro-formatter-module.js';
+export * from './libro-formatter-protocol.js';
+export * from './libro-formatter-string-contribution.js';
+export * from './libro-formatter-trans-default-contribution.js';

package/src/formatter/libro-formatter-json-contribution.ts

@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { concatMultilineString } from '@difizen/libro-common';
+import { singleton } from '@difizen/mana-app';
+
+import {
+  DefaultDecodedFormatter,
+  FormatterContribution,
+} from './libro-formatter-protocol.js';
+import type { DefaultEncodedFormatter } from './libro-formatter-protocol.js';
+
+@singleton({ contrib: FormatterContribution })
+export class FormatterJsonContribution
+  implements FormatterContribution<DefaultDecodedFormatter>
+{
+  formatter = 'formatter-json';
+  formatterOptions?: object;
+  canHandle = (libroFormatter: string) => {
+    if (libroFormatter === this.formatter) {
+      return 100;
+    }
+    return 1;
+  };
+
+  encode = (source: DefaultDecodedFormatter) => {
+    return {
+      source: source.value,
+      metadata: {
+        libroFormatter: 'formatter-string',
+      },
+    };
+  };
+
+  decode = (formatterValue: DefaultEncodedFormatter) => {
+    return {
+      value: concatMultilineString(formatterValue.source),
+    };
+  };
+
+  validate = (source: DefaultDecodedFormatter): source is DefaultDecodedFormatter => {
+    return DefaultDecodedFormatter.is(source);
+  };
+}

package/src/formatter/libro-formatter-manager.ts

@@ -0,0 +1,85 @@
+import type { Contribution } from '@difizen/mana-app';
+import { contrib, Priority, singleton } from '@difizen/mana-app';
+
+import { CellModelContribution } from '../cell/index.js';
+
+import {
+  FormatterContribution,
+  FormatterTransContribution,
+} from './libro-formatter-protocol.js';
+import type { DefaultEncodedFormatter } from './libro-formatter-protocol.js';
+
+@singleton()
+export class LibroFormatterManager<T, U> {
+  @contrib(FormatterContribution)
+  protected readonly formatterProvider: Contribution.Provider<FormatterContribution<T>>;
+  @contrib(FormatterTransContribution)
+  protected readonly formatterTransProvider: Contribution.Provider<
+    FormatterTransContribution<T, U>
+  >;
+  protected readonly cellModelProvider: Contribution.Provider<CellModelContribution>;
+
+  constructor(
+    @contrib(CellModelContribution)
+    cellModelProvider: Contribution.Provider<CellModelContribution>,
+  ) {
+    this.cellModelProvider = cellModelProvider;
+  }
+
+  protected findFormatterProvider(
+    libroFormatter: string,
+    options?: object,
+  ): FormatterContribution<T> {
+    const prioritized = Priority.sortSync(
+      this.formatterProvider.getContributions(),
+      (contribution) => contribution.canHandle(libroFormatter, options),
+    );
+    const sorted = prioritized.map((c) => c.value);
+    return sorted[0]!;
+  }
+
+  protected findFormatterTransProvider(
+    origin: string,
+    target: string,
+  ): FormatterTransContribution<T, U> {
+    const prioritized = Priority.sortSync(
+      this.formatterTransProvider.getContributions(),
+      (contribution) => {
+        if (origin === contribution.origin && target === contribution.target) {
+          return contribution.priority;
+        }
+        return 1;
+      },
+    );
+    const sorted = prioritized.map((c) => c.value);
+    return sorted[0]!;
+  }
+
+  encode(libroFormatter: string, source: T): DefaultEncodedFormatter {
+    const formatter = this.findFormatterProvider(libroFormatter);
+    return formatter.encode(source);
+  }
+
+  decode(libroFormatter: string, formatterValue: DefaultEncodedFormatter): T {
+    const formatter = this.findFormatterProvider(libroFormatter);
+    return formatter.decode(formatterValue);
+  }
+
+  adapter(libroFormatter: string, formatterValue: DefaultEncodedFormatter): U {
+    const originFormatter = this.findFormatterProvider(
+      formatterValue.metadata.libroFormatter,
+    );
+    const originDecodedValue = originFormatter.decode(formatterValue);
+    const targetFormatter = this.findFormatterProvider(libroFormatter);
+    if (targetFormatter.validate(originDecodedValue)) {
+      return originDecodedValue as unknown as U;
+    } else {
+      const formatterTransProvider = this.findFormatterTransProvider(
+        formatterValue.metadata.libroFormatter,
+        libroFormatter,
+      );
+      const decodedValue = formatterTransProvider.decodedValueTrans(originDecodedValue);
+      return decodedValue;
+    }
+  }
+}

package/src/formatter/libro-formatter-module.ts

@@ -0,0 +1,19 @@
+import { ManaModule } from '@difizen/mana-app';
+
+import { FormatterJsonContribution } from './libro-formatter-json-contribution.js';
+import { LibroFormatterManager } from './libro-formatter-manager.js';
+import {
+  FormatterContribution,
+  FormatterTransContribution,
+} from './libro-formatter-protocol.js';
+import { FormatterStringContribution } from './libro-formatter-string-contribution.js';
+import { FormatterTransDefaultContribution } from './libro-formatter-trans-default-contribution.js';
+
+export const LibroFormatterModule = ManaModule.create()
+  .contribution(FormatterContribution, FormatterTransContribution)
+  .register(
+    LibroFormatterManager,
+    FormatterStringContribution,
+    FormatterJsonContribution,
+    FormatterTransDefaultContribution,
+  );

package/src/formatter/libro-formatter-protocol.ts

@@ -0,0 +1,63 @@
+import type { MultilineString } from '@difizen/libro-common';
+import { Syringe } from '@difizen/mana-app';
+
+export const FormatterContribution = Syringe.defineToken('FormatterContribution');
+
+export interface FormatterContribution<T> {
+  formatter: string;
+  formatterOptions?: object;
+  canHandle: (libroFormatter: string, options?: object) => number;
+  encode: (source: T) => DefaultEncodedFormatter;
+  decode: (formatterValue: DefaultEncodedFormatter) => T;
+  validate: (source: T) => source is T;
+}
+
+export const FormatterTransContribution = Syringe.defineToken(
+  'FormatterTransContribution',
+);
+
+export interface FormatterTransContribution<T, U> {
+  origin?: string;
+  target?: string;
+  priority: number;
+  decodedValueTrans: (source: T) => U;
+}
+
+export interface DefaultEncodedFormatter {
+  source: MultilineString;
+  metadata: {
+    libroFormatter: string;
+    [key: string]: any;
+  };
+  [key: string]: any;
+}
+
+export interface DefaultDecodedFormatter {
+  value: string;
+  [key: string]: any;
+}
+
+export const DefaultDecodedFormatter = {
+  is: (arg: Record<any, any> | undefined): arg is DefaultDecodedFormatter => {
+    return (
+      !!arg &&
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      'value' in arg &&
+      typeof (arg as any).value === 'string'
+    );
+  },
+};
+
+export const DefaultEncodedFormatter = {
+  is: (arg: Record<any, any> | undefined): arg is DefaultEncodedFormatter => {
+    return (
+      !!arg &&
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      'source' in arg &&
+      'metadata' in arg &&
+      'libroFormatter' in arg['metadata'] &&
+      typeof (arg as any).metadata.libroFormatter === 'string' &&
+      typeof (arg as any).metadata === 'object'
+    );
+  },
+};

package/src/formatter/libro-formatter-string-contribution.ts

@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { concatMultilineString } from '@difizen/libro-common';
+import { singleton } from '@difizen/mana-app';
+
+import type { DefaultEncodedFormatter } from './libro-formatter-protocol.js';
+import {
+  DefaultDecodedFormatter,
+  FormatterContribution,
+} from './libro-formatter-protocol.js';
+
+@singleton({ contrib: FormatterContribution })
+export class FormatterStringContribution
+  implements FormatterContribution<DefaultDecodedFormatter>
+{
+  formatter = 'formatter-string';
+  formatterOptions?: object;
+
+  canHandle = (libroFormatter: string) => {
+    if (libroFormatter === this.formatter) {
+      return 100;
+    }
+    return 1;
+  };
+
+  encode = (source: DefaultDecodedFormatter) => {
+    return {
+      source: source.value,
+      metadata: {
+        libroFormatter: 'formatter-string',
+      },
+    };
+  };
+
+  decode = (formatterValue: DefaultEncodedFormatter) => {
+    return { value: concatMultilineString(formatterValue.source) };
+  };
+
+  validate = (source: DefaultDecodedFormatter): source is DefaultDecodedFormatter => {
+    return DefaultDecodedFormatter.is(source);
+  };
+}

package/src/formatter/libro-formatter-trans-default-contribution.ts

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { singleton } from '@difizen/mana-app';
+
+import type { DefaultDecodedFormatter } from './libro-formatter-protocol.js';
+import { FormatterTransContribution } from './libro-formatter-protocol.js';
+
+@singleton({ contrib: FormatterTransContribution })
+export class FormatterTransDefaultContribution
+  implements
+    FormatterTransContribution<DefaultDecodedFormatter, DefaultDecodedFormatter>
+{
+  priority = 1;
+
+  decodedValueTrans = (source: DefaultDecodedFormatter) => source;
+}