@collabchron/notiq 1.1.3 → 1.1.4

package/dist/index.d.mts

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+import { ElementFormatType } from 'lexical';
+import { HistoryState } from '@lexical/react/LexicalHistoryPlugin';
+
+/**
+ * Configuration for AI features in the Notiq editor.
+ */
+interface AIConfig {
+    /**
+     * The API endpoint for AI completions. Defaults to "/api/ai".
+     */
+    apiEndpoint?: string;
+}
+/**
+ * Hook to access the current AI configuration.
+ */
+declare const useAI: () => AIConfig;
+/**
+ * Provider component for AI configuration.
+ */
+declare const AIProvider: ({ config, children }: {
+    config?: AIConfig;
+    children: ReactNode;
+}) => React__default.JSX.Element;
+
+interface UploadResponse {
+    url: string;
+}
+/**
+ * A function that handles file uploads.
+ * @param file The file to upload.
+ * @param onProgress Callback to report upload progress (0-100).
+ * @returns A promise that resolves to an object containing the uploaded file's URL.
+ */
+type UploadHandler = (file: File, onProgress?: (progress: number) => void) => Promise<UploadResponse>;
+interface UploadConfig {
+    /**
+     * Custom upload handler. If not provided, the editor will attempt to use its default
+     * (which currently depends on EdgeStore if configured).
+     */
+    uploadHandler?: UploadHandler;
+}
+/**
+ * Hook to access the current Upload configuration.
+ */
+declare const useUpload: () => UploadConfig | undefined;
+/**
+ * Provider component for Upload configuration.
+ */
+declare const UploadProvider: ({ config, children }: {
+    config?: UploadConfig;
+    children: ReactNode;
+}) => React__default.JSX.Element;
+
+type ToolbarItem = "undo" | "redo" | "block-format" | "font-family" | "font-size" | "bold" | "italic" | "underline" | "code" | "link" | "color" | "bg-color" | "text-format" | "insert" | "align" | "speech" | "template" | "download" | "export-md" | "export-pdf" | "separator";
+type ToolbarConfig = {
+    items?: ToolbarItem[];
+    className?: string;
+    itemClassName?: string;
+    activeItemClassName?: string;
+    mobileClassName?: string;
+    mobileItemClassName?: string;
+};
+declare function Editor({ isEditable, content, aiConfig, uploadConfig, toolbarConfig, }: {
+    isEditable: boolean;
+    content?: unknown;
+    aiConfig?: AIConfig;
+    uploadConfig?: UploadConfig;
+    toolbarConfig?: ToolbarConfig;
+}): React__default.JSX.Element;
+
+declare const MIN_ALLOWED_FONT_SIZE = 8;
+declare const MAX_ALLOWED_FONT_SIZE = 72;
+declare const DEFAULT_FONT_SIZE = 15;
+declare const rootTypeToRootName: {
+    root: string;
+    table: string;
+};
+declare const blockTypeToBlockName: {
+    bullet: string;
+    check: string;
+    code: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+    number: string;
+    paragraph: string;
+    quote: string;
+};
+declare const INITIAL_TOOLBAR_STATE: {
+    bgColor: string;
+    blockType: keyof typeof blockTypeToBlockName;
+    canRedo: boolean;
+    canUndo: boolean;
+    codeLanguage: string;
+    elementFormat: ElementFormatType;
+    fontColor: string;
+    fontFamily: string;
+    fontSize: string;
+    fontSizeInputValue: string;
+    isBold: boolean;
+    isCode: boolean;
+    isImageCaption: boolean;
+    isItalic: boolean;
+    isLink: boolean;
+    isRTL: boolean;
+    isStrikethrough: boolean;
+    isSubscript: boolean;
+    isSuperscript: boolean;
+    isUnderline: boolean;
+    isLowercase: boolean;
+    isUppercase: boolean;
+    isCapitalize: boolean;
+    rootType: keyof typeof rootTypeToRootName;
+};
+type ToolbarState = typeof INITIAL_TOOLBAR_STATE;
+type ToolbarStateKey = keyof ToolbarState;
+type ToolbarStateValue<Key extends ToolbarStateKey> = ToolbarState[Key];
+type ContextShape$1 = {
+    toolbarState: ToolbarState;
+    updateToolbarState<Key extends ToolbarStateKey>(key: Key, value: ToolbarStateValue<Key>): void;
+};
+declare const ToolbarContext: ({ children, }: {
+    children: ReactNode;
+}) => React__default.JSX.Element;
+declare const useToolbarState: () => ContextShape$1;
+
+type ContextShape = {
+    historyState?: HistoryState;
+};
+declare const SharedHistoryContext: ({ children, }: {
+    children: ReactNode;
+}) => React.JSX.Element;
+declare const useSharedHistoryContext: () => ContextShape;
+
+/**
+ * A Tailwind CSS plugin that adds Notiq's custom theme variables and styles.
+ */
+declare const notiqPlugin: any;
+
+export { type AIConfig, AIProvider, type ContextShape$1 as ContextShape, DEFAULT_FONT_SIZE, Editor, MAX_ALLOWED_FONT_SIZE, MIN_ALLOWED_FONT_SIZE, SharedHistoryContext, type ToolbarConfig, ToolbarContext, type ToolbarItem, type UploadConfig, type UploadHandler, UploadProvider, type UploadResponse, blockTypeToBlockName, notiqPlugin, useAI, useSharedHistoryContext, useToolbarState, useUpload };

package/dist/index.d.ts

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+import { ElementFormatType } from 'lexical';
+import { HistoryState } from '@lexical/react/LexicalHistoryPlugin';
+
+/**
+ * Configuration for AI features in the Notiq editor.
+ */
+interface AIConfig {
+    /**
+     * The API endpoint for AI completions. Defaults to "/api/ai".
+     */
+    apiEndpoint?: string;
+}
+/**
+ * Hook to access the current AI configuration.
+ */
+declare const useAI: () => AIConfig;
+/**
+ * Provider component for AI configuration.
+ */
+declare const AIProvider: ({ config, children }: {
+    config?: AIConfig;
+    children: ReactNode;
+}) => React__default.JSX.Element;
+
+interface UploadResponse {
+    url: string;
+}
+/**
+ * A function that handles file uploads.
+ * @param file The file to upload.
+ * @param onProgress Callback to report upload progress (0-100).
+ * @returns A promise that resolves to an object containing the uploaded file's URL.
+ */
+type UploadHandler = (file: File, onProgress?: (progress: number) => void) => Promise<UploadResponse>;
+interface UploadConfig {
+    /**
+     * Custom upload handler. If not provided, the editor will attempt to use its default
+     * (which currently depends on EdgeStore if configured).
+     */
+    uploadHandler?: UploadHandler;
+}
+/**
+ * Hook to access the current Upload configuration.
+ */
+declare const useUpload: () => UploadConfig | undefined;
+/**
+ * Provider component for Upload configuration.
+ */
+declare const UploadProvider: ({ config, children }: {
+    config?: UploadConfig;
+    children: ReactNode;
+}) => React__default.JSX.Element;
+
+type ToolbarItem = "undo" | "redo" | "block-format" | "font-family" | "font-size" | "bold" | "italic" | "underline" | "code" | "link" | "color" | "bg-color" | "text-format" | "insert" | "align" | "speech" | "template" | "download" | "export-md" | "export-pdf" | "separator";
+type ToolbarConfig = {
+    items?: ToolbarItem[];
+    className?: string;
+    itemClassName?: string;
+    activeItemClassName?: string;
+    mobileClassName?: string;
+    mobileItemClassName?: string;
+};
+declare function Editor({ isEditable, content, aiConfig, uploadConfig, toolbarConfig, }: {
+    isEditable: boolean;
+    content?: unknown;
+    aiConfig?: AIConfig;
+    uploadConfig?: UploadConfig;
+    toolbarConfig?: ToolbarConfig;
+}): React__default.JSX.Element;
+
+declare const MIN_ALLOWED_FONT_SIZE = 8;
+declare const MAX_ALLOWED_FONT_SIZE = 72;
+declare const DEFAULT_FONT_SIZE = 15;
+declare const rootTypeToRootName: {
+    root: string;
+    table: string;
+};
+declare const blockTypeToBlockName: {
+    bullet: string;
+    check: string;
+    code: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+    number: string;
+    paragraph: string;
+    quote: string;
+};
+declare const INITIAL_TOOLBAR_STATE: {
+    bgColor: string;
+    blockType: keyof typeof blockTypeToBlockName;
+    canRedo: boolean;
+    canUndo: boolean;
+    codeLanguage: string;
+    elementFormat: ElementFormatType;
+    fontColor: string;
+    fontFamily: string;
+    fontSize: string;
+    fontSizeInputValue: string;
+    isBold: boolean;
+    isCode: boolean;
+    isImageCaption: boolean;
+    isItalic: boolean;
+    isLink: boolean;
+    isRTL: boolean;
+    isStrikethrough: boolean;
+    isSubscript: boolean;
+    isSuperscript: boolean;
+    isUnderline: boolean;
+    isLowercase: boolean;
+    isUppercase: boolean;
+    isCapitalize: boolean;
+    rootType: keyof typeof rootTypeToRootName;
+};
+type ToolbarState = typeof INITIAL_TOOLBAR_STATE;
+type ToolbarStateKey = keyof ToolbarState;
+type ToolbarStateValue<Key extends ToolbarStateKey> = ToolbarState[Key];
+type ContextShape$1 = {
+    toolbarState: ToolbarState;
+    updateToolbarState<Key extends ToolbarStateKey>(key: Key, value: ToolbarStateValue<Key>): void;
+};
+declare const ToolbarContext: ({ children, }: {
+    children: ReactNode;
+}) => React__default.JSX.Element;
+declare const useToolbarState: () => ContextShape$1;
+
+type ContextShape = {
+    historyState?: HistoryState;
+};
+declare const SharedHistoryContext: ({ children, }: {
+    children: ReactNode;
+}) => React.JSX.Element;
+declare const useSharedHistoryContext: () => ContextShape;
+
+/**
+ * A Tailwind CSS plugin that adds Notiq's custom theme variables and styles.
+ */
+declare const notiqPlugin: any;
+
+export { type AIConfig, AIProvider, type ContextShape$1 as ContextShape, DEFAULT_FONT_SIZE, Editor, MAX_ALLOWED_FONT_SIZE, MIN_ALLOWED_FONT_SIZE, SharedHistoryContext, type ToolbarConfig, ToolbarContext, type ToolbarItem, type UploadConfig, type UploadHandler, UploadProvider, type UploadResponse, blockTypeToBlockName, notiqPlugin, useAI, useSharedHistoryContext, useToolbarState, useUpload };

package/dist/index.js

@@ -57547,7 +57547,7 @@ function Core({
     });
     return unregister;
   }, [editor]);
-  return /* @__PURE__ */ React.createElement("div", { className: "notiq-editor w-full h-full" }, isEditable && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, isEditable && /* @__PURE__ */ React.createElement(
     ToolbarPlugin2,
     {
       editor,
@@ -57557,7 +57557,8 @@ function Core({
       toolbarConfig
     }
   ), isEditable && /* @__PURE__ */ React.createElement(ContentAnalyticsPlugin, null), /* @__PURE__ */ React.createElement("div", { className: cn(
-    "flex justify-center w-full transition-all duration-300",
+    "flex justify-center w-full min-h-screen transition-all duration-300",
+    "dark:md:from-gray-900/50 dark:md:to-gray-800/30",
     "pt-20 md:pt-10"
   ) }, /* @__PURE__ */ React.createElement(
     import_framer_motion9.motion.div,
@@ -57567,11 +57568,11 @@ function Core({
         "prose prose-lg dark:prose-invert lg:prose-xl leading-relaxed",
         "md:rounded-2xl md:shadow-2xl md:shadow-black/5",
         "md:dark:shadow-black/20",
-        "bg-notiq-background text-notiq-foreground",
+        "bg-white dark:bg-gray-900",
         "md:border md:border-gray-200/50 dark:md:border-gray-800/50"
       )
     },
-    /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 rounded-2xl overflow-hidden pointer-events-none" }, /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-br from-blue-50/10 via-transparent to-purple-50/10 dark:from-blue-900/5 dark:to-purple-900/5" }), /* @__PURE__ */ React.createElement("div", { className: "absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent dark:via-gray-700" })),
+    /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 rounded-2xl overflow-hidden pointer-events-none" }, /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-br from-blue-50/30 via-transparent to-purple-50/30 dark:from-blue-900/10 dark:to-purple-900/10" }), /* @__PURE__ */ React.createElement("div", { className: "absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent dark:via-gray-700" })),
     /* @__PURE__ */ React.createElement(
       import_LexicalRichTextPlugin4.RichTextPlugin,
       {
@@ -57583,9 +57584,9 @@ function Core({
             className: cn(
               "editor-content relative z-20 outline-none",
               "px-4 md:px-12 py-8 md:py-16",
-              "min-h-[400px]",
+              "min-h-[80vh] md:min-h-[70vh]",
               "focus:outline-none focus:ring-0",
-              "text-notiq-foreground selection:bg-blue-100 dark:selection:bg-blue-900/30",
+              "text-foreground selection:bg-blue-100 dark:selection:bg-blue-900/30",
               "font-['Inter',_system-ui,_sans-serif] antialiased",
               "leading-relaxed tracking-wide",
               "transition-all duration-200 ease-in-out",
@@ -57678,7 +57679,7 @@ function Editor({
     editable: isEditable
   };
   console.log("Editor content:", content);
-  return /* @__PURE__ */ import_react96.default.createElement(import_LexicalComposer.LexicalComposer, { initialConfig }, /* @__PURE__ */ import_react96.default.createElement(AIProvider, { config: aiConfig }, /* @__PURE__ */ import_react96.default.createElement(UploadProvider, { config: uploadConfig }, /* @__PURE__ */ import_react96.default.createElement(SharedHistoryContext, null, /* @__PURE__ */ import_react96.default.createElement(ToolbarContext, null, /* @__PURE__ */ import_react96.default.createElement(Core, { toolbarConfig }))))));
+  return /* @__PURE__ */ import_react96.default.createElement("div", { className: "notiq-root" }, /* @__PURE__ */ import_react96.default.createElement(import_LexicalComposer.LexicalComposer, { initialConfig }, /* @__PURE__ */ import_react96.default.createElement(AIProvider, { config: aiConfig }, /* @__PURE__ */ import_react96.default.createElement(UploadProvider, { config: uploadConfig }, /* @__PURE__ */ import_react96.default.createElement(SharedHistoryContext, null, /* @__PURE__ */ import_react96.default.createElement(ToolbarContext, null, /* @__PURE__ */ import_react96.default.createElement(Core, { toolbarConfig })))))));
 }
 
 // src/index.ts
@@ -57706,7 +57707,7 @@ var u = g2;
 // src/styles/tailwind-plugin.ts
 var notiqPlugin = u(function({ addBase, theme: theme2 }) {
   addBase({
-    ".notiq-editor": {
+    ":root": {
       "--background": "oklch(1 0 0)",
       "--foreground": "oklch(0.145 0 0)",
       "--card": "oklch(1 0 0)",
@@ -57746,7 +57747,7 @@ var notiqPlugin = u(function({ addBase, theme: theme2 }) {
       "--background-pink": "#f4dfeb",
       "--background-red": "#fbe4e4"
     },
-    ".dark .notiq-editor, .notiq-editor.dark": {
+    ".dark": {
       "--background": "oklch(0.145 0 0)",
       "--foreground": "oklch(0.985 0 0)",
       "--card": "oklch(0.145 0 0)",
@@ -57832,9 +57833,6 @@ var notiqPlugin = u(function({ addBase, theme: theme2 }) {
     }
   }
 });
-
-// src/index.ts
-var import_notiq = require("./styles/notiq.css");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AIProvider,

package/dist/index.mjs

@@ -1492,7 +1492,7 @@ function Core({
     });
     return unregister;
   }, [editor]);
-  return /* @__PURE__ */ React.createElement("div", { className: "notiq-editor w-full h-full" }, isEditable && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, isEditable && /* @__PURE__ */ React.createElement(
     ToolbarPlugin,
     {
       editor,
@@ -1502,7 +1502,8 @@ function Core({
       toolbarConfig
     }
   ), isEditable && /* @__PURE__ */ React.createElement(ContentAnalyticsPlugin, null), /* @__PURE__ */ React.createElement("div", { className: cn(
-    "flex justify-center w-full transition-all duration-300",
+    "flex justify-center w-full min-h-screen transition-all duration-300",
+    "dark:md:from-gray-900/50 dark:md:to-gray-800/30",
     "pt-20 md:pt-10"
   ) }, /* @__PURE__ */ React.createElement(
     motion.div,
@@ -1512,11 +1513,11 @@ function Core({
         "prose prose-lg dark:prose-invert lg:prose-xl leading-relaxed",
         "md:rounded-2xl md:shadow-2xl md:shadow-black/5",
         "md:dark:shadow-black/20",
-        "bg-notiq-background text-notiq-foreground",
+        "bg-white dark:bg-gray-900",
         "md:border md:border-gray-200/50 dark:md:border-gray-800/50"
       )
     },
-    /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 rounded-2xl overflow-hidden pointer-events-none" }, /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-br from-blue-50/10 via-transparent to-purple-50/10 dark:from-blue-900/5 dark:to-purple-900/5" }), /* @__PURE__ */ React.createElement("div", { className: "absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent dark:via-gray-700" })),
+    /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 rounded-2xl overflow-hidden pointer-events-none" }, /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-br from-blue-50/30 via-transparent to-purple-50/30 dark:from-blue-900/10 dark:to-purple-900/10" }), /* @__PURE__ */ React.createElement("div", { className: "absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent dark:via-gray-700" })),
     /* @__PURE__ */ React.createElement(
       RichTextPlugin,
       {
@@ -1528,9 +1529,9 @@ function Core({
             className: cn(
               "editor-content relative z-20 outline-none",
               "px-4 md:px-12 py-8 md:py-16",
-              "min-h-[400px]",
+              "min-h-[80vh] md:min-h-[70vh]",
               "focus:outline-none focus:ring-0",
-              "text-notiq-foreground selection:bg-blue-100 dark:selection:bg-blue-900/30",
+              "text-foreground selection:bg-blue-100 dark:selection:bg-blue-900/30",
               "font-['Inter',_system-ui,_sans-serif] antialiased",
               "leading-relaxed tracking-wide",
               "transition-all duration-200 ease-in-out",
@@ -1620,7 +1621,7 @@ function Editor({
     editable: isEditable
   };
   console.log("Editor content:", content);
-  return /* @__PURE__ */ React3.createElement(LexicalComposer, { initialConfig }, /* @__PURE__ */ React3.createElement(AIProvider, { config: aiConfig }, /* @__PURE__ */ React3.createElement(UploadProvider, { config: uploadConfig }, /* @__PURE__ */ React3.createElement(SharedHistoryContext, null, /* @__PURE__ */ React3.createElement(ToolbarContext, null, /* @__PURE__ */ React3.createElement(Core, { toolbarConfig }))))));
+  return /* @__PURE__ */ React3.createElement("div", { className: "notiq-root" }, /* @__PURE__ */ React3.createElement(LexicalComposer, { initialConfig }, /* @__PURE__ */ React3.createElement(AIProvider, { config: aiConfig }, /* @__PURE__ */ React3.createElement(UploadProvider, { config: uploadConfig }, /* @__PURE__ */ React3.createElement(SharedHistoryContext, null, /* @__PURE__ */ React3.createElement(ToolbarContext, null, /* @__PURE__ */ React3.createElement(Core, { toolbarConfig })))))));
 }
 
 // src/styles/tailwind-plugin.ts
@@ -1642,7 +1643,7 @@ var u = g;
 // src/styles/tailwind-plugin.ts
 var notiqPlugin = u(function({ addBase, theme: theme2 }) {
   addBase({
-    ".notiq-editor": {
+    ":root": {
       "--background": "oklch(1 0 0)",
       "--foreground": "oklch(0.145 0 0)",
       "--card": "oklch(1 0 0)",
@@ -1682,7 +1683,7 @@ var notiqPlugin = u(function({ addBase, theme: theme2 }) {
       "--background-pink": "#f4dfeb",
       "--background-red": "#fbe4e4"
     },
-    ".dark .notiq-editor, .notiq-editor.dark": {
+    ".dark": {
       "--background": "oklch(0.145 0 0)",
       "--foreground": "oklch(0.985 0 0)",
       "--card": "oklch(0.145 0 0)",
@@ -1768,9 +1769,6 @@ var notiqPlugin = u(function({ addBase, theme: theme2 }) {
     }
   }
 });
-
-// src/index.ts
-import "./styles/notiq.css";
 export {
   AIProvider,
   DEFAULT_FONT_SIZE,