Request to publish npm package version 0.22.4

[zhe-he]

Currently, the repository has versions 0.22.4, 0.21.0, and 0.19.5, but the npm package only has 0.19.5. Please publish the npm packages for versions 0.22.4 and 0.21.0.

[mayurgavhane03]

Hey Hi,
I’m trying to use an npm package to create an editor. I’ve also separated the playground from the monorepo and am trying to use the npm packages there, but it’s not working as expected. Additionally, I’m trying to publish it as a private npm package with a different name, but I’m unable to publish it. If you have any idea how to use the npm package correctly, please let me know.

[TheApeMachine]

Fork repo.
Clone fork

cd blocksuite
rm -rf .local-packs
mkdir -p .local-packs

yarn workspaces foreach -Rpt --from @blocksuite/integration-test \
  pack --out .local-packs/%s-%v.tgz

Go into your project where you want to use, let's assume it is in: ../myproject

cd ../myproject
pnpm add "../blocksuite/.local-packs/"*.tgz

Make a basic editor.

import type { DocMode } from '@blocksuite/affine/model';
import { TestWorkspace } from '@blocksuite/affine/store/test';

import type { TestAffineEditorContainer } from '@blocksuite/integration-test';
import { effects as blocksuiteEffects } from '@blocksuite/integration-test/effects';
import { getTestStoreManager } from '@blocksuite/integration-test/store';
import { getTestViewManager } from '@blocksuite/integration-test/view';
import { useEffect, useMemo, useRef, useState } from "react";

blocksuiteEffects(); // defines <affine-editor-container> and pulls in @blocksuite/affine/effects

function createEmptyAffineStore() {
	const workspace = new TestWorkspace();
	workspace.storeExtensions = getTestStoreManager().get("store");
	workspace.meta.initialize();

	const doc = workspace.createDoc();
	doc.load();
	const store = doc.getStore();

	const rootId = store.addBlock("affine:page", {});
	store.addBlock("affine:surface", {}, rootId);
	const noteId = store.addBlock("affine:note", {}, rootId);
	store.addBlock("affine:paragraph", {}, noteId);

	return { workspace, store };
}

export const MyEditor = () => {
	const hostRef = useRef<HTMLDivElement | null>(null);
	const editorRef = useRef<TestAffineEditorContainer | null>(null);
	const [mode, setMode] = useState<DocMode>("page");

	const { store } = useMemo(() => createEmptyAffineStore(), []);

	useEffect(() => {
		const host = hostRef.current;
		if (!host) return;

		const viewManager = getTestViewManager();

		const editor = document.createElement(
			"affine-editor-container",
		) as TestAffineEditorContainer;
		editor.style.display = "block";
		editor.style.height = "100%"; // important for edgeless
		editor.autofocus = true;

		editor.doc = store;
		editor.pageSpecs = viewManager.get("page");
		editor.edgelessSpecs = viewManager.get("edgeless");
		editor.switchEditor(mode);

		host.appendChild(editor);
		editorRef.current = editor;

		return () => {
			editorRef.current = null;
			editor.remove();
		};
	}, [store, mode]);

	useEffect(() => {
		editorRef.current?.switchEditor(mode);
	}, [mode]);

	return (
		<div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
			<div style={{ padding: 8, display: "flex", gap: 8 }}>
				<button
					type="button"
					onClick={() => setMode((m) => (m === "page" ? "edgeless" : "page"))}
				>
					Switch to {mode === "page" ? "Edgeless" : "Page"}
				</button>
			</div>

			<div ref={hostRef} style={{ flex: 1, minHeight: 0 }} />
		</div>
	);
};

[bryanmaina]

Hi guys! Will this ever be solved? Or is there a way to use blocksuite without it?