@tulip-systems/core 0.4.1 → 0.5.0

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"),
+];

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

@@ -0,0 +1,195 @@
+import { BlockquoteOptions } from "@tiptap/extension-blockquote";
+import { BoldOptions } from "@tiptap/extension-bold";
+import { HardBreakOptions } from "@tiptap/extension-hard-break";
+import { HeadingOptions } from "@tiptap/extension-heading";
+import { HighlightOptions } from "@tiptap/extension-highlight";
+import { HorizontalRuleOptions } from "@tiptap/extension-horizontal-rule";
+import { ImageOptions } from "@tiptap/extension-image";
+import { ItalicOptions } from "@tiptap/extension-italic";
+import { LinkOptions } from "@tiptap/extension-link";
+import {
+  BulletListOptions,
+  ListItemOptions,
+  ListKeymapOptions,
+  OrderedListOptions,
+} from "@tiptap/extension-list";
+import { ParagraphOptions } from "@tiptap/extension-paragraph";
+import { StrikeOptions } from "@tiptap/extension-strike";
+import { ColorOptions, TextStyleOptions } from "@tiptap/extension-text-style";
+import { UnderlineOptions } from "@tiptap/extension-underline";
+import { DropcursorOptions, TrailingNodeOptions, UndoRedoOptions } from "@tiptap/extensions";
+import { Extension } from "@tiptap/react";
+import deepmerge from "deepmerge";
+import {
+  EDITOR_EXTENSIONS,
+  EDITOR_EXTENSIONS_CONFIG,
+  EDITOR_EXTENSIONS_KEYS,
+  EditorExtensions,
+} from "./constants";
+
+/**
+ * Editor extensions defaults
+ */
+/**
+ * Editor extensions map
+ */
+export type EditorExtensionsConfig = {
+  /**
+   * Nodes
+   */
+  blockquote: Partial<BlockquoteOptions> | boolean;
+  bulletList: Partial<BulletListOptions> | boolean;
+  document: boolean;
+  hardBreak: Partial<HardBreakOptions> | boolean;
+  heading: Partial<HeadingOptions> | boolean;
+  horizontalRule: Partial<HorizontalRuleOptions> | boolean;
+  listItem: Partial<ListItemOptions> | boolean;
+  orderedList: Partial<OrderedListOptions> | boolean;
+  paragraph: Partial<ParagraphOptions> | boolean;
+  text: Partial<TextStyleOptions> | boolean;
+  image: Partial<ImageOptions> | boolean;
+  // /**
+  //  * Marks
+  //  */
+  bold: Partial<BoldOptions> | boolean;
+  italic: Partial<ItalicOptions> | boolean;
+  link: Partial<LinkOptions> | boolean;
+  strike: Partial<StrikeOptions> | boolean;
+  underline: Partial<UnderlineOptions> | boolean;
+  highlight: Partial<HighlightOptions> | boolean;
+  /**
+   * Extensions
+   */
+  dropcursor: Partial<DropcursorOptions> | boolean;
+  gapcursor: boolean;
+  undoRedo: Partial<UndoRedoOptions> | boolean;
+  listKeymap: Partial<ListKeymapOptions> | boolean;
+  trailingNode: Partial<TrailingNodeOptions> | boolean;
+  textStyle: Partial<TextStyleOptions> | boolean;
+  color: Partial<ColorOptions> | boolean;
+};
+
+/**
+ * Create extension config
+ * @param name
+ * @param defaultOptions
+ * @returns
+ */
+export function createExtensionConfig<TName extends keyof EditorExtensionsConfig>(
+  name: TName,
+  defaultOptions: Partial<Exclude<EditorExtensionsConfig[TName], boolean>> = {},
+) {
+  return {
+    name,
+    configure: (options: EditorExtensionsConfig[TName]) => {
+      // Get extension
+      const extension = EDITOR_EXTENSIONS[name];
+
+      // If no options or no extension, return undefined
+      if (!options || !extension) return undefined;
+
+      // If no options are provided, return extension
+      if (typeof options === "boolean") return extension.configure(defaultOptions);
+
+      const extensionOptions = deepmerge(defaultOptions, options as object);
+
+      // If no options are provided, return extension else configure
+      return extension.configure(extensionOptions);
+    },
+  };
+}
+
+/**
+ *  Editor extensions config to extensions
+ */
+export function editorExtensionsConfigToExtensions(extensions?: Partial<EditorExtensionsConfig>) {
+  return EDITOR_EXTENSIONS_CONFIG.flatMap(({ name, configure }) => {
+    // Get the extension config
+    const value = extensions?.[name];
+
+    // if no value is provided, return extension
+    if (value === undefined) return configure(true) as Extension;
+
+    // If value is boolean, return extension
+    return configure(value as any) as Extension;
+  });
+}
+
+/**
+ * Editor extensions config result
+ */
+export function flattenEditorExtensionsConfig(
+  extensions?: Partial<EditorExtensionsConfig>,
+): EditorExtensionsConfigResult {
+  return EDITOR_EXTENSIONS_KEYS.reduce((acc, key) => {
+    const value = extensions?.[key as keyof EditorExtensionsConfig];
+
+    if (value === undefined) {
+      return {
+        ...acc,
+        [key]: true,
+      };
+    }
+
+    return {
+      ...acc,
+      [key]: typeof value === "boolean" ? value : true,
+    };
+  }, {} as EditorExtensionsConfigResult);
+}
+
+export type EditorExtensionsConfigResult = Record<keyof EditorExtensions, boolean>;
+
+// const { uploadImage } = useUploadEditor();
+// StarterKit,
+// Underline,
+// Link,
+// TextStyle,
+// Color,
+// Highlight.configure({ multicolor: true }),
+// Image.configure({
+//   allowBase64: false,
+// }),
+// FileHandler.configure({
+//   allowedMimeTypes: ["image/png", "image/jpeg", "image/gif", "image/webp"],
+//   onDrop: (currentEditor, files, pos) => {
+//     files.forEach((file) => {
+//       const fileReader = new FileReader();
+
+//       fileReader.readAsArrayBuffer(file);
+//       fileReader.onload = async () => {
+//         const response = await uploadImage(file);
+//         if (!response) return;
+
+//         currentEditor
+//           .chain()
+//           .insertContentAt(pos, {
+//             type: "image",
+//             attrs: { src: response.url },
+//           })
+//           .focus()
+//           .run();
+//       };
+//     });
+//   },
+//   onPaste: (currentEditor, files) => {
+//     files.forEach((file) => {
+//       const fileReader = new FileReader();
+
+//       fileReader.readAsArrayBuffer(file);
+//       fileReader.onload = async () => {
+//         const response = await uploadImage(file);
+//         if (!response) return;
+
+//         currentEditor
+//           .chain()
+//           .insertContentAt(currentEditor.state.selection.anchor, {
+//             type: "image",
+//             attrs: { src: response.url },
+//           })
+//           .focus()
+//           .run();
+//       };
+//     });
+//   },
+// }),

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

@@ -1,17 +1,17 @@
 import { generateHTML, generateJSON } from "@tiptap/html";
-import StarterKit from "@tiptap/starter-kit";
+import { EDITOR_EXTENSIONS_VALUES } from "./constants";
 import { EditorJSONContent } from "./types";
 
 /**
  * Convert text to editor content
  */
 export function convertHTMLToEditorContent(html: string): EditorJSONContent {
-  return generateJSON(html, [StarterKit]);
+  return generateJSON(html, EDITOR_EXTENSIONS_VALUES);
 }
 
 /**
  * Convert editor content to text
  */
 export function convertEditorContentToHTML(content: EditorJSONContent): string {
-  return generateHTML(content, [StarterKit]);
+  return generateHTML(content, EDITOR_EXTENSIONS_VALUES);
 }

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

@@ -0,0 +1,5 @@
+import { cva } from "class-variance-authority";
+
+export const editorProseVariants = cva(
+  "prose dark:prose-invert prose-a:text-primary prose-li:marker:text-primary",
+);

package/src/components/entry.client.ts

@@ -2,10 +2,8 @@
  * Components editor
  */
 export * from "./editor/components/content.client";
-export * from "./editor/components/fixed-menu.client";
-export * from "./editor/context.client";
-export * from "./editor/index.client";
-export * from "./editor/preview.client";
+export * from "./editor/components/editor.client";
+export * from "./editor/components/menu-fixed.client";
 
 /**
  * Components headers

package/src/components/header/top-bar.client.tsx

@@ -26,7 +26,7 @@ export type TopbarProps = {
 
 export function Topbar({ children }: TopbarProps) {
   return (
-    <nav className="flex h-[var(--header-top-bar-height)] items-center justify-between overflow-x-auto border-b">
+    <nav className="flex h-(--header-top-bar-height) items-center justify-between overflow-x-auto border-b">
       <Indicator />
 
       {children}

package/src/components/layouts/admin-content.client.tsx

@@ -9,7 +9,7 @@ export function AdminContent({ children, className, ...props }: ComponentProps<t
   const { isMobile, open } = useSidebar();
 
   return (
-    <ScrollArea {...props} className={cn("h-[100dvh] basis-full", className)}>
+    <ScrollArea {...props} className={cn("h-dvh basis-full", className)}>
       <div
         className={cn(
           "h-full max-w-[100vw]",