react-native-enriched-html/apps/example-web/src/testScreens/TestMentions.tsx at 95f8ab2e2a801e2391e0051dd268d86ca6d55e0c · software-mansion/react-native-enriched-html · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
import { useRef, useState } from 'react';
import {
  EnrichedTextInput,
  type EnrichedInputStyle,
  type EnrichedTextInputInstance,
} from 'react-native-enriched-html';
import { WEB_DEFAULT_HTML_STYLE } from '../defaultHtmlStyle';

export function TestMentions() {
  const ref = useRef<EnrichedTextInputInstance>(null);
  const [eventType, setEventType] = useState('');
  const [eventIndicator, setEventIndicator] = useState('');
  const [eventText, setEventText] = useState('');
  const [html, setHtml] = useState('');
  const [detectedCount, setDetectedCount] = useState(0);
  const [detectedText, setDetectedText] = useState('');
  const [detectedIndicator, setDetectedIndicator] = useState('');

  const preventDefault = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
  };
  return (
    <div>
      <div data-testid="mention-test-editor">
        <EnrichedTextInput
          ref={ref}
          defaultValue="<html><p></p></html>"
          editable
          scrollEnabled
          style={editorStyle}
          htmlStyle={WEB_DEFAULT_HTML_STYLE}
          mentionIndicators={['@', '#']}
          onStartMention={(indicator) => {
            setEventType('start');
            setEventIndicator(indicator);
            setEventText('');
          }}
          onChangeMention={({ indicator, text }) => {
            setEventType('change');
            setEventIndicator(indicator);
            setEventText(text);
          }}
          onEndMention={() => {
            setEventType('end');
            setEventIndicator('');
            setEventText('');
          }}
          onMentionDetected={({ text, indicator }) => {
            setDetectedCount((c) => c + 1);
            setDetectedText(text);
            setDetectedIndicator(indicator);
          }}
          onChangeHtml={(e) => {
            setHtml(e.nativeEvent.value);
          }}
        />
      </div>
      <div style={styles.fields}>
        <Field label="event type">
          <span data-testid="mention-event-type">{eventType}</span>
        </Field>
        <Field label="event indicator">
          <span data-testid="mention-event-indicator">{eventIndicator}</span>
        </Field>
        <Field label="event text">
          <span data-testid="mention-event-text">{eventText}</span>
        </Field>
        <Field label="detected count">
          <span data-testid="mention-detected-count">{detectedCount}</span>
        </Field>
        <Field label="detected text">
          <span data-testid="mention-detected-text">{detectedText}</span>
        </Field>
        <Field label="detected indicator">
          <span data-testid="mention-detected-indicator">
            {detectedIndicator}
          </span>
        </Field>
      </div>
      <pre data-testid="mention-html-output">{html}</pre>
      <button
        data-testid="mention-set-user-button"
        onMouseDown={preventDefault}
        onClick={() => ref.current?.setMention('@', 'Jane', { id: '1' })}
      >
        Set Mention (user)
      </button>
      <button
        data-testid="mention-set-channel-button"
        onMouseDown={preventDefault}
        onClick={() => ref.current?.setMention('#', 'general', { id: '42' })}
      >
        Set Mention (channel)
      </button>
      <button
        data-testid="mention-start-user-button"
        onMouseDown={preventDefault}
        onClick={() => ref.current?.startMention('@')}
      >
        Start mention (user)
      </button>
      <button
        data-testid="mention-start-channel-button"
        onMouseDown={preventDefault}
        onClick={() => ref.current?.startMention('#')}
      >
        Start mention (channel)
      </button>
      <button data-testid="mention-blur-target">Blur Editor</button>
    </div>
  );
}

function Field({
  label,
  children,
}: {
  label: string;
  children: React.ReactNode;
}) {
  return (
    <div style={styles.field}>
      <span style={styles.label}>{label}:</span>
      {children}
    </div>
  );
}

const styles = {
  fields: {
    marginTop: 12,
    display: 'flex',
    flexDirection: 'column' as const,
    gap: 4,
  },
  field: { display: 'flex', gap: 8, alignItems: 'center' as const },
  label: { fontSize: 12, color: '#666', minWidth: 130 },
};

const editorStyle: EnrichedInputStyle = {
  width: '100%',
  minHeight: 24,
  maxWidth: 300,
  paddingVertical: 8,
  paddingHorizontal: 8,
  fontSize: 16,
  backgroundColor: 'gainsboro',
};