@alpaca-editor/core 1.0.0

package/src/tour/default-tour.tsx

@@ -0,0 +1,300 @@
+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: {
+      description: "Oops, something went wrong.",
+      buttons: [
+        {
+          label: (
+            <>
+              <i className="pi pi-check" /> Close
+            </>
+          ),
+          onClick: () => stopTour(),
+        },
+      ],
+    },
+  };
+
+  return tourSteps;
+}

package/src/tour/preview-tour.tsx

@@ -0,0 +1,127 @@
+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: {
+      description: "Oops, something went wrong.",
+      buttons: [
+        {
+          label: (
+            <>
+              <i className="pi pi-check" /> Close
+            </>
+          ),
+          onClick: () => stopTour(),
+        },
+      ],
+    },
+  };
+
+  return tourSteps;
+}