wysimark-lite 0.18.0 → 0.21.2

package/README.md

@@ -35,6 +35,44 @@ const Editor: React.FC = () => {
 };
 ```
 
+### With Image Upload
+
+You can enable image file upload by providing the `onImageChange` callback:
+
+```tsx
+import { Editable, useEditor } from "wysimark-lite";
+import React from "react";
+
+const Editor: React.FC = () => {
+  const [value, setValue] = React.useState("");
+  const editor = useEditor({});
+
+  const handleImageUpload = async (file: File): Promise<string> => {
+    // Upload file to your server and return the URL
+    const formData = new FormData();
+    formData.append("image", file);
+    const response = await fetch("/api/upload", { method: "POST", body: formData });
+    const { url } = await response.json();
+    return url;
+  };
+
+  return (
+    <div style={{ width: "800px" }}>
+      <Editable
+        editor={editor}
+        value={value}
+        onChange={setValue}
+        onImageChange={handleImageUpload}
+      />
+    </div>
+  );
+};
+```
+
+When `onImageChange` is provided:
+- The image dialog shows a radio button to switch between URL input and file upload
+- **Drag and drop** image files directly into the editor to insert them at the cursor position
+
 ### Direct Initialization
 
 You can also initialize the editor directly on an HTML element:
@@ -63,6 +101,7 @@ pin "wysimark-lite", to: "https://cdn.jsdelivr.net/npm/wysimark-lite@latest/dist
 
 - **Modern Design**: Clean and contemporary interface that integrates seamlessly with React applications
 - **Raw Markdown Mode**: Switch between WYSIWYG and raw Markdown editing modes
+- **Image Upload Support**: Upload images via file picker or drag and drop when `onImageChange` callback is provided
 - **User-Friendly Interface**:
   - Simplified toolbar with toggle buttons (click to activate/deactivate formatting)
   - Markdown shortcuts (e.g., `**` for **bold**, `#` for heading)
@@ -71,6 +110,7 @@ pin "wysimark-lite", to: "https://cdn.jsdelivr.net/npm/wysimark-lite@latest/dist
 - **Enhanced List Support**:
   - Nested lists support (create hierarchical lists with multiple levels)
   - Mix different list types in the hierarchy
+- **Smart Block Splitting**: When applying heading/paragraph styles to multi-line blocks, only the selected lines are converted
 
 ## Browser Support
 

package/dist/index.d.ts

@@ -7,6 +7,14 @@ import { SetReturnType, SetOptional, UnionToIntersection, Simplify } from 'type-
 import react from 'react';
 import { RenderElementProps, RenderLeafProps, RenderPlaceholderProps, EditableProps as EditableProps$1 } from 'slate-react/dist/components/editable';
 
+type OnImageChangeHandler$1 = (file: File) => Promise<string>;
+type ImageDialogState = {
+    url: string;
+    alt: string;
+    title: string;
+    imageSource: "url" | "file";
+    uploadedUrl: string;
+};
 type WysimarkEditor = {
     /**
      * Private state for the wysimark editor.
@@ -24,6 +32,14 @@ type WysimarkEditor = {
          * Function to toggle Raw mode
          */
         toggleRawMode?: () => void;
+        /**
+         * Handler for image file upload
+         */
+        onImageChange?: OnImageChangeHandler$1;
+        /**
+         * Persisted state for the image dialog
+         */
+        imageDialogState?: ImageDialogState;
     };
     /**
      * Public methods for the wysimark editor.
@@ -943,6 +959,7 @@ declare module "slate" {
     }
 }
 
+type OnImageChangeHandler = (file: File) => Promise<string>;
 type EditableProps = {
     editor: Editor;
     value: string;
@@ -951,8 +968,9 @@ type EditableProps = {
     placeholder?: string;
     className?: string;
     style?: React.CSSProperties;
+    onImageChange?: OnImageChangeHandler;
 };
-declare function Editable({ editor, value, onChange, throttleInMs, placeholder, className, style, }: EditableProps): react_jsx_runtime.JSX.Element;
+declare function Editable({ editor, value, onChange, throttleInMs, placeholder, className, style, onImageChange, }: EditableProps): react_jsx_runtime.JSX.Element;
 
 /**
  * The options passed into the standalone version of Wysimark.
@@ -976,4 +994,4 @@ type Wysimark = {
  */
 declare function createWysimark(containerElement: HTMLElement, options: StandaloneOptions): Wysimark;
 
-export { Editable, Wysimark, createWysimark, useEditor };
+export { Editable, OnImageChangeHandler, Wysimark, createWysimark, useEditor };