@particle-academy/react-fancy 4.13.0 → 4.14.0

package/dist/index.d.cts

@@ -1262,21 +1262,30 @@ interface PopoverProps {
     /** Delay in ms before closing after hover leaves. Default: 300 */
     hoverCloseDelay?: number;
 }
-interface PopoverTriggerProps {
+/**
+ * The trigger renders a `<span>` — it extends its attributes so consumers can
+ * forward `aria-*`, `data-*`, `id`, `title`, etc. onto the actual anchor node
+ * (e.g. `aria-label` for an icon-only trigger). Popover-owned props (ref,
+ * onClick, aria-expanded/haspopup) always win over forwarded ones.
+ */
+interface PopoverTriggerProps extends HTMLAttributes<HTMLSpanElement> {
     children: ReactNode;
-    className?: string;
 }
-interface PopoverContentProps {
+/**
+ * The content renders a `<div>` — it extends its attributes so consumers can
+ * forward `aria-*`/`data-*`/`role`/`id` onto the floating panel. Consumer
+ * `style` is merged under the Popover's positioning (left/top always win).
+ */
+interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
-    className?: string;
 }
 
-declare function PopoverTrigger({ children, className }: PopoverTriggerProps): react.JSX.Element;
+declare function PopoverTrigger({ children, className, ...rest }: PopoverTriggerProps): react.JSX.Element;
 declare namespace PopoverTrigger {
     var displayName: string;
 }
 
-declare function PopoverContent({ children, className }: PopoverContentProps): react.JSX.Element | null;
+declare function PopoverContent({ children, className, style, ...rest }: PopoverContentProps): react.JSX.Element | null;
 declare namespace PopoverContent {
     var displayName: string;
 }
@@ -2101,11 +2110,29 @@ interface EditorToolbarProps {
     onAction?: (command: string) => void;
     children?: ReactNode;
     className?: string;
+    /**
+     * Append a "Source" toggle (reveals the raw HTML/Markdown behind the editor)
+     * to the right of the default toolbar. Ignored when `children` are supplied —
+     * custom toolbars compose their own `<Editor.SourceToggle />`.
+     * @default true
+     */
+    showSourceToggle?: boolean;
 }
 interface EditorContentProps {
     className?: string;
     /** Max height in px before scrolling. When set, content area becomes scrollable. */
     maxHeight?: number;
+    /** Class names applied to the raw-source `<textarea>` shown while source mode is on. */
+    sourceClassName?: string;
+}
+interface EditorSourceToggleProps {
+    className?: string;
+    /** Toggle glyph/label. @default `</>` */
+    icon?: ReactNode;
+    /** Accessible title when in rich-text mode (click → source). @default "Source" */
+    title?: string;
+    /** Accessible title when in source mode (click → rich text). @default "Rich text" */
+    activeTitle?: string;
 }
 interface EditorProps {
     children: ReactNode;
@@ -2137,6 +2164,17 @@ interface EditorProps {
     mode?: FieldMode;
     /** Per-instance render extensions. Merged with any globally-registered extensions. */
     extensions?: RenderExtension[];
+    /**
+     * Controlled source-view flag. When `true` the content area shows the raw
+     * HTML/Markdown (`value`, in `outputFormat`) in an editable `<textarea>`
+     * instead of the rich-text surface. Pair with `onShowSourceChange`, or leave
+     * uncontrolled and drive it with the toolbar's Source toggle.
+     */
+    showSource?: boolean;
+    /** Initial source-view flag when uncontrolled. @default false */
+    defaultShowSource?: boolean;
+    /** Fired when the Source toggle (or an agent) flips source view on/off. */
+    onShowSourceChange?: (showSource: boolean) => void;
     /**
      * Skip HTML sanitization of the initial value. By default the initial markdown/HTML
      * is sanitized to remove `<script>`, `<iframe>`, event handlers, and `javascript:`
@@ -2147,7 +2185,7 @@ interface EditorProps {
     unsafe?: boolean;
 }
 
-declare function EditorToolbar({ actions, onAction, children, className, }: EditorToolbarProps): react.JSX.Element;
+declare function EditorToolbar({ actions, onAction, children, className, showSourceToggle, }: EditorToolbarProps): react.JSX.Element;
 declare namespace EditorToolbar {
     var displayName: string;
 }
@@ -2157,17 +2195,28 @@ declare namespace EditorToolbarSeparator {
     var displayName: string;
 }
 
-declare function EditorContent({ className, maxHeight }: EditorContentProps): react.JSX.Element;
+/**
+ * Toolbar button that reveals the raw HTML/Markdown behind the editor. Reads
+ * `showSource` / `setShowSource` from context, so it works in the default
+ * toolbar and in any custom toolbar composed with `useEditor()`.
+ */
+declare function EditorSourceToggle({ className, icon, title, activeTitle, }: EditorSourceToggleProps): react.JSX.Element;
+declare namespace EditorSourceToggle {
+    var displayName: string;
+}
+
+declare function EditorContent({ className, maxHeight, sourceClassName }: EditorContentProps): react.JSX.Element;
 declare namespace EditorContent {
     var displayName: string;
 }
 
-declare function EditorRoot({ children, className, value: controlledValue, defaultValue, onChange, outputFormat, valueFormat, lineSpacing, placeholder, mode: modeProp, extensions: instanceExtensions, unsafe, }: EditorProps): react.JSX.Element;
+declare function EditorRoot({ children, className, value: controlledValue, defaultValue, onChange, outputFormat, valueFormat, lineSpacing, placeholder, mode: modeProp, extensions: instanceExtensions, unsafe, showSource: showSourceProp, defaultShowSource, onShowSourceChange, }: EditorProps): react.JSX.Element;
 declare const Editor: typeof EditorRoot & {
     Toolbar: typeof EditorToolbar & {
         Separator: typeof EditorToolbarSeparator;
     };
     Content: typeof EditorContent;
+    SourceToggle: typeof EditorSourceToggle;
 };
 
 interface EditorContextValue {
@@ -2180,10 +2229,18 @@ interface EditorContextValue {
     placeholder?: string;
     /** Merged render extensions (global + instance). */
     extensions: RenderExtension[];
+    /** Whether the raw-source view (textarea) is showing instead of the rich-text surface. */
+    showSource: boolean;
+    /** Toggle/set the raw-source view. */
+    setShowSource: (showSource: boolean) => void;
     /** Initial HTML content to load into the editor on mount */
     _initialHtml: string;
     /** @internal Called by EditorContent on input events */
     _onInput: () => void;
+    /** @internal Raw source value (`value` in `outputFormat`), for the source textarea. */
+    _sourceValue: string;
+    /** @internal Commit an edit made directly in the source textarea. */
+    _onSourceInput: (value: string) => void;
 }
 declare function useEditor(): EditorContextValue;
 
@@ -3640,4 +3697,4 @@ declare const AudioViewer: react.ForwardRefExoticComponent<AudioViewerProps & re
  */
 declare const PdfViewer: react.ForwardRefExoticComponent<PdfViewerProps & react.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, type AccordionOrientation, AccordionPanel, AccordionPanelContent, type AccordionPanelContentProps, type AccordionPanelProps, AccordionPanelSection, type AccordionPanelSectionProps, AccordionPanelTrigger, type AccordionPanelTriggerProps, type AccordionProps, type AccordionTriggerProps, Action, type ActionColor, type ActionProps, type AffixPosition, AudioViewer, type AudioViewerProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Brand, type BrandProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, type ButtonColor, type ButtonProps, Calendar, type CalendarMode, type CalendarProps, Callout, type CalloutProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, type CarouselVariant, Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps, ChatDrawer, type ChatDrawerProps, type ChatDrawerTab, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type Color, ColorPicker, type ColorPickerProps, Command, type CommandContextValue, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, Composer, type ComposerProps, ContentRenderer, type ContentRendererProps, ContextMenu, type ContextMenuContentProps, type ContextMenuContextValue, type ContextMenuItemProps, type ContextMenuProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, type ControlledAdapterHandle, DatePicker, type DatePickerProps, type DateRange, DisplayValue, type DisplayValueProps, type DropPosition, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorToolbarProps, Emoji, type EmojiCategory, type EmojiCategoryKey, type EmojiEntry, type EmojiFlatEntry, type EmojiProps, EmojiSelect, type EmojiSelectProps, FauxClient, type FauxClientProps, Field, type FieldMode, FieldModeContext, type FieldModeContextValue, type FieldProps, FileBrowser, type FileBrowserContextValue, type FileBrowserNodeProps, type FileBrowserPathBarProps, type FileBrowserProps, type FileBrowserProvider, type FileBrowserRow, type FileBrowserToolbarProps, type FileBrowserTreeProps, type FileEntry, type FileKind, type FileLoadStatus, type FileSelectMode, type FileSnapshotNode, type FileSort, type FileSortDirection, type FileSortField, FileUpload, type FileUploadContextValue, type FileUploadDropzoneProps, type FileUploadListProps, type FileUploadProps, Form, type FormProps, FormProvider, type FormProviderProps, Heading, type HeadingProps, Icon, type IconProps, type IconSet, ImageViewer, type ImageViewerProps, type ImageViewerViewport, Input, type InputAffixProps, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, InputTag, type InputTagAdapter, type InputTagAdapterState, type InputTagProps, type InputTagTrigger, type InputTagTriggers, Kanban, type KanbanCardMoveHandler, type KanbanCardProps, type KanbanColumnHandleProps, type KanbanColumnMoveHandler, type KanbanColumnProps, type KanbanContextValue, type KanbanProps, MagicWand, type MagicWandAction, type MagicWandAppearance, type MagicWandProps, type MagicWandSelection, Marquee, type MarqueeDirection, type MarqueeProps, type MediaKind, MediaViewer, type MediaViewerProps, Menu, type MenuContextValue, type MenuGroupProps, type MenuItemProps, type MenuOrientation, type MenuProps, type MenuSubmenuProps, MobileMenu, type MobileMenuBottomBarProps, type MobileMenuContextValue, type MobileMenuFlyoutProps, type MobileMenuItemProps, type MobileMenuSide, type MobileMenuVariant, Modal, type ModalBodyProps, type ModalContextValue, type ModalFooterProps, type ModalHeaderProps, type ModalProps, MoodMeter, type MoodMeterProps, MultiSwitch, type MultiSwitchProps, Navbar, type NavbarBrandProps, type NavbarContextValue, type NavbarItemProps, type NavbarItemsProps, type NavbarProps, type NavbarToggleProps, type NodeRect, OtpInput, type OtpInputProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerProps, Pillbox, type PillboxProps, type Placement, Popover, type PopoverContentProps, type PopoverContextValue, type PopoverProps, type PopoverTriggerProps, Portal, type PortalProps, Profile, type ProfileProps, Progress, type ProgressProps, type PromptAttachment, type PromptCmd, PromptInput, type PromptInputProps, type PromptMention, RadioGroup, type RadioGroupProps, ReasonTag, type ReasonTagProps, type ReasonTagSource, type ReasonTagTheme, type RenderExtension, type RenderExtensionProps, type ResolveMediaTypeInput, SKIN_TONES, type SectionRenderState, type SectionRenderable, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, type Size, Skeleton, type SkeletonProps, type SkinTone, Slider, type SliderProps, StickyNote, type StickyNoteColor, type StickyNoteProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableRowTrayProps, type TableSearchProps, type TableTrayProps, Tabs, type TabsContextValue, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, TimeGrid, type TimeGridProps, type TimeGridTone, TimePicker, type TimePickerProps, Timeline, type TimelineBlockProps, type TimelineEvent, type TimelineItemProps, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toast, type ToastContextValue, type ToastData, type ToastPosition, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, type Variant, VideoViewer, type VideoViewerProps, applyTone, cn, configureIcons, contentEditableAdapter, controlledAdapter, find, hasSkinTones, inputAdapter, registerExtension, registerExtensions, registerIconAddendum, registerIconSet, registerIcons, resolve, resolveMediaType, sanitizeHref, sanitizeHtml, search, skinTones, textareaAdapter, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFieldMode, useFileBrowser, useFileUpload, useFloatingPosition, useFocusTrap, useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
+export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, type AccordionOrientation, AccordionPanel, AccordionPanelContent, type AccordionPanelContentProps, type AccordionPanelProps, AccordionPanelSection, type AccordionPanelSectionProps, AccordionPanelTrigger, type AccordionPanelTriggerProps, type AccordionProps, type AccordionTriggerProps, Action, type ActionColor, type ActionProps, type AffixPosition, AudioViewer, type AudioViewerProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Brand, type BrandProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, type ButtonColor, type ButtonProps, Calendar, type CalendarMode, type CalendarProps, Callout, type CalloutProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, type CarouselVariant, Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps, ChatDrawer, type ChatDrawerProps, type ChatDrawerTab, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type Color, ColorPicker, type ColorPickerProps, Command, type CommandContextValue, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, Composer, type ComposerProps, ContentRenderer, type ContentRendererProps, ContextMenu, type ContextMenuContentProps, type ContextMenuContextValue, type ContextMenuItemProps, type ContextMenuProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, type ControlledAdapterHandle, DatePicker, type DatePickerProps, type DateRange, DisplayValue, type DisplayValueProps, type DropPosition, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorSourceToggleProps, type EditorToolbarProps, Emoji, type EmojiCategory, type EmojiCategoryKey, type EmojiEntry, type EmojiFlatEntry, type EmojiProps, EmojiSelect, type EmojiSelectProps, FauxClient, type FauxClientProps, Field, type FieldMode, FieldModeContext, type FieldModeContextValue, type FieldProps, FileBrowser, type FileBrowserContextValue, type FileBrowserNodeProps, type FileBrowserPathBarProps, type FileBrowserProps, type FileBrowserProvider, type FileBrowserRow, type FileBrowserToolbarProps, type FileBrowserTreeProps, type FileEntry, type FileKind, type FileLoadStatus, type FileSelectMode, type FileSnapshotNode, type FileSort, type FileSortDirection, type FileSortField, FileUpload, type FileUploadContextValue, type FileUploadDropzoneProps, type FileUploadListProps, type FileUploadProps, Form, type FormProps, FormProvider, type FormProviderProps, Heading, type HeadingProps, Icon, type IconProps, type IconSet, ImageViewer, type ImageViewerProps, type ImageViewerViewport, Input, type InputAffixProps, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, InputTag, type InputTagAdapter, type InputTagAdapterState, type InputTagProps, type InputTagTrigger, type InputTagTriggers, Kanban, type KanbanCardMoveHandler, type KanbanCardProps, type KanbanColumnHandleProps, type KanbanColumnMoveHandler, type KanbanColumnProps, type KanbanContextValue, type KanbanProps, MagicWand, type MagicWandAction, type MagicWandAppearance, type MagicWandProps, type MagicWandSelection, Marquee, type MarqueeDirection, type MarqueeProps, type MediaKind, MediaViewer, type MediaViewerProps, Menu, type MenuContextValue, type MenuGroupProps, type MenuItemProps, type MenuOrientation, type MenuProps, type MenuSubmenuProps, MobileMenu, type MobileMenuBottomBarProps, type MobileMenuContextValue, type MobileMenuFlyoutProps, type MobileMenuItemProps, type MobileMenuSide, type MobileMenuVariant, Modal, type ModalBodyProps, type ModalContextValue, type ModalFooterProps, type ModalHeaderProps, type ModalProps, MoodMeter, type MoodMeterProps, MultiSwitch, type MultiSwitchProps, Navbar, type NavbarBrandProps, type NavbarContextValue, type NavbarItemProps, type NavbarItemsProps, type NavbarProps, type NavbarToggleProps, type NodeRect, OtpInput, type OtpInputProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerProps, Pillbox, type PillboxProps, type Placement, Popover, type PopoverContentProps, type PopoverContextValue, type PopoverProps, type PopoverTriggerProps, Portal, type PortalProps, Profile, type ProfileProps, Progress, type ProgressProps, type PromptAttachment, type PromptCmd, PromptInput, type PromptInputProps, type PromptMention, RadioGroup, type RadioGroupProps, ReasonTag, type ReasonTagProps, type ReasonTagSource, type ReasonTagTheme, type RenderExtension, type RenderExtensionProps, type ResolveMediaTypeInput, SKIN_TONES, type SectionRenderState, type SectionRenderable, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, type Size, Skeleton, type SkeletonProps, type SkinTone, Slider, type SliderProps, StickyNote, type StickyNoteColor, type StickyNoteProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableRowTrayProps, type TableSearchProps, type TableTrayProps, Tabs, type TabsContextValue, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, TimeGrid, type TimeGridProps, type TimeGridTone, TimePicker, type TimePickerProps, Timeline, type TimelineBlockProps, type TimelineEvent, type TimelineItemProps, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toast, type ToastContextValue, type ToastData, type ToastPosition, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, type Variant, VideoViewer, type VideoViewerProps, applyTone, cn, configureIcons, contentEditableAdapter, controlledAdapter, find, hasSkinTones, inputAdapter, registerExtension, registerExtensions, registerIconAddendum, registerIconSet, registerIcons, resolve, resolveMediaType, sanitizeHref, sanitizeHtml, search, skinTones, textareaAdapter, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFieldMode, useFileBrowser, useFileUpload, useFloatingPosition, useFocusTrap, useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };

package/dist/index.d.ts

@@ -1262,21 +1262,30 @@ interface PopoverProps {
     /** Delay in ms before closing after hover leaves. Default: 300 */
     hoverCloseDelay?: number;
 }
-interface PopoverTriggerProps {
+/**
+ * The trigger renders a `<span>` — it extends its attributes so consumers can
+ * forward `aria-*`, `data-*`, `id`, `title`, etc. onto the actual anchor node
+ * (e.g. `aria-label` for an icon-only trigger). Popover-owned props (ref,
+ * onClick, aria-expanded/haspopup) always win over forwarded ones.
+ */
+interface PopoverTriggerProps extends HTMLAttributes<HTMLSpanElement> {
     children: ReactNode;
-    className?: string;
 }
-interface PopoverContentProps {
+/**
+ * The content renders a `<div>` — it extends its attributes so consumers can
+ * forward `aria-*`/`data-*`/`role`/`id` onto the floating panel. Consumer
+ * `style` is merged under the Popover's positioning (left/top always win).
+ */
+interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
-    className?: string;
 }
 
-declare function PopoverTrigger({ children, className }: PopoverTriggerProps): react.JSX.Element;
+declare function PopoverTrigger({ children, className, ...rest }: PopoverTriggerProps): react.JSX.Element;
 declare namespace PopoverTrigger {
     var displayName: string;
 }
 
-declare function PopoverContent({ children, className }: PopoverContentProps): react.JSX.Element | null;
+declare function PopoverContent({ children, className, style, ...rest }: PopoverContentProps): react.JSX.Element | null;
 declare namespace PopoverContent {
     var displayName: string;
 }
@@ -2101,11 +2110,29 @@ interface EditorToolbarProps {
     onAction?: (command: string) => void;
     children?: ReactNode;
     className?: string;
+    /**
+     * Append a "Source" toggle (reveals the raw HTML/Markdown behind the editor)
+     * to the right of the default toolbar. Ignored when `children` are supplied —
+     * custom toolbars compose their own `<Editor.SourceToggle />`.
+     * @default true
+     */
+    showSourceToggle?: boolean;
 }
 interface EditorContentProps {
     className?: string;
     /** Max height in px before scrolling. When set, content area becomes scrollable. */
     maxHeight?: number;
+    /** Class names applied to the raw-source `<textarea>` shown while source mode is on. */
+    sourceClassName?: string;
+}
+interface EditorSourceToggleProps {
+    className?: string;
+    /** Toggle glyph/label. @default `</>` */
+    icon?: ReactNode;
+    /** Accessible title when in rich-text mode (click → source). @default "Source" */
+    title?: string;
+    /** Accessible title when in source mode (click → rich text). @default "Rich text" */
+    activeTitle?: string;
 }
 interface EditorProps {
     children: ReactNode;
@@ -2137,6 +2164,17 @@ interface EditorProps {
     mode?: FieldMode;
     /** Per-instance render extensions. Merged with any globally-registered extensions. */
     extensions?: RenderExtension[];
+    /**
+     * Controlled source-view flag. When `true` the content area shows the raw
+     * HTML/Markdown (`value`, in `outputFormat`) in an editable `<textarea>`
+     * instead of the rich-text surface. Pair with `onShowSourceChange`, or leave
+     * uncontrolled and drive it with the toolbar's Source toggle.
+     */
+    showSource?: boolean;
+    /** Initial source-view flag when uncontrolled. @default false */
+    defaultShowSource?: boolean;
+    /** Fired when the Source toggle (or an agent) flips source view on/off. */
+    onShowSourceChange?: (showSource: boolean) => void;
     /**
      * Skip HTML sanitization of the initial value. By default the initial markdown/HTML
      * is sanitized to remove `<script>`, `<iframe>`, event handlers, and `javascript:`
@@ -2147,7 +2185,7 @@ interface EditorProps {
     unsafe?: boolean;
 }
 
-declare function EditorToolbar({ actions, onAction, children, className, }: EditorToolbarProps): react.JSX.Element;
+declare function EditorToolbar({ actions, onAction, children, className, showSourceToggle, }: EditorToolbarProps): react.JSX.Element;
 declare namespace EditorToolbar {
     var displayName: string;
 }
@@ -2157,17 +2195,28 @@ declare namespace EditorToolbarSeparator {
     var displayName: string;
 }
 
-declare function EditorContent({ className, maxHeight }: EditorContentProps): react.JSX.Element;
+/**
+ * Toolbar button that reveals the raw HTML/Markdown behind the editor. Reads
+ * `showSource` / `setShowSource` from context, so it works in the default
+ * toolbar and in any custom toolbar composed with `useEditor()`.
+ */
+declare function EditorSourceToggle({ className, icon, title, activeTitle, }: EditorSourceToggleProps): react.JSX.Element;
+declare namespace EditorSourceToggle {
+    var displayName: string;
+}
+
+declare function EditorContent({ className, maxHeight, sourceClassName }: EditorContentProps): react.JSX.Element;
 declare namespace EditorContent {
     var displayName: string;
 }
 
-declare function EditorRoot({ children, className, value: controlledValue, defaultValue, onChange, outputFormat, valueFormat, lineSpacing, placeholder, mode: modeProp, extensions: instanceExtensions, unsafe, }: EditorProps): react.JSX.Element;
+declare function EditorRoot({ children, className, value: controlledValue, defaultValue, onChange, outputFormat, valueFormat, lineSpacing, placeholder, mode: modeProp, extensions: instanceExtensions, unsafe, showSource: showSourceProp, defaultShowSource, onShowSourceChange, }: EditorProps): react.JSX.Element;
 declare const Editor: typeof EditorRoot & {
     Toolbar: typeof EditorToolbar & {
         Separator: typeof EditorToolbarSeparator;
     };
     Content: typeof EditorContent;
+    SourceToggle: typeof EditorSourceToggle;
 };
 
 interface EditorContextValue {
@@ -2180,10 +2229,18 @@ interface EditorContextValue {
     placeholder?: string;
     /** Merged render extensions (global + instance). */
     extensions: RenderExtension[];
+    /** Whether the raw-source view (textarea) is showing instead of the rich-text surface. */
+    showSource: boolean;
+    /** Toggle/set the raw-source view. */
+    setShowSource: (showSource: boolean) => void;
     /** Initial HTML content to load into the editor on mount */
     _initialHtml: string;
     /** @internal Called by EditorContent on input events */
     _onInput: () => void;
+    /** @internal Raw source value (`value` in `outputFormat`), for the source textarea. */
+    _sourceValue: string;
+    /** @internal Commit an edit made directly in the source textarea. */
+    _onSourceInput: (value: string) => void;
 }
 declare function useEditor(): EditorContextValue;
 
@@ -3640,4 +3697,4 @@ declare const AudioViewer: react.ForwardRefExoticComponent<AudioViewerProps & re
  */
 declare const PdfViewer: react.ForwardRefExoticComponent<PdfViewerProps & react.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, type AccordionOrientation, AccordionPanel, AccordionPanelContent, type AccordionPanelContentProps, type AccordionPanelProps, AccordionPanelSection, type AccordionPanelSectionProps, AccordionPanelTrigger, type AccordionPanelTriggerProps, type AccordionProps, type AccordionTriggerProps, Action, type ActionColor, type ActionProps, type AffixPosition, AudioViewer, type AudioViewerProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Brand, type BrandProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, type ButtonColor, type ButtonProps, Calendar, type CalendarMode, type CalendarProps, Callout, type CalloutProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, type CarouselVariant, Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps, ChatDrawer, type ChatDrawerProps, type ChatDrawerTab, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type Color, ColorPicker, type ColorPickerProps, Command, type CommandContextValue, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, Composer, type ComposerProps, ContentRenderer, type ContentRendererProps, ContextMenu, type ContextMenuContentProps, type ContextMenuContextValue, type ContextMenuItemProps, type ContextMenuProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, type ControlledAdapterHandle, DatePicker, type DatePickerProps, type DateRange, DisplayValue, type DisplayValueProps, type DropPosition, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorToolbarProps, Emoji, type EmojiCategory, type EmojiCategoryKey, type EmojiEntry, type EmojiFlatEntry, type EmojiProps, EmojiSelect, type EmojiSelectProps, FauxClient, type FauxClientProps, Field, type FieldMode, FieldModeContext, type FieldModeContextValue, type FieldProps, FileBrowser, type FileBrowserContextValue, type FileBrowserNodeProps, type FileBrowserPathBarProps, type FileBrowserProps, type FileBrowserProvider, type FileBrowserRow, type FileBrowserToolbarProps, type FileBrowserTreeProps, type FileEntry, type FileKind, type FileLoadStatus, type FileSelectMode, type FileSnapshotNode, type FileSort, type FileSortDirection, type FileSortField, FileUpload, type FileUploadContextValue, type FileUploadDropzoneProps, type FileUploadListProps, type FileUploadProps, Form, type FormProps, FormProvider, type FormProviderProps, Heading, type HeadingProps, Icon, type IconProps, type IconSet, ImageViewer, type ImageViewerProps, type ImageViewerViewport, Input, type InputAffixProps, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, InputTag, type InputTagAdapter, type InputTagAdapterState, type InputTagProps, type InputTagTrigger, type InputTagTriggers, Kanban, type KanbanCardMoveHandler, type KanbanCardProps, type KanbanColumnHandleProps, type KanbanColumnMoveHandler, type KanbanColumnProps, type KanbanContextValue, type KanbanProps, MagicWand, type MagicWandAction, type MagicWandAppearance, type MagicWandProps, type MagicWandSelection, Marquee, type MarqueeDirection, type MarqueeProps, type MediaKind, MediaViewer, type MediaViewerProps, Menu, type MenuContextValue, type MenuGroupProps, type MenuItemProps, type MenuOrientation, type MenuProps, type MenuSubmenuProps, MobileMenu, type MobileMenuBottomBarProps, type MobileMenuContextValue, type MobileMenuFlyoutProps, type MobileMenuItemProps, type MobileMenuSide, type MobileMenuVariant, Modal, type ModalBodyProps, type ModalContextValue, type ModalFooterProps, type ModalHeaderProps, type ModalProps, MoodMeter, type MoodMeterProps, MultiSwitch, type MultiSwitchProps, Navbar, type NavbarBrandProps, type NavbarContextValue, type NavbarItemProps, type NavbarItemsProps, type NavbarProps, type NavbarToggleProps, type NodeRect, OtpInput, type OtpInputProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerProps, Pillbox, type PillboxProps, type Placement, Popover, type PopoverContentProps, type PopoverContextValue, type PopoverProps, type PopoverTriggerProps, Portal, type PortalProps, Profile, type ProfileProps, Progress, type ProgressProps, type PromptAttachment, type PromptCmd, PromptInput, type PromptInputProps, type PromptMention, RadioGroup, type RadioGroupProps, ReasonTag, type ReasonTagProps, type ReasonTagSource, type ReasonTagTheme, type RenderExtension, type RenderExtensionProps, type ResolveMediaTypeInput, SKIN_TONES, type SectionRenderState, type SectionRenderable, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, type Size, Skeleton, type SkeletonProps, type SkinTone, Slider, type SliderProps, StickyNote, type StickyNoteColor, type StickyNoteProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableRowTrayProps, type TableSearchProps, type TableTrayProps, Tabs, type TabsContextValue, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, TimeGrid, type TimeGridProps, type TimeGridTone, TimePicker, type TimePickerProps, Timeline, type TimelineBlockProps, type TimelineEvent, type TimelineItemProps, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toast, type ToastContextValue, type ToastData, type ToastPosition, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, type Variant, VideoViewer, type VideoViewerProps, applyTone, cn, configureIcons, contentEditableAdapter, controlledAdapter, find, hasSkinTones, inputAdapter, registerExtension, registerExtensions, registerIconAddendum, registerIconSet, registerIcons, resolve, resolveMediaType, sanitizeHref, sanitizeHtml, search, skinTones, textareaAdapter, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFieldMode, useFileBrowser, useFileUpload, useFloatingPosition, useFocusTrap, useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
+export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, type AccordionOrientation, AccordionPanel, AccordionPanelContent, type AccordionPanelContentProps, type AccordionPanelProps, AccordionPanelSection, type AccordionPanelSectionProps, AccordionPanelTrigger, type AccordionPanelTriggerProps, type AccordionProps, type AccordionTriggerProps, Action, type ActionColor, type ActionProps, type AffixPosition, AudioViewer, type AudioViewerProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Brand, type BrandProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, type ButtonColor, type ButtonProps, Calendar, type CalendarMode, type CalendarProps, Callout, type CalloutProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, type CarouselVariant, Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps, ChatDrawer, type ChatDrawerProps, type ChatDrawerTab, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type Color, ColorPicker, type ColorPickerProps, Command, type CommandContextValue, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, Composer, type ComposerProps, ContentRenderer, type ContentRendererProps, ContextMenu, type ContextMenuContentProps, type ContextMenuContextValue, type ContextMenuItemProps, type ContextMenuProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, type ControlledAdapterHandle, DatePicker, type DatePickerProps, type DateRange, DisplayValue, type DisplayValueProps, type DropPosition, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorSourceToggleProps, type EditorToolbarProps, Emoji, type EmojiCategory, type EmojiCategoryKey, type EmojiEntry, type EmojiFlatEntry, type EmojiProps, EmojiSelect, type EmojiSelectProps, FauxClient, type FauxClientProps, Field, type FieldMode, FieldModeContext, type FieldModeContextValue, type FieldProps, FileBrowser, type FileBrowserContextValue, type FileBrowserNodeProps, type FileBrowserPathBarProps, type FileBrowserProps, type FileBrowserProvider, type FileBrowserRow, type FileBrowserToolbarProps, type FileBrowserTreeProps, type FileEntry, type FileKind, type FileLoadStatus, type FileSelectMode, type FileSnapshotNode, type FileSort, type FileSortDirection, type FileSortField, FileUpload, type FileUploadContextValue, type FileUploadDropzoneProps, type FileUploadListProps, type FileUploadProps, Form, type FormProps, FormProvider, type FormProviderProps, Heading, type HeadingProps, Icon, type IconProps, type IconSet, ImageViewer, type ImageViewerProps, type ImageViewerViewport, Input, type InputAffixProps, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, InputTag, type InputTagAdapter, type InputTagAdapterState, type InputTagProps, type InputTagTrigger, type InputTagTriggers, Kanban, type KanbanCardMoveHandler, type KanbanCardProps, type KanbanColumnHandleProps, type KanbanColumnMoveHandler, type KanbanColumnProps, type KanbanContextValue, type KanbanProps, MagicWand, type MagicWandAction, type MagicWandAppearance, type MagicWandProps, type MagicWandSelection, Marquee, type MarqueeDirection, type MarqueeProps, type MediaKind, MediaViewer, type MediaViewerProps, Menu, type MenuContextValue, type MenuGroupProps, type MenuItemProps, type MenuOrientation, type MenuProps, type MenuSubmenuProps, MobileMenu, type MobileMenuBottomBarProps, type MobileMenuContextValue, type MobileMenuFlyoutProps, type MobileMenuItemProps, type MobileMenuSide, type MobileMenuVariant, Modal, type ModalBodyProps, type ModalContextValue, type ModalFooterProps, type ModalHeaderProps, type ModalProps, MoodMeter, type MoodMeterProps, MultiSwitch, type MultiSwitchProps, Navbar, type NavbarBrandProps, type NavbarContextValue, type NavbarItemProps, type NavbarItemsProps, type NavbarProps, type NavbarToggleProps, type NodeRect, OtpInput, type OtpInputProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerProps, Pillbox, type PillboxProps, type Placement, Popover, type PopoverContentProps, type PopoverContextValue, type PopoverProps, type PopoverTriggerProps, Portal, type PortalProps, Profile, type ProfileProps, Progress, type ProgressProps, type PromptAttachment, type PromptCmd, PromptInput, type PromptInputProps, type PromptMention, RadioGroup, type RadioGroupProps, ReasonTag, type ReasonTagProps, type ReasonTagSource, type ReasonTagTheme, type RenderExtension, type RenderExtensionProps, type ResolveMediaTypeInput, SKIN_TONES, type SectionRenderState, type SectionRenderable, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, type Size, Skeleton, type SkeletonProps, type SkinTone, Slider, type SliderProps, StickyNote, type StickyNoteColor, type StickyNoteProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableRowTrayProps, type TableSearchProps, type TableTrayProps, Tabs, type TabsContextValue, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, TimeGrid, type TimeGridProps, type TimeGridTone, TimePicker, type TimePickerProps, Timeline, type TimelineBlockProps, type TimelineEvent, type TimelineItemProps, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toast, type ToastContextValue, type ToastData, type ToastPosition, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, type Variant, VideoViewer, type VideoViewerProps, applyTone, cn, configureIcons, contentEditableAdapter, controlledAdapter, find, hasSkinTones, inputAdapter, registerExtension, registerExtensions, registerIconAddendum, registerIconSet, registerIcons, resolve, resolveMediaType, sanitizeHref, sanitizeHtml, search, skinTones, textareaAdapter, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFieldMode, useFileBrowser, useFileUpload, useFloatingPosition, useFocusTrap, useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };

package/dist/index.js

@@ -7882,11 +7882,12 @@ function usePopover() {
   }
   return ctx;
 }
-function PopoverTrigger({ children, className }) {
+function PopoverTrigger({ children, className, ...rest }) {
   const { setOpen, open, anchorRef, hover, onHoverEnter, onHoverLeave } = usePopover();
   return /* @__PURE__ */ jsx(
     "span",
     {
+      ...rest,
       ref: anchorRef,
       "data-react-fancy-popover-trigger": "",
       className: cn("inline-flex", className),
@@ -7900,7 +7901,7 @@ function PopoverTrigger({ children, className }) {
   );
 }
 PopoverTrigger.displayName = "PopoverTrigger";
-function PopoverContent({ children, className }) {
+function PopoverContent({ children, className, style, ...rest }) {
   const { open, setOpen, anchorRef, floatingRef, placement, offset, hover, onHoverEnter, onHoverLeave } = usePopover();
   const outsideRef = useRef(null);
   const position = useFloatingPosition(anchorRef, floatingRef, {
@@ -7916,6 +7917,7 @@ function PopoverContent({ children, className }) {
   return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
     "div",
     {
+      ...rest,
       ref: (node) => {
         outsideRef.current = node;
         floatingRef.current = node;
@@ -7926,7 +7928,7 @@ function PopoverContent({ children, className }) {
         positioned ? "fancy-scale-in" : "invisible",
         className
       ),
-      style: { left: position.x, top: position.y },
+      style: { ...style, left: position.x, top: position.y },
       onMouseEnter: hover ? onHoverEnter : void 0,
       onMouseLeave: hover ? onHoverLeave : void 0,
       children
@@ -11340,6 +11342,31 @@ function useEditor() {
   }
   return ctx;
 }
+function EditorSourceToggle({
+  className,
+  icon = "</>",
+  title = "Source",
+  activeTitle = "Rich text"
+}) {
+  const { showSource, setShowSource } = useEditor();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => setShowSource(!showSource),
+      title: showSource ? activeTitle : title,
+      "aria-pressed": showSource,
+      "data-react-fancy-editor-source-toggle": "",
+      className: cn(
+        "inline-flex h-8 items-center justify-center rounded-md px-2 font-mono text-xs transition-colors",
+        showSource ? "bg-zinc-200 dark:bg-zinc-700" : "hover:bg-zinc-100 dark:hover:bg-zinc-800",
+        className
+      ),
+      children: icon
+    }
+  );
+}
+EditorSourceToggle.displayName = "EditorSourceToggle";
 var DEFAULT_ACTIONS = [
   { icon: "B", label: "Bold", command: "bold" },
   { icon: "I", label: "Italic", command: "italic" },
@@ -11350,9 +11377,10 @@ function EditorToolbar({
   actions = DEFAULT_ACTIONS,
   onAction,
   children,
-  className
+  className,
+  showSourceToggle = true
 }) {
-  const { exec } = useEditor();
+  const { exec, showSource } = useEditor();
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -11361,26 +11389,31 @@ function EditorToolbar({
         "flex items-center gap-0.5 border-b border-zinc-200 px-2 py-1.5 dark:border-zinc-700",
         className
       ),
-      children: children ?? actions.map((action) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            if (onAction) {
-              onAction(action.command);
-            } else {
-              exec(action.command, action.commandArg);
-            }
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        actions.map((action) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled: showSource,
+            onClick: () => {
+              if (onAction) {
+                onAction(action.command);
+              } else {
+                exec(action.command, action.commandArg);
+              }
+            },
+            title: action.label,
+            className: cn(
+              "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors",
+              action.active ? "bg-zinc-200 dark:bg-zinc-700" : "hover:bg-zinc-100 dark:hover:bg-zinc-800",
+              showSource && "cursor-not-allowed opacity-40 hover:bg-transparent"
+            ),
+            children: action.icon
           },
-          title: action.label,
-          className: cn(
-            "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors",
-            action.active ? "bg-zinc-200 dark:bg-zinc-700" : "hover:bg-zinc-100 dark:hover:bg-zinc-800"
-          ),
-          children: action.icon
-        },
-        `${action.command}-${action.commandArg ?? ""}`
-      ))
+          `${action.command}-${action.commandArg ?? ""}`
+        )),
+        showSourceToggle && /* @__PURE__ */ jsx(EditorSourceToggle, { className: "ml-auto" })
+      ] })
     }
   );
 }
@@ -11586,20 +11619,58 @@ function extensionEditorClasses(extensions) {
     ].join(" ");
   }).join(" ");
 }
-function EditorContent({ className, maxHeight }) {
-  const { contentRef, lineSpacing, placeholder, extensions, _initialHtml, _onInput } = useEditor();
-  const initialized = useRef(false);
+function EditorContent({ className, maxHeight, sourceClassName }) {
+  const {
+    contentRef,
+    lineSpacing,
+    placeholder,
+    extensions,
+    outputFormat,
+    showSource,
+    _initialHtml,
+    _onInput,
+    _sourceValue,
+    _onSourceInput
+  } = useEditor();
+  const seededHtml = useRef(null);
   useEffect(() => {
+    if (showSource) {
+      seededHtml.current = null;
+      return;
+    }
     const el = contentRef.current;
-    if (el && _initialHtml && !initialized.current) {
+    if (el && seededHtml.current !== _initialHtml) {
       el.innerHTML = _initialHtml;
-      initialized.current = true;
+      seededHtml.current = _initialHtml;
     }
-  }, [contentRef, _initialHtml]);
+  }, [contentRef, _initialHtml, showSource]);
   const extClasses = useMemo(
     () => extensionEditorClasses(extensions),
     [extensions]
   );
+  if (showSource) {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        "data-react-fancy-editor-source": "",
+        value: _sourceValue,
+        onChange: (e) => _onSourceInput(e.target.value),
+        spellCheck: false,
+        placeholder,
+        "aria-label": `${outputFormat === "markdown" ? "Markdown" : "HTML"} source`,
+        style: {
+          maxHeight: maxHeight ? `${maxHeight}px` : void 0
+        },
+        className: cn(
+          "block min-h-[120px] w-full resize-y px-4 py-3 font-mono text-xs leading-relaxed outline-none",
+          "bg-zinc-50 text-zinc-800 focus:outline-none dark:bg-zinc-900 dark:text-zinc-200",
+          "placeholder:text-zinc-400",
+          maxHeight && "overflow-y-auto",
+          sourceClassName
+        )
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -11791,20 +11862,29 @@ function EditorRoot({
   placeholder,
   mode: modeProp,
   extensions: instanceExtensions,
-  unsafe = false
+  unsafe = false,
+  showSource: showSourceProp,
+  defaultShowSource = false,
+  onShowSourceChange
 }) {
   const contentRef = useRef(null);
   const [value, setValue] = useControllableState(controlledValue, defaultValue, onChange);
+  const [showSource, setShowSource] = useControllableState(
+    showSourceProp,
+    defaultShowSource,
+    onShowSourceChange
+  );
   const mode = useFieldMode(modeProp);
   const isView = mode === "view";
   const initialHtml = useMemo(
     () => toHtml(value, outputFormat, unsafe, valueFormat),
-    // Seed the contentEditable from the LIVE value when (re)entering edit mode.
-    // EditorContent reads this once on mount, and it only mounts in edit mode —
-    // so this captures the current value on view→edit, not a stale mount snapshot,
-    // and does NOT re-run on every keystroke.
+    // Seed the contentEditable from the LIVE value when (re)entering edit mode —
+    // and when returning from the raw-source view, which may have rewritten the
+    // value out from under the rich-text surface. EditorContent re-seeds when
+    // this recomputes; it does NOT re-run on every keystroke (`value` is not a
+    // dep, so typing in the rich-text surface never re-seeds it).
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isView, outputFormat, unsafe, valueFormat]
+    [isView, outputFormat, unsafe, valueFormat, showSource]
   );
   const extensions = useMemo(
     () => mergeExtensions(instanceExtensions),
@@ -11841,6 +11921,12 @@ function EditorRoot({
     },
     [handleInput]
   );
+  const handleSourceInput = useCallback(
+    (next) => {
+      setValue(next);
+    },
+    [setValue]
+  );
   const wrapSelection = useCallback(
     (before, after) => {
       const sel = window.getSelection();
@@ -11864,8 +11950,12 @@ function EditorRoot({
     lineSpacing,
     placeholder,
     extensions,
+    showSource,
+    setShowSource,
     _initialHtml: initialHtml,
-    _onInput: handleInput
+    _onInput: handleInput,
+    _sourceValue: value,
+    _onSourceInput: handleSourceInput
   };
   if (isView) {
     return /* @__PURE__ */ jsx(
@@ -11909,7 +11999,8 @@ var ToolbarWithSeparator = Object.assign(EditorToolbar, {
 });
 var Editor = Object.assign(EditorRoot, {
   Toolbar: ToolbarWithSeparator,
-  Content: EditorContent
+  Content: EditorContent,
+  SourceToggle: EditorSourceToggle
 });
 var MenuContext = createContext(null);
 function useMenu() {