react-native-jet-markdown 0.2.0-beta.7

package/src/JetMarkdownEditor.native.tsx

@@ -0,0 +1,301 @@
+import {
+  type Ref,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
+import type { NativeSyntheticEvent } from "react-native";
+
+import NativeJetMarkdownEditor, {
+  Commands,
+} from "./JetMarkdownEditorNativeComponent";
+import {
+  type MainStyle,
+  serializeStyles,
+  splitContainerStyle,
+} from "./serializeStyles";
+import type {
+  JetMarkdownEditorProps,
+  JetMarkdownEditorRef,
+  MarkdownImageData,
+  MarkdownSelection,
+} from "./types";
+
+type NativeEditor = React.ElementRef<typeof NativeJetMarkdownEditor>;
+
+export function JetMarkdownEditor({
+  allowFontScaling,
+  autoCapitalize,
+  autoCorrect,
+  autoFocus,
+  cursorColor,
+  defaultValue,
+  editable,
+  mentionTriggers,
+  multiline,
+  onBlur,
+  onChangeMarkdown,
+  onChangeSelection,
+  onChangeState,
+  onChangeText,
+  onFocus,
+  onLinkDetected,
+  onMentionChange,
+  onMentionEnd,
+  onMentionStart,
+  onPaste,
+  placeholder,
+  placeholderTextColor,
+  scrollEnabled,
+  selectionColor,
+  style,
+  styles,
+  ref,
+}: JetMarkdownEditorProps & { ref?: Ref<JetMarkdownEditorRef> }) {
+  const nativeRef = useRef<NativeEditor>(null);
+  // getMarkdown resolves from the latest onEditorChangeMarkdown payload;
+  // until the serializer emits (E1), plain text doubles as the markdown.
+  const markdownRef = useRef<string | null>(null);
+  const textRef = useRef<string>(defaultValue ?? "");
+
+  const { hostStyle, main } = splitContainerStyle(style);
+  // maxHeight rides as a native prop (autogrow cap; the editor scrolls
+  // internally past it) instead of a host style key. It is omitted when
+  // unset: Yoga reads the same raw prop as max-height, and a 0 would clamp
+  // flex-sized editors to zero height.
+  const { maxHeight, ...editorHostStyle } = hostStyle;
+  const mainKey = JSON.stringify(main);
+  const stylesJson = useMemo(
+    () => serializeStyles(styles, JSON.parse(mainKey) as MainStyle),
+    [styles, mainKey]
+  );
+
+  useImperativeHandle(
+    ref,
+    (): JetMarkdownEditorRef => ({
+      blur: () => {
+        if (nativeRef.current) {
+          Commands.blur(nativeRef.current);
+        }
+      },
+      focus: () => {
+        if (nativeRef.current) {
+          Commands.focus(nativeRef.current);
+        }
+      },
+      getMarkdown: () =>
+        Promise.resolve(markdownRef.current ?? textRef.current),
+      insertLink: (url: string, label?: string) => {
+        if (nativeRef.current) {
+          Commands.insertLink(nativeRef.current, url, label ?? "");
+        }
+      },
+      insertMarkdown: (markdown: string) => {
+        if (nativeRef.current) {
+          Commands.insertMarkdown(nativeRef.current, markdown);
+        }
+      },
+      insertMention: (trigger: string, label: string, url: string) => {
+        if (nativeRef.current) {
+          Commands.insertMention(nativeRef.current, trigger, label, url);
+        }
+      },
+      removeLink: () => {
+        if (nativeRef.current) {
+          Commands.removeLink(nativeRef.current);
+        }
+      },
+      setSelection: (start: number, end: number) => {
+        if (nativeRef.current) {
+          Commands.setSelection(nativeRef.current, start, end);
+        }
+      },
+      setValue: (markdown: string) => {
+        // Seed with the value being set so getMarkdown() never reports the
+        // pre-setValue document; native re-emits its canonical serialization
+        // right after.
+        markdownRef.current = markdown;
+        textRef.current = markdown;
+        if (nativeRef.current) {
+          Commands.setValue(nativeRef.current, markdown);
+        }
+      },
+      toggleBlockQuote: () => {
+        if (nativeRef.current) {
+          Commands.toggleBlockQuote(nativeRef.current);
+        }
+      },
+      toggleBold: () => {
+        if (nativeRef.current) {
+          Commands.toggleBold(nativeRef.current);
+        }
+      },
+      toggleCode: () => {
+        if (nativeRef.current) {
+          Commands.toggleCode(nativeRef.current);
+        }
+      },
+      toggleCodeBlock: () => {
+        if (nativeRef.current) {
+          Commands.toggleCodeBlock(nativeRef.current);
+        }
+      },
+      toggleHeading: (level: number) => {
+        if (nativeRef.current) {
+          Commands.toggleHeading(nativeRef.current, level);
+        }
+      },
+      toggleItalic: () => {
+        if (nativeRef.current) {
+          Commands.toggleItalic(nativeRef.current);
+        }
+      },
+      toggleOrderedList: () => {
+        if (nativeRef.current) {
+          Commands.toggleOrderedList(nativeRef.current);
+        }
+      },
+      toggleSpoiler: () => {
+        if (nativeRef.current) {
+          Commands.toggleSpoiler(nativeRef.current);
+        }
+      },
+      toggleStrikethrough: () => {
+        if (nativeRef.current) {
+          Commands.toggleStrikethrough(nativeRef.current);
+        }
+      },
+      toggleSubscript: () => {
+        if (nativeRef.current) {
+          Commands.toggleSubscript(nativeRef.current);
+        }
+      },
+      toggleSuperscript: () => {
+        if (nativeRef.current) {
+          Commands.toggleSuperscript(nativeRef.current);
+        }
+      },
+      toggleUnorderedList: () => {
+        if (nativeRef.current) {
+          Commands.toggleUnorderedList(nativeRef.current);
+        }
+      },
+    }),
+    []
+  );
+
+  // The native side never inserts pasted content itself: it reports the
+  // clipboard here, and unless the app's onPaste calls preventDefault()
+  // synchronously, the default insertion happens via insertMarkdown.
+  const handlePaste = useCallback(
+    (
+      event: NativeSyntheticEvent<{
+        images: readonly MarkdownImageData[];
+        text: string;
+      }>
+    ) => {
+      const { images, text } = event.nativeEvent;
+      let prevented = false;
+      onPaste?.({
+        images: images.length > 0 ? [...images] : undefined,
+        preventDefault: () => {
+          prevented = true;
+        },
+        text: text.length > 0 ? text : undefined,
+      });
+      if (!prevented && text.length > 0 && nativeRef.current) {
+        Commands.insertMarkdown(nativeRef.current, text);
+      }
+    },
+    [onPaste]
+  );
+
+  return (
+    <NativeJetMarkdownEditor
+      allowFontScaling={allowFontScaling}
+      autoCapitalize={autoCapitalize}
+      autoCorrect={autoCorrect}
+      autoFocus={autoFocus}
+      cursorColor={cursorColor}
+      defaultValue={defaultValue}
+      editable={editable}
+      maxHeight={
+        typeof maxHeight === "number" && maxHeight > 0 ? maxHeight : undefined
+      }
+      mentionTriggers={mentionTriggers}
+      multiline={multiline}
+      onEditorBlur={onBlur ? () => onBlur() : undefined}
+      onEditorChangeMarkdown={(
+        event: NativeSyntheticEvent<{ markdown: string }>
+      ) => {
+        markdownRef.current = event.nativeEvent.markdown;
+        onChangeMarkdown?.(event.nativeEvent.markdown);
+      }}
+      onEditorChangeSelection={
+        onChangeSelection
+          ? (event: NativeSyntheticEvent<MarkdownSelection>) =>
+              onChangeSelection({
+                end: event.nativeEvent.end,
+                start: event.nativeEvent.start,
+              })
+          : undefined
+      }
+      onEditorChangeState={
+        onChangeState
+          ? (event) => {
+              // Copy the declared fields so consumers never see the raw
+              // nativeEvent extras (target, etc.).
+              const state = event.nativeEvent;
+              onChangeState({
+                headingLevel: state.headingLevel,
+                isBlockQuote: state.isBlockQuote,
+                isBold: state.isBold,
+                isCodeBlock: state.isCodeBlock,
+                isInlineCode: state.isInlineCode,
+                isItalic: state.isItalic,
+                isOrderedList: state.isOrderedList,
+                isSpoiler: state.isSpoiler,
+                isStrikethrough: state.isStrikethrough,
+                isSubscript: state.isSubscript,
+                isSuperscript: state.isSuperscript,
+                isUnorderedList: state.isUnorderedList,
+              });
+            }
+          : undefined
+      }
+      onEditorChangeText={(event: NativeSyntheticEvent<{ text: string }>) => {
+        textRef.current = event.nativeEvent.text;
+        onChangeText?.(event.nativeEvent.text);
+      }}
+      onEditorFocus={onFocus ? () => onFocus() : undefined}
+      onEditorLinkDetected={
+        onLinkDetected
+          ? (event: NativeSyntheticEvent<{ url: string }>) =>
+              onLinkDetected({ url: event.nativeEvent.url })
+          : undefined
+      }
+      onEditorMentionChange={
+        onMentionChange
+          ? (event) => onMentionChange(event.nativeEvent)
+          : undefined
+      }
+      onEditorMentionEnd={
+        onMentionEnd ? (event) => onMentionEnd(event.nativeEvent) : undefined
+      }
+      onEditorMentionStart={
+        onMentionStart
+          ? (event) => onMentionStart(event.nativeEvent)
+          : undefined
+      }
+      onEditorPaste={handlePaste}
+      placeholder={placeholder}
+      placeholderTextColor={placeholderTextColor}
+      ref={nativeRef}
+      scrollEnabled={scrollEnabled}
+      selectionColor={selectionColor}
+      style={editorHostStyle}
+      stylesJson={stylesJson}
+    />
+  );
+}

package/src/JetMarkdownEditor.tsx

@@ -0,0 +1,90 @@
+import { type Ref, useImperativeHandle, useRef } from "react";
+import { type StyleProp, TextInput, type TextStyle } from "react-native";
+
+import type { JetMarkdownEditorProps, JetMarkdownEditorRef } from "./types";
+
+// Non-native (web) fallback: a plain multiline text input over raw markdown.
+export function JetMarkdownEditor({
+  allowFontScaling,
+  autoCapitalize,
+  autoCorrect,
+  autoFocus,
+  cursorColor,
+  defaultValue,
+  editable,
+  multiline = true,
+  onBlur,
+  onChangeMarkdown,
+  onChangeText,
+  onFocus,
+  placeholder,
+  placeholderTextColor,
+  scrollEnabled,
+  selectionColor,
+  style,
+  ref,
+}: JetMarkdownEditorProps & { ref?: Ref<JetMarkdownEditorRef> }) {
+  const inputRef = useRef<React.ComponentRef<typeof TextInput>>(null);
+  const textRef = useRef(defaultValue ?? "");
+
+  useImperativeHandle(
+    ref,
+    (): JetMarkdownEditorRef => ({
+      blur: () => inputRef.current?.blur(),
+      focus: () => inputRef.current?.focus(),
+      getMarkdown: () => Promise.resolve(textRef.current),
+      insertLink: () => undefined,
+      insertMarkdown: () => undefined,
+      insertMention: () => undefined,
+      removeLink: () => undefined,
+      setSelection: () => {
+        // Not supported in the web fallback.
+      },
+      setValue: (markdown: string) => {
+        textRef.current = markdown;
+        inputRef.current?.setNativeProps({ text: markdown });
+      },
+      // Formatting toggles are not supported in the web fallback (raw
+      // markdown).
+      toggleBlockQuote: () => undefined,
+      toggleBold: () => undefined,
+      toggleCode: () => undefined,
+      toggleCodeBlock: () => undefined,
+      toggleHeading: () => undefined,
+      toggleItalic: () => undefined,
+      toggleOrderedList: () => undefined,
+      toggleSpoiler: () => undefined,
+      toggleStrikethrough: () => undefined,
+      toggleSubscript: () => undefined,
+      toggleSuperscript: () => undefined,
+      toggleUnorderedList: () => undefined,
+    }),
+    []
+  );
+
+  return (
+    <TextInput
+      allowFontScaling={allowFontScaling}
+      autoCapitalize={autoCapitalize}
+      autoCorrect={autoCorrect}
+      autoFocus={autoFocus}
+      cursorColor={cursorColor}
+      defaultValue={defaultValue}
+      editable={editable}
+      multiline={multiline}
+      onBlur={onBlur}
+      onChangeText={(text) => {
+        textRef.current = text;
+        onChangeText?.(text);
+        onChangeMarkdown?.(text);
+      }}
+      onFocus={onFocus}
+      placeholder={placeholder}
+      placeholderTextColor={placeholderTextColor}
+      ref={inputRef}
+      scrollEnabled={scrollEnabled}
+      selectionColor={selectionColor}
+      style={style as StyleProp<TextStyle>}
+    />
+  );
+}

package/src/JetMarkdownEditorNativeComponent.ts

@@ -0,0 +1,173 @@
+import {
+  type CodegenTypes,
+  type ColorValue,
+  codegenNativeCommands,
+  codegenNativeComponent,
+  type HostComponent,
+  type ViewProps,
+} from "react-native";
+
+interface TextEvent {
+  text: string;
+}
+
+interface MarkdownEvent {
+  markdown: string;
+}
+
+interface SelectionEvent {
+  end: CodegenTypes.Int32;
+  start: CodegenTypes.Int32;
+}
+
+interface StateEvent {
+  headingLevel: CodegenTypes.Int32;
+  isBlockQuote: boolean;
+  isBold: boolean;
+  isCodeBlock: boolean;
+  isInlineCode: boolean;
+  isItalic: boolean;
+  isOrderedList: boolean;
+  isSpoiler: boolean;
+  isStrikethrough: boolean;
+  isSubscript: boolean;
+  isSuperscript: boolean;
+  isUnorderedList: boolean;
+}
+
+interface UrlEvent {
+  url: string;
+}
+
+interface MentionEvent {
+  trigger: string;
+}
+
+interface MentionQueryEvent {
+  query: string;
+  trigger: string;
+}
+
+interface PasteEvent {
+  // Codegen's event parser needs inline element types and rejects readonly
+  // arrays (the props parser accepts both).
+  images: {
+    height: CodegenTypes.Double;
+    url: string;
+    width: CodegenTypes.Double;
+  }[];
+  text: string;
+}
+
+interface NativeProps extends ViewProps {
+  allowFontScaling?: CodegenTypes.WithDefault<boolean, true>;
+  autoCapitalize?: CodegenTypes.WithDefault<
+    "none" | "sentences" | "words" | "characters",
+    "sentences"
+  >;
+  autoCorrect?: CodegenTypes.WithDefault<boolean, true>;
+  autoFocus?: CodegenTypes.WithDefault<boolean, false>;
+  cursorColor?: ColorValue;
+  defaultValue?: string;
+  editable?: CodegenTypes.WithDefault<boolean, true>;
+  /**
+   * Autogrow cap in points; native default 0 = unbounded. Yoga ALSO parses
+   * this key out of the raw-props bag as max-height, so the wrapper MUST
+   * omit it entirely when unset — an unconditional 0 clamps the node to
+   * zero height (dead flex-sized editors). When set, Yoga's clamp equals
+   * the autogrow cap, which is exactly the intended geometry.
+   */
+  maxHeight?: CodegenTypes.WithDefault<CodegenTypes.Double, 0>;
+  mentionTriggers?: readonly string[];
+  multiline?: CodegenTypes.WithDefault<boolean, true>;
+  onEditorBlur?: CodegenTypes.DirectEventHandler<null>;
+  onEditorChangeMarkdown?: CodegenTypes.DirectEventHandler<MarkdownEvent>;
+  onEditorChangeSelection?: CodegenTypes.DirectEventHandler<SelectionEvent>;
+  onEditorChangeState?: CodegenTypes.DirectEventHandler<StateEvent>;
+  onEditorChangeText?: CodegenTypes.DirectEventHandler<TextEvent>;
+  onEditorFocus?: CodegenTypes.DirectEventHandler<null>;
+  onEditorLinkDetected?: CodegenTypes.DirectEventHandler<UrlEvent>;
+  onEditorMentionChange?: CodegenTypes.DirectEventHandler<MentionQueryEvent>;
+  onEditorMentionEnd?: CodegenTypes.DirectEventHandler<MentionEvent>;
+  onEditorMentionStart?: CodegenTypes.DirectEventHandler<MentionEvent>;
+  onEditorPaste?: CodegenTypes.DirectEventHandler<PasteEvent>;
+  placeholder?: string;
+  placeholderTextColor?: ColorValue;
+  scrollEnabled?: CodegenTypes.WithDefault<boolean, false>;
+  selectionColor?: ColorValue;
+  stylesJson?: string;
+}
+
+type EditorComponentType = HostComponent<NativeProps>;
+
+interface NativeCommands {
+  blur: (viewRef: React.ElementRef<EditorComponentType>) => void;
+  focus: (viewRef: React.ElementRef<EditorComponentType>) => void;
+  insertLink: (
+    viewRef: React.ElementRef<EditorComponentType>,
+    url: string,
+    label: string
+  ) => void;
+  insertMarkdown: (
+    viewRef: React.ElementRef<EditorComponentType>,
+    value: string
+  ) => void;
+  insertMention: (
+    viewRef: React.ElementRef<EditorComponentType>,
+    trigger: string,
+    label: string,
+    url: string
+  ) => void;
+  removeLink: (viewRef: React.ElementRef<EditorComponentType>) => void;
+  setSelection: (
+    viewRef: React.ElementRef<EditorComponentType>,
+    start: CodegenTypes.Int32,
+    end: CodegenTypes.Int32
+  ) => void;
+  setValue: (
+    viewRef: React.ElementRef<EditorComponentType>,
+    value: string
+  ) => void;
+  toggleBlockQuote: (viewRef: React.ElementRef<EditorComponentType>) => void;
+  toggleBold: (viewRef: React.ElementRef<EditorComponentType>) => void;
+  toggleCode: (viewRef: React.ElementRef<EditorComponentType>) => void;
+  toggleCodeBlock: (viewRef: React.ElementRef<EditorComponentType>) => void;
+  toggleHeading: (
+    viewRef: React.ElementRef<EditorComponentType>,
+    level: CodegenTypes.Int32
+  ) => void;
+  toggleItalic: (viewRef: React.ElementRef<EditorComponentType>) => void;
+  toggleOrderedList: (viewRef: React.ElementRef<EditorComponentType>) => void;
+  toggleSpoiler: (viewRef: React.ElementRef<EditorComponentType>) => void;
+  toggleStrikethrough: (viewRef: React.ElementRef<EditorComponentType>) => void;
+  toggleSubscript: (viewRef: React.ElementRef<EditorComponentType>) => void;
+  toggleSuperscript: (viewRef: React.ElementRef<EditorComponentType>) => void;
+  toggleUnorderedList: (viewRef: React.ElementRef<EditorComponentType>) => void;
+}
+
+export const Commands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: [
+    "blur",
+    "focus",
+    "insertLink",
+    "insertMarkdown",
+    "insertMention",
+    "removeLink",
+    "setSelection",
+    "setValue",
+    "toggleBlockQuote",
+    "toggleBold",
+    "toggleCode",
+    "toggleCodeBlock",
+    "toggleHeading",
+    "toggleItalic",
+    "toggleOrderedList",
+    "toggleSpoiler",
+    "toggleStrikethrough",
+    "toggleSubscript",
+    "toggleSuperscript",
+    "toggleUnorderedList",
+  ],
+});
+
+export default codegenNativeComponent<NativeProps>("JetMarkdownEditor");

package/src/JetMarkdownView.native.tsx

@@ -0,0 +1,67 @@
+import { useMemo } from "react";
+import type { NativeSyntheticEvent } from "react-native";
+
+import NativeJetMarkdownView from "./JetMarkdownViewNativeComponent";
+import {
+  type MainStyle,
+  serializeStyles,
+  splitContainerStyle,
+} from "./serializeStyles";
+import type {
+  JetMarkdownViewProps,
+  MarkdownImageEvent,
+  MarkdownUrlEvent,
+} from "./types";
+
+export function JetMarkdownView({
+  allowFontScaling,
+  markdown,
+  style,
+  styles,
+  images,
+  onLinkPress,
+  onLinkLongPress,
+  onImagePress,
+}: JetMarkdownViewProps) {
+  const { hostStyle, main } = splitContainerStyle(style);
+
+  const mainKey = JSON.stringify(main);
+  const stylesJson = useMemo(
+    () => serializeStyles(styles, JSON.parse(mainKey) as MainStyle),
+    [styles, mainKey]
+  );
+
+  return (
+    <NativeJetMarkdownView
+      allowFontScaling={allowFontScaling}
+      images={images}
+      markdown={markdown}
+      onImagePress={
+        onImagePress
+          ? (event: NativeSyntheticEvent<MarkdownImageEvent>) =>
+              onImagePress({
+                height: event.nativeEvent.height,
+                url: event.nativeEvent.url,
+                width: event.nativeEvent.width,
+                x: event.nativeEvent.x,
+                y: event.nativeEvent.y,
+              })
+          : undefined
+      }
+      onLinkLongPress={
+        onLinkLongPress
+          ? (event: NativeSyntheticEvent<MarkdownUrlEvent>) =>
+              onLinkLongPress({ url: event.nativeEvent.url })
+          : undefined
+      }
+      onLinkPress={
+        onLinkPress
+          ? (event: NativeSyntheticEvent<MarkdownUrlEvent>) =>
+              onLinkPress({ url: event.nativeEvent.url })
+          : undefined
+      }
+      style={hostStyle}
+      stylesJson={stylesJson}
+    />
+  );
+}

package/src/JetMarkdownView.tsx

@@ -0,0 +1,16 @@
+import { type StyleProp, Text, View, type ViewStyle } from "react-native";
+
+import type { JetMarkdownViewProps } from "./types";
+
+// Non-native (web) fallback: renders the raw markdown as plain text.
+export function JetMarkdownView({
+  allowFontScaling,
+  markdown,
+  style,
+}: JetMarkdownViewProps) {
+  return (
+    <View style={style as StyleProp<ViewStyle>}>
+      <Text allowFontScaling={allowFontScaling}>{markdown}</Text>
+    </View>
+  );
+}

package/src/JetMarkdownViewNativeComponent.ts

@@ -0,0 +1,35 @@
+import {
+  type CodegenTypes,
+  codegenNativeComponent,
+  type ViewProps,
+} from "react-native";
+
+interface UrlEvent {
+  url: string;
+}
+
+interface ImagePressEvent {
+  height: CodegenTypes.Double;
+  url: string;
+  width: CodegenTypes.Double;
+  x: CodegenTypes.Double;
+  y: CodegenTypes.Double;
+}
+
+interface ImageData {
+  height: CodegenTypes.Double;
+  url: string;
+  width: CodegenTypes.Double;
+}
+
+interface NativeProps extends ViewProps {
+  allowFontScaling?: CodegenTypes.WithDefault<boolean, true>;
+  images?: readonly ImageData[];
+  markdown: string;
+  onImagePress?: CodegenTypes.DirectEventHandler<ImagePressEvent>;
+  onLinkLongPress?: CodegenTypes.DirectEventHandler<UrlEvent>;
+  onLinkPress?: CodegenTypes.DirectEventHandler<UrlEvent>;
+  stylesJson?: string;
+}
+
+export default codegenNativeComponent<NativeProps>("JetMarkdownView");