@alpaca-editor/core 1.0.4045 → 1.0.4047

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

@@ -11,6 +11,8 @@ import {
   SLATE_MARKS,
   SLATE_BLOCKS,
   SLATE_ALIGNMENTS,
+  MarkId,
+  BlockId,
 } from "../types";
 import { SimpleToolbar } from "./SimpleToolbar";
 import { classNames } from "primereact/utils";
@@ -97,7 +99,7 @@ export const SimpleRichTextEditor = forwardRef<HTMLDivElement, ReactSlateProps>(
 
       // Check for active marks
       Object.keys(SLATE_MARKS).forEach((markId) => {
-        const markConfig = SLATE_MARKS[markId];
+        const markConfig = SLATE_MARKS[markId as MarkId];
         if (document.queryCommandState(getExecCommandForMark(markId))) {
           activeFormats.add(markId);
         }
@@ -235,7 +237,7 @@ export const SimpleRichTextEditor = forwardRef<HTMLDivElement, ReactSlateProps>(
         if (blockId === "no-tag") {
           document.execCommand("formatBlock", false, "div");
         } else {
-          const blockConfig = SLATE_BLOCKS[blockId];
+          const blockConfig = SLATE_BLOCKS[blockId as BlockId];
           if (blockConfig && blockConfig.htmlTag !== "no-tag") {
             document.execCommand(
               "formatBlock",

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

@@ -115,7 +115,7 @@ export const SimpleToolbar: React.FC<SimpleToolbarProps> = ({
             onSelect: () => {},
           };
 
-        case "strip":
+        /*case "strip":
           return {
             id: "strip-formatting",
             type: "strip",
@@ -123,7 +123,7 @@ export const SimpleToolbar: React.FC<SimpleToolbarProps> = ({
             icon: "✗",
             isActive: false,
             onSelect: () => stripFormatting(),
-          };
+          };*/
 
         default:
           return null;
@@ -292,7 +292,7 @@ export const SimpleToolbar: React.FC<SimpleToolbarProps> = ({
       acc[row].push(group);
       return acc;
     },
-    {} as Record<number, typeof profile.toolbar.groups>,
+    {} as Record<number, ToolbarGroupConfig[]>,
   );
 
   // Create strip formatting option that's always available

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

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

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

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { RichTextEditorProfile, SimplifiedProfile } from '../types';
+import { RichTextEditorProfile, SimplifiedProfile, MarkId, BlockId, AlignmentId } from '../types';
 
 // Cache for simplified profiles converted from complex profiles
 const simplifiedProfileCache = new Map<string, SimplifiedProfile>();
@@ -40,49 +40,55 @@ const convertToSimplifiedProfile = (profile: RichTextEditorProfile | null): Simp
     };
   }
   
-  const simplifiedProfile: SimplifiedProfile = {
-    marks: [],
-    blocks: [],
-    alignment: [],
-    lists: false,
-    links: false
-  };
+  // Build arrays separately to avoid readonly conflicts
+  const marks: MarkId[] = [];
+  const blocks: BlockId[] = [];
+  const alignment: AlignmentId[] = [];
+  let lists = false;
+  let links = false;
   
   // Extract capabilities from the profile groups
   profile.toolbar.groups.forEach(group => {
     group.options.forEach(option => {
       switch (option.type) {
         case 'mark':
-          if (!simplifiedProfile.marks.includes(option.id)) {
-            simplifiedProfile.marks.push(option.id);
+          if (!marks.includes(option.id)) {
+            marks.push(option.id);
           }
           break;
         case 'block':
-          if (!simplifiedProfile.blocks.includes(option.id)) {
-            simplifiedProfile.blocks.push(option.id);
+          if (!blocks.includes(option.id)) {
+            blocks.push(option.id);
           }
           break;
         case 'alignment':
-          if (!simplifiedProfile.alignment.includes(option.id)) {
-            simplifiedProfile.alignment.push(option.id);
+          if (!alignment.includes(option.id)) {
+            alignment.push(option.id);
           }
           break;
         case 'list':
-          simplifiedProfile.lists = true;
+          lists = true;
           break;
         case 'link':
-          simplifiedProfile.links = true;
+          links = true;
           break;
       }
     });
   });
   
   // Ensure we have at least one block type
-  if (simplifiedProfile.blocks.length === 0) {
-    simplifiedProfile.blocks.push('paragraph');
+  if (blocks.length === 0) {
+    blocks.push('paragraph');
   }
   
-  return simplifiedProfile;
+  // Construct the final object
+  return {
+    marks,
+    blocks,
+    alignment,
+    lists,
+    links
+  };
 };
 
 /**

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

@@ -31,7 +31,7 @@ export function useRichTextProfile(
   });
 
   useEffect(() => {
-    if (!profilePath) {
+    if (profilePath === undefined) {
       setState({
         profile: null,
         loading: false,

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

@@ -5,20 +5,71 @@ import { Link } from "../../LinkEditorDialog";
 import { HistoryEditor } from "slate-history";
 import { Field } from "../../pageModel";
 
+// Strict type definitions for mark IDs
+export type MarkId = keyof typeof SLATE_MARKS;
+export type BlockId = keyof typeof SLATE_BLOCKS;
+export type AlignmentId = keyof typeof SLATE_ALIGNMENTS;
+
+// Strict toolbar option types
+export type MarkOptionConfig = {
+  readonly type: "mark";
+  readonly id: MarkId;
+};
+
+export type BlockOptionConfig = {
+  readonly type: "block";
+  readonly id: BlockId;
+};
+
+export type AlignmentOptionConfig = {
+  readonly type: "alignment";
+  readonly id: AlignmentId;
+};
+
+export type LinkOptionConfig = {
+  readonly type: "link";
+  readonly id: "link";
+};
+
+export type ListOptionConfig = {
+  readonly type: "list";
+  readonly id: "unordered-list" | "ordered-list";
+};
+
+export type DividerOptionConfig = {
+  readonly type: "divider";
+  readonly id: "divider";
+};
+
+export type InsertionOptionConfig = {
+  readonly type: "insertion";
+  readonly id: "horizontal-rule";
+};
+
+// Union type for all possible toolbar options
+export type ToolbarOptionConfig = 
+  | MarkOptionConfig 
+  | BlockOptionConfig 
+  | AlignmentOptionConfig 
+  | LinkOptionConfig 
+  | ListOptionConfig 
+  | DividerOptionConfig
+  | InsertionOptionConfig;
+
 declare module "slate" {
   interface CustomTypes {
     Editor: BaseEditor &
       ReactEditor &
       HistoryEditor & {
-        // Plugin methods
-        isMarkActive(format: string): boolean;
-        toggleMark(format: string): void;
+        // Plugin methods with strict typing
+        isMarkActive(format: MarkId): boolean;
+        toggleMark(format: MarkId): void;
 
-        isBlockActive(format: string): boolean;
-        toggleBlock(format: string): void;
+        isBlockActive(format: BlockId): boolean;
+        toggleBlock(format: BlockId): void;
 
-        isAlignActive(align: string): boolean;
-        toggleAlign(align: string): void;
+        isAlignActive(align: Alignment): boolean;
+        toggleAlign(align: Alignment): void;
 
         isLinkActive(): boolean;
         insertLink(options?: {
@@ -29,132 +80,134 @@ declare module "slate" {
         toggleList(listType: "unordered" | "ordered"): void;
         indentList(): void;
         outdentList(): void;
+
+        insertHorizontalRule(): void;
       };
     Element: CustomElement;
     Text: CustomText;
   }
 }
 
-// Custom text type
+// Custom text type with strict mark typing
 export type CustomText = {
-  text: string;
-  bold?: boolean;
-  italic?: boolean;
-  underline?: boolean;
-  strikethrough?: boolean;
-  subscript?: boolean;
-  superscript?: boolean;
-  extrabold?: boolean;
-  isRawHtml?: boolean; // Flag to indicate this text should be preserved as raw HTML
+  readonly text: string;
+  // Mark properties - all optional booleans
+  readonly bold?: boolean;
+  readonly italic?: boolean;
+  readonly underline?: boolean;
+  readonly strikethrough?: boolean;
+  readonly subscript?: boolean;
+  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";
 
 // Generic element that can have any type
 export type CustomElement = {
-  type: string;
-  align?: Alignment;
-  listType?: "unordered" | "ordered";
-  indent?: number;
-  children: (CustomText | CustomElement)[];
-  [key: string]: any; // For any custom properties
+  readonly type: string;
+  readonly align?: Alignment;
+  readonly listType?: "unordered" | "ordered";
+  readonly indent?: number;
+  readonly children: readonly (CustomText | CustomElement)[];
+  readonly [key: string]: any; // For any custom properties
 };
 
 // Preserved element type for unsupported HTML elements
 export type PreservedElement = CustomElement & {
-  type: "preserved-element";
-  originalTag: string;
-  originalHtml: string;
-  attributes: Record<string, any>;
+  readonly type: "preserved-element";
+  readonly originalTag: string;
+  readonly originalHtml: string;
+  readonly attributes: Record<string, any>;
 };
 
 // Preserved inline element type for unsupported inline HTML elements
 export type PreservedInlineElement = CustomElement & {
-  type: "preserved-inline";
-  originalTag: string;
-  originalHtml: string;
-  attributes: Record<string, any>;
+  readonly type: "preserved-inline";
+  readonly originalTag: string;
+  readonly originalHtml: string;
+  readonly attributes: Record<string, any>;
 };
 
 export type LinkElement = CustomElement & {
-  type: "link";
-  link: Link;
+  readonly type: "link";
+  readonly link: Link;
 };
 
 export interface ReactSlateProps {
-  value?: string;
-  onChange?: (value: string) => void;
-  onFocus?: () => void;
-  onBlur?: () => void;
-  readOnly?: boolean;
-  placeholder?: string;
-  className?: string;
-  profile?: RichTextEditorProfile;
+  readonly value?: string;
+  readonly onChange?: (value: string) => void;
+  readonly onFocus?: () => void;
+  readonly onBlur?: () => void;
+  readonly readOnly?: boolean;
+  readonly placeholder?: string;
+  readonly className?: string;
+  readonly profile?: RichTextEditorProfile;
 }
 
+// Strict option interface
 export interface CustomOption {
-  id: string;
-  label?: string;
-  icon?: React.ReactNode;
-  isActive?: (editor: Editor) => boolean;
-  toggle?: (editor: Editor, event: React.MouseEvent) => void;
+  readonly id: string;
+  readonly label?: string;
+  readonly icon?: React.ReactNode;
+  readonly isActive?: (editor: Editor) => boolean;
+  readonly toggle?: (editor: Editor, event: React.MouseEvent) => void;
 }
 
-export type DropdownOption<T> = {
-  value: T;
-  label?: string;
-  icon?: React.ReactNode;
-  style?: React.CSSProperties;
-  isActive: (editor: Editor) => boolean;
-  onSelect: (editor: Editor, event: React.MouseEvent) => void;
+// Strict dropdown option type
+export type DropdownOption<T = CustomOption> = {
+  readonly value: T;
+  readonly label?: string;
+  readonly icon?: React.ReactNode;
+  readonly style?: React.CSSProperties;
+  readonly isActive: (editor: Editor) => boolean;
+  readonly onSelect: (editor: Editor, event: React.MouseEvent) => void;
 };
 
 export interface ToolbarButtonProps {
-  icon: React.ReactNode;
-  active: boolean;
-  onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  readonly icon: React.ReactNode;
+  readonly active: boolean;
+  readonly onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
+// Strict toolbar group configuration
 export interface ToolbarGroupConfig {
-  id: string;
-  label?: string;
-  display?: "buttons" | "dropdown";
-  showIconsOnly?: boolean;
-  options: ToolbarOptionConfig[];
-  row?: number; // Optional row identifier for grouping
-}
-
-export interface ToolbarOptionConfig {
-  type: "mark" | "block" | "alignment" | "link" | "list" | "divider" | string;
-  id: string; // Reference to the option in the corresponding collection
+  readonly id: string;
+  readonly label?: string;
+  readonly display?: "buttons" | "dropdown";
+  readonly showIconsOnly?: boolean;
+  readonly options: readonly ToolbarOptionConfig[];
+  readonly row?: number; // Optional row identifier for grouping
 }
 
+// Strict profile types
 export type RichTextEditorProfile = {
-  toolbar: {
-    groups: ToolbarGroupConfig[];
+  readonly toolbar: {
+    readonly groups: readonly ToolbarGroupConfig[];
   };
 };
 
 // Simplified profile structure that maps directly to Slate capabilities
 export interface SimplifiedProfile {
-  marks: string[]; // ['bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'extrabold']
-  blocks: string[]; // ['paragraph', 'no-tag', 'heading-1', 'heading-2', 'heading-3', 'heading-4', 'heading-5', 'heading-6']
-  alignment: string[]; // ['left', 'center', 'right', 'justify']
-  lists: boolean; // true if lists are enabled
-  links: boolean; // true if links are enabled
+  readonly marks: readonly MarkId[]; // Strict typing for marks
+  readonly blocks: readonly BlockId[]; // Strict typing for blocks
+  readonly alignment: readonly AlignmentId[]; // Strict typing for alignment
+  readonly lists: boolean; // true if lists are enabled
+  readonly links: boolean; // true if links are enabled
 }
 
-// Built-in Slate mark configurations
-export const SLATE_MARKS: Record<
-  string,
-  {
-    hotkey?: string;
-    htmlTag: string;
-    label: string;
-    icon: string;
-    renderHtml: (text: string) => string;
-  }
-> = {
+// Conversion result types for better error handling
+export type HtmlToSlateResult = 
+  | { readonly success: true; readonly data: import("slate").Descendant[] }
+  | { readonly success: false; readonly error: Error; readonly fallback: import("slate").Descendant[] };
+
+export type SlateToHtmlResult =
+  | { readonly success: true; readonly data: string }
+  | { readonly success: false; readonly error: Error; readonly fallback: string };
+
+// Built-in Slate mark configurations with strict typing
+export const SLATE_MARKS = {
   bold: {
     hotkey: "mod+b",
     htmlTag: "strong",
@@ -200,18 +253,10 @@ export const SLATE_MARKS: Record<
     icon: "𝐄𝐁",
     renderHtml: (text: string) => `<span class="extrabold">${text}</span>`,
   },
-};
+} as const;
 
-// Built-in Slate block configurations
-export const SLATE_BLOCKS: Record<
-  string,
-  {
-    htmlTag: string;
-    label: string;
-    icon: string;
-    renderHtml: (text: string, alignStyle: string) => string;
-  }
-> = {
+// Built-in Slate block configurations with strict typing
+export const SLATE_BLOCKS = {
   paragraph: {
     htmlTag: "p",
     label: "Paragraph",
@@ -267,23 +312,16 @@ export const SLATE_BLOCKS: Record<
     renderHtml: (text: string, alignStyle: string) =>
       `<h6${alignStyle}>${text}</h6>`,
   },
-};
+} as const;
 
-// Built-in alignment configurations
-export const SLATE_ALIGNMENTS: Record<
-  string,
-  {
-    label: string;
-    icon: string;
-    value: Alignment;
-  }
-> = {
-  left: { label: "Align Left", icon: "←", value: "left" },
-  center: { label: "Align Center", icon: "↔", value: "center" },
-  right: { label: "Align Right", icon: "→", value: "right" },
-  justify: { label: "Justify", icon: "≡", value: "justify" },
-};
+// Built-in alignment configurations with strict typing
+export const SLATE_ALIGNMENTS = {
+  left: { label: "Align Left", icon: "←", value: "left" as const },
+  center: { label: "Align Center", icon: "↔", value: "center" as const },
+  right: { label: "Align Right", icon: "→", value: "right" as const },
+  justify: { label: "Justify", icon: "≡", value: "justify" as const },
+} as const;
 
 export type RichTextField = Field & {
-  source: string;
+  readonly source: string;
 };