@alpaca-editor/core 1.0.0

package/src/tour/Tour.tsx

@@ -0,0 +1,558 @@
+import { useState, useEffect } from "react";
+import { useEditContext } from "../client-components";
+import { classNames } from "primereact/utils";
+import { EditContextType } from "../editor/client/editContext";
+
+export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
+  const [currentStep, setCurrentStep] = useState<string>("start-tour");
+  const [show, setShow] = useState(true);
+  const editContext = useEditContext();
+  const [focusRect, setFocusRect] = useState<DOMRect | null>(null);
+  const [pointToRect, setPointToRect] = useState<DOMRect | null>(null);
+  const delay = (ms: number) =>
+    new Promise((resolve) => setTimeout(resolve, ms)) as Promise<void>;
+
+  const waitForElement = (
+    selector: string,
+    timeout: number = 0
+  ): Promise<DOMRect | undefined> => {
+    if (selector.startsWith("iframe:")) {
+      return waitForElementInIframe(selector.substring(7), timeout);
+    }
+
+    return new Promise<DOMRect | undefined>((resolve) => {
+      const startTime = Date.now();
+      const checkForElement = () => {
+        const element = document.querySelector(selector);
+        if (element) {
+          let rect = element.getBoundingClientRect();
+          const extendFocus = step?.extendFocus || 10;
+          rect = new DOMRect(
+            rect.left - extendFocus / 2,
+            rect.top - extendFocus / 2,
+            rect.width + extendFocus,
+            rect.height + extendFocus
+          );
+
+          resolve(rect);
+        } else if (timeout > 0 && Date.now() - startTime >= timeout) {
+          resolve(undefined);
+        } else {
+          requestAnimationFrame(checkForElement);
+        }
+      };
+      checkForElement();
+    });
+  };
+
+  const waitForElementInIframe = (
+    selector: string,
+    timeout: number = 0
+  ): Promise<DOMRect | undefined> => {
+    return new Promise<DOMRect | undefined>((resolve, reject) => {
+      const startTime = Date.now();
+      const checkForElement = () => {
+        const iframe = document.querySelector(
+          "iframe.page-iframe"
+        ) as HTMLIFrameElement;
+        if (iframe && iframe.contentDocument) {
+          const element = iframe.contentDocument.querySelector(selector);
+          if (element) {
+            const elementRect = element.getBoundingClientRect();
+            const iframeRect = iframe.getBoundingClientRect();
+            let rect = new DOMRect(
+              elementRect.left + iframeRect.left,
+              elementRect.top + iframeRect.top,
+              elementRect.width,
+              elementRect.height
+            );
+            const extendFocus = step?.extendFocus || 10;
+            rect = new DOMRect(
+              rect.left - extendFocus / 2,
+              rect.top - extendFocus / 2,
+              rect.width + extendFocus,
+              rect.height + extendFocus
+            );
+
+            resolve(rect);
+          } else if (timeout > 0 && Date.now() - startTime >= timeout) {
+            resolve(undefined);
+          } else {
+            requestAnimationFrame(checkForElement);
+          }
+        } else if (Date.now() - startTime >= timeout) {
+          reject(new Error(`Timeout waiting for iframe: ${selector}`));
+        } else {
+          requestAnimationFrame(checkForElement);
+        }
+      };
+      checkForElement();
+    });
+  };
+
+  const waitForElementToDisappear = (selector: string): Promise<void> => {
+    return new Promise((resolve) => {
+      const checkForElement = () => {
+        const element = document.querySelector(selector);
+        if (!element) {
+          resolve();
+        } else {
+          requestAnimationFrame(checkForElement);
+        }
+      };
+      checkForElement();
+    });
+  };
+
+  const waitForInput = (
+    selector: string,
+    minNumberOfCharacters: number = 1
+  ): Promise<void> => {
+    return new Promise((resolve) => {
+      const checkForInput = () => {
+        const input = document.querySelector(selector);
+
+        let inputValue = "";
+
+        if (input?.getAttribute("contenteditable")) {
+          console.log("contenteditable", (input as HTMLElement).innerText);
+          inputValue = (input as HTMLElement).innerText;
+        } else if (
+          input &&
+          (input as HTMLInputElement).value.length >= minNumberOfCharacters
+        ) {
+          inputValue = (input as HTMLInputElement).value;
+        }
+
+        if (inputValue.length >= minNumberOfCharacters) {
+          console.log("input found", inputValue);
+          resolve();
+        } else {
+          requestAnimationFrame(checkForInput);
+        }
+      };
+      checkForInput();
+    });
+  };
+
+  function setNativeValue(
+    element: HTMLInputElement | HTMLTextAreaElement,
+    value: string
+  ) {
+    const valueSetter = Object.getOwnPropertyDescriptor(
+      element.constructor.prototype,
+      "value"
+    )?.set;
+    const prototype = Object.getPrototypeOf(element);
+    const prototypeValueSetter = Object.getOwnPropertyDescriptor(
+      prototype,
+      "value"
+    )?.set;
+
+    if (valueSetter && valueSetter !== prototypeValueSetter) {
+      prototypeValueSetter?.call(element, value);
+    } else {
+      valueSetter?.call(element, value);
+    }
+
+    const event = new Event("input", { bubbles: true });
+    element.dispatchEvent(event);
+  }
+
+  async function simulateTyping(
+    element: HTMLInputElement | HTMLTextAreaElement,
+    text: string,
+    interval = 35
+  ) {
+    let i = 0;
+
+    while (i <= text.length) {
+      const currentText = text.substring(0, i);
+      setNativeValue(element, currentText);
+      i++;
+
+      const randomDelay = interval * (0.5 + Math.random());
+      await delay(randomDelay);
+    }
+  }
+
+  /**
+   * Stops the tour and resets the state.
+   */
+  const stopTour = () => {
+    setCurrentStep("start-tour");
+    setFocusRect(null);
+    tourStopCallback();
+  };
+
+  const tours = editContext!.configuration.tours;
+  const tour =
+    tours[editContext!.configuration.activeTour as keyof typeof tours];
+
+  const tourSteps = tour.getSteps({
+    editContext: editContext as EditContextType,
+    nextStep: (stepId) => setCurrentStep(stepId),
+    stopTour: () => tourStopCallback(),
+    waitForElement,
+    waitForElementToDisappear,
+    setFocusRect,
+    delay,
+    waitForInput: waitForInput,
+    simulateTyping,
+  });
+
+  const step = tourSteps[currentStep];
+  if (!step) return null;
+
+  useEffect(() => {
+    const runStep = async () => {
+      setShow(false);
+      setFocusRect(null);
+
+      await delay(500);
+
+      const step = tourSteps[currentStep];
+      if (!step) return;
+
+      console.log("step", currentStep, step);
+      if (step.prepareAction) {
+        await step.prepareAction();
+      }
+
+      if (step.focusElement) {
+        const rect = await waitForElement(step.focusElement, 5000);
+        if (!rect) setCurrentStep("error");
+        else setFocusRect(rect);
+      }
+
+      setShow(true);
+
+      if (step.waitForUserInput) {
+        const nextStep = (await step.waitForUserInput()) || step.nextStep;
+        if (nextStep) {
+          setCurrentStep(nextStep);
+        } else console.log("no next step defined for step", currentStep);
+      } else {
+        if (step.waitForElement) {
+          await waitForElement(step.waitForElement);
+          if (step.nextStep) {
+            setCurrentStep(step.nextStep);
+          }
+        }
+      }
+    };
+    runStep();
+  }, [currentStep]);
+
+  useEffect(() => {
+    const getPointTo = async () => {
+      let pointToRect = focusRect;
+
+      if (step.getPointTo) {
+        const pointTo = step.getPointTo();
+        if (pointTo) {
+          pointToRect = pointTo;
+        }
+      }
+
+      if (step.pointToElement) {
+        const rect = await waitForElement(step.pointToElement, 5000);
+        if (rect) {
+          pointToRect = rect;
+        }
+      }
+
+      setPointToRect(pointToRect);
+    };
+
+    getPointTo();
+  }, [focusRect, currentStep]);
+
+  if (!step) {
+    throw new Error(`Tour step ${currentStep} not found`);
+  }
+
+  const bubblePosition = step.bubblePosition || "right";
+  const bubbleStyle: React.CSSProperties = {};
+
+  let boxStyle: React.CSSProperties = {
+    position: "fixed",
+    left: "50%",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+  };
+
+  let arrowStyle: React.CSSProperties = {};
+
+  if (pointToRect) {
+    if (bubblePosition === "right") {
+      boxStyle = {
+        position: "absolute",
+        left: pointToRect.left + pointToRect.width,
+        top: pointToRect.top - 10,
+        alignItems: "flex-start",
+      };
+      arrowStyle = {
+        marginLeft: "-20px",
+      };
+      bubbleStyle.marginLeft = "80px";
+      bubbleStyle.marginTop = "-20px";
+    }
+
+    if (bubblePosition === "left") {
+      boxStyle = {
+        position: "absolute",
+        right: window.innerWidth - pointToRect.left,
+        top: pointToRect.top + pointToRect.height / 2,
+        alignItems: "flex-end",
+      };
+      arrowStyle = {
+        marginRight: "-20px",
+      };
+    }
+
+    if (bubblePosition === "bottom") {
+      boxStyle = {
+        position: "absolute",
+        left: pointToRect.left + pointToRect.width / 2,
+        top: pointToRect.top + pointToRect.height,
+        transform: "translate(-50%, 0)",
+      };
+      if (step.flipArrow) {
+        arrowStyle = {
+          transform: "scaleX(-1)",
+        };
+      }
+    }
+
+    if (bubblePosition === "top-right") {
+      boxStyle = {
+        position: "absolute",
+        left: pointToRect.left + pointToRect.width,
+        bottom: window.innerHeight - pointToRect.top,
+        transform: "translate(-50%, 0)",
+        flexDirection: "column-reverse",
+      };
+      arrowStyle = {
+        transform: "rotate(180deg)",
+      };
+
+      if (step.flipArrow) {
+        arrowStyle = {
+          transform: "scaleX(-1)",
+        };
+      }
+    }
+  }
+
+  const arrowRotation = bubblePosition === "right" ? "-a-rotate-90" : "";
+
+  const overlayStyle: React.CSSProperties = {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.3)",
+    pointerEvents: "auto",
+    clipPath: focusRect
+      ? `polygon(0% 0%, 0% 100%,  ${focusRect.left}px 100%, ${
+          focusRect.left
+        }px ${focusRect.top}px, ${focusRect.left + focusRect.width}px ${
+          focusRect.top
+        }px, ${focusRect.left + focusRect.width}px ${
+          focusRect.top + focusRect.height
+        }px, ${focusRect.left}px ${focusRect.top + focusRect.height}px,  ${
+          focusRect.left
+        }px 100%, 100% 100%, 100% 0%)`
+      : "none",
+    // clipPath: focusPosition
+    //   ? `path('M 0 0 H 100% V 100% H 0 Z M ${focusPosition.left}px ${focusPosition.top}px H ${focusPosition.left + focusPosition.width}px V ${focusPosition.top + focusPosition.height}px H ${focusPosition.left}px Z')`
+    //   : 'none',
+  };
+
+  if (!show) {
+    return <div className="overlay" style={overlayStyle}></div>;
+  }
+  return (
+    <>
+      <div className="overlay" style={overlayStyle}></div>
+
+      <div
+        style={boxStyle}
+        className="text-gray-800 flex flex-col items-center fade-in"
+      >
+        {focusRect && (
+          <svg
+            width="100px"
+            height="100px"
+            viewBox="0 -7.89 113.08 113.08"
+            xmlns="http://www.w3.org/2000/svg"
+            className={classNames("pointer-events-none", arrowRotation)}
+            style={arrowStyle}
+          >
+            <path
+              style={{ stroke: "#0000ff", fill: "#0000ff" }}
+              d="M20.1871 175C15.7485 172.891 13.0008 172.469 12.1553 170.992C8.98489 165.508 5.39173 160.024 3.70083 153.908C-1.37187 137.666 -0.737781 121.214 2.64402 104.762C8.35081 76.7092 21.0325 51.8201 36.8847 28.1966C38.5756 25.6655 40.0552 23.1344 41.7461 20.3924C41.7461 20.1814 41.5347 19.7596 41.112 19.1268C36.462 20.3923 31.6007 21.6579 26.9507 22.7125C24.4144 23.1344 21.4552 23.1344 18.9189 22.2907C17.4394 21.8688 15.3258 19.5486 15.3258 18.0722C15.3258 16.1739 16.8053 13.8537 18.0735 12.1663C19.1303 11.1117 21.0326 10.9008 22.7235 10.4789C35.4052 7.31508 48.087 3.72935 60.9801 0.776411C71.9709 -1.75468 75.564 1.83105 74.9299 12.5882C74.2959 23.7672 74.0845 34.9462 73.6618 45.9142C73.4505 49.289 72.8164 52.8747 72.3936 56.6714C63.5164 52.6638 63.5164 52.6638 60.346 18.494C47.0301 33.2588 38.1529 49.289 29.9098 65.7411C21.6666 82.1932 16.1712 99.489 13.2121 117.839C10.2531 136.823 13.8462 154.751 20.1871 175Z"
+              fill="#0D1927"
+            />
+          </svg>
+        )}
+
+        <style>
+          {`
+                        @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');                        
+                        .handwritten {
+                            font-family: 'Caveat', cursive;
+                        }
+                        .fade-background {
+                            background: radial-gradient(circle, rgba(255,255,255,0.8) 60%, rgba(255,255,255,0) 90%);
+                        }
+                        .fade-in {
+                            animation: fadeIn 0.5s ease-in-out;
+                        }
+                        @keyframes fadeIn {
+                            from { opacity: 0; }
+                            to { opacity: 1; }
+                        }
+                    `}
+        </style>
+        <div
+          className={`relative flex items-stretch justify-center bg-gray-50 rounded-lg border border-gray-800 gap-6 shadow-2xl`}
+          style={bubbleStyle}
+        >
+          <div
+            className="text-xs font-bold cursor-pointer flex items-center gap-2 absolute top-0 right-0 mr-2 mt-2"
+            onClick={stopTour}
+          >
+            <i className="pi pi-times" />
+          </div>
+          <div className="flex flex-col items-center justify-center gap-2 bg-gray-200 p-6 rounded-l-lg">
+            <AlpacaIcon />
+          </div>
+          <div className="flex flex-col items-end justify-center gap-3 p-4 ">
+            {/* Step Content */}
+            <div className="opacity-100 text-2xl font-bold handwritten text-center flex flex-col items-center max-w-[450px]">
+              <div className="text-4xl mb-4">{step.title}</div>
+              <div>{step.description}</div>
+            </div>
+            {/* Render Buttons Defined in Step Data */}
+            <div className="flex gap-2">
+              {step.buttons &&
+                step.buttons.map((button, index) => (
+                  <button
+                    key={index}
+                    onClick={button.onClick}
+                    className={button.className}
+                  >
+                    {button.label}
+                  </button>
+                ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Optional: Overlay to highlight elements */}
+      {/* {<div className="fade-background fixed inset-0 z-40"></div>} */}
+    </>
+  );
+}
+function AlpacaIcon() {
+  return (
+    <svg
+      height="80px"
+      width="80px"
+      version="1.1"
+      id="Layer_1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+    >
+      <path
+        style={{ fill: "#EBE4DD" }}
+        d="M102.989,153.011v153.011C119.613,428.825,184.332,506.115,256,506.115
+	s136.387-77.29,153.012-200.092V153.011H102.989z"
+      />
+      <path
+        style={{ fill: "#D8CCBC" }}
+        d="M255.999,153.011v353.103H256c71.668,0,136.387-77.29,153.012-200.092V153.011H255.999z"
+      />
+      <path
+        style={{ fill: "#A58868" }}
+        d="M273.655,435.494h-35.31c0,41.195-17.007,41.195-29.425,41.195V512
+	c16.246,0,34.206-4.021,47.08-18.162C268.873,507.979,286.834,512,303.08,512v-35.31C290.662,476.69,273.655,476.69,273.655,435.494
+	z"
+      />
+      <path
+        style={{ fill: "#947859" }}
+        d="M273.655,435.494H256v58.343C268.873,507.979,286.834,512,303.08,512v-35.31
+	C290.662,476.69,273.655,476.69,273.655,435.494z"
+      />
+      <path
+        style={{ fill: "#EBE4DD" }}
+        d="M126.529,0C81.025,0,44.138,36.888,44.138,82.391s36.888,82.391,82.391,82.391V0z"
+      />
+      <path
+        style={{ fill: "#D8CCBC" }}
+        d="M385.471,164.782c45.503,0,82.391-36.888,82.391-82.391S430.975,0,385.471,0V164.782z"
+      />
+      <path
+        style={{ fill: "#BFA993" }}
+        d="M490.407,247.172c0.643-3.83,0.996-7.758,0.996-11.77c0-39.003-31.618-70.621-70.621-70.621
+	s-70.621,31.618-70.621,70.621c0,4.012,0.352,7.94,0.995,11.77H490.407z"
+      />
+      <path
+        style={{ fill: "#EDEDED" }}
+        d="M420.782,306.023c39.003,0,70.621-31.618,70.621-70.621H350.161
+	C350.161,274.405,381.779,306.023,420.782,306.023z"
+      />
+      <path
+        style={{ fill: "#454449" }}
+        d="M397.241,235.401c0,12.981,10.559,23.54,23.538,23.54h0.002c12.981,0.001,23.54-10.559,23.54-23.54
+	H397.241z"
+      />
+      <path
+        style={{ fill: "#BFA993" }}
+        d="M160.844,247.172c0.643-3.83,0.995-7.758,0.995-11.77c0-39.003-31.618-70.621-70.621-70.621
+	S20.598,196.4,20.598,235.402c0,4.012,0.352,7.94,0.995,11.77H160.844z"
+      />
+      <path
+        style={{ fill: "#EDEDED" }}
+        d="M91.218,306.023c39.003,0,70.621-31.618,70.621-70.621H20.598
+	C20.598,274.405,52.216,306.023,91.218,306.023z"
+      />
+      <path
+        style={{ fill: "#454449" }}
+        d="M67.678,235.401c0,12.981,10.559,23.54,23.538,23.54h0.002c12.981,0.001,23.54-10.559,23.54-23.54
+	H67.678z"
+      />
+      <path
+        style={{ fill: "#D8CCBC" }}
+        d="M391.356,107.187c0-15.527,4.902-33.778-5.082-46.69c-8.818-11.403-28.519-12.694-43.229-20.793
+	c-12.822-7.059-23.38-23.527-39.415-27.235c-14.505-3.356-31.411,6.442-47.63,6.442c-16.218,0-33.125-9.796-47.631-6.442
+	c-16.036,3.708-26.595,20.178-39.415,27.237c-14.71,8.099-34.41,9.391-43.227,20.792c-9.985,12.912-5.082,31.161-5.082,46.689
+	s-4.902,33.778,5.082,46.69c8.818,11.403,28.519,12.693,43.229,20.793c12.821,7.059,23.379,23.527,39.413,27.235
+	c14.505,3.356,31.412-6.442,47.63-6.442s33.125,9.796,47.632,6.442c16.034-3.708,26.592-20.176,39.413-27.237
+	c14.709-8.099,34.411-9.391,43.228-20.792C396.259,140.965,391.356,122.715,391.356,107.187z"
+      />
+      <path
+        style={{ fill: "#BFA993" }}
+        d="M386.274,60.497c-8.818-11.403-28.519-12.694-43.229-20.793
+	c-12.822-7.059-23.38-23.527-39.415-27.235c-14.505-3.356-31.411,6.442-47.63,6.442v176.552c16.218,0,33.125,9.796,47.632,6.442
+	c16.034-3.708,26.592-20.176,39.413-27.237c14.709-8.099,34.411-9.391,43.228-20.792c9.985-12.912,5.082-31.161,5.082-46.689
+	S396.259,73.409,386.274,60.497z"
+      />
+      <path
+        style={{ fill: "#58575D" }}
+        d="M293.664,406.069c-6.186,18.772-22.763,39.469-37.664,39.784
+	c-14.901-0.315-31.478-21.012-37.664-39.784c-2.858-9.591,4.529-17.529,16.478-17.655c14.124,0,28.248,0,42.372,0
+	C289.136,388.54,296.522,396.476,293.664,406.069z"
+      />
+      <path
+        style={{ fill: "#454449" }}
+        d="M277.186,388.414c-7.062,0-14.124,0-21.186,0v57.439c14.901-0.315,31.478-21.012,37.664-39.784
+	C296.522,396.476,289.136,388.54,277.186,388.414z"
+      />
+    </svg>
+  );
+}