@alpaca-editor/core 1.0.3938 → 1.0.3941

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

@@ -1,347 +0,0 @@
-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

@@ -1,342 +0,0 @@
-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>
-  );
-}