@tulip-systems/core 0.4.0 → 0.5.0

package/src/components/editor/components/block-dropdown.tsx

@@ -5,6 +5,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Separator } from "@/components/ui/separator";
 import { Editor } from "@tiptap/react";
 import {
   ChevronDown,
@@ -18,7 +19,8 @@ import {
   TextIcon,
 } from "lucide-react";
 import { useContext } from "react";
-import { EditorContext } from "../context.client";
+import { EditorExtensionsConfigResult } from "../lib/extensions";
+import { EditorContext } from "./editor.client";
 
 const blocks = [
   {
@@ -26,82 +28,98 @@ const blocks = [
     icon: TextIcon,
     selected: (editor: Editor) => editor.isActive("paragraph"),
     handler: (editor: Editor) => editor.commands.setParagraph(),
+    hidden: (extensions: EditorExtensionsConfigResult) => !extensions.paragraph,
   },
   {
     label: "Titel 1",
     icon: Heading1Icon,
     selected: (editor: Editor) => editor.isActive("heading", { level: 1 }),
     handler: (editor: Editor) => editor.commands.setHeading({ level: 1 }),
+    hidden: (extensions: EditorExtensionsConfigResult) => !extensions.heading,
   },
   {
     label: "Titel 2",
     icon: Heading2Icon,
     selected: (editor: Editor) => editor.isActive("heading", { level: 2 }),
     handler: (editor: Editor) => editor.commands.setHeading({ level: 2 }),
+    hidden: (extensions: EditorExtensionsConfigResult) => !extensions.heading,
   },
   {
     label: "Titel 3",
     icon: Heading3Icon,
     selected: (editor: Editor) => editor.isActive("heading", { level: 3 }),
     handler: (editor: Editor) => editor.commands.setHeading({ level: 3 }),
+    hidden: (extensions: EditorExtensionsConfigResult) => !extensions.heading,
   },
   {
     label: "Titel 4",
     icon: Heading4Icon,
     selected: (editor: Editor) => editor.isActive("heading", { level: 4 }),
     handler: (editor: Editor) => editor.commands.setHeading({ level: 4 }),
+    hidden: (extensions: EditorExtensionsConfigResult) => !extensions.heading,
   },
   {
     label: "Titel 5",
     icon: Heading5Icon,
     selected: (editor: Editor) => editor.isActive("heading", { level: 5 }),
     handler: (editor: Editor) => editor.commands.setHeading({ level: 5 }),
+    hidden: (extensions: EditorExtensionsConfigResult) => !extensions.heading,
   },
   {
     label: "Numbered List",
     icon: ListOrderedIcon,
     selected: (editor: Editor) => editor.isActive("orderedList"),
     handler: (editor: Editor) => editor.commands.toggleOrderedList(),
+    hidden: (extensions: EditorExtensionsConfigResult) => !extensions.orderedList,
   },
   {
     label: "Bulleted List",
     icon: ListIcon,
     selected: (editor: Editor) => editor.isActive("bulletList"),
     handler: (editor: Editor) => editor.commands.toggleBulletList(),
+    hidden: (extensions: EditorExtensionsConfigResult) => !extensions.bulletList,
   },
 ];
 
 export function BlockDropdown() {
-  const { editor } = useContext(EditorContext);
+  const { editor, extensions } = useContext(EditorContext);
 
   const selectedBlock = blocks.find((block) => block.selected(editor));
   const Icon = selectedBlock?.icon;
 
+  const filteredBlocks = blocks.filter((block) => !block.hidden(extensions));
+
+  if (filteredBlocks.length === 0) return null;
+
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm" className="flex items-center gap-8 p-2">
-          <span className="flex items-center gap-2">
-            {Icon && <Icon className="size-3.5" />}
-            {selectedBlock?.label ?? "Select a block"}
-          </span>
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="sm" className="flex items-center gap-8 p-2">
+            <span className="flex items-center gap-2">
+              {Icon && <Icon className="size-3.5" />}
+              {selectedBlock?.label ?? "Select a block"}
+            </span>
+
+            <ChevronDown className="size-3.5" />
+          </Button>
+        </DropdownMenuTrigger>
 
-          <ChevronDown className="size-3.5" />
-        </Button>
-      </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          {filteredBlocks.map(({ label, icon: Icon, handler }, index) => (
+            <DropdownMenuItem
+              key={index}
+              onClick={() => handler(editor)}
+              className="flex items-center gap-2"
+            >
+              {Icon && <Icon className="size-3.5" />}
+              {label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
 
-      <DropdownMenuContent>
-        {blocks.map(({ label, icon: Icon, handler }, index) => (
-          <DropdownMenuItem
-            key={index}
-            onClick={() => handler(editor)}
-            className="flex items-center gap-2"
-          >
-            {Icon && <Icon className="size-3.5" />}
-            {label}
-          </DropdownMenuItem>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
+      <Separator orientation="vertical" className="h-8" />
+    </>
   );
 }

package/src/components/editor/components/content.client.tsx

@@ -3,7 +3,7 @@
 import { TooltipProvider } from "@/components/ui/tooltip.client";
 import { EditorContent as TiptapEditorContent } from "@tiptap/react";
 import { useContext } from "react";
-import { EditorContext } from "../context.client";
+import { EditorContext } from "./editor.client";
 
 export function EditorContent() {
   const { editor } = useContext(EditorContext);

package/src/components/editor/components/editor.client.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { cn } from "@/lib/utils/cn";
+import { Content, Editor as TiptapEditor, useEditor } from "@tiptap/react";
+import { cva, VariantProps } from "class-variance-authority";
+import { createContext, PropsWithChildren } from "react";
+import {
+  EditorExtensionsConfig,
+  EditorExtensionsConfigResult,
+  editorExtensionsConfigToExtensions,
+  flattenEditorExtensionsConfig,
+} from "../lib/extensions";
+import { EditorJSONContent } from "../lib/types";
+import { editorProseVariants } from "../lib/variants";
+
+/**
+ * Editor context
+ */
+type EditorContextValue = {
+  editor: TiptapEditor;
+  extensions: EditorExtensionsConfigResult;
+};
+
+export const EditorContext = createContext({} as EditorContextValue);
+
+/**
+ * Editor variants
+ */
+export const editorVariants = cva("", {
+  variants: {
+    variant: {
+      default:
+        "border-input rounded-lg border [&_.editor-content]:p-3 [&_.editor-content[contenteditable='false']]:pointer-events-none [&_.editor-content[contenteditable='false']]:cursor-not-allowed [&_.editor-content[contenteditable='false']]:opacity-50",
+      table:
+        "[&_.editor-content[contenteditable='false']]:pointer-events-none [&_.editor-content[contenteditable='false']]:cursor-not-allowed [&_.editor-content[contenteditable='false']]:opacity-50",
+      preview: "bg-transparent [&_.editor-content]:p-0 [&_.editor-content]:min-h-0",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+/**
+ * Editor context provider
+ */
+export type EditorProps = VariantProps<typeof editorVariants> &
+  PropsWithChildren<{
+    value?: Content;
+    extensions?: Partial<EditorExtensionsConfig>;
+    onUpdate?: (value: EditorJSONContent) => void;
+    onBlur?: (value: EditorJSONContent) => void;
+    disabled?: boolean;
+    className?: string;
+  }>;
+
+export function Editor({
+  value,
+  extensions,
+  onUpdate,
+  onBlur,
+  disabled,
+  variant,
+  className,
+  children,
+}: EditorProps) {
+  const editor = useEditor({
+    extensions: editorExtensionsConfigToExtensions(extensions),
+    content: value,
+    onUpdate: ({ editor }) => onUpdate?.(editor.getJSON()),
+    onBlur: ({ editor }) => onBlur?.(editor.getJSON()),
+    editable: !disabled,
+    injectCSS: false,
+    immediatelyRender: false,
+    editorProps: {
+      transformPastedHTML: (html) => html.replace(/<img.*?>/g, ""),
+      attributes: {
+        class: cn("editor-content text-sm max-w-full focus:outline-none", editorProseVariants(), className),
+      },
+    },
+  });
+
+  if (!editor) return null;
+
+  return (
+    <EditorContext.Provider
+      value={{
+        editor,
+        extensions: flattenEditorExtensionsConfig(extensions),
+      }}
+    >
+      <div className={editorVariants({ variant })}>{children}</div>
+    </EditorContext.Provider>
+  );
+}

package/src/components/editor/components/menu-fixed.client.tsx

@@ -0,0 +1,165 @@
+import { Button } from "@/components/ui/button";
+import { ColorPicker } from "@/components/ui/color-picker.client";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import {
+  BaselineIcon,
+  BoldIcon,
+  EraserIcon,
+  ItalicIcon,
+  PaintBucketIcon,
+  RedoIcon,
+  StrikethroughIcon,
+  UnderlineIcon,
+  UndoIcon,
+} from "lucide-react";
+import { useContext } from "react";
+import { BlockDropdown } from "./block-dropdown";
+import { EditorContext } from "./editor.client";
+
+export function EditorMenuFixed() {
+  const { editor, extensions } = useContext(EditorContext);
+
+  return (
+    <div className="border-input bg-muted/30 z-10 flex items-center gap-3 overflow-auto border-b p-2">
+      {extensions.undoRedo && (
+        <>
+          <div className="flex items-center gap-1">
+            <Button
+              onClick={() => editor.commands.undo()}
+              disabled={!editor?.can().undo()}
+              type="button"
+              aria-label="Undo"
+              size="icon"
+              className="p-2"
+              variant="outline"
+            >
+              <UndoIcon className="size-3.5" />
+            </Button>
+
+            <Button
+              onClick={() => editor.commands.redo()}
+              disabled={!editor?.can().redo()}
+              type="button"
+              aria-label="Redo"
+              size="icon"
+              className="p-2"
+              variant="outline"
+            >
+              <RedoIcon className="size-3.5" />
+            </Button>
+          </div>
+
+          <Separator orientation="vertical" className="h-8" />
+        </>
+      )}
+
+      <BlockDropdown />
+
+      {extensions.bold || extensions.italic || extensions.underline || extensions.strike ? (
+        <>
+          <div className="flex items-center gap-1">
+            {extensions.bold && (
+              <Button
+                type="button"
+                size="icon"
+                variant={editor?.isActive("bold") ? "secondary" : "outline"}
+                onClick={() => editor.chain().focus().toggleBold().run()}
+                className="border"
+              >
+                <BoldIcon className="h-3.5 w-3.5" />
+              </Button>
+            )}
+
+            {extensions.italic && (
+              <Button
+                type="button"
+                size="icon"
+                variant={editor?.isActive("italic") ? "secondary" : "outline"}
+                onClick={() => editor.chain().focus().toggleItalic().run()}
+                className="border"
+              >
+                <ItalicIcon className="size-3.5" />
+              </Button>
+            )}
+
+            {extensions.underline && (
+              <Button
+                type="button"
+                size="icon"
+                variant={editor?.isActive("underline") ? "secondary" : "outline"}
+                onClick={() => editor.chain().focus().toggleUnderline().run()}
+                className="border"
+              >
+                <UnderlineIcon className="size-3.5" />
+              </Button>
+            )}
+
+            {extensions.strike && (
+              <Button
+                type="button"
+                size="icon"
+                variant={editor?.isActive("strike") ? "secondary" : "outline"}
+                onClick={() => editor.chain().focus().toggleStrike().run()}
+                className="border"
+              >
+                <StrikethroughIcon className="size-3.5" />
+              </Button>
+            )}
+          </div>
+
+          <Separator orientation="vertical" className="h-8" />
+        </>
+      ) : null}
+
+      {extensions.color || extensions.highlight ? (
+        <div className="flex items-center gap-1">
+          {extensions.color && (
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button size="icon" variant="outline">
+                  <BaselineIcon className="size-3.5" />
+                </Button>
+              </PopoverTrigger>
+
+              <PopoverContent className="w-fit p-0">
+                <ColorPicker
+                  onValueChange={(color) => editor.chain().focus().setColor(color).run()}
+                />
+              </PopoverContent>
+            </Popover>
+          )}
+
+          {extensions.highlight && (
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button size="icon" variant="outline" disabled={!editor?.can().setHighlight()}>
+                  <PaintBucketIcon className="size-3.5" />
+                </Button>
+              </PopoverTrigger>
+
+              <PopoverContent className="w-fit p-0">
+                <ColorPicker
+                  onValueChange={(color) => editor.chain().focus().setHighlight({ color }).run()}
+                />
+              </PopoverContent>
+            </Popover>
+          )}
+
+          <Button
+            type="button"
+            size="icon"
+            variant="outline"
+            className="border"
+            onClick={() => {
+              editor.commands.unsetColor();
+              editor.commands.unsetHighlight();
+            }}
+          >
+            <EraserIcon className="h-4 w-4" />
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/editor/components/spinner.tsx

@@ -17,12 +17,12 @@ export function SpinnerComponent({ ref, className, ...props }: React.SVGProps<SV
         r="10"
         stroke="currentColor"
         strokeWidth="4"
-      ></circle>
+      />
       <path
         className="opacity-75"
         fill="currentColor"
         d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      ></path>
+      />
     </svg>
   );
 }

package/src/components/editor/lib/constants.ts

@@ -0,0 +1,109 @@
+import Blockquote from "@tiptap/extension-blockquote";
+import Bold from "@tiptap/extension-bold";
+import Document from "@tiptap/extension-document";
+import HardBreak from "@tiptap/extension-hard-break";
+import Heading from "@tiptap/extension-heading";
+import Highlight from "@tiptap/extension-highlight";
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import Image from "@tiptap/extension-image";
+import Italic from "@tiptap/extension-italic";
+import Link from "@tiptap/extension-link";
+import { BulletList, ListItem, ListKeymap, OrderedList } from "@tiptap/extension-list";
+import Paragraph from "@tiptap/extension-paragraph";
+import Strike from "@tiptap/extension-strike";
+import Text from "@tiptap/extension-text";
+import { Color, TextStyle } from "@tiptap/extension-text-style";
+import Underline from "@tiptap/extension-underline";
+import { Dropcursor, Gapcursor, TrailingNode, UndoRedo } from "@tiptap/extensions";
+import { createExtensionConfig } from "./extensions";
+
+/**
+ * Editor extensions map
+ */
+export const EDITOR_EXTENSIONS = {
+  /**
+   * Nodes
+   */
+  blockquote: Blockquote,
+  document: Document,
+  hardBreak: HardBreak,
+  heading: Heading,
+  horizontalRule: HorizontalRule,
+  listItem: ListItem,
+  orderedList: OrderedList,
+  bulletList: BulletList,
+  paragraph: Paragraph,
+  text: Text,
+  image: Image,
+  /**
+   * Marks
+   */
+  bold: Bold,
+  italic: Italic,
+  link: Link,
+  strike: Strike,
+  underline: Underline,
+  highlight: Highlight,
+  /**
+   * Extensions
+   */
+  dropcursor: Dropcursor,
+  gapcursor: Gapcursor,
+  undoRedo: UndoRedo,
+  listKeymap: ListKeymap,
+  trailingNode: TrailingNode,
+  textStyle: TextStyle,
+  color: Color,
+};
+
+export type EditorExtensions = typeof EDITOR_EXTENSIONS;
+
+/**
+ * Editor extensions keys
+ */
+export const EDITOR_EXTENSIONS_KEYS = Object.keys(EDITOR_EXTENSIONS);
+export type EditorExtensionsKeys = keyof typeof EDITOR_EXTENSIONS;
+
+/**
+ * Editor extensions values
+ */
+export const EDITOR_EXTENSIONS_VALUES = Object.values(EDITOR_EXTENSIONS);
+
+/**
+ * Editor extensions config
+ */
+export const EDITOR_EXTENSIONS_CONFIG = [
+  /**
+   * Nodes
+   */
+  createExtensionConfig("blockquote"),
+  createExtensionConfig("document"),
+  createExtensionConfig("hardBreak"),
+  createExtensionConfig("heading"),
+  createExtensionConfig("horizontalRule"),
+  createExtensionConfig("listItem"),
+  createExtensionConfig("orderedList"),
+  createExtensionConfig("bulletList"),
+  createExtensionConfig("paragraph"),
+  createExtensionConfig("text"),
+  createExtensionConfig("image", { allowBase64: false }),
+  /**
+   * Marks
+   */
+  createExtensionConfig("bold"),
+  createExtensionConfig("italic"),
+  createExtensionConfig("link"),
+  createExtensionConfig("strike"),
+  createExtensionConfig("underline"),
+  createExtensionConfig("highlight", { multicolor: true }),
+  /**
+   * Extensions
+   */
+  createExtensionConfig("dropcursor"),
+  createExtensionConfig("gapcursor"),
+  createExtensionConfig("undoRedo"),
+  createExtensionConfig("listKeymap"),
+  createExtensionConfig("trailingNode"),
+  createExtensionConfig("textStyle"),
+  createExtensionConfig("color"),
+];