@webiny/app-website-builder 0.0.0-unstable.e53eceafb5

package/editorSdk/Editor.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentManifest, EditorDocument, EditorViewportData, PreviewViewportData, SerializedComponentGroup } from "@webiny/website-builder-sdk";
+import type { CommandHandler } from "./CommandBus.js";
+import { type Command, CommandPriority } from "./CommandBus.js";
+import { type StateChangeListener, StateWithHistory } from "./StateWithHistory.js";
+import { type MutableState, State } from "./State.js";
+export type EditorState = {
+    boxes: {
+        preview: PreviewViewportData["boxes"];
+        editor: EditorViewportData["boxes"];
+    };
+    viewport: EditorViewportData["viewport"];
+    selectedElement: string | null;
+    highlightedElement: string | null;
+    showOverlays: boolean;
+    components: Record<string, ComponentManifest>;
+    componentGroups: Record<string, SerializedComponentGroup>;
+    breakpoint?: string;
+    [key: string]: any;
+};
+export declare class Editor<TDocument extends EditorDocument = EditorDocument> {
+    private readonly documentState;
+    private readonly editorState;
+    private readonly commandBus;
+    constructor(initialState: TDocument);
+    registerCommandHandler<T>(command: Command<T>, handler: CommandHandler<T>, priority?: CommandPriority): () => void;
+    executeCommand<T>(command: Command<T>, payload?: T): Promise<void>;
+    undo(): void;
+    redo(): void;
+    updateDocument(cb: (state: MutableState<TDocument>) => void): void;
+    updateEditor(cb: (state: MutableState<EditorState>) => void): void;
+    getEditorState(): State<EditorState>;
+    getDocumentState(): StateWithHistory<TDocument>;
+    onDocumentStateChange(listener: StateChangeListener<TDocument>): () => void;
+}

package/editorSdk/Editor.js

@@ -0,0 +1,57 @@
+import { CommandBus, CommandPriority } from "./CommandBus.js";
+import { StateWithHistory } from "./StateWithHistory.js";
+import { State } from "./State.js";
+export class Editor {
+  constructor(initialState) {
+    this.commandBus = new CommandBus();
+    this.documentState = new StateWithHistory(initialState);
+    this.editorState = new State({
+      showOverlays: true,
+      selectedElement: null,
+      highlightedElement: null,
+      boxes: {
+        preview: {},
+        editor: {}
+      },
+      viewport: {
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0,
+        scrollX: 0,
+        scrollY: 0
+      },
+      components: {},
+      componentGroups: {}
+    }, false);
+  }
+  registerCommandHandler(command, handler, priority = CommandPriority.NORMAL) {
+    return this.commandBus.register(command, handler, priority);
+  }
+  executeCommand(command, payload) {
+    return this.commandBus.execute(command, payload);
+  }
+  undo() {
+    this.documentState.undo();
+  }
+  redo() {
+    this.documentState.redo();
+  }
+  updateDocument(cb) {
+    this.documentState.update(cb);
+  }
+  updateEditor(cb) {
+    this.editorState.update(cb);
+  }
+  getEditorState() {
+    return this.editorState;
+  }
+  getDocumentState() {
+    return this.documentState;
+  }
+  onDocumentStateChange(listener) {
+    return this.documentState.onStateChange(listener);
+  }
+}
+
+//# sourceMappingURL=Editor.js.map

package/editorSdk/Editor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CommandBus","CommandPriority","StateWithHistory","State","Editor","constructor","initialState","commandBus","documentState","editorState","showOverlays","selectedElement","highlightedElement","boxes","preview","editor","viewport","top","left","width","height","scrollX","scrollY","components","componentGroups","registerCommandHandler","command","handler","priority","NORMAL","register","executeCommand","payload","execute","undo","redo","updateDocument","cb","update","updateEditor","getEditorState","getDocumentState","onDocumentStateChange","listener","onStateChange"],"sources":["Editor.ts"],"sourcesContent":["import type {\n    ComponentManifest,\n    EditorDocument,\n    EditorViewportData,\n    PreviewViewportData,\n    SerializedComponentGroup\n} from \"@webiny/website-builder-sdk\";\nimport type { CommandHandler } from \"./CommandBus.js\";\nimport { CommandBus, type Command, CommandPriority } from \"./CommandBus.js\";\nimport { type StateChangeListener, StateWithHistory } from \"./StateWithHistory.js\";\nimport { type MutableState, State } from \"./State.js\";\n\nexport type EditorState = {\n    boxes: {\n        // Coordinates are relative to the preview iframe.\n        preview: PreviewViewportData[\"boxes\"];\n        // Coordinates are relative to the editor.\n        editor: EditorViewportData[\"boxes\"];\n    };\n    viewport: EditorViewportData[\"viewport\"];\n    selectedElement: string | null;\n    highlightedElement: string | null;\n    showOverlays: boolean;\n    components: Record<string, ComponentManifest>;\n    componentGroups: Record<string, SerializedComponentGroup>;\n    breakpoint?: string;\n    [key: string]: any;\n};\n\nexport class Editor<TDocument extends EditorDocument = EditorDocument> {\n    private readonly documentState: StateWithHistory<TDocument>;\n    private readonly editorState: State<EditorState>;\n    private readonly commandBus: CommandBus;\n\n    constructor(initialState: TDocument) {\n        this.commandBus = new CommandBus();\n        this.documentState = new StateWithHistory(initialState);\n        this.editorState = new State<EditorState>(\n            {\n                showOverlays: true,\n                selectedElement: null,\n                highlightedElement: null,\n                boxes: {\n                    preview: {},\n                    editor: {}\n                },\n                viewport: {\n                    top: 0,\n                    left: 0,\n                    width: 0,\n                    height: 0,\n                    scrollX: 0,\n                    scrollY: 0\n                },\n                components: {},\n                componentGroups: {}\n            },\n            false\n        );\n    }\n\n    registerCommandHandler<T>(\n        command: Command<T>,\n        handler: CommandHandler<T>,\n        priority: CommandPriority = CommandPriority.NORMAL\n    ) {\n        return this.commandBus.register(command, handler, priority);\n    }\n\n    executeCommand<T>(command: Command<T>, payload?: T) {\n        return this.commandBus.execute(command, payload);\n    }\n\n    undo() {\n        this.documentState.undo();\n    }\n\n    redo() {\n        this.documentState.redo();\n    }\n\n    updateDocument(cb: (state: MutableState<TDocument>) => void) {\n        this.documentState.update(cb);\n    }\n\n    updateEditor(cb: (state: MutableState<EditorState>) => void) {\n        this.editorState.update(cb);\n    }\n\n    getEditorState() {\n        return this.editorState;\n    }\n\n    getDocumentState() {\n        return this.documentState;\n    }\n\n    onDocumentStateChange(listener: StateChangeListener<TDocument>) {\n        return this.documentState.onStateChange(listener);\n    }\n}\n"],"mappings":"AAQA,SAASA,UAAU,EAAgBC,eAAe;AAClD,SAAmCC,gBAAgB;AACnD,SAA4BC,KAAK;AAmBjC,OAAO,MAAMC,MAAM,CAAoD;EAKnEC,WAAWA,CAACC,YAAuB,EAAE;IACjC,IAAI,CAACC,UAAU,GAAG,IAAIP,UAAU,CAAC,CAAC;IAClC,IAAI,CAACQ,aAAa,GAAG,IAAIN,gBAAgB,CAACI,YAAY,CAAC;IACvD,IAAI,CAACG,WAAW,GAAG,IAAIN,KAAK,CACxB;MACIO,YAAY,EAAE,IAAI;MAClBC,eAAe,EAAE,IAAI;MACrBC,kBAAkB,EAAE,IAAI;MACxBC,KAAK,EAAE;QACHC,OAAO,EAAE,CAAC,CAAC;QACXC,MAAM,EAAE,CAAC;MACb,CAAC;MACDC,QAAQ,EAAE;QACNC,GAAG,EAAE,CAAC;QACNC,IAAI,EAAE,CAAC;QACPC,KAAK,EAAE,CAAC;QACRC,MAAM,EAAE,CAAC;QACTC,OAAO,EAAE,CAAC;QACVC,OAAO,EAAE;MACb,CAAC;MACDC,UAAU,EAAE,CAAC,CAAC;MACdC,eAAe,EAAE,CAAC;IACtB,CAAC,EACD,KACJ,CAAC;EACL;EAEAC,sBAAsBA,CAClBC,OAAmB,EACnBC,OAA0B,EAC1BC,QAAyB,GAAG3B,eAAe,CAAC4B,MAAM,EACpD;IACE,OAAO,IAAI,CAACtB,UAAU,CAACuB,QAAQ,CAACJ,OAAO,EAAEC,OAAO,EAAEC,QAAQ,CAAC;EAC/D;EAEAG,cAAcA,CAAIL,OAAmB,EAAEM,OAAW,EAAE;IAChD,OAAO,IAAI,CAACzB,UAAU,CAAC0B,OAAO,CAACP,OAAO,EAAEM,OAAO,CAAC;EACpD;EAEAE,IAAIA,CAAA,EAAG;IACH,IAAI,CAAC1B,aAAa,CAAC0B,IAAI,CAAC,CAAC;EAC7B;EAEAC,IAAIA,CAAA,EAAG;IACH,IAAI,CAAC3B,aAAa,CAAC2B,IAAI,CAAC,CAAC;EAC7B;EAEAC,cAAcA,CAACC,EAA4C,EAAE;IACzD,IAAI,CAAC7B,aAAa,CAAC8B,MAAM,CAACD,EAAE,CAAC;EACjC;EAEAE,YAAYA,CAACF,EAA8C,EAAE;IACzD,IAAI,CAAC5B,WAAW,CAAC6B,MAAM,CAACD,EAAE,CAAC;EAC/B;EAEAG,cAAcA,CAAA,EAAG;IACb,OAAO,IAAI,CAAC/B,WAAW;EAC3B;EAEAgC,gBAAgBA,CAAA,EAAG;IACf,OAAO,IAAI,CAACjC,aAAa;EAC7B;EAEAkC,qBAAqBA,CAACC,QAAwC,EAAE;IAC5D,OAAO,IAAI,CAACnC,aAAa,CAACoC,aAAa,CAACD,QAAQ,CAAC;EACrD;AACJ","ignoreList":[]}

package/editorSdk/EditorHistory.d.ts

@@ -0,0 +1,19 @@
+import { HistorySnapshot, type SnapshotState } from "./HistorySnapshot.js";
+interface EditorHistoryParams {
+    snapshots?: SnapshotState[];
+    observeKeys?: string[];
+}
+export declare class EditorHistory {
+    private snapshots;
+    private activeSnapshotIndex;
+    private readonly observeKeys;
+    constructor(params?: EditorHistoryParams);
+    getSnapshots(): HistorySnapshot<SnapshotState>[];
+    trackState(snapshot: SnapshotState): void;
+    getCurrentSnapshot(): HistorySnapshot<SnapshotState>;
+    getActiveSnapshotIndex(): number;
+    goToOlderSnapshot(): HistorySnapshot<SnapshotState>;
+    goToNewerSnapshot(): HistorySnapshot<SnapshotState>;
+    private getValuesOfInterest;
+}
+export {};

package/editorSdk/EditorHistory.js

@@ -0,0 +1,54 @@
+import pick from "lodash/pick";
+import { jsonPatch } from "@webiny/website-builder-sdk";
+import { HistorySnapshot } from "./HistorySnapshot.js";
+export class EditorHistory {
+  constructor(params) {
+    this.observeKeys = params?.observeKeys ?? [];
+    this.snapshots = (params?.snapshots ?? []).map(state => {
+      const snapshotData = this.getValuesOfInterest(state);
+      return new HistorySnapshot(snapshotData);
+    });
+    this.activeSnapshotIndex = this.snapshots.length - 1;
+  }
+  getSnapshots() {
+    return this.snapshots;
+  }
+  trackState(snapshot) {
+    const newSnapshotState = this.getValuesOfInterest(snapshot);
+    const currentSnapshot = this.snapshots[this.activeSnapshotIndex];
+    const changes = jsonPatch.compare(currentSnapshot.getState(), newSnapshotState);
+    if (changes.length === 0) {
+      return;
+    }
+    const newSnapshot = new HistorySnapshot(newSnapshotState, changes);
+
+    // Values of interest have changed! Create a snapshot.
+    this.snapshots = [...this.snapshots.slice(0, this.activeSnapshotIndex + 1), newSnapshot];
+    this.activeSnapshotIndex = this.snapshots.length - 1;
+  }
+  getCurrentSnapshot() {
+    return this.snapshots[this.activeSnapshotIndex];
+  }
+  getActiveSnapshotIndex() {
+    return this.activeSnapshotIndex;
+  }
+  goToOlderSnapshot() {
+    if (this.activeSnapshotIndex <= 0) {
+      return this.snapshots[this.activeSnapshotIndex];
+    }
+    this.activeSnapshotIndex -= 1;
+    return this.snapshots[this.activeSnapshotIndex];
+  }
+  goToNewerSnapshot() {
+    if (this.activeSnapshotIndex >= this.snapshots.length - 1) {
+      return this.snapshots[this.activeSnapshotIndex];
+    }
+    this.activeSnapshotIndex += 1;
+    return this.snapshots[this.activeSnapshotIndex];
+  }
+  getValuesOfInterest(state) {
+    return this.observeKeys.length > 0 ? pick(state, this.observeKeys) : state;
+  }
+}
+
+//# sourceMappingURL=EditorHistory.js.map

package/editorSdk/EditorHistory.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pick","jsonPatch","HistorySnapshot","EditorHistory","constructor","params","observeKeys","snapshots","map","state","snapshotData","getValuesOfInterest","activeSnapshotIndex","length","getSnapshots","trackState","snapshot","newSnapshotState","currentSnapshot","changes","compare","getState","newSnapshot","slice","getCurrentSnapshot","getActiveSnapshotIndex","goToOlderSnapshot","goToNewerSnapshot"],"sources":["EditorHistory.ts"],"sourcesContent":["import pick from \"lodash/pick\";\nimport { jsonPatch } from \"@webiny/website-builder-sdk\";\nimport { HistorySnapshot, type SnapshotState } from \"./HistorySnapshot.js\";\n\ninterface EditorHistoryParams {\n    snapshots?: SnapshotState[];\n    observeKeys?: string[];\n}\n\nexport class EditorHistory {\n    private snapshots: HistorySnapshot[];\n    private activeSnapshotIndex: number;\n    private readonly observeKeys: string[];\n\n    constructor(params?: EditorHistoryParams) {\n        this.observeKeys = params?.observeKeys ?? [];\n        this.snapshots = (params?.snapshots ?? []).map(state => {\n            const snapshotData = this.getValuesOfInterest(state);\n            return new HistorySnapshot(snapshotData);\n        });\n        this.activeSnapshotIndex = this.snapshots.length - 1;\n    }\n\n    getSnapshots() {\n        return this.snapshots;\n    }\n\n    trackState(snapshot: SnapshotState) {\n        const newSnapshotState = this.getValuesOfInterest(snapshot);\n        const currentSnapshot = this.snapshots[this.activeSnapshotIndex];\n\n        const changes = jsonPatch.compare(currentSnapshot.getState(), newSnapshotState);\n        if (changes.length === 0) {\n            return;\n        }\n\n        const newSnapshot = new HistorySnapshot(newSnapshotState, changes);\n\n        // Values of interest have changed! Create a snapshot.\n        this.snapshots = [...this.snapshots.slice(0, this.activeSnapshotIndex + 1), newSnapshot];\n        this.activeSnapshotIndex = this.snapshots.length - 1;\n    }\n\n    getCurrentSnapshot() {\n        return this.snapshots[this.activeSnapshotIndex];\n    }\n\n    getActiveSnapshotIndex() {\n        return this.activeSnapshotIndex;\n    }\n\n    goToOlderSnapshot() {\n        if (this.activeSnapshotIndex <= 0) {\n            return this.snapshots[this.activeSnapshotIndex];\n        }\n\n        this.activeSnapshotIndex -= 1;\n\n        return this.snapshots[this.activeSnapshotIndex];\n    }\n\n    goToNewerSnapshot() {\n        if (this.activeSnapshotIndex >= this.snapshots.length - 1) {\n            return this.snapshots[this.activeSnapshotIndex];\n        }\n\n        this.activeSnapshotIndex += 1;\n        return this.snapshots[this.activeSnapshotIndex];\n    }\n\n    private getValuesOfInterest(state: SnapshotState) {\n        return this.observeKeys.length > 0 ? pick(state, this.observeKeys) : state;\n    }\n}\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,aAAa;AAC9B,SAASC,SAAS,QAAQ,6BAA6B;AACvD,SAASC,eAAe;AAOxB,OAAO,MAAMC,aAAa,CAAC;EAKvBC,WAAWA,CAACC,MAA4B,EAAE;IACtC,IAAI,CAACC,WAAW,GAAGD,MAAM,EAAEC,WAAW,IAAI,EAAE;IAC5C,IAAI,CAACC,SAAS,GAAG,CAACF,MAAM,EAAEE,SAAS,IAAI,EAAE,EAAEC,GAAG,CAACC,KAAK,IAAI;MACpD,MAAMC,YAAY,GAAG,IAAI,CAACC,mBAAmB,CAACF,KAAK,CAAC;MACpD,OAAO,IAAIP,eAAe,CAACQ,YAAY,CAAC;IAC5C,CAAC,CAAC;IACF,IAAI,CAACE,mBAAmB,GAAG,IAAI,CAACL,SAAS,CAACM,MAAM,GAAG,CAAC;EACxD;EAEAC,YAAYA,CAAA,EAAG;IACX,OAAO,IAAI,CAACP,SAAS;EACzB;EAEAQ,UAAUA,CAACC,QAAuB,EAAE;IAChC,MAAMC,gBAAgB,GAAG,IAAI,CAACN,mBAAmB,CAACK,QAAQ,CAAC;IAC3D,MAAME,eAAe,GAAG,IAAI,CAACX,SAAS,CAAC,IAAI,CAACK,mBAAmB,CAAC;IAEhE,MAAMO,OAAO,GAAGlB,SAAS,CAACmB,OAAO,CAACF,eAAe,CAACG,QAAQ,CAAC,CAAC,EAAEJ,gBAAgB,CAAC;IAC/E,IAAIE,OAAO,CAACN,MAAM,KAAK,CAAC,EAAE;MACtB;IACJ;IAEA,MAAMS,WAAW,GAAG,IAAIpB,eAAe,CAACe,gBAAgB,EAAEE,OAAO,CAAC;;IAElE;IACA,IAAI,CAACZ,SAAS,GAAG,CAAC,GAAG,IAAI,CAACA,SAAS,CAACgB,KAAK,CAAC,CAAC,EAAE,IAAI,CAACX,mBAAmB,GAAG,CAAC,CAAC,EAAEU,WAAW,CAAC;IACxF,IAAI,CAACV,mBAAmB,GAAG,IAAI,CAACL,SAAS,CAACM,MAAM,GAAG,CAAC;EACxD;EAEAW,kBAAkBA,CAAA,EAAG;IACjB,OAAO,IAAI,CAACjB,SAAS,CAAC,IAAI,CAACK,mBAAmB,CAAC;EACnD;EAEAa,sBAAsBA,CAAA,EAAG;IACrB,OAAO,IAAI,CAACb,mBAAmB;EACnC;EAEAc,iBAAiBA,CAAA,EAAG;IAChB,IAAI,IAAI,CAACd,mBAAmB,IAAI,CAAC,EAAE;MAC/B,OAAO,IAAI,CAACL,SAAS,CAAC,IAAI,CAACK,mBAAmB,CAAC;IACnD;IAEA,IAAI,CAACA,mBAAmB,IAAI,CAAC;IAE7B,OAAO,IAAI,CAACL,SAAS,CAAC,IAAI,CAACK,mBAAmB,CAAC;EACnD;EAEAe,iBAAiBA,CAAA,EAAG;IAChB,IAAI,IAAI,CAACf,mBAAmB,IAAI,IAAI,CAACL,SAAS,CAACM,MAAM,GAAG,CAAC,EAAE;MACvD,OAAO,IAAI,CAACN,SAAS,CAAC,IAAI,CAACK,mBAAmB,CAAC;IACnD;IAEA,IAAI,CAACA,mBAAmB,IAAI,CAAC;IAC7B,OAAO,IAAI,CAACL,SAAS,CAAC,IAAI,CAACK,mBAAmB,CAAC;EACnD;EAEQD,mBAAmBA,CAACF,KAAoB,EAAE;IAC9C,OAAO,IAAI,CAACH,WAAW,CAACO,MAAM,GAAG,CAAC,GAAGb,IAAI,CAACS,KAAK,EAAE,IAAI,CAACH,WAAW,CAAC,GAAGG,KAAK;EAC9E;AACJ","ignoreList":[]}

package/editorSdk/HistorySnapshot.d.ts

@@ -0,0 +1,11 @@
+import type { JsonPatchOperation } from "@webiny/website-builder-sdk";
+export type SnapshotState = Record<string, any>;
+export declare class HistorySnapshot<T = SnapshotState> {
+    private readonly state;
+    private readonly createdOn;
+    private readonly changes;
+    constructor(state: T, changes?: JsonPatchOperation[]);
+    getState(): T;
+    getCreatedOn(): Date;
+    getChanges(): any;
+}

package/editorSdk/HistorySnapshot.js

@@ -0,0 +1,18 @@
+export class HistorySnapshot {
+  constructor(state, changes = []) {
+    this.changes = changes;
+    this.state = state;
+    this.createdOn = new Date();
+  }
+  getState() {
+    return this.state;
+  }
+  getCreatedOn() {
+    return this.createdOn;
+  }
+  getChanges() {
+    return this.changes;
+  }
+}
+
+//# sourceMappingURL=HistorySnapshot.js.map

package/editorSdk/HistorySnapshot.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["HistorySnapshot","constructor","state","changes","createdOn","Date","getState","getCreatedOn","getChanges"],"sources":["HistorySnapshot.ts"],"sourcesContent":["import type { JsonPatchOperation } from \"@webiny/website-builder-sdk\";\n\nexport type SnapshotState = Record<string, any>;\n\nexport class HistorySnapshot<T = SnapshotState> {\n    private readonly state: T;\n    private readonly createdOn: Date;\n    private readonly changes: any;\n\n    constructor(state: T, changes: JsonPatchOperation[] = []) {\n        this.changes = changes;\n        this.state = state;\n        this.createdOn = new Date();\n    }\n\n    getState() {\n        return this.state;\n    }\n\n    getCreatedOn() {\n        return this.createdOn;\n    }\n\n    getChanges() {\n        return this.changes;\n    }\n}\n"],"mappings":"AAIA,OAAO,MAAMA,eAAe,CAAoB;EAK5CC,WAAWA,CAACC,KAAQ,EAAEC,OAA6B,GAAG,EAAE,EAAE;IACtD,IAAI,CAACA,OAAO,GAAGA,OAAO;IACtB,IAAI,CAACD,KAAK,GAAGA,KAAK;IAClB,IAAI,CAACE,SAAS,GAAG,IAAIC,IAAI,CAAC,CAAC;EAC/B;EAEAC,QAAQA,CAAA,EAAG;IACP,OAAO,IAAI,CAACJ,KAAK;EACrB;EAEAK,YAAYA,CAAA,EAAG;IACX,OAAO,IAAI,CAACH,SAAS;EACzB;EAEAI,UAAUA,CAAA,EAAG;IACT,OAAO,IAAI,CAACL,OAAO;EACvB;AACJ","ignoreList":[]}

package/editorSdk/State.d.ts

@@ -0,0 +1,20 @@
+import type { GenericRecord } from "@webiny/app/types.js";
+export type MutableState<T> = T;
+export interface IState<TState> {
+    read(): TState;
+    update(cb: (state: MutableState<TState>) => void): void;
+    setState(setter: (state: MutableState<TState>) => TState): void;
+    toJson(): TState;
+}
+export declare class State<TState extends GenericRecord = GenericRecord> implements IState<TState> {
+    private activeState;
+    private pendingState;
+    private readonly usePendingState;
+    constructor(initialState: TState, usePendingState?: boolean);
+    read(): TState;
+    update(cb: (state: MutableState<TState>) => void): void;
+    updateInPlace(cb: (state: MutableState<TState>) => void): void;
+    setState(setter: (state: MutableState<TState>) => TState): void;
+    toJson(): TState;
+    private commitPendingState;
+}

package/editorSdk/State.js

@@ -0,0 +1,50 @@
+import { makeAutoObservable, toJS, runInAction, observable } from "mobx";
+import { scheduleMicroTask } from "./scheduleMicroTask.js";
+export class State {
+  usePendingState = true;
+  constructor(initialState, usePendingState = true) {
+    this.usePendingState = usePendingState;
+    this.activeState = initialState;
+    makeAutoObservable(this, {
+      // @ts-ignore 123
+      activeState: observable
+    });
+  }
+  read() {
+    return this.pendingState || this.activeState;
+  }
+  update(cb) {
+    if (this.usePendingState) {
+      if (!this.pendingState) {
+        this.pendingState = structuredClone(toJS(this.activeState));
+        this.commitPendingState();
+      }
+      cb(this.pendingState);
+      return;
+    }
+    runInAction(() => {
+      cb(this.activeState);
+    });
+  }
+  updateInPlace(cb) {
+    cb(this.activeState);
+  }
+  setState(setter) {
+    this.activeState = observable(setter(this.activeState));
+  }
+  toJson() {
+    return toJS(this.activeState);
+  }
+  commitPendingState() {
+    scheduleMicroTask(() => {
+      runInAction(() => {
+        if (this.pendingState) {
+          this.activeState = observable(this.pendingState);
+          this.pendingState = undefined;
+        }
+      });
+    });
+  }
+}
+
+//# sourceMappingURL=State.js.map

package/editorSdk/State.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["makeAutoObservable","toJS","runInAction","observable","scheduleMicroTask","State","usePendingState","constructor","initialState","activeState","read","pendingState","update","cb","structuredClone","commitPendingState","updateInPlace","setState","setter","toJson","undefined"],"sources":["State.ts"],"sourcesContent":["import { makeAutoObservable, toJS, runInAction, observable } from \"mobx\";\nimport type { GenericRecord } from \"@webiny/app/types.js\";\nimport { scheduleMicroTask } from \"./scheduleMicroTask.js\";\n\nexport type MutableState<T> = T;\n\nexport interface IState<TState> {\n    read(): TState;\n    update(cb: (state: MutableState<TState>) => void): void;\n    setState(setter: (state: MutableState<TState>) => TState): void;\n    toJson(): TState;\n}\n\nexport class State<TState extends GenericRecord = GenericRecord> implements IState<TState> {\n    private activeState: TState;\n    private pendingState: TState | undefined;\n    private readonly usePendingState: boolean = true;\n\n    constructor(initialState: TState, usePendingState: boolean = true) {\n        this.usePendingState = usePendingState;\n        this.activeState = initialState;\n        makeAutoObservable(this, {\n            // @ts-ignore 123\n            activeState: observable\n        });\n    }\n\n    read(): TState {\n        return this.pendingState || this.activeState;\n    }\n\n    update(cb: (state: MutableState<TState>) => void) {\n        if (this.usePendingState) {\n            if (!this.pendingState) {\n                this.pendingState = structuredClone(toJS(this.activeState));\n                this.commitPendingState();\n            }\n\n            cb(this.pendingState);\n            return;\n        }\n\n        runInAction(() => {\n            cb(this.activeState);\n        });\n    }\n\n    updateInPlace(cb: (state: MutableState<TState>) => void) {\n        cb(this.activeState);\n    }\n\n    setState(setter: (state: MutableState<TState>) => TState) {\n        this.activeState = observable(setter(this.activeState));\n    }\n\n    toJson() {\n        return toJS(this.activeState);\n    }\n\n    private commitPendingState() {\n        scheduleMicroTask(() => {\n            runInAction(() => {\n                if (this.pendingState) {\n                    this.activeState = observable(this.pendingState);\n                    this.pendingState = undefined;\n                }\n            });\n        });\n    }\n}\n"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,IAAI,EAAEC,WAAW,EAAEC,UAAU,QAAQ,MAAM;AAExE,SAASC,iBAAiB;AAW1B,OAAO,MAAMC,KAAK,CAAyE;EAGtEC,eAAe,GAAY,IAAI;EAEhDC,WAAWA,CAACC,YAAoB,EAAEF,eAAwB,GAAG,IAAI,EAAE;IAC/D,IAAI,CAACA,eAAe,GAAGA,eAAe;IACtC,IAAI,CAACG,WAAW,GAAGD,YAAY;IAC/BR,kBAAkB,CAAC,IAAI,EAAE;MACrB;MACAS,WAAW,EAAEN;IACjB,CAAC,CAAC;EACN;EAEAO,IAAIA,CAAA,EAAW;IACX,OAAO,IAAI,CAACC,YAAY,IAAI,IAAI,CAACF,WAAW;EAChD;EAEAG,MAAMA,CAACC,EAAyC,EAAE;IAC9C,IAAI,IAAI,CAACP,eAAe,EAAE;MACtB,IAAI,CAAC,IAAI,CAACK,YAAY,EAAE;QACpB,IAAI,CAACA,YAAY,GAAGG,eAAe,CAACb,IAAI,CAAC,IAAI,CAACQ,WAAW,CAAC,CAAC;QAC3D,IAAI,CAACM,kBAAkB,CAAC,CAAC;MAC7B;MAEAF,EAAE,CAAC,IAAI,CAACF,YAAY,CAAC;MACrB;IACJ;IAEAT,WAAW,CAAC,MAAM;MACdW,EAAE,CAAC,IAAI,CAACJ,WAAW,CAAC;IACxB,CAAC,CAAC;EACN;EAEAO,aAAaA,CAACH,EAAyC,EAAE;IACrDA,EAAE,CAAC,IAAI,CAACJ,WAAW,CAAC;EACxB;EAEAQ,QAAQA,CAACC,MAA+C,EAAE;IACtD,IAAI,CAACT,WAAW,GAAGN,UAAU,CAACe,MAAM,CAAC,IAAI,CAACT,WAAW,CAAC,CAAC;EAC3D;EAEAU,MAAMA,CAAA,EAAG;IACL,OAAOlB,IAAI,CAAC,IAAI,CAACQ,WAAW,CAAC;EACjC;EAEQM,kBAAkBA,CAAA,EAAG;IACzBX,iBAAiB,CAAC,MAAM;MACpBF,WAAW,CAAC,MAAM;QACd,IAAI,IAAI,CAACS,YAAY,EAAE;UACnB,IAAI,CAACF,WAAW,GAAGN,UAAU,CAAC,IAAI,CAACQ,YAAY,CAAC;UAChD,IAAI,CAACA,YAAY,GAAGS,SAAS;QACjC;MACJ,CAAC,CAAC;IACN,CAAC,CAAC;EACN;AACJ","ignoreList":[]}

package/editorSdk/StateWithHistory.d.ts

@@ -0,0 +1,27 @@
+import type { GenericRecord } from "@webiny/app/types.js";
+import { EditorHistory } from "./EditorHistory.js";
+import { type IState, type MutableState } from "./State";
+import { type JsonPatchOperation } from "@webiny/website-builder-sdk";
+export type StateChangeEvent<TState> = {
+    reason: "undo" | "redo" | "update";
+    diff: JsonPatchOperation[];
+    state: TState;
+};
+export type StateChangeListener<T> = (event: StateChangeEvent<T>) => void;
+export declare class StateWithHistory<TState extends GenericRecord = GenericRecord> implements IState<TState> {
+    private readonly history;
+    private state;
+    private previousState;
+    private stateListeners;
+    private timeTravel;
+    constructor(initialState: TState);
+    read(): TState;
+    toJson(): TState;
+    setState(setter: (state: MutableState<TState>) => TState): void;
+    update(cb: (state: MutableState<TState>) => void): void;
+    getHistory(): EditorHistory;
+    undo(): void;
+    redo(): void;
+    onStateChange(listener: StateChangeListener<TState>): () => void;
+    private executeStateListeners;
+}

package/editorSdk/StateWithHistory.js

@@ -0,0 +1,96 @@
+import { makeObservable, autorun, observable } from "mobx";
+import { EditorHistory } from "./EditorHistory.js";
+import { State } from "./State";
+import { jsonPatch } from "@webiny/website-builder-sdk";
+export class StateWithHistory {
+  stateListeners = [];
+  timeTravel = true;
+  constructor(initialState) {
+    this.history = new EditorHistory({
+      snapshots: [initialState],
+      observeKeys: ["elements", "bindings"]
+    });
+    this.state = new State(initialState);
+    makeObservable(this, {
+      state: observable
+    });
+    const handleStateUpdate = newState => {
+      if (!this.timeTravel) {
+        return;
+      }
+      const previousState = this.previousState ?? {};
+      const diff = jsonPatch.compare(previousState, newState);
+      this.previousState = undefined;
+      this.history.trackState(newState);
+      if (diff.length) {
+        this.executeStateListeners({
+          reason: "update",
+          diff,
+          state: newState
+        });
+      }
+    };
+    autorun(() => {
+      const newState = this.state.toJson();
+      handleStateUpdate(newState);
+    });
+  }
+  read() {
+    return this.state.read();
+  }
+  toJson() {
+    return this.state.toJson();
+  }
+  setState(setter) {
+    this.state.setState(setter);
+  }
+  update(cb) {
+    // This is necessary to calculate a diff between two states later on.
+    if (!this.previousState) {
+      this.previousState = structuredClone(this.state.toJson());
+    }
+    this.state.update(cb);
+  }
+  getHistory() {
+    return this.history;
+  }
+  undo() {
+    this.timeTravel = false;
+    const snapshot = this.history.goToOlderSnapshot();
+    this.state.setState(state => {
+      return Object.assign({}, state, snapshot.getState());
+    });
+    this.executeStateListeners({
+      reason: "undo",
+      diff: [],
+      state: this.state.toJson()
+    });
+    this.timeTravel = true;
+  }
+  redo() {
+    this.timeTravel = false;
+    const snapshot = this.history.goToNewerSnapshot();
+    this.state.setState(state => {
+      return Object.assign({}, state, snapshot.getState());
+    });
+    this.executeStateListeners({
+      reason: "redo",
+      diff: [],
+      state: this.state.toJson()
+    });
+    this.timeTravel = true;
+  }
+  onStateChange(listener) {
+    this.stateListeners.push(listener);
+    return () => {
+      this.stateListeners = this.stateListeners.filter(l => l !== listener);
+    };
+  }
+  executeStateListeners(event) {
+    this.stateListeners.forEach(listener => {
+      listener(event);
+    });
+  }
+}
+
+//# sourceMappingURL=StateWithHistory.js.map

package/editorSdk/StateWithHistory.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["makeObservable","autorun","observable","EditorHistory","State","jsonPatch","StateWithHistory","stateListeners","timeTravel","constructor","initialState","history","snapshots","observeKeys","state","handleStateUpdate","newState","previousState","diff","compare","undefined","trackState","length","executeStateListeners","reason","toJson","read","setState","setter","update","cb","structuredClone","getHistory","undo","snapshot","goToOlderSnapshot","Object","assign","getState","redo","goToNewerSnapshot","onStateChange","listener","push","filter","l","event","forEach"],"sources":["StateWithHistory.ts"],"sourcesContent":["import { makeObservable, autorun, observable } from \"mobx\";\nimport type { GenericRecord } from \"@webiny/app/types.js\";\nimport { EditorHistory } from \"./EditorHistory.js\";\nimport { type IState, type MutableState, State } from \"./State\";\nimport { jsonPatch, type JsonPatchOperation } from \"@webiny/website-builder-sdk\";\n\nexport type StateChangeEvent<TState> = {\n    reason: \"undo\" | \"redo\" | \"update\";\n    diff: JsonPatchOperation[];\n    state: TState;\n};\n\nexport type StateChangeListener<T> = (event: StateChangeEvent<T>) => void;\n\nexport class StateWithHistory<TState extends GenericRecord = GenericRecord>\n    implements IState<TState>\n{\n    private readonly history: EditorHistory;\n    private state: State<TState>;\n    private previousState: TState | undefined;\n    private stateListeners: Array<(event: StateChangeEvent<TState>) => void> = [];\n    private timeTravel = true;\n\n    constructor(initialState: TState) {\n        this.history = new EditorHistory({\n            snapshots: [initialState],\n            observeKeys: [\"elements\", \"bindings\"]\n        });\n\n        this.state = new State<TState>(initialState);\n\n        makeObservable<StateWithHistory, \"state\">(this, {\n            state: observable\n        });\n\n        const handleStateUpdate = (newState: any) => {\n            if (!this.timeTravel) {\n                return;\n            }\n\n            const previousState = this.previousState ?? {};\n            const diff = jsonPatch.compare(previousState, newState);\n            this.previousState = undefined;\n\n            this.history.trackState(newState);\n\n            if (diff.length) {\n                this.executeStateListeners({\n                    reason: \"update\",\n                    diff,\n                    state: newState\n                });\n            }\n        };\n\n        autorun(() => {\n            const newState = this.state.toJson();\n            handleStateUpdate(newState);\n        });\n    }\n\n    read(): TState {\n        return this.state.read();\n    }\n\n    toJson() {\n        return this.state.toJson();\n    }\n\n    setState(setter: (state: MutableState<TState>) => TState) {\n        this.state.setState(setter);\n    }\n\n    update(cb: (state: MutableState<TState>) => void): void {\n        // This is necessary to calculate a diff between two states later on.\n        if (!this.previousState) {\n            this.previousState = structuredClone(this.state.toJson());\n        }\n        this.state.update(cb);\n    }\n\n    getHistory() {\n        return this.history;\n    }\n\n    undo() {\n        this.timeTravel = false;\n        const snapshot = this.history.goToOlderSnapshot();\n\n        this.state.setState(state => {\n            return Object.assign({}, state, snapshot.getState());\n        });\n\n        this.executeStateListeners({\n            reason: \"undo\",\n            diff: [],\n            state: this.state.toJson()\n        });\n        this.timeTravel = true;\n    }\n\n    redo() {\n        this.timeTravel = false;\n        const snapshot = this.history.goToNewerSnapshot();\n        this.state.setState(state => {\n            return Object.assign({}, state, snapshot.getState());\n        });\n\n        this.executeStateListeners({\n            reason: \"redo\",\n            diff: [],\n            state: this.state.toJson()\n        });\n        this.timeTravel = true;\n    }\n\n    onStateChange(listener: StateChangeListener<TState>): () => void {\n        this.stateListeners.push(listener);\n        return () => {\n            this.stateListeners = this.stateListeners.filter(l => l !== listener);\n        };\n    }\n\n    private executeStateListeners(event: StateChangeEvent<TState>) {\n        this.stateListeners.forEach(listener => {\n            listener(event);\n        });\n    }\n}\n"],"mappings":"AAAA,SAASA,cAAc,EAAEC,OAAO,EAAEC,UAAU,QAAQ,MAAM;AAE1D,SAASC,aAAa;AACtB,SAAyCC,KAAK;AAC9C,SAASC,SAAS,QAAiC,6BAA6B;AAUhF,OAAO,MAAMC,gBAAgB,CAE7B;EAIYC,cAAc,GAAqD,EAAE;EACrEC,UAAU,GAAG,IAAI;EAEzBC,WAAWA,CAACC,YAAoB,EAAE;IAC9B,IAAI,CAACC,OAAO,GAAG,IAAIR,aAAa,CAAC;MAC7BS,SAAS,EAAE,CAACF,YAAY,CAAC;MACzBG,WAAW,EAAE,CAAC,UAAU,EAAE,UAAU;IACxC,CAAC,CAAC;IAEF,IAAI,CAACC,KAAK,GAAG,IAAIV,KAAK,CAASM,YAAY,CAAC;IAE5CV,cAAc,CAA4B,IAAI,EAAE;MAC5Cc,KAAK,EAAEZ;IACX,CAAC,CAAC;IAEF,MAAMa,iBAAiB,GAAIC,QAAa,IAAK;MACzC,IAAI,CAAC,IAAI,CAACR,UAAU,EAAE;QAClB;MACJ;MAEA,MAAMS,aAAa,GAAG,IAAI,CAACA,aAAa,IAAI,CAAC,CAAC;MAC9C,MAAMC,IAAI,GAAGb,SAAS,CAACc,OAAO,CAACF,aAAa,EAAED,QAAQ,CAAC;MACvD,IAAI,CAACC,aAAa,GAAGG,SAAS;MAE9B,IAAI,CAACT,OAAO,CAACU,UAAU,CAACL,QAAQ,CAAC;MAEjC,IAAIE,IAAI,CAACI,MAAM,EAAE;QACb,IAAI,CAACC,qBAAqB,CAAC;UACvBC,MAAM,EAAE,QAAQ;UAChBN,IAAI;UACJJ,KAAK,EAAEE;QACX,CAAC,CAAC;MACN;IACJ,CAAC;IAEDf,OAAO,CAAC,MAAM;MACV,MAAMe,QAAQ,GAAG,IAAI,CAACF,KAAK,CAACW,MAAM,CAAC,CAAC;MACpCV,iBAAiB,CAACC,QAAQ,CAAC;IAC/B,CAAC,CAAC;EACN;EAEAU,IAAIA,CAAA,EAAW;IACX,OAAO,IAAI,CAACZ,KAAK,CAACY,IAAI,CAAC,CAAC;EAC5B;EAEAD,MAAMA,CAAA,EAAG;IACL,OAAO,IAAI,CAACX,KAAK,CAACW,MAAM,CAAC,CAAC;EAC9B;EAEAE,QAAQA,CAACC,MAA+C,EAAE;IACtD,IAAI,CAACd,KAAK,CAACa,QAAQ,CAACC,MAAM,CAAC;EAC/B;EAEAC,MAAMA,CAACC,EAAyC,EAAQ;IACpD;IACA,IAAI,CAAC,IAAI,CAACb,aAAa,EAAE;MACrB,IAAI,CAACA,aAAa,GAAGc,eAAe,CAAC,IAAI,CAACjB,KAAK,CAACW,MAAM,CAAC,CAAC,CAAC;IAC7D;IACA,IAAI,CAACX,KAAK,CAACe,MAAM,CAACC,EAAE,CAAC;EACzB;EAEAE,UAAUA,CAAA,EAAG;IACT,OAAO,IAAI,CAACrB,OAAO;EACvB;EAEAsB,IAAIA,CAAA,EAAG;IACH,IAAI,CAACzB,UAAU,GAAG,KAAK;IACvB,MAAM0B,QAAQ,GAAG,IAAI,CAACvB,OAAO,CAACwB,iBAAiB,CAAC,CAAC;IAEjD,IAAI,CAACrB,KAAK,CAACa,QAAQ,CAACb,KAAK,IAAI;MACzB,OAAOsB,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAEvB,KAAK,EAAEoB,QAAQ,CAACI,QAAQ,CAAC,CAAC,CAAC;IACxD,CAAC,CAAC;IAEF,IAAI,CAACf,qBAAqB,CAAC;MACvBC,MAAM,EAAE,MAAM;MACdN,IAAI,EAAE,EAAE;MACRJ,KAAK,EAAE,IAAI,CAACA,KAAK,CAACW,MAAM,CAAC;IAC7B,CAAC,CAAC;IACF,IAAI,CAACjB,UAAU,GAAG,IAAI;EAC1B;EAEA+B,IAAIA,CAAA,EAAG;IACH,IAAI,CAAC/B,UAAU,GAAG,KAAK;IACvB,MAAM0B,QAAQ,GAAG,IAAI,CAACvB,OAAO,CAAC6B,iBAAiB,CAAC,CAAC;IACjD,IAAI,CAAC1B,KAAK,CAACa,QAAQ,CAACb,KAAK,IAAI;MACzB,OAAOsB,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAEvB,KAAK,EAAEoB,QAAQ,CAACI,QAAQ,CAAC,CAAC,CAAC;IACxD,CAAC,CAAC;IAEF,IAAI,CAACf,qBAAqB,CAAC;MACvBC,MAAM,EAAE,MAAM;MACdN,IAAI,EAAE,EAAE;MACRJ,KAAK,EAAE,IAAI,CAACA,KAAK,CAACW,MAAM,CAAC;IAC7B,CAAC,CAAC;IACF,IAAI,CAACjB,UAAU,GAAG,IAAI;EAC1B;EAEAiC,aAAaA,CAACC,QAAqC,EAAc;IAC7D,IAAI,CAACnC,cAAc,CAACoC,IAAI,CAACD,QAAQ,CAAC;IAClC,OAAO,MAAM;MACT,IAAI,CAACnC,cAAc,GAAG,IAAI,CAACA,cAAc,CAACqC,MAAM,CAACC,CAAC,IAAIA,CAAC,KAAKH,QAAQ,CAAC;IACzE,CAAC;EACL;EAEQnB,qBAAqBA,CAACuB,KAA+B,EAAE;IAC3D,IAAI,CAACvC,cAAc,CAACwC,OAAO,CAACL,QAAQ,IAAI;MACpCA,QAAQ,CAACI,KAAK,CAAC;IACnB,CAAC,CAAC;EACN;AACJ","ignoreList":[]}

package/editorSdk/createCommand.d.ts

@@ -0,0 +1,5 @@
+export type Command<TPayload> = {
+    type: string;
+};
+export type CommandPayload<TCommand extends Command<unknown>> = TCommand extends Command<infer TPayload> ? TPayload : never;
+export declare function createCommand<T>(type: string): Command<T>;

package/editorSdk/createCommand.js

@@ -0,0 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+export function createCommand(type) {
+  return {
+    type
+  }; // assert to preserve type info
+}
+
+//# sourceMappingURL=createCommand.js.map

package/editorSdk/createCommand.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createCommand","type"],"sources":["createCommand.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport type Command<TPayload> = {\n    type: string;\n};\n\nexport type CommandPayload<TCommand extends Command<unknown>> = TCommand extends Command<\n    infer TPayload\n>\n    ? TPayload\n    : never;\n\nexport function createCommand<T>(type: string): Command<T> {\n    return { type } as Command<T>; // assert to preserve type info\n}\n"],"mappings":"AAAA;;AAWA,OAAO,SAASA,aAAaA,CAAIC,IAAY,EAAc;EACvD,OAAO;IAAEA;EAAK,CAAC,CAAe,CAAC;AACnC","ignoreList":[]}

package/editorSdk/scheduleMicroTask.d.ts

@@ -0,0 +1 @@
+export declare const scheduleMicroTask: (fn: () => void) => void;

package/editorSdk/scheduleMicroTask.js

@@ -0,0 +1,5 @@
+export const scheduleMicroTask = typeof queueMicrotask === "function" ? queueMicrotask : fn => {
+  Promise.resolve().then(fn);
+};
+
+//# sourceMappingURL=scheduleMicroTask.js.map

package/editorSdk/scheduleMicroTask.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["scheduleMicroTask","queueMicrotask","fn","Promise","resolve","then"],"sources":["scheduleMicroTask.ts"],"sourcesContent":["export const scheduleMicroTask: (fn: () => void) => void =\n    typeof queueMicrotask === \"function\"\n        ? queueMicrotask\n        : fn => {\n              Promise.resolve().then(fn);\n          };\n"],"mappings":"AAAA,OAAO,MAAMA,iBAA2C,GACpD,OAAOC,cAAc,KAAK,UAAU,GAC9BA,cAAc,GACdC,EAAE,IAAI;EACFC,OAAO,CAACC,OAAO,CAAC,CAAC,CAACC,IAAI,CAACH,EAAE,CAAC;AAC9B,CAAC","ignoreList":[]}

package/editorSdk/utils/$addElementReferenceToParent.d.ts

@@ -0,0 +1,9 @@
+import type { Document } from "@webiny/website-builder-sdk";
+interface Params {
+    elementId: string;
+    parentId: string;
+    slot: string;
+    index: number;
+}
+export declare function $addElementReferenceToParent(document: Document, { elementId, parentId, slot, index }: Params): void;
+export {};

package/editorSdk/utils/$addElementReferenceToParent.js

@@ -0,0 +1,31 @@
+export function $addElementReferenceToParent(document, {
+  elementId,
+  parentId,
+  slot,
+  index
+}) {
+  const bindings = document.bindings[parentId] ?? {};
+  const inputs = bindings.inputs ?? {};
+  if (index < 0) {
+    // Single value slot
+    inputs[slot] = {
+      ...inputs[slot],
+      type: "slot",
+      static: elementId
+    };
+  } else {
+    const slotElements = inputs[slot];
+    inputs[slot] = {
+      ...inputs[slot],
+      type: "slot",
+      list: true,
+      static: [...(slotElements?.static ?? []).slice(0, index), elementId, ...(slotElements?.static ?? []).slice(index)]
+    };
+  }
+  document.bindings[parentId] = {
+    ...bindings,
+    inputs
+  };
+}
+
+//# sourceMappingURL=$addElementReferenceToParent.js.map

package/editorSdk/utils/$addElementReferenceToParent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["$addElementReferenceToParent","document","elementId","parentId","slot","index","bindings","inputs","type","static","slotElements","list","slice"],"sources":["$addElementReferenceToParent.ts"],"sourcesContent":["import type { Document } from \"@webiny/website-builder-sdk\";\nimport type { InputValueBinding } from \"@webiny/website-builder-sdk\";\n\ninterface Params {\n    elementId: string;\n    parentId: string;\n    slot: string;\n    index: number;\n}\n\nexport function $addElementReferenceToParent(\n    document: Document,\n    { elementId, parentId, slot, index }: Params\n) {\n    const bindings = document.bindings[parentId] ?? {};\n    const inputs = bindings.inputs ?? {};\n\n    if (index < 0) {\n        // Single value slot\n        inputs[slot] = {\n            ...inputs[slot],\n            type: \"slot\",\n            static: elementId\n        };\n    } else {\n        const slotElements = inputs[slot] as InputValueBinding;\n        inputs[slot] = {\n            ...inputs[slot],\n            type: \"slot\",\n            list: true,\n            static: [\n                ...(slotElements?.static ?? []).slice(0, index),\n                elementId,\n                ...(slotElements?.static ?? []).slice(index)\n            ]\n        };\n    }\n\n    document.bindings[parentId] = {\n        ...bindings,\n        inputs\n    };\n}\n"],"mappings":"AAUA,OAAO,SAASA,4BAA4BA,CACxCC,QAAkB,EAClB;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,IAAI;EAAEC;AAAc,CAAC,EAC9C;EACE,MAAMC,QAAQ,GAAGL,QAAQ,CAACK,QAAQ,CAACH,QAAQ,CAAC,IAAI,CAAC,CAAC;EAClD,MAAMI,MAAM,GAAGD,QAAQ,CAACC,MAAM,IAAI,CAAC,CAAC;EAEpC,IAAIF,KAAK,GAAG,CAAC,EAAE;IACX;IACAE,MAAM,CAACH,IAAI,CAAC,GAAG;MACX,GAAGG,MAAM,CAACH,IAAI,CAAC;MACfI,IAAI,EAAE,MAAM;MACZC,MAAM,EAAEP;IACZ,CAAC;EACL,CAAC,MAAM;IACH,MAAMQ,YAAY,GAAGH,MAAM,CAACH,IAAI,CAAsB;IACtDG,MAAM,CAACH,IAAI,CAAC,GAAG;MACX,GAAGG,MAAM,CAACH,IAAI,CAAC;MACfI,IAAI,EAAE,MAAM;MACZG,IAAI,EAAE,IAAI;MACVF,MAAM,EAAE,CACJ,GAAG,CAACC,YAAY,EAAED,MAAM,IAAI,EAAE,EAAEG,KAAK,CAAC,CAAC,EAAEP,KAAK,CAAC,EAC/CH,SAAS,EACT,GAAG,CAACQ,YAAY,EAAED,MAAM,IAAI,EAAE,EAAEG,KAAK,CAACP,KAAK,CAAC;IAEpD,CAAC;EACL;EAEAJ,QAAQ,CAACK,QAAQ,CAACH,QAAQ,CAAC,GAAG;IAC1B,GAAGG,QAAQ;IACXC;EACJ,CAAC;AACL","ignoreList":[]}

package/editorSdk/utils/$createElement.d.ts

@@ -0,0 +1,4 @@
+import type { Editor } from "../Editor";
+import type { CommandPayload } from "../createCommand";
+import type { Commands } from "../../BaseEditor";
+export declare function $createElement(editor: Editor, payload: CommandPayload<typeof Commands.CreateElement>): void;

package/editorSdk/utils/$createElement.js

@@ -0,0 +1,26 @@
+import { ElementFactory } from "@webiny/website-builder-sdk";
+export function $createElement(editor, payload) {
+  const {
+    componentName,
+    index,
+    parentId,
+    slot,
+    bindings
+  } = payload;
+  const componentsManifest = editor.getEditorState().read().components;
+  const elementFactory = new ElementFactory(componentsManifest);
+  const {
+    operations
+  } = elementFactory.createElementFromComponent({
+    componentName,
+    parentId,
+    slot,
+    index,
+    bindings: bindings ?? componentsManifest[componentName].defaults ?? {}
+  });
+  editor.updateDocument(document => {
+    operations.forEach(operation => operation.apply(document));
+  });
+}
+
+//# sourceMappingURL=$createElement.js.map

package/editorSdk/utils/$createElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ElementFactory","$createElement","editor","payload","componentName","index","parentId","slot","bindings","componentsManifest","getEditorState","read","components","elementFactory","operations","createElementFromComponent","defaults","updateDocument","document","forEach","operation","apply"],"sources":["$createElement.ts"],"sourcesContent":["import type { Editor } from \"../Editor\";\nimport type { CommandPayload } from \"~/editorSdk/createCommand\";\nimport type { Commands } from \"~/BaseEditor\";\nimport { ElementFactory } from \"@webiny/website-builder-sdk\";\n\nexport function $createElement(\n    editor: Editor,\n    payload: CommandPayload<typeof Commands.CreateElement>\n) {\n    const { componentName, index, parentId, slot, bindings } = payload;\n    const componentsManifest = editor.getEditorState().read().components;\n\n    const elementFactory = new ElementFactory(componentsManifest);\n    const { operations } = elementFactory.createElementFromComponent({\n        componentName,\n        parentId,\n        slot,\n        index,\n        bindings: bindings ?? componentsManifest[componentName].defaults ?? {}\n    });\n\n    editor.updateDocument(document => {\n        operations.forEach(operation => operation.apply(document));\n    });\n}\n"],"mappings":"AAGA,SAASA,cAAc,QAAQ,6BAA6B;AAE5D,OAAO,SAASC,cAAcA,CAC1BC,MAAc,EACdC,OAAsD,EACxD;EACE,MAAM;IAAEC,aAAa;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,IAAI;IAAEC;EAAS,CAAC,GAAGL,OAAO;EAClE,MAAMM,kBAAkB,GAAGP,MAAM,CAACQ,cAAc,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC,CAACC,UAAU;EAEpE,MAAMC,cAAc,GAAG,IAAIb,cAAc,CAACS,kBAAkB,CAAC;EAC7D,MAAM;IAAEK;EAAW,CAAC,GAAGD,cAAc,CAACE,0BAA0B,CAAC;IAC7DX,aAAa;IACbE,QAAQ;IACRC,IAAI;IACJF,KAAK;IACLG,QAAQ,EAAEA,QAAQ,IAAIC,kBAAkB,CAACL,aAAa,CAAC,CAACY,QAAQ,IAAI,CAAC;EACzE,CAAC,CAAC;EAEFd,MAAM,CAACe,cAAc,CAACC,QAAQ,IAAI;IAC9BJ,UAAU,CAACK,OAAO,CAACC,SAAS,IAAIA,SAAS,CAACC,KAAK,CAACH,QAAQ,CAAC,CAAC;EAC9D,CAAC,CAAC;AACN","ignoreList":[]}

package/editorSdk/utils/$deleteElement.d.ts

@@ -0,0 +1,2 @@
+import type { Document } from "@webiny/website-builder-sdk";
+export declare function $deleteElement(document: Document, id: string): void;

package/editorSdk/utils/$deleteElement.js

@@ -0,0 +1,30 @@
+import { $getElementById } from "./$getElementById";
+import { $removeElementReferenceFromParent } from "./$removeElementReferenceFromParent";
+export function $deleteElement(document, id) {
+  const elementToDelete = $getElementById(document, id);
+  if (!elementToDelete) {
+    return;
+  }
+
+  // Remove the reference to the element from its parent element.
+  if (elementToDelete.parent) {
+    $removeElementReferenceFromParent(document, {
+      elementId: id,
+      parentId: elementToDelete.parent.id,
+      slot: elementToDelete.parent.slot
+    });
+  }
+
+  // Remove all descendants.
+  Object.values(document.elements).filter(el => el.parent?.id === id).forEach(element => {
+    $deleteElement(document, element.id);
+  });
+
+  // Delete element bindings.
+  delete document.bindings[elementToDelete.id];
+
+  // Delete the element itself.
+  delete document.elements[id];
+}
+
+//# sourceMappingURL=$deleteElement.js.map

package/editorSdk/utils/$deleteElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["$getElementById","$removeElementReferenceFromParent","$deleteElement","document","id","elementToDelete","parent","elementId","parentId","slot","Object","values","elements","filter","el","forEach","element","bindings"],"sources":["$deleteElement.ts"],"sourcesContent":["import type { Document } from \"@webiny/website-builder-sdk\";\nimport { $getElementById } from \"./$getElementById\";\nimport { $removeElementReferenceFromParent } from \"./$removeElementReferenceFromParent\";\n\nexport function $deleteElement(document: Document, id: string) {\n    const elementToDelete = $getElementById(document, id);\n\n    if (!elementToDelete) {\n        return;\n    }\n\n    // Remove the reference to the element from its parent element.\n    if (elementToDelete.parent) {\n        $removeElementReferenceFromParent(document, {\n            elementId: id,\n            parentId: elementToDelete.parent.id,\n            slot: elementToDelete.parent.slot\n        });\n    }\n\n    // Remove all descendants.\n    Object.values(document.elements)\n        .filter(el => el.parent?.id === id)\n        .forEach(element => {\n            $deleteElement(document, element.id);\n        });\n\n    // Delete element bindings.\n    delete document.bindings[elementToDelete.id];\n\n    // Delete the element itself.\n    delete document.elements[id];\n}\n"],"mappings":"AACA,SAASA,eAAe;AACxB,SAASC,iCAAiC;AAE1C,OAAO,SAASC,cAAcA,CAACC,QAAkB,EAAEC,EAAU,EAAE;EAC3D,MAAMC,eAAe,GAAGL,eAAe,CAACG,QAAQ,EAAEC,EAAE,CAAC;EAErD,IAAI,CAACC,eAAe,EAAE;IAClB;EACJ;;EAEA;EACA,IAAIA,eAAe,CAACC,MAAM,EAAE;IACxBL,iCAAiC,CAACE,QAAQ,EAAE;MACxCI,SAAS,EAAEH,EAAE;MACbI,QAAQ,EAAEH,eAAe,CAACC,MAAM,CAACF,EAAE;MACnCK,IAAI,EAAEJ,eAAe,CAACC,MAAM,CAACG;IACjC,CAAC,CAAC;EACN;;EAEA;EACAC,MAAM,CAACC,MAAM,CAACR,QAAQ,CAACS,QAAQ,CAAC,CAC3BC,MAAM,CAACC,EAAE,IAAIA,EAAE,CAACR,MAAM,EAAEF,EAAE,KAAKA,EAAE,CAAC,CAClCW,OAAO,CAACC,OAAO,IAAI;IAChBd,cAAc,CAACC,QAAQ,EAAEa,OAAO,CAACZ,EAAE,CAAC;EACxC,CAAC,CAAC;;EAEN;EACA,OAAOD,QAAQ,CAACc,QAAQ,CAACZ,eAAe,CAACD,EAAE,CAAC;;EAE5C;EACA,OAAOD,QAAQ,CAACS,QAAQ,CAACR,EAAE,CAAC;AAChC","ignoreList":[]}

package/editorSdk/utils/$deselectElement.d.ts

@@ -0,0 +1,2 @@
+import type { Editor } from "../Editor";
+export declare function $deselectElement(editor: Editor): void;

package/editorSdk/utils/$deselectElement.js

@@ -0,0 +1,7 @@
+export function $deselectElement(editor) {
+  editor.updateEditor(state => {
+    state.selectedElement = null;
+  });
+}
+
+//# sourceMappingURL=$deselectElement.js.map

package/editorSdk/utils/$deselectElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["$deselectElement","editor","updateEditor","state","selectedElement"],"sources":["$deselectElement.ts"],"sourcesContent":["import type { Editor } from \"../Editor\";\n\nexport function $deselectElement(editor: Editor) {\n    editor.updateEditor(state => {\n        state.selectedElement = null;\n    });\n}\n"],"mappings":"AAEA,OAAO,SAASA,gBAAgBA,CAACC,MAAc,EAAE;EAC7CA,MAAM,CAACC,YAAY,CAACC,KAAK,IAAI;IACzBA,KAAK,CAACC,eAAe,GAAG,IAAI;EAChC,CAAC,CAAC;AACN","ignoreList":[]}