feat(editor): add new methods to MarkdownEditorRef and improve keyboard handling

implement setMarkdown, getBlocks, and setBlocks methods in EditorCore
update QuotePlugin validation to use maxLength instead of maxDepth
enhance KeyboardHandler to properly handle empty block deletion
track cursor position in ParagraphComponent for better backspace handling

Author: StringNick

components/editor/core/EditorCore.tsx

@@ -470,6 +470,12 @@ export const EditorCore = forwardRef<ExtendedMarkdownEditorRef, ExtendedMarkdown
     useImperativeHandle(ref, () => ({
       // Base MarkdownEditorRef methods
       getMarkdown: () => getMarkdown(),
+      setMarkdown: (markdown: string) => setMarkdown(markdown),
+      getBlocks: () => blocks,
+      setBlocks: (newBlocks: EditorBlock[]) => {
+        // TODO: Implement setBlocks
+        // Not yet implemented
+      },
       focus: () => {
         // Focus the currently focused block, or focus the last block
         if (focusedBlockId) {
@@ -535,11 +541,6 @@ export const EditorCore = forwardRef<ExtendedMarkdownEditorRef, ExtendedMarkdown
       exportToMarkdown: () => getMarkdown(),
       importFromMarkdown: (markdown: string) => setMarkdown(markdown),
       exportToPlainText: () => blocks.map(b => b.content).join('\n'),
-      getBlocks: () => blocks,
-      setBlocks: (newBlocks: EditorBlock[]) => {
-        // TODO: Implement setBlocks
-        // Not yet implemented
-      },
 
       // Editor state
       getEditorState: () => state,

components/editor/core/KeyboardHandler.tsx

@@ -131,20 +131,42 @@ export const KeyboardHandler: React.FC<KeyboardHandlerProps> = ({
     }
 
     // Handle Backspace key
-    if (key === 'Backspace' && cursorPosition === 0) {
+    // Trigger handler at cursor position 0, or if content is empty (for deletion)
+    const isContentEmpty = block.content.trim() === '';
+    const shouldHandleBackspace = cursorPosition === 0 || isContentEmpty;
+
+    if (key === 'Backspace' && shouldHandleBackspace) {
       if (controller?.handleBackspace) {
         const result = controller.handleBackspace(block);
-        
+
+        // If result is explicitly null and content is empty, delete the block
+        if (result === null && isContentEmpty) {
+          if (event.preventDefault) event.preventDefault();
+
+          // Delete the block
+          editor.deleteBlock(block.id);
+
+          // Focus previous block
+          if (currentBlockIndex > 0) {
+            const prevBlock = blocks[currentBlockIndex - 1];
+            if (prevBlock) {
+              editor.focusBlock(prevBlock.id);
+            }
+          }
+
+          return;
+        }
+
         if (result) {
           if (event.preventDefault) event.preventDefault();
-          
+
           if (typeof result === 'object' && result !== null) {
             // Update the block
             editor.updateBlock(block.id, result);
           } else {
             // Delete the block
             editor.deleteBlock(block.id);
-            
+
             // Focus previous block
             if (currentBlockIndex > 0) {
               const prevBlock = blocks[currentBlockIndex - 1];
@@ -153,7 +175,7 @@ export const KeyboardHandler: React.FC<KeyboardHandlerProps> = ({
               }
             }
           }
-          
+
           return;
         }
       }

components/editor/plugins/built-in/ParagraphPlugin.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, memo, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { StyleSheet, TextInput, View } from 'react-native';
 import { Colors } from '../../../../constants/Colors';
 import { useColorScheme } from '../../../../hooks/useColorScheme';
@@ -24,6 +24,7 @@ const ParagraphComponent = forwardRef<TextInput, BlockComponentProps>(({
   style
 }, ref) => {
   const inputRef = useRef<TextInput>(null);
+  const [cursorPosition, setCursorPosition] = useState(0);
   const colorScheme = useColorScheme();
   const colors = Colors[colorScheme ?? 'light'];
 
@@ -38,6 +39,13 @@ const ParagraphComponent = forwardRef<TextInput, BlockComponentProps>(({
   const pluginInstance = new ParagraphPlugin();
   const controller = pluginInstance.controller;
 
+  const handleSelectionChange = (event: any) => {
+    const selection = event.nativeEvent.selection;
+    if (selection) {
+      setCursorPosition(selection.start);
+    }
+  };
+
   const handleTextChange = (text: string) => {
     if (onBlockChange) {
       onBlockChange({ content: text });
@@ -53,7 +61,7 @@ const ParagraphComponent = forwardRef<TextInput, BlockComponentProps>(({
     <KeyboardHandler
       block={block}
       controller={controller}
-      cursorPosition={0}
+      cursorPosition={cursorPosition}
     >
       {({ onKeyPress, preventNewlines }: { onKeyPress: (event: any) => void; preventNewlines?: boolean }) => (
         <View style={[styles.container, style]}>
@@ -63,6 +71,7 @@ const ParagraphComponent = forwardRef<TextInput, BlockComponentProps>(({
             onChangeText={handleTextChange}
             onFocus={onFocus}
             onBlur={onBlur}
+            onSelectionChange={handleSelectionChange}
             onKeyPress={onKeyPress}
             placeholder="Type something..."
             placeholderTextColor={colors.textSecondary}
@@ -174,12 +183,14 @@ export class ParagraphPlugin extends BlockPlugin {
   }
 
   protected handleBackspace(block: EditorBlock): EditorBlock | null {
-    // If paragraph is empty and backspace is pressed, convert to previous block type
+    // If paragraph is empty and backspace is pressed, delete the block
+    // We return null to let the KeyboardHandler handle block deletion
     if (block.content.trim() === '') {
-      return null; // Let editor handle deletion
+      return null; // Let KeyboardHandler handle block deletion
     }
-    
-    return block;
+
+    // Return null to let default behavior handle non-empty paragraphs
+    return null;
   }
 
   protected transformContent(content: string): string {

components/editor/plugins/built-in/QuotePlugin.tsx

@@ -288,7 +288,7 @@ export class QuotePlugin extends BlockPlugin {
   readonly settings = {
     allowedParents: ['root', 'callout'] as EditorBlockType[],
     validation: {
-      maxDepth: 5
+      maxLength: 10000
     },
     defaultMeta: {
       depth: 1

types/editor.ts

@@ -86,6 +86,9 @@ export type EditorMode = 'edit' | 'raw' | 'preview';
 
 export type MarkdownEditorRef = {
   getMarkdown: () => string;
+  setMarkdown: (markdown: string) => void;
+  getBlocks: () => EditorBlock[];
+  setBlocks: (blocks: EditorBlock[]) => void;
   focus: () => void;
   insertBlock: (type: EditorBlockType, index?: number) => void;
   deleteBlock: (id: string) => void;