@alpaca-editor/core 1.0.3992 → 1.0.3993

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

@@ -0,0 +1,589 @@
+import { Descendant, Element as SlateElement } from 'slate';
+import { CustomText, Alignment, CustomElement, LinkElement, SimplifiedProfile, SLATE_MARKS, SLATE_BLOCKS } from '../types';
+
+// Elements that should be completely preserved as raw HTML
+const PRESERVE_AS_RAW_ELEMENTS = new Set([
+  'table', 'tbody', 'thead', 'tfoot', 'tr', 'td', 'th',
+  'svg', 'canvas', 'iframe', 'object', 'embed',
+  'form', 'input', 'textarea', 'select', 'button',
+  'video', 'audio', 'source', 'track',
+  'script', 'style', 'noscript'
+]);
+
+// Shared utility: Get default block type from profile
+const getDefaultBlockType = (blocks: string[]): string => {
+  return blocks.length > 0 && blocks[0] ? blocks[0] : 'paragraph';
+};
+
+// Shared utility: Unescape HTML entities
+const unescapeHtmlEntities = (text: string): string => {
+  return text
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&amp;/g, '&'); // This should be last to avoid double-unescaping
+};
+
+// Simplified preservation check
+const shouldPreserveAsRaw = (element: HTMLElement): boolean => {
+  const tagName = element.tagName.toLowerCase();
+  
+  // Check if it's in the preserve list
+  if (PRESERVE_AS_RAW_ELEMENTS.has(tagName)) {
+    return true;
+  }
+  
+  // Check if this element contains any elements that should be preserved
+  const containsPreserveElements = element.querySelector(Array.from(PRESERVE_AS_RAW_ELEMENTS).join(','));
+  if (containsPreserveElements) {
+    return true;
+  }
+  
+  // 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:');
+  
+  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> = {};
+  
+  // Check for HTML tag-based marks
+  const tagName = element.tagName.toLowerCase();
+  const markConfig = configuredMarks.find(markId => {
+    const config = SLATE_MARKS[markId];
+    return config && config.htmlTag === tagName;
+  });
+  
+  if (markConfig) {
+    marks[markConfig] = true;
+  }
+  
+  // Check for inline style-based marks
+  const style = element.getAttribute('style');
+  if (style) {
+    if (style.includes('font-weight: bold') || style.includes('font-weight:bold')) {
+      marks['bold'] = true;
+    }
+    if (style.includes('font-style: italic') || style.includes('font-style:italic')) {
+      marks['italic'] = true;
+    }
+    if (style.includes('text-decoration: underline') || style.includes('text-decoration:underline')) {
+      marks['underline'] = true;
+    }
+    if (style.includes('text-decoration: line-through') || style.includes('text-decoration:line-through')) {
+      marks['strikethrough'] = true;
+    }
+  }
+  
+  return marks;
+};
+
+export const htmlToSlate = (html: string, profile: SimplifiedProfile): Descendant[] => {
+  const defaultBlockType = getDefaultBlockType(profile.blocks);
+    
+  if (!html || html === '<p><br></p>') {
+    return [{ type: defaultBlockType, children: [{ text: '' }] }];
+  }
+  
+  const div = document.createElement('div');
+  div.innerHTML = html;
+  
+  const nodes: Descendant[] = [];
+  
+  // Determine block type for element
+  const getBlockTypeForElement = (element: HTMLElement): string => {
+    const tagName = element.tagName.toLowerCase();
+    
+    // Check if we have a configured block for this element
+    const matchingBlockId = profile.blocks.find(blockId => {
+      const blockConfig = SLATE_BLOCKS[blockId];
+      return blockConfig && blockConfig.htmlTag === tagName;
+    });
+    
+    return matchingBlockId || defaultBlockType;
+  };
+  
+  // Process list elements
+  const processListElement = (element: HTMLElement, currentIndent: number = 0): void => {
+    const tagName = element.tagName.toLowerCase();
+    const listType = tagName === 'ul' ? 'unordered' : 'ordered';
+    
+    Array.from(element.children).forEach(child => {
+      if (child.tagName.toLowerCase() === 'li') {
+        const liElement = child as HTMLElement;
+        const style = liElement.getAttribute('style') || '';
+        const alignMatch = style.match(/text-align:\s*([^;]+)/);
+        const align = alignMatch ? alignMatch[1] as Alignment : undefined;
+        
+        // Process text content and inline elements (excluding nested lists)
+        const children = processNodeWithInlinesExcludingNestedLists(liElement, profile.marks);
+        
+        nodes.push({
+          type: 'list-item',
+          listType: listType,
+          indent: currentIndent,
+          align,
+          children: children.length > 0 ? children : [{ text: '' }]
+        });
+        
+        // Process nested lists separately
+        Array.from(liElement.children).forEach(childEl => {
+          const childTagName = childEl.tagName.toLowerCase();
+          if (childTagName === 'ul' || childTagName === 'ol') {
+            processListElement(childEl as HTMLElement, currentIndent + 1);
+          }
+        });
+      }
+    });
+  };
+  
+  // Process inline elements and text, excluding nested lists
+  const processNodeWithInlinesExcludingNestedLists = (element: HTMLElement, configuredMarks: string[]): (CustomText | CustomElement)[] => {
+    const results: (CustomText | CustomElement)[] = [];  
+    const currentElementMarks = getMarksFromElement(element, configuredMarks);
+    
+    Array.from(element.childNodes).forEach(child => {
+      if (child.nodeType === Node.TEXT_NODE) {
+        if (child.textContent) {
+          results.push({ 
+            text: child.textContent,
+            ...currentElementMarks
+          });
+        }
+      } else if (child.nodeType === Node.ELEMENT_NODE) {
+        const childElement = child as HTMLElement;
+        const tagName = childElement.tagName.toLowerCase();
+        
+        // Skip nested lists - they're processed separately
+        if (tagName === 'ul' || tagName === 'ol') {
+          return;
+        }
+        
+        if (tagName === 'br') {
+          results.push({ text: '<br>' });
+        } else if (tagName === 'a') {
+          const href = childElement.getAttribute('href') || '';
+          const target = childElement.getAttribute('target') || '_self';
+          const isInternal = childElement.hasAttribute('data-internal');
+          const itemId = childElement.getAttribute('data-item-id') || '';
+          const targetItemLongId = childElement.getAttribute('data-item-longid') || '';
+          const queryString = childElement.getAttribute('data-querystring') || '';
+          
+          const linkChildren = processNodeWithInlines(childElement, configuredMarks);
+          
+          results.push({
+            type: 'link',
+            url: href,
+            link: {
+              type: isInternal ? 'internal' : 'external',
+              url: href,
+              target,
+              itemId,
+              targetItemLongId,
+              queryString
+            },
+            children: linkChildren.length ? linkChildren : [{ text: childElement.textContent || 'Link' }]
+          });
+        } else if (shouldPreserveAsRaw(childElement)) {
+          // Preserve complex elements as raw HTML
+          results.push({ 
+            text: childElement.outerHTML,
+            isRawHtml: true 
+          });
+        } else {
+          // Process as regular inline element with marks
+          const childMarks = getMarksFromElement(childElement, configuredMarks);        
+          const combinedMarks = { ...currentElementMarks, ...childMarks };
+          
+          const childContent = processNodeWithInlines(childElement, configuredMarks);
+          childContent.forEach(node => {
+            if ('text' in node) {
+              Object.assign(node, combinedMarks);
+            }
+            results.push(node);
+          });
+        }
+      }
+    });
+    
+    return results;
+  };
+  
+  // Process inline elements and text
+  const processNodeWithInlines = (element: HTMLElement, configuredMarks: string[]): (CustomText | CustomElement)[] => {
+    const results: (CustomText | CustomElement)[] = [];  
+    const currentElementMarks = getMarksFromElement(element, configuredMarks);
+    
+    Array.from(element.childNodes).forEach(child => {
+      if (child.nodeType === Node.TEXT_NODE) {
+        if (child.textContent) {
+          results.push({ 
+            text: child.textContent,
+            ...currentElementMarks
+          });
+        }
+      } else if (child.nodeType === Node.ELEMENT_NODE) {
+        const childElement = child as HTMLElement;
+        const tagName = childElement.tagName.toLowerCase();
+        
+        if (tagName === 'br') {
+          results.push({ text: '<br>' });
+        } else if (tagName === 'a') {
+          const href = childElement.getAttribute('href') || '';
+          const target = childElement.getAttribute('target') || '_self';
+          const isInternal = childElement.hasAttribute('data-internal');
+          const itemId = childElement.getAttribute('data-item-id') || '';
+          const targetItemLongId = childElement.getAttribute('data-item-longid') || '';
+          const queryString = childElement.getAttribute('data-querystring') || '';
+          
+          const linkChildren = processNodeWithInlines(childElement, configuredMarks);
+          
+          results.push({
+            type: 'link',
+            url: href,
+            link: {
+              type: isInternal ? 'internal' : 'external',
+              url: href,
+              target,
+              itemId,
+              targetItemLongId,
+              queryString
+            },
+            children: linkChildren.length ? linkChildren : [{ text: childElement.textContent || 'Link' }]
+          });
+        } else if (tagName === 'ul' || tagName === 'ol' || shouldPreserveAsRaw(childElement)) {
+          // Preserve nested lists and complex elements as raw HTML
+          results.push({ 
+            text: childElement.outerHTML,
+            isRawHtml: true 
+          });
+        } else {
+          // Process as regular inline element with marks
+          const childMarks = getMarksFromElement(childElement, configuredMarks);        
+          const combinedMarks = { ...currentElementMarks, ...childMarks };
+          
+          const childContent = processNodeWithInlines(childElement, configuredMarks);
+          childContent.forEach(node => {
+            if ('text' in node) {
+              Object.assign(node, combinedMarks);
+            }
+            results.push(node);
+          });
+        }
+      }
+    });
+    
+    return results;
+  };
+  
+  // Process top-level nodes
+  // First, check if we have mixed content (text and br elements) that should be combined
+  const topLevelNodes = Array.from(div.childNodes);
+  const hasMixedContent = topLevelNodes.some(node => 
+    (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) || 
+    (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName.toLowerCase() === 'br')
+  );
+  
+  if (hasMixedContent && topLevelNodes.length > 1) {
+    // Combine mixed text and br elements into a single element
+    const combinedChildren: (CustomText | CustomElement)[] = [];
+    
+    topLevelNodes.forEach(node => {
+      if (node.nodeType === Node.TEXT_NODE && node.textContent) {
+        combinedChildren.push({ text: node.textContent });
+      } else if (node.nodeType === Node.ELEMENT_NODE) {
+        const element = node as HTMLElement;
+        const tagName = element.tagName.toLowerCase();
+        
+        if (tagName === 'br') {
+          combinedChildren.push({ text: '<br>' });
+        } else {
+          // Process other inline elements
+          const inlineChildren = processNodeWithInlines(element, profile.marks);
+          combinedChildren.push(...inlineChildren);
+        }
+      }
+    });
+    
+    if (combinedChildren.length > 0) {
+      nodes.push({
+        type: defaultBlockType,
+        children: combinedChildren
+      });
+    }
+  } else {
+    // Process normally for single elements or non-mixed content
+    Array.from(div.childNodes).forEach(node => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const element = node as HTMLElement;
+        const tagName = element.tagName.toLowerCase();
+        
+        // Extract alignment if present
+        const style = element.getAttribute('style') || '';
+        const alignMatch = style.match(/text-align:\s*([^;]+)/);
+        const align = alignMatch ? alignMatch[1] as Alignment : undefined;
+        
+        if (tagName === 'br') {
+          // Handle standalone br elements at top level
+          nodes.push({
+            type: defaultBlockType,
+            children: [{ text: '<br>' }]
+          });
+        } else if (tagName === 'ul' || tagName === 'ol') {
+          if (profile.lists) {
+            processListElement(element);
+          } else {
+            // If lists are not enabled, treat as preserved elements
+            nodes.push({
+              type: defaultBlockType,
+              children: [{ text: element.outerHTML, isRawHtml: true }]
+            });
+          }
+        } else if (tagName === 'li') {
+          if (profile.lists) {
+            // Handle standalone li elements
+            const parentTagName = element.parentElement?.tagName.toLowerCase();
+            const listType = parentTagName === 'ul' ? 'unordered' : parentTagName === 'ol' ? 'ordered' : 'unordered';
+            const children = processNodeWithInlines(element, profile.marks);
+            
+            nodes.push({
+              type: 'list-item',
+              listType: listType,
+              indent: 0,
+              align,
+              children: children.length > 0 ? children : [{ text: '' }]
+            });
+          } else {
+            nodes.push({
+              type: defaultBlockType,
+              children: [{ text: element.outerHTML, isRawHtml: true }]
+            });
+          }
+        } else if (shouldPreserveAsRaw(element)) {
+          // Preserve complex elements as raw HTML
+          nodes.push({
+            type: defaultBlockType,
+            children: [{ text: element.outerHTML, isRawHtml: true }]
+          });
+        } else {
+          const children = processNodeWithInlines(element, profile.marks);
+          const blockType = getBlockTypeForElement(element);
+          
+          nodes.push({
+            type: blockType,
+            align,
+            children: children.length > 0 ? children : [{ text: '' }]
+          });
+        }
+      } else if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
+        nodes.push({
+          type: defaultBlockType,
+          children: [{ text: node.textContent }]
+        });
+      }
+    });
+  }
+  
+  return nodes.length > 0 ? nodes : [{ type: defaultBlockType, children: [{ text: '' }] }];
+};
+
+export const formatTextWithMarks = (child: CustomText, configuredMarks: string[]): string => {
+  // If this is raw HTML, return it as-is with unescaping
+  if (child.isRawHtml) {
+    return unescapeHtmlEntities(child.text);
+  }
+  
+  let text = child.text;
+
+  // Convert literal <br> text back to <br> tags
+  text = text.replace(/<br>/g, '<br>');
+
+  // Apply marks using Slate's built-in mark system
+  configuredMarks.forEach(markId => {
+    const markConfig = SLATE_MARKS[markId];
+    if (markConfig && (child as any)[markId]) {
+      text = markConfig.renderHtml(text);
+    }
+  });
+  
+  return text;
+};
+
+export const slateToHtml = (value: Descendant[], profile: SimplifiedProfile): string => {
+  let html = '';
+  let i = 0;
+  
+  const defaultBlockType = getDefaultBlockType(profile.blocks);
+  
+  // Build nested list HTML
+  const buildNestedListHtml = (startIndex: number, targetIndent: number = 0): { html: string; nextIndex: number } => {
+    let listHtml = '';
+    let currentIndex = startIndex;
+    
+    // Find first element at target level to determine list type
+    let firstListType: 'ordered' | 'unordered' = 'unordered';
+    
+    while (currentIndex < value.length) {
+      const element = value[currentIndex] as CustomElement;
+      if (element.type !== 'list-item') break;
+      
+      const elementIndent = element.indent || 0;
+      if (elementIndent === targetIndent) {
+        firstListType = element.listType || 'unordered';
+        break;
+      } else if (elementIndent < targetIndent) {
+        break;
+      }
+      currentIndex++;
+    }
+    
+    const listTag = firstListType === 'ordered' ? 'ol' : 'ul';
+    listHtml += `<${listTag}>`;
+    
+    currentIndex = startIndex;
+    while (currentIndex < value.length) {
+      const element = value[currentIndex] as CustomElement;
+      
+      if (element.type !== 'list-item') break;
+      
+      const elementIndent = element.indent || 0;
+      const elementListType = element.listType || 'unordered';
+      
+      if (elementIndent < targetIndent) break;
+      
+      if (elementIndent === targetIndent && elementListType === firstListType) {
+        const processedChildren = processChildrenWithInlines(element.children as CustomText[], profile.marks);
+        listHtml += `<li>${processedChildren}`;
+        
+        // Check for nested lists
+        if (currentIndex + 1 < value.length) {
+          const nextElement = value[currentIndex + 1] as CustomElement;
+          if (nextElement.type === 'list-item' && (nextElement.indent || 0) > elementIndent) {
+            const nestedResult = buildNestedListHtml(currentIndex + 1, elementIndent + 1);
+            listHtml += nestedResult.html;
+            currentIndex = nestedResult.nextIndex - 1;
+          }
+        }
+        
+        listHtml += `</li>`;
+        currentIndex++;
+      } else if (elementIndent > targetIndent) {
+        const nestedResult = buildNestedListHtml(currentIndex, elementIndent);
+        listHtml += nestedResult.html;
+        currentIndex = nestedResult.nextIndex;
+      } else {
+        break;
+      }
+    }
+    
+    listHtml += `</${listTag}>`;
+    return { html: listHtml, nextIndex: currentIndex };
+  };
+  
+  // Process children with inline elements
+  const processChildrenWithInlines = (children: (CustomText | CustomElement)[], configuredMarks: string[]): string => {
+    let result = '';
+    
+    children.forEach(child => {
+      if (SlateElement.isElement(child)) {
+        if (child.type === 'link') {
+          const linkElement = child as LinkElement;
+          const isInternal = linkElement.link?.type === 'internal';
+          
+          const linkText = linkElement.children?.map((c: CustomText | CustomElement) => {
+            if (SlateElement.isElement(c)) {
+              return processChildrenWithInlines(c.children as (CustomText | CustomElement)[], configuredMarks);
+            } else {
+              const textNode = c as CustomText;
+              return textNode.isRawHtml ? unescapeHtmlEntities(textNode.text) : formatTextWithMarks(textNode, configuredMarks);
+            }
+          }).join('') || '';
+          
+          if (isInternal) {
+            const itemId = linkElement.link?.itemId || '';
+            const targetItemLongId = linkElement.link?.targetItemLongId || '';
+            const target = linkElement.link?.target || '_self';
+            const queryString = linkElement.link?.queryString || '';
+            result += `<a href="#" data-internal="true" data-item-id="${itemId}" data-item-longid="${targetItemLongId}" target="${target}" data-querystring="${queryString}" class="internal-link">${linkText}</a>`;
+          } else {
+            const url = linkElement.url || linkElement.link?.url || '#';
+            const target = linkElement.link?.target || '_self';
+            const queryString = linkElement.link?.queryString || '';
+            result += `<a href="${url}" target="${target}" data-querystring="${queryString}">${linkText}</a>`;
+          }
+        } else {
+          // Handle other element types
+          result += processChildrenWithInlines(child.children as (CustomText | CustomElement)[], configuredMarks);
+        }
+      } else {
+        // Regular text node
+        const textNode = child as CustomText;
+        result += textNode.isRawHtml ? unescapeHtmlEntities(textNode.text) : formatTextWithMarks(textNode, configuredMarks);
+      }
+    });
+    
+    return result;
+  };
+  
+  // Process all elements
+  while (i < value.length) {
+    const element = value[i] as CustomElement;
+    
+    // Handle list items
+    if (element.type === 'list-item') {
+      const listResult = buildNestedListHtml(i, element.indent || 0);
+      html += listResult.html;
+      i = listResult.nextIndex;
+      continue;
+    }
+    
+    const alignStyle = element.align ? ` style="text-align: ${element.align};"` : '';
+    
+    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];
+      
+      if (blockConfig && profile.blocks.includes(element.type) && element.children) {
+        const processedChildren = processChildrenWithInlines(element.children as CustomText[], profile.marks);
+        html += blockConfig.renderHtml(processedChildren, alignStyle);
+      } else {
+        // Fallback for unknown types
+        const processedChildren = processChildrenWithInlines(element.children as CustomText[], profile.marks);
+        const defaultBlockConfig = SLATE_BLOCKS[defaultBlockType];
+        if (defaultBlockConfig) {
+          html += defaultBlockConfig.renderHtml(processedChildren, alignStyle);
+        } else if (defaultBlockType === 'no-tag') {
+          html += processedChildren;
+        } else {
+          html += `<p${alignStyle}>${processedChildren}</p>`;
+        }
+      }
+    }
+    
+    i++;
+  }
+  
+  // Handle empty content
+  if (!html) {
+    const defaultBlockConfig = SLATE_BLOCKS[defaultBlockType];
+    if (defaultBlockConfig) {
+      return defaultBlockConfig.renderHtml('<br>', '');
+    } else if (defaultBlockType === 'no-tag') {
+      return '<br>';
+    } else {
+      return '<p><br></p>';
+    }
+  }
+  
+  return html;
+};