@nikala-ui/core 0.11.0 → 0.12.0

package/src/registry/components/ui/rich-text-editor/editor.tsx

@@ -0,0 +1,308 @@
+import {
+  createContext,
+  createSignal,
+  createEffect,
+  useContext,
+  splitProps,
+  Show,
+  onMount,
+  onCleanup,
+  type Component,
+  type ComponentProps,
+  type Accessor,
+} from "solid-js";
+import { useEditor, type UseEditorReturn, type UseEditorOptions } from "./use-editor.js";
+import { EditorToolbar } from "./toolbar.js";
+import { EditorFooter } from "./footer.js";
+import { EditorLinkDialog } from "./link-dialog.js";
+import { EditorImageDialog } from "./image-dialog.js";
+import { EditorBubbleMenu } from "./bubble-menu.js";
+import { EditorSlashCommand } from "./slash-command.js";
+import { cn } from "@/lib/cn";
+
+export type EditorViewMode = "visual" | "markdown";
+
+export interface RichTextEditorContextValue {
+  actions: UseEditorReturn;
+  container: Accessor<HTMLDivElement | undefined>;
+  isFullscreen: Accessor<boolean>;
+  toggleFullscreen: () => void;
+  viewMode: Accessor<EditorViewMode>;
+  toggleViewMode: () => void;
+  showLinkDialog: Accessor<boolean>;
+  setShowLinkDialog: (show: boolean) => void;
+  showImageDialog: Accessor<boolean>;
+  setShowImageDialog: (show: boolean) => void;
+  showTableMenu: Accessor<boolean>;
+  setShowTableMenu: (show: boolean | ((prev: boolean) => boolean)) => void;
+}
+
+const RichTextEditorContext = createContext<RichTextEditorContextValue>();
+
+export function useRichTextEditor(): RichTextEditorContextValue {
+  const context = useContext(RichTextEditorContext);
+  if (!context) {
+    throw new Error("useRichTextEditor must be used within a <RichTextEditor /> component");
+  }
+  return context;
+}
+
+export interface RichTextEditorProps
+  extends Omit<ComponentProps<"div">, "autofocus" | "onChange"> {
+  value?: string;
+  onChange?: (html: string) => void;
+  placeholder?: string;
+  editable?: boolean;
+  autofocus?: boolean | "start" | "end" | "all" | number;
+  characterLimit?: number;
+  hideToolbar?: boolean;
+  hideFooter?: boolean;
+  hideBubbleMenu?: boolean;
+  editorOptions?: Omit<UseEditorOptions, "content" | "placeholder" | "editable">;
+}
+
+export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
+  const [local, others] = splitProps(props, [
+    "class",
+    "value",
+    "onChange",
+    "placeholder",
+    "editable",
+    "autofocus",
+    "characterLimit",
+    "hideToolbar",
+    "hideFooter",
+    "hideBubbleMenu",
+    "editorOptions",
+    "children",
+  ]);
+
+  let containerRef: HTMLDivElement | undefined;
+  let editorElementRef: HTMLDivElement | undefined;
+  const [container, setContainer] = createSignal<HTMLDivElement | undefined>();
+  const [isFullscreen, setIsFullscreen] = createSignal(false);
+  const [viewMode, setViewMode] = createSignal<EditorViewMode>("visual");
+  const [markdownSource, setMarkdownSource] = createSignal("");
+  const [showLinkDialog, setShowLinkDialog] = createSignal(false);
+  const [showImageDialog, setShowImageDialog] = createSignal(false);
+  const [showTableMenu, setShowTableMenu] = createSignal(false);
+
+  const actions = useEditor({
+    content: local.value,
+    placeholder: local.placeholder || "Write something rich or type '/' for commands...",
+    editable: local.editable ?? true,
+    autofocus: local.autofocus ?? false,
+    characterLimit: local.characterLimit,
+    onUpdate: ({ editor: ed }) => {
+      local.onChange?.(ed.getHTML());
+    },
+    ...local.editorOptions,
+  });
+
+  onMount(() => {
+    if (editorElementRef) {
+      actions.mount(editorElementRef);
+    }
+  });
+
+  createEffect(() => {
+    const ed = actions.editor();
+    if (ed && local.value !== undefined && ed.getHTML() !== local.value) {
+      ed.commands.setContent(local.value, { emitUpdate: false });
+    }
+  });
+
+  createEffect(() => {
+    const ed = actions.editor();
+    if (ed && local.editable !== undefined) {
+      actions.setEditable(local.editable);
+    }
+  });
+
+  const toggleFullscreen = () => {
+    if (typeof document === "undefined") return;
+    if (!document.fullscreenElement) {
+      if (containerRef?.requestFullscreen) {
+        containerRef.requestFullscreen().catch(() => {
+          setIsFullscreen(true);
+        });
+      } else {
+        setIsFullscreen(true);
+      }
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen().catch(() => {
+          setIsFullscreen(false);
+        });
+      } else {
+        setIsFullscreen(false);
+      }
+    }
+  };
+
+  createEffect(() => {
+    if (typeof document === "undefined") return;
+    const handleFullscreenChange = () => {
+      const isNativeFs = document.fullscreenElement === containerRef;
+      setIsFullscreen(isNativeFs);
+    };
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
+    onCleanup(() => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+      document.removeEventListener("webkitfullscreenchange", handleFullscreenChange);
+    });
+  });
+
+  const toggleViewMode = () => {
+    const ed = actions.editor();
+    if (!ed) return;
+
+    if (viewMode() === "visual") {
+      // Switch to Markdown mode
+      const currentMd = (ed.storage as any).markdown?.getMarkdown?.() || "";
+      setMarkdownSource(currentMd);
+      setViewMode("markdown");
+    } else {
+      // Switch back to Visual mode
+      ed.commands.setContent(markdownSource(), { emitUpdate: true });
+      local.onChange?.(ed.getHTML());
+      setViewMode("visual");
+    }
+  };
+
+  const handleMarkdownInput = (val: string) => {
+    setMarkdownSource(val);
+    const ed = actions.editor();
+    if (ed) {
+      ed.commands.setContent(val, { emitUpdate: false });
+      local.onChange?.(ed.getHTML());
+    }
+  };
+
+  createEffect(() => {
+    if (typeof window === "undefined") return;
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isFullscreen()) {
+        if (typeof document !== "undefined" && document.fullscreenElement) {
+          document.exitFullscreen?.().catch(() => {});
+        } else {
+          setIsFullscreen(false);
+        }
+      }
+    };
+    window.addEventListener("keydown", handleEsc);
+    onCleanup(() => window.removeEventListener("keydown", handleEsc));
+  });
+
+  createEffect(() => {
+    if (typeof document === "undefined") return;
+    if (isFullscreen()) {
+      const original = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      onCleanup(() => {
+        document.body.style.overflow = original;
+      });
+    }
+  });
+
+  const contextValue: RichTextEditorContextValue = {
+    actions,
+    container,
+    isFullscreen,
+    toggleFullscreen,
+    viewMode,
+    toggleViewMode,
+    showLinkDialog,
+    setShowLinkDialog,
+    showImageDialog,
+    setShowImageDialog,
+    showTableMenu,
+    setShowTableMenu: (val) => {
+      if (typeof val === "function") {
+        setShowTableMenu(val);
+      } else {
+        setShowTableMenu(val);
+      }
+    },
+  };
+
+  return (
+    <RichTextEditorContext.Provider value={contextValue}>
+      <div
+        ref={(el) => {
+          containerRef = el;
+          setContainer(el);
+        }}
+        class={cn(
+          "relative flex flex-col w-full rounded-lg border border-border bg-card text-card-foreground shadow-xs transition-all",
+          isFullscreen() &&
+            "fixed inset-0 z-[99999] rounded-none border-0 h-screen w-screen bg-background flex flex-col overflow-hidden m-0 p-0",
+          local.class
+        )}
+        {...others}
+      >
+        <Show when={!local.hideToolbar}>
+          <EditorToolbar />
+        </Show>
+
+        {/* Visual WYSIWYG View */}
+        <div
+          class={cn(
+            "relative flex-1 w-full overflow-y-auto min-h-[220px]",
+            viewMode() === "markdown" && "hidden"
+          )}
+        >
+          <div
+            class={cn(
+              "w-full px-4 py-4 min-h-full",
+              isFullscreen() && "max-w-4xl mx-auto px-8 py-8"
+            )}
+          >
+            <div ref={editorElementRef} class="tiptap-wrapper w-full h-full" />
+            <Show when={local.children}>{local.children}</Show>
+          </div>
+        </div>
+
+        {/* Raw Markdown Source View */}
+        <Show when={viewMode() === "markdown"}>
+          <div class="relative flex-1 w-full overflow-y-auto min-h-[220px] bg-muted/20">
+            <div
+              class={cn(
+                "w-full p-4 min-h-full",
+                isFullscreen() && "max-w-4xl mx-auto px-8 py-8"
+              )}
+            >
+              <textarea
+                class="w-full h-full min-h-[220px] bg-transparent text-foreground focus:outline-hidden resize-none leading-relaxed font-mono text-xs"
+                placeholder="Write or paste raw markdown here..."
+                value={markdownSource()}
+                onInput={(e) => handleMarkdownInput(e.currentTarget.value)}
+              />
+            </div>
+          </div>
+        </Show>
+
+        <Show when={!local.hideFooter}>
+          <EditorFooter />
+        </Show>
+
+        <Show when={!local.hideBubbleMenu && viewMode() === "visual"}>
+          <EditorBubbleMenu />
+        </Show>
+
+        <Show when={viewMode() === "visual"}>
+          <EditorSlashCommand />
+        </Show>
+
+        <Show when={showLinkDialog()}>
+          <EditorLinkDialog />
+        </Show>
+
+        <Show when={showImageDialog()}>
+          <EditorImageDialog />
+        </Show>
+      </div>
+    </RichTextEditorContext.Provider>
+  );
+};

package/src/registry/components/ui/rich-text-editor/extensions.ts

@@ -0,0 +1,116 @@
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import Link from "@tiptap/extension-link";
+import Image from "@tiptap/extension-image";
+import TaskList from "@tiptap/extension-task-list";
+import TaskItem from "@tiptap/extension-task-item";
+import { Table, TableRow, TableCell, TableHeader } from "@tiptap/extension-table";
+import Underline from "@tiptap/extension-underline";
+import TextAlign from "@tiptap/extension-text-align";
+import Highlight from "@tiptap/extension-highlight";
+import CharacterCount from "@tiptap/extension-character-count";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import Typography from "@tiptap/extension-typography";
+import { Markdown } from "tiptap-markdown";
+import type { Extension } from "@tiptap/core";
+
+export interface DefaultExtensionsOptions {
+  placeholder?: string;
+  characterLimit?: number;
+}
+
+export function getDefaultExtensions(options?: DefaultExtensionsOptions): Extension[] {
+  return [
+    StarterKit.configure({
+      heading: {
+        levels: [1, 2, 3, 4, 5, 6],
+        HTMLAttributes: { class: "font-heading tracking-tight" },
+      },
+      bulletList: {
+        HTMLAttributes: { class: "list-disc pl-6 my-3 space-y-1" },
+      },
+      orderedList: {
+        HTMLAttributes: { class: "list-decimal pl-6 my-3 space-y-1" },
+      },
+      listItem: {
+        HTMLAttributes: { class: "leading-normal my-0.5" },
+      },
+      codeBlock: {
+        HTMLAttributes: {
+          class: "rounded-lg bg-muted p-4 font-mono text-xs border border-border my-3 overflow-x-auto text-foreground",
+        },
+      },
+      code: {
+        HTMLAttributes: {
+          class: "rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-foreground font-semibold border border-border/50",
+        },
+      },
+      blockquote: {
+        HTMLAttributes: {
+          class: "border-l-4 border-primary pl-4 italic text-muted-foreground my-3",
+        },
+      },
+      horizontalRule: {
+        HTMLAttributes: {
+          class: "border-border my-6",
+        },
+      },
+    }) as Extension,
+    Placeholder.configure({
+      placeholder: options?.placeholder || "Write something rich or type '/' for commands...",
+      emptyEditorClass: "is-editor-empty",
+    }) as Extension,
+    Underline as Extension,
+    Subscript as Extension,
+    Superscript as Extension,
+    Typography as Extension,
+    Highlight.configure({
+      multicolor: true,
+      HTMLAttributes: { class: "rounded px-1 py-0.5" },
+    }) as Extension,
+    TextAlign.configure({ types: ["heading", "paragraph"] }) as Extension,
+    Link.configure({
+      openOnClick: false,
+      HTMLAttributes: {
+        class: "text-primary font-medium underline underline-offset-4 hover:opacity-80 transition-opacity cursor-pointer",
+      },
+    }) as Extension,
+    Image.configure({
+      HTMLAttributes: {
+        class: "rounded-lg max-w-full h-auto my-4 border border-border shadow-xs",
+      },
+    }) as Extension,
+    TaskList.configure({
+      HTMLAttributes: { class: "list-none pl-0 my-3 space-y-2" },
+    }) as Extension,
+    TaskItem.configure({
+      nested: true,
+      HTMLAttributes: { class: "flex items-start gap-2.5 my-1" },
+    }) as Extension,
+    Table.configure({
+      resizable: true,
+      HTMLAttributes: {
+        class: "border-collapse table-auto w-full my-4 border border-border rounded-lg overflow-hidden text-sm",
+      },
+    }) as Extension,
+    TableRow as Extension,
+    TableHeader.configure({
+      HTMLAttributes: { class: "border border-border bg-muted/70 px-3 py-2 font-semibold text-left text-xs" },
+    }) as Extension,
+    TableCell.configure({
+      HTMLAttributes: { class: "border border-border px-3 py-2 text-xs" },
+    }) as Extension,
+    CharacterCount.configure({ limit: options?.characterLimit }) as Extension,
+    Markdown.configure({
+      html: true,
+      tightLists: true,
+      tightListClass: "tight",
+      bulletListMarker: "-",
+      linkify: true,
+      breaks: false,
+      transformPastedText: true,
+      transformCopiedText: true,
+    }) as Extension,
+  ];
+}

package/src/registry/components/ui/rich-text-editor/footer.tsx

@@ -0,0 +1,36 @@
+import { splitProps, type Component, type ComponentProps } from "solid-js";
+import { useRichTextEditor } from "./editor.js";
+import { cn } from "@/lib/cn";
+
+export const EditorFooter: Component<ComponentProps<"div">> = (props) => {
+  const [local, others] = splitProps(props, ["class"]);
+  const { actions } = useRichTextEditor();
+
+  const readingTime = () => {
+    const words = actions.wordCount();
+    const minutes = Math.max(1, Math.ceil(words / 200));
+    return `${minutes} min read`;
+  };
+
+  return (
+    <div
+      class={cn(
+        "flex items-center justify-between border-t border-border px-3 py-1.5 text-[11px] text-muted-foreground bg-muted/30 rounded-b-lg select-none",
+        local.class
+      )}
+      {...others}
+    >
+      <div class="flex items-center gap-3">
+        <span>
+          <strong class="text-foreground">{actions.wordCount()}</strong> words
+        </span>
+        <span>
+          <strong class="text-foreground">{actions.characterCount()}</strong> characters
+        </span>
+      </div>
+      <div class="flex items-center gap-2">
+        <span>{readingTime()}</span>
+      </div>
+    </div>
+  );
+};

package/src/registry/components/ui/rich-text-editor/image-dialog.tsx

@@ -0,0 +1,75 @@
+import { createSignal, type Component } from "solid-js";
+import { useRichTextEditor } from "./editor.js";
+
+export const EditorImageDialog: Component = () => {
+  const { actions, setShowImageDialog } = useRichTextEditor();
+  const [url, setUrl] = createSignal("");
+  const [alt, setAlt] = createSignal("");
+
+  const handleApply = (e: Event) => {
+    e.preventDefault();
+    if (url().trim()) {
+      actions.setImage({ src: url().trim(), alt: alt().trim() });
+      setShowImageDialog(false);
+    }
+  };
+
+  const handleFileUpload = (e: Event & { currentTarget: HTMLInputElement }) => {
+    const file = e.currentTarget.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result === "string") {
+        actions.setImage({ src: reader.result, alt: file.name });
+        setShowImageDialog(false);
+      }
+    };
+    reader.readAsDataURL(file);
+  };
+
+  return (
+    <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-xs p-4">
+      <div class="w-full max-w-sm rounded-lg border border-border bg-card p-4 shadow-lg text-card-foreground">
+        <h3 class="text-sm font-semibold mb-3">Insert Image</h3>
+        <form onSubmit={handleApply} class="flex flex-col gap-3">
+          <div>
+            <label class="text-[11px] font-medium text-muted-foreground block mb-1">Image URL</label>
+            <input
+              type="url"
+              placeholder="https://images.unsplash.com/..."
+              value={url()}
+              onInput={(e) => setUrl(e.currentTarget.value)}
+              class="w-full h-8 px-2.5 text-xs rounded-md border border-border bg-background text-foreground focus:outline-hidden focus:ring-1 focus:ring-primary"
+            />
+          </div>
+          <div>
+            <label class="text-[11px] font-medium text-muted-foreground block mb-1">Or Upload Local File</label>
+            <input
+              type="file"
+              accept="image/*"
+              onChange={handleFileUpload}
+              class="w-full text-xs text-muted-foreground file:mr-2 file:py-1 file:px-2.5 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-muted file:text-foreground hover:file:bg-muted/80 cursor-pointer"
+            />
+          </div>
+          <div class="flex items-center justify-end gap-2 pt-1">
+            <button
+              type="button"
+              class="px-2.5 py-1 text-xs rounded-md border border-border hover:bg-muted cursor-pointer"
+              onClick={() => setShowImageDialog(false)}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={!url().trim()}
+              class="px-3 py-1 text-xs rounded-md bg-primary text-primary-foreground font-medium hover:bg-primary/90 disabled:opacity-50 cursor-pointer"
+            >
+              Insert Image
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};

package/src/registry/components/ui/rich-text-editor/index.ts

@@ -0,0 +1,11 @@
+export * from "./editor.js";
+export * from "./use-editor.js";
+export * from "./extensions.js";
+export * from "./toolbar.js";
+export * from "./bubble-menu.js";
+export * from "./slash-command.js";
+export * from "./link-dialog.js";
+export * from "./image-dialog.js";
+export * from "./table-controls.js";
+export * from "./footer.js";
+export * from "./markdown.js";

package/src/registry/components/ui/rich-text-editor/link-dialog.tsx

@@ -0,0 +1,48 @@
+import { createSignal, type Component } from "solid-js";
+import { useRichTextEditor } from "./editor.js";
+
+export const EditorLinkDialog: Component = () => {
+  const { actions, setShowLinkDialog } = useRichTextEditor();
+  const [url, setUrl] = createSignal("");
+
+  const handleApply = (e: Event) => {
+    e.preventDefault();
+    if (url().trim()) {
+      actions.setLink({ href: url().trim() });
+      setShowLinkDialog(false);
+    }
+  };
+
+  return (
+    <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-xs p-4">
+      <div class="w-full max-w-sm rounded-lg border border-border bg-card p-4 shadow-lg text-card-foreground">
+        <h3 class="text-sm font-semibold mb-3">Insert Hyperlink</h3>
+        <form onSubmit={handleApply} class="flex flex-col gap-3">
+          <input
+            type="url"
+            placeholder="https://example.com"
+            value={url()}
+            onInput={(e) => setUrl(e.currentTarget.value)}
+            autofocus
+            class="w-full h-8 px-2.5 text-xs rounded-md border border-border bg-background text-foreground focus:outline-hidden focus:ring-1 focus:ring-primary"
+          />
+          <div class="flex items-center justify-end gap-2">
+            <button
+              type="button"
+              class="px-2.5 py-1 text-xs rounded-md border border-border hover:bg-muted cursor-pointer"
+              onClick={() => setShowLinkDialog(false)}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              class="px-3 py-1 text-xs rounded-md bg-primary text-primary-foreground font-medium hover:bg-primary/90 cursor-pointer"
+            >
+              Apply Link
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};