@thinhnguyencth1204/nextcli 0.6.1 → 0.8.0

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

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