@idealyst/markdown 1.2.38 → 1.2.39

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@idealyst/markdown",
-  "version": "1.2.38",
-  "description": "Cross-platform markdown renderer for React and React Native with theme integration",
+  "version": "1.2.39",
+  "description": "Cross-platform markdown renderer and editor for React and React Native with theme integration",
   "main": "src/index.ts",
   "module": "src/index.ts",
   "types": "src/index.ts",
@@ -22,6 +22,17 @@
       "import": "./src/index.ts",
       "require": "./src/index.ts",
       "types": "./src/index.ts"
+    },
+    "./editor": {
+      "react-native": "./src/Editor/index.native.ts",
+      "import": "./src/Editor/index.ts",
+      "require": "./src/Editor/index.ts",
+      "types": "./src/Editor/index.ts"
+    },
+    "./examples": {
+      "import": "./src/Editor/examples/index.ts",
+      "require": "./src/Editor/examples/index.ts",
+      "types": "./src/Editor/examples/index.ts"
     }
   },
   "scripts": {
@@ -29,18 +40,53 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.38",
+    "@10play/tentap-editor": ">=0.5.0",
+    "@idealyst/theme": "^1.2.39",
+    "@tiptap/extension-link": ">=2.0.0",
+    "@tiptap/extension-placeholder": ">=2.0.0",
+    "@tiptap/extension-task-item": ">=2.0.0",
+    "@tiptap/extension-task-list": ">=2.0.0",
+    "@tiptap/extension-underline": ">=2.0.0",
+    "@tiptap/react": ">=2.0.0",
+    "@tiptap/starter-kit": ">=2.0.0",
     "react": ">=16.8.0",
     "react-markdown": ">=9.0.0",
     "react-native": ">=0.60.0",
     "react-native-markdown-display": ">=7.0.0",
     "react-native-unistyles": ">=3.0.0",
-    "remark-gfm": ">=4.0.0"
+    "react-native-webview": ">=13.0.0",
+    "remark-gfm": ">=4.0.0",
+    "showdown": ">=2.0.0",
+    "tiptap-markdown": ">=0.8.0"
   },
   "peerDependenciesMeta": {
+    "@10play/tentap-editor": {
+      "optional": true
+    },
     "@idealyst/theme": {
       "optional": true
     },
+    "@tiptap/extension-link": {
+      "optional": true
+    },
+    "@tiptap/extension-placeholder": {
+      "optional": true
+    },
+    "@tiptap/extension-task-item": {
+      "optional": true
+    },
+    "@tiptap/extension-task-list": {
+      "optional": true
+    },
+    "@tiptap/extension-underline": {
+      "optional": true
+    },
+    "@tiptap/react": {
+      "optional": true
+    },
+    "@tiptap/starter-kit": {
+      "optional": true
+    },
     "react-markdown": {
       "optional": true
     },
@@ -53,18 +99,39 @@
     "react-native-unistyles": {
       "optional": true
     },
+    "react-native-webview": {
+      "optional": true
+    },
     "remark-gfm": {
       "optional": true
+    },
+    "showdown": {
+      "optional": true
+    },
+    "tiptap-markdown": {
+      "optional": true
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.2.38",
+    "@10play/tentap-editor": "^0.5.0",
+    "@idealyst/theme": "^1.2.39",
+    "@tiptap/extension-link": "^2.11.0",
+    "@tiptap/extension-placeholder": "^2.11.0",
+    "@tiptap/extension-task-item": "^2.11.0",
+    "@tiptap/extension-task-list": "^2.11.0",
+    "@tiptap/extension-underline": "^2.11.0",
+    "@tiptap/react": "^2.11.0",
+    "@tiptap/starter-kit": "^2.11.0",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",
     "react-markdown": "^9.0.0",
     "react-native": "^0.80.1",
     "react-native-unistyles": "^3.0.10",
+    "react-native-webview": "^13.0.0",
     "remark-gfm": "^4.0.0",
+    "showdown": "^2.1.0",
+    "@types/showdown": "^2.0.0",
+    "tiptap-markdown": "^0.8.0",
     "typescript": "^5.0.0"
   },
   "files": [
@@ -75,6 +142,8 @@
     "react",
     "react-native",
     "markdown",
+    "editor",
+    "tiptap",
     "cross-platform",
     "idealyst"
   ]

package/src/Editor/EditorToolbar.web.tsx

@@ -0,0 +1,90 @@
+import { memo } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { editorStyles } from './MarkdownEditor.styles';
+import type { ToolbarItem } from './types';
+import type { Size, Intent } from '@idealyst/theme';
+
+interface EditorToolbarProps {
+  items: 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_TITLES: Record<ToolbarItem, string> = {
+  bold: 'Bold (Ctrl+B)',
+  italic: 'Italic (Ctrl+I)',
+  underline: 'Underline (Ctrl+U)',
+  strikethrough: 'Strikethrough',
+  code: 'Inline Code',
+  heading1: 'Heading 1',
+  heading2: 'Heading 2',
+  heading3: 'Heading 3',
+  bulletList: 'Bullet List',
+  orderedList: 'Numbered List',
+  taskList: 'Task List',
+  blockquote: 'Blockquote',
+  codeBlock: 'Code Block',
+  horizontalRule: 'Horizontal Rule',
+  link: 'Insert Link',
+  image: 'Insert Image',
+  undo: 'Undo (Ctrl+Z)',
+  redo: 'Redo (Ctrl+Y)',
+};
+
+export const EditorToolbar = memo<EditorToolbarProps>(
+  ({ items, onAction, isActive, size, linkIntent }) => {
+    return (
+      <div
+        {...getWebProps([
+          (editorStyles.toolbar as any)({ size, linkIntent }),
+        ])}
+        role="toolbar"
+        aria-label="Editor formatting toolbar"
+      >
+        {items.map((item) => {
+          const active = isActive(item);
+          return (
+            <button
+              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>
+          );
+        })}
+      </div>
+    );
+  }
+);
+
+EditorToolbar.displayName = 'EditorToolbar';

package/src/Editor/MarkdownEditor.native.tsx

@@ -0,0 +1,262 @@
+import {
+  forwardRef,
+  useImperativeHandle,
+  useEffect,
+  useRef,
+} from 'react';
+import { View, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native';
+import {
+  RichText,
+  Toolbar,
+  useEditorBridge,
+  DEFAULT_TOOLBAR_ITEMS,
+  type EditorBridge,
+} from '@10play/tentap-editor';
+import Showdown from 'showdown';
+import { editorStyles } from './MarkdownEditor.styles';
+import type { MarkdownEditorProps, MarkdownEditorRef, ToolbarItem } from './types';
+
+// Configure Showdown converter with GFM support
+const showdownConverter = new Showdown.Converter({
+  tables: true,
+  strikethrough: true,
+  tasklists: true,
+  ghCodeBlocks: true,
+  smoothLivePreview: true,
+  simpleLineBreaks: false,
+  openLinksInNewWindow: false,
+  backslashEscapesHTMLTags: true,
+});
+
+// Map our toolbar items to 10tap toolbar items
+const TOOLBAR_ITEM_MAP: Record<ToolbarItem, string | null> = {
+  bold: 'bold',
+  italic: 'italic',
+  underline: 'underline',
+  strikethrough: 'strikethrough',
+  code: 'code',
+  heading1: 'h1',
+  heading2: 'h2',
+  heading3: 'h3',
+  bulletList: 'bulletList',
+  orderedList: 'orderedList',
+  taskList: 'taskList',
+  blockquote: 'blockquote',
+  codeBlock: 'codeBlock',
+  horizontalRule: 'horizontalRule',
+  link: 'link',
+  image: 'image',
+  undo: 'undo',
+  redo: 'redo',
+};
+
+/**
+ * Convert markdown to HTML using Showdown.
+ */
+function markdownToHtml(markdown: string): string {
+  return showdownConverter.makeHtml(markdown);
+}
+
+/**
+ * Convert HTML to markdown using Showdown.
+ */
+function htmlToMarkdown(html: string): string {
+  return showdownConverter.makeMarkdown(html);
+}
+
+/**
+ * Markdown editor for React Native using 10tap-editor.
+ *
+ * Uses a WebView-based Tiptap editor under the hood for rich text editing
+ * with markdown input/output support.
+ */
+const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(
+  (
+    {
+      initialValue = '',
+      value,
+      onChange,
+      onFocus,
+      onBlur,
+      editable = true,
+      autoFocus = false,
+      placeholder,
+      toolbar = {},
+      size = 'md',
+      linkIntent = 'primary',
+      minHeight = 200,
+      maxHeight,
+      style,
+      testID,
+      id,
+      accessibilityLabel,
+      avoidIosKeyboard = true,
+    },
+    ref
+  ) => {
+    const isControlled = value !== undefined;
+    const lastValueRef = useRef<string>(value ?? initialValue);
+    const editorRef = useRef<EditorBridge | null>(null);
+
+    // Apply style variants
+    editorStyles.useVariants({
+      size,
+      linkIntent,
+    });
+
+    // Initialize editor with HTML content
+    const initialHtml = markdownToHtml(value ?? initialValue);
+
+    const editor = useEditorBridge({
+      autofocus: autoFocus,
+      avoidIosKeyboard,
+      initialContent: initialHtml,
+      editable,
+      onChange: async () => {
+        if (editorRef.current) {
+          try {
+            const html = await editorRef.current.getHTML();
+            const markdown = htmlToMarkdown(html);
+            if (markdown !== lastValueRef.current) {
+              lastValueRef.current = markdown;
+              onChange?.(markdown);
+            }
+          } catch {
+            // Editor might not be ready
+          }
+        }
+      },
+    });
+
+    // Store editor ref
+    useEffect(() => {
+      editorRef.current = editor;
+    }, [editor]);
+
+    // Handle controlled value changes
+    useEffect(() => {
+      if (isControlled && value !== lastValueRef.current && editorRef.current) {
+        const html = markdownToHtml(value);
+        editorRef.current.setContent(html);
+        lastValueRef.current = value;
+      }
+    }, [value, isControlled]);
+
+    // Expose ref methods
+    useImperativeHandle(
+      ref,
+      () => ({
+        getMarkdown: async () => {
+          if (!editorRef.current) return '';
+          try {
+            const html = await editorRef.current.getHTML();
+            return htmlToMarkdown(html);
+          } catch {
+            return lastValueRef.current;
+          }
+        },
+        setMarkdown: (markdown: string) => {
+          if (editorRef.current) {
+            const html = markdownToHtml(markdown);
+            editorRef.current.setContent(html);
+            lastValueRef.current = markdown;
+          }
+        },
+        focus: () => editorRef.current?.focus(),
+        blur: () => editorRef.current?.blur(),
+        isEmpty: async () => {
+          if (!editorRef.current) return true;
+          try {
+            const text = await editorRef.current.getText();
+            return !text || text.trim().length === 0;
+          } catch {
+            return true;
+          }
+        },
+        clear: () => {
+          editorRef.current?.setContent('');
+          lastValueRef.current = '';
+        },
+        undo: () => editorRef.current?.undo(),
+        redo: () => editorRef.current?.redo(),
+      }),
+      []
+    );
+
+    // Map toolbar items
+    const toolbarItems = (toolbar.items ?? [
+      'bold',
+      'italic',
+      'underline',
+      'strikethrough',
+      'code',
+      'heading1',
+      'heading2',
+      'bulletList',
+      'orderedList',
+      'blockquote',
+      'codeBlock',
+      'link',
+    ])
+      .map((item) => TOOLBAR_ITEM_MAP[item])
+      .filter((item): item is string => item !== null);
+
+    const showToolbar = toolbar.visible !== false && editable;
+    const toolbarPosition = toolbar.position ?? 'top';
+
+    const containerStyle = [
+      (editorStyles.container as any)({ size, linkIntent }),
+      style,
+    ];
+
+    const editorContentStyle = [
+      (editorStyles.editorContent as any)({ size, linkIntent }),
+      { minHeight },
+      maxHeight !== undefined && { maxHeight },
+    ];
+
+    const content = (
+      <View
+        style={containerStyle}
+        nativeID={id}
+        testID={testID}
+        accessibilityLabel={accessibilityLabel}
+      >
+        {showToolbar && toolbarPosition === 'top' && (
+          <Toolbar editor={editor} items={DEFAULT_TOOLBAR_ITEMS} />
+        )}
+        <View style={editorContentStyle}>
+          <RichText
+            editor={editor}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            style={nativeStyles.richText}
+          />
+        </View>
+        {showToolbar && toolbarPosition === 'bottom' && (
+          <Toolbar editor={editor} items={DEFAULT_TOOLBAR_ITEMS} />
+        )}
+      </View>
+    );
+
+    if (Platform.OS === 'ios' && avoidIosKeyboard) {
+      return (
+        <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
+          {content}
+        </KeyboardAvoidingView>
+      );
+    }
+
+    return content;
+  }
+);
+
+const nativeStyles = StyleSheet.create({
+  richText: {
+    flex: 1,
+  },
+});
+
+MarkdownEditor.displayName = 'MarkdownEditor';
+
+export default MarkdownEditor;

package/src/Editor/MarkdownEditor.styles.ts

@@ -0,0 +1,227 @@
+/**
+ * MarkdownEditor styles using defineStyle with theme integration.
+ *
+ * Provides consistent styling for the markdown editor that
+ * integrates with the Idealyst theme system.
+ */
+import { StyleSheet } from 'react-native-unistyles';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
+
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
+
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+export type EditorVariants = {
+  size: Size;
+  linkIntent: Intent;
+};
+
+/**
+ * Dynamic props passed to editor style functions.
+ */
+export type EditorDynamicProps = {
+  linkIntent?: Intent;
+  size?: Size;
+};
+
+/**
+ * Editor styles with theme integration.
+ */
+// @ts-expect-error - MarkdownEditor is not in the ComponentName union yet
+export const editorStyles = defineStyle('MarkdownEditor', (theme: Theme) => ({
+  // Main container
+  container: (_props: EditorDynamicProps) => ({
+    borderWidth: 1,
+    borderColor: theme.colors.border.primary,
+    borderRadius: theme.radii.md,
+    backgroundColor: theme.colors.surface.primary,
+    overflow: 'hidden',
+  }),
+
+  // Editor content area
+  editorContent: (_props: EditorDynamicProps) => ({
+    padding: 16,
+    minHeight: 200,
+    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',
+    gap: 4,
+    padding: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border.primary,
+    backgroundColor: theme.colors.surface.secondary,
+  }),
+
+  // Toolbar button
+  toolbarButton: (_props: EditorDynamicProps) => ({
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: theme.radii.sm,
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    color: theme.colors.text.primary,
+    fontSize: 14,
+    fontWeight: '500',
+    _web: {
+      cursor: 'pointer',
+      transition: 'background-color 0.15s ease',
+      _hover: {
+        backgroundColor: theme.colors.surface.tertiary,
+      },
+    },
+  }),
+
+  // Toolbar button active state
+  toolbarButtonActive: (_props: EditorDynamicProps) => ({
+    backgroundColor: theme.colors.surface.tertiary,
+    color: theme.intents?.primary?.primary ?? theme.colors.text.primary,
+  }),
+
+  // Focus ring for accessibility
+  focusRing: (_props: EditorDynamicProps) => ({
+    _web: {
+      _focus: {
+        outline: `2px solid ${theme.intents?.primary?.primary ?? theme.colors.border.primary}`,
+        outlineOffset: 2,
+      },
+    },
+  }),
+}));