@alpaca-editor/core 1.0.3992 → 1.0.3993

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

@@ -0,0 +1,424 @@
+import { RichTextEditorProfile, ToolbarGroupConfig, ToolbarOptionConfig } from '../types';
+
+// Define the mapping from Sitecore button names to Slate options
+const SITECORE_TO_SLATE_MAPPING: Record<string, ToolbarOptionConfig | null> = {
+  // Text formatting marks
+  'Bold': { type: 'mark', id: 'bold' },
+  'Italic': { type: 'mark', id: 'italic' },
+  'Underline': { type: 'mark', id: 'underline' },
+  'StrikeThrough': { type: 'mark', id: 'strikethrough' },
+  'Subscript': { type: 'mark', id: 'subscript' },
+  'Superscript': { type: 'mark', id: 'superscript' },
+  
+  // Custom headline marks  
+  'Extrabold': { type: 'mark', id: 'extrabold' },
+  
+  // Alignment options
+  'JustifyLeft': { type: 'alignment', id: 'left' },
+  'JustifyCenter': { type: 'alignment', id: 'center' },
+  'JustifyRight': { type: 'alignment', id: 'right' },
+  'JustifyFull': { type: 'alignment', id: 'justify' },
+  'JustifyNone': { type: 'alignment', id: 'left' }, // Default to left
+  
+  // Block formats  
+  'InsertOrderedList': { type: 'list', id: 'ordered-list' },
+  'InsertUnorderedList': { type: 'list', id: 'unordered-list' },
+  'Indent': { type: 'list', id: 'indent' },
+  'Outdent': { type: 'list', id: 'outdent' },
+  'FormatBlock': { type: 'block', id: 'paragraph' },
+  
+  // Additional block format options that might come from Sitecore
+  'Paragraph': { type: 'block', id: 'paragraph' },
+  'PlainText': { type: 'block', id: 'no-tag' },
+  'plaintext': { type: 'block', id: 'no-tag' }, // Handle lowercase version from option headers
+  'NoTag': { type: 'block', id: 'no-tag' },
+  'Heading1': { type: 'block', id: 'heading-1' },
+  'Heading2': { type: 'block', id: 'heading-2' },
+  'Heading3': { type: 'block', id: 'heading-3' },
+  'Heading4': { type: 'block', id: 'heading-4' },
+  'Heading5': { type: 'block', id: 'heading-5' },
+  'Heading6': { type: 'block', id: 'heading-6' },
+  
+  // Links
+  'InsertSitecoreLink': { type: 'link', id: 'link' }, // Internal/External link
+  'InsertCustomLink': { type: 'link', id: 'link' }, // Basic external link
+  'Unlink': { type: 'link', id: 'unlink' },
+  
+  // Line breaks - handled by Shift+Enter, not as a button
+  'ManualLineBreak': null, // Handled by keyboard shortcut
+  
+  // Colors (future enhancement - not implemented yet)
+  'ForeColor': null, // { type: 'color', id: 'text-color' },
+  'BackColor': null, // { type: 'color', id: 'background-color' },
+  
+  // Typography (future enhancement - not implemented yet)
+  'FontName': null, // { type: 'font', id: 'font-family' },
+  'FontSize': null, // { type: 'font', id: 'font-size' },
+  
+  // Special UI elements
+  'Divider': { type: 'divider', id: 'divider' },
+  'Print': null,
+  'FindAndReplace': null,
+  'Cut': null,
+  'Copy': null,
+  'Paste': null,
+  'PasteFromWord': null,
+  'PasteFromWordNoFontsNoSizes': null,
+  'PastePlainText': null,
+  'PasteAsHtml': null,
+  'FormatStripper': null,
+  'Undo': null,
+  'Redo': null,
+  'InsertSitecoreMedia': null,
+  'LinkManager': null,
+  'InsertTable': null,
+  'InsertFormElement': null,
+  'InsertParagraph': null,
+  'InsertDate': null,
+  'InsertTime': null,
+  'InsertSymbol': null,
+  'InsertSnippet': null,
+  'InsertHorizontalRule': null,
+  'ToggleTableBorder': null,
+  'ModuleManager': null,
+  'AjaxSpellCheck': null,
+  'XhtmlValidator': null,
+  'Help': null,
+  'ApplyClass': null,
+  'SelectAll': null,
+  'AbsolutePosition': null,
+  'MediaManager': null,
+  'FlashManager': null,
+  'Zoom': null,
+};
+
+export interface SitecoreButton {
+  name: string;
+}
+
+export interface SitecoreToolbar {
+  buttons: SitecoreButton[];
+}
+
+export type SitecoreProfile = SitecoreToolbar[];
+
+export interface SitecoreOption {
+  header: string;
+  value: string;
+}
+
+export interface SitecoreOptionFolder {
+  name: string;
+  options: SitecoreOption[];
+}
+
+export interface SitecoreProfileWrapper {
+  toolbars: SitecoreToolbar[];
+  options: SitecoreOptionFolder[];
+}
+
+/**
+ * Cleans up dividers in an options array by removing consecutive dividers and dividers at start/end
+ */
+function cleanupDividers(options: ToolbarOptionConfig[]): ToolbarOptionConfig[] {
+  if (options.length === 0) return options;
+  
+  const cleaned: ToolbarOptionConfig[] = [];
+  
+  for (let i = 0; i < options.length; i++) {
+    const option = options[i];
+    if (!option) continue;
+    
+    // Skip dividers at the start
+    if (option.type === 'divider' && cleaned.length === 0) {
+      continue;
+    }
+    
+    // Skip consecutive dividers
+    const lastOption = cleaned[cleaned.length - 1];
+    if (option.type === 'divider' && cleaned.length > 0 && lastOption && lastOption.type === 'divider') {
+      continue;
+    }
+    
+    cleaned.push(option);
+  }
+  
+  // Remove divider at the end if present
+  const lastOption = cleaned[cleaned.length - 1];
+  if (cleaned.length > 0 && lastOption && lastOption.type === 'divider') {
+    cleaned.pop();
+  }
+  
+  return cleaned;
+}
+
+/**
+ * Maps a Sitecore rich text profile to a Slate editor profile
+ */
+export function mapSitecoreProfileToSlate(sitecoreProfile: SitecoreProfile, optionFolders: SitecoreOptionFolder[] = []): RichTextEditorProfile {
+  const groups: ToolbarGroupConfig[] = [];
+  const specialButtons = {
+    alignment: new Set<string>(),
+    block: new Set<string>()
+  };
+  const unsupportedButtons = new Set<string>();
+  
+  sitecoreProfile.forEach((toolbar, toolbarIndex) => {
+    const rowGroups: ToolbarGroupConfig[] = [];
+    const rawOptions: ToolbarOptionConfig[] = [];
+    
+    toolbar.buttons.forEach(button => {
+      // Handle special "Paragraphs" button
+      if (button.name === 'Paragraphs') {
+        const paragraphsFolder = optionFolders.find(folder => folder.name === 'Paragraphs');
+        if (paragraphsFolder && paragraphsFolder.options.length > 0) {
+          const paragraphOptions = paragraphsFolder.options
+            .map(option => {
+              // Try to find mapping for the header (first try as-is, then lowercase)
+              const mappedOption = SITECORE_TO_SLATE_MAPPING[option.header] || 
+                                 SITECORE_TO_SLATE_MAPPING[option.header.toLowerCase()];
+              return mappedOption ? { type: mappedOption.type, id: mappedOption.id } : null;
+            })
+            .filter(option => option !== null) as ToolbarOptionConfig[];
+          
+          if (paragraphOptions.length > 0) {
+            // Add paragraphs dropdown to the row
+            rowGroups.push({
+              id: `paragraphs-${toolbarIndex}`,
+              label: 'Format',
+              display: 'dropdown',
+              showIconsOnly: false,
+              options: paragraphOptions,
+              row: toolbarIndex
+            });
+          }
+        }
+        return; // Skip normal processing for Paragraphs button
+      }
+      
+      const mappedOption = SITECORE_TO_SLATE_MAPPING[button.name];
+      if (mappedOption) {
+        if (mappedOption.type === 'alignment') {
+          specialButtons.alignment.add(mappedOption.id);
+        } else if (mappedOption.type === 'block') {
+          specialButtons.block.add(mappedOption.id);
+        } else {
+          rawOptions.push(mappedOption);
+        }
+      } else if (!SITECORE_TO_SLATE_MAPPING.hasOwnProperty(button.name)) {
+        unsupportedButtons.add(button.name);
+      }
+    });
+    
+    const cleanedOptions = cleanupDividers(rawOptions);
+    
+    // Add buttons group if there are any buttons
+    if (cleanedOptions.length > 0) {
+      rowGroups.push({
+        id: `toolbar-${toolbarIndex}`,
+        label: `Toolbar ${toolbarIndex + 1}`,
+        display: 'buttons',
+        showIconsOnly: true,
+        options: cleanedOptions,
+        row: toolbarIndex
+      });
+    }
+    
+    // Add all groups for this toolbar row
+    groups.push(...rowGroups);
+  });
+  
+  // Create dropdown groups for special button types
+  const dropdownGroups = [
+    {
+      condition: specialButtons.block.size > 1 || (specialButtons.block.size === 1 && !specialButtons.block.has('paragraph')),
+      id: 'format-group',
+      label: '',
+      showIconsOnly: false,
+      order: ['paragraph', 'no-tag', 'heading-1', 'heading-2', 'heading-3', 'heading-4', 'heading-5', 'heading-6'],
+      buttons: specialButtons.block,
+      type: 'block' as const,
+      prepend: true
+    },
+    {
+      condition: specialButtons.alignment.size > 0,
+      id: 'alignment-group',
+      label: '',
+      showIconsOnly: true,
+      order: ['left', 'center', 'right', 'justify'],
+      buttons: specialButtons.alignment,
+      type: 'alignment' as const,
+      prepend: false
+    }
+  ];
+
+  dropdownGroups.forEach(group => {
+    if (group.condition) {
+      const options = group.order
+        .filter(item => group.buttons.has(item))
+        .map(item => ({ type: group.type, id: item }));
+      
+      const groupConfig: ToolbarGroupConfig = {
+        id: group.id,
+        label: group.label,
+        display: 'dropdown',
+        showIconsOnly: group.showIconsOnly,
+        options: options,
+        row: group.prepend ? -1 : 1000 // Put prepend groups first, append groups last
+      };
+      
+      if (group.prepend) {
+        groups.unshift(groupConfig);
+      } else {
+        groups.push(groupConfig);
+      }
+    }
+  });
+  
+  if (unsupportedButtons.size > 0) {
+    console.warn('Unsupported Sitecore buttons found:', Array.from(unsupportedButtons).join(', '));
+  }
+  
+  return {
+    toolbar: {
+      groups: groups
+    }
+  };
+}
+
+/**
+ * Maps a Sitecore profile JSON string to a Slate editor profile
+ */
+export function mapSitecoreProfileJsonToSlate(profileJson: string): RichTextEditorProfile | null {
+  // Add input validation
+  if (!profileJson || typeof profileJson !== 'string') {
+    console.error('Invalid profile JSON input:', profileJson);
+    return null;
+  }
+  
+  if (profileJson.trim().length === 0) {
+    console.error('Empty profile JSON string');
+    return null;
+  }
+  
+  try {
+    const parsed = JSON.parse(profileJson);
+    
+    // Handle both formats: direct array or wrapped in toolbars property
+    let sitecoreProfile: SitecoreProfile;
+    let optionFolders: SitecoreOptionFolder[] = [];
+    
+    if (Array.isArray(parsed)) {
+      // Old format: direct array
+      sitecoreProfile = parsed;
+    } else if (parsed.toolbars && Array.isArray(parsed.toolbars)) {
+      // New format: wrapped in toolbars property
+      sitecoreProfile = parsed.toolbars;
+      optionFolders = parsed.options || [];
+    } else {
+      console.error('Invalid Sitecore profile format:', parsed);
+      return null;
+    }
+    
+    // Validate the structure
+    if (!sitecoreProfile.every(toolbar => toolbar.buttons && Array.isArray(toolbar.buttons))) {
+      console.error('Invalid toolbar structure in Sitecore profile');
+      return null;
+    }
+    
+    return mapSitecoreProfileToSlate(sitecoreProfile, optionFolders);
+  } catch (error) {
+    console.error('Failed to parse Sitecore profile JSON:', error);
+    console.error('Raw profile JSON length:', profileJson.length);
+    console.error('Raw profile JSON preview:', profileJson.substring(0, 200) + (profileJson.length > 200 ? '...' : ''));
+    console.error('Raw profile JSON ending:', profileJson.length > 200 ? '...' + profileJson.substring(profileJson.length - 200) : profileJson);
+    
+    // Try to determine if it's a truncation issue
+    if (error instanceof SyntaxError && error.message.includes('Unexpected end of JSON input')) {
+      console.error('This appears to be a truncated JSON string. Check the caching implementation.');
+    }
+    
+    return null;
+  }
+}
+
+/**
+ * Creates a debug profile with ALL available options for testing
+ * - All text formatting marks (including custom ones)
+ * - All block formats
+ * - All list options
+ * - All alignment options
+ * - All link options
+ * - Visual dividers for grouping
+ */
+export function getDebugProfile(): RichTextEditorProfile {
+  return {
+    toolbar: {
+      groups: [
+        {
+          id: 'all-marks',
+          label: '',
+          display: 'buttons',
+          showIconsOnly: false,
+          options: [
+            { type: 'mark', id: 'bold' },
+            { type: 'mark', id: 'italic' },
+            { type: 'mark', id: 'underline' },
+            { type: 'mark', id: 'strikethrough' },
+            { type: 'mark', id: 'subscript' },
+            { type: 'mark', id: 'superscript' },
+            { type: 'divider', id: 'divider' },
+            { type: 'mark', id: 'extrabold' }
+          ]
+        },
+        {
+          id: 'all-blocks',
+          label: '',
+          display: 'dropdown',
+          showIconsOnly: false,
+          options: [
+            { type: 'block', id: 'no-tag' },
+            { type: 'block', id: 'paragraph' },
+            { type: 'block', id: 'heading-1' },
+            { type: 'block', id: 'heading-2' },
+            { type: 'block', id: 'heading-3' },
+            { type: 'block', id: 'heading-4' },
+            { type: 'block', id: 'heading-5' },
+            { type: 'block', id: 'heading-6' }
+          ]
+        },
+        {
+          id: 'all-lists',
+          label: '',
+          display: 'buttons',
+          showIconsOnly: false,
+          options: [
+            { type: 'list', id: 'unordered-list' },
+            { type: 'list', id: 'ordered-list' }
+          ]
+        },
+        {
+          id: 'all-alignment',
+          label: '',
+          display: 'dropdown',
+          showIconsOnly: false,
+          options: [
+            { type: 'alignment', id: 'left' },
+            { type: 'alignment', id: 'center' },
+            { type: 'alignment', id: 'right' },
+            { type: 'alignment', id: 'justify' }
+          ]
+        },
+        {
+          id: 'all-links',
+          label: '',
+          display: 'buttons',
+          showIconsOnly: false,
+          options: [
+            { type: 'link', id: 'link' }
+          ]
+        }
+      ]
+    }
+  };
+}

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

@@ -0,0 +1,154 @@
+import { RichTextEditorProfile } from '../types';
+import { mapSitecoreProfileJsonToSlate } from './profileMapper';
+
+// Single cache for parsed profiles
+const parsedProfileCache = new Map<string, RichTextEditorProfile | null>();
+
+// Cache for in-flight requests to prevent duplicate calls
+const inflightRequests = new Map<string, Promise<RichTextEditorProfile | null>>();
+
+// Cache statistics
+interface ServiceCacheStats {
+  hits: number;
+  misses: number;
+  cacheSize: number;
+}
+
+let serviceStats: ServiceCacheStats = {
+  hits: 0,
+  misses: 0,
+  cacheSize: 0
+};
+
+/**
+ * Get a parsed profile with service-level caching
+ * This combines service calls and parsing into a single cached operation
+ */
+export async function getCachedParsedProfile(
+  profilePath: string,
+  serviceCall: (path: string) => Promise<any>
+): Promise<RichTextEditorProfile | null> {
+  console.log(`[ProfileServiceCache] Getting parsed profile for path: ${profilePath}`);
+  
+  // Check if we already have a cached result
+  if (parsedProfileCache.has(profilePath)) {
+    serviceStats.hits++;
+    const cachedResult = parsedProfileCache.get(profilePath)!;
+    console.log(`[ProfileServiceCache] Cache hit for ${profilePath}`);
+    return cachedResult;
+  }
+
+  // Check if there's already an in-flight request for this profile
+  if (inflightRequests.has(profilePath)) {
+    serviceStats.hits++;
+    console.log(`[ProfileServiceCache] In-flight request found for ${profilePath}`);
+    return inflightRequests.get(profilePath)!;
+  }
+
+  // Make the service call, parse, and cache the result
+  serviceStats.misses++;
+  console.log(`[ProfileServiceCache] Making service call for ${profilePath}`);
+  
+  const servicePromise = serviceCall(profilePath)
+    .then(response => {
+      console.log(`[ProfileServiceCache] Service call completed for ${profilePath}`, response);
+      
+      let parsedProfile: RichTextEditorProfile | null = null;
+      
+      if (response?.data) {
+        const jsonString = JSON.stringify(response.data);
+        console.log(`[ProfileServiceCache] Parsing profile for ${profilePath}, JSON length: ${jsonString.length}`);
+        
+        parsedProfile = mapSitecoreProfileJsonToSlate(jsonString);
+        
+        if (parsedProfile) {
+          console.log(`[ProfileServiceCache] Successfully parsed profile for ${profilePath}`);
+        } else {
+          console.warn(`[ProfileServiceCache] Failed to parse profile for ${profilePath}`);
+        }
+      }
+      
+      // Cache the parsed result (even if null)
+      parsedProfileCache.set(profilePath, parsedProfile);
+      serviceStats.cacheSize = parsedProfileCache.size;
+      
+      // Remove from in-flight requests
+      inflightRequests.delete(profilePath);
+      
+      console.log(`[ProfileServiceCache] Cached parsed profile for ${profilePath}, cache size: ${serviceStats.cacheSize}`);
+      return parsedProfile;
+    })
+    .catch(error => {
+      console.error(`[ProfileServiceCache] Service call failed for ${profilePath}:`, error);
+      // Remove from in-flight requests on error
+      inflightRequests.delete(profilePath);
+      throw error;
+    });
+
+  // Cache the promise to prevent duplicate requests
+  inflightRequests.set(profilePath, servicePromise);
+
+  return servicePromise;
+}
+
+/**
+ * Legacy function for backward compatibility
+ * @deprecated Use getCachedParsedProfile instead
+ */
+export async function getCachedRichTextProfile(
+  profilePath: string,
+  serviceCall: (path: string) => Promise<any>
+): Promise<string | null> {
+  const parsedProfile = await getCachedParsedProfile(profilePath, serviceCall);
+  return parsedProfile ? JSON.stringify(parsedProfile) : null;
+}
+
+/**
+ * Clear all caches
+ */
+export function clearServiceCache(): void {
+  console.log('[ProfileServiceCache] Clearing all caches');
+  parsedProfileCache.clear();
+  inflightRequests.clear();
+  serviceStats = {
+    hits: 0,
+    misses: 0,
+    cacheSize: 0
+  };
+}
+
+/**
+ * Remove a specific profile from cache
+ */
+export function evictProfileFromServiceCache(profilePath: string): boolean {
+  console.log(`[ProfileServiceCache] Evicting profile: ${profilePath}`);
+  const evicted = parsedProfileCache.delete(profilePath);
+  inflightRequests.delete(profilePath);
+  
+  if (evicted) {
+    serviceStats.cacheSize = parsedProfileCache.size;
+  }
+  
+  return evicted;
+}
+
+/**
+ * Get service cache statistics
+ */
+export function getServiceCacheStats(): Readonly<ServiceCacheStats> {
+  return { ...serviceStats };
+}
+
+/**
+ * Get all cached profile paths
+ */
+export function getCachedProfilePaths(): string[] {
+  return Array.from(parsedProfileCache.keys());
+}
+
+/**
+ * Check if a profile path is cached
+ */
+export function isProfilePathCached(profilePath: string): boolean {
+  return parsedProfileCache.has(profilePath);
+} 

package/src/editor/services/contentService.ts

@@ -226,3 +226,15 @@ export async function exportItems(request: ExportItemsRequest) {
 export async function importItems(request: ImportItemsRequest) {
   return await post<ImportItemsResult>("/alpaca/editor/importItems", request);
 }
+
+export type RichTextProfileResponse = {
+  toolbars: Array<{
+    buttons: Array<{
+      name: string;
+    }>;
+  }>;
+};
+
+export async function getRichTextProfile(itemPath: string) {
+  return await post<RichTextProfileResponse>(`/alpaca/editor/RichTextProfile`, {profile: itemPath});
+}

package/src/editor/sidebar/ComponentTree.tsx

@@ -46,6 +46,14 @@ export function ComponentTree({}) {
 
   const treeRef = useRef<HTMLDivElement>(null);
 
+  // Helper function to clean placeholder labels by removing _{guid} pattern
+  function cleanPlaceholderLabel(label: string): string {
+    return label.replace(
+      /_{[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}}$/,
+      "",
+    );
+  }
+
   // Helper function to check if a component has editable descendants
   // function hasEditableDescendants(component: Component): boolean {
   //   if (!component.placeholders) return false;
@@ -148,10 +156,13 @@ export function ComponentTree({}) {
     p: Placeholder,
     parent: CustomTreeNode,
   ): CustomTreeNode {
+    const rawLabel = p.description || p.name;
+    const cleanedLabel = cleanPlaceholderLabel(rawLabel);
+
     const node: CustomTreeNode = {
       key: p.key,
       componentId: p.key,
-      label: p.description || p.name,
+      label: cleanedLabel,
       icon: "pi pi-folder",
       data: p,
       parent: parent,

package/src/editor/ui/PerfectTree.tsx

@@ -81,6 +81,8 @@ export interface TreeProps<T = any> {
   enableKeyboardSearch?: boolean;
   /** Time in ms before search is cleared (default: 1500) */
   searchClearDelay?: number;
+  /** Whether to disable automatic selection when expanding nodes (even during search) */
+  disableAutoSelectOnExpand?: boolean;
 }
 
 /**
@@ -580,6 +582,7 @@ export const PerfectTree = <T,>({
   scrollToSelected = false,
   enableKeyboardSearch = false,
   searchClearDelay = 1500,
+  disableAutoSelectOnExpand = false,
 }: TreeProps<T>) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [isFocused, setIsFocused] = useState(false);
@@ -590,18 +593,21 @@ export const PerfectTree = <T,>({
     (node: TreeNode<T>) => {
       const isCurrentlyExpanded = expandedKeys.includes(node.key);
 
-      // If the node is being expanded (not collapsed), clear the search filter and select the node
+      // If the node is being expanded (not collapsed) and there's an active search filter
       if (!isCurrentlyExpanded) {
+        // Only select the node for quick navigation if there's an active search filter
+        // and auto-selection is not disabled
+        if (searchTerm && onSelect && !disableAutoSelectOnExpand) {
+          onSelect(node.key, {} as React.MouseEvent);
+        }
+
+        // Clear the search filter
         setSearchTerm("");
         // Clear any pending search timeout
         if (searchTimeoutRef.current) {
           clearTimeout(searchTimeoutRef.current);
           searchTimeoutRef.current = null;
         }
-        // Select the node being expanded for quick navigation
-        if (onSelect) {
-          onSelect(node.key, {} as React.MouseEvent);
-        }
       }
 
       if (onToggleExpand) {
@@ -613,7 +619,14 @@ export const PerfectTree = <T,>({
         onLazyLoad(node);
       }
     },
-    [onToggleExpand, onLazyLoad, expandedKeys, onSelect],
+    [
+      onToggleExpand,
+      onLazyLoad,
+      expandedKeys,
+      onSelect,
+      searchTerm,
+      disableAutoSelectOnExpand,
+    ],
   );
 
   const handleSelect = useCallback(