@casualoffice/sheets 0.9.0

package/dist/sheets.js

@@ -0,0 +1,658 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/sheets/CasualSheets.tsx
+import { useEffect, useRef } from "react";
+import {
+  ICommandService,
+  LocaleType,
+  LogLevel,
+  ThemeService as ThemeService2,
+  Univer,
+  UniverInstanceType
+} from "@univerjs/core";
+import { FUniver } from "@univerjs/core/facade";
+import { defaultTheme } from "@univerjs/themes";
+import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
+import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
+import { UniverUIPlugin } from "@univerjs/ui";
+import { UniverDocsPlugin } from "@univerjs/docs";
+import { UniverDocsUIPlugin } from "@univerjs/docs-ui";
+import { UniverSheetsPlugin } from "@univerjs/sheets";
+import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";
+import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
+import { UniverSheetsFormulaUIPlugin } from "@univerjs/sheets-formula-ui";
+import { UniverSheetsNumfmtPlugin } from "@univerjs/sheets-numfmt";
+import { UniverSheetsNumfmtUIPlugin } from "@univerjs/sheets-numfmt-ui";
+
+// src/sheets/api.ts
+import "@univerjs/sheets/facade";
+import { ThemeService } from "@univerjs/core";
+function createCasualSheetsAPI(univerAPI) {
+  return {
+    univer: univerAPI,
+    getSnapshot() {
+      return univerAPI.getActiveWorkbook()?.save() ?? null;
+    },
+    loadSnapshot(data) {
+      const current = univerAPI.getActiveWorkbook();
+      if (current) univerAPI.disposeUnit(current.getId());
+      univerAPI.createWorkbook(data);
+    },
+    getSelection() {
+      const wb = univerAPI.getActiveWorkbook();
+      const range = wb?.getActiveRange();
+      if (!wb || !range) return null;
+      return {
+        unitId: wb.getId(),
+        sheetId: wb.getActiveSheet().getSheetId(),
+        range: range.getRange()
+      };
+    },
+    executeCommand(id, params) {
+      return univerAPI.executeCommand(id, params);
+    },
+    setTheme(appearance) {
+      const dark = appearance === "dark";
+      const injector = univerAPI._injector;
+      const themeService = injector?.get(ThemeService);
+      if (themeService && themeService.darkMode !== dark) themeService.setDarkMode(dark);
+    }
+  };
+}
+
+// src/univer/lazy-plugins.ts
+var LOADERS = {
+  cf: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-conditional-formatting"),
+      import("@univerjs/sheets-conditional-formatting-ui")
+    ]);
+    return [
+      [base.UniverSheetsConditionalFormattingPlugin],
+      [ui.UniverSheetsConditionalFormattingUIPlugin]
+    ];
+  },
+  dv: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-data-validation"),
+      import("@univerjs/sheets-data-validation-ui")
+    ]);
+    return [
+      [base.UniverSheetsDataValidationPlugin],
+      [ui.UniverSheetsDataValidationUIPlugin]
+    ];
+  },
+  hyperlink: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-hyper-link"),
+      import("@univerjs/sheets-hyper-link-ui")
+    ]);
+    return [
+      [base.UniverSheetsHyperLinkPlugin],
+      [ui.UniverSheetsHyperLinkUIPlugin]
+    ];
+  },
+  note: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-note"),
+      import("@univerjs/sheets-note-ui")
+    ]);
+    return [[base.UniverSheetsNotePlugin], [ui.UniverSheetsNoteUIPlugin]];
+  },
+  table: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-table"),
+      import("@univerjs/sheets-table-ui")
+    ]);
+    return [[base.UniverSheetsTablePlugin], [ui.UniverSheetsTableUIPlugin]];
+  },
+  threadComment: async () => {
+    const [tc, tcUi, sheetsTc, sheetsTcUi] = await Promise.all([
+      import("@univerjs/thread-comment"),
+      import("@univerjs/thread-comment-ui"),
+      import("@univerjs/sheets-thread-comment"),
+      import("@univerjs/sheets-thread-comment-ui")
+    ]);
+    return [
+      [tc.UniverThreadCommentPlugin],
+      [tcUi.UniverThreadCommentUIPlugin],
+      [sheetsTc.UniverSheetsThreadCommentPlugin],
+      [sheetsTcUi.UniverSheetsThreadCommentUIPlugin]
+    ];
+  },
+  drawing: async () => {
+    const [d, dUi, sd, sdUi] = await Promise.all([
+      import("@univerjs/drawing"),
+      import("@univerjs/drawing-ui"),
+      import("@univerjs/sheets-drawing"),
+      import("@univerjs/sheets-drawing-ui"),
+      // Side-effect imports: install FWorksheet.insertImage / getImages /
+      // updateImages on the facade prototype. Without these, code that
+      // reaches in via the FUniver facade (e2e specs, future shell glue)
+      // sees an undefined method even though the plugin is registered.
+      import("@univerjs/sheets-drawing/facade"),
+      import("@univerjs/sheets-drawing-ui/facade")
+    ]);
+    return [
+      [d.UniverDrawingPlugin],
+      [dUi.UniverDrawingUIPlugin],
+      [sd.UniverSheetsDrawingPlugin],
+      [sdUi.UniverSheetsDrawingUIPlugin]
+    ];
+  },
+  sort: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-sort"),
+      import("@univerjs/sheets-sort-ui")
+    ]);
+    return [[base.UniverSheetsSortPlugin], [ui.UniverSheetsSortUIPlugin]];
+  },
+  filter: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-filter"),
+      import("@univerjs/sheets-filter-ui")
+    ]);
+    return [[base.UniverSheetsFilterPlugin], [ui.UniverSheetsFilterUIPlugin]];
+  },
+  findReplace: async () => {
+    const [base, sheets] = await Promise.all([
+      import("@univerjs/find-replace"),
+      import("@univerjs/sheets-find-replace")
+    ]);
+    return [[base.UniverFindReplacePlugin], [sheets.UniverSheetsFindReplacePlugin]];
+  }
+};
+var RESOURCE_NAME_TO_GROUP = {
+  SHEET_CONDITIONAL_FORMATTING_PLUGIN: "cf",
+  SHEET_DATA_VALIDATION_PLUGIN: "dv",
+  SHEET_HYPER_LINK_PLUGIN: "hyperlink",
+  SHEET_NOTE_PLUGIN: "note",
+  SHEET_TABLE_PLUGIN: "table",
+  SHEET_THREAD_COMMENT_BASE_PLUGIN: "threadComment",
+  SHEET_DRAWING_PLUGIN: "drawing",
+  SHEET_SORT_PLUGIN: "sort",
+  SHEET_FILTER_PLUGIN: "filter"
+};
+var loaded = /* @__PURE__ */ new Set();
+var inflight = /* @__PURE__ */ new Map();
+var currentUniver = null;
+function setUniverForLazyLoad(univer) {
+  currentUniver = univer;
+}
+function ensurePlugin(univer, group) {
+  if (loaded.has(group)) return Promise.resolve();
+  const existing = inflight.get(group);
+  if (existing) return existing;
+  const loader = LOADERS[group];
+  if (!loader) return Promise.resolve();
+  const p = loader().then((plugins) => {
+    for (const [PluginCtor, config] of plugins) {
+      univer.registerPlugin(PluginCtor, config);
+    }
+    loaded.add(group);
+    inflight.delete(group);
+  });
+  inflight.set(group, p);
+  return p;
+}
+async function eagerLoadForSnapshot(univer, snapshot) {
+  const groups = /* @__PURE__ */ new Set();
+  const resources = snapshot.resources ?? [];
+  for (const r of resources) {
+    const g = RESOURCE_NAME_TO_GROUP[r.name];
+    if (g) groups.add(g);
+  }
+  if (snapshotHasHyperlinks(snapshot)) groups.add("hyperlink");
+  await Promise.all(Array.from(groups).map((g) => ensurePlugin(univer, g)));
+}
+function idleLoadAll(univer) {
+  const groups = Object.keys(LOADERS);
+  schedule(() => {
+    for (const g of groups) {
+      void ensurePlugin(univer, g);
+    }
+  });
+}
+function schedule(fn) {
+  const ric = globalThis.requestIdleCallback;
+  if (ric) ric(fn, { timeout: 500 });
+  else setTimeout(fn, 0);
+}
+function snapshotHasHyperlinks(snapshot) {
+  const sheetOrder = snapshot.sheetOrder ?? [];
+  for (const sid of sheetOrder) {
+    const sheet = snapshot.sheets?.[sid];
+    if (!sheet?.cellData) continue;
+    const cellData = sheet.cellData;
+    for (const r of Object.keys(cellData)) {
+      const row = cellData[r];
+      for (const c of Object.keys(row)) {
+        const ranges = row[c]?.p?.body?.customRanges ?? [];
+        if (ranges.some((cr) => cr.rangeType === 0)) return true;
+      }
+    }
+  }
+  return false;
+}
+
+// src/sheets/CasualSheets.tsx
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_STYLE = {
+  width: "100%",
+  height: "100%",
+  position: "relative"
+};
+var DEFAULT_UI = {
+  header: false,
+  toolbar: false,
+  footer: false,
+  contextMenu: true
+};
+function CasualSheets({
+  initialData,
+  onReady,
+  onChange,
+  onChangeDebounceMs = 400,
+  lazyPlugins = true,
+  locale = LocaleType.EN_US,
+  locales,
+  logLevel = LogLevel.WARN,
+  ui,
+  theme = defaultTheme,
+  appearance = "light",
+  style,
+  className,
+  testId = "casual-sheets"
+}) {
+  const hostRef = useRef(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const hasOnChange = useRef(!!onChange).current;
+  const apiRef = useRef(null);
+  useEffect(() => {
+    const container = hostRef.current;
+    if (!container) return;
+    const univer = new Univer({
+      theme,
+      locale,
+      locales,
+      logLevel
+    });
+    const uiOpts = { ...DEFAULT_UI, ...ui, container };
+    univer.registerPlugin(UniverRenderEnginePlugin);
+    univer.registerPlugin(UniverFormulaEnginePlugin);
+    univer.registerPlugin(UniverUIPlugin, uiOpts);
+    univer.registerPlugin(UniverDocsPlugin);
+    univer.registerPlugin(UniverDocsUIPlugin);
+    univer.registerPlugin(UniverSheetsPlugin);
+    univer.registerPlugin(UniverSheetsUIPlugin);
+    univer.registerPlugin(UniverSheetsFormulaPlugin);
+    univer.registerPlugin(UniverSheetsFormulaUIPlugin);
+    univer.registerPlugin(UniverSheetsNumfmtPlugin);
+    univer.registerPlugin(UniverSheetsNumfmtUIPlugin);
+    if (lazyPlugins) setUniverForLazyLoad(univer);
+    let cancelled = false;
+    let changeTimer = null;
+    let changeSub;
+    void (async () => {
+      if (lazyPlugins) {
+        await eagerLoadForSnapshot(univer, initialData);
+        if (cancelled) return;
+      }
+      univer.createUnit(UniverInstanceType.UNIVER_SHEET, initialData);
+      const api = createCasualSheetsAPI(FUniver.newAPI(univer));
+      apiRef.current = api;
+      applyAppearance(api, container, appearance);
+      onReady?.(api);
+      if (hasOnChange) {
+        const injector = api.univer._injector;
+        const cmdSvc = injector?.get(ICommandService);
+        changeSub = cmdSvc?.onMutationExecutedForCollab(() => {
+          if (changeTimer) clearTimeout(changeTimer);
+          changeTimer = setTimeout(() => {
+            const snap = api.getSnapshot();
+            if (snap) onChangeRef.current?.(snap);
+          }, onChangeDebounceMs);
+        });
+        if (cancelled) changeSub?.dispose();
+      }
+      if (lazyPlugins) idleLoadAll(univer);
+    })();
+    return () => {
+      cancelled = true;
+      if (changeTimer) clearTimeout(changeTimer);
+      changeSub?.dispose();
+      apiRef.current = null;
+      if (lazyPlugins) setUniverForLazyLoad(null);
+      const toDispose = univer;
+      queueMicrotask(() => toDispose.dispose());
+    };
+  }, []);
+  useEffect(() => {
+    const api = apiRef.current;
+    const container = hostRef.current;
+    if (!api || !container) return;
+    applyAppearance(api, container, appearance);
+  }, [appearance]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: hostRef,
+      style: { ...DEFAULT_STYLE, ...style },
+      className,
+      "data-testid": testId
+    }
+  );
+}
+function applyAppearance(api, container, appearance) {
+  const dark = appearance === "dark";
+  container.classList.toggle("univer-dark", dark);
+  try {
+    const injector = api.univer._injector;
+    const themeService = injector?.get(ThemeService2);
+    if (themeService && themeService.darkMode !== dark) themeService.setDarkMode(dark);
+  } catch {
+  }
+}
+
+// src/sheets/CasualSheetsIframe.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect as useEffect2,
+  useRef as useRef2
+} from "react";
+
+// src/embed/protocol.ts
+function isCasualEnvelope(value) {
+  if (!value || typeof value !== "object") return false;
+  const v = value;
+  return typeof v.type === "string" && v.type.startsWith("casual.") && (v.app === "docs" || v.app === "sheet") && v.v === 1 && "data" in v;
+}
+
+// src/embed/EmbedHostTransport.ts
+var EmbedHostTransport = class {
+  constructor(opts) {
+    __publicField(this, "opts");
+    __publicField(this, "handlers", {});
+    __publicField(this, "boundOnMessage");
+    __publicField(this, "destroyed", false);
+    this.opts = opts;
+    this.boundOnMessage = this.onMessage.bind(this);
+    const target = opts.hostWindow ?? window;
+    target.addEventListener("message", this.boundOnMessage);
+  }
+  on(handlers) {
+    this.handlers = { ...this.handlers, ...handlers };
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    const target = this.opts.hostWindow ?? window;
+    target.removeEventListener("message", this.boundOnMessage);
+  }
+  sendHostHello(data) {
+    this.post("casual.hello", data);
+  }
+  sendSetViewMode(data) {
+    this.post("casual.command.set.viewmode", data);
+  }
+  sendSetReadOnly(data) {
+    this.post("casual.command.set.readonly", data);
+  }
+  sendSetTheme(data) {
+    this.post("casual.command.set.theme", data);
+  }
+  sendSetLocale(data) {
+    this.post("casual.command.set.locale", data);
+  }
+  sendCommandSave() {
+    this.post("casual.command.save", null);
+  }
+  sendCommandFocus() {
+    this.post("casual.command.focus", null);
+  }
+  /** Host → Editor: run a formatting / navigation command (bold,
+   *  italic, undo, …) against the active selection. v0.6+. */
+  sendCommandExecute(data) {
+    this.post("casual.command.execute", data);
+  }
+  sendSignatureRequest(id, data) {
+    this.post("casual.signature.request", data, id);
+  }
+  sendSignatureCancel(data) {
+    this.post("casual.signature.cancel", data);
+  }
+  onMessage(ev) {
+    if (this.destroyed) return;
+    if (ev.origin !== this.opts.embedOrigin) return;
+    if (ev.source !== this.opts.iframeWindow) return;
+    if (!isCasualEnvelope(ev.data)) return;
+    if (ev.data.app !== this.opts.app) return;
+    void this.dispatch(ev.data);
+  }
+  async dispatch(env) {
+    switch (env.type) {
+      case "casual.ready":
+        this.handlers.onEditorReady?.(env.data);
+        return;
+      case "casual.load.request": {
+        if (!this.handlers.onLoadRequest) return;
+        const id = env.id ?? "";
+        try {
+          const resp = await this.handlers.onLoadRequest(env.data);
+          const transfer = resp.ok ? [resp.bytes] : [];
+          this.post("casual.load.response", resp, id, transfer);
+        } catch (err) {
+          this.post(
+            "casual.load.response",
+            {
+              ok: false,
+              code: "host_error",
+              message: err instanceof Error ? err.message : String(err)
+            },
+            id
+          );
+        }
+        return;
+      }
+      case "casual.save.request": {
+        if (!this.handlers.onSaveRequest) return;
+        const id = env.id ?? "";
+        try {
+          const resp = await this.handlers.onSaveRequest(env.data);
+          this.post("casual.save.response", resp, id);
+        } catch (err) {
+          this.post(
+            "casual.save.response",
+            {
+              ok: false,
+              code: "host_error",
+              message: err instanceof Error ? err.message : String(err)
+            },
+            id
+          );
+        }
+        return;
+      }
+      case "casual.selection.changed":
+        this.handlers.onSelectionChanged?.(env.data);
+        return;
+      case "casual.selection.format-state":
+        this.handlers.onSelectionFormatState?.(env.data);
+        return;
+      case "casual.telemetry.event":
+        this.handlers.onTelemetry?.(env.data);
+        return;
+      case "casual.signature.field.signed":
+        this.handlers.onSignatureFieldSigned?.(env.data);
+        return;
+      case "casual.signature.complete":
+        this.handlers.onSignatureComplete?.(env.data);
+        return;
+      case "casual.signature.cancel":
+        this.handlers.onSignatureCancel?.(env.data);
+        return;
+      case "casual.signature.request.ack":
+        return;
+      case "casual.error":
+        this.handlers.onError?.(env.data);
+        return;
+      default:
+        return;
+    }
+  }
+  post(type, data, id, transfer) {
+    const env = {
+      type,
+      app: this.opts.app,
+      v: 1,
+      data,
+      ...id ? { id } : {}
+    };
+    const send = this.opts.iframeWindow.postMessage.bind(
+      this.opts.iframeWindow
+    );
+    send(env, this.opts.embedOrigin, transfer);
+  }
+};
+
+// src/sheets/CasualSheetsIframe.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var DEFAULT_STYLE2 = {
+  width: "100%",
+  height: "100%",
+  border: "none",
+  display: "block"
+};
+var CasualSheetsIframe = forwardRef(
+  function CasualSheetsIframe2(props, ref) {
+    const {
+      fileSource,
+      docId,
+      viewMode = "editor",
+      embedBasePath = "/embed/sheets",
+      onSelectionChanged,
+      onSelectionFormatState,
+      onTelemetry,
+      onError,
+      style,
+      className,
+      testId = "casual-sheets-iframe"
+    } = props;
+    const iframeRef = useRef2(null);
+    const transportRef = useRef2(null);
+    const fileSourceRef = useRef2(fileSource);
+    fileSourceRef.current = fileSource;
+    const onLoad = useCallback(async (req) => {
+      try {
+        const { bytes, name, etag } = await fileSourceRef.current.open(req.docId);
+        return {
+          ok: true,
+          bytes,
+          fileName: name,
+          ...etag !== void 0 ? { etag } : {}
+        };
+      } catch (err) {
+        return {
+          ok: false,
+          code: "open_failed",
+          message: err instanceof Error ? err.message : String(err)
+        };
+      }
+    }, []);
+    const onSave = useCallback(
+      async (req) => {
+        try {
+          if (!fileSourceRef.current.save) {
+            return {
+              ok: false,
+              code: "save_unsupported",
+              message: "host fileSource does not implement save"
+            };
+          }
+          const opts = req.baseEtag !== void 0 ? { etag: req.baseEtag } : void 0;
+          const { etag } = await fileSourceRef.current.save(req.docId, req.bytes, opts);
+          return { ok: true, etag };
+        } catch (err) {
+          return {
+            ok: false,
+            code: "save_failed",
+            message: err instanceof Error ? err.message : String(err)
+          };
+        }
+      },
+      []
+    );
+    const onIframeLoad = useCallback(() => {
+      const iframe = iframeRef.current;
+      if (!iframe?.contentWindow) return;
+      transportRef.current?.destroy();
+      const transport = new EmbedHostTransport({
+        app: "sheet",
+        iframeWindow: iframe.contentWindow,
+        embedOrigin: window.location.origin
+      });
+      transport.on({
+        onLoadRequest: onLoad,
+        onSaveRequest: onSave,
+        ...onSelectionChanged ? { onSelectionChanged } : {},
+        ...onSelectionFormatState ? { onSelectionFormatState } : {},
+        ...onTelemetry ? { onTelemetry } : {},
+        ...onError ? { onError } : {},
+        onEditorReady: () => {
+          transport.sendHostHello({ capabilities: ["load", "save"] });
+          transport.sendSetViewMode({ viewMode });
+        }
+      });
+      transportRef.current = transport;
+    }, [
+      onLoad,
+      onSave,
+      onSelectionChanged,
+      onSelectionFormatState,
+      onTelemetry,
+      onError,
+      viewMode
+    ]);
+    useEffect2(() => {
+      transportRef.current?.sendSetViewMode({ viewMode });
+    }, [viewMode]);
+    useEffect2(() => {
+      return () => {
+        transportRef.current?.destroy();
+        transportRef.current = null;
+      };
+    }, []);
+    if (ref) {
+      const apiRef = ref;
+      apiRef.current = {
+        setViewMode: (mode) => transportRef.current?.sendSetViewMode({ viewMode: mode }),
+        iframe: () => iframeRef.current,
+        executeCommand: (command) => transportRef.current?.sendCommandExecute({ command })
+      };
+    }
+    const url = `${embedBasePath}/embed.html?app=sheet&docId=${encodeURIComponent(docId)}&viewMode=${viewMode}`;
+    return /* @__PURE__ */ jsx2(
+      "iframe",
+      {
+        ref: iframeRef,
+        src: url,
+        onLoad: onIframeLoad,
+        title: "Casual Sheets",
+        sandbox: "allow-scripts allow-same-origin allow-downloads allow-modals",
+        style: { ...DEFAULT_STYLE2, ...style },
+        className,
+        "data-testid": testId
+      }
+    );
+  }
+);
+export {
+  CasualSheets,
+  CasualSheetsIframe,
+  createCasualSheetsAPI
+};
+//# sourceMappingURL=sheets.js.map