@alpaca-editor/core 1.0.4053 → 1.0.4054

package/src/editor/field-types/richtext/components/ReactSlate.tsx

@@ -8,7 +8,7 @@ import React, {
   memo,
 } from "react";
 import { createEditor, Descendant, Editor, Element, Transforms } from "slate";
-import { Slate, Editable, withReact, ReactEditor } from "slate-react";
+import { Slate, Editable, withReact, ReactEditor, useSlateSelector } from "slate-react";
 import { withHistory } from "slate-history";
 import "./ReactSlate.css";
 
@@ -38,38 +38,32 @@ import { createKeyboardHandler } from "../utils/plugins";
 import { useCachedSimplifiedProfile } from "../hooks/useProfileCache";
 import { classNames } from "primereact/utils";
 
-// Toolbar button component - not memoized to allow reactivity to editor state changes
+// Memoized toolbar button component using useSlateSelector for performance
 const ToolbarButtonWrapper: React.FC<{
   option: ToolbarOptionConfig;
   icon: React.ReactNode;
-  editor: Editor;
   onMouseDown: (event: React.MouseEvent<HTMLButtonElement>) => void;
-}> = ({ option, icon, editor, onMouseDown }) => {
-  // Calculate active state on every render - this is lightweight and ensures reactivity
-  let isActive = false;
-  switch (option.type) {
-    case "mark":
-      isActive = editor.isMarkActive(option.id);
-      break;
-    case "block":
-      isActive = editor.isBlockActive(option.id);
-      break;
-    case "alignment":
-      isActive = editor.isAlignActive(SLATE_ALIGNMENTS[option.id].value);
-      break;
-    case "link":
-      isActive = editor.isLinkActive();
-      break;
-    case "list":
-      const listType = option.id === "unordered-list" ? "unordered" : "ordered";
-      isActive = editor.isListActive(listType);
-      break;
-    case "insertion":
-      isActive = false; // Insertion buttons are never active
-      break;
-    default:
-      isActive = false;
-  }
+}> = memo(({ option, icon, onMouseDown }) => {
+  // Use useSlateSelector to only re-render when the active state changes
+  const isActive = useSlateSelector((editor) => {
+    switch (option.type) {
+      case "mark":
+        return editor.isMarkActive(option.id);
+      case "block":
+        return editor.isBlockActive(option.id);
+      case "alignment":
+        return editor.isAlignActive(SLATE_ALIGNMENTS[option.id].value);
+      case "link":
+        return editor.isLinkActive();
+      case "list":
+        const listType = option.id === "unordered-list" ? "unordered" : "ordered";
+        return editor.isListActive(listType);
+      case "insertion":
+        return false; // Insertion buttons are never active
+      default:
+        return false;
+    }
+  });
 
   return (
     <ToolbarButton
@@ -78,7 +72,9 @@ const ToolbarButtonWrapper: React.FC<{
       onMouseDown={onMouseDown}
     />
   );
-};
+});
+
+ToolbarButtonWrapper.displayName = "ToolbarButtonWrapper";
 
 // Memoized dropdown component to prevent unnecessary re-renders
 const MemoizedEditorDropdown = memo<{
@@ -239,6 +235,11 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
     });
   }, [editor]);
 
+  const handleStripFormattingClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    editor.stripFormatting();
+  }, [editor]);
+
   // Memoize option handlers to prevent creating new functions on every render
   const optionHandlers = useMemo(() => {
     const handlers: Record<string, (editor: Editor, event: React.MouseEvent) => void> = {};
@@ -468,7 +469,6 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
                         key={`${option.type}-${option.id}`}
                         option={option}
                         icon={optionObj.icon}
-                        editor={editor}
                         onMouseDown={handler}
                       />
                     );
@@ -664,7 +664,185 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
   );
 
   // Use the keyboard handler from plugins
-  const handleKeyDown = useMemo(() => createKeyboardHandler(editor), [editor]);
+  const handleKeyDown = useMemo(() => createKeyboardHandler(editor, simplifiedProfile), [editor, simplifiedProfile]);
+
+  // Calculate proper list numbering for ordered lists
+  const calculateListNumbers = useCallback((elements: Descendant[]): Map<string, string> => {
+    const numberMap = new Map<string, string>();
+    const counters: number[] = [0, 0, 0, 0, 0, 0]; // Support up to 6 levels
+    
+    elements.forEach((element, index) => {
+      if (Element.isElement(element) && 
+          element.type === 'list-item' && 
+          (element as any).listType === 'ordered') {
+        const indent = ((element as any).indent || 0);
+        
+        // Ensure indent is within bounds
+        if (indent < 0 || indent >= counters.length) return;
+        
+        // Increment counter for current level
+        counters[indent] = (counters[indent] || 0) + 1;
+        
+        // Reset all deeper level counters
+        for (let i = indent + 1; i < counters.length; i++) {
+          counters[i] = 0;
+        }
+        
+        // Build number string for current level only (e.g., "3.")
+        const numberString = counters[indent] + '.';
+        numberMap.set(`${index}`, numberString);
+      }
+    });
+    
+    return numberMap;
+  }, []);
+
+  // Calculate list numbers for the entire editor content (memoized for performance)
+  const listNumbers = useMemo(() => {
+    return calculateListNumbers(editor.children);
+  }, [editor.children, calculateListNumbers]);
+
+  // Memoize renderElement to prevent unnecessary re-renders as per Slate performance docs
+  const renderElement = useCallback(({ attributes, children, element }: any) => {
+    const style: React.CSSProperties = {
+      textAlign: element.align || "left",
+    };
+
+    if (element.type === "link") {
+      const isInternal = element.link?.type === "internal";
+      const url = isInternal
+        ? "#"
+        : element.url || element.link?.url || "#";
+
+      return (
+        <a
+          {...attributes}
+          href={url}
+          style={style}
+          className={`slate-link ${isInternal ? "internal-link" : "external-link"}`}
+          onClick={(e) => {
+            if (!readOnly) {
+              e.preventDefault();
+              editLink(element);
+            }
+          }}
+        >
+          {children}
+        </a>
+      );
+    }
+
+    if (element.type === "list-item") {
+      const indent = element.indent || 0;
+      const listType = element.listType || "unordered";
+
+      const listStyle: React.CSSProperties = {
+        ...style,
+        position: "relative",
+        listStyleType: "none",
+      };
+
+      // Find the element's index in the editor children to get the correct number
+      const elementIndex = editor.children.findIndex((child: any) => child === element);
+      const listNumber = listNumbers.get(`${elementIndex}`) || '';
+
+      return (
+        <div
+          {...attributes}
+          style={listStyle}
+          className={`slate-list-item slate-list-${listType}`}
+          data-indent={indent}
+          data-list-number={listNumber}
+        >
+          <span className="slate-list-bullet"></span>
+          <div className="slate-list-content">{children}</div>
+        </div>
+      );
+    }
+
+    if (element.type === "horizontal-rule") {
+      return (
+        <div {...attributes} contentEditable={false} style={{ ...style, userSelect: "none" }}>
+          {children}
+          <hr style={{ 
+            border: "none", 
+            borderTop: "1px solid #ccc", 
+            margin: "1em 0",
+            width: "100%"
+          }} />
+        </div>
+      );
+    }
+
+    if (element.type === "line-break") {
+      return (
+        <span {...attributes} contentEditable={false}>
+          {children}
+          <br />
+        </span>
+      );
+    }
+
+    // Handle different block types using built-in SLATE_BLOCKS configuration
+    const isValidBlockId = element.type in SLATE_BLOCKS;
+    const blockConfig = isValidBlockId ? SLATE_BLOCKS[element.type as BlockId] : undefined;
+    if (blockConfig && element.type === "no-tag") {
+      // Special handling for no-tag blocks (plain text without wrapper)
+      return (
+        <div {...attributes} style={style}>
+          {children}
+        </div>
+      );
+    }
+
+    // For standard blocks, use the appropriate HTML tag
+    if (blockConfig) {
+      const tagName = blockConfig.htmlTag;
+      return React.createElement(
+        tagName,
+        { ...attributes, style },
+        children,
+      );
+    }
+    // Default fallback to paragraph
+    return (
+      <p {...attributes} style={style}>
+        {children}
+      </p>
+    );
+  }, [readOnly, editLink, editor.children, listNumbers]);
+
+  // Memoize renderLeaf to prevent unnecessary re-renders as per Slate performance docs
+  const renderLeaf = useCallback(({ attributes, children, leaf }: any) => {
+
+    let el = <span {...attributes}>{children}</span>;
+
+    // Apply marks using the built-in SLATE_MARKS configuration
+    simplifiedProfile.marks.forEach((markId) => {
+      if ((leaf as any)[markId]) {
+        const markConfig = SLATE_MARKS[markId];
+        if (markConfig) {
+          if (markId === "extrabold") {
+            // Special handling for extrabold with CSS class
+            el = <span className="extrabold">{el}</span>;
+          } else {
+            // Standard HTML tag rendering
+            const tagName = markConfig.htmlTag;
+            el = React.createElement(tagName, {}, el);
+          }
+        }
+      }
+    });
+
+    return el;
+  }, [simplifiedProfile.marks]);
+
+  // Memoize renderPlaceholder for consistency
+  const renderPlaceholder = useCallback(({ attributes, children }: any) => (
+    <span {...attributes} className="p-2 text-gray-500">
+      {children}
+    </span>
+  ), []);
 
   return (
     <div className={`slate-editor ${props.className}`}>
@@ -675,147 +853,51 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
       >
         {!readOnly && (
           <div className="toolbar">
-            {toolbarStructure.map(([rowIndex, rowGroups]) => (
+            {toolbarStructure.map(([rowIndex, rowGroups], mapIndex) => (
               <div key={`row-${rowIndex}`} className="toolbar-row">
                 {rowGroups.map((group) =>
                   renderToolbarGroup(group, parseInt(rowIndex)),
                 )}
+                {/* Add strip formatting button to the last row */}
+                {mapIndex === toolbarStructure.length - 1 && (
+                  <div className="toolbar-button-group">
+                    <ToolbarButton
+                      icon="✗"
+                      active={false}
+                      onMouseDown={handleStripFormattingClick}
+                    />
+                  </div>
+                )}
               </div>
             ))}
+            {/* Fallback: if no toolbar structure exists, create a row for strip formatting */}
+            {toolbarStructure.length === 0 && (
+              <div className="toolbar-row">
+                <div className="toolbar-button-group">
+                  <ToolbarButton
+                    icon="✗"
+                    active={false}
+                    onMouseDown={handleStripFormattingClick}
+                  />
+                </div>
+              </div>
+            )}
           </div>
         )}
         <Editable
           className={classNames(
             readOnly ? "bg-gray-4" : "bg-gray-5",
             "focus-shadow p-2",
+            "slate-editable"
           )}
           readOnly={readOnly}
           placeholder={placeholder}
-          renderPlaceholder={({ attributes, children }) => (
-            <span {...attributes} className="p-2 text-gray-500">
-              {children}
-            </span>
-          )}
+          renderPlaceholder={renderPlaceholder}
           onFocus={onFocus}
           onBlur={onBlur}
           onKeyDown={handleKeyDown}
-          renderElement={({ attributes, children, element }) => {
-            const style: React.CSSProperties = {
-              textAlign: element.align || "left",
-            };
-
-            if (element.type === "link") {
-              const isInternal = element.link?.type === "internal";
-              const url = isInternal
-                ? "#"
-                : element.url || element.link?.url || "#";
-
-              return (
-                <a
-                  {...attributes}
-                  href={url}
-                  style={style}
-                  className={`slate-link ${isInternal ? "internal-link" : "external-link"}`}
-                  onClick={(e) => {
-                    if (!readOnly) {
-                      e.preventDefault();
-                      editLink(element);
-                    }
-                  }}
-                >
-                  {children}
-                </a>
-              );
-            }
-
-            if (element.type === "list-item") {
-              const indent = element.indent || 0;
-              const listType = element.listType || "unordered";
-              const isOrdered = listType === "ordered";
-
-              const listStyle: React.CSSProperties = {
-                ...style,
-                position: "relative",
-                listStyleType: "none",
-              };
-
-              return (
-                <div
-                  {...attributes}
-                  style={listStyle}
-                  className={`slate-list-item slate-list-${listType}`}
-                  data-indent={indent}
-                >
-                  <span className="slate-list-bullet"></span>
-                  <div className="slate-list-content">{children}</div>
-                </div>
-              );
-            }
-
-            if (element.type === "horizontal-rule") {
-              return (
-                <div {...attributes} contentEditable={false} style={{ ...style, userSelect: "none" }}>
-                  <hr style={{ 
-                    border: "none", 
-                    borderTop: "1px solid #ccc", 
-                    margin: "1em 0",
-                    width: "100%"
-                  }} />
-                  {children}
-                </div>
-              );
-            }
-
-            // Handle different block types using built-in SLATE_BLOCKS configuration
-            const isValidBlockId = element.type in SLATE_BLOCKS;
-            const blockConfig = isValidBlockId ? SLATE_BLOCKS[element.type as BlockId] : undefined;
-            if (blockConfig && element.type === "no-tag") {
-              // Special handling for no-tag blocks (plain text without wrapper)
-              return (
-                <div {...attributes} style={style}>
-                  {children}
-                </div>
-              );
-            }
-
-            // For standard blocks, use the appropriate HTML tag
-            if (blockConfig) {
-              const tagName = blockConfig.htmlTag;
-              return React.createElement(
-                tagName,
-                { ...attributes, style },
-                children,
-              );
-            }
-            // Default fallback to paragraph
-            return (
-              <p {...attributes} style={style}>
-                {children}
-              </p>
-            );
-          }}
-          renderLeaf={({ attributes, children, leaf }) => {
-            let el = <span {...attributes}>{children}</span>;
-
-            // Apply marks using the built-in SLATE_MARKS configuration
-            simplifiedProfile.marks.forEach((markId) => {
-              if ((leaf as any)[markId]) {
-                const markConfig = SLATE_MARKS[markId];
-                if (markConfig) {
-                  if (markId === "extrabold") {
-                    // Special handling for extrabold with CSS class
-                    el = <span className="extrabold">{el}</span>;
-                  } else {
-                    // Standard HTML tag rendering
-                    const tagName = markConfig.htmlTag;
-                    el = React.createElement(tagName, {}, el);
-                  }
-                }
-              }
-            });
-
-            return el;
-          }}
+          renderElement={renderElement}
+          renderLeaf={renderLeaf}
         />
       </Slate>
 

package/src/editor/field-types/richtext/config/pluginFactory.tsx

@@ -1,5 +1,5 @@
 import { Editor } from 'slate';
-import { withMark, withBlock, withAlignment, withLink, withList, withNormalization, withInsertion } from '../utils/plugins';
+import { withMark, withBlock, withAlignment, withLink, withList, withNormalization, withInsertion, withFormatting, withVoidElements } from '../utils/plugins';
 
 // Create plugins from configuration
 export const createPluginsFromConfig = (editor: Editor) => {
@@ -11,6 +11,8 @@ export const createPluginsFromConfig = (editor: Editor) => {
   enhancedEditor = withList(enhancedEditor);
   enhancedEditor = withLink(enhancedEditor);
   enhancedEditor = withInsertion(enhancedEditor);
+  enhancedEditor = withFormatting(enhancedEditor);
+  enhancedEditor = withVoidElements(enhancedEditor);
   
   // Add normalization plugin last to ensure it can normalize all other plugin behaviors
   enhancedEditor = withNormalization(enhancedEditor);

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

@@ -82,6 +82,8 @@ declare module "slate" {
         outdentList(): void;
 
         insertHorizontalRule(): void;
+
+        stripFormatting(): void;
       };
     Element: CustomElement;
     Text: CustomText;
@@ -100,6 +102,7 @@ export type CustomText = {
   readonly superscript?: boolean;
   readonly extrabold?: boolean;
   readonly isRawHtml?: boolean; // Flag to indicate this text should be preserved as raw HTML
+
 };
 
 export type Alignment = "left" | "center" | "right" | "justify";

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

@@ -206,7 +206,11 @@ const htmlToSlateInternal = (html: string, profile: SimplifiedProfile): Descenda
         }
         
         if (tagName === 'br') {
-          results.push({ text: '<br>' });
+          // Handle inline br elements as line-break elements 
+          results.push({
+            type: 'line-break',
+            children: [{ text: '' }]
+          } as any);
         } else if (tagName === 'a') {
           const href = childElement.getAttribute('href') || '';
           const target = childElement.getAttribute('target') || '_self';
@@ -273,7 +277,11 @@ const htmlToSlateInternal = (html: string, profile: SimplifiedProfile): Descenda
         const tagName = childElement.tagName.toLowerCase();
         
         if (tagName === 'br') {
-          results.push({ text: '<br>' });
+          // Handle inline br elements as line-break elements 
+          results.push({
+            type: 'line-break',
+            children: [{ text: '' }]
+          } as any);
         } else if (tagName === 'a') {
           const href = childElement.getAttribute('href') || '';
           const target = childElement.getAttribute('target') || '_self';
@@ -342,7 +350,11 @@ const htmlToSlateInternal = (html: string, profile: SimplifiedProfile): Descenda
         const tagName = element.tagName.toLowerCase();
         
         if (tagName === 'br') {
-          combinedChildren.push({ text: '<br>' });
+          // Handle inline br elements as line-break elements 
+          combinedChildren.push({
+            type: 'line-break',
+            children: [{ text: '' }]
+          } as any);
         } else {
           // Process other inline elements
           const inlineChildren = processNodeWithInlines(element, profile.marks);
@@ -370,10 +382,10 @@ const htmlToSlateInternal = (html: string, profile: SimplifiedProfile): Descenda
         const align = alignMatch ? alignMatch[1] as Alignment : undefined;
         
         if (tagName === 'br') {
-          // Handle standalone br elements at top level
+          // Handle standalone br elements as line-break elements
           nodes.push({
-            type: defaultBlockType,
-            children: [{ text: '<br>' }]
+            type: 'line-break',
+            children: [{ text: '' }]
           });
         } else if (tagName === 'hr') {
           // Handle horizontal rule elements
@@ -448,8 +460,7 @@ export const formatTextWithMarks = (child: CustomText, configuredMarks: readonly
   
   let text = child.text;
 
-  // Convert literal <br> text back to <br> tags
-  text = text.replace(/<br>/g, '<br>');
+  // Line breaks are now handled as elements, not text nodes
 
   // Apply marks using Slate's built-in mark system with strict typing
   configuredMarks.forEach(markId => {
@@ -563,7 +574,10 @@ const slateToHtmlInternal = (value: Descendant[], profile: SimplifiedProfile): s
     
     children.forEach(child => {
       if (SlateElement.isElement(child)) {
-        if (child.type === 'link') {
+        if (child.type === 'line-break') {
+          // Handle inline line break elements
+          result += '<br>';
+        } else if (child.type === 'link') {
           const linkElement = child as LinkElement;
           const isInternal = linkElement.link?.type === 'internal';
           
@@ -619,6 +633,8 @@ const slateToHtmlInternal = (value: Descendant[], profile: SimplifiedProfile): s
     // Handle horizontal rule elements
     if (element.type === 'horizontal-rule') {
       html += '<hr>';
+    } else if (element.type === 'line-break') {
+      html += '<br>';
     } else if (element.type === 'preserved-element') {
       // Handle preserved elements by restoring their original HTML
       const preservedElement = element as any;