@alpaca-editor/core 1.0.3896 → 1.0.3898

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 Alpaca Editor
+        </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">Alpaca Editor</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>
+  );
+}

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

@@ -50,6 +50,11 @@ export function ControlCenterMenu() {
     const item = groups
       ?.flatMap((x) => x.panels)
       ?.find((item) => item.id === activeItemKey);
+
+    if (!item) {
+      setActiveItemKey(groups?.[0]?.panels?.[0]?.id || null);
+    }
+
     if (item) {
       editContext?.setCenterPanelView(item.content);
     }

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

@@ -0,0 +1,104 @@
+import React from "react";
+import { useEditContext } from "../client/editContext";
+
+export function Info() {
+  const editContext = useEditContext();
+  const user = editContext?.user;
+
+  return (
+    <div className="space-y-6 p-4">
+      <div className="space-y-4">
+        <h2 className="text-xl font-semibold text-gray-800">
+          System Information
+        </h2>
+
+        {/* User Information */}
+        {user && (
+          <div className="rounded-lg border border-gray-200 bg-white p-4">
+            <h3 className="mb-3 text-lg font-medium text-gray-700">
+              User Information
+            </h3>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <div>
+                <label className="text-sm font-medium text-gray-500">
+                  Name
+                </label>
+                <p className="text-gray-900">{user.displayName || user.name}</p>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-500">
+                  Email
+                </label>
+                <p className="text-gray-900">{user.email || "Not available"}</p>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-500">
+                  User Type
+                </label>
+                <p className="text-gray-900">
+                  {user.isLimitedPreviewUser
+                    ? "Limited Preview User"
+                    : "Regular User"}
+                </p>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-500">
+                  Session ID
+                </label>
+                <p className="font-mono text-xs text-gray-900">
+                  {editContext?.sessionId}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Editor Information */}
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="mb-3 text-lg font-medium text-gray-700">
+            Editor Information
+          </h3>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div>
+              <label className="text-sm font-medium text-gray-500">
+                Active Sessions
+              </label>
+              <p className="text-gray-900">
+                {editContext?.activeSessions?.length || 0}
+              </p>
+            </div>
+            <div>
+              <label className="text-sm font-medium text-gray-500">
+                Mobile View
+              </label>
+              <p className="text-gray-900">
+                {editContext?.isMobile ? "Yes" : "No"}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Technical Information */}
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="mb-3 text-lg font-medium text-gray-700">
+            Technical Information
+          </h3>
+          <div className="space-y-2 text-sm">
+            <div>
+              <span className="font-medium text-gray-500">User Agent:</span>
+              <p className="mt-1 font-mono text-xs break-all text-gray-900">
+                {navigator.userAgent}
+              </p>
+            </div>
+            <div>
+              <span className="font-medium text-gray-500">Viewport Size:</span>
+              <p className="text-gray-900">
+                {window.innerWidth} × {window.innerHeight}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}