How to use @webiny/app-page-builder - 10 common examples

export const focusSlateEditor = createAction(FOCUS_SLATE_EDITOR);
addReducer([FOCUS_SLATE_EDITOR], "ui.slateFocused", () => true);

export const blurSlateEditor = createAction(BLUR_SLATE_EDITOR);
addReducer([BLUR_SLATE_EDITOR], "ui.slateFocused", () => false);

export const dragStart = createAction(DRAG_START);
addReducer([DRAG_START], "ui.dragging", () => true);

export const dragEnd = createAction(DRAG_END);
addReducer([DRAG_END], "ui.dragging", () => false);

export const elementCreated = createAction(ELEMENT_CREATED);

export const updateElement = createAction(UPDATE_ELEMENT);
addReducer(
    [UPDATE_ELEMENT],
    action => {
        const { element } = action.payload;
        if (element.type === "document") {
            return "page.content";
        }
        // .slice(2) removes `0.` from the beginning of the generated path
        return "page.content." + action.payload.element.path.replace(/\./g, ".elements.").slice(2);
    },
    (state, action) => {
        const { element, merge = false } = action.payload;
        if (element.elements && typeof element.elements[0] === "string") {
            delete element["elements"];
        }
        updateChildPaths(element);

return action.payload.element;
});

export const deactivateElement = createAction(DEACTIVATE_ELEMENT);
addReducer([DEACTIVATE_ELEMENT], "ui.activeElement", () => null);

export const focusSlateEditor = createAction(FOCUS_SLATE_EDITOR);
addReducer([FOCUS_SLATE_EDITOR], "ui.slateFocused", () => true);

export const blurSlateEditor = createAction(BLUR_SLATE_EDITOR);
addReducer([BLUR_SLATE_EDITOR], "ui.slateFocused", () => false);

export const dragStart = createAction(DRAG_START);
addReducer([DRAG_START], "ui.dragging", () => true);

export const dragEnd = createAction(DRAG_END);
addReducer([DRAG_END], "ui.dragging", () => false);

export const elementCreated = createAction(ELEMENT_CREATED);

export const updateElement = createAction(UPDATE_ELEMENT);
addReducer(
    [UPDATE_ELEMENT],
    action => {
        const { element } = action.payload;
        if (element.type === "document") {
            return "page.content";
        }
        // .slice(2) removes `0.` from the beginning of the generated path
        return "page.content." + action.payload.element.path.replace(/\./g, ".elements.").slice(2);
    },
    (state, action) => {

export const deactivateElement = createAction(DEACTIVATE_ELEMENT);
addReducer([DEACTIVATE_ELEMENT], "ui.activeElement", () => null);

export const focusSlateEditor = createAction(FOCUS_SLATE_EDITOR);
addReducer([FOCUS_SLATE_EDITOR], "ui.slateFocused", () => true);

export const blurSlateEditor = createAction(BLUR_SLATE_EDITOR);
addReducer([BLUR_SLATE_EDITOR], "ui.slateFocused", () => false);

export const dragStart = createAction(DRAG_START);
addReducer([DRAG_START], "ui.dragging", () => true);

export const dragEnd = createAction(DRAG_END);
addReducer([DRAG_END], "ui.dragging", () => false);

export const elementCreated = createAction(ELEMENT_CREATED);

export const updateElement = createAction(UPDATE_ELEMENT);
addReducer(
    [UPDATE_ELEMENT],
    action => {
        const { element } = action.payload;
        if (element.type === "document") {
            return "page.content";
        }
        // .slice(2) removes `0.` from the beginning of the generated path
        return "page.content." + action.payload.element.path.replace(/\./g, ".elements.").slice(2);
    },
    (state, action) => {
        const { element, merge = false } = action.payload;
        if (element.elements && typeof element.elements[0] === "string") {
            delete element["elements"];

});

export const deactivateElement = createAction(DEACTIVATE_ELEMENT);
addReducer([DEACTIVATE_ELEMENT], "ui.activeElement", () => null);

export const focusSlateEditor = createAction(FOCUS_SLATE_EDITOR);
addReducer([FOCUS_SLATE_EDITOR], "ui.slateFocused", () => true);

export const blurSlateEditor = createAction(BLUR_SLATE_EDITOR);
addReducer([BLUR_SLATE_EDITOR], "ui.slateFocused", () => false);

export const dragStart = createAction(DRAG_START);
addReducer([DRAG_START], "ui.dragging", () => true);

export const dragEnd = createAction(DRAG_END);
addReducer([DRAG_END], "ui.dragging", () => false);

export const elementCreated = createAction(ELEMENT_CREATED);

export const updateElement = createAction(UPDATE_ELEMENT);
addReducer(
    [UPDATE_ELEMENT],
    action => {
        const { element } = action.payload;
        if (element.type === "document") {
            return "page.content";
        }
        // .slice(2) removes `0.` from the beginning of the generated path
        return "page.content." + action.payload.element.path.replace(/\./g, ".elements.").slice(2);
    },
    (state, action) => {
        const { element, merge = false } = action.payload;

return;
        }

        if (debouncedSave) {
            debouncedSave.cancel();
        }

        debouncedSave = debounce(() => store.dispatch(saveRevision(null, { onFinish })), 1000);
        debouncedSave();
    }
);

const startSaving = { type: START_SAVING, payload: { progress: true } };
const finishSaving = { type: FINISH_SAVING, payload: { progress: false } };

addReducer([START_SAVING, FINISH_SAVING], "ui.saving", (state, action) => {
    return action.payload.progress;
});

addMiddleware([SAVING_REVISION], ({ store, next, action }) => {
    next(action);

    const data: Object = getPage(store.getState());
    if (data.locked) {
        return;
    }

    // Construct page payload
    const revision = pick(data, ["title", "snippet", "url", "settings"]);
    revision.content = data.content.present;
    revision.category = data.category.id;

// Flatten page content
const flattenContent = el => {
    let els = {};
    el.elements =
        Array.isArray(el.elements) &&
        el.elements.map(child => {
            els = { ...els, ...flattenContent(child) };
            return child.id;
        });

    els[el.id] = el;
    return els;
};

addReducer([FLATTEN_ELEMENTS], "elements", (state, action) => {
    return action.payload;
});

addMiddleware(
    [UPDATE_ELEMENT, DELETE_ELEMENT, "@@redux-undo/UNDO", "@@redux-undo/REDO", "@@redux-undo/INIT"],
    ({ store, next, action }) => {
        const result = next(action);

        const state = store.getState();
        if (state.page.content) {
            const content = dotProp.get(state, "page.content.present") || null;
            if (!content) {
                return result;
            }
            const elements = flattenContent(cloneDeep(content));
            store.dispatch({ type: FLATTEN_ELEMENTS, payload: elements, meta: { log: true } });

});
});

export const updateRevision = createAction(UPDATE_REVISION);
addMiddleware([UPDATE_REVISION], ({ store, next, action }) => {
    next(action);

    if (action.payload.history === false) {
        return;
    }

    const { onFinish } = action.meta;
    store.dispatch(saveRevision(null, { onFinish }));
});

addReducer([UPDATE_REVISION], "page", (state, action) => {
    return { ...state, ...action.payload };
});

// Flatten page content
const flattenContent = el => {
    let els = {};
    el.elements =
        Array.isArray(el.elements) &&
        el.elements.map(child => {
            els = { ...els, ...flattenContent(child) };
            return child.id;
        });

    els[el.id] = el;
    return els;
};

// Create a new column with half of the original target width
    let newColumn;
    if (source.path) {
        // $FlowFixMe
        newColumn = cloneElement(source);
    } else {
        dispatchNew = true;
        newColumn = createColumn();
    }

    // $FlowFixMe
    newColumn = set(newColumn, "data.width", row.elements[targetIndex].data.width);

    row = addElementToParent(newColumn, row, targetIndex + 1);
    redux.store.dispatch(updateElement({ element: row }));

    if (source.path) {
        redux.store.dispatch(deleteElement({ element: source }));
    }

    if (dispatchNew) {
        redux.store.dispatch(elementCreated({ element: newColumn, source }));
    }
};

onReceived({ source, target, position = null }) {
            let dispatchNew = false;
            let element;
            if (source.path) {
                // $FlowFixMe
                element = cloneElement(source);
            } else {
                dispatchNew = true;
                element = createElement(source.type, {}, target);
            }

            const block = addElementToParent(element, target, position);

            // Dispatch update action
            redux.store.dispatch(updateElement({ element: block }));

            // Delete exiting element
            if (source.path) {
                redux.store.dispatch(deleteElement({ element: source }));
            }

            if (dispatchNew) {
                redux.store.dispatch(elementCreated({ element, source }));
            }
        },
        onChildDeleted({ element }) {

addMiddleware([SAVING_REVISION], ({ store, next, action }) => {
    next(action);

    const data: Object = getPage(store.getState());
    if (data.locked) {
        return;
    }

    // Construct page payload
    const revision = pick(data, ["title", "snippet", "url", "settings"]);
    revision.content = data.content.present;
    revision.category = data.category.id;

    // Check if API call is necessary
    if (!dataChanged(revision)) {
        return;
    }

    lastSavedRevision = revision;