@bigbinary/neetoui-rn 3.3.4 → 3.5.0

package/src/components/ChatInput/MentionSuggestionList.tsx

@@ -0,0 +1,71 @@
+import { ScrollView, View } from "react-native";
+
+import { StyleSheet } from "react-native-unistyles";
+
+import { scaleFor } from "../../utils/scale";
+import { Avatar } from "../Avatar";
+import { Touchable } from "../Touchable";
+import { Typography } from "../Typography";
+import type { MentionSuggestion } from "./mentions";
+
+const MAX_VISIBLE_SUGGESTIONS = 4;
+
+export const filterMentionSuggestions = (
+  suggestions: MentionSuggestion[],
+  keyword: string,
+  limit = MAX_VISIBLE_SUGGESTIONS
+) =>
+  suggestions
+    .filter(suggestion =>
+      suggestion.name.toLocaleLowerCase().includes(keyword.toLocaleLowerCase())
+    )
+    .slice(0, limit);
+
+type MentionSuggestionListProps = {
+  suggestions: MentionSuggestion[];
+  onSelect: (suggestion: MentionSuggestion) => void;
+};
+
+export const MentionSuggestionList = ({
+  suggestions,
+  onSelect,
+}: MentionSuggestionListProps) => (
+  <View style={styles.card} testID="mention-suggestions">
+    <ScrollView keyboardShouldPersistTaps="always">
+      {suggestions.map(suggestion => (
+        <Touchable
+          key={suggestion.id}
+          style={styles.row}
+          onPress={() => onSelect(suggestion)}
+        >
+          <Avatar
+            imageUrl={suggestion.imageUrl}
+            name={suggestion.name}
+            variant="small"
+          />
+          <Typography size="xs">{suggestion.name}</Typography>
+        </Touchable>
+      ))}
+    </ScrollView>
+  </View>
+);
+
+const styles = StyleSheet.create((theme, rt) => {
+  const moderateScale = scaleFor(rt.screen);
+
+  return {
+    card: {
+      backgroundColor: theme.colors.background.secondary,
+      borderRadius: moderateScale(10),
+      maxHeight: moderateScale(200),
+      ...theme.elevation.medium,
+    },
+    row: {
+      alignItems: "center",
+      flexDirection: "row",
+      gap: moderateScale(8),
+      height: moderateScale(50),
+      paddingHorizontal: moderateScale(10),
+    },
+  };
+});

package/src/components/ChatInput/MentionsInput.tsx

@@ -1,16 +1,21 @@
 import { useMemo, type Ref } from "react";
-import { ScrollView, TextInput, View, type TextInputProps } from "react-native";
+import {
+  TextInput,
+  View,
+  useWindowDimensions,
+  type TextInputProps,
+} from "react-native";
 import { useMentions } from "react-native-controlled-mentions";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
 import { scaleFor } from "../../utils/scale";
-import { Avatar } from "../Avatar";
-import { Touchable } from "../Touchable";
-import { Typography } from "../Typography";
+import { LINE_HEIGHT_RATIO } from "../Typography";
+import {
+  MentionSuggestionList,
+  filterMentionSuggestions,
+} from "./MentionSuggestionList";
 import { buildMentionTriggerConfig, type MentionSuggestion } from "./mentions";
 
-const MAX_VISIBLE_SUGGESTIONS = 4;
-
 type MentionsInputProps = Omit<
   TextInputProps,
   "value" | "onChange" | "onChangeText" | "onSelectionChange"
@@ -20,6 +25,8 @@ type MentionsInputProps = Omit<
   suggestions?: MentionSuggestion[];
   shouldShowSuggestions?: boolean;
   inputRef?: Ref<TextInput>;
+  /** Minimum visible lines; replaces the default minHeight when set. */
+  minLines?: number;
 };
 
 export const MentionsInput = ({
@@ -28,10 +35,16 @@ export const MentionsInput = ({
   suggestions = [],
   shouldShowSuggestions = true,
   inputRef,
+  minLines,
   style,
   ...rest
 }: MentionsInputProps) => {
   const { theme } = useUnistyles();
+  const { fontScale } = useWindowDimensions();
+
+  // An explicit lineHeight keeps minHeight an exact multiple of a line.
+  // RN scales lineHeight by the OS font scale but not minHeight.
+  const lineHeight = Math.floor(theme.fontSizes.m * LINE_HEIGHT_RATIO);
 
   const triggersConfig = useMemo(
     () =>
@@ -52,42 +65,28 @@ export const MentionsInput = ({
 
   const filteredSuggestions =
     shouldShowSuggestions && keyword !== undefined
-      ? suggestions
-          .filter(suggestion =>
-            suggestion.name
-              .toLocaleLowerCase()
-              .includes(keyword.toLocaleLowerCase())
-          )
-          .slice(0, MAX_VISIBLE_SUGGESTIONS)
+      ? filterMentionSuggestions(suggestions, keyword)
       : [];
 
   return (
     <View style={styles.container}>
       {filteredSuggestions.length > 0 && (
-        <View style={styles.suggestionsCard} testID="mention-suggestions">
-          <ScrollView keyboardShouldPersistTaps="always">
-            {filteredSuggestions.map(suggestion => (
-              <Touchable
-                key={suggestion.id}
-                style={styles.suggestionRow}
-                onPress={() => onSelect(suggestion)}
-              >
-                <Avatar
-                  imageUrl={suggestion.imageUrl}
-                  name={suggestion.name}
-                  variant="small"
-                />
-                <Typography size="xs">{suggestion.name}</Typography>
-              </Touchable>
-            ))}
-          </ScrollView>
-        </View>
+        <MentionSuggestionList
+          suggestions={filteredSuggestions}
+          onSelect={onSelect}
+        />
       )}
       <TextInput
         multiline
         placeholderTextColor={theme.colors.text.muted}
         ref={inputRef}
-        style={[styles.input, style]}
+        style={[
+          styles.input,
+          minLines
+            ? { lineHeight, minHeight: lineHeight * minLines * fontScale }
+            : styles.inputDefaultHeight,
+          style,
+        ]}
         {...rest}
         // Last on purpose: useMentions owns value, onChangeText and
         // onSelectionChange, and losing any of them to a caller prop kills
@@ -106,19 +105,6 @@ const styles = StyleSheet.create((theme, rt) => {
       flex: 1,
       marginVertical: moderateScale(10),
     },
-    suggestionsCard: {
-      backgroundColor: theme.colors.background.secondary,
-      borderRadius: moderateScale(10),
-      maxHeight: moderateScale(200),
-      ...theme.elevation.medium,
-    },
-    suggestionRow: {
-      alignItems: "center",
-      flexDirection: "row",
-      gap: moderateScale(8),
-      height: moderateScale(50),
-      paddingHorizontal: moderateScale(10),
-    },
     input: {
       color: theme.colors.text.primary,
       fontFamily: theme.fonts.regular,
@@ -131,8 +117,10 @@ const styles = StyleSheet.create((theme, rt) => {
       // Sizing from ascent + descent on both sides removes it; iOS ignores
       // the flag.
       includeFontPadding: false,
-      minHeight: moderateScale(50),
       padding: 0,
     },
+    inputDefaultHeight: {
+      minHeight: moderateScale(50),
+    },
   };
 });

package/src/components/ChatInput/SegmentedOptions.tsx

@@ -0,0 +1,84 @@
+import { View } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+
+import { scaleFor } from "../../utils/scale";
+import { Touchable } from "../Touchable";
+import { Typography } from "../Typography";
+import { type ChatInputOption, OPTION_LABELS } from "./constants";
+
+export type SegmentedOptionsProps = {
+  options: ChatInputOption[];
+  selected: ChatInputOption;
+  onSelect: (option: ChatInputOption) => void;
+  /** Tighter segments for a phone-width footer. */
+  isCompact?: boolean;
+};
+
+export const SegmentedOptions = ({
+  options,
+  selected,
+  onSelect,
+  isCompact = false,
+}: SegmentedOptionsProps) => (
+  <View accessibilityRole="tablist" style={styles.group}>
+    {options.map(option => {
+      const isSelected = option === selected;
+
+      return (
+        <Touchable
+          accessibilityLabel={OPTION_LABELS[option]}
+          accessibilityRole="tab"
+          accessibilityState={{ selected: isSelected }}
+          key={option}
+          style={[
+            styles.segment,
+            isCompact && styles.compactSegment,
+            isSelected && styles.segmentSelected,
+          ]}
+          onPress={() => onSelect(option)}
+        >
+          <Typography
+            size="s"
+            style={isSelected ? styles.labelSelected : styles.label}
+            weight={isSelected ? "semibold" : "regular"}
+          >
+            {OPTION_LABELS[option]}
+          </Typography>
+        </Touchable>
+      );
+    })}
+  </View>
+);
+
+const styles = StyleSheet.create((theme, rt) => {
+  const moderateScale = scaleFor(rt.screen);
+
+  return {
+    group: {
+      backgroundColor: theme.colors.background.secondary,
+      borderRadius: moderateScale(8),
+      flexDirection: "row",
+      gap: moderateScale(2),
+      padding: moderateScale(2),
+    },
+    segment: {
+      borderRadius: moderateScale(6),
+      justifyContent: "center",
+      minHeight: moderateScale(32),
+      paddingHorizontal: moderateScale(14),
+    },
+    compactSegment: {
+      paddingHorizontal: moderateScale(10),
+    },
+    segmentSelected: {
+      backgroundColor: theme.colors.background.primary,
+      ...theme.elevation.low,
+    },
+    label: {
+      color: theme.colors.text.muted,
+    },
+    labelSelected: {
+      color: theme.colors.text.primary,
+    },
+  };
+});

package/src/components/ChatInput/constants.ts

@@ -16,3 +16,13 @@ export const ACTION_LABELS: Partial<Record<ChatInputOption, string>> = {
   NOTE: "Add note",
   FORWARD: "Forward",
 };
+
+export const REPLY_ACTION_LABEL = "Send reply";
+
+export const OPTION_LABELS: Record<ChatInputOption, string> = {
+  REPLY: "Reply",
+  NOTE: "Note",
+  FORWARD: "Forward",
+};
+
+export const NOTE_HINT = "Internal note, not sent to the customer";

package/src/components/ChatInput/index.ts

@@ -1,8 +1,11 @@
 export {
   ChatInput,
+  type ChatInputFocusTarget,
+  type ChatInputLayout,
   type ChatInputPayload,
   type ChatInputProps,
   type ChatInputRef,
+  type ChatInputResizable,
 } from "./ChatInput";
 export { OPTION_TYPES, type ChatInputOption } from "./constants";
 export {

package/src/components/ChatInput/mentions.ts

@@ -89,3 +89,25 @@ export const convertMentionsToHTMLAndPlainText = ({
 
   return { html, plainText };
 };
+
+const HTML_ENTITIES: Record<string, string> = {
+  amp: "&",
+  lt: "<",
+  gt: ">",
+  quot: '"',
+  "#39": "'",
+  nbsp: " ",
+};
+
+/** Block ends become line breaks, so a canned reply keeps its paragraphs. */
+export const htmlToPlainText = (html: string) =>
+  html
+    .replace(/<br\s*\/?>/gi, "\n")
+    .replace(/<\/(p|div|li|h[1-6]|blockquote|pre)>/gi, "\n")
+    .replace(/<[^>]*>/g, "")
+    .replace(
+      /&(amp|lt|gt|quot|#39|nbsp);/g,
+      (_, entity: string) => HTML_ENTITIES[entity] ?? ""
+    )
+    .replace(/\n{3,}/g, "\n\n")
+    .replace(/\n+$/, "");

package/src/components/RichTextEditor/LazyRichTextEditor.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+
+import type * as Editor from "./RichTextEditor";
+import type { RichTextEditorProps, RichTextEditorRef } from "./RichTextEditor";
+
+// tentap's native entry reads `document` when evaluated. Metro's inline
+// requires defer that on device, but an app's jest run imports the package
+// root eagerly, so the editor module loads only once one renders.
+export const RichTextEditor = forwardRef<
+  RichTextEditorRef,
+  RichTextEditorProps
+>((props, ref) => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const { RichTextEditor: Impl } = require("./RichTextEditor") as typeof Editor;
+
+  return <Impl ref={ref} {...props} />;
+});
+
+RichTextEditor.displayName = "LazyRichTextEditor";

package/src/components/RichTextEditor/MentionSuggestionBar.tsx

@@ -0,0 +1,79 @@
+import { ScrollView } from "react-native";
+
+import { StyleSheet } from "react-native-unistyles";
+
+import { scaleFor } from "../../utils/scale";
+import { Avatar } from "../Avatar";
+import type { MentionSuggestion } from "../ChatInput/mentions";
+import { Touchable } from "../Touchable";
+import { Typography } from "../Typography";
+
+type MentionSuggestionBarProps = {
+  suggestions: MentionSuggestion[];
+  onSelect: (suggestion: MentionSuggestion) => void;
+};
+
+export const MentionSuggestionBar = ({
+  suggestions,
+  onSelect,
+}: MentionSuggestionBarProps) => (
+  <ScrollView
+    horizontal
+    contentContainerStyle={styles.chips}
+    keyboardShouldPersistTaps="always"
+    showsHorizontalScrollIndicator={false}
+    style={styles.bar}
+    testID="mention-suggestions"
+  >
+    {suggestions.map(suggestion => (
+      <Touchable
+        accessibilityLabel={`Mention ${suggestion.name}`}
+        accessibilityRole="button"
+        key={suggestion.id}
+        style={styles.chip}
+        onPress={() => onSelect(suggestion)}
+      >
+        <Avatar
+          imageUrl={suggestion.imageUrl}
+          name={suggestion.name}
+          variant="extra-small"
+        />
+        <Typography numberOfLines={1} size="xs" style={styles.name}>
+          {suggestion.name}
+        </Typography>
+      </Touchable>
+    ))}
+  </ScrollView>
+);
+
+const styles = StyleSheet.create((theme, rt) => {
+  const moderateScale = scaleFor(rt.screen);
+
+  return {
+    bar: {
+      borderBottomColor: theme.colors.border.primary,
+      borderBottomWidth: 1,
+      borderTopColor: theme.colors.border.primary,
+      borderTopWidth: 1,
+      flexGrow: 0,
+    },
+    chips: {
+      alignItems: "center",
+      gap: moderateScale(8),
+      minHeight: 44,
+      paddingHorizontal: moderateScale(8),
+    },
+    chip: {
+      alignItems: "center",
+      backgroundColor: theme.colors.background.secondary,
+      borderRadius: moderateScale(16),
+      flexDirection: "row",
+      gap: moderateScale(6),
+      paddingHorizontal: moderateScale(8),
+      paddingVertical: moderateScale(4),
+    },
+    name: {
+      maxWidth: moderateScale(180),
+    },
+  };
+});

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -0,0 +1,227 @@
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
+import { Platform, View, type StyleProp, type ViewStyle } from "react-native";
+
+import {
+  CoreBridge,
+  PlaceholderBridge,
+  RichText,
+  useBridgeState,
+  useEditorBridge,
+} from "@10play/tentap-editor";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import { filterMentionSuggestions } from "../ChatInput/MentionSuggestionList";
+import type { MentionSuggestion } from "../ChatInput/mentions";
+import { editorBridges } from "./bridges";
+import type { NeetoBridgeState, NeetoEditorBridge } from "./bridges/types";
+import { editorCss } from "./editorCss";
+import { injectableText } from "./injectableText";
+import { MentionSuggestionBar } from "./MentionSuggestionBar";
+import { RichTextToolbar } from "./RichTextToolbar";
+import type { RichTextImage } from "./types";
+import { editorHtml } from "./web/build/editorHtml";
+
+export interface RichTextEditorRef {
+  getHTML: () => Promise<string>;
+  getText: () => Promise<string>;
+  setHTML: (html: string) => void;
+  insertHTML: (html: string) => void;
+  focus: (where?: "start" | "end" | "emptyParagraph") => void;
+  blur: () => void;
+  insertImage: (image: RichTextImage) => void;
+}
+
+export interface RichTextEditorProps {
+  initialHTML?: string;
+  placeholder?: string;
+  editable?: boolean;
+  autoFocus?: boolean;
+  /** Fires on every content change; read HTML lazily through the ref. */
+  onChange?: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  /** Default "fixed". */
+  toolbar?: "fixed" | "none";
+  /** Resolves to the uploaded image, or null when cancelled. Absent → no image button. */
+  onPickImage?: () => Promise<RichTextImage | null>;
+  /** Resolves to a URL, "" to remove the link, or null when cancelled. */
+  onPickLink?: (current?: string) => Promise<string | null>;
+  /**
+   * Trailing part of initialHTML (a signature). The first focus puts the
+   * cursor just above it, as desk-web does.
+   */
+  trailingHTML?: string;
+  /** Edit {{variables}} as chips (signature editors); replies keep them as text. */
+  variables?: boolean;
+  /** Palette for the text colour menu. */
+  colors?: string[];
+  /** People offered while an "@name" is typed; inserted as mention chips. */
+  mentions?: MentionSuggestion[];
+  /** Behind the text; defaults to the theme's primary background. */
+  backgroundColor?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export const RichTextEditor = forwardRef<
+  RichTextEditorRef,
+  RichTextEditorProps
+>(
+  (
+    {
+      initialHTML,
+      placeholder,
+      editable = true,
+      autoFocus = false,
+      onChange,
+      onFocus,
+      onBlur,
+      toolbar = "fixed",
+      onPickImage,
+      onPickLink,
+      colors,
+      mentions = [],
+      backgroundColor,
+      variables = false,
+      trailingHTML,
+      style,
+      testID,
+    },
+    ref
+  ) => {
+    const { theme } = useUnistyles();
+    const palette = useMemo(
+      () => colors ?? defaultColors(theme.colors.web),
+      [colors, theme.colors.web]
+    );
+
+    const editor = useEditorBridge({
+      customSource: editorHtml,
+      bridgeExtensions: [
+        ...editorBridges({ variables }),
+        CoreBridge.configureCSS(editorCss(theme, backgroundColor)),
+        PlaceholderBridge.configureExtension({
+          placeholder: placeholder && injectableText(placeholder),
+        }),
+      ],
+      initialContent: initialHTML,
+      editable,
+      autofocus: autoFocus,
+      avoidIosKeyboard: false,
+      webviewBaseURL:
+        Platform.OS === "android" ? "file:///android_asset/" : undefined,
+      onChange,
+    }) as NeetoEditorBridge;
+
+    const { isFocused, mentionQuery } = useBridgeState(
+      editor
+    ) as NeetoBridgeState;
+    // Android's WebView reports isFocused false while typing, so the caret's
+    // "@word" alone decides.
+    const mentionMatches = mentionQuery
+      ? filterMentionSuggestions(
+          mentions,
+          mentionQuery.query,
+          MAX_MENTION_CHIPS
+        )
+      : [];
+    const wasFocused = useRef(false);
+    const hasPlacedCursor = useRef(false);
+
+    useEffect(() => {
+      if (isFocused === wasFocused.current) return;
+
+      wasFocused.current = isFocused;
+      if (isFocused && trailingHTML && !hasPlacedCursor.current) {
+        hasPlacedCursor.current = true;
+        editor.focusBeforeTrailing(trailingHTML);
+      }
+      (isFocused ? onFocus : onBlur)?.();
+    }, [editor, isFocused, onFocus, onBlur, trailingHTML]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        getHTML: () => editor.getHTML(),
+        getText: () => editor.getText(),
+        setHTML: html => {
+          hasPlacedCursor.current = false;
+          editor.setContent(html);
+        },
+        insertHTML: html => editor.insertHTML(html),
+        focus: where =>
+          where === "emptyParagraph"
+            ? editor.focusEmptyParagraph()
+            : editor.focus(where ?? "end"),
+        blur: () => editor.blur(),
+        insertImage: image => editor.insertFigure(image),
+      }),
+      [editor]
+    );
+
+    return (
+      <View
+        style={[
+          styles.root,
+          backgroundColor ? { backgroundColor } : null,
+          style,
+        ]}
+        testID={testID}
+      >
+        <View style={styles.content} testID="rich-text-content">
+          <RichText editor={editor} />
+        </View>
+        {mentionQuery && mentionMatches.length > 0 ? (
+          // In the toolbar's slot, like a keyboard's suggestion strip: the
+          // phone composer has no height to spare above the keyboard.
+          <MentionSuggestionBar
+            suggestions={mentionMatches}
+            onSelect={({ id, name }) =>
+              editor.insertMention({ id, label: name }, mentionQuery)
+            }
+          />
+        ) : (
+          toolbar === "fixed" && (
+            <RichTextToolbar
+              colors={palette}
+              editor={editor}
+              onPickImage={onPickImage}
+              onPickLink={onPickLink}
+            />
+          )
+        )}
+      </View>
+    );
+  }
+);
+
+RichTextEditor.displayName = "RichTextEditor";
+
+const MAX_MENTION_CHIPS = 10;
+
+const defaultColors = (web: Record<string, string>) =>
+  [
+    web.error500,
+    web.warning500,
+    web.success500,
+    web.info500,
+    web.primary500,
+    web.accent500,
+    web.gray500,
+  ].filter((color): color is string => !!color);
+
+const styles = StyleSheet.create(theme => ({
+  root: {
+    backgroundColor: theme.colors.background.primary,
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+  },
+}));