Refactor/bky helper (#98)

* feat: make spanner plugin

* feat: add config to spanner plugin

* fix: linting errors

* feat: config mountpoint

* fix: unit test

* refactor: bky helper

* refactor: remove unused imports

packages/blocky-core/src/data/change.spec.ts

@@ -1,6 +1,5 @@
 import { test, expect, describe } from "vitest";
 import {
-  BlockDataElement,
   BlockyDocument,
   DataBaseElement,
   BlockyTextModel,
@@ -10,6 +9,7 @@ import {
   State,
   type TextEditOperation,
 } from "./index";
+import { bky } from "../helper/bky";
 import Delta from "quill-delta-es";
 
 test("test delete", () => {
@@ -147,7 +147,7 @@ describe("transform operation", () => {
 
 describe("merge", () => {
   test("pushWillMerge", () => {
-    const textBlock = new BlockDataElement("Text", "Blk-text1", {
+    const textBlock = bky.text({
       textContent: new BlockyTextModel(),
     });
     const document = new BlockyDocument({
@@ -164,10 +164,10 @@ describe("merge", () => {
     expect(first.delta.ops).toEqual([{ insert: "ba" }]);
   });
   test("testWillNotMerge", () => {
-    const textBlock1 = new BlockDataElement("Text", "Blk-text1", {
+    const textBlock1 = bky.text({
       textContent: new BlockyTextModel(),
     });
-    const textBlock2 = new BlockDataElement("Text", "Blk-text2", {
+    const textBlock2 = bky.text({
       textContent: new BlockyTextModel(),
     });
     const document = new BlockyDocument({

packages/blocky-core/src/data/deserialize.spec.ts

@@ -8,14 +8,16 @@ import {
   BlockyTextModel,
   blockyNodeFromJsonNode,
 } from "./index";
+import { bky } from "../helper/bky";
 
 test("deserialize BlockElement", () => {
-  const blockElement = new BlockDataElement("Text", "Blk-text-1");
+  const blockElement = bky.text();
+  const id = blockElement.id;
   const json = blockElement.toJSON();
   const back = blockyNodeFromJsonNode(json) as BlockDataElement;
   expect(back instanceof BlockDataElement).toBeTruthy();
   expect(back.t).toBe("Text");
-  expect(back.id).toBe("Blk-text-1");
+  expect(back.id).toBe(id);
 });
 
 test("deserialize BlockyTextModel", () => {
@@ -32,7 +34,7 @@ test("deserialize BlockyTextModel", () => {
 });
 
 test("deserialize document", () => {
-  const blockElement = new BlockDataElement("Text", "Blk-text-1");
+  const blockElement = bky.text();
   const document = new BlockyDocument({
     bodyChildren: [blockElement],
   });

packages/blocky-core/src/helper/bky.ts

@@ -0,0 +1,32 @@
+import {
+  type AttributesObject,
+  type DataBaseNode,
+  BlockDataElement,
+  BlockyTextModel,
+} from "@pkg/data";
+import { makeDefaultIdGenerator } from "./idHelper";
+import Delta from "quill-delta-es";
+
+export const bky = {
+  idGenerator: makeDefaultIdGenerator(),
+  text(
+    attributes?: AttributesObject | Delta,
+    children?: DataBaseNode[]
+  ): BlockDataElement {
+    const newId = this.idGenerator.mkBlockId();
+    if (attributes instanceof Delta) {
+      return new BlockDataElement("Text", newId, {
+        textContent: new BlockyTextModel(attributes),
+      });
+    }
+    return new BlockDataElement("Text", newId, attributes, children);
+  },
+  element(
+    text: string,
+    attributes?: AttributesObject,
+    children?: DataBaseNode[]
+  ) {
+    const newId = this.idGenerator.mkBlockId();
+    return new BlockDataElement(text, newId, attributes, children);
+  },
+};

packages/blocky-core/src/index.ts

@@ -7,6 +7,7 @@ export * from "./block/basic";
 export { ContentBlock } from "./block/contentBlock";
 export { CustomBlock } from "./block/customBlock";
 export { makeDefaultIdGenerator, type IdGenerator } from "./helper/idHelper";
+export { bky } from "./helper/bky";
 export { type ToolbarFactory, type Toolbar } from "./view/toolbarDelegate";
 export { FollowerWidget } from "./view/followerWidget";
 export {

packages/blocky-core/src/model/editorState.ts

@@ -11,6 +11,7 @@ import {
   CursorState,
   State,
 } from "@pkg/data";
+import { bky } from "@pkg/helper/bky";
 import Delta from "quill-delta-es";
 import { Block } from "@pkg/block/basic";
 import { BlockRegistry } from "@pkg/registry/blockRegistry";
@@ -93,12 +94,7 @@ export class EditorState extends State {
     if (isUndefined(attributes.textContent)) {
       attributes.textContent = new BlockyTextModel(delta);
     }
-    return new BlockDataElement(
-      TextBlock.Name,
-      this.idGenerator.mkBlockId(),
-      attributes,
-      children
-    );
+    return bky.text(attributes, children);
   }
 
   #handleNewBlockMounted(blockElement: BlockDataElement) {

packages/blocky-core/src/model/test/block.test.ts

@@ -1,20 +1,20 @@
 import { test, expect } from "vitest";
 import "@pkg/index";
-import { BlockyDocument, BlockDataElement } from "@pkg/data";
-import { TextBlock } from "@pkg/block/textBlock";
+import { BlockyDocument } from "@pkg/data";
+import { bky } from "@pkg/helper/bky";
 
 test("block level 0", () => {
   const root = new BlockyDocument();
-  const firstElement = new BlockDataElement(TextBlock.Name, "id-1");
+  const firstElement = bky.text();
   root.__insertChildAt(root.childrenLength, firstElement);
   expect(firstElement.blockLevel()).toBe(0);
 });
 
 test("block level 1", () => {
   const root = new BlockyDocument();
-  const firstElement = new BlockDataElement(TextBlock.Name, "id-1");
+  const firstElement = bky.text();
   root.__insertChildAt(root.childrenLength, firstElement);
-  const childElement = new BlockDataElement(TextBlock.Name, "id-2");
+  const childElement = bky.text();
   firstElement.__insertChildAt(firstElement.childrenLength, childElement);
   expect(childElement.blockLevel()).toBe(1);
 });

packages/blocky-core/src/model/test/searchContext.test.ts

@@ -1,7 +1,7 @@
 import { BlockDataElement, BlockyDocument, BlockyTextModel } from "@pkg/data";
 import Delta from "quill-delta-es";
-import { Editor } from "../../view/editor";
-import { EditorController } from "../../view/controller";
+import { Editor } from "@pkg/view/editor";
+import { EditorController } from "@pkg/view/controller";
 import { expect, test } from "vitest";
 import { SearchContext } from "../searchContext";
 

packages/blocky-core/src/model/test/state.test.ts

@@ -1,11 +1,7 @@
 import { expect, test } from "vitest";
 import { makeDefaultIdGenerator } from "@pkg/helper/idHelper";
-import {
-  BlockDataElement,
-  BlockyDocument,
-  BlockyTextModel,
-  JSONNode,
-} from "@pkg/data";
+import { bky } from "@pkg/helper/bky";
+import { BlockyDocument, JSONNode } from "@pkg/data";
 import Delta from "quill-delta-es";
 import { EditorState } from "../editorState";
 
@@ -29,13 +25,7 @@ function removeId(node: JSONNode) {
 test("serialize", () => {
   const idGenerator = makeDefaultIdGenerator();
   const doc = new BlockyDocument({
-    bodyChildren: [
-      new BlockDataElement("Text", idGenerator.mkBlockId(), {
-        textContent: new BlockyTextModel(
-          new Delta([{ insert: "Hello world" }])
-        ),
-      }),
-    ],
+    bodyChildren: [bky.text(new Delta([{ insert: "Hello world" }]))],
   });
   const state = new EditorState({
     userId: "User-1",
@@ -68,13 +58,7 @@ test("serialize", () => {
     const idGenerator = makeDefaultIdGenerator();
     const doc = new BlockyDocument({
       title: "",
-      bodyChildren: [
-        new BlockDataElement("Text", idGenerator.mkBlockId(), {
-          textContent: new BlockyTextModel(
-            new Delta([{ insert: "Hello world" }])
-          ),
-        }),
-      ],
+      bodyChildren: [bky.text(new Delta([{ insert: "Hello world" }]))],
     });
     const state = new EditorState({
       userId: "User-1",

packages/blocky-core/src/plugins/spannerPlugin/spannerDelegate.spec.ts

@@ -1,7 +1,8 @@
 import { describe, expect, it, vi } from "vitest";
 import { SpannerDelegate, SpannerInstance } from "./spannerDelegate";
-import { EditorController } from "../../view/controller";
-import { BlockDataElement, Editor } from "../..";
+import { EditorController } from "@pkg/view/controller";
+import { bky } from "@pkg/helper/bky";
+import { Editor } from "@pkg/index";
 
 describe("SpannerDelegate", () => {
   it("focusedNode", () => {
@@ -20,8 +21,8 @@ describe("SpannerDelegate", () => {
     });
     delegate.mount(mount);
 
-    const focusedNode1 = new BlockDataElement("Text", "id-1");
-    const focusedNode2 = new BlockDataElement("Text", "id-2");
+    const focusedNode1 = bky.text();
+    const focusedNode2 = bky.text();
 
     const focusedNodeChangedSpy = vi.spyOn(
       spannerInstance,

packages/blocky-core/src/plugins/undoPlugin/undoManager.spec.ts

@@ -1,11 +1,10 @@
 import { test, expect, describe, vi } from "vitest";
 import { FixedSizeStack, HistoryItem, UndoManager } from "./undoManager";
 import { makeDefaultIdGenerator } from "@pkg/helper/idHelper";
+import { bky } from "@pkg/helper/bky";
 import { EditorState } from "@pkg/model/editorState";
 import {
-  BlockDataElement,
   BlockyDocument,
-  BlockyTextModel,
   Changeset,
   ChangesetRecordOption,
   FinalizedChangeset,
@@ -57,15 +56,9 @@ describe("UndoManager", () => {
 
   test("delete", () => {
     const idGenerator = makeDefaultIdGenerator();
-    const e1 = new BlockDataElement("Text", idGenerator.mkBlockId(), {
-      textContent: new BlockyTextModel(new Delta().insert("0")),
-    });
-    const e2 = new BlockDataElement("Text", idGenerator.mkBlockId(), {
-      textContent: new BlockyTextModel(new Delta().insert("1")),
-    });
-    const e3 = new BlockDataElement("Text", idGenerator.mkBlockId(), {
-      textContent: new BlockyTextModel(new Delta().insert("2")),
-    });
+    const e1 = bky.text(new Delta().insert("0"));
+    const e2 = bky.text(new Delta().insert("1"));
+    const e3 = bky.text(new Delta().insert("2"));
     const doc = new BlockyDocument({
       bodyChildren: [e1, e2, e3],
     });

packages/blocky-react/src/blocks/imageBlock/index.tsx

@@ -2,10 +2,10 @@ import ImageBlock, { ImageBlockPlaceholderRenderer } from "./imageBlock";
 import {
   type TryParsePastedDOMEvent,
   type IPlugin,
-  BlockDataElement,
   type IBlockDefinition,
   type BlockyPasteEvent,
   PluginContext,
+  bky,
 } from "blocky-core";
 import { makeReactBlock, type ReactBlockRenderProps } from "../../";
 import { Observable, takeUntil } from "rxjs";
@@ -51,17 +51,12 @@ export class ImageBlockPlugin implements IPlugin {
           />
         ),
         tryParsePastedDOM(e: TryParsePastedDOMEvent) {
-          const { node, editorController } = e;
+          const { node } = e;
           const img = node.querySelector("img");
           if (img) {
-            const newId = editorController.idGenerator.mkBlockId();
             const src = img.getAttribute("src");
             const attributes = src ? { src } : undefined;
-            const element = new BlockDataElement(
-              ImageBlockPlugin.Name,
-              newId,
-              attributes
-            );
+            const element = bky.element(ImageBlockPlugin.Name, attributes);
             return element;
           }
         },
@@ -90,15 +85,9 @@ export class ImageBlockPlugin implements IPlugin {
     ImageBlockPlugin.LoadImage(blob)
       .pipe(takeUntil(ctx.dispose$))
       .subscribe((url) => {
-        const newId = editorController.idGenerator.mkBlockId();
-        const attributes = {
+        const element = bky.element(ImageBlockPlugin.Name, {
           src: url,
-        };
-        const element = new BlockDataElement(
-          ImageBlockPlugin.Name,
-          newId,
-          attributes
-        );
+        });
         editorController.pasteElementsAtCursor([element]);
       });
   }

packages/blocky-react/src/defaultSpannerMenu/defaultSpannerMenu.tsx

@@ -4,6 +4,7 @@ import {
   BlockDataElement,
   TextType,
   SpannerDelegate,
+  bky,
 } from "blocky-core";
 import Dropdown from "@pkg/components/dropdown";
 import { Menu, MenuItem, Divider } from "@pkg/components/menu";
@@ -85,8 +86,7 @@ function DefaultSpannerMenu(props: SpannerProps) {
     if (!focusedNode) {
       return;
     }
-    const newId = editorController.editor!.idGenerator.mkBlockId();
-    const imgElement = new BlockDataElement(ImageBlockPlugin.Name, newId);
+    const imgElement = bky.element(ImageBlockPlugin.Name);
     editorController.insertBlockAfterId(imgElement, focusedNode.id, {
       autoFocus: true,
     });