wysimark-lite 0.21.2 → 0.23.0

package/README.md

@@ -6,9 +6,11 @@ wysimark ( https://github.com/portive/wysimark ) is a modern and clean rich text
 
 Thanks to the original author of wysimark, portive m(_ _)m
 
+[日本語版 README はこちら](README_ja.md)
+
 ## Demo
 
-You can try out  the editor using storybook in the following link:
+You can try out the editor using storybook in the following link:
 https://takeshy.github.io/wysimark-lite
 
 ## Usage
@@ -35,6 +37,33 @@ const Editor: React.FC = () => {
 };
 ```
 
+### Editor Options
+
+The `useEditor` hook accepts the following options:
+
+```tsx
+const editor = useEditor({
+  // Enable raw markdown editing mode (default: true = disabled)
+  disableRawMode: false,
+
+  // Enable highlight mark feature (default: true = disabled)
+  disableHighlight: false,
+
+  // Disable task list / checklist (default: false)
+  disableTaskList: true,
+
+  // Disable code block (default: false)
+  disableCodeBlock: true,
+});
+```
+
+| Option | Default | Description |
+|--------|---------|-------------|
+| `disableRawMode` | `true` | When `false`, shows a toggle button to switch between WYSIWYG and raw Markdown editing |
+| `disableHighlight` | `true` | When `false`, shows a highlight button in the toolbar. Highlight is saved as `<mark>text</mark>` in Markdown |
+| `disableTaskList` | `false` | When `true`, hides the task list (checklist) button from the toolbar |
+| `disableCodeBlock` | `false` | When `true`, hides the code block button from the toolbar |
+
 ### With Image Upload
 
 You can enable image file upload by providing the `onImageChange` callback:
@@ -100,17 +129,27 @@ pin "wysimark-lite", to: "https://cdn.jsdelivr.net/npm/wysimark-lite@latest/dist
 ## Features
 
 - **Modern Design**: Clean and contemporary interface that integrates seamlessly with React applications
-- **Raw Markdown Mode**: Switch between WYSIWYG and raw Markdown editing modes
+- **Raw Markdown Mode**: Switch between WYSIWYG and raw Markdown editing modes (enable with `disableRawMode: false`)
+- **Highlight Support**: Highlight text with `<mark>` tags (enable with `disableHighlight: false`)
 - **Image Upload Support**: Upload images via file picker or drag and drop when `onImageChange` callback is provided
+- **Code Block with Custom Language**: Click on the language label to enter any language name
 - **User-Friendly Interface**:
   - Simplified toolbar with toggle buttons (click to activate/deactivate formatting)
   - Markdown shortcuts (e.g., `**` for **bold**, `#` for heading)
   - Keyboard shortcuts (e.g., `Ctrl/Cmd + B` for bold)
   - Japanese localized UI (toolbar and menu items in Japanese)
+- **Enhanced Link Editing**:
+  - Edit link text and tooltip directly in the link dialog
+  - Both insert and edit dialogs support text and tooltip fields
 - **Enhanced List Support**:
   - Nested lists support (create hierarchical lists with multiple levels)
   - Mix different list types in the hierarchy
+- **Enhanced Table Editing**:
+  - Press `Enter` in a table cell to insert a line break (soft break)
+  - Press `Shift+Enter` to move to the next cell
+  - Press `Tab` in the last cell to exit the table and create a new paragraph
 - **Smart Block Splitting**: When applying heading/paragraph styles to multi-line blocks, only the selected lines are converted
+- **Cursor Position Preservation**: Cursor position is maintained after element type conversion (e.g., paragraph to heading)
 
 ## Browser Support
 

package/dist/index.d.ts

@@ -40,6 +40,22 @@ type WysimarkEditor = {
          * Persisted state for the image dialog
          */
         imageDialogState?: ImageDialogState;
+        /**
+         * Whether raw mode is disabled
+         */
+        disableRawMode?: boolean;
+        /**
+         * Whether task list is disabled
+         */
+        disableTaskList?: boolean;
+        /**
+         * Whether code block is disabled
+         */
+        disableCodeBlock?: boolean;
+        /**
+         * Whether highlight mark is disabled
+         */
+        disableHighlight?: boolean;
     };
     /**
      * Public methods for the wysimark editor.
@@ -48,12 +64,65 @@ type WysimarkEditor = {
     setMarkdown: (markdown: string) => void;
 };
 
-declare function useEditor({ authToken, height, minHeight, maxHeight, }: {
+type UseEditorOptions = {
     authToken?: string;
     height?: string | number;
     minHeight?: string | number;
     maxHeight?: string | number;
-}): Editor & ReactEditor & WysimarkEditor;
+    /**
+     * Disable raw Markdown editing mode.
+     * When true, the raw mode toggle button will be hidden from the toolbar.
+     * Defaults to true (raw mode is disabled by default).
+     *
+     * @example
+     * ```tsx
+     * const editor = useEditor({
+     *   disableRawMode: false  // Enable raw mode
+     * })
+     * ```
+     */
+    disableRawMode?: boolean;
+    /**
+     * Disable task list (checklist) functionality.
+     * When true, the task list button will be hidden from the toolbar
+     * and task list creation will be disabled.
+     *
+     * @example
+     * ```tsx
+     * const editor = useEditor({
+     *   disableTaskList: true
+     * })
+     * ```
+     */
+    disableTaskList?: boolean;
+    /**
+     * Disable code block functionality.
+     * When true, the code block button will be hidden from the toolbar.
+     *
+     * @example
+     * ```tsx
+     * const editor = useEditor({
+     *   disableCodeBlock: true
+     * })
+     * ```
+     */
+    disableCodeBlock?: boolean;
+    /**
+     * Disable highlight mark functionality.
+     * When true, the highlight button will be hidden from the toolbar.
+     * Highlight is serialized as <mark>text</mark> in markdown.
+     * Defaults to true (highlight is disabled by default).
+     *
+     * @example
+     * ```tsx
+     * const editor = useEditor({
+     *   disableHighlight: false  // Enable highlight
+     * })
+     * ```
+     */
+    disableHighlight?: boolean;
+};
+declare function useEditor({ authToken, height, minHeight, maxHeight, disableRawMode, disableTaskList, disableCodeBlock, disableHighlight, }?: UseEditorOptions): Editor & ReactEditor & WysimarkEditor;
 
 /**
  * SinkEditor just adds a `sink` object where we drop all of our sink
@@ -689,6 +758,7 @@ type TableInfo = {
 declare function createAnchorMethods(editor: Editor): {
     insertLink: (args_0: string, args_1?: string | undefined, args_2?: {
         select?: boolean | undefined;
+        title?: string | undefined;
     } | undefined) => void;
     removeLink: (args_0: {
         at?: BetterAt | undefined;
@@ -696,6 +766,7 @@ declare function createAnchorMethods(editor: Editor): {
     editLink: (args_0: {
         href: string;
         title?: string | undefined;
+        text?: string | undefined;
     }, args_1: {
         at?: BetterAt | undefined;
     }) => boolean;
@@ -830,6 +901,7 @@ declare function createTableMethods(editor: Editor): {
     } | undefined) => boolean;
     tabForward: () => boolean;
     tabBackward: () => boolean | undefined;
+    shiftEnterForward: () => boolean;
     selectCell: (args_0?: {
         at?: BetterAt | undefined;
     } | undefined) => boolean;
@@ -869,13 +941,14 @@ declare function createMarksMethods(editor: Editor): {
     removeMarks: (args_0?: {
         at?: slate.Location | null | undefined;
     } | undefined) => void;
-    toggleMark: (args_0: "bold" | "strike" | "text" | "prismToken" | "code" | "italic" | "underline", args_1?: "bold" | "strike" | "text" | "prismToken" | "code" | "italic" | "underline" | undefined, args_2?: {
+    toggleMark: (args_0: "bold" | "strike" | "text" | "prismToken" | "code" | "italic" | "underline" | "highlight", args_1?: "bold" | "strike" | "text" | "prismToken" | "code" | "italic" | "underline" | "highlight" | undefined, args_2?: {
         at?: slate.Location | null | undefined;
     } | undefined) => void;
     toggleBold: () => void;
     toggleItalic: () => void;
     toggleUnderline: () => void;
     toggleStrike: () => void;
+    toggleHighlight: () => void;
 };
 
 type MarksEditor = {
@@ -899,6 +972,7 @@ type MarksText = {
     italic?: true;
     underline?: true;
     strike?: true;
+    highlight?: true;
 };
 type MarksPluginCustomTypes = {
     Name: "marks";
@@ -941,6 +1015,9 @@ type PasteMarkdownPluginCustomTypes = {
     Editor: PasteMarkdownEditor;
 };
 
+/**
+ * @deprecated Use defaultPlugins instead
+ */
 declare const plugins: (TypedPlugin<PasteMarkdownPluginCustomTypes> | TypedPlugin<ConvertElementPluginCustomTypes> | TypedPlugin<AnchorPluginCustomTypes> | TypedPlugin<HeadingPluginCustomTypes> | TypedPlugin<MarksPluginCustomTypes> | TypedPlugin<InlineCodePluginCustomTypes> | TypedPlugin<BlockQuotePluginCustomTypes> | TypedPlugin<CodeBlockPluginCustomTypes> | TypedPlugin<TablePluginCustomTypes> | TypedPlugin<HorizontalRulePluginCustomTypes> | TypedPlugin<{
     Name: "trailing-block";
     Editor: {