@alpaca-editor/core 1.0.3941 → 1.0.3943

package/src/editor/context-menu/InsertMenu.tsx

@@ -0,0 +1,347 @@
+import { ItemCommand } from "../commands/itemCommands";
+import { ItemTreeNodeData } from "../services/contentService";
+import { useEditContext } from "../../client-components";
+import { useRef, useState, useEffect } from "react";
+import { FullItem } from "../pageModel";
+import { InputText } from "primereact/inputtext";
+import { ScrollingContentTree } from "../ScrollingContentTree";
+import { SimpleTabs, Tab } from "../ui/SimpleTabs";
+import ItemSearch, { ResultItem } from "../ui/ItemSearch";
+import { templatesRootItemId } from "../../config/config";
+import { Wizard } from "../../page-wizard/PageWizard";
+
+export const InsertMenuTemplate = ({
+  insertOptions,
+  item,
+  commandCallback,
+}: {
+  insertOptions: ItemTreeNodeData[];
+  item: FullItem;
+  commandCallback?: (command: ItemCommand, result: any) => void;
+}) => {
+  const editContext = useEditContext();
+  const [filter, setFilter] = useState("");
+  const filterRef = useRef<HTMLInputElement>(null);
+  const [activeTab, setActiveTab] = useState(() => {
+    const stored = localStorage.getItem("editor.defaultInsertTab");
+    return stored ? parseInt(stored) : 0;
+  });
+  useEffect(() => {
+    localStorage.setItem("editor.defaultInsertTab", activeTab.toString());
+  }, [activeTab]);
+
+  const [recentTemplates, setRecentTemplates] = useState<string[]>([]);
+
+  const [recentItems, setRecentItems] = useState<FullItem[]>([]);
+  const [hoveredItem, setHoveredItem] = useState<ResultItem>();
+  const [wizards, setWizards] = useState<Wizard[]>([]);
+
+  const hideTimeoutRef = useRef<NodeJS.Timeout>(undefined);
+  const opRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const loadRecentItems = async () => {
+      const items = await editContext?.itemsRepository.getItems(
+        recentTemplates.map((id) => ({
+          id,
+          version: 0,
+          language: "en",
+        })),
+      );
+
+      if (items) setRecentItems(items);
+    };
+    loadRecentItems();
+  }, [recentTemplates]);
+
+  useEffect(() => {
+    const stored = localStorage.getItem("editor.recentTemplates");
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      setRecentTemplates(parsed);
+    }
+  }, [insertOptions]);
+
+  useEffect(() => {
+    const loadWizards = async () => {
+      const wizards = await editContext?.configuration.pageWizard.getWizards(
+        item.descriptor,
+      );
+      setWizards(wizards ?? []);
+    };
+    loadWizards();
+  }, [item]);
+
+  if (!editContext) return null;
+
+  const getCommand = (x: { id: string }) => {
+    return async (triggerEvent: any) => {
+      const stored = localStorage.getItem("editor.recentTemplates");
+      const recentIds = stored ? JSON.parse(stored) : [];
+
+      const updatedIds = [
+        x.id,
+        ...recentIds.filter((id: string) => id !== x.id),
+      ].slice(0, 10);
+
+      localStorage.setItem(
+        "editor.recentTemplates",
+        JSON.stringify(updatedIds),
+      );
+
+      setRecentTemplates(updatedIds);
+
+      const result = await editContext?.executeCommand({
+        command: editContext.configuration.commands.insertItem,
+        data: { items: [item], templateId: x.id },
+        event: triggerEvent,
+      });
+      if (commandCallback)
+        commandCallback(
+          editContext?.configuration.commands.insertItem as ItemCommand,
+          result,
+        );
+    };
+  };
+
+  const options =
+    insertOptions.length === 0
+      ? undefined
+      : insertOptions.map((x) => ({
+          label: x.name,
+          id: x.id,
+          icon: (
+            <img
+              className="p-menuitem-icon"
+              src={x.icon}
+              style={{ height: "16px" }}
+              width="16"
+              height="16"
+              onDragStart={(e) => e.preventDefault()}
+            ></img>
+          ),
+          command: getCommand(x),
+        }));
+
+  const tabs: Tab[] = [
+    {
+      label: "Options",
+      content: (
+        <div className="flex h-full flex-col gap-2">
+          <InputText
+            ref={filterRef}
+            className="w-full text-sm"
+            placeholder="Filter"
+            onChange={(e) => setFilter(e.target.value)}
+          />
+          <div className="relative flex-1">
+            <div className="absolute inset-0 overflow-auto">
+              {options
+                ?.filter(
+                  (x) =>
+                    x.label.toLowerCase().indexOf(filter.toLowerCase()) > -1,
+                )
+                .map((option: any) => (
+                  <div
+                    key={option.id}
+                    className="flex cursor-pointer items-center gap-2 p-1 text-xs hover:bg-gray-100"
+                    onClick={(ev) => {
+                      ev.stopPropagation();
+                      ev.preventDefault();
+                      option.command(ev);
+                    }}
+                  >
+                    {option.icon}
+                    <span className="flex-1">
+                      {option.label
+                        .split(new RegExp(`(${filter})`, "i"))
+                        .map((part: string, i: number) =>
+                          part.toLowerCase() === filter.toLowerCase() ? (
+                            <u className="font-bold" key={i}>
+                              {part}
+                            </u>
+                          ) : (
+                            part
+                          ),
+                        )}
+                    </span>
+                  </div>
+                ))}
+            </div>
+          </div>
+        </div>
+      ),
+      id: "options",
+    },
+    {
+      label: "Recent",
+      content: (
+        <div className="flex h-full flex-col">
+          {recentItems.length === 0 ? (
+            <div className="p-2 text-sm text-gray-500">No recent templates</div>
+          ) : (
+            recentItems.map((template) => (
+              <div
+                key={template.id}
+                className="flex cursor-pointer items-center gap-2 p-1 text-xs hover:bg-gray-100"
+                onClick={(ev) => {
+                  ev.stopPropagation();
+                  ev.preventDefault();
+                  getCommand(template)(ev);
+                }}
+              >
+                <img
+                  className="p-menuitem-icon"
+                  src={template.icon}
+                  style={{ height: "16px" }}
+                  width="16"
+                  height="16"
+                  onDragStart={(e) => e.preventDefault()}
+                />
+                <span className="flex-1">{template.name}</span>
+              </div>
+            ))
+          )}
+        </div>
+      ),
+      id: "recent",
+    },
+    {
+      label: "From Template",
+      content: (
+        <div className="flex h-full w-full flex-col gap-2">
+          <ItemSearch
+            setHoveredItem={setHoveredItem}
+            rootItemIds={[templatesRootItemId]}
+            itemSelected={(item) => {
+              getCommand(item)(null);
+            }}
+          />
+          <div className="relative flex-2">
+            <div className="absolute inset-0 overflow-auto">
+              <ScrollingContentTree
+                selectedItemId={hoveredItem?.id ?? item?.id}
+                rootItemId={templatesRootItemId}
+                onSelectionChange={(
+                  node: ItemTreeNodeData | ItemTreeNodeData[],
+                ) => {
+                  let item: ItemTreeNodeData = node as ItemTreeNodeData;
+                  if (Array.isArray(node) && node[0]) {
+                    item = node[0];
+                  }
+                  if (
+                    !item ||
+                    (item.templateId !==
+                      "ab86861a-6030-46c5-b394-e8f99e8b87db" &&
+                      item.templateId !==
+                        "35e75c72-4985-4e09-88c3-0eac6cd1e64f")
+                  )
+                    return;
+
+                  getCommand(item)(null);
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      ),
+      id: "fromTemplate",
+    },
+  ];
+
+  if (wizards.length > 0) {
+    tabs.push({
+      label: "Wizards",
+      content: (
+        <div>
+          {wizards.map((wizard) => (
+            <div
+              key={wizard.id}
+              className="flex cursor-pointer items-center gap-2 p-1 text-xs hover:bg-gray-100"
+              onClick={(ev) => {
+                ev.stopPropagation();
+                ev.preventDefault();
+                if (commandCallback) {
+                  commandCallback(
+                    editContext?.configuration.commands
+                      .insertItem as ItemCommand,
+                    null,
+                  );
+                }
+                editContext?.executeCommand({
+                  command:
+                    editContext?.configuration.pageWizard.startWizardCommand,
+                  data: { wizard, item: item.descriptor },
+                  event: ev,
+                });
+              }}
+            >
+              <img
+                className="p-menuitem-icon"
+                src={wizard.icon}
+                style={{ height: "16px" }}
+                width="16"
+                height="16"
+                onDragStart={(e) => e.preventDefault()}
+              />
+              <span className="flex-1">{wizard.name}</span>
+            </div>
+          ))}
+        </div>
+      ),
+      id: "wizards",
+    });
+  }
+
+  return (
+    <div
+      className="p-2"
+      style={{ display: "flex", alignItems: "center", cursor: "pointer" }}
+      onMouseEnter={() => {
+        if (hideTimeoutRef.current) {
+          clearTimeout(hideTimeoutRef.current);
+        }
+        opRef.current && (opRef.current.style.display = "block");
+        filterRef.current && filterRef.current.focus();
+      }}
+      onMouseLeave={() => {
+        hideTimeoutRef.current = setTimeout(() => {
+          opRef.current && (opRef.current.style.display = "none");
+        }, 200);
+      }}
+      onClick={(ev) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+      }}
+    >
+      <i className="pi pi-plus mr-2"></i>
+      <span className="p-menuitem-text">Insert</span>
+      {/* The OverlayPanel will appear on hover or click. */}
+      <div
+        ref={opRef}
+        className="absolute z-50 rounded-md bg-white p-2 shadow-lg"
+        onKeyDownCapture={(ev) => {
+          ev.stopPropagation();
+        }}
+        onKeyUpCapture={(ev) => {
+          ev.stopPropagation();
+        }}
+        style={{
+          display: opRef.current ? "block" : "none",
+          top: "-50px",
+          left: "100%",
+          minWidth: "450px",
+          minHeight: "380px",
+          border: "1px solid #ddd",
+        }}
+      >
+        <div className="absolute inset-4 flex flex-col">
+          <SimpleTabs
+            tabs={tabs}
+            setActiveTab={setActiveTab}
+            activeTab={activeTab}
+          ></SimpleTabs>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/editor/control-center/About.tsx

@@ -0,0 +1,342 @@
+import React from "react";
+import { useEditContext } from "../client/editContext";
+import { version, buildDate } from "../../revision";
+
+export function About() {
+  const editContext = useEditContext();
+
+  return (
+    <div className="max-h-full space-y-6 p-4">
+      <div className="space-y-4">
+        <h2 className="text-xl font-semibold text-gray-800">
+          About AI Workbench
+        </h2>
+        {/* Application Information */}
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="mb-3 text-lg font-medium text-gray-700">
+            Application Information
+          </h3>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div>
+              <label className="text-sm font-medium text-gray-500">
+                Product Name
+              </label>
+              <p className="text-gray-900">AI Workbench</p>
+            </div>
+            <div>
+              <label className="text-sm font-medium text-gray-500">
+                Version
+              </label>
+              <p className="text-gray-900">{version}</p>
+            </div>
+
+            <div>
+              <label className="text-sm font-medium text-gray-500">
+                Build Date
+              </label>
+              <p className="text-gray-900">{buildDate}</p>
+            </div>
+          </div>
+        </div>
+        {/* License Information */}{" "}
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          {" "}
+          <h3 className="mb-3 text-lg font-medium text-gray-700">
+            {" "}
+            License Information{" "}
+          </h3>{" "}
+          <div className="space-y-4">
+            {" "}
+            <div>
+              {" "}
+              <label className="text-sm font-medium text-gray-500">
+                {" "}
+                Copyright{" "}
+              </label>{" "}
+              <p className="text-gray-900">© 2025 Canvas Reply GmbH</p>{" "}
+            </div>{" "}
+            <div>
+              {" "}
+              <label className="text-sm font-medium text-gray-500">
+                {" "}
+                License{" "}
+              </label>{" "}
+              <p className="text-gray-900">
+                {" "}
+                All rights reserved. Please contact Canvas Reply GmbH for
+                licensing information.{" "}
+              </p>{" "}
+            </div>{" "}
+          </div>{" "}
+        </div>
+        {/* Third-Party Licenses */}{" "}
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          {" "}
+          <h3 className="mb-3 text-lg font-medium text-gray-700">
+            {" "}
+            Third-Party Components{" "}
+          </h3>{" "}
+          <div className="max-h-96 space-y-3 overflow-y-auto">
+            {" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  React
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                A JavaScript library for building user interfaces{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  Next.js
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                The React Framework for Production{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  TypeScript
+                </h4>{" "}
+                <span className="text-xs text-gray-500">
+                  Apache 2.0 License
+                </span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                TypeScript is a language for application scale JavaScript
+                development{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  Tailwind CSS
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                A utility-first CSS framework for rapidly building custom
+                designs{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  PrimeReact
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                React UI Component Library with rich set of components{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  Lucide React
+                </h4>{" "}
+                <span className="text-xs text-gray-500">ISC License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                Beautiful & consistent icon toolkit made by the community{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  Radix UI
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                Low-level UI primitives for React with accessibility
+                built-in{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  Axios
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                Promise based HTTP client for the browser and node.js{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  Quill
+                </h4>{" "}
+                <span className="text-xs text-gray-500">
+                  BSD 3-Clause License
+                </span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                Modern WYSIWYG editor built for compatibility and
+                extensibility{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  React Inspector
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                Power of Browser DevTools inspectors right inside your React
+                app{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  Allotment
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                React split-pane component with support for multiple
+                layouts{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  Lodash
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                A modern JavaScript utility library delivering modularity,
+                performance & extras{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">clsx</h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                A tiny utility for constructing className strings
+                conditionally{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  PostCSS
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                Tool for transforming CSS with JavaScript{" "}
+              </p>{" "}
+            </div>{" "}
+            <div className="rounded-lg bg-gray-50 p-3">
+              {" "}
+              <div className="mb-2 flex items-center justify-between">
+                {" "}
+                <h4 className="text-sm font-medium text-gray-700">
+                  Universal Cookie
+                </h4>{" "}
+                <span className="text-xs text-gray-500">MIT License</span>{" "}
+              </div>{" "}
+              <p className="text-xs text-gray-600">
+                {" "}
+                Universal cookies for JavaScript{" "}
+              </p>{" "}
+            </div>{" "}
+          </div>{" "}
+        </div>
+        {/* Contact Information */}
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="mb-3 text-lg font-medium text-gray-700">
+            Contact & Support
+          </h3>
+          <div className="space-y-3">
+            <div>
+              <label className="text-sm font-medium text-gray-500">
+                Documentation
+              </label>
+              <p className="text-gray-900">
+                <a
+                  href="#"
+                  className="text-blue-600 underline hover:text-blue-800"
+                  onClick={(e) => e.preventDefault()}
+                >
+                  View Documentation
+                </a>
+              </p>
+            </div>
+            <div>
+              <label className="text-sm font-medium text-gray-500">
+                Support
+              </label>
+              <p className="text-gray-900">
+                <a
+                  href="#"
+                  className="text-blue-600 underline hover:text-blue-800"
+                  onClick={(e) => e.preventDefault()}
+                >
+                  Contact Support
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}