Handle context menu format bold and italic

src/MarkdownTextInput.tsx

@@ -10,7 +10,7 @@ import type {MarkdownStyle} from './MarkdownTextInputDecoratorViewNativeComponen
 import NativeLiveMarkdownModule from './NativeLiveMarkdownModule';
 import {mergeMarkdownStyleWithDefault} from './styleUtils';
 import type {PartialMarkdownStyle} from './styleUtils';
-import type {InlineImagesInputProps, MarkdownRange} from './commonTypes';
+import type {FormatType, InlineImagesInputProps, MarkdownRange} from './commonTypes';
 
 declare global {
   // eslint-disable-next-line no-var
@@ -53,6 +53,7 @@ function unregisterParser(parserId: number) {
 
 interface MarkdownTextInputProps extends TextInputProps, InlineImagesInputProps {
   markdownStyle?: PartialMarkdownStyle;
+  formatSelection?: (selectedText: string, formatType: FormatType) => string;
   parser: (value: string) => MarkdownRange[];
 }
 

src/MarkdownTextInput.web.tsx

@@ -18,18 +18,20 @@ import {updateInputStructure} from './web/utils/parserUtils';
 import InputHistory from './web/InputHistory';
 import type {TreeNode} from './web/utils/treeUtils';
 import {getCurrentCursorPosition, removeSelection, setCursorPosition} from './web/utils/cursorUtils';
+import {getFormatType} from './web/utils/blockUtils';
 import './web/MarkdownTextInput.css';
 import type {MarkdownStyle} from './MarkdownTextInputDecoratorViewNativeComponent';
 import {getElementHeight, getPlaceholderValue, isEventComposing, normalizeValue, parseInnerHTMLToText} from './web/utils/inputUtils';
 import {parseToReactDOMStyle, processMarkdownStyle} from './web/utils/webStyleUtils';
 import {forceRefreshAllImages} from './web/inputElements/inlineImage';
-import type {MarkdownRange, InlineImagesInputProps} from './commonTypes';
+import type {MarkdownRange, InlineImagesInputProps, FormatType} from './commonTypes';
 
 const useClientEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 
 interface MarkdownTextInputProps extends TextInputProps, InlineImagesInputProps {
   markdownStyle?: MarkdownStyle;
   parser: (text: string) => MarkdownRange[];
+  formatSelection?: (selectedText: string, formatType: FormatType) => string;
   onClick?: (e: MouseEvent<HTMLDivElement>) => void;
   dir?: string;
   disabled?: boolean;
@@ -85,6 +87,7 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
       multiline = false,
       markdownStyle,
       parser,
+      formatSelection,
       onBlur,
       onChange,
       onChangeText,
@@ -236,6 +239,33 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
       [parser, parseText, processedMarkdownStyle],
     );
 
+    const handleFormatSelection = useCallback(
+      (target: MarkdownTextInputElement, parsedText: string, cursorPosition: number, formatCommand: string): ParseTextResult => {
+        if (!contentSelection.current || contentSelection.current.end - contentSelection.current.start < 1) {
+          return {
+            text: '',
+            cursorPosition: 0,
+          };
+        }
+
+        const formatType = getFormatType(formatCommand);
+        const selectedText = parsedText.slice(contentSelection.current.start, contentSelection.current.end);
+        const formattedText = formatSelection?.(selectedText, formatType) ?? selectedText;
+
+        if (selectedText === formattedText) {
+          return parseText(parser, target, parsedText, processedMarkdownStyle, cursorPosition);
+        }
+
+        const prefix = parsedText.slice(0, contentSelection.current.start);
+        const suffix = parsedText.slice(contentSelection.current.end);
+        const diffLength = formattedText.length - selectedText.length;
+        const text = `${prefix}${formattedText}${suffix}`;
+
+        return parseText(parser, target, text, processedMarkdownStyle, cursorPosition + diffLength, true);
+      },
+      [parser, parseText, formatSelection, processedMarkdownStyle],
+    );
+
     // Placeholder text color logic
     const updateTextColor = useCallback(
       (node: HTMLDivElement, text: string) => {
@@ -361,6 +391,11 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
           case 'historyRedo':
             newInputUpdate = redo(divRef.current);
             break;
+          case 'formatBold':
+          case 'formatItalic':
+          case 'formatUnderline':
+            newInputUpdate = handleFormatSelection(divRef.current, parsedText, newCursorPosition, inputType);
+            break;
           default:
             newInputUpdate = parseText(parser, divRef.current, parsedText, processedMarkdownStyle, newCursorPosition, true, !inputType, inputType === 'pasteText');
         }
@@ -414,7 +449,21 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
 
         handleContentSizeChange();
       },
-      [parser, updateTextColor, updateSelection, onChange, onChangeText, handleContentSizeChange, undo, redo, parseText, processedMarkdownStyle, setEventProps, maxLength],
+      [
+        parser,
+        updateTextColor,
+        updateSelection,
+        onChange,
+        onChangeText,
+        handleContentSizeChange,
+        undo,
+        redo,
+        handleFormatSelection,
+        parseText,
+        processedMarkdownStyle,
+        setEventProps,
+        maxLength,
+      ],
     );
 
     const insertText = useCallback(

src/commonTypes.ts

@@ -14,6 +14,8 @@ type MarkdownType =
   | 'syntax'
   | 'inline-image';
 
+type FormatType = 'bold' | 'italic' | 'underline';
+
 interface MarkdownRange {
   type: MarkdownType;
   start: number;
@@ -26,4 +28,4 @@ type InlineImagesInputProps = {
   imagePreviewAuthRequiredURLs?: string[];
 };
 
-export type {MarkdownType, MarkdownRange, InlineImagesInputProps};
+export type {MarkdownType, FormatType, MarkdownRange, InlineImagesInputProps};

src/web/utils/blockUtils.ts

@@ -1,5 +1,5 @@
 import type {MarkdownTextInputElement} from '../../MarkdownTextInput.web';
-import type {InlineImagesInputProps, MarkdownRange} from '../../commonTypes';
+import type {FormatType, InlineImagesInputProps, MarkdownRange} from '../../commonTypes';
 import type {PartialMarkdownStyle} from '../../styleUtils';
 import {addInlineImagePreview} from '../inputElements/inlineImage';
 import type {NodeType, TreeNode} from './treeUtils';
@@ -110,4 +110,15 @@ function extendBlockStructure(
   return targetNode;
 }
 
-export {addStyleToBlock, extendBlockStructure, isBlockMarkdownType, getFirstBlockMarkdownRange};
+function getFormatType(formatCommand: string): FormatType {
+  switch (formatCommand) {
+    case 'formatBold':
+      return 'bold';
+    case 'formatItalic':
+      return 'italic';
+    default:
+      return 'underline';
+  }
+}
+
+export {addStyleToBlock, extendBlockStructure, isBlockMarkdownType, getFirstBlockMarkdownRange, getFormatType};