@thinhnguyencth1204/nextcli 0.7.0 → 0.8.0

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;
+}

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

@@ -0,0 +1,190 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND } from "lexical";
+import { INSERT_IMAGE_COMMAND } from "../nodes/image-node";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Bold, ImageIcon, Italic, Smile, Underline } from "lucide-react";
+
+const COMMON_EMOJIS = [
+  "😀",
+  "😂",
+  "😍",
+  "🥳",
+  "👍",
+  "🎉",
+  "🔥",
+  "✨",
+  "❤️",
+  "🙏",
+  "💡",
+  "📝",
+];
+
+type ToolbarPluginProps = {
+  disabled?: boolean;
+};
+
+export function ToolbarPlugin({ disabled }: ToolbarPluginProps) {
+  const [editor] = useLexicalComposerContext();
+  const [imageUrl, setImageUrl] = useState("");
+  const [imageAlt, setImageAlt] = useState("");
+  const [imageOpen, setImageOpen] = useState(false);
+  const [emojiOpen, setEmojiOpen] = useState(false);
+
+  const insertEmoji = useCallback(
+    (emoji: string) => {
+      editor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          selection.insertText(emoji);
+        }
+      });
+      setEmojiOpen(false);
+    },
+    [editor],
+  );
+
+  const insertImage = useCallback(() => {
+    const src = imageUrl.trim();
+    if (!src) {
+      return;
+    }
+
+    try {
+      new URL(src);
+    } catch {
+      return;
+    }
+
+    editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+      altText: imageAlt.trim() || "Image",
+      src,
+    });
+    setImageUrl("");
+    setImageAlt("");
+    setImageOpen(false);
+  }, [editor, imageAlt, imageUrl]);
+
+  return (
+    <div className="flex flex-wrap items-center gap-1 border-b border-input px-2 py-1.5">
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="h-8 w-8"
+        disabled={disabled}
+        onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold")}
+        aria-label="Bold"
+      >
+        <Bold className="h-4 w-4" />
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="h-8 w-8"
+        disabled={disabled}
+        onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic")}
+        aria-label="Italic"
+      >
+        <Italic className="h-4 w-4" />
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="h-8 w-8"
+        disabled={disabled}
+        onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline")}
+        aria-label="Underline"
+      >
+        <Underline className="h-4 w-4" />
+      </Button>
+
+      <Popover open={emojiOpen} onOpenChange={setEmojiOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8"
+            disabled={disabled}
+            aria-label="Insert emoji"
+          >
+            <Smile className="h-4 w-4" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-56 p-2" align="start">
+          <div className="grid grid-cols-6 gap-1">
+            {COMMON_EMOJIS.map((emoji) => (
+              <button
+                key={emoji}
+                type="button"
+                className="hover:bg-accent rounded p-1 text-lg"
+                onClick={() => insertEmoji(emoji)}
+              >
+                {emoji}
+              </button>
+            ))}
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      <Popover open={imageOpen} onOpenChange={setImageOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8"
+            disabled={disabled}
+            aria-label="Insert image URL"
+          >
+            <ImageIcon className="h-4 w-4" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-80 space-y-3" align="start">
+          <div className="space-y-1">
+            <label className="text-xs font-medium" htmlFor="image-url">
+              Image URL
+            </label>
+            <Input
+              id="image-url"
+              placeholder="https://..."
+              value={imageUrl}
+              onChange={(event) => setImageUrl(event.target.value)}
+            />
+          </div>
+          <div className="space-y-1">
+            <label className="text-xs font-medium" htmlFor="image-alt">
+              Alt text
+            </label>
+            <Input
+              id="image-alt"
+              placeholder="Description"
+              value={imageAlt}
+              onChange={(event) => setImageAlt(event.target.value)}
+            />
+          </div>
+          <Button
+            type="button"
+            size="sm"
+            className="w-full"
+            onClick={insertImage}
+            disabled={!imageUrl.trim()}
+          >
+            Insert image
+          </Button>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

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

@@ -0,0 +1,121 @@
+"use client";
+
+import { useCallback, useMemo, useRef } from "react";
+import { LexicalExtensionComposer } from "@lexical/react/LexicalExtensionComposer";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { cn } from "@/utils/cn";
+import { richTextEditorExtension } from "./extension";
+import { ImagePlugin } from "./plugins/image-plugin";
+import { InitialStatePlugin } from "./plugins/initial-state-plugin";
+import { OnChangePlugin } from "./plugins/on-change-plugin";
+import { ToolbarPlugin } from "./plugins/toolbar-plugin";
+import { createEmptyLexicalContent, type LexicalEditorContent } from "../types";
+import { extractImageUrlsFromState } from "@/lib/rich-text/image-urls";
+import type { SerializedEditorState } from "lexical";
+import { ClientOnly } from "../client-only";
+
+export type LexicalRichTextEditorProps = {
+  value: LexicalEditorContent | null;
+  onChange: (value: LexicalEditorContent) => void;
+  onImagesRemoved?: (removedUrls: string[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  className?: string;
+  id?: string;
+};
+
+function LexicalRichTextEditorInner({
+  value,
+  onChange,
+  onImagesRemoved,
+  placeholder = "Write something...",
+  disabled = false,
+  readOnly = false,
+  className,
+  id,
+}: LexicalRichTextEditorProps) {
+  const previousImagesRef = useRef<string[]>(
+    extractImageUrlsFromState(value ?? createEmptyLexicalContent()),
+  );
+
+  const handleChange = useCallback(
+    (nextState: SerializedEditorState) => {
+      const nextImages = extractImageUrlsFromState(nextState);
+      const previousImages = previousImagesRef.current;
+      const removed = previousImages.filter((url) => !nextImages.includes(url));
+
+      if (removed.length > 0) {
+        onImagesRemoved?.(removed);
+      }
+
+      previousImagesRef.current = nextImages;
+      onChange(nextState);
+    },
+    [onChange, onImagesRemoved],
+  );
+
+  const initialValue = useMemo(
+    () => value ?? createEmptyLexicalContent(),
+    [value],
+  );
+
+  const isInteractive = !disabled && !readOnly;
+
+  return (
+    <div
+      id={id}
+      className={cn(
+        "bg-background overflow-hidden rounded-md border border-input",
+        (disabled || readOnly) && "opacity-60",
+        className,
+      )}
+    >
+      <LexicalExtensionComposer
+        extension={richTextEditorExtension}
+        contentEditable={null}
+      >
+        {isInteractive ? <ToolbarPlugin disabled={disabled} /> : null}
+        <div className="relative min-h-[160px]">
+          <LexicalErrorBoundary onError={(error) => console.error(error)}>
+            <ContentEditable
+              className={cn(
+                "lexical-content-editable min-h-[160px] px-3 py-2 text-sm outline-none",
+                !isInteractive && "pointer-events-none",
+              )}
+              aria-placeholder={placeholder}
+              placeholder={
+                <div className="text-muted-foreground pointer-events-none absolute top-2 left-3 text-sm">
+                  {placeholder}
+                </div>
+              }
+            />
+          </LexicalErrorBoundary>
+          <InitialStatePlugin value={initialValue} />
+          <ImagePlugin />
+          <OnChangePlugin onChange={handleChange} disabled={!isInteractive} />
+        </div>
+      </LexicalExtensionComposer>
+    </div>
+  );
+}
+
+export function LexicalRichTextEditor(props: LexicalRichTextEditorProps) {
+  return (
+    <ClientOnly
+      fallback={
+        <div
+          className={cn(
+            "bg-muted/40 text-muted-foreground min-h-[160px] rounded-md border border-input px-3 py-2 text-sm",
+            props.className,
+          )}
+        >
+          Loading editor...
+        </div>
+      }
+    >
+      <LexicalRichTextEditorInner {...props} />
+    </ClientOnly>
+  );
+}

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

@@ -0,0 +1,18 @@
+export const richTextTheme = {
+  paragraph: "lexical-paragraph",
+  text: {
+    bold: "lexical-text-bold",
+    italic: "lexical-text-italic",
+    underline: "lexical-text-underline",
+    strikethrough: "lexical-text-strikethrough",
+    underlineStrikethrough: "lexical-text-underline-strikethrough",
+    code: "lexical-text-code",
+  },
+  heading: {
+    h1: "lexical-heading-h1",
+    h2: "lexical-heading-h2",
+    h3: "lexical-heading-h3",
+  },
+  quote: "lexical-quote",
+  image: "lexical-image",
+};

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

@@ -0,0 +1,72 @@
+"use client";
+
+import { useEffect, type ReactNode } from "react";
+import { LexicalExtensionComposer } from "@lexical/react/LexicalExtensionComposer";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { cn } from "@/utils/cn";
+import { richTextReadOnlyExtension } from "./lexical/extension";
+import type { LexicalEditorContent } from "./types";
+import { ClientOnly } from "./client-only";
+
+type HydrateStatePluginProps = {
+  content: LexicalEditorContent;
+};
+
+function HydrateStatePlugin({ content }: HydrateStatePluginProps) {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    const parsed = editor.parseEditorState(content);
+    editor.setEditorState(parsed);
+  }, [content, editor]);
+
+  return null;
+}
+
+export type RichTextRendererProps = {
+  content: LexicalEditorContent | null;
+  className?: string;
+  emptyFallback?: ReactNode;
+};
+
+function RichTextRendererInner({
+  content,
+  className,
+}: {
+  content: LexicalEditorContent;
+  className?: string;
+}) {
+  return (
+    <div className={cn("lexical-renderer", className)}>
+      <LexicalExtensionComposer
+        extension={richTextReadOnlyExtension}
+        contentEditable={null}
+      >
+        <LexicalErrorBoundary onError={(error) => console.error(error)}>
+          <ContentEditable className="lexical-content-editable pointer-events-none text-sm outline-none" />
+        </LexicalErrorBoundary>
+        <HydrateStatePlugin content={content} />
+      </LexicalExtensionComposer>
+    </div>
+  );
+}
+
+export function RichTextRenderer({
+  content,
+  className,
+  emptyFallback = (
+    <p className="text-muted-foreground text-sm">No content yet.</p>
+  ),
+}: RichTextRendererProps) {
+  if (!content) {
+    return <>{emptyFallback}</>;
+  }
+
+  return (
+    <ClientOnly fallback={emptyFallback}>
+      <RichTextRendererInner content={content} className={className} />
+    </ClientOnly>
+  );
+}

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

@@ -0,0 +1,60 @@
+import type { SerializedEditorState } from "lexical";
+
+/** Lexical editor state persisted as JSON (API / database). */
+export type LexicalEditorContent = SerializedEditorState;
+
+/** Plain string content for the native textarea adapter. */
+export type TextareaEditorContent = string;
+
+export type EditorVariant = "textarea" | "lexical";
+
+export type EditorContent = LexicalEditorContent | TextareaEditorContent;
+
+export type EditorFieldProps = {
+  /** Switch editor implementation without changing form code. */
+  variant?: EditorVariant;
+  value: EditorContent | null;
+  onChange: (value: EditorContent) => void;
+  /** Called when image URLs disappear from Lexical content (for storage cleanup). */
+  onImagesRemoved?: (removedUrls: string[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  error?: string;
+  className?: string;
+  id?: string;
+  name?: string;
+};
+
+export function isLexicalContent(
+  value: EditorContent | null,
+): value is LexicalEditorContent {
+  return (
+    value !== null &&
+    typeof value === "object" &&
+    "root" in value &&
+    typeof value.root === "object"
+  );
+}
+
+export function createEmptyLexicalContent(): LexicalEditorContent {
+  return {
+    root: {
+      children: [
+        {
+          children: [],
+          direction: null,
+          format: "",
+          indent: 0,
+          type: "paragraph",
+          version: 1,
+        },
+      ],
+      direction: null,
+      format: "",
+      indent: 0,
+      type: "root",
+      version: 1,
+    },
+  } as unknown as LexicalEditorContent;
+}

package/templates/next-base/src/hooks/index.ts

@@ -1 +1 @@
-export * from "@/hooks/use-mobile";
+/** Re-export hooks from optional modules here when needed. */

package/templates/next-base/src/lib/rich-text/default-image-removal.ts

@@ -0,0 +1,10 @@
+import type { RemoveManagedImageFn } from "@/lib/rich-text";
+
+/**
+ * Default no-op image remover for base-only projects.
+ * After `nextcli add module supabase`, use
+ * `removeSupabaseManagedImage` from `@/lib/supabase/rich-text-image-sync`.
+ */
+export const defaultRemoveManagedImage: RemoveManagedImageFn = async () => {
+  // Intentionally empty — wire Supabase removal when the module is installed.
+};

package/templates/next-base/src/lib/rich-text/image-urls.ts

@@ -0,0 +1,41 @@
+import type { SerializedEditorState } from "lexical";
+
+type LexicalJsonNode = {
+  type?: string;
+  src?: string;
+  children?: LexicalJsonNode[];
+};
+
+function walkNodes(node: LexicalJsonNode, urls: Set<string>): void {
+  if (node.type === "image" && typeof node.src === "string" && node.src) {
+    urls.add(node.src);
+  }
+
+  if (Array.isArray(node.children)) {
+    for (const child of node.children) {
+      walkNodes(child, urls);
+    }
+  }
+}
+
+export function extractImageUrlsFromState(
+  state: SerializedEditorState | null | undefined,
+): string[] {
+  if (!state?.root) {
+    return [];
+  }
+
+  const urls = new Set<string>();
+  walkNodes(state.root as LexicalJsonNode, urls);
+  return [...urls];
+}
+
+export function diffRemovedImageUrls(
+  previous: SerializedEditorState | null | undefined,
+  next: SerializedEditorState | null | undefined,
+): string[] {
+  const previousUrls = extractImageUrlsFromState(previous);
+  const nextUrls = new Set(extractImageUrlsFromState(next));
+
+  return previousUrls.filter((url) => !nextUrls.has(url));
+}

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

@@ -0,0 +1,12 @@
+export { diffRemovedImageUrls, extractImageUrlsFromState } from "./image-urls";
+export {
+  isSupabaseManagedImageUrl,
+  parseSupabaseStorageUrl,
+  type SupabaseStorageRef,
+} from "./supabase-url";
+export {
+  syncRemovedRichTextImages,
+  type RemoveManagedImageFn,
+  type SyncRemovedImagesOptions,
+} from "./sync-removed-images";
+export { defaultRemoveManagedImage } from "./default-image-removal";

package/templates/next-base/src/lib/rich-text/supabase-url.ts

@@ -0,0 +1,67 @@
+const DEFAULT_BUCKET =
+  process.env.NEXT_PUBLIC_SUPABASE_STORAGE_BUCKET?.trim() || "public";
+
+export type SupabaseStorageRef = {
+  bucket: string;
+  path: string;
+};
+
+function getConfiguredBucket(): string {
+  return (
+    process.env.NEXT_PUBLIC_SUPABASE_STORAGE_BUCKET?.trim() || DEFAULT_BUCKET
+  );
+}
+
+/**
+ * Maps a Supabase public object URL back to `{ bucket, path }`.
+ * Returns null for external URLs or when Supabase env is not configured.
+ */
+export function parseSupabaseStorageUrl(
+  url: string,
+): SupabaseStorageRef | null {
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL?.trim();
+  if (!supabaseUrl) {
+    return null;
+  }
+
+  try {
+    const parsed = new URL(url);
+    const base = new URL(supabaseUrl);
+
+    if (parsed.origin !== base.origin) {
+      return null;
+    }
+
+    const publicPrefix = "/storage/v1/object/public/";
+    if (!parsed.pathname.startsWith(publicPrefix)) {
+      return null;
+    }
+
+    const remainder = parsed.pathname.slice(publicPrefix.length);
+    const slashIndex = remainder.indexOf("/");
+    if (slashIndex <= 0) {
+      return null;
+    }
+
+    const bucket = remainder.slice(0, slashIndex);
+    const path = remainder.slice(slashIndex + 1);
+
+    if (!path) {
+      return null;
+    }
+
+    return { bucket, path };
+  } catch {
+    return null;
+  }
+}
+
+export function isSupabaseManagedImageUrl(url: string): boolean {
+  const ref = parseSupabaseStorageUrl(url);
+  if (!ref) {
+    return false;
+  }
+
+  const configuredBucket = getConfiguredBucket();
+  return ref.bucket === configuredBucket;
+}