@alpaca-editor/core 1.0.0

package/src/config/config.tsx

@@ -0,0 +1,737 @@
+import {
+  ClientFieldButton,
+  EditorConfiguration,
+  MenuItem,
+  RichTextEditorProfile,
+} from "./types";
+import { RichTextEditor } from "../editor/field-types/RichTextEditor";
+import { LinkFieldEditor } from "../editor/field-types/LinkFieldEditor";
+import { PictureFieldEditor } from "../editor/field-types/PictureFieldEditor";
+import { InternalLinkFieldEditor } from "../editor/field-types/InternalLinkFieldEditor";
+import TreeListEditor from "../editor/field-types/TreeListEditor";
+import { SingleLineText } from "../editor/field-types/SingleLineText";
+import { MultiLineText } from "../editor/field-types/MultiLineText";
+import { DropLinkEditor } from "../editor/field-types/DropLinkEditor";
+import { DropListEditor } from "../editor/field-types/DropListEditor";
+import { RawEditor } from "../editor/field-types/RawEditor";
+import { CheckboxEditor } from "../editor/field-types/CheckboxEditor";
+
+import { ItemLocked } from "../editor/editor-warnings/ItemLocked";
+import { NoWriteAccess } from "../editor/editor-warnings/NoWriteAccess";
+import { ValidationErrors } from "../editor/editor-warnings/ValidationErrors";
+import { ComponentTree } from "../editor/sidebar/ComponentTree";
+import { Performance } from "../editor/sidebar/Performance";
+
+import { EditHistory } from "../editor/sidebar/EditHistory";
+import { Sessions } from "../editor/sidebar/Sessions";
+import { Workbox } from "../editor/sidebar/Workbox";
+import { DictionaryEditor } from "../editor/sidebar/DictionaryEditor";
+import {
+  BugIcon,
+  EditIcon,
+  GraphQLIcon,
+  JsonIcon,
+  NavigatorIcon,
+  PageWizardIcon,
+  WizardIcon,
+} from "../editor/ui/Icons";
+import { Debug } from "../editor/sidebar/Debug";
+import { GraphQL } from "../editor/sidebar/GraphQL";
+
+import { EditorAiTerminal } from "../editor/ai/EditorAiTerminal";
+
+import { EditContextType } from "../editor/client/editContext";
+
+import { Titlebar } from "../editor/Titlebar";
+import { NoWriteLanguageAccess } from "../editor/editor-warnings/NoLanguageWriteAccess";
+import { NoWorkflowWriteAccess } from "../editor/editor-warnings/NoWorkflowWriteAccess";
+import { SplashScreen } from "../splash-screen/SplashScreen";
+import { PageViewerControls } from "../editor/menubar/PageViewerControls";
+import { ItemLanguageVersion } from "../editor/menubar/ItemLanguageVersion";
+import { ActiveUsers } from "../editor/menubar/ActiveUsers";
+import { Validation } from "../editor/sidebar/Validation";
+import { Separator } from "../editor/menubar/Separator";
+import { Field, FieldButton, FullItem } from "../editor/pageModel";
+import { LinkValue } from "../editor/fieldTypes";
+import {
+  deleteItemCommand,
+  insertItemCommand,
+  ItemCommand,
+  publishItemCommand,
+  renameItemCommand,
+} from "../editor/commands/itemCommands";
+import { loadInsertOptions } from "../editor/services/editService";
+import { getDefaultTourSteps } from "../tour/default-tour";
+import { Translation } from "../editor/sidebar/Translations";
+import { EditView } from "../editor/views/EditView";
+import { InsertMenuTemplate } from "../editor/InsertMenu";
+import { ControlCenterMenu } from "../editor/control-center/ControlCenterMenu";
+import { Status } from "../editor/control-center/Status";
+import { IndexOverview } from "../editor/control-center/IndexOverview";
+import { MainContentTree } from "../editor/sidebar/MainContentTree";
+import { AttachmentEditor } from "../editor/field-types/AttachmentEditor";
+import { Comments } from "../editor/reviews/Comments";
+import { Reviews } from "../editor/reviews/Reviews";
+
+import { rejectReviewCommand } from "../editor/reviews/reviewCommands";
+import { approveReviewCommand } from "../editor/reviews/reviewCommands";
+import { ActionsMenu } from "../editor/menubar/ActionsMenu";
+import { User } from "../types";
+import { PreviewInfo } from "../editor/reviews/PreviewInfo";
+import { getPreviewTourSteps } from "../tour/preview-tour";
+import { PageWizard } from "../page-wizard/PageWizard";
+import { CollectStep } from "../page-wizard/steps/CollectStep";
+import { LayoutStep } from "../page-wizard/steps/LayoutStep";
+import { BuildPageStep } from "../page-wizard/steps/BuildPageStep";
+import { SelectStep } from "../page-wizard/steps/SelectStep";
+import { ImagesStep } from "../page-wizard/steps/ImagesStep";
+import { CreatePageAndLayoutStep } from "../page-wizard/steps/CreatePageAndLayoutStep";
+import { getWizards } from "../page-wizard/service";
+
+import { startPageWizardCommand } from "../page-wizard/startPageWizardCommand";
+import { ImageFieldEditor } from "../editor/field-types/ImageFieldEditor";
+import { FieldAction } from "./types";
+
+const defaultRichTextEditorProfile: RichTextEditorProfile = {
+  toolbar: {
+    groups: [
+      {
+        items: ["bold", "italic", "underline", "strikethrough"],
+      },
+    ],
+  },
+};
+
+export const contentItemId = "0DE95AE4-41AB-4D01-9EB0-67441B7C2450";
+export const templatesRootItemId = "3c1715fe-6a13-4fcf-845f-de308ba9741d";
+
+const openTargetActionButton: ClientFieldButton = {
+  label: "Open target item",
+  icon: "pi pi-external-link",
+  clientAction: ({ field, editContext }) => {
+    const fieldValue = field.value as LinkValue;
+
+    if (fieldValue?.targetItemId) {
+      editContext.loadItem({
+        id: fieldValue.targetItemId,
+        language: field.descriptor.item.language,
+        version: 0,
+      });
+    }
+  },
+  isGenerator: false,
+  id: "open-target-in-content-editor",
+  description: "Opens the target item in the content/page editor",
+};
+
+const pageEditorRightSidebar = {
+  title: "COMPONENT NAVIGATOR & HISTORY",
+  panels: [
+    {
+      name: "component-tree",
+      icon: <NavigatorIcon />,
+      title: "Component Navigator",
+      content: <ComponentTree />,
+      initialSize: 20,
+    },
+    {
+      name: "history",
+      icon: "pi pi-clock",
+      title: "History",
+      content: <EditHistory />,
+      initialSize: 15,
+    },
+  ],
+};
+
+const editView = <EditView />;
+const editPrimaryControls = <PageViewerControls />;
+const itemPageEditorSecondaryControls = (
+  <div className="flex items-center gap-2">
+    <ItemLanguageVersion />
+    <Separator size="large" />
+    <ActiveUsers />
+    <ActionsMenu />
+  </div>
+);
+
+const pageEditorViewBase = {
+  primaryControls: editPrimaryControls,
+  secondaryControls: itemPageEditorSecondaryControls,
+  rightSidebar: pageEditorRightSidebar,
+  defaultCenterPanelView: editView,
+};
+
+export const getConfiguration = (): EditorConfiguration => {
+  return {
+    extensions: {},
+    tours: {
+      default: {
+        getSteps: (params) =>
+          getDefaultTourSteps(params, {
+            firstComponentTemplateId: "39593ec8-0d85-46f2-9573-c368ef7e4ae3",
+            firstComponentTemplateName: "Section",
+            firstComponentTextFieldName: "Title",
+            firstComponentTextFieldId: "f352f51f-062c-4874-a561-6283f8679583",
+            firstComponentRichTextFieldName: "Introduction",
+            firstComponentRichTextFieldId:
+              "b44b547b-33f5-4379-8ac3-c57ccea2d407",
+          }),
+      },
+      preview: {
+        getSteps: (params) => getPreviewTourSteps(params),
+      },
+    },
+    activeTour: "default",
+    commands: {
+      renameItem: renameItemCommand,
+      deleteItem: deleteItemCommand,
+      insertItem: insertItemCommand,
+      publishItem: publishItemCommand,
+      allItemCommands: [
+        renameItemCommand,
+        deleteItemCommand,
+        publishItemCommand,
+      ],
+      reviewcommands: [approveReviewCommand, rejectReviewCommand],
+    },
+    events: {},
+    services: {
+      renderService: { path: "/alpaca/editor/render" },
+      editorService: {
+        //baseUrl: "",
+      },
+      aiService: {
+        promptUrl: "/alpaca/editor/ai/prompt",
+      },
+    },
+    fieldTypes: {
+      raw: {
+        editor: RawEditor,
+      },
+      "single-line text": {
+        editor: SingleLineText,
+      },
+      "multi-line text": {
+        editor: MultiLineText,
+      },
+      "rich text": {
+        editor: RichTextEditor,
+        custom: {
+          profiles: { default: defaultRichTextEditorProfile },
+        },
+      },
+      "general link": {
+        editor: LinkFieldEditor,
+      },
+      picture: {
+        editor: PictureFieldEditor,
+      },
+      image: {
+        editor: ImageFieldEditor,
+        buttons: [],
+      },
+      droplink: {
+        editor: DropLinkEditor,
+        buttons: [openTargetActionButton],
+      },
+      "enhanced dropLink": {
+        editor: DropLinkEditor,
+        buttons: [openTargetActionButton],
+      },
+      "enhanced internal link": {
+        editor: InternalLinkFieldEditor,
+        buttons: [openTargetActionButton],
+      },
+      droplist: {
+        editor: DropListEditor,
+      },
+      treelistex: {
+        editor: TreeListEditor,
+      },
+      treelist: {
+        editor: TreeListEditor,
+      },
+      "enhanced treelist": {
+        editor: TreeListEditor,
+      },
+      "tree list": {
+        editor: TreeListEditor,
+      },
+      multilist: {
+        editor: TreeListEditor,
+      },
+      checkbox: {
+        editor: CheckboxEditor,
+      },
+      droptree: {
+        editor: InternalLinkFieldEditor,
+      },
+      attachment: {
+        editor: AttachmentEditor,
+      },
+    },
+    editorWarnings: [
+      NoWriteAccess,
+      NoWriteLanguageAccess,
+      NoWorkflowWriteAccess,
+      ItemLocked,
+      ValidationErrors,
+    ],
+    outline: {
+      width: 100,
+    },
+    debounceFieldEditsInterval: 250,
+    devices: [
+      { name: "iPhone 14 Pro Max", width: 430, height: 932 },
+      { name: "iPhone SE", width: 375, height: 667 },
+      { name: "Pixel 7", width: 412, height: 915 },
+      { name: "iPad Mini", width: 768, height: 1024 },
+      { name: "iPad Pro", width: 1024, height: 1366 },
+      { name: "Responsive", width: undefined, height: undefined },
+    ],
+
+    pageWizard: {
+      getWizards: getWizards,
+      startWizardCommand: startPageWizardCommand,
+
+      stepComponents: {
+        CollectStep,
+        LayoutStep,
+        BuildPageStep,
+        SelectStep,
+        ImagesStep,
+        CreatePageAndLayoutStep,
+      },
+    },
+
+    controlCenter: {
+      groups: [
+        {
+          title: "Indexing",
+          icon: <i className="pi pi-search" />,
+          panels: [
+            {
+              id: "indexes",
+              title: "All Indexes",
+              icon: <i className="pi pi-search" />,
+              content: <IndexOverview />,
+            },
+          ],
+        },
+      ],
+    },
+    editor: {
+      defaultPanelSizes: [400, 300],
+      dialogs: {
+        newPage: {
+          expandTreeNode: "bafb88a1-506a-4671-b47b-1947730d25f6",
+        },
+      },
+      views: [
+        {
+          name: "splash-screen",
+          title: "Splash Screen",
+          icon: "pi pi-home",
+          hidden: true,
+          defaultCenterPanelView: <SplashScreen />,
+          hideViewSelector: true,
+        },
+        {
+          name: "page-editor",
+          title: "Edit",
+          icon: <EditIcon />,
+
+          ...pageEditorViewBase,
+        },
+        {
+          name: "ai",
+          title: "AI",
+          icon: <WizardIcon />,
+          leftSidebar: {
+            panels: [
+              {
+                name: "ai-terminal",
+                icon: "pi pi-comments",
+                title: "AI",
+                content: <EditorAiTerminal />,
+                initialSize: 70,
+                noOverflow: true,
+              },
+            ],
+          },
+          ...pageEditorViewBase,
+        },
+        {
+          name: "translate",
+          icon: "pi pi-language",
+          title: "Translate",
+          leftSidebar: {
+            panels: [
+              {
+                name: "translation",
+                icon: "pi pi-language",
+                title: "Translations",
+                content: <Translation />,
+                initialSize: 20,
+              },
+            ],
+          },
+          ...pageEditorViewBase,
+        },
+        {
+          name: "reviews",
+          title: "Reviews",
+          icon: "pi pi-comments",
+          leftSidebar: {
+            panels: [
+              {
+                name: "comments",
+                icon: "pi pi-comments",
+                title: "Comments",
+                content: <Comments />,
+                initialSize: 65,
+                noOverflow: true,
+              },
+              {
+                name: "reviews",
+                icon: "pi pi-users",
+                title: "Reviews",
+                content: <Reviews />,
+                initialSize: 35,
+                noOverflow: true,
+              },
+            ],
+          },
+          ...pageEditorViewBase,
+        },
+        {
+          name: "publish",
+          title: "Publish",
+          icon: "pi pi-globe",
+
+          leftSidebar: {
+            panels: [
+              {
+                name: "Workbox",
+                title: "Workbox",
+                icon: "pi-inbox",
+                content: <Workbox />,
+                initialSize: 50,
+              },
+              {
+                name: "Validation",
+                title: "Validation",
+                icon: "pi-check",
+                content: <Validation />,
+                initialSize: 50,
+              },
+            ],
+          },
+
+          ...pageEditorViewBase,
+        },
+        {
+          name: "content-editor",
+          title: "Content Editor",
+          icon: "pi pi-sitemap",
+          defaultCenterPanelView: editView,
+          leftSidebar: {
+            panels: [
+              {
+                name: "tree",
+                icon: "pi pi-sitemap",
+                title: "Content",
+                content: <MainContentTree mode="normal" />,
+                initialSize: 80,
+              },
+            ],
+          },
+          rightSidebar: pageEditorRightSidebar,
+          primaryControls: editPrimaryControls,
+          secondaryControls: itemPageEditorSecondaryControls,
+        },
+
+        {
+          name: "dictionary",
+          title: "Dictionary",
+          icon: "pi pi-book",
+          leftSidebar: {
+            panels: [
+              {
+                name: "dictionary",
+                icon: "pi pi-book",
+                title: "Dictionary",
+                content: <DictionaryEditor />,
+                initialSize: 100,
+              },
+            ],
+          },
+          ...pageEditorViewBase,
+        },
+
+        {
+          name: "sessions",
+          title: "Sessions",
+          icon: "pi pi-users",
+          leftSidebar: {
+            panels: [
+              {
+                name: "sessions",
+                icon: "pi pi-users",
+                title: "Sessions",
+                content: <Sessions />,
+                initialSize: 100,
+              },
+            ],
+          },
+          ...pageEditorViewBase,
+        },
+        {
+          name: "debug",
+          title: "Debug",
+          icon: <BugIcon />,
+
+          leftSidebar: {
+            panels: [
+              {
+                name: "component-tree",
+                icon: "pi pi-list",
+                title: "Outline",
+                content: <ComponentTree />,
+                initialSize: 20,
+              },
+              {
+                name: "debug",
+                icon: <JsonIcon />,
+                title: "JSON",
+                content: <Debug />,
+                initialSize: 30,
+              },
+              {
+                name: "graphql",
+                icon: <GraphQLIcon />,
+                title: "GraphQL",
+                content: <GraphQL />,
+                initialSize: 30,
+              },
+              {
+                name: "performance",
+                icon: "pi pi-stopwatch",
+                title: "Performance",
+                content: <Performance />,
+                initialSize: 20,
+              },
+            ],
+          },
+          ...pageEditorViewBase,
+        },
+        // {
+        //   name: "component-designer",
+        //   title: "Component Designer",
+        //   icon: "pi pi-palette",
+        //   defaultCenterPanelView: <ComponentDesigner />,
+        //   menuBar: <ComponentDesignerMenu />,
+        //   leftSidebar: {
+        //     panels: [
+        //       {
+        //         name: "component-tree",
+        //         icon: "pi pi-list",
+        //         title: "Outline",
+        //         content: <ComponentTree />,
+        //         initialSize: 30,
+        //       },
+        //       {
+        //         name: "ai-terminal",
+        //         icon: "pi pi-comments",
+        //         title: "AI",
+        //         content: <ComponentDesignerAiTerminal />,
+        //         initialSize: 40,
+        //       },
+        //       {
+        //         name: "history",
+        //         icon: "pi pi-clock",
+        //         title: "History",
+        //         content: <EditHistory />,
+        //         initialSize: 30,
+        //       },
+        //     ],
+        //   },
+        // },
+        {
+          name: "page-wizard",
+          title: "Page Wizard",
+          icon: <PageWizardIcon />,
+          defaultCenterPanelView: <PageWizard />,
+          hidden: true,
+        },
+        {
+          name: "control-center",
+          title: "Control Center",
+          icon: "pi pi-cog",
+          defaultCenterPanelView: <Status />,
+          menuBar: <></>,
+          leftSidebar: {
+            panels: [
+              {
+                name: "settings",
+                icon: "pi pi-cog",
+                title: "Control Center",
+                content: <ControlCenterMenu />,
+                initialSize: 30,
+              },
+            ],
+          },
+        },
+      ],
+
+      titlebar: <Titlebar />,
+      actionsMenu: {
+        itemsFactory: (editContext: EditContextType) => {
+          const commands = [
+            ...editContext.configuration.commands.reviewcommands,
+            "splitter",
+            ...editContext.configuration.commands.allItemCommands,
+          ];
+
+          if (!editContext.contentEditorItem) return [];
+
+          const items = [editContext.contentEditorItem];
+
+          const menuItems: MenuItem[] = [
+            ...commands.map((command) => {
+              if (typeof command === "string") {
+                return {
+                  id: "separator",
+                  separator: true,
+                  label: "",
+                  icon: "pi pi-splitter",
+                };
+              }
+              return {
+                id: command.id,
+                label: command.label,
+                icon: command.icon,
+                disabled: editContext.isCommandDisabled({
+                  command: command,
+                  data: { items },
+                }),
+                command: async (event: any) => {
+                  await editContext.executeCommand({
+                    command: command,
+                    event: event,
+                    data: { items },
+                  });
+                },
+              };
+            }),
+          ];
+          return menuItems;
+        },
+      },
+
+      contentTree: {
+        contextMenu: {
+          factory: async (props: {
+            items: FullItem[];
+            editContext: EditContextType;
+            commandCallback?: (command: ItemCommand, result: any) => void;
+          }): Promise<MenuItem[] | undefined> => {
+            const editContext = props.editContext;
+
+            if (!props.items) return;
+
+            const menuItems: MenuItem[] =
+              props.editContext.configuration.commands.allItemCommands?.map(
+                (x: ItemCommand) => {
+                  const commandData = {
+                    items: props.items,
+                  };
+
+                  return {
+                    id: x.id,
+                    label: x.label,
+                    icon: x.icon,
+                    command: async (triggerEvent: any) => {
+                      const result = await editContext?.executeCommand({
+                        command: x,
+                        data: commandData,
+                        event: triggerEvent,
+                      });
+
+                      if (props.commandCallback)
+                        props.commandCallback(x, result);
+                    },
+                    disabled: editContext?.isCommandDisabled({
+                      command: x,
+                      data: commandData,
+                    }),
+                  };
+                },
+              );
+
+            if (props.items.length > 1) return menuItems;
+
+            const item = props.items[0];
+            if (!item) return menuItems;
+            const insertOptions = await loadInsertOptions(item.descriptor);
+
+            const insertMenuItem = {
+              label: "Insert",
+              id: "insert",
+              disabled: insertOptions.length == 0,
+              icon: "pi pi-plus",
+              template: (
+                <InsertMenuTemplate
+                  insertOptions={insertOptions}
+                  item={item}
+                  commandCallback={props.commandCallback}
+                />
+              ),
+            };
+
+            return [insertMenuItem, ...menuItems];
+          },
+        },
+      },
+    },
+  };
+};
+
+export function configureForUser(
+  configuration: EditorConfiguration,
+  user: User,
+): EditorConfiguration {
+  if (user.isLimitedPreviewUser) {
+    return {
+      ...configuration,
+      activeTour: "preview",
+
+      editor: {
+        ...configuration.editor,
+        views: configuration.editor.views
+          .filter((x) => x.name === "reviews")
+          .map((x) => {
+            return {
+              ...x,
+              leftSidebar: {
+                ...x.leftSidebar,
+                panels: [
+                  ...(x.leftSidebar?.panels ?? []).filter(
+                    (x) => x.name !== "reviews",
+                  ),
+                ],
+              },
+              secondaryControls: (
+                <div className="flex items-center gap-3">
+                  <PreviewInfo />
+                  <ActionsMenu />
+                </div>
+              ),
+            };
+          }),
+      },
+    };
+  }
+  return configuration;
+}