@alpaca-editor/core 1.0.4045 → 1.0.4048

package/src/editor/field-types/richtext/utils/plugins.ts

@@ -1,346 +1,547 @@
-import { Editor, Element, Transforms, Text } from 'slate';
-import { Alignment, LinkElement } from '../types';
-
-export const withMark = (editor: Editor) => {
-  if (!editor.isMarkActive) {
-    editor.isMarkActive = (format: string) => {
-      const marks = Editor.marks(editor);
-      return marks ? Boolean((marks as any)[format]) : false;
-    };
+import { Editor, Element, Transforms, Text, Path, Node, Range, Point } from "slate";
+import React from "react";
+import { 
+  CustomElement, 
+  LinkElement, 
+  Alignment,
+  MarkId,
+  BlockId,
+  SLATE_MARKS,
+  SLATE_BLOCKS,
+} from "../types";
+
+// Hot key utility function
+export const isHotkey = (hotkey: string, event: React.KeyboardEvent): boolean => {
+  const keys = hotkey.split('+');
+  const modKeys = keys.slice(0, -1);
+  const key = keys[keys.length - 1]?.toLowerCase();
+  
+  let hasCtrlOrCmd = false;
+  let hasShift = false;
+  let hasAlt = false;
+  
+  for (const modKey of modKeys) {
+    switch (modKey) {
+      case 'mod':
+        hasCtrlOrCmd = event.ctrlKey || event.metaKey;
+        break;
+      case 'ctrl':
+        hasCtrlOrCmd = event.ctrlKey;
+        break;
+      case 'cmd':
+        hasCtrlOrCmd = event.metaKey;
+        break;
+      case 'shift':
+        hasShift = event.shiftKey;
+        break;
+      case 'alt':
+        hasAlt = event.altKey;
+        break;
+    }
   }
+  
+  return (
+    hasCtrlOrCmd === (modKeys.includes('mod') || modKeys.includes('ctrl') || modKeys.includes('cmd')) &&
+    hasShift === modKeys.includes('shift') &&
+    hasAlt === modKeys.includes('alt') &&
+    event.key.toLowerCase() === key
+  );
+};
 
-  if (!editor.toggleMark) {
-    editor.toggleMark = (format: string) => {
-      const isActive = editor.isMarkActive(format);
+// Mark plugin with strict typing
+export const withMark = (editor: Editor) => {
+  editor.isMarkActive = (format: MarkId): boolean => {
+    const marks = Editor.marks(editor);
+    return marks ? marks[format] === true : false;
+  };
 
-      if (isActive) {
-        Editor.removeMark(editor, format);
-      } else {
-        Editor.addMark(editor, format, true);
-      }
-    };
-  }
+  editor.toggleMark = (format: MarkId): void => {
+    const isActive = editor.isMarkActive(format);
+    
+    if (isActive) {
+      Editor.removeMark(editor, format);
+    } else {
+      Editor.addMark(editor, format, true);
+    }
+  };
 
   return editor;
 };
 
+// Block plugin with strict typing
 export const withBlock = (editor: Editor) => {
-  if (!editor.isBlockActive) {
-    editor.isBlockActive = (format: string) => {
-      const { selection } = editor;
-      if (!selection) return false;
+  editor.isBlockActive = (format: BlockId): boolean => {
+    const { selection } = editor;
+    if (!selection) return false;
 
-      const [match] = Editor.nodes(editor, {
-        at: selection,
+    const [match] = Array.from(
+      Editor.nodes(editor, {
+        at: Editor.unhangRange(editor, selection),
         match: n =>
-          !Editor.isEditor(n) &&
-          Element.isElement(n) &&
-          n.type === format
-      });
-
-      return !!match;
-    };
-  }
+          !Editor.isEditor(n) && Element.isElement(n) && n.type === format,
+      })
+    );
 
-  if (!editor.toggleBlock) {    
-    editor.toggleBlock = (format: string) => {
-      const isActive = editor.isBlockActive(format);
+    return !!match;
+  };
 
-      Transforms.setNodes(
-        editor,
-        { type: isActive ? 'paragraph' : format },
-        { match: n => !Editor.isEditor(n) && Element.isElement(n) }
-      );
-    };
-  }
+  editor.toggleBlock = (format: BlockId): void => {
+    const isActive = editor.isBlockActive(format);
+    
+    Transforms.setNodes(
+      editor,
+      { type: isActive ? 'paragraph' : format },
+      { match: n => !Editor.isEditor(n) && Element.isElement(n) }
+    );
+  };
 
   return editor;
 };
 
+// Alignment plugin with strict typing
 export const withAlignment = (editor: Editor) => {
-  if (!editor.isAlignActive) {  
-    editor.isAlignActive = (align: string) => {
-      const { selection } = editor;
-      if (!selection) return false;
-
-      const [match] = Array.from(
-        Editor.nodes(editor, {
-          at: Editor.unhangRange(editor, selection),
-          match: n =>
-            !Editor.isEditor(n) &&
-            Element.isElement(n) &&
-            n.align === align,
-        })
-      );
+  editor.isAlignActive = (align: Alignment): boolean => {
+    const { selection } = editor;
+    if (!selection) return false;
 
-      return !!match;
-    };
-  }
-
-  if (!editor.toggleAlign) {
-    editor.toggleAlign = (align: string) => {
-      const { selection } = editor;
-      if (!selection) return;
+    const [match] = Array.from(
+      Editor.nodes(editor, {
+        at: Editor.unhangRange(editor, selection),
+        match: n =>
+          !Editor.isEditor(n) && Element.isElement(n) && (n as CustomElement).align === align,
+      })
+    );
 
-      const isActive = editor.isAlignActive(align);
+    return !!match;
+  };
 
-      Transforms.setNodes(
-        editor,
-        { align: isActive ? undefined : align as Alignment },
-        { match: n => !Editor.isEditor(n) && Element.isElement(n) }
-      );
-    };
-  }
+  editor.toggleAlign = (align: Alignment): void => {
+    const isActive = editor.isAlignActive(align);
+    
+    Transforms.setNodes(
+      editor,
+      { align: isActive ? undefined : align },
+      { match: n => !Editor.isEditor(n) && Element.isElement(n) }
+    );
+  };
 
   return editor;
 };
 
-export const withList = (editor: Editor) => {
-  if (!editor.isListActive) {
-    editor.isListActive = (listType?: 'unordered' | 'ordered') => {
-      const { selection } = editor;
-      if (!selection) return false;
-
-      const [match] = Editor.nodes(editor, {
-        at: selection,
-        match: n =>
-          !Editor.isEditor(n) &&
-          Element.isElement(n) &&
-          n.type === 'list-item' &&
-          (listType ? n.listType === listType : true)
-      });
+// Link plugin
+export const withLink = (editor: Editor) => {
+  const { insertData, insertText, isInline, isElementReadOnly, isSelectable } = editor;
 
-      return !!match;
-    };
-  }
+  editor.isInline = (element: Element) => {
+    return element.type === 'link' ? true : isInline(element);
+  };
 
-  if (!editor.toggleList) {
-    editor.toggleList = (listType: 'unordered' | 'ordered') => {
-      const { selection } = editor;
-      if (!selection) return;
+  editor.isElementReadOnly = (element: Element) => {
+    return element.type === 'link' ? false : isElementReadOnly(element);
+  };
 
-      const isActive = editor.isListActive(listType);
-      const isAnyListActive = editor.isListActive();
+  editor.isSelectable = (element: Element) => {
+    return element.type === 'link' ? true : isSelectable(element);
+  };
 
-      if (isActive) {
-        // Convert list items back to paragraphs
-        Transforms.setNodes(
-          editor,
-          { type: 'paragraph', listType: undefined, indent: undefined },
-          { 
-            match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'list-item',
-            split: true
-          }
-        );
-      } else {
-        // Convert to list items
-        Transforms.setNodes(
-          editor,
-          { 
-            type: 'list-item', 
-            listType: listType,
-            indent: isAnyListActive ? 1 : 0 // If already in a list, indent by 1
-          },
-          { 
-            match: n => !Editor.isEditor(n) && Element.isElement(n) && 
-                        (n.type === 'paragraph' || n.type === 'list-item'),
-            split: true
-          }
-        );
-      }
-    };
-  }
+  editor.insertText = (text: string) => {
+    if (text && isUrl(text)) {
+      wrapLink(editor, text);
+    } else {
+      insertText(text);
+    }
+  };
 
-  if (!editor.indentList) {
-    editor.indentList = () => {
-      const { selection } = editor;
-      if (!selection) return;
+  editor.insertData = (data: DataTransfer) => {
+    const text = data.getData('text/plain');
 
-      const listItem = Editor.above(editor, {
-        at: selection,
-        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'list-item'
-      });
+    if (text && isUrl(text)) {
+      wrapLink(editor, text);
+    } else {
+      insertData(data);
+    }
+  };
 
-      if (listItem) {
-        const [node, path] = listItem;
-        const currentIndent = (node as any).indent || 0;
-        const newIndent = Math.min(currentIndent + 1, 5); // Max 5 levels
+  editor.isLinkActive = (): boolean => {
+    const [link] = Editor.nodes(editor, {
+      match: n =>
+        !Editor.isEditor(n) && Element.isElement(n) && n.type === 'link',
+    });
+    return !!link;
+  };
 
-        Transforms.setNodes(
-          editor,
-          { indent: newIndent },
-          { at: path }
-        );
+  editor.insertLink = (options?: {
+    onOpenLinkDialog?: (callback: (link: any) => void) => void;
+  }): void => {
+    if (editor.isLinkActive()) {
+      unwrapLink(editor);
+    } else {
+      if (options?.onOpenLinkDialog) {
+        options.onOpenLinkDialog((linkData: any) => {
+          wrapLink(editor, linkData.url || linkData.link?.url || '', linkData);
+        });
       }
-    };
-  }
+    }
+  };
 
-  if (!editor.outdentList) {
-    editor.outdentList = () => {
-      const { selection } = editor;
-      if (!selection) return;
+  return editor;
+};
 
-      const listItem = Editor.above(editor, {
-        at: selection,
-        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'list-item'
-      });
+// List plugin with strict typing
+export const withList = (editor: Editor) => {
+  editor.isListActive = (listType?: "unordered" | "ordered"): boolean => {
+    const { selection } = editor;
+    if (!selection) return false;
+
+    const [match] = Array.from(
+      Editor.nodes(editor, {
+        at: Editor.unhangRange(editor, selection),
+        match: n =>
+          !Editor.isEditor(n) && 
+          Element.isElement(n) && 
+          n.type === 'list-item' &&
+          (!listType || (n as CustomElement).listType === listType),
+      })
+    );
 
-      if (listItem) {
-        const [node, path] = listItem;
-        const currentIndent = (node as any).indent || 0;
+    return !!match;
+  };
+
+  editor.toggleList = (listType: "unordered" | "ordered"): void => {
+    const isActive = editor.isListActive(listType);
+    
+    if (isActive) {
+      // Convert list items back to paragraphs
+      Transforms.setNodes(
+        editor,
+        { type: 'paragraph', listType: undefined, indent: undefined },
+        {
+          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'list-item',
+        }
+      );
+    } else {
+      // Check if we're switching between list types (preserve indentation)
+      // or converting from non-list elements (reset to indent 0)
+      const selectedNodes = Array.from(
+        Editor.nodes(editor, {
+          match: n => !Editor.isEditor(n) && Element.isElement(n),
+        })
+      );
+      
+      selectedNodes.forEach(([node, path]) => {
+        const element = node as CustomElement;
         
-        if (currentIndent === 0) {
-          // Convert to paragraph when already at the highest level
+        if (element.type === 'list-item') {
+          // Switching between list types - preserve existing indentation
           Transforms.setNodes(
             editor,
-            { type: 'paragraph', listType: undefined, indent: undefined },
+            { type: 'list-item', listType },
             { at: path }
           );
         } else {
-          // Reduce indent level
-          const newIndent = Math.max(currentIndent - 1, 0);
+          // Converting from non-list element - start at indent 0
           Transforms.setNodes(
             editor,
-            { indent: newIndent },
+            { type: 'list-item', listType, indent: 0 },
             { at: path }
           );
         }
-      }
-    };
-  }
-
-  return editor;
-};
-
-export const withLink = (editor: Editor) => {
-  const { isInline } = editor;
-
-  // Override isInline to mark link elements as inline
-  editor.isInline = element => {
-    return element.type === 'link' ? true : isInline(element);
+      });
+    }
   };
 
-  if (!editor.isLinkActive) {
-    editor.isLinkActive = () => {
-      const { selection } = editor;
-      if (!selection) return false;
-
-      const [match] = Array.from(
+  editor.indentList = (): void => {
+    const { selection } = editor;
+    if (!selection) return;
+
+    const [match] = Array.from(
+      Editor.nodes(editor, {
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'list-item',
+      })
+    );
+
+    if (match) {
+      const [node, path] = match;
+      const currentIndent = (node as CustomElement).indent || 0;
+      
+      // Check if this is the first list item in the document
+      const allListItems = Array.from(
         Editor.nodes(editor, {
-          at: selection,
-          match: n =>
-            !Editor.isEditor(n) &&
-            Element.isElement(n) &&
-            n.type === 'link'
+          at: [],
+          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'list-item',
         })
       );
-
-      return !!match;
-    };
-  }
-
-  if (!editor.insertLink) {
-    editor.insertLink = (options: { onOpenLinkDialog?: (callback: (link: any) => void) => void } = {}) => {
-      const { selection } = editor;
-      const { onOpenLinkDialog } = options;
-
-      const createLinkElement = (link: any, defaultText: string = "Link"): LinkElement => {
-        return {
-          type: 'link',
-          url: link.url || '',
-          link: {
-            type: link.type || 'external',
-            url: link.url || '',
-            target: link.target || '_blank',
-            targetItemLongId: link.targetItemLongId,
-            itemId: link.itemId,
-            queryString: link.queryString
-          },
-          children: link.text ? [{ text: link.text }] : [{ text: defaultText }]
-        };
-      };
-
-      // If there's a link active, remove it
-      if (editor.isLinkActive()) {
-        Transforms.unwrapNodes(editor, {
-          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'link'
-        });
+      
+      const currentIndex = allListItems.findIndex(([, itemPath]) => Path.equals(itemPath, path));
+      
+      // Don't allow indenting the first list item
+      if (currentIndex === 0) {
         return;
       }
-
-      // Handle link insertion
-      if (onOpenLinkDialog) {
-        onOpenLinkDialog((link) => {
-          if (selection && Editor.string(editor, selection)) {
-            // Wrap selected text
-            const linkElement = createLinkElement(link);
-            Transforms.wrapNodes(editor, linkElement, { split: true });
-          } else {
-            // Insert new link
-            const linkElement = createLinkElement(link, link.text || "Link");
-            Transforms.insertNodes(editor, linkElement);
+      
+      // Find the previous list item to check maximum allowed indent
+      if (currentIndex > 0) {
+        const prevEntry = allListItems[currentIndex - 1];
+        if (prevEntry) {
+          const [prevNode] = prevEntry;
+          const prevIndent = (prevNode as CustomElement).indent || 0;
+          const maxAllowedIndent = prevIndent + 1;
+        
+          // Only allow indenting if it doesn't exceed previous item's indent + 1
+          if (currentIndent < maxAllowedIndent) {
+            Transforms.setNodes(
+              editor,
+              { indent: Math.min(currentIndent + 1, Math.min(5, maxAllowedIndent)) },
+              { at: path }
+            );
           }
-          
-          // Add space after link
-          Transforms.insertText(editor, ' ');
-        });
-      } else {
-        // Default link creation
-        const defaultLink = {
-          type: 'external',
-          url: 'https://example.com',
-          target: '_blank'
-        };
-
-        if (selection && Editor.string(editor, selection)) {
-          const linkElement = createLinkElement(defaultLink);
-          Transforms.wrapNodes(editor, linkElement, { split: true });
-        } else {
-          const linkElement = createLinkElement(defaultLink, "Link");
-          Transforms.insertNodes(editor, linkElement);
         }
-        
-        // Add space after link
-        Transforms.insertText(editor, ' ');
       }
-    };
-  }
+    }
+  };
+
+  editor.outdentList = (): void => {
+    const { selection } = editor;
+    if (!selection) return;
+
+    const [match] = Array.from(
+      Editor.nodes(editor, {
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'list-item',
+      })
+    );
+
+    if (match) {
+      const [node, path] = match;
+      const currentIndent = (node as CustomElement).indent || 0;
+      
+      if (currentIndent > 0) {
+        Transforms.setNodes(
+          editor,
+          { indent: currentIndent - 1 },
+          { at: path }
+        );
+      } else {
+        // Convert back to paragraph if at root level
+        Transforms.setNodes(
+          editor,
+          { type: 'paragraph', listType: undefined, indent: undefined },
+          { at: path }
+        );
+      }
+    }
+  };
 
   return editor;
 };
 
-// Simplified normalization plugin
+// Normalization plugin
 export const withNormalization = (editor: Editor) => {
   const { normalizeNode } = editor;
 
-  editor.normalizeNode = (entry) => {
+  editor.normalizeNode = (entry: [Node, Path]) => {
     const [node, path] = entry;
 
-    // Use Slate's built-in normalizations first
-    normalizeNode(entry);
+    // Ensure all text nodes have proper mark structure
+    if (Text.isText(node)) {
+      const validMarks = Object.keys(SLATE_MARKS) as MarkId[];
+      const nodeMarks = Object.keys(node).filter(key => key !== 'text');
+      
+      for (const mark of nodeMarks) {
+        if (!validMarks.includes(mark as MarkId)) {
+          // Remove invalid marks
+          Transforms.unsetNodes(editor, mark, { at: path });
+          return;
+        }
+      }
+    }
 
-    // Only essential custom normalization rules
+    // Ensure all elements have valid types
     if (Element.isElement(node)) {
-      // Ensure list items have valid properties
-      if (node.type === 'list-item') {
-        if (!node.listType) {
-          Transforms.setNodes(editor, { listType: 'unordered' }, { at: path });
-          return;
+      const validBlockTypes = Object.keys(SLATE_BLOCKS) as BlockId[];
+      const specialTypes = ['link', 'list-item', 'horizontal-rule'];
+      const allValidTypes = [...validBlockTypes, ...specialTypes];
+      
+      if (!allValidTypes.includes(node.type)) {
+        // Convert invalid element types to paragraphs
+        Transforms.setNodes(editor, { type: 'paragraph' }, { at: path });
+        return;
+      }
+    }
+
+    normalizeNode(entry);
+  };
+
+  return editor;
+};
+
+// Insertion plugin for content insertion features
+export const withInsertion = (editor: Editor) => {
+  editor.insertHorizontalRule = (): void => {
+    const hrElement: CustomElement = {
+      type: 'horizontal-rule',
+      children: [{ text: '' }],
+    };
+    
+    Transforms.insertNodes(editor, hrElement);
+    
+    // Move cursor to after the hr element by inserting a new paragraph
+    const newParagraph: CustomElement = {
+      type: 'paragraph',
+      children: [{ text: '' }],
+    };
+    Transforms.insertNodes(editor, newParagraph);
+  };
+
+  return editor;
+};
+
+// Keyboard handler function
+export const createKeyboardHandler = (editor: Editor) => {
+  return (event: React.KeyboardEvent) => {
+    // Handle hotkeys for marks
+    Object.entries(SLATE_MARKS).forEach(([markId, config]) => {
+      if ('hotkey' in config && config.hotkey && isHotkey(config.hotkey, event)) {
+        event.preventDefault();
+        editor.toggleMark(markId as MarkId);
+      }
+    });
+
+    // Handle Shift+Enter for line break
+    if (isHotkey('shift+enter', event)) {
+      event.preventDefault();
+      editor.insertText('<br>');
+      return;
+    }
+
+    // Handle Enter to escape from links
+    if (event.key === 'Enter') {
+      const { selection } = editor;
+      if (selection && Range.isCollapsed(selection)) {
+        const [linkNode] = Editor.nodes(editor, {
+          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'link',
+        });
+        
+        if (linkNode) {
+          const [, linkPath] = linkNode;
+          const linkEnd = Editor.end(editor, linkPath);
+          
+          // Check if cursor is at the end of the link
+          if (Point.equals(selection.anchor, linkEnd)) {
+            event.preventDefault();
+            
+            // Move cursor after the link
+            const after = Editor.after(editor, linkPath);
+            if (after) {
+              Transforms.select(editor, after);
+              editor.insertBreak();
+            }
+            return;
+          }
         }
+      }
+    }
 
-        if (typeof node.indent !== 'number' || node.indent < 0 || node.indent > 5) {
-          Transforms.setNodes(editor, { indent: 0 }, { at: path });
-          return;
+    // Handle Right arrow to escape from links
+    if (event.key === 'ArrowRight') {
+      const { selection } = editor;
+      if (selection && Range.isCollapsed(selection)) {
+        const [linkNode] = Editor.nodes(editor, {
+          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'link',
+        });
+        
+        if (linkNode) {
+          const [, linkPath] = linkNode;
+          const linkEnd = Editor.end(editor, linkPath);
+          
+          // Check if cursor is at the end of the link
+          if (Point.equals(selection.anchor, linkEnd)) {
+            event.preventDefault();
+            
+            // Move cursor after the link
+            const after = Editor.after(editor, linkPath);
+            if (after) {
+              Transforms.select(editor, after);
+            }
+            return;
+          }
         }
       }
+    }
 
-      // Ensure link elements have valid structure
-      if (node.type === 'link' && (!node.link || !node.link.url)) {
-        Transforms.unwrapNodes(editor, { at: path });
-        return;
+    // Handle Tab for list indentation
+    if (event.key === 'Tab') {
+      event.preventDefault();
+      if (event.shiftKey) {
+        editor.outdentList();
+      } else {
+        editor.indentList();
+      }
+      return;
+    }
+
+    // Handle Backspace/Delete for empty list items
+    if (event.key === 'Backspace' || event.key === 'Delete') {
+      const { selection } = editor;
+      if (selection && Range.isCollapsed(selection)) {
+        const [match] = Array.from(
+          Editor.nodes(editor, {
+            match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'list-item',
+          })
+        );
+
+        if (match) {
+          const [node] = match;
+          const text = Node.string(node);
+          
+          if (text === '') {
+            event.preventDefault();
+            editor.outdentList();
+          }
+        }
       }
     }
   };
+};
 
-  return editor;
+// Helper functions
+const isUrl = (text: string): boolean => {
+  try {
+    new URL(text);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const wrapLink = (editor: Editor, url: string, linkData?: any): void => {
+  if (editor.isLinkActive()) {
+    unwrapLink(editor);
+  }
+
+  const { selection } = editor;
+  const isCollapsed = selection && Range.isCollapsed(selection);
+  const link: LinkElement = {
+    type: 'link',
+    url,
+    link: linkData || {
+      type: 'external',
+      url,
+      target: '_blank',
+    },
+    children: isCollapsed ? [{ text: url }] : [],
+  };
+
+  if (isCollapsed) {
+    Transforms.insertNodes(editor, link);
+  } else {
+    Transforms.wrapNodes(editor, link, { split: true });
+    Transforms.collapse(editor, { edge: 'end' });
+  }
+};
+
+const unwrapLink = (editor: Editor): void => {
+  Transforms.unwrapNodes(editor, {
+    match: n =>
+      !Editor.isEditor(n) && Element.isElement(n) && n.type === 'link',
+  });
 };