npm support

[F-loat]

Is there any npm package available? If not, are there any plans to release it?

[F-loat]

import {
  CommandType,
  ICommand,
  ICommandService,
  IUniverInstanceService,
  Inject,
  Injector,
  Plugin,
} from "@univerjs/core";

import {
  ComponentManager,
  IMenuManagerService,
  MenuItemType,
  RibbonStartGroup,
} from "@univerjs/ui";
import { FolderSingle } from "@univerjs/icons";
import LuckyExcel from 'luckyexcel';

// can only copy
import { luckyToUniver } from "./luckyToUniver";

/**
 * wait user select xlsx file
 */
const waitUserSelectXLSXFile = (
  onSelect: (data: {
    data: any[],
    title: string,
    userInfo: string,
  }) => void
) => {
  const input = document.createElement("input");
  input.type = "file";
  input.accept = ".xlsx";
  input.click();

  input.onchange = () => {
    const file = input.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = () => {
      const text = reader.result;
      if (typeof text !== "string") return;

      LuckyExcel.transformExcelToLucky(file, (json) => {
        onSelect({
          data: json.sheets,
          title: json.info.name,
          userInfo: json.info.creator,
        });
      });
    };
    reader.readAsText(file);
  };
};

/**
 * Import XLSX Button Plugin
 * A simple Plugin example, show how to write a plugin.
 */
class ImportXLSXButtonPlugin extends Plugin {
  static pluginName = "import-xlsx-plugin";

  constructor(
    _config: null,
    // inject injector, required
    @Inject(Injector) readonly _injector: Injector,
    // inject menu service, to add toolbar button
    @Inject(IMenuManagerService)
    private readonly menuManagerService: IMenuManagerService,
    // inject command service, to register command handler
    @Inject(ICommandService) private readonly commandService: ICommandService,
    // inject component manager, to register icon component
    @Inject(ComponentManager)
    private readonly componentManager: ComponentManager
  ) {
    super();
  }

  /**
   * The first lifecycle of the plugin mounted on the Univer instance,
   * the Univer business instance has not been created at this time.
   * The plugin should add its own module to the dependency injection system at this lifecycle.
   * It is not recommended to initialize the internal module of the plugin outside this lifecycle.
   */
  onStarting() {
    // register icon component
    this.componentManager.register("FolderSingle", FolderSingle);

    const buttonId = "import-xlsx-button";

    const command: ICommand = {
      type: CommandType.OPERATION,
      id: buttonId,
      handler: (accessor) => {
        // inject univer instance service
        const univer = accessor.get(IUniverInstanceService);

        // wait user select xlsx file
        waitUserSelectXLSXFile((data) => {
          // set sheet data
          const unitId = univer.getFocusedUnit()?.getUnitId()
          if (unitId) univer.disposeUnit(unitId)
          univer.createUnit(2, luckyToUniver(data));
        });
        return true;
      },
    };

    const menuItemFactory = () => ({
      id: buttonId,
      title: "Import XLSX",
      tooltip: "Import XLSX",
      icon: "FolderSingle", // icon name
      type: MenuItemType.BUTTON,
    });

    this.menuManagerService.mergeMenu({
      [RibbonStartGroup.OTHERS]: {
        [buttonId]: {
          order: 10,
          menuItemFactory,
        },
      },
    });

    this.commandService.registerCommand(command);
  }
}

export default ImportXLSXButtonPlugin;