react-native-enriched-markdown-scaffold 0.7.4-scaffold.1 → 0.7.4-scaffold.11

package/src/EnrichedMarkdownNativeComponent.ts

@@ -141,10 +141,13 @@ interface MathStyleInternal {
   marginTop: CodegenTypes.Float;
   marginBottom: CodegenTypes.Float;
   textAlign: string;
+  fontWeight: string;
 }
 
 interface InlineMathStyleInternal {
   color: ColorValue;
+  paddingVertical: CodegenTypes.Float;
+  fontWeight: string;
 }
 
 interface SpoilerParticlesStyleInternal {

package/src/EnrichedMarkdownTextInput.tsx

@@ -37,6 +37,7 @@ import type {
   TextStyle,
   ColorValue,
 } from 'react-native';
+import type { OnPasteEvent } from './types/events';
 import { normalizeMarkdownTextInputStyle } from './normalizeMarkdownTextInputStyle';
 import { normalizeMenuItem } from './normalizeMenuItem';
 import { toNativeRegexConfig } from './utils/regexParser';
@@ -61,6 +62,7 @@ export interface MathStyle {
   paddingVertical?: number;
   selectedBackgroundColor?: string;
   selectedBorderColor?: string;
+  fontWeight?: 'bold' | 'normal';
 }
 
 export interface MathBlockStyle extends MathStyle {
@@ -151,6 +153,13 @@ export interface EnrichedMarkdownTextInputInstance {
   ) => void;
   removeMath: (start: number) => void;
   copyToClipboard: () => void;
+  /**
+   * Completes a paste reported through `onPaste`. Call it exactly once per
+   * event: `resolvePaste('', '')` drops the clipboard content (replacing any
+   * selection), a non-empty `markdown` re-applies the copied formatting, and
+   * plain `text` inserts verbatim.
+   */
+  resolvePaste: (text: string, markdown?: string) => void;
   getMarkdown: () => Promise<string>;
   getCaretRect: () => Promise<CaretRect>;
 }
@@ -203,7 +212,17 @@ export interface EnrichedMarkdownTextInputProps extends Omit<
   editable?: boolean;
   autoFocus?: boolean;
   scrollEnabled?: boolean;
+  blockSyntax?: boolean;
   autoCapitalize?: string;
+  /**
+   * Report pastes through `onPaste` instead of inserting them. Only takes
+   * effect when `onPaste` is also set — otherwise native would swallow every
+   * paste with nobody left to resolve it.
+   *
+   * macOS ignores this prop and always pastes inline.
+   * @default false
+   */
+  interceptPaste?: boolean;
   multiline?: boolean;
   cursorColor?: ColorValue;
   selectionColor?: ColorValue;
@@ -216,6 +235,12 @@ export interface EnrichedMarkdownTextInputProps extends Omit<
   onCaretRectChange?: (rect: CaretRect) => void;
   onLinkDetected?: (event: OnLinkDetected) => void;
   onMathPress?: (event: OnMathPressEvent) => void;
+  /**
+   * Fires instead of the insert when `interceptPaste` is on. The handler owns
+   * the paste from here: it must call `resolvePaste` exactly once, on every
+   * path including failures, or the paste is silently dropped.
+   */
+  onPaste?: (event: OnPasteEvent) => void;
   mentionIndicators?: string[];
   onStartMention?: (event: OnStartMentionEvent) => void;
   onChangeMention?: (event: OnChangeMentionEvent) => void;
@@ -283,7 +308,9 @@ export const EnrichedMarkdownTextInput = ({
   editable = true,
   autoFocus = false,
   scrollEnabled = true,
+  blockSyntax = true,
   autoCapitalize = 'sentences',
+  interceptPaste = false,
   multiline = true,
   cursorColor,
   selectionColor,
@@ -294,6 +321,7 @@ export const EnrichedMarkdownTextInput = ({
   onCaretRectChange,
   onLinkDetected,
   onMathPress,
+  onPaste,
   mentionIndicators,
   onStartMention,
   onChangeMention,
@@ -435,6 +463,14 @@ export const EnrichedMarkdownTextInput = ({
     [onMathPress]
   );
 
+  const handlePaste = useCallback(
+    (e: NativeSyntheticEvent<OnPasteEvent>) => {
+      const { text, markdown } = e.nativeEvent;
+      onPaste?.({ text, markdown });
+    },
+    [onPaste]
+  );
+
   const handleChangeText = useCallback(
     (e: NativeSyntheticEvent<OnChangeTextEvent>) => {
       onChangeText?.(e.nativeEvent.value);
@@ -590,6 +626,8 @@ export const EnrichedMarkdownTextInput = ({
         ),
       removeMath: (start) => Commands.removeMath(commandRef, start),
       copyToClipboard: () => Commands.copyToClipboard(commandRef),
+      resolvePaste: (text, markdown = '') =>
+        Commands.resolvePaste(commandRef, text, markdown),
       getMarkdown: () =>
         new Promise<string>((resolve, reject) => {
           const requestId = nextRequestId.current++;
@@ -619,7 +657,9 @@ export const EnrichedMarkdownTextInput = ({
       editable={editable}
       autoFocus={autoFocus}
       scrollEnabled={scrollEnabled}
+      blockSyntax={blockSyntax}
       autoCapitalize={autoCapitalize}
+      interceptPaste={interceptPaste === true && onPaste != null}
       multiline={multiline}
       cursorColor={cursorColor}
       selectionColor={selectionColor}
@@ -632,6 +672,7 @@ export const EnrichedMarkdownTextInput = ({
       onChangeState={handleChangeState as NativeProps['onChangeState']}
       onLinkDetected={handleLinkDetected as NativeProps['onLinkDetected']}
       onMathPress={handleMathPress as NativeProps['onMathPress']}
+      onPaste={handlePaste as NativeProps['onPaste']}
       onInputFocus={handleFocus as NativeProps['onInputFocus']}
       onInputBlur={handleBlur as NativeProps['onInputBlur']}
       onRequestMarkdownResult={

package/src/EnrichedMarkdownTextInputNativeComponent.ts

@@ -19,6 +19,7 @@ interface MathStyleInternal {
   paddingVertical: CodegenTypes.Float;
   selectedBackgroundColor: ColorValue;
   selectedBorderColor: ColorValue;
+  fontWeight: string;
 }
 
 interface MathBlockStyleInternal extends MathStyleInternal {
@@ -140,6 +141,11 @@ export interface OnEndMentionEvent {
   indicator: string;
 }
 
+export interface OnPasteEvent {
+  text: string;
+  markdown: string;
+}
+
 export interface ContextMenuItemConfig {
   text: string;
   icon?: string;
@@ -210,10 +216,31 @@ export interface NativeProps extends ViewProps {
    * @default true
    */
   scrollEnabled?: boolean;
+  /**
+   * Whether block-level markdown syntax is interpreted.
+   *
+   * When `false`, list markers, headings, blockquotes, tables, code blocks and
+   * thematic breaks stay in the text verbatim instead of being consumed as
+   * structure, so the markdown round-trips byte-for-byte. Inline syntax
+   * (`**bold**`, links, `$math$`) still applies. `\r\n` is normalized to `\n`
+   * and `U+000B` is stripped from the input.
+   * @default true
+   */
+  blockSyntax?: boolean;
   /**
    * Auto-capitalization behavior.
    */
   autoCapitalize?: string;
+  /**
+   * When `true`, a paste is reported through `onPaste` instead of being
+   * inserted. Native reads the clipboard and leaves the buffer untouched — the
+   * JS handler decides what happens and must call the `resolvePaste` command
+   * exactly once, or the paste is dropped.
+   *
+   * macOS ignores this prop and always pastes inline.
+   * @default false
+   */
+  interceptPaste?: boolean;
   /**
    * Whether the input supports multiple lines.
    * @default true
@@ -300,6 +327,7 @@ export interface NativeProps extends ViewProps {
   onContextMenuItemPress?: CodegenTypes.DirectEventHandler<OnContextMenuItemPressEvent>;
   onLinkDetected?: CodegenTypes.DirectEventHandler<OnLinkDetected>;
   onMathPress?: CodegenTypes.DirectEventHandler<OnMathPressNativeEvent>;
+  onPaste?: CodegenTypes.DirectEventHandler<OnPasteEvent>;
   onStartMention?: CodegenTypes.DirectEventHandler<OnStartMentionEvent>;
   onChangeMention?: CodegenTypes.DirectEventHandler<OnChangeMentionEvent>;
   onEndMention?: CodegenTypes.DirectEventHandler<OnEndMentionEvent>;
@@ -356,6 +384,11 @@ interface NativeCommands {
     start: CodegenTypes.Int32
   ) => void;
   copyToClipboard: (viewRef: React.ElementRef<ComponentType>) => void;
+  resolvePaste: (
+    viewRef: React.ElementRef<ComponentType>,
+    text: string,
+    markdown: string
+  ) => void;
   requestMarkdown: (
     viewRef: React.ElementRef<ComponentType>,
     requestId: CodegenTypes.Int32
@@ -386,6 +419,7 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
     'updateMath',
     'removeMath',
     'copyToClipboard',
+    'resolvePaste',
     'requestMarkdown',
     'requestCaretRect',
   ],

package/src/EnrichedMarkdownTextNativeComponent.ts

@@ -141,10 +141,13 @@ interface MathStyleInternal {
   marginTop: CodegenTypes.Float;
   marginBottom: CodegenTypes.Float;
   textAlign: string;
+  fontWeight: string;
 }
 
 interface InlineMathStyleInternal {
   color: ColorValue;
+  paddingVertical: CodegenTypes.Float;
+  fontWeight: string;
 }
 
 interface SpoilerParticlesStyleInternal {

package/src/index.tsx

@@ -12,6 +12,7 @@ export type {
   LinkPressEvent,
   LinkLongPressEvent,
   TaskListItemPressEvent,
+  OnPasteEvent,
 } from './types/events';
 export type {
   AccessibilityLabels,

package/src/normalizeMarkdownStyle.ts

@@ -193,8 +193,13 @@ const DEFAULT_NORMALIZED_STYLE = Object.freeze({
     marginTop: 0,
     marginBottom: 16,
     textAlign: 'center' as BlockTextAlign,
+    fontWeight: 'normal',
+  },
+  inlineMath: {
+    color: defaultTextColor,
+    paddingVertical: 4,
+    fontWeight: 'normal',
   },
-  inlineMath: { color: defaultTextColor },
   taskList: {
     checkedColor: Platform.select({
       ios: normalizeColor('#007AFF')!,

package/src/normalizeMarkdownStyle.web.ts

@@ -177,8 +177,13 @@ const DEFAULT_NORMALIZED_STYLE: MarkdownStyleInternal = Object.freeze({
     marginTop: 0,
     marginBottom: 16,
     textAlign: 'center' as BlockTextAlign,
+    fontWeight: 'normal',
+  },
+  inlineMath: {
+    color: defaultTextColor,
+    paddingVertical: 4,
+    fontWeight: 'normal',
   },
-  inlineMath: { color: defaultTextColor },
   taskList: {
     checkedColor: '#007AFF',
     borderColor: '#9E9E9E',

package/src/normalizeMarkdownTextInputStyle.ts

@@ -26,6 +26,7 @@ interface MathStyleInternal {
   paddingVertical: number;
   selectedBackgroundColor: ColorValue;
   selectedBorderColor: ColorValue;
+  fontWeight: string;
 }
 
 interface MathBlockStyleInternal extends MathStyleInternal {
@@ -76,6 +77,7 @@ const defaultMathInternal: MathStyleInternal = Object.freeze({
   paddingVertical: 0,
   selectedBackgroundColor: TRANSPARENT,
   selectedBorderColor: TRANSPARENT,
+  fontWeight: 'normal',
 });
 
 const defaultMathBlockInternal: MathBlockStyleInternal = Object.freeze({
@@ -89,6 +91,7 @@ const defaultMathBlockInternal: MathBlockStyleInternal = Object.freeze({
   paddingVertical: 8,
   selectedBackgroundColor: TRANSPARENT,
   selectedBorderColor: TRANSPARENT,
+  fontWeight: 'normal',
   marginTop: 8,
   marginBottom: 8,
   alignment: 'center',
@@ -152,6 +155,7 @@ function normalizeMathStyle(
       normalizeColor(style?.selectedBackgroundColor) ?? backgroundColor,
     selectedBorderColor:
       normalizeColor(style?.selectedBorderColor) ?? borderColor,
+    fontWeight: style?.fontWeight ?? fallback.fontWeight,
   };
 }
 
@@ -171,6 +175,7 @@ function normalizeMathBlockStyle(
     paddingVertical: fallback.paddingVertical,
     selectedBackgroundColor: baseInline.selectedBackgroundColor,
     selectedBorderColor: baseInline.selectedBorderColor,
+    fontWeight: baseInline.fontWeight,
   };
   const inheritedInline = normalizeMathStyle(style, merged);
   let alignment: 'left' | 'center' | 'right' = fallback.alignment;

package/src/types/MarkdownStyle.ts

@@ -155,10 +155,42 @@ interface MathStyle {
   marginTop?: number;
   marginBottom?: number;
   textAlign?: 'left' | 'center' | 'right';
+  /**
+   * Typeset the formula at bold weight.
+   *
+   * The native engine has no weight parameter and its glyph positions are
+   * already laid out when this applies, so `'bold'` is a SYNTHETIC embolden
+   * (a stroke on iOS, the platform's fake-bold on Android) rather than a
+   * switch to the bundled bold faces. That is deliberate: KaTeX's bold faces
+   * are up to 15% wider than the regular advances the layout reserved, so
+   * swapping them in would make glyphs collide.
+   * @default 'normal'
+   */
+  fontWeight?: 'bold' | 'normal';
 }
 
 interface InlineMathStyle {
   color?: string;
+  /**
+   * Empty space added above and below the formula box, in points.
+   * Inline formulas report their own metrics, so a fraction can be taller
+   * than the paragraph's `lineHeight` — which is expand-only and therefore
+   * cannot loosen those lines. This is the knob that does.
+   * @default 4
+   */
+  paddingVertical?: number;
+  /**
+   * Typeset the formula at bold weight.
+   *
+   * The native engine has no weight parameter and its glyph positions are
+   * already laid out when this applies, so `'bold'` is a SYNTHETIC embolden
+   * (a stroke on iOS, the platform's fake-bold on Android) rather than a
+   * switch to the bundled bold faces. That is deliberate: KaTeX's bold faces
+   * are up to 15% wider than the regular advances the layout reserved, so
+   * swapping them in would make glyphs collide.
+   * @default 'normal'
+   */
+  fontWeight?: 'bold' | 'normal';
 }
 
 interface SpoilerParticlesStyle {

package/src/types/MarkdownStyleInternal.ts

@@ -140,10 +140,13 @@ interface MathStyleInternal {
   marginTop: number;
   marginBottom: number;
   textAlign: BlockTextAlign;
+  fontWeight: string;
 }
 
 interface InlineMathStyleInternal {
   color: string;
+  paddingVertical: number;
+  fontWeight: string;
 }
 
 interface SpoilerParticlesStyleInternal {

package/src/types/events.ts

@@ -30,3 +30,19 @@ export interface OnContextMenuItemPressEvent {
   selectionStart: number;
   selectionEnd: number;
 }
+
+/**
+ * Event payload fired by the native component when the user pastes while
+ * `interceptPaste` is on. Native does not touch the buffer — it only reports
+ * what the clipboard held. The handler must call `resolvePaste` exactly once,
+ * or the paste is dropped.
+ */
+export interface OnPasteEvent {
+  /** Plain text from the clipboard, verbatim, before the text view sees it. */
+  text: string;
+  /**
+   * Markdown flavor, set only when the copy source was an input of this
+   * component. iOS-only; Android always reports `''`.
+   */
+  markdown: string;
+}

package/src/web/globalStyles.ts

@@ -8,6 +8,13 @@ const RULES: ReadonlyArray<readonly [id: string, css: string]> = [
     'enrm-selection-style',
     `.${ENRM_TEXT_CLASS} ::selection { background-color: var(${ENRM_SELECTION_BG_VAR}); }`,
   ],
+  // `fontWeight` for math is set on the span wrapping KaTeX's output, so the
+  // formula only picks it up by inheritance. `katex.css` opens `.katex` with
+  // the `font` shorthand, which resets `font-weight` — and a rule matching the
+  // element itself always beats a value inherited from an ancestor, inline
+  // style included. We do not load `katex.css` (MathML output needs no CSS),
+  // but a consumer may, so opt `.katex` back into inheriting.
+  ['enrm-katex-font-weight', '.katex { font-weight: inherit; }'],
 ];
 
 for (const [id, css] of RULES) {

package/src/web/styles.ts

@@ -333,7 +333,10 @@ function highlightStyle(style: MarkdownStyleInternal): CSSProperties {
 }
 
 function mathInlineStyle(style: MarkdownStyleInternal): CSSProperties {
-  return { color: style.inlineMath.color };
+  return {
+    color: style.inlineMath.color,
+    fontWeight: normalizeFontWeight(style.inlineMath.fontWeight),
+  };
 }
 
 function mathDisplayStyle(style: MarkdownStyleInternal): CSSProperties {
@@ -341,6 +344,7 @@ function mathDisplayStyle(style: MarkdownStyleInternal): CSSProperties {
   return {
     fontSize: math.fontSize,
     color: math.color,
+    fontWeight: normalizeFontWeight(math.fontWeight),
     backgroundColor: math.backgroundColor,
     padding: math.padding,
     marginTop: math.marginTop,