@alpaca-editor/core 1.0.0 → 1.0.3

package/dist/config/types.d.ts

@@ -0,0 +1,223 @@
+import { ComponentType, ReactNode, Dispatch, SetStateAction } from "react";
+import { EditContextType } from "../editor/client/editContext";
+import { Command, CommandData } from "../editor/commands/commands";
+import { EditorWarningProps } from "../editor/EditorWarnings";
+import { Field, FieldButton, FullItem, ItemDescriptor } from "../editor/pageModel";
+import { InsertItemCommand, ItemCommand } from "../editor/commands/itemCommands";
+import { User } from "../types";
+import { WizardData, WizardPageModel } from "../page-wizard/PageWizard";
+import { Wizard } from "../page-wizard/PageWizard";
+import { DialogContextValue } from "../editor/client/DialogContext";
+export type RichTextEditorProfile = {
+    toolbar: {
+        groups: RichTextEditorToolbarGroup[];
+    };
+};
+export type ClientFieldButton = FieldButton & {
+    clientAction?: FieldAction;
+};
+export type FieldAction = ({ editContext, dialogContext, }: FieldActionProps) => Promise<any> | void;
+export type FieldActionProps = {
+    editContext: EditContextType;
+    dialogContext: DialogContextValue;
+    field: Field;
+};
+export type RichTextEditorToolbarGroup = {
+    items: RichTextEditorToolbarItem[];
+};
+export type RichTextEditorToolbarItem = string | {};
+export type EditorClientBuilderProps = {
+    configuration: EditorConfiguration;
+    buildClient: (configuration: EditorConfiguration) => ReactNode;
+    user: User;
+};
+export type Panel = {
+    name: string;
+    title: string;
+    icon?: string | React.JSX.Element;
+    header?: ComponentType;
+    content: ReactNode;
+    initialSize: number;
+    noOverflow?: boolean;
+};
+export type PanelFactory = (editContext: EditContextType) => Panel;
+export type Sidebar = {
+    panels: (Panel | PanelFactory)[];
+    title?: string;
+};
+export type EditorView = {
+    name: string;
+    extends?: string;
+    title?: string;
+    icon?: string | React.JSX.Element;
+    defaultCenterPanelView?: ReactNode;
+    menuBar?: ReactNode;
+    leftSidebar?: Sidebar;
+    rightSidebar?: Sidebar;
+    hidden?: boolean;
+    primaryControls?: ReactNode;
+    secondaryControls?: ReactNode;
+    hideViewSelector?: boolean;
+};
+export type ViewPanel = {
+    name: string;
+    content: ReactNode;
+};
+export type MenuItem = {
+    id: string;
+    label: string;
+    icon: ReactNode;
+    items?: MenuItem[];
+    command?: (event: any) => Promise<void>;
+};
+export type EditorConfiguration = {
+    extensions: {
+        [key: string]: unknown;
+    };
+    commands: {
+        renameItem: ItemCommand;
+        deleteItem: ItemCommand;
+        insertItem: InsertItemCommand;
+        publishItem: ItemCommand;
+        allItemCommands: ItemCommand[];
+        reviewcommands: Command<CommandData>[];
+    };
+    events: {
+        onUnauthorized?: () => void;
+    };
+    services: {
+        renderService: {
+            path?: string;
+        };
+        editorService: {};
+        aiService: {
+            promptUrl: string;
+        };
+    };
+    editorWarnings: ComponentType<EditorWarningProps>[];
+    fieldTypes: {
+        [key: string]: FieldTypeConfiguration;
+    };
+    outline: {
+        width: number;
+    };
+    debounceFieldEditsInterval: number;
+    devices: Device[];
+    pageWizard: {
+        getWizards: (parentItem: ItemDescriptor) => Promise<Wizard[]>;
+        startWizardCommand: Command<{
+            wizard: Wizard;
+            item: ItemDescriptor;
+        }>;
+        stepComponents: {
+            [key: string]: ComponentType<StepComponentProps>;
+        };
+    };
+    editor: {
+        defaultPanelSizes: [number, number];
+        dialogs: {
+            newPage: {
+                expandTreeNode?: string;
+            };
+        };
+        views: EditorView[];
+        actionsMenu?: {
+            itemsFactory: (editContext: EditContextType) => MenuItem[];
+        };
+        mainNavigation?: (MenuItem | Command<any>)[];
+        embedded?: boolean;
+        titlebar: ReactNode;
+        contentTree: {
+            contextMenu: {
+                factory: (props: {
+                    items: FullItem[];
+                    editContext: EditContextType;
+                    commandCallback?: (command: ItemCommand, result: any) => void;
+                }) => Promise<MenuItem[] | undefined>;
+            };
+        };
+    };
+    controlCenter: {
+        groups: {
+            title: string;
+            icon: ReactNode;
+            panels: ControlCenterPanel[];
+        }[];
+    };
+    tours: {
+        default: Tour;
+        preview: Tour;
+    };
+    activeTour: string;
+};
+export type Tour = {
+    getSteps: (params: GetEditorTourStepsParams) => Record<string, TourStep>;
+};
+export type ControlCenterPanel = {
+    id: string;
+    title: string;
+    icon?: ReactNode;
+    content: ReactNode;
+};
+export type Device = {
+    name: string;
+    width: number | undefined;
+    height: number | undefined;
+};
+export type FieldTypeConfiguration = {
+    editor: React.ComponentType<any>;
+    buttons?: FieldButton[];
+    custom?: any;
+};
+export type TourButton = {
+    label: ReactNode;
+    onClick: () => void;
+    className?: string;
+};
+export type TourStep = {
+    title?: ReactNode;
+    description?: ReactNode;
+    focusElement?: string;
+    extendFocus?: number;
+    prepareAction?: () => Promise<void>;
+    action?: () => Promise<void>;
+    bubblePosition?: "left" | "right" | "bottom" | "top-right";
+    flipArrow?: boolean;
+    waitForUserInput?: () => Promise<string | void>;
+    buttons?: TourButton[];
+    nextStep?: string;
+    waitForElement?: string;
+    getPointTo?: () => DOMRect | undefined;
+    pointToElement?: string;
+};
+export type GetEditorTourStepsParams = {
+    editContext: EditContextType;
+    nextStep: (stepId: string) => void;
+    stopTour: () => void;
+    waitForElement: (selector: string, timeout?: number) => Promise<DOMRect | undefined>;
+    waitForElementToDisappear: (selector: string) => Promise<void>;
+    setFocusRect: (rect: DOMRect) => void;
+    delay: (ms: number) => Promise<void>;
+    waitForInput: (selector: string, minNumberOfCharacters: number) => Promise<void>;
+    simulateTyping: (element: HTMLInputElement | HTMLTextAreaElement, text: string, interval?: number) => Promise<void>;
+};
+export type TranslationStatus = {
+    itemId: string;
+    targetLanguage: string;
+    sourceLanguage: string;
+    status: string;
+    timestamp: string;
+    message?: string;
+};
+export interface StepComponentProps {
+    step: any;
+    data: WizardData;
+    setData: React.Dispatch<React.SetStateAction<WizardData>>;
+    wizard: Wizard;
+    parentItem?: ItemDescriptor;
+    setStepCompleted: (completed: boolean) => void;
+    internalState: any;
+    setInternalState: Dispatch<SetStateAction<any>>;
+    pageModel: WizardPageModel;
+    setPageModel: Dispatch<SetStateAction<WizardPageModel>>;
+}

package/dist/config/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/config/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/config/types.ts"],"names":[],"mappings":""}

package/dist/editor/ComponentInfo.d.ts

@@ -0,0 +1,4 @@
+import { Component } from "./pageModel";
+export declare function ComponentInfo({ component }: {
+    component: Component | null;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/editor/ComponentInfo.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { CopyToClipboardButton } from "./ui/CopyToClipboardButton";
+import { Section } from "./ui/Section";
+import { useEditContext } from "./client/editContext";
+export function ComponentInfo({ component }) {
+    if (!component)
+        return null;
+    const editContext = useEditContext();
+    const [layoutItem, setLayoutItem] = useState();
+    useEffect(() => {
+        if (!component.layoutId) {
+            setLayoutItem(undefined);
+            return;
+        }
+        editContext.itemsRepository
+            .getItem({
+            id: component.layoutId,
+            language: editContext.currentItemDescriptor.language,
+            version: 0,
+        })
+            .then(setLayoutItem);
+    }, [component.layoutId]);
+    const hostingPageItem = layoutItem ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "font-bold", children: "Source:" }), _jsxs("div", { children: [layoutItem.path, " ID: ", layoutItem.id] })] })) : null;
+    const linkedComponent = component.datasourceItem ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "font-bold", children: "Source:" }), _jsxs("div", { children: [component.datasourceItem.path, " (", component.datasourceItem.id, ")"] })] })) : null;
+    return (_jsxs("div", { children: [_jsx("h2", { className: "py-3 px-3 text-l font-bold my-2", children: component.name }), _jsx(Section, { title: "Info", children: _jsxs("div", { className: "grid grid-cols-[min-content_1fr] gap-3 text-xs bg-gray-100", children: [_jsx("div", { className: "font-bold", children: "ID:" }), _jsxs("div", { children: [component.id, " ", _jsx(CopyToClipboardButton, { text: component.id })] }), _jsx("div", { className: "font-bold", children: "Template" }), _jsxs("div", { children: ["(", component.datasourceItem?.templateId, component.datasourceItem && (_jsx(CopyToClipboardButton, { text: component.datasourceItem.templateId })), ")"] }), _jsx("div", { className: "font-bold", children: "Languages" }), _jsx("div", { children: component.datasourceItem?.translations?.join(", ") }), hostingPageItem, linkedComponent] }) })] }));
+}
+//# sourceMappingURL=ComponentInfo.js.map

package/dist/editor/ComponentInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentInfo.js","sourceRoot":"","sources":["../../src/editor/ComponentInfo.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,UAAU,aAAa,CAAC,EAAE,SAAS,EAAmC;IAC1E,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAE5B,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,EAAY,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;YACxB,aAAa,CAAC,SAAS,CAAC,CAAC;YACzB,OAAO;QACT,CAAC;QACD,WAAY,CAAC,eAAe;aACzB,OAAO,CAAC;YACP,EAAE,EAAE,SAAS,CAAC,QAAQ;YACtB,QAAQ,EAAE,WAAY,CAAC,qBAAsB,CAAC,QAAQ;YACtD,OAAO,EAAE,CAAC;SACX,CAAC;aACD,IAAI,CAAC,aAAa,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEzB,MAAM,eAAe,GAAG,UAAU,CAAC,CAAC,CAAC,CACnC,8BACE,cAAK,SAAS,EAAC,WAAW,wBAAc,EACxC,0BACG,UAAU,CAAC,IAAI,WAAO,UAAU,CAAC,EAAE,IAChC,IACL,CACJ,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,eAAe,GAAG,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,CACjD,8BACE,cAAK,SAAS,EAAC,WAAW,wBAAc,EACxC,0BACG,SAAS,CAAC,cAAc,CAAC,IAAI,QAAI,SAAS,CAAC,cAAc,CAAC,EAAE,SACzD,IACL,CACJ,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,OAAO,CACL,0BACE,aAAI,SAAS,EAAC,iCAAiC,YAC5C,SAAS,CAAC,IAAI,GACZ,EACL,KAAC,OAAO,IAAC,KAAK,EAAC,MAAM,YACnB,eAAK,SAAS,EAAC,4DAA4D,aACzE,cAAK,SAAS,EAAC,WAAW,oBAAU,EACpC,0BACG,SAAS,CAAC,EAAE,OAAE,KAAC,qBAAqB,IAAC,IAAI,EAAE,SAAS,CAAC,EAAE,GAAI,IACxD,EACN,cAAK,SAAS,EAAC,WAAW,yBAAe,EACzC,+BACI,SAAS,CAAC,cAAc,EAAE,UAAU,EACrC,SAAS,CAAC,cAAc,IAAI,CAC3B,KAAC,qBAAqB,IACpB,IAAI,EAAE,SAAS,CAAC,cAAc,CAAC,UAAU,GACzC,CACH,SAEG,EACN,cAAK,SAAS,EAAC,WAAW,0BAAgB,EAC1C,wBAAM,SAAS,CAAC,cAAc,EAAE,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,GAAO,EAC9D,eAAe,EACf,eAAe,IACZ,GACE,IACN,CACP,CAAC;AACJ,CAAC"}

package/dist/editor/ConfirmationDialog.d.ts

@@ -0,0 +1,19 @@
+export type ConfirmationDialogProps = {};
+export type ConfirmationProps = {
+    message: React.ReactNode;
+    acceptIcon?: string;
+    rejectIcon?: string;
+    header?: React.ReactNode;
+    acceptLabel?: string;
+    rejectLabel?: string;
+    icon?: string;
+    accept: () => void;
+    reject?: () => void;
+    showCancel?: boolean;
+    showAccept?: boolean;
+};
+export interface ConfirmationDialogHandle {
+    confirm: (props: ConfirmationProps) => void;
+}
+declare const ConfirmationDialog: import("react").ForwardRefExoticComponent<import("react").RefAttributes<ConfirmationDialogHandle>>;
+export default ConfirmationDialog;

package/dist/editor/ConfirmationDialog.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, forwardRef, useImperativeHandle } from "react";
+import { Dialog } from "primereact/dialog";
+import { Button } from "primereact/button";
+const ConfirmationDialog = forwardRef((_props, ref) => {
+    const [visible, setVisible] = useState(false);
+    const [props, setProps] = useState();
+    const showAccept = props?.accept === undefined ? true : props.accept;
+    useImperativeHandle(ref, () => ({
+        confirm: (props) => {
+            setVisible(true);
+            setProps(props);
+        },
+    }));
+    const handleAccept = () => {
+        props?.accept();
+        setVisible(false);
+    };
+    const handleReject = () => {
+        if (props?.reject)
+            props.reject();
+        setVisible(false);
+    };
+    const handleCancel = () => {
+        setVisible(false);
+    };
+    const dialogFooter = (_jsxs("div", { children: [showAccept && (_jsx(Button, { label: props?.acceptLabel || "Yes", icon: props?.acceptIcon || "pi pi-check", onClick: handleAccept, className: "p-button-text" })), props?.rejectLabel && (_jsx(Button, { label: props?.rejectLabel, icon: props?.rejectIcon || "pi pi-times", onClick: handleReject, className: "p-button-text" })), props?.showCancel && (_jsx(Button, { label: "Cancel", icon: "pi pi-ban", onClick: handleCancel, className: "p-button-text" }))] }));
+    return (visible && (_jsx(Dialog, { header: props?.header || "Confirm", visible: visible, style: { maxWidth: "50vw" }, footer: dialogFooter, onHide: handleCancel, children: _jsxs("div", { className: "flex items-center gap-2 p-3", children: [props?.icon && _jsx("i", { className: props.icon + " text-3xl" }), props?.message] }) })));
+});
+export default ConfirmationDialog;
+//# sourceMappingURL=ConfirmationDialog.js.map

package/dist/editor/ConfirmationDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationDialog.js","sourceRoot":"","sources":["../../src/editor/ConfirmationDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAsB3C,MAAM,kBAAkB,GAAG,UAAU,CAGnC,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE;IAChB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAqB,CAAC;IAExD,MAAM,UAAU,GAAG,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC;IAErE,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,OAAO,EAAE,CAAC,KAAwB,EAAE,EAAE;YACpC,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,KAAK,EAAE,MAAM;YAAE,KAAK,CAAC,MAAM,EAAE,CAAC;QAClC,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CACnB,0BACG,UAAU,IAAI,CACb,KAAC,MAAM,IACL,KAAK,EAAE,KAAK,EAAE,WAAW,IAAI,KAAK,EAClC,IAAI,EAAE,KAAK,EAAE,UAAU,IAAI,aAAa,EACxC,OAAO,EAAE,YAAY,EACrB,SAAS,EAAC,eAAe,GACzB,CACH,EACA,KAAK,EAAE,WAAW,IAAI,CACrB,KAAC,MAAM,IACL,KAAK,EAAE,KAAK,EAAE,WAAW,EACzB,IAAI,EAAE,KAAK,EAAE,UAAU,IAAI,aAAa,EACxC,OAAO,EAAE,YAAY,EACrB,SAAS,EAAC,eAAe,GACzB,CACH,EACA,KAAK,EAAE,UAAU,IAAI,CACpB,KAAC,MAAM,IACL,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,YAAY,EACrB,SAAS,EAAC,eAAe,GACzB,CACH,IACG,CACP,CAAC;IAEF,OAAO,CACL,OAAO,IAAI,CACT,KAAC,MAAM,IACL,MAAM,EAAE,KAAK,EAAE,MAAM,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,EAC3B,MAAM,EAAE,YAAY,EACpB,MAAM,EAAE,YAAY,YAEpB,eAAK,SAAS,EAAC,6BAA6B,aACzC,KAAK,EAAE,IAAI,IAAI,YAAG,SAAS,EAAE,KAAK,CAAC,IAAI,GAAG,WAAW,GAAM,EAC3D,KAAK,EAAE,OAAO,IACX,GACC,CACV,CACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,kBAAkB,CAAC"}

package/dist/editor/ContentTree.d.ts

@@ -0,0 +1,35 @@
+import { ItemTreeNodeData } from "./services/contentService";
+import { ItemDescriptor } from "./pageModel";
+import { TreeNode } from "./ui/PerfectTree";
+type CustomTreeNode = TreeNode & {
+    isDraggable?: boolean;
+    iconUrl?: string;
+    url?: string;
+    loading?: boolean;
+    parent?: CustomTreeNode;
+    selectable?: boolean;
+    className?: string;
+};
+export default function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionMode, selectedItemIds, rootItemId, rootItemIds, onSelectionChange, filter, templateIds, className, includeEmbeddedItems, onDoubleClick, selectPagesOnly, renderNode, onItemInserted, language, includeItemPath, }: {
+    isDraggable?: (item: ItemTreeNodeData) => boolean;
+    dragStart?: (item: ItemTreeNodeData) => void;
+    dragEnd?: () => void;
+    expandIdPath?: string;
+    selectionMode?: "single" | "multiple" | "none";
+    rootItemId?: string;
+    rootItemIds?: string[];
+    selectedItemIds?: string[];
+    onSelectionChange?: (itemIds: ItemTreeNodeData[]) => void;
+    onNodeClick?: (item: ItemTreeNodeData) => void;
+    filter?: (items: ItemTreeNodeData[]) => ItemTreeNodeData[];
+    templateIds?: string[];
+    className?: string;
+    includeEmbeddedItems?: boolean;
+    onDoubleClick?: (item: ItemTreeNodeData) => void;
+    selectPagesOnly?: boolean;
+    onItemInserted?: (item: ItemDescriptor) => void;
+    renderNode?: (node: CustomTreeNode, defaultRenderer: (node: CustomTreeNode) => React.ReactNode) => React.ReactNode;
+    language: string;
+    includeItemPath?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export {};