react-native-richify 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/components/OverlayText.d.js.map +1 -1
- package/lib/commonjs/components/OverlayText.js +8 -2
- package/lib/commonjs/components/OverlayText.js.map +1 -1
- package/lib/commonjs/components/RichTextInput.d.js.map +1 -1
- package/lib/commonjs/components/RichTextInput.js +73 -45
- package/lib/commonjs/components/RichTextInput.js.map +1 -1
- package/lib/commonjs/components/Toolbar.d.js.map +1 -1
- package/lib/commonjs/components/Toolbar.js +4 -7
- package/lib/commonjs/components/Toolbar.js.map +1 -1
- package/lib/commonjs/components/ToolbarButton.d.js.map +1 -1
- package/lib/commonjs/components/ToolbarButton.js.map +1 -1
- package/lib/commonjs/constants/defaultStyles.d.js.map +1 -1
- package/lib/commonjs/constants/defaultStyles.js +26 -1
- package/lib/commonjs/constants/defaultStyles.js.map +1 -1
- package/lib/commonjs/context/RichTextContext.d.js.map +1 -1
- package/lib/commonjs/context/RichTextContext.js.map +1 -1
- package/lib/commonjs/hooks/useFormatting.d.js.map +1 -1
- package/lib/commonjs/hooks/useFormatting.js +7 -1
- package/lib/commonjs/hooks/useFormatting.js.map +1 -1
- package/lib/commonjs/hooks/useRichText.d.js.map +1 -1
- package/lib/commonjs/hooks/useRichText.js +62 -7
- package/lib/commonjs/hooks/useRichText.js.map +1 -1
- package/lib/commonjs/hooks/useSelection.d.js.map +1 -1
- package/lib/commonjs/hooks/useSelection.js.map +1 -1
- package/lib/commonjs/index.d.js +19 -0
- package/lib/commonjs/index.d.js.map +1 -1
- package/lib/commonjs/index.js +19 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/types/index.d.js.map +1 -1
- package/lib/commonjs/types/index.js.map +1 -1
- package/lib/commonjs/utils/formatter.d.js.map +1 -1
- package/lib/commonjs/utils/formatter.js +1 -4
- package/lib/commonjs/utils/formatter.js.map +1 -1
- package/lib/commonjs/utils/parser.d.js.map +1 -1
- package/lib/commonjs/utils/parser.js.map +1 -1
- package/lib/commonjs/utils/serializer.d.js +6 -0
- package/lib/commonjs/utils/serializer.d.js.map +1 -0
- package/lib/commonjs/utils/serializer.js +163 -0
- package/lib/commonjs/utils/serializer.js.map +1 -0
- package/lib/commonjs/utils/styleMapper.d.js.map +1 -1
- package/lib/commonjs/utils/styleMapper.js.map +1 -1
- package/lib/module/components/OverlayText.d.js.map +1 -1
- package/lib/module/components/OverlayText.js +8 -2
- package/lib/module/components/OverlayText.js.map +1 -1
- package/lib/module/components/RichTextInput.d.js.map +1 -1
- package/lib/module/components/RichTextInput.js +75 -48
- package/lib/module/components/RichTextInput.js.map +1 -1
- package/lib/module/components/Toolbar.d.js.map +1 -1
- package/lib/module/components/Toolbar.js +4 -7
- package/lib/module/components/Toolbar.js.map +1 -1
- package/lib/module/components/ToolbarButton.d.js.map +1 -1
- package/lib/module/components/ToolbarButton.js.map +1 -1
- package/lib/module/constants/defaultStyles.d.js.map +1 -1
- package/lib/module/constants/defaultStyles.js +26 -1
- package/lib/module/constants/defaultStyles.js.map +1 -1
- package/lib/module/context/RichTextContext.d.js.map +1 -1
- package/lib/module/context/RichTextContext.js.map +1 -1
- package/lib/module/hooks/useFormatting.d.js.map +1 -1
- package/lib/module/hooks/useFormatting.js +7 -1
- package/lib/module/hooks/useFormatting.js.map +1 -1
- package/lib/module/hooks/useRichText.d.js.map +1 -1
- package/lib/module/hooks/useRichText.js +62 -7
- package/lib/module/hooks/useRichText.js.map +1 -1
- package/lib/module/hooks/useSelection.d.js.map +1 -1
- package/lib/module/hooks/useSelection.js.map +1 -1
- package/lib/module/index.d.js +1 -0
- package/lib/module/index.d.js.map +1 -1
- package/lib/module/index.js +1 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/types/index.d.js.map +1 -1
- package/lib/module/types/index.js.map +1 -1
- package/lib/module/utils/formatter.d.js.map +1 -1
- package/lib/module/utils/formatter.js +1 -4
- package/lib/module/utils/formatter.js.map +1 -1
- package/lib/module/utils/parser.d.js.map +1 -1
- package/lib/module/utils/parser.js.map +1 -1
- package/lib/module/utils/serializer.d.js +4 -0
- package/lib/module/utils/serializer.d.js.map +1 -0
- package/lib/module/utils/serializer.js +157 -0
- package/lib/module/utils/serializer.js.map +1 -0
- package/lib/module/utils/styleMapper.d.js.map +1 -1
- package/lib/module/utils/styleMapper.js.map +1 -1
- package/lib/typescript/src/components/OverlayText.d.ts.map +1 -1
- package/lib/typescript/src/components/RichTextInput.d.ts +2 -13
- package/lib/typescript/src/components/RichTextInput.d.ts.map +1 -1
- package/lib/typescript/src/constants/defaultStyles.d.ts +2 -0
- package/lib/typescript/src/constants/defaultStyles.d.ts.map +1 -1
- package/lib/typescript/src/hooks/useFormatting.d.ts.map +1 -1
- package/lib/typescript/src/hooks/useRichText.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +2 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/types/index.d.ts +41 -11
- package/lib/typescript/src/types/index.d.ts.map +1 -1
- package/lib/typescript/src/utils/formatter.d.ts.map +1 -1
- package/lib/typescript/src/utils/serializer.d.ts +14 -0
- package/lib/typescript/src/utils/serializer.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/components/OverlayText.tsx +11 -3
- package/src/components/RichTextInput.d.ts +3 -14
- package/src/components/RichTextInput.tsx +111 -48
- package/src/components/Toolbar.d.ts +1 -1
- package/src/components/Toolbar.tsx +5 -5
- package/src/components/ToolbarButton.d.ts +1 -1
- package/src/constants/defaultStyles.d.ts +4 -2
- package/src/constants/defaultStyles.ts +26 -1
- package/src/hooks/useFormatting.ts +14 -1
- package/src/hooks/useRichText.ts +103 -10
- package/src/index.d.ts +2 -1
- package/src/index.ts +8 -0
- package/src/types/index.d.ts +41 -11
- package/src/types/index.ts +44 -11
- package/src/utils/formatter.ts +1 -5
- package/src/utils/serializer.d.ts +13 -0
- package/src/utils/serializer.ts +223 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAIrF;;GAEG;AACH,MAAM,MAAM,UAAU,GAClB,MAAM,GACN,QAAQ,GACR,WAAW,GACX,eAAe,GACf,MAAM,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEvD;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formatter.d.ts","sourceRoot":"","sources":["../../../../src/utils/formatter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,EACV,WAAW,EACX,YAAY,EACZ,cAAc,EACf,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"formatter.d.ts","sourceRoot":"","sources":["../../../../src/utils/formatter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,EACV,WAAW,EACX,YAAY,EACZ,cAAc,EACf,MAAM,UAAU,CAAC;AAQlB;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,aAAa,EAAE,EACzB,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,UAAU,GACjB,aAAa,EAAE,CAgBjB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,WAAW,EAC7D,QAAQ,EAAE,aAAa,EAAE,EACzB,SAAS,EAAE,cAAc,EACzB,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,GACpB,aAAa,EAAE,CAOjB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,aAAa,EAAE,EACzB,SAAS,EAAE,cAAc,EACzB,KAAK,EAAE,YAAY,GAClB,aAAa,EAAE,CASjB;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,aAAa,EAAE,EACzB,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,UAAU,GACjB,OAAO,CAQT;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,aAAa,EAAE,EACzB,SAAS,EAAE,cAAc,GACxB,WAAW,CAwCb;AAgID,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { OutputFormat, StyledSegment } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Serialize styled segments as Markdown or HTML.
|
|
4
|
+
*/
|
|
5
|
+
export declare function serializeSegments(segments: StyledSegment[], format?: OutputFormat): string;
|
|
6
|
+
/**
|
|
7
|
+
* Convenience wrapper for Markdown output.
|
|
8
|
+
*/
|
|
9
|
+
export declare function segmentsToMarkdown(segments: StyledSegment[]): string;
|
|
10
|
+
/**
|
|
11
|
+
* Convenience wrapper for HTML output.
|
|
12
|
+
*/
|
|
13
|
+
export declare function segmentsToHTML(segments: StyledSegment[]): string;
|
|
14
|
+
//# sourceMappingURL=serializer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"serializer.d.ts","sourceRoot":"","sources":["../../../../src/utils/serializer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,YAAY,EACZ,aAAa,EACd,MAAM,UAAU,CAAC;AAIlB;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,aAAa,EAAE,EACzB,MAAM,GAAE,YAAyB,GAChC,MAAM,CAGR;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,aAAa,EAAE,GAAG,MAAM,CAEpE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,aAAa,EAAE,GAAG,MAAM,CAEhE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-richify",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "A production-grade, fully customizable React Native Rich Text Input using the Overlay Technique — no WebView required.",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -17,21 +17,29 @@ export const OverlayText: React.FC<OverlayTextProps> = React.memo(
|
|
|
17
17
|
const overlayStyle =
|
|
18
18
|
resolvedTheme.overlayContainerStyle ??
|
|
19
19
|
DEFAULT_THEME.overlayContainerStyle;
|
|
20
|
+
const resolvedBaseTextStyle =
|
|
21
|
+
baseTextStyle ??
|
|
22
|
+
resolvedTheme.baseTextStyle ??
|
|
23
|
+
DEFAULT_THEME.baseTextStyle;
|
|
24
|
+
const overlayTheme = {
|
|
25
|
+
...resolvedTheme,
|
|
26
|
+
baseTextStyle: resolvedBaseTextStyle,
|
|
27
|
+
};
|
|
20
28
|
|
|
21
29
|
return (
|
|
22
30
|
<View style={overlayStyle} pointerEvents="none">
|
|
23
|
-
<Text>
|
|
31
|
+
<Text style={resolvedBaseTextStyle}>
|
|
24
32
|
{segments.map((segment, index) => {
|
|
25
33
|
if (segment.text.length === 0 && segments.length > 1) {
|
|
26
34
|
return null;
|
|
27
35
|
}
|
|
28
36
|
|
|
29
|
-
const textStyle = segmentToTextStyle(segment,
|
|
37
|
+
const textStyle = segmentToTextStyle(segment, overlayTheme);
|
|
30
38
|
|
|
31
39
|
return (
|
|
32
40
|
<Text
|
|
33
41
|
key={`${index}-${segment.text.slice(0, 8)}`}
|
|
34
|
-
style={
|
|
42
|
+
style={textStyle}
|
|
35
43
|
>
|
|
36
44
|
{segment.text}
|
|
37
45
|
</Text>
|
|
@@ -1,20 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { RichTextInputProps } from '../types';
|
|
3
3
|
/**
|
|
4
|
-
* RichTextInput
|
|
4
|
+
* RichTextInput — The main rich text editor component.
|
|
5
5
|
*
|
|
6
|
-
* Uses the
|
|
7
|
-
*
|
|
8
|
-
* - A styled `<Text>` layer behind it renders the formatted content
|
|
9
|
-
* - Both share identical font metrics for pixel-perfect alignment
|
|
10
|
-
*
|
|
11
|
-
* @example
|
|
12
|
-
* ```tsx
|
|
13
|
-
* <RichTextInput
|
|
14
|
-
* placeholder="Start typing..."
|
|
15
|
-
* showToolbar
|
|
16
|
-
* onChangeSegments={(segments) => console.log(segments)}
|
|
17
|
-
* />
|
|
18
|
-
* ```
|
|
6
|
+
* Uses a plain `TextInput` for editing and renders the serialized rich output
|
|
7
|
+
* below it as Markdown or HTML.
|
|
19
8
|
*/
|
|
20
9
|
export declare const RichTextInput: React.FC<RichTextInputProps>;
|
|
@@ -1,34 +1,35 @@
|
|
|
1
|
-
import React, { useEffect, useCallback } from 'react';
|
|
1
|
+
import React, { useEffect, useCallback, useMemo, useRef } from 'react';
|
|
2
2
|
import {
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
Animated,
|
|
4
|
+
Easing,
|
|
5
|
+
ScrollView,
|
|
5
6
|
StyleSheet,
|
|
7
|
+
Text,
|
|
8
|
+
TextInput,
|
|
9
|
+
View,
|
|
6
10
|
type NativeSyntheticEvent,
|
|
7
11
|
type TextInputSelectionChangeEventData,
|
|
8
12
|
} from 'react-native';
|
|
9
13
|
import type { RichTextInputProps } from '../types';
|
|
10
14
|
import { DEFAULT_THEME } from '../constants/defaultStyles';
|
|
11
|
-
import { segmentsToPlainText } from '../utils/parser';
|
|
12
15
|
import { useRichText } from '../hooks/useRichText';
|
|
13
|
-
import {
|
|
16
|
+
import { segmentsToPlainText } from '../utils/parser';
|
|
17
|
+
import { serializeSegments } from '../utils/serializer';
|
|
14
18
|
import { Toolbar } from './Toolbar';
|
|
15
19
|
|
|
20
|
+
const OUTPUT_PANEL_HEIGHT = 180;
|
|
21
|
+
const isJestRuntime =
|
|
22
|
+
typeof (
|
|
23
|
+
globalThis as {
|
|
24
|
+
process?: { env?: { JEST_WORKER_ID?: string } };
|
|
25
|
+
}
|
|
26
|
+
).process?.env?.JEST_WORKER_ID === 'string';
|
|
27
|
+
|
|
16
28
|
/**
|
|
17
29
|
* RichTextInput — The main rich text editor component.
|
|
18
30
|
*
|
|
19
|
-
* Uses the
|
|
20
|
-
*
|
|
21
|
-
* - A styled `<Text>` layer behind it renders the formatted content
|
|
22
|
-
* - Both share identical font metrics for pixel-perfect alignment
|
|
23
|
-
*
|
|
24
|
-
* @example
|
|
25
|
-
* ```tsx
|
|
26
|
-
* <RichTextInput
|
|
27
|
-
* placeholder="Start typing..."
|
|
28
|
-
* showToolbar
|
|
29
|
-
* onChangeSegments={(segments) => console.log(segments)}
|
|
30
|
-
* />
|
|
31
|
-
* ```
|
|
31
|
+
* Uses a plain `TextInput` for editing and renders the serialized rich output
|
|
32
|
+
* below it as Markdown or HTML.
|
|
32
33
|
*/
|
|
33
34
|
export const RichTextInput: React.FC<RichTextInputProps> = ({
|
|
34
35
|
initialSegments,
|
|
@@ -41,6 +42,9 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
|
|
|
41
42
|
toolbarPosition = 'top',
|
|
42
43
|
toolbarItems,
|
|
43
44
|
theme,
|
|
45
|
+
showOutputPreview = true,
|
|
46
|
+
outputFormat = 'markdown',
|
|
47
|
+
onChangeOutput,
|
|
44
48
|
multiline = true,
|
|
45
49
|
minHeight = 120,
|
|
46
50
|
maxHeight,
|
|
@@ -50,6 +54,7 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
|
|
|
50
54
|
onReady,
|
|
51
55
|
}) => {
|
|
52
56
|
const resolvedTheme = theme ?? DEFAULT_THEME;
|
|
57
|
+
const previewProgress = useRef(new Animated.Value(0)).current;
|
|
53
58
|
|
|
54
59
|
const { state, actions } = useRichText({
|
|
55
60
|
initialSegments,
|
|
@@ -57,15 +62,35 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
|
|
|
57
62
|
onChangeText,
|
|
58
63
|
});
|
|
59
64
|
|
|
60
|
-
// Expose actions via onReady callback
|
|
61
65
|
useEffect(() => {
|
|
62
66
|
onReady?.(actions);
|
|
63
|
-
}, [
|
|
67
|
+
}, [actions, onReady]);
|
|
64
68
|
|
|
65
|
-
// Build plain text for the TextInput value
|
|
66
69
|
const plainText = segmentsToPlainText(state.segments);
|
|
70
|
+
const serializedOutput = useMemo(
|
|
71
|
+
() => serializeSegments(state.segments, outputFormat),
|
|
72
|
+
[outputFormat, state.segments],
|
|
73
|
+
);
|
|
74
|
+
const shouldShowOutputPreview = showOutputPreview && plainText.length > 0;
|
|
75
|
+
|
|
76
|
+
useEffect(() => {
|
|
77
|
+
onChangeOutput?.(serializedOutput, outputFormat);
|
|
78
|
+
}, [onChangeOutput, outputFormat, serializedOutput]);
|
|
79
|
+
|
|
80
|
+
useEffect(() => {
|
|
81
|
+
if (isJestRuntime) {
|
|
82
|
+
previewProgress.setValue(shouldShowOutputPreview ? 1 : 0);
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
Animated.timing(previewProgress, {
|
|
87
|
+
toValue: shouldShowOutputPreview ? 1 : 0,
|
|
88
|
+
duration: 180,
|
|
89
|
+
easing: Easing.out(Easing.cubic),
|
|
90
|
+
useNativeDriver: false,
|
|
91
|
+
}).start();
|
|
92
|
+
}, [previewProgress, shouldShowOutputPreview]);
|
|
67
93
|
|
|
68
|
-
// Handle selection change from TextInput
|
|
69
94
|
const onSelectionChange = useCallback(
|
|
70
95
|
(e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
|
|
71
96
|
const { start, end } = e.nativeEvent.selection;
|
|
@@ -74,25 +99,49 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
|
|
|
74
99
|
[actions],
|
|
75
100
|
);
|
|
76
101
|
|
|
77
|
-
// Container style
|
|
78
102
|
const containerStyle = [
|
|
79
103
|
resolvedTheme.containerStyle ?? DEFAULT_THEME.containerStyle,
|
|
80
104
|
];
|
|
81
|
-
|
|
82
|
-
// Input area style
|
|
83
105
|
const inputAreaStyle = [
|
|
84
106
|
styles.inputArea,
|
|
85
107
|
{ minHeight },
|
|
86
108
|
maxHeight ? { maxHeight } : undefined,
|
|
87
109
|
];
|
|
88
|
-
|
|
89
|
-
// Input style
|
|
90
110
|
const inputStyle = [
|
|
91
111
|
styles.textInput,
|
|
112
|
+
resolvedTheme.baseTextStyle ?? DEFAULT_THEME.baseTextStyle,
|
|
92
113
|
resolvedTheme.inputStyle ?? DEFAULT_THEME.inputStyle,
|
|
114
|
+
textInputProps?.style,
|
|
115
|
+
];
|
|
116
|
+
const outputAnimatedStyle = {
|
|
117
|
+
maxHeight: previewProgress.interpolate({
|
|
118
|
+
inputRange: [0, 1],
|
|
119
|
+
outputRange: [0, OUTPUT_PANEL_HEIGHT],
|
|
120
|
+
}),
|
|
121
|
+
opacity: previewProgress,
|
|
122
|
+
marginTop: previewProgress.interpolate({
|
|
123
|
+
inputRange: [0, 1],
|
|
124
|
+
outputRange: [0, 12],
|
|
125
|
+
}),
|
|
126
|
+
transform: [
|
|
127
|
+
{
|
|
128
|
+
translateY: previewProgress.interpolate({
|
|
129
|
+
inputRange: [0, 1],
|
|
130
|
+
outputRange: [-8, 0],
|
|
131
|
+
}),
|
|
132
|
+
},
|
|
133
|
+
],
|
|
134
|
+
};
|
|
135
|
+
const outputContainerStyle = [
|
|
136
|
+
resolvedTheme.outputContainerStyle ?? DEFAULT_THEME.outputContainerStyle,
|
|
137
|
+
];
|
|
138
|
+
const outputLabelStyle = [
|
|
139
|
+
resolvedTheme.outputLabelStyle ?? DEFAULT_THEME.outputLabelStyle,
|
|
140
|
+
];
|
|
141
|
+
const outputTextStyle = [
|
|
142
|
+
resolvedTheme.outputTextStyle ?? DEFAULT_THEME.outputTextStyle,
|
|
93
143
|
];
|
|
94
144
|
|
|
95
|
-
// Toolbar component
|
|
96
145
|
const toolbarComponent = showToolbar ? (
|
|
97
146
|
<Toolbar
|
|
98
147
|
actions={actions}
|
|
@@ -103,29 +152,28 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
|
|
|
103
152
|
/>
|
|
104
153
|
) : null;
|
|
105
154
|
|
|
106
|
-
// Toolbar border
|
|
107
155
|
const toolbarBorderStyle =
|
|
108
156
|
toolbarPosition === 'top'
|
|
109
|
-
? {
|
|
110
|
-
|
|
157
|
+
? {
|
|
158
|
+
borderBottomWidth: 1,
|
|
159
|
+
borderBottomColor:
|
|
160
|
+
resolvedTheme.colors?.toolbarBorder ??
|
|
161
|
+
DEFAULT_THEME.colors?.toolbarBorder,
|
|
162
|
+
}
|
|
163
|
+
: {
|
|
164
|
+
borderTopWidth: 1,
|
|
165
|
+
borderTopColor:
|
|
166
|
+
resolvedTheme.colors?.toolbarBorder ??
|
|
167
|
+
DEFAULT_THEME.colors?.toolbarBorder,
|
|
168
|
+
};
|
|
111
169
|
|
|
112
170
|
return (
|
|
113
171
|
<View style={containerStyle}>
|
|
114
|
-
{/* Toolbar — Top */}
|
|
115
172
|
{toolbarPosition === 'top' && toolbarComponent && (
|
|
116
173
|
<View style={toolbarBorderStyle}>{toolbarComponent}</View>
|
|
117
174
|
)}
|
|
118
175
|
|
|
119
|
-
{/* Editor Area */}
|
|
120
176
|
<View style={inputAreaStyle}>
|
|
121
|
-
{/* Overlay — Styled text rendering (behind TextInput) */}
|
|
122
|
-
<OverlayText
|
|
123
|
-
segments={state.segments}
|
|
124
|
-
baseTextStyle={resolvedTheme.baseTextStyle}
|
|
125
|
-
theme={resolvedTheme}
|
|
126
|
-
/>
|
|
127
|
-
|
|
128
|
-
{/* TextInput — Transparent layer on top for input capture */}
|
|
129
177
|
<TextInput
|
|
130
178
|
{...textInputProps}
|
|
131
179
|
style={inputStyle}
|
|
@@ -145,11 +193,28 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
|
|
|
145
193
|
resolvedTheme.colors?.cursor ?? DEFAULT_THEME.colors?.cursor
|
|
146
194
|
}
|
|
147
195
|
textAlignVertical="top"
|
|
148
|
-
scrollEnabled={
|
|
196
|
+
scrollEnabled={typeof maxHeight === 'number'}
|
|
149
197
|
/>
|
|
198
|
+
|
|
199
|
+
{showOutputPreview && (
|
|
200
|
+
<Animated.View
|
|
201
|
+
pointerEvents={shouldShowOutputPreview ? 'auto' : 'none'}
|
|
202
|
+
style={[styles.outputAnimatedWrapper, outputAnimatedStyle]}
|
|
203
|
+
>
|
|
204
|
+
<View style={outputContainerStyle}>
|
|
205
|
+
<Text style={outputLabelStyle}>
|
|
206
|
+
{outputFormat === 'html' ? 'HTML output' : 'Markdown output'}
|
|
207
|
+
</Text>
|
|
208
|
+
<ScrollView showsVerticalScrollIndicator={false}>
|
|
209
|
+
<Text selectable style={outputTextStyle}>
|
|
210
|
+
{serializedOutput}
|
|
211
|
+
</Text>
|
|
212
|
+
</ScrollView>
|
|
213
|
+
</View>
|
|
214
|
+
</Animated.View>
|
|
215
|
+
)}
|
|
150
216
|
</View>
|
|
151
217
|
|
|
152
|
-
{/* Toolbar — Bottom */}
|
|
153
218
|
{toolbarPosition === 'bottom' && toolbarComponent && (
|
|
154
219
|
<View style={toolbarBorderStyle}>{toolbarComponent}</View>
|
|
155
220
|
)}
|
|
@@ -164,11 +229,9 @@ const styles = StyleSheet.create({
|
|
|
164
229
|
position: 'relative',
|
|
165
230
|
},
|
|
166
231
|
textInput: {
|
|
167
|
-
// The TextInput must be transparent so the overlay text shows through.
|
|
168
|
-
// Only the caret/cursor and selection highlight are visible.
|
|
169
|
-
color: 'transparent',
|
|
170
|
-
// Ensure it matches the overlay text positioning exactly.
|
|
171
232
|
position: 'relative',
|
|
172
|
-
|
|
233
|
+
},
|
|
234
|
+
outputAnimatedWrapper: {
|
|
235
|
+
overflow: 'hidden',
|
|
173
236
|
},
|
|
174
237
|
});
|
|
@@ -20,17 +20,17 @@ export const Toolbar: React.FC<ToolbarProps> = React.memo(
|
|
|
20
20
|
|
|
21
21
|
// Compute active state for each item
|
|
22
22
|
const enrichedItems: ToolbarItem[] = useMemo(() => {
|
|
23
|
+
const selectionStyle = actions.getSelectionStyle();
|
|
24
|
+
|
|
23
25
|
return toolbarItems.map((item) => {
|
|
24
26
|
let isActive = false;
|
|
25
27
|
|
|
26
28
|
if (item.format) {
|
|
27
|
-
|
|
28
|
-
const { activeStyles } = state;
|
|
29
|
-
isActive = !!activeStyles[item.format];
|
|
29
|
+
isActive = actions.isFormatActive(item.format);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
if (item.heading) {
|
|
33
|
-
isActive =
|
|
33
|
+
isActive = selectionStyle.heading === item.heading;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
return {
|
|
@@ -38,7 +38,7 @@ export const Toolbar: React.FC<ToolbarProps> = React.memo(
|
|
|
38
38
|
active: item.active ?? isActive,
|
|
39
39
|
};
|
|
40
40
|
});
|
|
41
|
-
}, [
|
|
41
|
+
}, [actions, toolbarItems]);
|
|
42
42
|
|
|
43
43
|
// Custom render
|
|
44
44
|
if (renderToolbar) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { RichTextTheme, FormatStyle, ToolbarItem } from '
|
|
1
|
+
import type { RichTextTheme, FormatStyle, ToolbarItem } from '../types';
|
|
2
2
|
/**
|
|
3
3
|
* Default color palette used throughout the editor.
|
|
4
4
|
*/
|
|
@@ -9,6 +9,8 @@ export declare const DEFAULT_COLORS: {
|
|
|
9
9
|
readonly placeholder: "#9CA3AF";
|
|
10
10
|
readonly toolbarBackground: "#F9FAFB";
|
|
11
11
|
readonly toolbarBorder: "#E5E7EB";
|
|
12
|
+
readonly outputBackground: "#F8FAFC";
|
|
13
|
+
readonly outputLabel: "#475569";
|
|
12
14
|
readonly cursor: "#6366F1";
|
|
13
15
|
readonly activeButtonBg: "#EEF2FF";
|
|
14
16
|
readonly codeBackground: "#F3F4F6";
|
|
@@ -32,7 +34,7 @@ export declare const DEFAULT_BASE_TEXT_STYLE: {
|
|
|
32
34
|
readonly fontFamily: undefined;
|
|
33
35
|
};
|
|
34
36
|
/**
|
|
35
|
-
* Empty format style
|
|
37
|
+
* Empty format style — no formatting applied.
|
|
36
38
|
*/
|
|
37
39
|
export declare const EMPTY_FORMAT_STYLE: FormatStyle;
|
|
38
40
|
/**
|
|
@@ -10,6 +10,8 @@ export const DEFAULT_COLORS = {
|
|
|
10
10
|
placeholder: '#9CA3AF',
|
|
11
11
|
toolbarBackground: '#F9FAFB',
|
|
12
12
|
toolbarBorder: '#E5E7EB',
|
|
13
|
+
outputBackground: '#F8FAFC',
|
|
14
|
+
outputLabel: '#475569',
|
|
13
15
|
cursor: '#6366F1',
|
|
14
16
|
activeButtonBg: '#EEF2FF',
|
|
15
17
|
codeBackground: '#F3F4F6',
|
|
@@ -64,7 +66,7 @@ export const DEFAULT_THEME: RichTextTheme = {
|
|
|
64
66
|
inputStyle: {
|
|
65
67
|
fontSize: DEFAULT_BASE_TEXT_STYLE.fontSize,
|
|
66
68
|
lineHeight: DEFAULT_BASE_TEXT_STYLE.lineHeight,
|
|
67
|
-
color:
|
|
69
|
+
color: DEFAULT_COLORS.text,
|
|
68
70
|
paddingHorizontal: 16,
|
|
69
71
|
paddingVertical: 12,
|
|
70
72
|
textAlignVertical: 'top',
|
|
@@ -83,6 +85,29 @@ export const DEFAULT_THEME: RichTextTheme = {
|
|
|
83
85
|
lineHeight: DEFAULT_BASE_TEXT_STYLE.lineHeight,
|
|
84
86
|
color: DEFAULT_COLORS.text,
|
|
85
87
|
},
|
|
88
|
+
outputContainerStyle: {
|
|
89
|
+
marginHorizontal: 12,
|
|
90
|
+
marginBottom: 12,
|
|
91
|
+
padding: 12,
|
|
92
|
+
borderRadius: 10,
|
|
93
|
+
borderWidth: 1,
|
|
94
|
+
borderColor: DEFAULT_COLORS.toolbarBorder,
|
|
95
|
+
backgroundColor: DEFAULT_COLORS.outputBackground,
|
|
96
|
+
},
|
|
97
|
+
outputLabelStyle: {
|
|
98
|
+
marginBottom: 8,
|
|
99
|
+
fontSize: 12,
|
|
100
|
+
fontWeight: '700',
|
|
101
|
+
letterSpacing: 0.4,
|
|
102
|
+
color: DEFAULT_COLORS.outputLabel,
|
|
103
|
+
textTransform: 'uppercase',
|
|
104
|
+
},
|
|
105
|
+
outputTextStyle: {
|
|
106
|
+
fontSize: 14,
|
|
107
|
+
lineHeight: 20,
|
|
108
|
+
color: DEFAULT_COLORS.text,
|
|
109
|
+
fontFamily: 'monospace',
|
|
110
|
+
},
|
|
86
111
|
toolbarStyle: {
|
|
87
112
|
flexDirection: 'row',
|
|
88
113
|
alignItems: 'center',
|
|
@@ -78,10 +78,23 @@ export function useFormatting({
|
|
|
78
78
|
|
|
79
79
|
const setHeading = useCallback(
|
|
80
80
|
(level: HeadingLevel) => {
|
|
81
|
+
if (selection.start === selection.end) {
|
|
82
|
+
onActiveStylesChange({
|
|
83
|
+
...activeStyles,
|
|
84
|
+
heading: level === 'none' ? undefined : level,
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
|
|
81
88
|
const newSegments = setHeadingOnLine(segments, selection, level);
|
|
82
89
|
onSegmentsChange(newSegments);
|
|
83
90
|
},
|
|
84
|
-
[
|
|
91
|
+
[
|
|
92
|
+
activeStyles,
|
|
93
|
+
onActiveStylesChange,
|
|
94
|
+
onSegmentsChange,
|
|
95
|
+
segments,
|
|
96
|
+
selection,
|
|
97
|
+
],
|
|
85
98
|
);
|
|
86
99
|
|
|
87
100
|
const setColor = useCallback(
|