@alpaca-editor/core 1.0.4045 → 1.0.4048

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

@@ -1,5 +1,17 @@
 import { Descendant, Element as SlateElement } from 'slate';
-import { CustomText, Alignment, CustomElement, LinkElement, SimplifiedProfile, SLATE_MARKS, SLATE_BLOCKS } from '../types';
+import { 
+  CustomText, 
+  Alignment, 
+  CustomElement, 
+  LinkElement, 
+  SimplifiedProfile, 
+  SLATE_MARKS, 
+  SLATE_BLOCKS,
+  MarkId,
+  BlockId,
+  HtmlToSlateResult,
+  SlateToHtmlResult
+} from '../types';
 
 // Elements that should be completely preserved as raw HTML
 const PRESERVE_AS_RAW_ELEMENTS = new Set([
@@ -10,8 +22,8 @@ const PRESERVE_AS_RAW_ELEMENTS = new Set([
   'script', 'style', 'noscript'
 ]);
 
-// Shared utility: Get default block type from profile
-const getDefaultBlockType = (blocks: string[]): string => {
+// Shared utility: Get default block type from profile with strict typing
+const getDefaultBlockType = (blocks: readonly BlockId[]): BlockId => {
   return blocks.length > 0 && blocks[0] ? blocks[0] : 'paragraph';
 };
 
@@ -43,16 +55,16 @@ const shouldPreserveAsRaw = (element: HTMLElement): boolean => {
   // Check for complex styling that would be hard to preserve
   const style = element.getAttribute('style') || '';
   const hasComplexStyling = style.includes('background-color') || 
-                           style.includes('font-family') ||
-                           style.includes('font-size') ||
-                           style.includes('color:');
+                            style.includes('font-family') ||
+                            style.includes('font-size') ||
+                            style.includes('color:');
   
   return hasComplexStyling && element.children.length > 0;
 };
 
-// Shared utility: Process marks from element
-const getMarksFromElement = (element: HTMLElement, configuredMarks: string[]): Record<string, boolean> => {
-  const marks: Record<string, boolean> = {};
+// Shared utility: Process marks from element with strict typing
+const getMarksFromElement = (element: HTMLElement, configuredMarks: readonly MarkId[]): Record<MarkId, boolean> => {
+  const marks: Partial<Record<MarkId, boolean>> = {};
   
   // Check for HTML tag-based marks
   const tagName = element.tagName.toLowerCase();
@@ -69,23 +81,50 @@ const getMarksFromElement = (element: HTMLElement, configuredMarks: string[]): R
   const style = element.getAttribute('style');
   if (style) {
     if (style.includes('font-weight: bold') || style.includes('font-weight:bold')) {
-      marks['bold'] = true;
+      if (configuredMarks.includes('bold')) marks['bold'] = true;
     }
     if (style.includes('font-style: italic') || style.includes('font-style:italic')) {
-      marks['italic'] = true;
+      if (configuredMarks.includes('italic')) marks['italic'] = true;
     }
     if (style.includes('text-decoration: underline') || style.includes('text-decoration:underline')) {
-      marks['underline'] = true;
+      if (configuredMarks.includes('underline')) marks['underline'] = true;
     }
     if (style.includes('text-decoration: line-through') || style.includes('text-decoration:line-through')) {
-      marks['strikethrough'] = true;
+      if (configuredMarks.includes('strikethrough')) marks['strikethrough'] = true;
     }
   }
   
-  return marks;
+  return marks as Record<MarkId, boolean>;
 };
 
+// Enhanced htmlToSlate with better error handling and strict typing
 export const htmlToSlate = (html: string, profile: SimplifiedProfile): Descendant[] => {
+  try {
+    return htmlToSlateInternal(html, profile);
+  } catch (error) {
+    console.warn("HTML to Slate conversion failed:", error);
+    const defaultBlockType = getDefaultBlockType(profile.blocks);
+    return [{ type: defaultBlockType, children: [{ text: '' }] }];
+  }
+};
+
+// Enhanced htmlToSlate with result type for better error handling
+export const htmlToSlateWithResult = (html: string, profile: SimplifiedProfile): HtmlToSlateResult => {
+  try {
+    const data = htmlToSlateInternal(html, profile);
+    return { success: true, data };
+  } catch (error) {
+    const defaultBlockType = getDefaultBlockType(profile.blocks);
+    const fallback = [{ type: defaultBlockType, children: [{ text: '' }] }];
+    return { 
+      success: false, 
+      error: error instanceof Error ? error : new Error(String(error)),
+      fallback 
+    };
+  }
+};
+
+const htmlToSlateInternal = (html: string, profile: SimplifiedProfile): Descendant[] => {
   const defaultBlockType = getDefaultBlockType(profile.blocks);
     
   if (!html || html === '<p><br></p>') {
@@ -97,8 +136,8 @@ export const htmlToSlate = (html: string, profile: SimplifiedProfile): Descendan
   
   const nodes: Descendant[] = [];
   
-  // Determine block type for element
-  const getBlockTypeForElement = (element: HTMLElement): string => {
+  // Determine block type for element with strict typing
+  const getBlockTypeForElement = (element: HTMLElement): BlockId => {
     const tagName = element.tagName.toLowerCase();
     
     // Check if we have a configured block for this element
@@ -144,8 +183,8 @@ export const htmlToSlate = (html: string, profile: SimplifiedProfile): Descendan
     });
   };
   
-  // Process inline elements and text, excluding nested lists
-  const processNodeWithInlinesExcludingNestedLists = (element: HTMLElement, configuredMarks: string[]): (CustomText | CustomElement)[] => {
+  // Process inline elements and text, excluding nested lists - with strict typing
+  const processNodeWithInlinesExcludingNestedLists = (element: HTMLElement, configuredMarks: readonly MarkId[]): (CustomText | CustomElement)[] => {
     const results: (CustomText | CustomElement)[] = [];  
     const currentElementMarks = getMarksFromElement(element, configuredMarks);
     
@@ -216,8 +255,8 @@ export const htmlToSlate = (html: string, profile: SimplifiedProfile): Descendan
     return results;
   };
   
-  // Process inline elements and text
-  const processNodeWithInlines = (element: HTMLElement, configuredMarks: string[]): (CustomText | CustomElement)[] => {
+  // Process inline elements and text - with strict typing
+  const processNodeWithInlines = (element: HTMLElement, configuredMarks: readonly MarkId[]): (CustomText | CustomElement)[] => {
     const results: (CustomText | CustomElement)[] = [];  
     const currentElementMarks = getMarksFromElement(element, configuredMarks);
     
@@ -336,6 +375,12 @@ export const htmlToSlate = (html: string, profile: SimplifiedProfile): Descendan
             type: defaultBlockType,
             children: [{ text: '<br>' }]
           });
+        } else if (tagName === 'hr') {
+          // Handle horizontal rule elements
+          nodes.push({
+            type: 'horizontal-rule',
+            children: [{ text: '' }]
+          });
         } else if (tagName === 'ul' || tagName === 'ol') {
           if (profile.lists) {
             processListElement(element);
@@ -394,7 +439,8 @@ export const htmlToSlate = (html: string, profile: SimplifiedProfile): Descendan
   return nodes.length > 0 ? nodes : [{ type: defaultBlockType, children: [{ text: '' }] }];
 };
 
-export const formatTextWithMarks = (child: CustomText, configuredMarks: string[]): string => {
+// Enhanced formatTextWithMarks with strict typing
+export const formatTextWithMarks = (child: CustomText, configuredMarks: readonly MarkId[]): string => {
   // If this is raw HTML, return it as-is with unescaping
   if (child.isRawHtml) {
     return unescapeHtmlEntities(child.text);
@@ -405,7 +451,7 @@ export const formatTextWithMarks = (child: CustomText, configuredMarks: string[]
   // Convert literal <br> text back to <br> tags
   text = text.replace(/<br>/g, '<br>');
 
-  // Apply marks using Slate's built-in mark system
+  // Apply marks using Slate's built-in mark system with strict typing
   configuredMarks.forEach(markId => {
     const markConfig = SLATE_MARKS[markId];
     if (markConfig && (child as any)[markId]) {
@@ -416,7 +462,31 @@ export const formatTextWithMarks = (child: CustomText, configuredMarks: string[]
   return text;
 };
 
+// Enhanced slateToHtml with better error handling
 export const slateToHtml = (value: Descendant[], profile: SimplifiedProfile): string => {
+  try {
+    return slateToHtmlInternal(value, profile);
+  } catch (error) {
+    console.warn("Slate to HTML conversion failed:", error);
+    return '';
+  }
+};
+
+// Enhanced slateToHtml with result type for better error handling
+export const slateToHtmlWithResult = (value: Descendant[], profile: SimplifiedProfile): SlateToHtmlResult => {
+  try {
+    const data = slateToHtmlInternal(value, profile);
+    return { success: true, data };
+  } catch (error) {
+    return { 
+      success: false, 
+      error: error instanceof Error ? error : new Error(String(error)),
+      fallback: ''
+    };
+  }
+};
+
+const slateToHtmlInternal = (value: Descendant[], profile: SimplifiedProfile): string => {
   let html = '';
   let i = 0;
   
@@ -487,8 +557,8 @@ export const slateToHtml = (value: Descendant[], profile: SimplifiedProfile): st
     return { html: listHtml, nextIndex: currentIndex };
   };
   
-  // Process children with inline elements
-  const processChildrenWithInlines = (children: (CustomText | CustomElement)[], configuredMarks: string[]): string => {
+  // Process children with inline elements - with strict typing
+  const processChildrenWithInlines = (children: (CustomText | CustomElement)[], configuredMarks: readonly MarkId[]): string => {
     let result = '';
     
     children.forEach(child => {
@@ -546,14 +616,17 @@ export const slateToHtml = (value: Descendant[], profile: SimplifiedProfile): st
     
     const alignStyle = element.align ? ` style="text-align: ${element.align};"` : '';
     
-    if (element.type === 'preserved-element') {
+    // Handle horizontal rule elements
+    if (element.type === 'horizontal-rule') {
+      html += '<hr>';
+    } else if (element.type === 'preserved-element') {
       // Handle preserved elements by restoring their original HTML
       const preservedElement = element as any;
       html += preservedElement.originalHtml;
     } else {
-      const blockConfig = SLATE_BLOCKS[element.type];
+      const blockConfig = SLATE_BLOCKS[element.type as BlockId];
       
-      if (blockConfig && profile.blocks.includes(element.type) && element.children) {
+      if (blockConfig && profile.blocks.includes(element.type as BlockId) && element.children) {
         const processedChildren = processChildrenWithInlines(element.children as CustomText[], profile.marks);
         html += blockConfig.renderHtml(processedChildren, alignStyle);
       } else {