wysimark-lite 0.21.2 → 0.24.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;
@@ -806,9 +877,26 @@ type CodeBlockPluginCustomTypes = {
     };
 };
 
+/**
+ * HTML block element for preserving raw HTML content
+ */
+type HtmlBlockElement = {
+    type: "html-block";
+    /**
+     * The raw HTML content
+     */
+    html: string;
+    children: Text[];
+};
+type HtmlBlockPluginCustomTypes = {
+    Name: "html-block";
+    Editor: Record<string, never>;
+    Element: HtmlBlockElement;
+};
+
 declare function createTableMethods(editor: Editor): {
     getTableInfo: (args_0?: {
-        at?: ImageBlockElement | ParagraphElement | OrderedListItemElement | UnorderedListItemElement | TaskListItemElement | HorizontalRuleElement | TableElement | TableRowElement | TableCellElement | TableContentElement | CodeBlockElement | CodeBlockLineElement | BlockQuoteElement | HeadingElement | AnchorElement | slate.Location | null | undefined;
+        at?: ImageBlockElement | ParagraphElement | OrderedListItemElement | UnorderedListItemElement | TaskListItemElement | HorizontalRuleElement | TableElement | TableRowElement | TableCellElement | TableContentElement | HtmlBlockElement | CodeBlockElement | CodeBlockLineElement | BlockQuoteElement | HeadingElement | AnchorElement | slate.Location | null | undefined;
     } | undefined) => TableInfo | undefined;
     insertTable: (args_0: number, args_1: number, args_2?: {
         at?: slate.Location | null | undefined;
@@ -830,6 +918,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 +958,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 +989,7 @@ type MarksText = {
     italic?: true;
     underline?: true;
     strike?: true;
+    highlight?: true;
 };
 type MarksPluginCustomTypes = {
     Name: "marks";
@@ -915,8 +1006,8 @@ type CurriedConvertElements = <T extends Element$1 = Element$1>(matchForToggle:
 
 declare function createConvertElementMethods(editor: Editor): {
     convertElementTypes: string[];
-    addConvertElementType: (type: "anchor" | "heading" | "block-quote" | "table" | "horizontal-rule" | "code-block" | "paragraph" | "image-block" | "ordered-list-item" | "unordered-list-item" | "task-list-item" | "table-row" | "table-cell" | "table-content" | "code-block-line" | ("anchor" | "heading" | "block-quote" | "table" | "horizontal-rule" | "code-block" | "paragraph" | "image-block" | "ordered-list-item" | "unordered-list-item" | "task-list-item" | "table-row" | "table-cell" | "table-content" | "code-block-line")[]) => void;
-    isConvertibleElement: (element: ImageBlockElement | ParagraphElement | OrderedListItemElement | UnorderedListItemElement | TaskListItemElement | HorizontalRuleElement | TableElement | TableRowElement | TableCellElement | TableContentElement | CodeBlockElement | CodeBlockLineElement | BlockQuoteElement | HeadingElement | AnchorElement) => boolean;
+    addConvertElementType: (type: "anchor" | "heading" | "block-quote" | "html-block" | "table" | "horizontal-rule" | "code-block" | "paragraph" | "image-block" | "ordered-list-item" | "unordered-list-item" | "task-list-item" | "table-row" | "table-cell" | "table-content" | "code-block-line" | ("anchor" | "heading" | "block-quote" | "html-block" | "table" | "horizontal-rule" | "code-block" | "paragraph" | "image-block" | "ordered-list-item" | "unordered-list-item" | "task-list-item" | "table-row" | "table-cell" | "table-content" | "code-block-line")[]) => void;
+    isConvertibleElement: (element: ImageBlockElement | ParagraphElement | OrderedListItemElement | UnorderedListItemElement | TaskListItemElement | HorizontalRuleElement | TableElement | TableRowElement | TableCellElement | TableContentElement | HtmlBlockElement | CodeBlockElement | CodeBlockLineElement | BlockQuoteElement | HeadingElement | AnchorElement) => boolean;
     convertElements: CurriedConvertElements;
 };
 
@@ -941,7 +1032,10 @@ type PasteMarkdownPluginCustomTypes = {
     Editor: PasteMarkdownEditor;
 };
 
-declare const plugins: (TypedPlugin<PasteMarkdownPluginCustomTypes> | TypedPlugin<ConvertElementPluginCustomTypes> | TypedPlugin<AnchorPluginCustomTypes> | TypedPlugin<HeadingPluginCustomTypes> | TypedPlugin<MarksPluginCustomTypes> | TypedPlugin<InlineCodePluginCustomTypes> | TypedPlugin<BlockQuotePluginCustomTypes> | TypedPlugin<CodeBlockPluginCustomTypes> | TypedPlugin<TablePluginCustomTypes> | TypedPlugin<HorizontalRulePluginCustomTypes> | TypedPlugin<{
+/**
+ * @deprecated Use defaultPlugins instead
+ */
+declare const plugins: (TypedPlugin<PasteMarkdownPluginCustomTypes> | TypedPlugin<ConvertElementPluginCustomTypes> | TypedPlugin<AnchorPluginCustomTypes> | TypedPlugin<HeadingPluginCustomTypes> | TypedPlugin<MarksPluginCustomTypes> | TypedPlugin<InlineCodePluginCustomTypes> | TypedPlugin<BlockQuotePluginCustomTypes> | TypedPlugin<CodeBlockPluginCustomTypes> | TypedPlugin<HtmlBlockPluginCustomTypes> | TypedPlugin<TablePluginCustomTypes> | TypedPlugin<HorizontalRulePluginCustomTypes> | TypedPlugin<{
     Name: "trailing-block";
     Editor: {
         allowTrailingBlock: true;