eddyter 1.3.37 → 1.3.39

package/README.md

@@ -298,6 +298,8 @@ Provides authentication and configuration context for the editor.
 - `children`: React nodes to render
 - `defaultFontFamilies`: Array of font names (optional)
 - `currentUser`: Current logged-in user for comments (optional) - Object with `id`, `name`, `email`, and optional `avatar`
+- `enableLinkPreview`: Enable automatic link preview on hover (optional, default: `true`)
+- `apiKey`: API key for authentication (optional) - Required only if you need link preview to work immediately without opening the editor first
 
 ### ConfigurableEditorWithAuth
 
@@ -439,6 +441,43 @@ function App() {
 }
 ```
 
+## Link Preview Feature
+
+Eddyter includes automatic link preview on hover. When users hover over links in content wrapped by `EditorProvider`, a preview popup shows the link's title, description, and image.
+
+### How It Works
+
+- **Inside the editor**: Link preview works automatically after authentication
+- **Outside the editor** (preview mode, saved content): Link preview works if the user has opened the editor at least once in the session (authentication stores the API key)
+
+### Preview-Only Scenarios
+
+If your application displays saved content without ever opening the editor (e.g., a read-only view), you need to pass `apiKey` to `EditorProvider`:
+
+```jsx
+import React from 'react';
+import { EditorProvider } from 'eddyter';
+import 'eddyter/style.css';
+
+function ContentPreviewPage({ savedHtml }) {
+  return (
+    <EditorProvider apiKey="your-api-key">
+      <div dangerouslySetInnerHTML={{ __html: savedHtml }} />
+    </EditorProvider>
+  );
+}
+```
+
+### Disabling Link Preview
+
+To disable link preview entirely:
+
+```jsx
+<EditorProvider enableLinkPreview={false}>
+  {/* Your content */}
+</EditorProvider>
+```
+
 ## License
 
 This project is licensed under the MIT License - see the LICENSE file for details.

package/dist/Provider/EditorProvider.d.ts

@@ -17,11 +17,16 @@ interface EditorContextType {
     verifyKey: (apiKey: string) => Promise<void>;
 }
 export declare const useEditor: () => EditorContextType;
+export declare const useEditorOptional: () => EditorContextType | undefined;
 interface EditorProviderProps {
     children: React.ReactNode;
     defaultFontFamilies?: string[];
     mentionUserList?: string[];
     currentUser?: CurrentUser;
+    /** Enable automatic link preview on hover for all content within provider (default: true) */
+    enableLinkPreview?: boolean;
+    /** API key for authentication - if provided, will auto-authenticate on mount */
+    apiKey?: string;
 }
 export declare const EditorProvider: React.FC<EditorProviderProps>;
 export {};

package/dist/api/ai/index.d.ts

@@ -3,8 +3,9 @@ type AiStreamType = {
     onMessage: (message: string) => void;
 };
 export declare const AiStream: ({ content, onMessage }: AiStreamType) => Promise<void>;
-export declare const AiJsonResponse: ({ content }: {
+export declare const AiJsonResponse: ({ content, apiKey }: {
     content: string;
+    apiKey?: string | undefined;
 }) => Promise<any>;
 export declare const AiImageResponse: ({ content }: {
     content: string;

package/dist/assets/style.css

@@ -959,6 +959,11 @@ video {
   height: 2rem !important;
 }
 
+.\!cteditor-size-\[16px\]{
+  width: 16px !important;
+  height: 16px !important;
+}
+
 .\!cteditor-size-\[18px\]{
   width: 18px !important;
   height: 18px !important;
@@ -1622,6 +1627,10 @@ video {
   align-items: flex-start;
 }
 
+.cteditor-items-end{
+  align-items: flex-end;
+}
+
 .cteditor-items-center{
   align-items: center;
 }
@@ -2159,21 +2168,11 @@ video {
   background-color: rgb(42 42 42 / var(--tw-bg-opacity, 1));
 }
 
-.cteditor-bg-\[\#2a3a2a\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(42 58 42 / var(--tw-bg-opacity, 1));
-}
-
 .cteditor-bg-\[\#2e1a1a\]{
   --tw-bg-opacity: 1;
   background-color: rgb(46 26 26 / var(--tw-bg-opacity, 1));
 }
 
-.cteditor-bg-\[\#3a2a2a\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(58 42 42 / var(--tw-bg-opacity, 1));
-}
-
 .cteditor-bg-\[hsl\(var\(--cteditorf47ac10b-popover\)\)\]{
   background-color: hsl(var(--cteditorf47ac10b-popover));
 }
@@ -4652,14 +4651,6 @@ body .EmojiPickerReact{
   top: 0.375rem;
 }
 
-.\[\&\>button\:hover\>span\]\:cteditor-bottom-full>button:hover>span{
-  bottom: 100%;
-}
-
-.\[\&\>button\:hover\>span\]\:cteditor-opacity-100>button:hover>span{
-  opacity: 1;
-}
-
 .\[\&\>button\>span\]\:cteditor-border>button>span{
   border-width: 1px;
 }
@@ -4669,11 +4660,6 @@ body .EmojiPickerReact{
   border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
 }
 
-.\[\&\>button\>svg\]\:cteditor-size-4>button>svg{
-  width: 1rem;
-  height: 1rem;
-}
-
 .\[\&\>button\>svg\]\:cteditor-shrink-0>button>svg{
   flex-shrink: 0;
 }
@@ -4798,14 +4784,9 @@ body .EmojiPickerReact{
   height: 1rem !important;
 }
 
-.\[\&\>svg\]\:\!cteditor-size-5>svg{
-  width: 1.25rem !important;
-  height: 1.25rem !important;
-}
-
-.\[\&\>svg\]\:\!cteditor-size-6>svg{
-  width: 1.5rem !important;
-  height: 1.5rem !important;
+.\[\&\>svg\]\:cteditor-size-3\.5>svg{
+  width: 0.875rem;
+  height: 0.875rem;
 }
 
 .\[\&\>svg\]\:cteditor-size-4>svg{
@@ -4818,14 +4799,6 @@ body .EmojiPickerReact{
   height: 1.25rem;
 }
 
-.\[\&\>svg\]\:cteditor-h-auto>svg{
-  height: auto;
-}
-
-.\[\&\>svg\]\:cteditor-w-5>svg{
-  width: 1.25rem;
-}
-
 .\[\&\>svg\]\:cteditor-shrink-0>svg{
   flex-shrink: 0;
 }
@@ -4834,11 +4807,6 @@ body .EmojiPickerReact{
   pointer-events: none;
 }
 
-.\[\&_svg\]\:\!cteditor-size-4 svg{
-  width: 1rem !important;
-  height: 1rem !important;
-}
-
 .\[\&_svg\]\:\!cteditor-size-5 svg{
   width: 1.25rem !important;
   height: 1.25rem !important;
@@ -5506,9 +5474,10 @@ body .EmojiPickerReact{
     margin-top: 0;
   }
 
-  /* Paragraph spacing - minimal for tight line spacing */
-  .PlaygroundEditorTheme__paragraph {
-    margin-bottom: 0;
+  /* Paragraph spacing - add spacing between paragraphs for readability */
+  /* This mimics standard web content spacing (like BBC, news sites, etc.) */
+  .PlaygroundEditorTheme__paragraph + .PlaygroundEditorTheme__paragraph {
+    margin-top: 1em;
   }
 
   /* Heading after paragraph needs extra space above - CKEditor style */
@@ -7140,74 +7109,7 @@ body .EmojiPickerReact{
     min-width: 200px;
     min-height: 150px;
   }
-}.floating-enhance-button {
-  position: absolute;
-  z-index: 10;
-  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  padding: 8px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-  transition: all 0.2s ease;
-  opacity: 0;
-  pointer-events: auto;
-  width: 32px;
-  height: 32px;
-}
-
-.floating-enhance-button:hover {
-  transform: scale(1.1);
-  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-  border-color: rgba(255, 255, 255, 0.2);
-}
-
-.floating-enhance-button:active {
-  transform: scale(0.95);
-}
-
-.floating-enhance-button svg {
-  width: 16px;
-  height: 16px;
-  color: #a78bfa;
-}
-
-.floating-enhance-button-tooltip {
-  position: absolute;
-  bottom: calc(100% + 8px);
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: #1f2937;
-  color: white;
-  padding: 6px 12px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-}
-
-.floating-enhance-button:hover .floating-enhance-button-tooltip {
-  opacity: 1;
-}
-
-/* Arrow for tooltip */
-.floating-enhance-button-tooltip::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border: 6px solid transparent;
-  border-top-color: #1f2937;
-}
-.link-editor {
+}.link-editor {
   display: flex;
   position: absolute;
   top: 0;

package/dist/components/ConfigurableEditorWithAuth.d.ts

@@ -19,6 +19,18 @@ interface ConfigurableEditorWithAuthProps {
     onBlur?: () => void;
     /** Called when editor height changes (React Native bridge) */
     onHeightChange?: (height: number) => void;
+    /**
+     * Editor mode:
+     * - "edit" (default): Full editor with all editing capabilities
+     * - "preview": Read-only preview with interactive features (link preview, etc.)
+     */
+    mode?: "edit" | "preview";
+    /** Additional class name for the preview container (only used in preview mode) */
+    previewClassName?: string;
+    /** Additional styles for the preview container (only used in preview mode) */
+    previewStyle?: React.CSSProperties;
+    /** Click handler for preview mode (useful for switching to edit mode) */
+    onPreviewClick?: () => void;
 }
 declare const ConfigurableEditorWithAuth: React.FC<ConfigurableEditorWithAuthProps>;
 export default ConfigurableEditorWithAuth;

package/dist/components/ContentPreview/index.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+/**
+ * ContentPreview - A component for displaying saved editor content with all interactive features
+ * (like link previews) enabled automatically.
+ *
+ * This is the recommended way to display content that was created with ConfigurableEditor.
+ * When used within EditorProvider, it automatically enables:
+ * - Link preview on hover (handled by EditorProvider)
+ * - Proper styling
+ * - All interactive features
+ *
+ * Note: Link preview is now automatically handled by EditorProvider.
+ * Just wrap your app with EditorProvider and link preview works everywhere!
+ *
+ * Usage:
+ * ```tsx
+ * import { ContentPreview, EditorProvider } from "@craxinno/cteditor";
+ *
+ * <EditorProvider>
+ *   <ConfigurableEditorWithAuth apiKey={apiKey} ... />
+ *   {/* Content preview also gets link preview automatically! *\/}
+ *   <ContentPreview content={savedHtmlContent} />
+ * </EditorProvider>
+ * ```
+ */
+interface ContentPreviewProps {
+    /** The HTML content to display (from editor's onChange) */
+    content: string;
+    /** Additional CSS class names */
+    className?: string;
+    /** Additional inline styles */
+    style?: React.CSSProperties;
+    /** Click handler for the content area */
+    onClick?: () => void;
+}
+export default function ContentPreview({ content, className, style, onClick, }: ContentPreviewProps): JSX.Element;
+export type { ContentPreviewProps };

package/dist/components/LinkPreviewHover/index.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+/**
+ * LinkPreviewHover - A standalone component that provides link preview on hover
+ * Can be used with any HTML container (not dependent on Lexical editor)
+ *
+ * Usage:
+ * <LinkPreviewHover containerRef={myContainerRef} apiKey={apiKey} />
+ *
+ * Or wrap content:
+ * <LinkPreviewHover apiKey={apiKey}>
+ *   <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
+ * </LinkPreviewHover>
+ */
+interface LinkPreviewHoverProps {
+    /** Reference to the container element to attach hover listeners */
+    containerRef?: React.RefObject<HTMLElement>;
+    /** Children to wrap (alternative to containerRef) */
+    children?: React.ReactNode;
+    /** API key for authentication */
+    apiKey?: string;
+    /** Delay before showing preview (ms) */
+    showDelay?: number;
+    /** Delay before hiding preview (ms) */
+    hideDelay?: number;
+    /** Enable/disable the preview */
+    enabled?: boolean;
+}
+export default function LinkPreviewHover({ containerRef, children, apiKey, showDelay, hideDelay, enabled, }: LinkPreviewHoverProps): JSX.Element;
+interface LinkPreviewCardProps {
+    url: string;
+    rect: DOMRect;
+    apiKey?: string;
+    onClose: () => void;
+}
+declare function LinkPreviewCard({ url, rect, apiKey, onClose }: LinkPreviewCardProps): import("react/jsx-runtime").JSX.Element;
+declare function TypeIcon({ type }: {
+    type: string;
+}): import("react/jsx-runtime").JSX.Element;
+export { LinkPreviewCard, TypeIcon };
+export type { LinkPreviewHoverProps, LinkPreviewCardProps };

package/dist/components/ui/sheet.d.ts

@@ -7,7 +7,7 @@ declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogC
 declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "left" | "right" | "bottom" | "top" | null | undefined;
+    side?: "top" | "left" | "right" | "bottom" | null | undefined;
 } & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
 interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }

package/dist/{html2pdf.bundle-d4225b87.js → html2pdf.bundle-c79c27d6.js}

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { g as getDefaultExportFromCjs, c as commonjsGlobal } from "./index-6717344b.js";
+import { g as getDefaultExportFromCjs, c as commonjsGlobal } from "./index-a92ee4fa.js";
 function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {
     const e = m[i];
@@ -46125,4 +46125,4 @@ const html2pdf_bundle$1 = /* @__PURE__ */ _mergeNamespaces({
 export {
   html2pdf_bundle$1 as h
 };
-//# sourceMappingURL=html2pdf.bundle-d4225b87.js.map
+//# sourceMappingURL=html2pdf.bundle-c79c27d6.js.map