@thinhnguyencth1204/nextcli 0.7.0 → 0.9.0

package/templates/next-base/src/components/rich-text/adapters/textarea-field.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/utils/cn";
+import type { TextareaEditorContent } from "../types";
+
+export type TextareaFieldAdapterProps = {
+  value: TextareaEditorContent | null;
+  onChange: (value: TextareaEditorContent) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  error?: string;
+  className?: string;
+  id?: string;
+  name?: string;
+};
+
+export function TextareaFieldAdapter({
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  readOnly,
+  error,
+  className,
+  id,
+  name,
+}: TextareaFieldAdapterProps) {
+  return (
+    <div className={cn("space-y-1", className)}>
+      <Textarea
+        id={id}
+        name={name}
+        value={value ?? ""}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        aria-invalid={Boolean(error)}
+        className={cn(error && "border-destructive")}
+      />
+      {error ? (
+        <p className="text-destructive text-xs" role="alert">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/templates/next-base/src/components/rich-text/client-only.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useEffect, useState, type ReactNode } from "react";
+
+type ClientOnlyProps = {
+  children: ReactNode;
+  fallback?: ReactNode;
+};
+
+/** Renders children only after mount — required for Lexical (no SSR). */
+export function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return fallback;
+  }
+
+  return children;
+}

package/templates/next-base/src/components/rich-text/editor-field.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { cn } from "@/utils/cn";
+import type { EditorFieldProps, LexicalEditorContent } from "./types";
+import { isLexicalContent } from "./types";
+import { TextareaFieldAdapter } from "./adapters/textarea-field";
+import { LexicalRichTextEditor } from "./lexical/rich-text-editor";
+
+export function EditorField({
+  variant = "lexical",
+  value,
+  onChange,
+  onImagesRemoved,
+  placeholder,
+  disabled,
+  readOnly,
+  error,
+  className,
+  id,
+  name,
+}: EditorFieldProps) {
+  if (variant === "textarea") {
+    const stringValue = isLexicalContent(value) ? "" : (value ?? "");
+
+    return (
+      <TextareaFieldAdapter
+        id={id}
+        name={name}
+        value={stringValue}
+        onChange={onChange}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        error={error}
+        className={className}
+      />
+    );
+  }
+
+  const lexicalValue: LexicalEditorContent | null = isLexicalContent(value)
+    ? value
+    : null;
+
+  return (
+    <div className={cn("space-y-1", className)}>
+      <LexicalRichTextEditor
+        id={id}
+        value={lexicalValue}
+        onChange={onChange}
+        onImagesRemoved={onImagesRemoved}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+      />
+      {error ? (
+        <p className="text-destructive text-xs" role="alert">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/templates/next-base/src/components/rich-text/examples/blog-rich-text-demo.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  EditorField,
+  RichTextRenderer,
+  createEmptyLexicalContent,
+  isLexicalContent,
+  type EditorContent,
+  type EditorVariant,
+  type LexicalEditorContent,
+} from "@/components/rich-text";
+import {
+  syncRemovedRichTextImages,
+  defaultRemoveManagedImage,
+  isSupabaseManagedImageUrl,
+  parseSupabaseStorageUrl,
+  type RemoveManagedImageFn,
+} from "@/lib/rich-text";
+
+type BlogPost = {
+  id: string;
+  title: string;
+  content: LexicalEditorContent;
+};
+
+/** Swap with `removeSupabaseManagedImage` when the supabase module is installed. */
+const removeManagedImage: RemoveManagedImageFn = defaultRemoveManagedImage;
+
+export function BlogRichTextDemo() {
+  const [variant, setVariant] = useState<EditorVariant>("lexical");
+  const [title, setTitle] = useState("");
+  const [draft, setDraft] = useState<EditorContent | null>(
+    createEmptyLexicalContent(),
+  );
+  const [posts, setPosts] = useState<BlogPost[]>([]);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [previousContent, setPreviousContent] =
+    useState<LexicalEditorContent | null>(null);
+  const [editorKey, setEditorKey] = useState("new");
+
+  const handleImagesRemoved = useCallback((removedUrls: string[]) => {
+    void Promise.all(
+      removedUrls.map(async (url) => {
+        if (!isSupabaseManagedImageUrl(url)) {
+          return;
+        }
+
+        const ref = parseSupabaseStorageUrl(url);
+        if (!ref) {
+          return;
+        }
+
+        await removeManagedImage(url, ref);
+      }),
+    );
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    if (!title.trim() || !isLexicalContent(draft)) {
+      return;
+    }
+
+    if (editingId && previousContent) {
+      await syncRemovedRichTextImages(previousContent, draft, {
+        removeManagedImage,
+      });
+    }
+
+    if (editingId) {
+      setPosts((current) =>
+        current.map((post) =>
+          post.id === editingId
+            ? { ...post, title: title.trim(), content: draft }
+            : post,
+        ),
+      );
+    } else {
+      setPosts((current) => [
+        {
+          id: crypto.randomUUID(),
+          title: title.trim(),
+          content: draft,
+        },
+        ...current,
+      ]);
+    }
+
+    setTitle("");
+    setDraft(createEmptyLexicalContent());
+    setPreviousContent(null);
+    setEditingId(null);
+    setEditorKey(`new-${Date.now()}`);
+  }, [draft, editingId, previousContent, title]);
+
+  const startEdit = useCallback((post: BlogPost) => {
+    setEditingId(post.id);
+    setTitle(post.title);
+    setDraft(post.content);
+    setPreviousContent(post.content);
+    setEditorKey(post.id);
+  }, []);
+
+  const resetForm = useCallback(() => {
+    setEditingId(null);
+    setTitle("");
+    setDraft(createEmptyLexicalContent());
+    setPreviousContent(null);
+    setEditorKey(`new-${Date.now()}`);
+  }, []);
+
+  return (
+    <div className="mx-auto flex w-full max-w-3xl flex-col gap-6 p-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">
+          Blog rich text demo
+        </h1>
+        <p className="text-muted-foreground mt-1 text-sm">
+          Toggle between native textarea and Lexical. Lexical content is stored
+          as JSON for API persistence. When the Supabase module is installed,
+          removed Supabase image URLs are deleted from storage.
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{editingId ? "Edit post" : "Create post"}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="editor-variant">Editor type</Label>
+            <Select
+              value={variant}
+              onValueChange={(value) => setVariant(value as EditorVariant)}
+            >
+              <SelectTrigger id="editor-variant" className="w-48">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="lexical">Lexical (rich text)</SelectItem>
+                <SelectItem value="textarea">Textarea (plain)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="post-title">Title</Label>
+            <Input
+              id="post-title"
+              value={title}
+              onChange={(event) => setTitle(event.target.value)}
+              placeholder="Post title"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label>Content</Label>
+            <EditorField
+              key={editorKey}
+              variant={variant}
+              value={draft}
+              onChange={setDraft}
+              onImagesRemoved={handleImagesRemoved}
+              placeholder="Write your post..."
+            />
+          </div>
+
+          <div className="flex gap-2">
+            <Button type="button" onClick={() => void handleSave()}>
+              {editingId ? "Update post" : "Save post"}
+            </Button>
+            {editingId ? (
+              <Button type="button" variant="outline" onClick={resetForm}>
+                Cancel
+              </Button>
+            ) : null}
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="space-y-4">
+        {posts.length === 0 ? (
+          <p className="text-muted-foreground text-sm">No posts yet.</p>
+        ) : (
+          posts.map((post) => (
+            <Card key={post.id}>
+              <CardHeader className="flex flex-row items-center justify-between gap-4">
+                <CardTitle className="text-lg">{post.title}</CardTitle>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => startEdit(post)}
+                >
+                  Edit
+                </Button>
+              </CardHeader>
+              <CardContent>
+                <RichTextRenderer content={post.content} />
+              </CardContent>
+            </Card>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/next-base/src/components/rich-text/index.ts

@@ -0,0 +1,11 @@
+export type { EditorFieldProps, EditorVariant, EditorContent } from "./types";
+export {
+  createEmptyLexicalContent,
+  isLexicalContent,
+  type LexicalEditorContent,
+  type TextareaEditorContent,
+} from "./types";
+export { EditorField } from "./editor-field";
+export { RichTextRenderer } from "./rich-text-renderer";
+export { LexicalRichTextEditor } from "./lexical/rich-text-editor";
+export { TextareaFieldAdapter } from "./adapters/textarea-field";

package/templates/next-base/src/components/rich-text/lexical/extension.ts

@@ -0,0 +1,37 @@
+import { defineExtension, configExtension } from "lexical";
+import { HistoryExtension } from "@lexical/history";
+import { RichTextExtension } from "@lexical/rich-text";
+import { ReactExtension } from "@lexical/react/ReactExtension";
+import { ImageNode } from "./nodes/image-node";
+import { richTextTheme } from "./theme";
+
+/** Stable module-scoped extension graph (Lexical migration best practice). */
+export const richTextEditorExtension = defineExtension({
+  name: "@nextcli/rich-text-editor",
+  namespace: "NextCLIRichText",
+  dependencies: [
+    RichTextExtension,
+    HistoryExtension,
+    configExtension(ReactExtension, { contentEditable: null }),
+  ],
+  nodes: [ImageNode],
+  theme: richTextTheme,
+});
+
+/** Read-only extension shares nodes/theme with the editor for identical rendering. */
+export const richTextReadOnlyExtension = defineExtension({
+  name: "@nextcli/rich-text-readonly",
+  namespace: "NextCLIRichTextReadOnly",
+  dependencies: [
+    RichTextExtension,
+    configExtension(ReactExtension, { contentEditable: null }),
+  ],
+  nodes: [ImageNode],
+  theme: richTextTheme,
+  register(editor) {
+    editor.setEditable(false);
+    return () => {
+      editor.setEditable(true);
+    };
+  },
+});

package/templates/next-base/src/components/rich-text/lexical/nodes/image-node.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import type {
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  EditorConfig,
+  LexicalNode,
+  NodeKey,
+  SerializedLexicalNode,
+  Spread,
+} from "lexical";
+import {
+  $applyNodeReplacement,
+  DecoratorNode,
+  createCommand,
+  type LexicalCommand,
+} from "lexical";
+import type { JSX } from "react";
+
+export type SerializedImageNode = Spread<
+  {
+    altText: string;
+    height?: number;
+    maxWidth?: number;
+    src: string;
+    width?: number;
+  },
+  SerializedLexicalNode
+>;
+
+export type InsertImagePayload = {
+  altText?: string;
+  src: string;
+};
+
+export const INSERT_IMAGE_COMMAND: LexicalCommand<InsertImagePayload> =
+  createCommand("INSERT_IMAGE_COMMAND");
+
+function convertImageElement(domNode: Node): DOMConversionOutput | null {
+  if (!(domNode instanceof HTMLImageElement)) {
+    return null;
+  }
+
+  const src = domNode.getAttribute("src");
+  if (!src) {
+    return null;
+  }
+
+  const altText = domNode.getAttribute("alt") ?? "";
+  const node = $createImageNode({ src, altText });
+  return { node };
+}
+
+export class ImageNode extends DecoratorNode<JSX.Element> {
+  __src: string;
+  __altText: string;
+  __width: number | "inherit";
+  __height: number | "inherit";
+  __maxWidth: number;
+
+  static getType(): string {
+    return "image";
+  }
+
+  static clone(node: ImageNode): ImageNode {
+    return new ImageNode(
+      node.__src,
+      node.__altText,
+      node.__maxWidth,
+      node.__width,
+      node.__height,
+      node.__key,
+    );
+  }
+
+  static importJSON(serializedNode: SerializedImageNode): ImageNode {
+    return $createImageNode({
+      altText: serializedNode.altText,
+      height: serializedNode.height,
+      maxWidth: serializedNode.maxWidth,
+      src: serializedNode.src,
+      width: serializedNode.width,
+    });
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      img: () => ({
+        conversion: convertImageElement,
+        priority: 0,
+      }),
+    };
+  }
+
+  constructor(
+    src: string,
+    altText: string,
+    maxWidth: number,
+    width?: number | "inherit",
+    height?: number | "inherit",
+    key?: NodeKey,
+  ) {
+    super(key);
+    this.__src = src;
+    this.__altText = altText;
+    this.__maxWidth = maxWidth;
+    this.__width = width ?? "inherit";
+    this.__height = height ?? "inherit";
+  }
+
+  exportJSON(): SerializedImageNode {
+    return {
+      altText: this.__altText,
+      height: this.__height === "inherit" ? undefined : this.__height,
+      maxWidth: this.__maxWidth,
+      src: this.__src,
+      type: "image",
+      version: 1,
+      width: this.__width === "inherit" ? undefined : this.__width,
+    };
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement("img");
+    element.setAttribute("src", this.__src);
+    element.setAttribute("alt", this.__altText);
+    return { element };
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const span = document.createElement("span");
+    const theme = config.theme.image;
+    if (typeof theme === "string") {
+      span.className = theme;
+    }
+    return span;
+  }
+
+  updateDOM(): false {
+    return false;
+  }
+
+  getSrc(): string {
+    return this.__src;
+  }
+
+  decorate(): JSX.Element {
+    return (
+      <img
+        src={this.__src}
+        alt={this.__altText}
+        className="lexical-image-element max-w-full rounded-md"
+        draggable={false}
+        style={{
+          maxWidth: this.__maxWidth,
+          width: this.__width === "inherit" ? undefined : this.__width,
+          height: this.__height === "inherit" ? undefined : this.__height,
+        }}
+      />
+    );
+  }
+}
+
+export function $createImageNode({
+  altText = "",
+  height,
+  maxWidth = 800,
+  src,
+  width,
+}: {
+  altText?: string;
+  height?: number | "inherit";
+  maxWidth?: number;
+  src: string;
+  width?: number | "inherit";
+}): ImageNode {
+  return $applyNodeReplacement(
+    new ImageNode(src, altText, maxWidth, width, height),
+  );
+}
+
+export function $isImageNode(
+  node: LexicalNode | null | undefined,
+): node is ImageNode {
+  return node instanceof ImageNode;
+}

package/templates/next-base/src/components/rich-text/lexical/plugins/image-plugin.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import {
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_EDITOR,
+} from "lexical";
+import {
+  $createImageNode,
+  INSERT_IMAGE_COMMAND,
+  type InsertImagePayload,
+} from "../nodes/image-node";
+
+export function ImagePlugin(): null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return editor.registerCommand<InsertImagePayload>(
+      INSERT_IMAGE_COMMAND,
+      (payload) => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection)) {
+          return false;
+        }
+
+        const imageNode = $createImageNode({
+          altText: payload.altText ?? "",
+          src: payload.src,
+        });
+        selection.insertNodes([imageNode]);
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR,
+    );
+  }, [editor]);
+
+  return null;
+}

package/templates/next-base/src/components/rich-text/lexical/plugins/initial-state-plugin.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import type { SerializedEditorState } from "lexical";
+
+type InitialStatePluginProps = {
+  value: SerializedEditorState | null;
+};
+
+export function InitialStatePlugin({ value }: InitialStatePluginProps) {
+  const [editor] = useLexicalComposerContext();
+  const hydratedRef = useRef(false);
+
+  useEffect(() => {
+    if (hydratedRef.current || !value) {
+      return;
+    }
+
+    hydratedRef.current = true;
+    const parsed = editor.parseEditorState(value);
+    editor.setEditorState(parsed);
+  }, [editor, value]);
+
+  return null;
+}

package/templates/next-base/src/components/rich-text/lexical/plugins/on-change-plugin.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useEffect } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import type { SerializedEditorState } from "lexical";
+
+type OnChangePluginProps = {
+  onChange: (state: SerializedEditorState) => void;
+  disabled?: boolean;
+};
+
+export function OnChangePlugin({ onChange, disabled }: OnChangePluginProps) {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (disabled) {
+      return;
+    }
+
+    return editor.registerUpdateListener(({ editorState }) => {
+      onChange(editorState.toJSON());
+    });
+  }, [disabled, editor, onChange]);
+
+  return null;
+}