@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/tour/default-tour.tsx

@@ -1,301 +0,0 @@
-import { GetEditorTourStepsParams, TourStep } from "../config/types";
-
-export function getDefaultTourSteps(
-  {
-    editContext,
-    nextStep,
-    stopTour,
-    waitForElement,
-    waitForElementToDisappear,
-    setFocusRect,
-    delay,
-    waitForInput,
-    simulateTyping,
-  }: GetEditorTourStepsParams,
-  config: {
-    firstComponentTemplateId: string;
-    firstComponentTemplateName: string;
-    firstComponentTextFieldName: string;
-    firstComponentTextFieldId: string;
-    firstComponentRichTextFieldName: string;
-    firstComponentRichTextFieldId: string;
-  },
-) {
-  const tourSteps: Record<string, TourStep> = {
-    "start-tour": {
-      title: "Welcome to the AI Editor Tour!",
-      description:
-        "I will show you around the editor and how to use the most important features.",
-      prepareAction: async () => {
-        editContext?.openSplashScreen();
-      },
-      buttons: [
-        {
-          label: (
-            <div className="flex items-center gap-2">
-              <i className="pi pi-play" /> Start Tour
-            </div>
-          ),
-          onClick: () => {
-            nextStep("new-page");
-          },
-          className: "button button-primary mt-2",
-        },
-        {
-          label: (
-            <div className="flex items-center gap-2">
-              <i className="pi pi-times" /> No thanks
-            </div>
-          ),
-          onClick: () => {
-            stopTour();
-          },
-          className: "button button-secondary mt-2",
-        },
-      ],
-    },
-    "new-page": {
-      description: (
-        <>
-          Click on the <b>New Page</b> tab to create a new page
-        </>
-      ),
-      focusElement: "#new-page-tab",
-      waitForUserInput: async () => {
-        await waitForElement("#new-page-tab.active-tab");
-      },
-      nextStep: "pick-location",
-    },
-    "pick-location": {
-      description: (
-        <>
-          Select the <b>Playground</b> folder as the parent for your new page
-        </>
-      ),
-      focusElement: ".tour-pick-location",
-      waitForUserInput: async () => {
-        await new Promise<void>((resolve) => {
-          const checkForElement = () => {
-            const elements = document.querySelectorAll(".p-highlight");
-            for (const element of elements) {
-              if (element.textContent?.trim() === "Playground") {
-                setFocusRect(element.getBoundingClientRect());
-                resolve();
-                return;
-              }
-            }
-            requestAnimationFrame(checkForElement);
-          };
-          checkForElement();
-        });
-      },
-      getPointTo: () => {
-        const elements = document.querySelectorAll(".p-treenode-label");
-        for (const element of elements) {
-          if (element.textContent?.trim() === "Playground") {
-            return element.getBoundingClientRect();
-          }
-        }
-        return undefined;
-      },
-      nextStep: "choose-template",
-    },
-    "choose-template": {
-      description: "Select a template for your page",
-      focusElement: ".tour-choose-template",
-      waitForUserInput: async () => {
-        await waitForElement(".tour-selected-template");
-      },
-      bubblePosition: "left",
-      nextStep: "enter-name",
-    },
-    "enter-name": {
-      description: "Enter a name for your page",
-      focusElement: "#new-page-name",
-      bubblePosition: "left",
-      waitForUserInput: async () => {
-        await waitForElement("#create-new-page-button:not(.p-disabled)");
-      },
-      nextStep: "create-page",
-    },
-    "create-page": {
-      description: "Click the Create button",
-      focusElement: "#create-new-page-button",
-      waitForUserInput: async () => {
-        await waitForElement("#insert-component-button");
-      },
-      nextStep: "ready-to-add-component",
-    },
-    "ready-to-add-component": {
-      description: "Wanna add a component to your beautiful empty page?",
-      buttons: [
-        {
-          label: (
-            <>
-              <i className="pi pi-arrow-right" /> I'm ready, lets go!
-            </>
-          ),
-          onClick: () => nextStep("insert-component"),
-        },
-      ],
-    },
-    "insert-component": {
-      description: "Excellent, click on the plus button to insert a component.",
-      focusElement: "#insert-component-button",
-      waitForUserInput: async () => {
-        await waitForElement(".tour-component-palette");
-      },
-      nextStep: "drag-component",
-    },
-    "drag-component": {
-      description: `Drag and drop a ${config.firstComponentTemplateName} component to your page.`,
-      focusElement: `#insert-component-${config.firstComponentTemplateId}`,
-      waitForUserInput: async () => {
-        await waitForElement(".tour-placeholder-dropzone");
-      },
-      nextStep: "drop-component-on-placeholder",
-    },
-    "drop-component-on-placeholder": {
-      description: "Drop the component onto this placeholder!",
-      focusElement: ".tour-placeholder-dropzone",
-      bubblePosition: "left",
-      extendFocus: 70,
-      waitForUserInput: async () => {
-        await waitForElementToDisappear(".tour-placeholder-dropzone");
-        await delay(400);
-        if (!document.querySelector(".tour-component-palette")) {
-          return "enter-title";
-        }
-        return "drag-component";
-      },
-      nextStep: "enter-title",
-    },
-    "enter-title": {
-      description: `Excellent! Now lets fill in the fields. First enter a ${config.firstComponentTextFieldName}`,
-      focusElement: `[data-field-id='${config.firstComponentTextFieldId}']`,
-      waitForUserInput: async () => {
-        await delay(5000);
-        await waitForInput(
-          `[data-field-id='${config.firstComponentTextFieldId}'] input`,
-          5,
-        );
-      },
-      nextStep: "see-content-update",
-    },
-    "see-content-update": {
-      description:
-        "See how the content is automatically updating on your page?",
-      focusElement: `[data-field-id='${config.firstComponentTextFieldId}']`,
-      pointToElement: `iframe:[data-fieldid='${config.firstComponentTextFieldId}']`,
-      bubblePosition: "bottom",
-      flipArrow: true,
-      waitForUserInput: async () => {
-        await delay(5000);
-        await waitForInput(
-          `[data-field-id='${config.firstComponentTextFieldId}'] input`,
-          5,
-        );
-      },
-      nextStep: "edit-content-inline",
-    },
-    "edit-content-inline": {
-      description:
-        "You can also directly edit the content on the page. Click on the [Introduction] placeholder here and start typing!",
-      focusElement: `iframe:[data-fieldid='${config.firstComponentRichTextFieldId}']`,
-      bubblePosition: "bottom",
-      flipArrow: true,
-      waitForUserInput: async () => {
-        await delay(5000);
-        await waitForInput(
-          `[data-field-id='${config.firstComponentRichTextFieldId}'] [contenteditable]`,
-          5,
-        );
-      },
-      nextStep: "ai-intro",
-    },
-    "ai-intro": {
-      description:
-        "But hey, this is an AI editor, so why not let the AI do some of the work for you?",
-      buttons: [
-        {
-          label: (
-            <>
-              <i className="pi pi-arrow-right" /> Great, show me!
-            </>
-          ),
-          onClick: () => nextStep("ai-sidebar"),
-        },
-      ],
-    },
-    "ai-sidebar": {
-      description: "Click on the AI sidebar to open the AI chat.",
-      focusElement: `[data-sidebarview-name='ai']`,
-      nextStep: "ai-terminal",
-      waitForElement: "[data-sidebarview-name='ai'].a-active",
-    },
-    "ai-terminal": {
-      description:
-        "Let me take control and add tell the AI to add some more components.",
-      focusElement: `.tour-ai-terminal textarea`,
-      waitForUserInput: async () => {
-        await delay(1000);
-        const aiTerminal = document.querySelector(".tour-ai-terminal textarea");
-        if (aiTerminal) {
-          (aiTerminal as HTMLTextAreaElement).focus();
-          await simulateTyping(
-            aiTerminal as HTMLTextAreaElement,
-            `Plase add three components of type ${config.firstComponentTemplateName} with some funny dummy content to the page.`,
-          );
-        }
-      },
-      bubblePosition: "top-right",
-      nextStep: "ai-submit",
-    },
-    "ai-submit": {
-      description: "Click on the Send button to submit the prompt to the AI.",
-      focusElement: ".tour-ai-terminal .tour-send-button",
-      bubblePosition: "top-right",
-      nextStep: "ai-watch-components-added",
-      waitForElement: ".tour-ai-terminal .a-prompt",
-    },
-    "ai-watch-components-added": {
-      description:
-        "Watch how the AI adds the components to the page. This can take a few seconds.",
-      focusElement: ".tour-ai-terminal",
-      pointToElement: ".tour-ai-terminal .a-prompt",
-      waitForElement: ".tour-ai-response-message-changes",
-      nextStep: "congratulations",
-    },
-    congratulations: {
-      title: "Congratulations!",
-      description: "You have completed the tour and are now an AI Editor Pro!",
-      buttons: [
-        {
-          label: (
-            <>
-              <i className="pi pi-check" /> Finish Tour
-            </>
-          ),
-          onClick: () => stopTour(),
-          className: "button button-primary mt-2",
-        },
-      ],
-    },
-    error: {
-      title: "Oh no...",
-      description: "Something went wrong.",
-      buttons: [
-        {
-          label: (
-            <>
-              <i className="pi pi-check" /> Close
-            </>
-          ),
-          onClick: () => stopTour(),
-        },
-      ],
-    },
-  };
-
-  return tourSteps;
-}

package/src/tour/preview-tour.tsx

@@ -1,128 +0,0 @@
-import { GetEditorTourStepsParams, TourStep } from "../config/types";
-
-export function getPreviewTourSteps({
-  editContext,
-  nextStep,
-  stopTour,
-  waitForElement,
-  delay,
-}: GetEditorTourStepsParams) {
-  const tourSteps: Record<string, TourStep> = {
-    "start-tour": {
-      title: "Welcome to the Preview Tour!",
-      description:
-        "I'll guide you through the preview and explain how to use its essential features.",
-      prepareAction: async () => {
-        editContext?.openSplashScreen();
-      },
-      buttons: [
-        {
-          label: (
-            <div className="flex items-center gap-2">
-              <i className="pi pi-play" /> Start Tour
-            </div>
-          ),
-          onClick: () => {
-            nextStep("comment");
-          },
-          className: "button button-primary mt-2",
-        },
-        {
-          label: (
-            <div className="flex items-center gap-2">
-              <i className="pi pi-times" /> No thanks
-            </div>
-          ),
-          onClick: () => {
-            stopTour();
-          },
-          className: "button button-secondary mt-2",
-        },
-      ],
-    },
-    comment: {
-      description: <>Click here to add a comment to the page</>,
-      focusElement: "#add-comment",
-      nextStep: "commentContextMenu",
-      buttons: [
-        {
-          label: (
-            <>
-              <i className="pi pi-arrow-right" /> Next
-            </>
-          ),
-          onClick: () => nextStep("commentContextMenu"),
-        },
-      ],
-    },
-    commentContextMenu: {
-      description: (
-        <>You can also select text and add a comment from the context menu </>
-      ),
-      focusElement: "[data-testid='pageEditoriframe']",
-      waitForUserInput: async () => {
-        await waitForElement(".p-contextmenu-enter-done");
-        await delay(1000);
-      },
-      nextStep: "approveMenu",
-      bubblePosition: "left",
-    },
-    approveMenu: {
-      description: <>Approve or reject the page here </>,
-      focusElement: "#actions-menu",
-      waitForUserInput: async () => {
-        await waitForElement("#approveReview");
-        await delay(2000);
-      },
-      nextStep: "closeTour",
-      bubblePosition: "left",
-    },
-    closeTour: {
-      description: <>Congratulations! You have completed the tour.</>,
-      buttons: [
-        {
-          label: (
-            <>
-              <i className="pi pi-check" /> Finish Tour
-            </>
-          ),
-          onClick: () => stopTour(),
-          className: "button button-primary mt-2",
-        },
-      ],
-    },
-    congratulations: {
-      title: "Congratulations!",
-      description:
-        "You have completed the tour and are ready to start editing!",
-      buttons: [
-        {
-          label: (
-            <>
-              <i className="pi pi-check" /> Finish Tour
-            </>
-          ),
-          onClick: () => stopTour(),
-          className: "button button-primary mt-2",
-        },
-      ],
-    },
-
-    error: {
-      title: "Oh no...",
-      description: "Something went wrong.",
-      buttons: [
-        {
-          label: (
-            <>
-              <i className="pi pi-check" /> Close
-            </>
-          ),
-          onClick: () => stopTour(),
-        },
-      ],
-    },
-  };
-
-  return tourSteps;
-}