@idealyst/markdown 1.2.38 → 1.2.40

package/src/Editor/MarkdownEditor.web.tsx

@@ -0,0 +1,388 @@
+import {
+  forwardRef,
+  useImperativeHandle,
+  useEffect,
+  useCallback,
+  useRef,
+  useId,
+  useMemo,
+} from 'react';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Placeholder from '@tiptap/extension-placeholder';
+import Link from '@tiptap/extension-link';
+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 { useUnistyles } from 'react-native-unistyles';
+import { editorStyles, generateTiptapCSS } from './MarkdownEditor.styles';
+import { EditorToolbar } from './EditorToolbar.web';
+import type { MarkdownEditorProps, MarkdownEditorRef } from './types';
+
+const DEFAULT_TOOLBAR_ITEMS = [
+  'bold',
+  'italic',
+  'underline',
+  'strikethrough',
+  'code',
+  'heading',
+  'bulletList',
+  'orderedList',
+  'blockquote',
+  'codeBlock',
+  'link',
+] as const;
+
+/**
+ * Markdown editor for web using Tiptap.
+ *
+ * Provides a rich text editing experience with markdown input/output.
+ * Uses Tiptap with the tiptap-markdown extension for seamless markdown handling.
+ */
+const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(
+  (
+    {
+      initialValue = '',
+      value,
+      onChange,
+      onFocus,
+      onBlur,
+      editable = true,
+      autoFocus = false,
+      placeholder,
+      toolbar = {},
+      size = 'md',
+      linkIntent = 'primary',
+      minHeight,
+      maxHeight,
+      style,
+      testID,
+      id,
+      accessibilityLabel,
+    },
+    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({
+      size,
+      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({
+          heading: {
+            levels: [1, 2, 3, 4, 5, 6],
+          },
+        }),
+        Placeholder.configure({
+          placeholder: placeholder ?? 'Start writing...',
+        }),
+        Link.configure({
+          openOnClick: false,
+          HTMLAttributes: {
+            rel: 'noopener noreferrer',
+          },
+        }),
+        TaskList,
+        TaskItem.configure({
+          nested: true,
+        }),
+        Underline,
+        TiptapMarkdown.configure({
+          html: false,
+          transformPastedText: true,
+          transformCopiedText: true,
+        }),
+      ],
+      content: '', // Start empty, we'll set content after creation
+      editable,
+      autofocus: autoFocus,
+      onUpdate: ({ editor: ed }) => {
+        const markdown = ed.storage.markdown.getMarkdown();
+        lastValueRef.current = markdown;
+        onChange?.(markdown);
+      },
+      onFocus: () => onFocus?.(),
+      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 && initializedRef.current && value !== lastValueRef.current) {
+        const { from, to } = editor.state.selection;
+        // 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 ?? '';
+      }
+    }, [value, isControlled, editor]);
+
+    // Handle editable changes
+    useEffect(() => {
+      if (editor) {
+        editor.setEditable(editable);
+      }
+    }, [editable, editor]);
+
+    // Expose ref methods
+    useImperativeHandle(
+      ref,
+      () => ({
+        getMarkdown: async () => {
+          if (!editor) return '';
+          return editor.storage.markdown.getMarkdown();
+        },
+        setMarkdown: (markdown: string) => {
+          if (editor) {
+            editor.commands.setContent(markdown);
+            lastValueRef.current = markdown;
+          }
+        },
+        focus: () => editor?.commands.focus(),
+        blur: () => editor?.commands.blur(),
+        isEmpty: async () => editor?.isEmpty ?? true,
+        clear: () => {
+          editor?.commands.clearContent();
+          lastValueRef.current = '';
+        },
+        undo: () => editor?.commands.undo(),
+        redo: () => editor?.commands.redo(),
+      }),
+      [editor]
+    );
+
+    const handleToolbarAction = useCallback(
+      (action: string) => {
+        if (!editor) return;
+
+        switch (action) {
+          case 'bold':
+            editor.chain().focus().toggleBold().run();
+            break;
+          case 'italic':
+            editor.chain().focus().toggleItalic().run();
+            break;
+          case 'underline':
+            editor.chain().focus().toggleUnderline().run();
+            break;
+          case 'strikethrough':
+            editor.chain().focus().toggleStrike().run();
+            break;
+          case 'code':
+            editor.chain().focus().toggleCode().run();
+            break;
+          case 'heading1':
+            editor.chain().focus().toggleHeading({ level: 1 }).run();
+            break;
+          case 'heading2':
+            editor.chain().focus().toggleHeading({ level: 2 }).run();
+            break;
+          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;
+          case 'orderedList':
+            editor.chain().focus().toggleOrderedList().run();
+            break;
+          case 'taskList':
+            editor.chain().focus().toggleTaskList().run();
+            break;
+          case 'blockquote':
+            editor.chain().focus().toggleBlockquote().run();
+            break;
+          case 'codeBlock':
+            editor.chain().focus().toggleCodeBlock().run();
+            break;
+          case 'horizontalRule':
+            editor.chain().focus().setHorizontalRule().run();
+            break;
+          case 'link': {
+            const previousUrl = editor.getAttributes('link').href;
+            const url = window.prompt('URL', previousUrl);
+            if (url === null) return;
+            if (url === '') {
+              editor.chain().focus().extendMarkRange('link').unsetLink().run();
+            } else {
+              editor
+                .chain()
+                .focus()
+                .extendMarkRange('link')
+                .setLink({ href: url })
+                .run();
+            }
+            break;
+          }
+          case 'undo':
+            editor.chain().focus().undo().run();
+            break;
+          case 'redo':
+            editor.chain().focus().redo().run();
+            break;
+        }
+      },
+      [editor]
+    );
+
+    const isActive = useCallback(
+      (action: string): boolean => {
+        if (!editor) return false;
+
+        switch (action) {
+          case 'bold':
+            return editor.isActive('bold');
+          case 'italic':
+            return editor.isActive('italic');
+          case 'underline':
+            return editor.isActive('underline');
+          case 'strikethrough':
+            return editor.isActive('strike');
+          case 'code':
+            return editor.isActive('code');
+          case 'heading1':
+            return editor.isActive('heading', { level: 1 });
+          case 'heading2':
+            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':
+            return editor.isActive('orderedList');
+          case 'taskList':
+            return editor.isActive('taskList');
+          case 'blockquote':
+            return editor.isActive('blockquote');
+          case 'codeBlock':
+            return editor.isActive('codeBlock');
+          case 'link':
+            return editor.isActive('link');
+          default:
+            return false;
+        }
+      },
+      [editor]
+    );
+
+    // Build inline styles
+    const containerStyle = editorStyles.container({ size, linkIntent });
+    const editorContentStyle = editorStyles.editorContent({ size, linkIntent });
+
+    const toolbarItems = toolbar.items ?? DEFAULT_TOOLBAR_ITEMS;
+    const toolbarDisabledItems = toolbar.disabledItems ?? [];
+    const showToolbar = toolbar.visible !== false && editable;
+    const toolbarPosition = toolbar.position ?? 'top';
+
+    return (
+      <div
+        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 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}
+            linkIntent={linkIntent}
+          />
+        )}
+      </div>
+    );
+  }
+);
+
+MarkdownEditor.displayName = 'MarkdownEditor';
+
+export default MarkdownEditor;

package/src/Editor/examples/MarkdownEditorExamples.tsx

@@ -0,0 +1,235 @@
+import { useState, useRef } from 'react';
+import { View, Text, Card, Button, Screen } from '@idealyst/components';
+import { MarkdownEditor } from '../index';
+import type { MarkdownEditorRef } from '../types';
+
+const SAMPLE_MARKDOWN = `# Welcome to the Editor
+
+This is a **rich text** editor that works with *markdown*.
+
+## Features
+
+- Bold, italic, underline formatting
+- Headings (H1-H6)
+- Bullet and numbered lists
+- Task lists
+- Code blocks
+- Blockquotes
+- Links
+
+### Code Example
+
+\`\`\`typescript
+const greeting = "Hello, World!";
+console.log(greeting);
+\`\`\`
+
+> This is a blockquote with some important information.
+
+Try editing this content!
+`;
+
+/**
+ * Basic usage example
+ */
+function BasicEditorExample() {
+  const [content, setContent] = useState(SAMPLE_MARKDOWN);
+
+  return (
+    <Card>
+      <View spacing="md" style={{ padding: 16 }}>
+        <Text size="lg" weight="semibold">Basic Editor</Text>
+        <Text size="sm" color="secondary">
+          A simple controlled editor with markdown input/output
+        </Text>
+        <MarkdownEditor
+          value={content}
+          onChange={setContent}
+          placeholder="Start writing..."
+          minHeight={300}
+        />
+      </View>
+    </Card>
+  );
+}
+
+/**
+ * Controlled editor with ref methods
+ */
+function ControlledEditorExample() {
+  const [content, setContent] = useState('');
+  const [output, setOutput] = useState('');
+  const editorRef = useRef<MarkdownEditorRef>(null);
+
+  const handleClear = () => {
+    editorRef.current?.clear();
+    setOutput('');
+  };
+
+  const handleGetContent = async () => {
+    const markdown = await editorRef.current?.getMarkdown();
+    setOutput(markdown ?? '');
+  };
+
+  const handleSetContent = () => {
+    editorRef.current?.setMarkdown('# New Content\n\nThis was set programmatically.');
+  };
+
+  return (
+    <Card>
+      <View spacing="md" style={{ padding: 16 }}>
+        <Text size="lg" weight="semibold">Editor with Ref Methods</Text>
+        <Text size="sm" color="secondary">
+          Use ref methods to programmatically control the editor
+        </Text>
+        <View direction="row" spacing="sm">
+          <Button size="sm" type="outlined" onPress={handleClear}>
+            Clear
+          </Button>
+          <Button size="sm" type="outlined" onPress={handleGetContent}>
+            Get Markdown
+          </Button>
+          <Button size="sm" type="outlined" onPress={handleSetContent}>
+            Set Content
+          </Button>
+        </View>
+        <MarkdownEditor
+          ref={editorRef}
+          value={content}
+          onChange={setContent}
+          placeholder="Type something..."
+          minHeight={200}
+        />
+        {output ? (
+          <View spacing="sm">
+            <Text size="sm" weight="semibold">Output:</Text>
+            <View style={{ backgroundColor: '#f5f5f5', padding: 12, borderRadius: 8 }}>
+              <Text size="sm" style={{ fontFamily: 'monospace' }}>
+                {output}
+              </Text>
+            </View>
+          </View>
+        ) : null}
+      </View>
+    </Card>
+  );
+}
+
+/**
+ * Read-only mode example
+ */
+function ReadOnlyEditorExample() {
+  return (
+    <Card>
+      <View spacing="md" style={{ padding: 16 }}>
+        <Text size="lg" weight="semibold">Read-Only Mode</Text>
+        <Text size="sm" color="secondary">
+          Use editable=false for a rich markdown viewer
+        </Text>
+        <MarkdownEditor
+          initialValue={SAMPLE_MARKDOWN}
+          editable={false}
+          toolbar={{ visible: false }}
+          minHeight={250}
+        />
+      </View>
+    </Card>
+  );
+}
+
+/**
+ * Custom toolbar configuration
+ */
+function CustomToolbarExample() {
+  const [content, setContent] = useState('');
+
+  return (
+    <Card>
+      <View spacing="md" style={{ padding: 16 }}>
+        <Text size="lg" weight="semibold">Custom Toolbar</Text>
+        <Text size="sm" color="secondary">
+          Configure which toolbar items appear and their position
+        </Text>
+        <MarkdownEditor
+          value={content}
+          onChange={setContent}
+          placeholder="Minimal formatting options..."
+          toolbar={{
+            items: ['bold', 'italic', 'link', 'bulletList', 'orderedList'],
+            position: 'bottom',
+          }}
+          minHeight={200}
+        />
+      </View>
+    </Card>
+  );
+}
+
+/**
+ * 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
+ */
+export function MarkdownEditorExamples() {
+  return (
+    <Screen>
+      <View spacing="lg" padding={12}>
+        <Text size="xl" weight="bold">
+          Markdown Editor
+        </Text>
+        <Text color="secondary">
+          A cross-platform WYSIWYG markdown editor. Uses Tiptap on web and 10tap-editor on native.
+        </Text>
+
+        <Card>
+          <View spacing="sm" style={{ padding: 16 }}>
+            <Text size="lg" weight="semibold">Features</Text>
+            <View spacing="xs">
+              <Text size="sm">• Markdown input/output - no HTML exposed to consumers</Text>
+              <Text size="sm">• Rich text editing with formatting toolbar</Text>
+              <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>
+        </Card>
+
+        <BasicEditorExample />
+        <ControlledEditorExample />
+        <ReadOnlyEditorExample />
+        <CustomToolbarExample />
+        <DisabledItemsExample />
+      </View>
+    </Screen>
+  );
+}
+
+export default MarkdownEditorExamples;

package/src/Editor/examples/index.ts

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

package/src/Editor/index.native.ts

@@ -0,0 +1,23 @@
+/**
+ * @idealyst/markdown/editor - Cross-platform markdown editor (React Native)
+ *
+ * Provides a MarkdownEditor component for editing markdown content
+ * with a rich text interface on React Native using 10tap-editor.
+ */
+
+// Main component
+export { default as MarkdownEditor } from './MarkdownEditor.native';
+
+// Types
+export type {
+  MarkdownEditorProps,
+  MarkdownEditorRef,
+  ToolbarItem,
+  ToolbarConfig,
+} from './types';
+
+// Style types
+export type {
+  EditorDynamicProps,
+  EditorVariants,
+} from './MarkdownEditor.styles';

package/src/Editor/index.ts

@@ -0,0 +1,43 @@
+/**
+ * @idealyst/markdown/editor - Cross-platform markdown editor
+ *
+ * Provides a MarkdownEditor component for editing markdown content
+ * with a rich text interface on both web and React Native platforms.
+ *
+ * Web uses Tiptap with tiptap-markdown extension.
+ * Native uses 10tap-editor (Tiptap in WebView).
+ *
+ * @example
+ * ```tsx
+ * import { MarkdownEditor } from '@idealyst/markdown/editor';
+ *
+ * function App() {
+ *   const [content, setContent] = useState('# Hello World');
+ *
+ *   return (
+ *     <MarkdownEditor
+ *       value={content}
+ *       onChange={setContent}
+ *       placeholder="Start writing..."
+ *     />
+ *   );
+ * }
+ * ```
+ */
+
+// Main component
+export { default as MarkdownEditor } from './MarkdownEditor.web';
+
+// Types
+export type {
+  MarkdownEditorProps,
+  MarkdownEditorRef,
+  ToolbarItem,
+  ToolbarConfig,
+} from './types';
+
+// Style types
+export type {
+  EditorDynamicProps,
+  EditorVariants,
+} from './MarkdownEditor.styles';