@difizen/libro-core 0.0.0-snapshot-20241017072317

package/src/components/dnd-component/virtualized-manager.ts

@@ -0,0 +1,34 @@
+import { prop, singleton } from '@difizen/mana-app';
+
+export interface IVirtualizedManager {
+  openVirtualized: (length: number, size?: number) => Promise<boolean>;
+  isVirtualized: boolean;
+}
+
+@singleton()
+export class VirtualizedManager implements IVirtualizedManager {
+  /**
+   * 因为进行isVirtualized判断过后才会渲染list
+   * 所以它用于滚动到某个cell的判断依据是没有问题的。
+   */
+  @prop()
+  isVirtualized = false;
+
+  /**
+   *
+   * @param length cell个数
+   * @param size undefined 或者 单位 为B
+   * @returns 是否使用虚拟滚动
+   */
+  openVirtualized = async (length: number, size?: number) => {
+    // this.isVirtualized = true;
+    // return true;
+    if (length > 100 || (size && size > 4)) {
+      this.isVirtualized = true;
+      return true;
+    } else {
+      this.isVirtualized = false;
+      return false;
+    }
+  };
+}

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from './cell-protocol.js';
+export * from './dnd-cell-item-render.js';
+export * from './dnd-component/index.js';
+export * from './libro-component.js';
+export * from './libro-side-toolbar-menu.js';

package/src/components/libro-component.tsx

@@ -0,0 +1,30 @@
+import { ViewRender } from '@difizen/mana-app';
+import { useInject } from '@difizen/mana-app';
+import { useEffect, useState } from 'react';
+
+import type { NotebookOption, NotebookView } from '../libro-protocol.js';
+import { LibroService } from '../libro-service.js';
+
+export function LibroComponent(props: { options: NotebookOption }) {
+  const libroService = useInject(LibroService);
+  const [libroView, setLibroView] = useState<NotebookView | undefined>(undefined);
+
+  useEffect(() => {
+    libroService
+      .getOrCreateView(props.options)
+      .then((view) => {
+        if (!view) {
+          return;
+        }
+        setLibroView(view);
+        return;
+      })
+      .catch(() => {
+        //
+      });
+  }, [props.options, libroService]);
+  if (!libroView || !libroView.view) {
+    return null;
+  }
+  return <ViewRender view={libroView} />;
+}

package/src/components/libro-side-toolbar-menu.tsx

@@ -0,0 +1,82 @@
+import type { Toolbar } from '@difizen/mana-app';
+import {
+  CommandRegistry,
+  getOrigin,
+  ToolbarInstance,
+  useInject,
+} from '@difizen/mana-app';
+import { Menu, MenuContext } from '@difizen/mana-react';
+import type { ReactNode } from 'react';
+
+import type { LibroToolbarArags } from '../toolbar/index.js';
+
+export type LibroSideToolbarMenuItemType = {
+  id: string;
+  label: ReactNode;
+  /**
+   * When extra, group means that the item will be located in a submenu(s) of the `...` dropdown.
+   * The submenu's title is named by the name in group, e.g. ['menu', 'submenu'].
+   */
+  readonly group?: string | string[];
+  disabled?: boolean;
+};
+
+interface LibroSideToolbarMenuInlinesProps {
+  items: LibroSideToolbarMenuItemType[];
+}
+
+export const LibroSideToolbarMenuInlines: React.FC<
+  LibroSideToolbarMenuInlinesProps
+> = ({ items }: LibroSideToolbarMenuInlinesProps) => {
+  const command = useInject(CommandRegistry);
+  const toolbar = useInject<Toolbar>(ToolbarInstance);
+  const data = toolbar.currentArgs as LibroToolbarArags;
+  const args = getOrigin(data) || [];
+  if (!items.length) {
+    return null;
+  }
+  const nodes: React.ReactNode[] = [];
+  let group: string | undefined = undefined;
+  const baseCls = 'mana-menu';
+  const contextValue: MenuContext.Context = {
+    prefixCls: baseCls,
+  };
+  items.forEach((item) => {
+    let itemGroup: string | string[] | undefined = item.group;
+    if (itemGroup) {
+      itemGroup = typeof itemGroup === 'string' ? itemGroup : itemGroup[0];
+    }
+    if (nodes.length && itemGroup !== group) {
+      nodes.push(itemGroup && <Menu.Divider key={`${item.id}-divider`} />);
+    }
+    group = itemGroup;
+    nodes.push(
+      <Menu.Item
+        key={item.id}
+        onClick={() => {
+          command.executeCommand(item.id, ...args);
+        }}
+      >
+        {item.label}
+      </Menu.Item>,
+    );
+  });
+  return (
+    <div className="libro-toolbar-menu-inlines">
+      <MenuContext.Provider value={contextValue}>{nodes} </MenuContext.Provider>
+    </div>
+  );
+};
+
+interface LibroSideToolbarMenuProps {
+  items: LibroSideToolbarMenuItemType[];
+}
+export const LibroSideToolbarMenu: React.FC<LibroSideToolbarMenuProps> = ({
+  items,
+}: LibroSideToolbarMenuProps) => {
+  return (
+    <div className="libro-side-toolbar-menu">
+      <LibroSideToolbarMenuInlines items={items} />
+    </div>
+  );
+};

package/src/components/libro-view-header.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { ToolbarRender, useInject, ViewInstance } from '@difizen/mana-app';
+import type { FC } from 'react';
+import { useMemo } from 'react';
+
+import { LibroToolbarArea } from '../libro-protocol.js';
+import type { LibroView } from '../libro-view.js';
+
+export const LibroViewHeader: FC = () => {
+  const instance = useInject<LibroView>(ViewInstance);
+  const headerLeftArgs = useMemo(() => {
+    return [instance.model.active, instance, LibroToolbarArea.HeaderLeft];
+  }, [instance.model.active, instance]);
+  const headerCenterArgs = useMemo(() => {
+    return [instance.model.active, instance, LibroToolbarArea.HeaderCenter];
+  }, [instance.model.active, instance]);
+  const headerRightArgs = useMemo(() => {
+    return [instance.model.active, instance, LibroToolbarArea.HeaderRight];
+  }, [instance.model.active, instance]);
+  return (
+    <>
+      <div className="libro-header-left">
+        <ToolbarRender data={headerLeftArgs} />
+      </div>
+      <div className="libro-header-center">
+        <ToolbarRender data={headerCenterArgs} />
+      </div>
+      <div className="libro-header-right">
+        <ToolbarRender data={headerRightArgs} />
+      </div>
+    </>
+  );
+};

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!.scrollToCellPosition(params.cellIndex, params.cellOffset);
+    });
+    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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,16 @@
+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) {
+    return Promise.resolve({
+      metadata: {},
+      cells: [],
+      nbformat: 4,
+      nbformat_minor: 4,
+    });
+  }
+}

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

@@ -0,0 +1,17 @@
+import { ManaModule } from '@difizen/mana-app';
+
+import { DefaultContentContribution } from './libro-content-contribution.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, ContentSaveContribution)
+  .register(
+    DefaultContentContribution,
+    LibroContentService,
+    DefaultSaveContentContribution,
+  );

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

@@ -0,0 +1,14 @@
+import type { INotebookContent } from '@difizen/libro-common';
+import { Syringe } from '@difizen/mana-app';
+
+export const ContentContribution = Syringe.defineToken('ContentContribution');
+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

@@ -0,0 +1,48 @@
+import type { Contribution } from '@difizen/mana-app';
+import { contrib, Priority, singleton } from '@difizen/mana-app';
+
+import {
+  ContentContribution,
+  ContentSaveContribution,
+} from './libro-content-protocol.js';
+
+@singleton()
+export class LibroContentService {
+  @contrib(ContentContribution)
+  contentProvider: Contribution.Provider<ContentContribution>;
+
+  @contrib(ContentSaveContribution)
+  contentSaveProvider: Contribution.Provider<ContentSaveContribution>;
+
+  protected findProvider(
+    options: Record<string, any>,
+    model: any,
+  ): ContentContribution {
+    const prioritized = Priority.sortSync(
+      this.contentProvider.getContributions(),
+      (contribution) => contribution.canHandle(options, model),
+    );
+    const sorted = prioritized.map((c) => c.value);
+    return sorted[0]!;
+  }
+
+  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,
+  );