@velora-cms/plugin-sdk 0.9.0

package/dist/views/image-view.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Button, Input, PropertyField } from "@velora-cms/ui";
+import { usePluginApi, usePluginSettings, usePluginSettingsValue, usePluginValue } from "../plugin-context.js";
+// downloadUrl is a time-limited presigned URL, never persisted — refetch
+// GET /api/media/:id whenever the field's value (media id) changes
+// rather than caching one.
+function useMediaPreview(mediaId) {
+    const fetchApi = usePluginApi();
+    const [preview, setPreview] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (!mediaId) {
+            setPreview(null);
+            setError(null);
+            return;
+        }
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        fetchApi(`/api/media/${mediaId}`)
+            .then(async (response) => {
+            if (!response.ok)
+                throw new Error(`Failed to load media (${response.status})`);
+            const body = (await response.json());
+            if (!cancelled)
+                setPreview({ filename: body.filename, downloadUrl: body.downloadUrl });
+        })
+            .catch((err) => {
+            if (!cancelled)
+                setError(err instanceof Error ? err.message : String(err));
+        })
+            .finally(() => {
+            if (!cancelled)
+                setLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [mediaId, fetchApi]);
+    return { preview, loading, error };
+}
+function ImageThumbnail({ mediaId }) {
+    const { preview, loading, error } = useMediaPreview(mediaId);
+    if (!mediaId)
+        return null;
+    if (loading)
+        return _jsx("p", { className: "text-xs text-text-secondary", children: "Loading\u2026" });
+    if (error)
+        return _jsx("p", { className: "text-xs text-danger-600", children: error });
+    if (!preview)
+        return null;
+    return (_jsx("img", { src: preview.downloadUrl, alt: preview.filename, className: "h-24 w-24 rounded-md border border-border-default object-cover" }));
+}
+export function ImageInputView() {
+    const { value, onChange } = usePluginValue();
+    const settings = usePluginSettings();
+    const fetchApi = usePluginApi();
+    const [uploading, setUploading] = useState(false);
+    const [error, setError] = useState(null);
+    async function handleFileChange(event) {
+        const file = event.target.files?.[0];
+        event.target.value = ""; // lets the same file be re-selected later
+        if (!file)
+            return;
+        setError(null);
+        if (settings.maxSizeBytes != null && file.size > settings.maxSizeBytes) {
+            setError(`File is too large (${file.size} bytes) — the configured limit is ${settings.maxSizeBytes} bytes.`);
+            return;
+        }
+        setUploading(true);
+        try {
+            const formData = new FormData();
+            formData.append("file", file);
+            const response = await fetchApi("/api/media", { method: "POST", body: formData });
+            if (!response.ok)
+                throw new Error(`Upload failed (${response.status})`);
+            const media = (await response.json());
+            onChange(media.id);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setUploading(false);
+        }
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(ImageThumbnail, { mediaId: value }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "file", accept: settings.acceptedTypes && settings.acceptedTypes.length > 0 ? settings.acceptedTypes.join(",") : "image/*", disabled: uploading, onChange: (e) => void handleFileChange(e), className: "text-sm text-text-primary" }), value && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", disabled: uploading, onClick: () => onChange(null), children: "Remove" }))] }), error && _jsx("p", { className: "text-xs text-danger-600", children: error })] }));
+}
+// Rendered by the Data Types editor only — a settings-EDITING view (see
+// TextSettingsView in built-ins.tsx for the same pattern/rationale).
+// acceptedTypes is edited as a comma-separated string (no multi-select
+// widget precedent in this codebase) and parsed to string[] on change.
+export function ImageSettingsView() {
+    const { value: settings, onChange } = usePluginSettingsValue();
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(PropertyField, { label: "Accepted file types", htmlFor: "image-settings-accepted-types", helpText: "Comma-separated MIME types, e.g. image/png,image/jpeg. Leave blank to accept any image.", children: _jsx(Input, { id: "image-settings-accepted-types", value: settings.acceptedTypes?.join(",") ?? "", onChange: (e) => {
+                        const types = e.target.value
+                            .split(",")
+                            .map((t) => t.trim())
+                            .filter((t) => t.length > 0);
+                        onChange({ ...settings, acceptedTypes: types.length > 0 ? types : undefined });
+                    } }) }), _jsx(PropertyField, { label: "Max file size (bytes)", htmlFor: "image-settings-max-size", helpText: "e.g. 5000000 for ~5MB. Leave blank for no limit.", children: _jsx(Input, { id: "image-settings-max-size", type: "number", min: 1, value: settings.maxSizeBytes ?? "", onChange: (e) => onChange({ ...settings, maxSizeBytes: e.target.value === "" ? undefined : Number(e.target.value) }) }) })] }));
+}
+export function ImageReadOnlyView() {
+    const { value } = usePluginValue();
+    return _jsx(ImageThumbnail, { mediaId: value });
+}

package/dist/views/rich-text-view.d.ts

@@ -0,0 +1,2 @@
+export declare function RichTextInputView(): import("react").JSX.Element;
+export declare function RichTextReadOnlyView(): import("react").JSX.Element;

package/dist/views/rich-text-view.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { cn } from "@velora-cms/ui";
+import { usePluginValue } from "../plugin-context.js";
+// StarterKit only (bold/italic/headings/lists/paragraph) — the
+// foundation for the full content editor, not a fully-featured toolbar
+// yet (Session 40/41). No toolbar UI: StarterKit's default keyboard
+// shortcuts (Ctrl+B, "# "/"* " input rules) are enough to prove this is
+// a real editor, not a plain textarea.
+//
+// Tailwind's base reset strips default heading/list styling, so a few
+// targeted descendant overrides keep formatting visually distinguishable
+// without pulling in a typography plugin just for this.
+const CONTENT_CLASSES = "text-sm text-text-primary [&_h1]:text-xl [&_h1]:font-bold [&_h2]:text-lg [&_h2]:font-bold " +
+    "[&_h3]:font-bold [&_strong]:font-bold [&_em]:italic [&_ul]:list-disc [&_ul]:ps-6 " +
+    "[&_ol]:list-decimal [&_ol]:ps-6 [&_p]:min-h-[1.25em]";
+function RichTextEditor({ editable }) {
+    const { value, onChange } = usePluginValue();
+    // Guards the sync effect below against reacting to the update it just
+    // caused itself — without this, every keystroke would round-trip
+    // through setContent and reset the cursor.
+    const isInternalUpdate = useRef(false);
+    const editor = useEditor({
+        extensions: [StarterKit],
+        content: value ?? "",
+        editable,
+        onUpdate: ({ editor }) => {
+            isInternalUpdate.current = true;
+            onChange(editor.getJSON());
+        },
+    });
+    useEffect(() => {
+        if (!editor)
+            return;
+        if (isInternalUpdate.current) {
+            isInternalUpdate.current = false;
+            return;
+        }
+        const current = JSON.stringify(editor.getJSON());
+        const next = JSON.stringify(value ?? {});
+        if (current !== next) {
+            editor.commands.setContent(value ?? "");
+        }
+    }, [value, editor]);
+    useEffect(() => {
+        editor?.setEditable(editable);
+    }, [editable, editor]);
+    return (_jsx(EditorContent, { editor: editor, className: cn(CONTENT_CLASSES, editable &&
+            "rounded-md border border-border-default bg-background-elevated px-3 py-2 focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2 focus-within:ring-offset-background-base") }));
+}
+export function RichTextInputView() {
+    return _jsx(RichTextEditor, { editable: true });
+}
+export function RichTextReadOnlyView() {
+    return _jsx(RichTextEditor, { editable: false });
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@velora-cms/plugin-sdk",
+  "version": "0.9.0",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/velora-cms/velora.git",
+    "directory": "packages/plugin-sdk"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./manifest": {
+      "types": "./dist/manifest-entry.d.ts",
+      "import": "./dist/manifest-entry.js",
+      "default": "./dist/manifest-entry.js"
+    },
+    "./datatypes": {
+      "types": "./dist/datatypes-entry.d.ts",
+      "import": "./dist/datatypes-entry.js",
+      "default": "./dist/datatypes-entry.js"
+    }
+  },
+  "dependencies": {
+    "@tiptap/pm": "3.27.1",
+    "@tiptap/react": "3.27.1",
+    "@tiptap/starter-kit": "3.27.1",
+    "zod": "4.4.3",
+    "@velora-cms/api-schemas": "0.9.0",
+    "@velora-cms/ui": "0.9.0",
+    "@velora-cms/design-tokens": "0.9.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/json-schema": "7.0.15",
+    "@types/react": "19.2.17",
+    "react": "19.2.7",
+    "typescript": "6.0.3"
+  },
+  "scripts": {
+    "build": "tsc -p .",
+    "test": "vitest run"
+  }
+}