@idealyst/markdown 1.2.39 → 1.2.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/markdown",
-  "version": "1.2.39",
+  "version": "1.2.41",
   "description": "Cross-platform markdown renderer and editor for React and React Native with theme integration",
   "main": "src/index.ts",
   "module": "src/index.ts",
@@ -30,9 +30,9 @@
       "types": "./src/Editor/index.ts"
     },
     "./examples": {
-      "import": "./src/Editor/examples/index.ts",
-      "require": "./src/Editor/examples/index.ts",
-      "types": "./src/Editor/examples/index.ts"
+      "import": "./src/examples/index.ts",
+      "require": "./src/examples/index.ts",
+      "types": "./src/examples/index.ts"
     }
   },
   "scripts": {
@@ -41,7 +41,7 @@
   },
   "peerDependencies": {
     "@10play/tentap-editor": ">=0.5.0",
-    "@idealyst/theme": "^1.2.39",
+    "@idealyst/theme": "^1.2.41",
     "@tiptap/extension-link": ">=2.0.0",
     "@tiptap/extension-placeholder": ">=2.0.0",
     "@tiptap/extension-task-item": ">=2.0.0",
@@ -114,7 +114,7 @@
   },
   "devDependencies": {
     "@10play/tentap-editor": "^0.5.0",
-    "@idealyst/theme": "^1.2.39",
+    "@idealyst/theme": "^1.2.41",
     "@tiptap/extension-link": "^2.11.0",
     "@tiptap/extension-placeholder": "^2.11.0",
     "@tiptap/extension-task-item": "^2.11.0",

package/src/Editor/EditorToolbar.web.tsx

@@ -1,47 +1,83 @@
-import { memo } from 'react';
-import { getWebProps } from 'react-native-unistyles/web';
-import { editorStyles } from './MarkdownEditor.styles';
+import { memo, useState, useEffect, useMemo, useRef } from 'react';
+import { UnistylesRuntime } from 'react-native-unistyles';
+import Icon from '@mdi/react';
+import {
+  mdiFormatBold,
+  mdiFormatItalic,
+  mdiFormatUnderline,
+  mdiFormatStrikethrough,
+  mdiCodeTags,
+  mdiFormatHeader1,
+  mdiFormatHeader2,
+  mdiFormatHeader3,
+  mdiFormatHeader4,
+  mdiFormatHeader5,
+  mdiFormatHeader6,
+  mdiFormatHeaderPound,
+  mdiFormatListBulleted,
+  mdiFormatListNumbered,
+  mdiFormatListChecks,
+  mdiFormatQuoteClose,
+  mdiCodeBlockBraces,
+  mdiMinus,
+  mdiLink,
+  mdiImage,
+  mdiUndo,
+  mdiRedo,
+  mdiMenuDown,
+} from '@mdi/js';
 import type { ToolbarItem } from './types';
 import type { Size, Intent } from '@idealyst/theme';
+import type { Editor } from '@tiptap/react';
 
 interface EditorToolbarProps {
+  editor: Editor | null;
   items: readonly ToolbarItem[];
+  disabledItems?: readonly ToolbarItem[];
   onAction: (action: string) => void;
   isActive: (action: string) => boolean;
   size: Size;
   linkIntent: Intent;
 }
 
-const TOOLBAR_ICONS: Record<ToolbarItem, string> = {
-  bold: 'B',
-  italic: 'I',
-  underline: 'U',
-  strikethrough: 'S',
-  code: '</>',
-  heading1: 'H1',
-  heading2: 'H2',
-  heading3: 'H3',
-  bulletList: '•',
-  orderedList: '1.',
-  taskList: '☑',
-  blockquote: '"',
-  codeBlock: '{ }',
-  horizontalRule: '—',
-  link: '🔗',
-  image: '🖼',
-  undo: '↶',
-  redo: '↷',
+const TOOLBAR_ICONS: Record<string, string> = {
+  bold: mdiFormatBold,
+  italic: mdiFormatItalic,
+  underline: mdiFormatUnderline,
+  strikethrough: mdiFormatStrikethrough,
+  code: mdiCodeTags,
+  heading: mdiFormatHeaderPound,
+  heading1: mdiFormatHeader1,
+  heading2: mdiFormatHeader2,
+  heading3: mdiFormatHeader3,
+  heading4: mdiFormatHeader4,
+  heading5: mdiFormatHeader5,
+  heading6: mdiFormatHeader6,
+  bulletList: mdiFormatListBulleted,
+  orderedList: mdiFormatListNumbered,
+  taskList: mdiFormatListChecks,
+  blockquote: mdiFormatQuoteClose,
+  codeBlock: mdiCodeBlockBraces,
+  horizontalRule: mdiMinus,
+  link: mdiLink,
+  image: mdiImage,
+  undo: mdiUndo,
+  redo: mdiRedo,
 };
 
-const TOOLBAR_TITLES: Record<ToolbarItem, string> = {
+const TOOLBAR_TITLES: Record<string, string> = {
   bold: 'Bold (Ctrl+B)',
   italic: 'Italic (Ctrl+I)',
   underline: 'Underline (Ctrl+U)',
   strikethrough: 'Strikethrough',
   code: 'Inline Code',
+  heading: 'Heading',
   heading1: 'Heading 1',
   heading2: 'Heading 2',
   heading3: 'Heading 3',
+  heading4: 'Heading 4',
+  heading5: 'Heading 5',
+  heading6: 'Heading 6',
   bulletList: 'Bullet List',
   orderedList: 'Numbered List',
   taskList: 'Task List',
@@ -54,32 +90,83 @@ const TOOLBAR_TITLES: Record<ToolbarItem, string> = {
   redo: 'Redo (Ctrl+Y)',
 };
 
+const HEADING_ITEMS = ['heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6'] as const;
+
 export const EditorToolbar = memo<EditorToolbarProps>(
-  ({ items, onAction, isActive, size, linkIntent }) => {
+  ({ editor, items, disabledItems = [], onAction, isActive, size, linkIntent }) => {
+    // Force re-render when editor state changes
+    const [, setUpdateCounter] = useState(0);
+
+    // Access theme directly
+    const theme = UnistylesRuntime.getTheme();
+
+    useEffect(() => {
+      if (!editor) return;
+
+      const handleUpdate = () => {
+        setUpdateCounter((c) => c + 1);
+      };
+
+      editor.on('selectionUpdate', handleUpdate);
+      editor.on('transaction', handleUpdate);
+
+      return () => {
+        editor.off('selectionUpdate', handleUpdate);
+        editor.off('transaction', handleUpdate);
+      };
+    }, [editor]);
+
+    // Generate toolbar styles from theme
+    const toolbarStyle: React.CSSProperties = useMemo(() => ({
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: 4,
+      padding: 8,
+      borderBottom: `1px solid ${theme.colors.border.primary}`,
+      backgroundColor: theme.colors.surface.secondary,
+    }), [theme]);
+
+    // Check if any heading is active
+    const activeHeading = HEADING_ITEMS.find((h) => isActive(h));
+
     return (
       <div
-        {...getWebProps([
-          (editorStyles.toolbar as any)({ size, linkIntent }),
-        ])}
+        style={toolbarStyle}
         role="toolbar"
         aria-label="Editor formatting toolbar"
       >
         {items.map((item) => {
+          // Render heading dropdown
+          if (item === 'heading') {
+            const disabled = disabledItems.includes(item);
+            return (
+              <HeadingDropdown
+                key={item}
+                activeHeading={activeHeading}
+                disabled={disabled}
+                onAction={onAction}
+                theme={theme}
+              />
+            );
+          }
+
+          // Skip individual heading items if we're using the dropdown
+          if (item.startsWith('heading') && items.includes('heading')) {
+            return null;
+          }
+
           const active = isActive(item);
+          const disabled = disabledItems.includes(item);
           return (
-            <button
+            <ToolbarButton
               key={item}
-              type="button"
-              onClick={() => onAction(item)}
-              title={TOOLBAR_TITLES[item]}
-              aria-pressed={active}
-              {...getWebProps([
-                (editorStyles.toolbarButton as any)({ size, linkIntent }),
-                active && (editorStyles.toolbarButtonActive as any)({ size, linkIntent }),
-              ])}
-            >
-              {TOOLBAR_ICONS[item]}
-            </button>
+              item={item}
+              active={active}
+              disabled={disabled}
+              onAction={onAction}
+              theme={theme}
+            />
           );
         })}
       </div>
@@ -88,3 +175,296 @@ export const EditorToolbar = memo<EditorToolbarProps>(
 );
 
 EditorToolbar.displayName = 'EditorToolbar';
+
+// Heading dropdown component
+const HeadingDropdown = memo<{
+  activeHeading: string | undefined;
+  disabled: boolean;
+  onAction: (action: string) => void;
+  theme: any;
+}>(({ activeHeading, disabled, onAction, theme }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [isOpen]);
+
+  const primaryColor = theme.intents?.primary?.primary ?? '#6366f1';
+  const textColor = theme.colors.text.primary;
+  const disabledColor = theme.colors.text.tertiary ?? 'rgba(0, 0, 0, 0.3)';
+  const activeBg = theme.colors.surface.tertiary ?? 'rgba(0, 0, 0, 0.08)';
+  const hoverBg = theme.colors.surface.tertiary ?? 'rgba(0, 0, 0, 0.05)';
+  const surfacePrimary = theme.colors.surface.primary ?? '#ffffff';
+  const borderColor = theme.colors.border.primary ?? 'rgba(0, 0, 0, 0.1)';
+
+  const buttonStyle: React.CSSProperties = useMemo(() => {
+    const base: React.CSSProperties = {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 2,
+      padding: '6px 8px',
+      borderRadius: theme.radii?.sm ?? 4,
+      backgroundColor: 'transparent',
+      color: textColor,
+      minWidth: 48,
+      height: 32,
+      border: 'none',
+      cursor: 'pointer',
+      transition: 'all 0.15s ease',
+      outline: 'none',
+    };
+
+    if (disabled) {
+      return {
+        ...base,
+        color: disabledColor,
+        cursor: 'not-allowed',
+        opacity: 0.5,
+      };
+    }
+
+    if (activeHeading || isOpen) {
+      return {
+        ...base,
+        backgroundColor: activeBg,
+        color: primaryColor,
+      };
+    }
+
+    if (isHovered) {
+      return {
+        ...base,
+        backgroundColor: hoverBg,
+      };
+    }
+
+    return base;
+  }, [activeHeading, isOpen, disabled, isHovered, theme, primaryColor, textColor, disabledColor, activeBg, hoverBg]);
+
+  const dropdownStyle: React.CSSProperties = {
+    position: 'absolute',
+    top: '100%',
+    left: 0,
+    marginTop: 4,
+    backgroundColor: surfacePrimary,
+    border: `1px solid ${borderColor}`,
+    borderRadius: theme.radii?.md ?? 8,
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+    zIndex: 1000,
+    minWidth: 120,
+    overflow: 'hidden',
+  };
+
+  const handleToggle = () => {
+    if (!disabled) {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  const handleSelect = (heading: string) => {
+    onAction(heading);
+    setIsOpen(false);
+  };
+
+  // Determine which icon to show - default to H1
+  const currentIcon = activeHeading ? TOOLBAR_ICONS[activeHeading] : TOOLBAR_ICONS.heading1;
+
+  return (
+    <div ref={dropdownRef} style={{ position: 'relative' }}>
+      <button
+        type="button"
+        onClick={handleToggle}
+        title={TOOLBAR_TITLES.heading}
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+        disabled={disabled}
+        style={buttonStyle}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        <Icon path={currentIcon} size={0.75} />
+        <Icon path={mdiMenuDown} size={0.5} />
+      </button>
+      {isOpen && (
+        <div style={dropdownStyle} role="listbox">
+          {HEADING_ITEMS.map((heading) => (
+            <HeadingOption
+              key={heading}
+              heading={heading}
+              isActive={activeHeading === heading}
+              onSelect={handleSelect}
+              theme={theme}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+});
+
+HeadingDropdown.displayName = 'HeadingDropdown';
+
+// Individual heading option in the dropdown
+const HeadingOption = memo<{
+  heading: string;
+  isActive: boolean;
+  onSelect: (heading: string) => void;
+  theme: any;
+}>(({ heading, isActive, onSelect, theme }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const primaryColor = theme.intents?.primary?.primary ?? '#6366f1';
+  const textColor = theme.colors.text.primary;
+  const hoverBg = theme.colors.surface.secondary ?? 'rgba(0, 0, 0, 0.05)';
+  const activeBg = theme.colors.surface.tertiary ?? 'rgba(0, 0, 0, 0.08)';
+
+  const optionStyle: React.CSSProperties = useMemo(() => {
+    const base: React.CSSProperties = {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      padding: '8px 12px',
+      backgroundColor: 'transparent',
+      color: textColor,
+      border: 'none',
+      cursor: 'pointer',
+      width: '100%',
+      textAlign: 'left',
+      transition: 'background-color 0.15s ease',
+    };
+
+    if (isActive) {
+      return {
+        ...base,
+        backgroundColor: activeBg,
+        color: primaryColor,
+      };
+    }
+
+    if (isHovered) {
+      return {
+        ...base,
+        backgroundColor: hoverBg,
+      };
+    }
+
+    return base;
+  }, [isActive, isHovered, primaryColor, textColor, hoverBg, activeBg]);
+
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(heading)}
+      style={optionStyle}
+      role="option"
+      aria-selected={isActive}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <Icon path={TOOLBAR_ICONS[heading]} size={0.75} />
+      <span style={{ fontSize: 14 }}>{TOOLBAR_TITLES[heading]}</span>
+    </button>
+  );
+});
+
+HeadingOption.displayName = 'HeadingOption';
+
+// Separate button component to properly manage styles per button
+const ToolbarButton = memo<{
+  item: ToolbarItem;
+  active: boolean;
+  disabled: boolean;
+  onAction: (action: string) => void;
+  theme: any;
+}>(({ item, active, disabled, onAction, theme }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  // Get colors from theme
+  const primaryColor = theme.intents?.primary?.primary ?? '#6366f1';
+  const textColor = theme.colors.text.primary;
+  const disabledColor = theme.colors.text.tertiary ?? 'rgba(0, 0, 0, 0.3)';
+  const activeBg = theme.colors.surface.tertiary ?? 'rgba(0, 0, 0, 0.08)';
+  const hoverBg = theme.colors.surface.tertiary ?? 'rgba(0, 0, 0, 0.05)';
+
+  // Build button style based on state
+  const buttonStyle: React.CSSProperties = useMemo(() => {
+    const base: React.CSSProperties = {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '6px',
+      borderRadius: theme.radii?.sm ?? 4,
+      backgroundColor: 'transparent',
+      color: textColor,
+      minWidth: 32,
+      height: 32,
+      border: 'none',
+      cursor: 'pointer',
+      transition: 'all 0.15s ease',
+      outline: 'none',
+    };
+
+    if (disabled) {
+      return {
+        ...base,
+        color: disabledColor,
+        cursor: 'not-allowed',
+        opacity: 0.5,
+      };
+    }
+
+    if (active) {
+      return {
+        ...base,
+        backgroundColor: activeBg,
+        color: primaryColor,
+      };
+    }
+
+    if (isHovered) {
+      return {
+        ...base,
+        backgroundColor: hoverBg,
+      };
+    }
+
+    return base;
+  }, [active, disabled, isHovered, theme, primaryColor, textColor, disabledColor, activeBg, hoverBg]);
+
+  const handleClick = () => {
+    if (!disabled) {
+      onAction(item);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      title={TOOLBAR_TITLES[item]}
+      aria-pressed={active}
+      aria-disabled={disabled}
+      disabled={disabled}
+      style={buttonStyle}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <Icon path={TOOLBAR_ICONS[item]} size={0.75} />
+    </button>
+  );
+});
+
+ToolbarButton.displayName = 'ToolbarButton';

package/src/Editor/MarkdownEditor.native.tsx

@@ -9,7 +9,6 @@ import {
   RichText,
   Toolbar,
   useEditorBridge,
-  DEFAULT_TOOLBAR_ITEMS,
   type EditorBridge,
 } from '@10play/tentap-editor';
 import Showdown from 'showdown';
@@ -29,15 +28,20 @@ const showdownConverter = new Showdown.Converter({
 });
 
 // Map our toolbar items to 10tap toolbar items
-const TOOLBAR_ITEM_MAP: Record<ToolbarItem, string | null> = {
+const TOOLBAR_ITEM_MAP: Record<ToolbarItem, string | string[] | null> = {
   bold: 'bold',
   italic: 'italic',
   underline: 'underline',
   strikethrough: 'strikethrough',
   code: 'code',
+  // 'heading' expands to all heading levels since 10tap doesn't support dropdowns
+  heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
   heading1: 'h1',
   heading2: 'h2',
   heading3: 'h3',
+  heading4: 'h4',
+  heading5: 'h5',
+  heading6: 'h6',
   bulletList: 'bulletList',
   orderedList: 'orderedList',
   taskList: 'taskList',
@@ -183,23 +187,34 @@ const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(
       []
     );
 
-    // Map toolbar items
-    const toolbarItems = (toolbar.items ?? [
+    // Default toolbar items - matches web
+    const defaultItems: ToolbarItem[] = [
       'bold',
       'italic',
       'underline',
       'strikethrough',
       'code',
-      'heading1',
-      'heading2',
+      'heading',
       'bulletList',
       'orderedList',
       'blockquote',
       'codeBlock',
       'link',
-    ])
-      .map((item) => TOOLBAR_ITEM_MAP[item])
-      .filter((item): item is string => item !== null);
+    ];
+
+    // Get disabled items set for filtering
+    const disabledItems = new Set(toolbar.disabledItems ?? []);
+
+    // Map toolbar items, expanding arrays (like 'heading' -> ['h1', 'h2', ...])
+    // and filtering out disabled items
+    const toolbarItems = (toolbar.items ?? defaultItems)
+      .filter((item) => !disabledItems.has(item))
+      .flatMap((item) => {
+        const mapped = TOOLBAR_ITEM_MAP[item];
+        if (mapped === null) return [];
+        if (Array.isArray(mapped)) return mapped;
+        return [mapped];
+      });
 
     const showToolbar = toolbar.visible !== false && editable;
     const toolbarPosition = toolbar.position ?? 'top';
@@ -223,7 +238,7 @@ const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(
         accessibilityLabel={accessibilityLabel}
       >
         {showToolbar && toolbarPosition === 'top' && (
-          <Toolbar editor={editor} items={DEFAULT_TOOLBAR_ITEMS} />
+          <Toolbar editor={editor} items={toolbarItems} />
         )}
         <View style={editorContentStyle}>
           <RichText
@@ -234,7 +249,7 @@ const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(
           />
         </View>
         {showToolbar && toolbarPosition === 'bottom' && (
-          <Toolbar editor={editor} items={DEFAULT_TOOLBAR_ITEMS} />
+          <Toolbar editor={editor} items={toolbarItems} />
         )}
       </View>
     );

package/src/Editor/MarkdownEditor.styles.ts

@@ -48,180 +48,290 @@ export const editorStyles = defineStyle('MarkdownEditor', (theme: Theme) => ({
     fontSize: theme.sizes.typography.body1.fontSize,
     lineHeight: theme.sizes.typography.body1.lineHeight,
     color: theme.colors.text.primary,
-    _web: {
-      outline: 'none',
-      // Tiptap editor styles
-      '& .tiptap': {
-        outline: 'none',
-        minHeight: '100%',
-      },
-      '& .tiptap p.is-editor-empty:first-child::before': {
-        content: 'attr(data-placeholder)',
-        color: theme.colors.text.tertiary,
-        pointerEvents: 'none',
-        float: 'left',
-        height: 0,
-      },
-      // Headings
-      '& .tiptap h1': {
-        fontSize: theme.sizes.typography.h1.fontSize,
-        lineHeight: theme.sizes.typography.h1.lineHeight,
-        fontWeight: '700',
-        marginTop: 24,
-        marginBottom: 16,
-      },
-      '& .tiptap h2': {
-        fontSize: theme.sizes.typography.h2.fontSize,
-        lineHeight: theme.sizes.typography.h2.lineHeight,
-        fontWeight: '600',
-        marginTop: 20,
-        marginBottom: 12,
-        borderBottom: `1px solid ${theme.colors.border.primary}`,
-        paddingBottom: 8,
-      },
-      '& .tiptap h3': {
-        fontSize: theme.sizes.typography.h3.fontSize,
-        lineHeight: theme.sizes.typography.h3.lineHeight,
-        fontWeight: '600',
-        marginTop: 16,
-        marginBottom: 8,
-      },
-      '& .tiptap h4, & .tiptap h5, & .tiptap h6': {
-        fontWeight: '600',
-        marginTop: 12,
-        marginBottom: 8,
-      },
-      // Paragraphs
-      '& .tiptap p': {
-        marginVertical: 8,
-      },
-      // Links
-      '& .tiptap a': {
-        color: theme.intents?.primary?.primary ?? theme.colors.text.primary,
-        textDecoration: 'underline',
-        cursor: 'pointer',
-      },
-      // Code
-      '& .tiptap code': {
-        fontFamily: 'monospace',
-        backgroundColor: theme.colors.surface.secondary,
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: theme.radii.xs,
-        fontSize: theme.sizes.typography.caption.fontSize,
-      },
-      '& .tiptap pre': {
-        fontFamily: 'monospace',
-        backgroundColor: theme.colors.surface.secondary,
-        padding: 16,
-        borderRadius: theme.radii.md,
-        marginVertical: 12,
-        overflow: 'auto',
-      },
-      '& .tiptap pre code': {
-        backgroundColor: 'transparent',
-        padding: 0,
-      },
-      // Blockquote
-      '& .tiptap blockquote': {
-        borderLeft: `4px solid ${theme.colors.border.secondary}`,
-        paddingLeft: 16,
-        paddingVertical: 8,
-        marginVertical: 12,
-        backgroundColor: theme.colors.surface.secondary,
-        borderRadius: theme.radii.sm,
-        fontStyle: 'italic',
-        color: theme.colors.text.secondary,
-      },
-      // Lists
-      '& .tiptap ul, & .tiptap ol': {
-        marginVertical: 8,
-        paddingLeft: 24,
-      },
-      '& .tiptap li': {
-        marginVertical: 4,
-      },
-      // Task list
-      '& .tiptap ul[data-type="taskList"]': {
-        listStyle: 'none',
-        padding: 0,
-      },
-      '& .tiptap ul[data-type="taskList"] li': {
-        display: 'flex',
-        alignItems: 'flex-start',
-        gap: 8,
-      },
-      '& .tiptap ul[data-type="taskList"] li input': {
-        marginTop: 4,
-      },
-      // Horizontal rule
-      '& .tiptap hr': {
-        height: 1,
-        backgroundColor: theme.colors.border.secondary,
-        marginVertical: 24,
-        border: 'none',
-      },
-      // Table
-      '& .tiptap table': {
-        borderCollapse: 'collapse',
-        width: '100%',
-        marginVertical: 12,
-      },
-      '& .tiptap th, & .tiptap td': {
-        border: `1px solid ${theme.colors.border.primary}`,
-        padding: 12,
-      },
-      '& .tiptap th': {
-        backgroundColor: theme.colors.surface.secondary,
-        fontWeight: '600',
-        textAlign: 'left',
-      },
-    },
   }),
 
   // Toolbar container
   toolbar: (_props: EditorDynamicProps) => ({
-    flexDirection: 'row',
-    flexWrap: 'wrap',
+    flexDirection: 'row' as const,
+    flexWrap: 'wrap' as const,
     gap: 4,
     padding: 8,
     borderBottomWidth: 1,
     borderBottomColor: theme.colors.border.primary,
     backgroundColor: theme.colors.surface.secondary,
+    _web: {
+      display: 'flex',
+    },
   }),
 
-  // Toolbar button
+  // Toolbar button base
   toolbarButton: (_props: EditorDynamicProps) => ({
-    paddingHorizontal: 10,
-    paddingVertical: 6,
+    paddingLeft: 10,
+    paddingRight: 10,
+    paddingTop: 6,
+    paddingBottom: 6,
     borderRadius: theme.radii.sm,
     backgroundColor: 'transparent',
     borderWidth: 0,
+    borderColor: 'transparent',
     color: theme.colors.text.primary,
     fontSize: 14,
-    fontWeight: '500',
+    fontWeight: '500' as const,
+    minWidth: 32,
+    height: 32,
     _web: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
       cursor: 'pointer',
-      transition: 'background-color 0.15s ease',
-      _hover: {
-        backgroundColor: theme.colors.surface.tertiary,
-      },
+      outline: 'none',
+      border: 'none',
     },
   }),
 
   // Toolbar button active state
   toolbarButtonActive: (_props: EditorDynamicProps) => ({
-    backgroundColor: theme.colors.surface.tertiary,
-    color: theme.intents?.primary?.primary ?? theme.colors.text.primary,
+    backgroundColor: theme.intents?.primary?.primary ?? theme.colors.surface.tertiary,
+    color: theme.intents?.primary?.contrast ?? theme.colors.text.inverse,
   }),
 
   // Focus ring for accessibility
   focusRing: (_props: EditorDynamicProps) => ({
-    _web: {
-      _focus: {
-        outline: `2px solid ${theme.intents?.primary?.primary ?? theme.colors.border.primary}`,
-        outlineOffset: 2,
-      },
-    },
   }),
 }));
+
+/**
+ * Generate CSS for Tiptap editor based on theme colors.
+ * This is injected as a style tag since Tiptap uses its own DOM.
+ */
+export function generateTiptapCSS(theme: BaseTheme): string {
+  const primary = theme.intents?.primary?.primary ?? theme.colors.text.primary;
+
+  return `
+    .tiptap-editor-wrapper .tiptap {
+      outline: none;
+      min-height: 100%;
+      font-family: inherit;
+    }
+
+    .tiptap-editor-wrapper .tiptap:focus {
+      outline: none;
+    }
+
+    .tiptap-editor-wrapper .tiptap p.is-editor-empty:first-child::before {
+      content: attr(data-placeholder);
+      color: ${theme.colors.text.tertiary};
+      pointer-events: none;
+      float: left;
+      height: 0;
+    }
+
+    /* Headings */
+    .tiptap-editor-wrapper .tiptap h1 {
+      font-size: ${theme.sizes.typography.h1.fontSize}px;
+      line-height: ${theme.sizes.typography.h1.lineHeight}px;
+      font-weight: 700;
+      margin-top: 1em;
+      margin-bottom: 0.5em;
+      color: ${theme.colors.text.primary};
+    }
+
+    .tiptap-editor-wrapper .tiptap h2 {
+      font-size: ${theme.sizes.typography.h2.fontSize}px;
+      line-height: ${theme.sizes.typography.h2.lineHeight}px;
+      font-weight: 600;
+      margin-top: 1em;
+      margin-bottom: 0.5em;
+      border-bottom: 1px solid ${theme.colors.border.primary};
+      padding-bottom: 0.25em;
+      color: ${theme.colors.text.primary};
+    }
+
+    .tiptap-editor-wrapper .tiptap h3 {
+      font-size: ${theme.sizes.typography.h3.fontSize}px;
+      line-height: ${theme.sizes.typography.h3.lineHeight}px;
+      font-weight: 600;
+      margin-top: 1em;
+      margin-bottom: 0.5em;
+      color: ${theme.colors.text.primary};
+    }
+
+    .tiptap-editor-wrapper .tiptap h4,
+    .tiptap-editor-wrapper .tiptap h5,
+    .tiptap-editor-wrapper .tiptap h6 {
+      font-weight: 600;
+      margin-top: 1em;
+      margin-bottom: 0.5em;
+      color: ${theme.colors.text.primary};
+    }
+
+    /* Remove top margin from first child */
+    .tiptap-editor-wrapper .tiptap > *:first-child {
+      margin-top: 0;
+    }
+
+    /* Paragraphs */
+    .tiptap-editor-wrapper .tiptap p {
+      margin-top: 0;
+      margin-bottom: 0.5em;
+      color: ${theme.colors.text.primary};
+    }
+
+    /* Links */
+    .tiptap-editor-wrapper .tiptap a {
+      color: ${primary};
+      text-decoration: underline;
+      cursor: pointer;
+    }
+
+    .tiptap-editor-wrapper .tiptap a:hover {
+      opacity: 0.8;
+    }
+
+    /* Inline Code */
+    .tiptap-editor-wrapper .tiptap code {
+      font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+      background-color: ${theme.colors.surface.secondary};
+      padding: 2px 6px;
+      border-radius: ${theme.radii.xs}px;
+      font-size: ${theme.sizes.typography.caption.fontSize}px;
+      color: ${theme.colors.text.primary};
+    }
+
+    /* Code Blocks */
+    .tiptap-editor-wrapper .tiptap pre {
+      font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+      background-color: ${theme.colors.surface.secondary};
+      padding: 16px;
+      border-radius: ${theme.radii.md}px;
+      margin-top: 12px;
+      margin-bottom: 12px;
+      overflow-x: auto;
+      color: ${theme.colors.text.primary};
+    }
+
+    .tiptap-editor-wrapper .tiptap pre code {
+      background-color: transparent;
+      padding: 0;
+      font-size: inherit;
+    }
+
+    /* Blockquote */
+    .tiptap-editor-wrapper .tiptap blockquote {
+      border-left: 4px solid ${primary};
+      padding-left: 16px;
+      padding-top: 8px;
+      padding-bottom: 8px;
+      margin-top: 12px;
+      margin-bottom: 12px;
+      margin-left: 0;
+      margin-right: 0;
+      background-color: ${theme.colors.surface.secondary};
+      border-radius: ${theme.radii.sm}px;
+      font-style: italic;
+      color: ${theme.colors.text.secondary};
+    }
+
+    /* Lists */
+    .tiptap-editor-wrapper .tiptap ul,
+    .tiptap-editor-wrapper .tiptap ol {
+      margin-top: 8px;
+      margin-bottom: 8px;
+      padding-left: 24px;
+      color: ${theme.colors.text.primary};
+    }
+
+    .tiptap-editor-wrapper .tiptap li {
+      margin-top: 4px;
+      margin-bottom: 4px;
+    }
+
+    .tiptap-editor-wrapper .tiptap li p {
+      margin: 0;
+    }
+
+    /* Task list */
+    .tiptap-editor-wrapper .tiptap ul[data-type="taskList"] {
+      list-style: none;
+      padding: 0;
+    }
+
+    .tiptap-editor-wrapper .tiptap ul[data-type="taskList"] li {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+    }
+
+    .tiptap-editor-wrapper .tiptap ul[data-type="taskList"] li > label {
+      flex-shrink: 0;
+      margin-top: 4px;
+    }
+
+    .tiptap-editor-wrapper .tiptap ul[data-type="taskList"] li > div {
+      flex: 1;
+    }
+
+    .tiptap-editor-wrapper .tiptap ul[data-type="taskList"] input[type="checkbox"] {
+      width: 16px;
+      height: 16px;
+      accent-color: ${primary};
+      cursor: pointer;
+    }
+
+    /* Horizontal rule */
+    .tiptap-editor-wrapper .tiptap hr {
+      height: 1px;
+      background-color: ${theme.colors.border.secondary};
+      margin-top: 24px;
+      margin-bottom: 24px;
+      border: none;
+    }
+
+    /* Table */
+    .tiptap-editor-wrapper .tiptap table {
+      border-collapse: collapse;
+      width: 100%;
+      margin-top: 12px;
+      margin-bottom: 12px;
+    }
+
+    .tiptap-editor-wrapper .tiptap th,
+    .tiptap-editor-wrapper .tiptap td {
+      border: 1px solid ${theme.colors.border.primary};
+      padding: 12px;
+      text-align: left;
+    }
+
+    .tiptap-editor-wrapper .tiptap th {
+      background-color: ${theme.colors.surface.secondary};
+      font-weight: 600;
+    }
+
+    /* Strong/Bold */
+    .tiptap-editor-wrapper .tiptap strong {
+      font-weight: 700;
+    }
+
+    /* Italic/Emphasis */
+    .tiptap-editor-wrapper .tiptap em {
+      font-style: italic;
+    }
+
+    /* Strikethrough */
+    .tiptap-editor-wrapper .tiptap s {
+      text-decoration: line-through;
+    }
+
+    /* Underline */
+    .tiptap-editor-wrapper .tiptap u {
+      text-decoration: underline;
+    }
+
+    /* Images */
+    .tiptap-editor-wrapper .tiptap img {
+      max-width: 100%;
+      height: auto;
+      border-radius: ${theme.radii.sm}px;
+    }
+  `;
+}

package/src/Editor/MarkdownEditor.web.tsx

@@ -4,6 +4,8 @@ import {
   useEffect,
   useCallback,
   useRef,
+  useId,
+  useMemo,
 } from 'react';
 import { useEditor, EditorContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
@@ -13,8 +15,8 @@ import TaskList from '@tiptap/extension-task-list';
 import TaskItem from '@tiptap/extension-task-item';
 import Underline from '@tiptap/extension-underline';
 import { Markdown as TiptapMarkdown } from 'tiptap-markdown';
-import { getWebProps } from 'react-native-unistyles/web';
-import { editorStyles } from './MarkdownEditor.styles';
+import { useUnistyles } from 'react-native-unistyles';
+import { editorStyles, generateTiptapCSS } from './MarkdownEditor.styles';
 import { EditorToolbar } from './EditorToolbar.web';
 import type { MarkdownEditorProps, MarkdownEditorRef } from './types';
 
@@ -24,8 +26,7 @@ const DEFAULT_TOOLBAR_ITEMS = [
   'underline',
   'strikethrough',
   'code',
-  'heading1',
-  'heading2',
+  'heading',
   'bulletList',
   'orderedList',
   'blockquote',
@@ -62,8 +63,13 @@ const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(
     },
     ref
   ) => {
+    const styleId = useId();
     const isControlled = value !== undefined;
     const lastValueRef = useRef<string>(value ?? initialValue);
+    const initializedRef = useRef(false);
+
+    // Get theme for CSS generation
+    const { theme } = useUnistyles();
 
     // Apply style variants
     editorStyles.useVariants({
@@ -71,6 +77,29 @@ const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(
       linkIntent,
     });
 
+    // Generate and inject CSS for Tiptap
+    const tiptapCSS = useMemo(() => generateTiptapCSS(theme), [theme]);
+
+    useEffect(() => {
+      const existingStyle = document.getElementById(`tiptap-styles-${styleId}`);
+      if (existingStyle) {
+        existingStyle.textContent = tiptapCSS;
+        return;
+      }
+
+      const styleElement = document.createElement('style');
+      styleElement.id = `tiptap-styles-${styleId}`;
+      styleElement.textContent = tiptapCSS;
+      document.head.appendChild(styleElement);
+
+      return () => {
+        const el = document.getElementById(`tiptap-styles-${styleId}`);
+        if (el) {
+          document.head.removeChild(el);
+        }
+      };
+    }, [tiptapCSS, styleId]);
+
     const editor = useEditor({
       extensions: [
         StarterKit.configure({
@@ -98,7 +127,7 @@ const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(
           transformCopiedText: true,
         }),
       ],
-      content: value ?? initialValue,
+      content: '', // Start empty, we'll set content after creation
       editable,
       autofocus: autoFocus,
       onUpdate: ({ editor: ed }) => {
@@ -110,19 +139,32 @@ const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(
       onBlur: () => onBlur?.(),
     });
 
+    // Set initial content after editor is created
+    // tiptap-markdown's setContent handles markdown parsing
+    useEffect(() => {
+      if (editor && !initializedRef.current) {
+        const initialMarkdown = value ?? initialValue;
+        if (initialMarkdown) {
+          // Use setContent which tiptap-markdown patches to handle markdown
+          editor.commands.setContent(initialMarkdown);
+          lastValueRef.current = initialMarkdown;
+        }
+        initializedRef.current = true;
+      }
+    }, [editor, value, initialValue]);
+
     // Handle controlled value changes
     useEffect(() => {
-      if (isControlled && editor && value !== lastValueRef.current) {
+      if (isControlled && editor && initializedRef.current && value !== lastValueRef.current) {
         const { from, to } = editor.state.selection;
-        editor.commands.setContent(value, false, {
-          preserveWhitespace: 'full',
-        });
+        // tiptap-markdown patches setContent to handle markdown
+        editor.commands.setContent(value ?? '');
         // Try to restore cursor position
         const newDocLength = editor.state.doc.content.size;
         const safeFrom = Math.min(from, newDocLength);
         const safeTo = Math.min(to, newDocLength);
         editor.commands.setTextSelection({ from: safeFrom, to: safeTo });
-        lastValueRef.current = value;
+        lastValueRef.current = value ?? '';
       }
     }, [value, isControlled, editor]);
 
@@ -143,9 +185,7 @@ const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(
         },
         setMarkdown: (markdown: string) => {
           if (editor) {
-            editor.commands.setContent(markdown, false, {
-              preserveWhitespace: 'full',
-            });
+            editor.commands.setContent(markdown);
             lastValueRef.current = markdown;
           }
         },
@@ -191,6 +231,15 @@ const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(
           case 'heading3':
             editor.chain().focus().toggleHeading({ level: 3 }).run();
             break;
+          case 'heading4':
+            editor.chain().focus().toggleHeading({ level: 4 }).run();
+            break;
+          case 'heading5':
+            editor.chain().focus().toggleHeading({ level: 5 }).run();
+            break;
+          case 'heading6':
+            editor.chain().focus().toggleHeading({ level: 6 }).run();
+            break;
           case 'bulletList':
             editor.chain().focus().toggleBulletList().run();
             break;
@@ -257,6 +306,12 @@ const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(
             return editor.isActive('heading', { level: 2 });
           case 'heading3':
             return editor.isActive('heading', { level: 3 });
+          case 'heading4':
+            return editor.isActive('heading', { level: 4 });
+          case 'heading5':
+            return editor.isActive('heading', { level: 5 });
+          case 'heading6':
+            return editor.isActive('heading', { level: 6 });
           case 'bulletList':
             return editor.isActive('bulletList');
           case 'orderedList':
@@ -276,45 +331,47 @@ const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(
       [editor]
     );
 
-    // Get container styles
-    const containerStyleArray = [
-      (editorStyles.container as any)({ size, linkIntent }),
-      minHeight !== undefined && { minHeight },
-      maxHeight !== undefined && { maxHeight, overflow: 'auto' },
-      style,
-    ].filter(Boolean);
+    // Build inline styles
+    const containerStyle = editorStyles.container({ size, linkIntent });
+    const editorContentStyle = editorStyles.editorContent({ size, linkIntent });
 
-    const webProps = getWebProps(containerStyleArray);
     const toolbarItems = toolbar.items ?? DEFAULT_TOOLBAR_ITEMS;
+    const toolbarDisabledItems = toolbar.disabledItems ?? [];
     const showToolbar = toolbar.visible !== false && editable;
     const toolbarPosition = toolbar.position ?? 'top';
 
     return (
       <div
-        {...webProps}
         id={id}
         data-testid={testID}
         aria-label={accessibilityLabel}
+        className="tiptap-editor-wrapper"
+        style={{
+          ...containerStyle,
+          ...(minHeight !== undefined ? { minHeight } : {}),
+          ...(maxHeight !== undefined ? { maxHeight, overflow: 'auto' } : {}),
+          ...(style as React.CSSProperties),
+        }}
       >
         {showToolbar && toolbarPosition === 'top' && (
           <EditorToolbar
+            editor={editor}
             items={toolbarItems}
+            disabledItems={toolbarDisabledItems}
             onAction={handleToolbarAction}
             isActive={isActive}
             size={size}
             linkIntent={linkIntent}
           />
         )}
-        <div
-          {...getWebProps([
-            (editorStyles.editorContent as any)({ size, linkIntent }),
-          ])}
-        >
+        <div style={editorContentStyle as React.CSSProperties}>
           <EditorContent editor={editor} />
         </div>
         {showToolbar && toolbarPosition === 'bottom' && (
           <EditorToolbar
+            editor={editor}
             items={toolbarItems}
+            disabledItems={toolbarDisabledItems}
             onAction={handleToolbarAction}
             isActive={isActive}
             size={size}

package/src/Editor/examples/MarkdownEditorExamples.tsx

@@ -165,6 +165,34 @@ function CustomToolbarExample() {
   );
 }
 
+/**
+ * Disabled toolbar items example
+ */
+function DisabledItemsExample() {
+  const [content, setContent] = useState('');
+
+  return (
+    <Card>
+      <View spacing="md" style={{ padding: 16 }}>
+        <Text size="lg" weight="semibold">Disabled Toolbar Items</Text>
+        <Text size="sm" color="secondary">
+          Disable specific toolbar items while keeping them visible (grayed out)
+        </Text>
+        <MarkdownEditor
+          value={content}
+          onChange={setContent}
+          placeholder="Link and image buttons are disabled..."
+          toolbar={{
+            items: ['bold', 'italic', 'underline', 'link', 'image', 'bulletList', 'codeBlock'],
+            disabledItems: ['link', 'image'],
+          }}
+          minHeight={200}
+        />
+      </View>
+    </Card>
+  );
+}
+
 /**
  * Editor with all examples combined
  */
@@ -188,6 +216,7 @@ export function MarkdownEditorExamples() {
               <Text size="sm">• Controlled and uncontrolled modes</Text>
               <Text size="sm">• Ref methods for programmatic control</Text>
               <Text size="sm">• Configurable toolbar items and position</Text>
+              <Text size="sm">• Disable specific toolbar items</Text>
               <Text size="sm">• Theme integration via Unistyles</Text>
             </View>
           </View>
@@ -197,6 +226,7 @@ export function MarkdownEditorExamples() {
         <ControlledEditorExample />
         <ReadOnlyEditorExample />
         <CustomToolbarExample />
+        <DisabledItemsExample />
       </View>
     </Screen>
   );

package/src/Editor/types.ts

@@ -10,9 +10,13 @@ export type ToolbarItem =
   | 'underline'
   | 'strikethrough'
   | 'code'
+  | 'heading' // Dropdown for H1-H6
   | 'heading1'
   | 'heading2'
   | 'heading3'
+  | 'heading4'
+  | 'heading5'
+  | 'heading6'
   | 'bulletList'
   | 'orderedList'
   | 'taskList'
@@ -34,6 +38,11 @@ export interface ToolbarConfig {
    */
   items?: ToolbarItem[];
 
+  /**
+   * Items to disable in the toolbar (they will still be visible but grayed out)
+   */
+  disabledItems?: ToolbarItem[];
+
   /**
    * Whether to show the toolbar
    * @default true

package/src/examples/index.ts

@@ -0,0 +1 @@
+export { MarkdownEditorExamples } from '../Editor/examples/MarkdownEditorExamples';