-
- {toolbarItems.map((item) => (
- {
- item.onPress(editorRef.current);
+ = ({
+ colors,
+ activeColor,
+ onSelectColor,
+ onClear,
+}) => {
+ return (
+
+
+ ✕
+
+ {colors.map((color) => {
+ const isActive = color.toLowerCase() === activeColor?.toLowerCase();
+ const swatchId = `color-swatch-${color.replace('#', '').toUpperCase()}`;
+ return (
+ onSelectColor(color)}
+ style={[
+ styles.swatch,
+ { backgroundColor: color },
+ isActive && styles.swatchActive,
+ color === '#FFFFFF' && styles.swatchBordered,
+ ]}
+ />
+ );
+ })}
+
+ );
+};
+
+const SWATCH_SIZE = 28;
+
+const styles = StyleSheet.create({
+ container: {
+ width: '100%',
+ backgroundColor: 'rgba(0, 26, 114, 0.9)',
+ },
+ content: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ paddingHorizontal: 8,
+ paddingVertical: 8,
+ gap: 8,
+ },
+ clearButton: {
+ width: SWATCH_SIZE,
+ height: SWATCH_SIZE,
+ borderRadius: SWATCH_SIZE / 2,
+ backgroundColor: 'rgba(255,255,255,0.15)',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ clearText: {
+ color: 'white',
+ fontSize: 14,
+ lineHeight: 16,
+ },
+ swatch: {
+ width: SWATCH_SIZE,
+ height: SWATCH_SIZE,
+ borderRadius: SWATCH_SIZE / 2,
+ },
+ swatchActive: {
+ borderWidth: 3,
+ borderColor: 'white',
+ },
+ swatchBordered: {
+ borderWidth: 1,
+ borderColor: 'rgba(0,0,0,0.25)',
+ },
+});
diff --git a/apps/example/src/components/FontFamilyPickerRow.tsx b/apps/example/src/components/FontFamilyPickerRow.tsx
new file mode 100644
index 000000000..f4f907748
--- /dev/null
+++ b/apps/example/src/components/FontFamilyPickerRow.tsx
@@ -0,0 +1,100 @@
+import { type FC } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text } from 'react-native';
+
+export interface FontFamilyOption {
+ label: string;
+ value: string;
+}
+
+interface Props {
+ families: FontFamilyOption[];
+ activeFamily: string;
+ onSelectFamily: (family: string) => void;
+ onClear: () => void;
+}
+
+export const FontFamilyPickerRow: FC = ({
+ families,
+ activeFamily,
+ onSelectFamily,
+ onClear,
+}) => {
+ return (
+
+
+ ✕
+
+ {families.map(({ label, value }) => {
+ const isActive = value === activeFamily;
+ return (
+ onSelectFamily(value)}
+ style={[styles.familyButton, isActive && styles.familyButtonActive]}
+ >
+
+ {label}
+
+
+ );
+ })}
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ width: '100%',
+ backgroundColor: 'rgba(0, 26, 114, 0.9)',
+ },
+ content: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ paddingHorizontal: 8,
+ paddingVertical: 8,
+ gap: 8,
+ },
+ clearButton: {
+ width: 28,
+ height: 28,
+ borderRadius: 14,
+ backgroundColor: 'rgba(255,255,255,0.15)',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ clearText: {
+ color: 'white',
+ fontSize: 14,
+ lineHeight: 16,
+ },
+ familyButton: {
+ minWidth: 36,
+ height: 28,
+ paddingHorizontal: 8,
+ borderRadius: 14,
+ backgroundColor: 'rgba(255,255,255,0.15)',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ familyButtonActive: {
+ backgroundColor: 'rgb(0, 26, 114)',
+ borderWidth: 2,
+ borderColor: 'white',
+ },
+ familyText: {
+ color: 'white',
+ fontSize: 14,
+ fontWeight: '600',
+ lineHeight: 16,
+ },
+});
diff --git a/apps/example/src/components/FontSizePickerRow.tsx b/apps/example/src/components/FontSizePickerRow.tsx
new file mode 100644
index 000000000..c22896909
--- /dev/null
+++ b/apps/example/src/components/FontSizePickerRow.tsx
@@ -0,0 +1,93 @@
+import { type FC } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text } from 'react-native';
+
+interface Props {
+ sizes: number[];
+ activeSize: number;
+ onSelectSize: (size: number) => void;
+ onClear: () => void;
+}
+
+export const FontSizePickerRow: FC = ({
+ sizes,
+ activeSize,
+ onSelectSize,
+ onClear,
+}) => {
+ return (
+
+
+ ✕
+
+ {sizes.map((size) => {
+ const isActive = size === activeSize;
+ return (
+ onSelectSize(size)}
+ style={[styles.sizeButton, isActive && styles.sizeButtonActive]}
+ >
+ {size}
+
+ );
+ })}
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ width: '100%',
+ backgroundColor: 'rgba(0, 26, 114, 0.9)',
+ },
+ content: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ paddingHorizontal: 8,
+ paddingVertical: 8,
+ gap: 8,
+ },
+ clearButton: {
+ width: 28,
+ height: 28,
+ borderRadius: 14,
+ backgroundColor: 'rgba(255,255,255,0.15)',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ clearText: {
+ color: 'white',
+ fontSize: 14,
+ lineHeight: 16,
+ },
+ sizeButton: {
+ minWidth: 36,
+ height: 28,
+ paddingHorizontal: 8,
+ borderRadius: 14,
+ backgroundColor: 'rgba(255,255,255,0.15)',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ sizeButtonActive: {
+ backgroundColor: 'rgb(0, 26, 114)',
+ borderWidth: 2,
+ borderColor: 'white',
+ },
+ sizeText: {
+ color: 'white',
+ fontSize: 14,
+ fontWeight: '600',
+ lineHeight: 16,
+ },
+});
diff --git a/apps/example/src/components/Toolbar.tsx b/apps/example/src/components/Toolbar.tsx
index 20109e390..5d6b6ee62 100644
--- a/apps/example/src/components/Toolbar.tsx
+++ b/apps/example/src/components/Toolbar.tsx
@@ -1,5 +1,16 @@
-import { FlatList, type ListRenderItemInfo, StyleSheet } from 'react-native';
+import { useState } from 'react';
+import {
+ FlatList,
+ type ListRenderItemInfo,
+ Pressable,
+ StyleSheet,
+ Text,
+ View,
+} from 'react-native';
import { ToolbarButton } from './ToolbarButton';
+import { ColorPickerRow } from './ColorPickerRow';
+import { FontSizePickerRow } from './FontSizePickerRow';
+import { FontFamilyPickerRow } from './FontFamilyPickerRow';
import type {
OnChangeStateEvent,
EnrichedTextInputInstance,
@@ -8,6 +19,35 @@ import type { FC } from 'react';
const GRID_COLUMNS = 8;
+const COLORS = [
+ '#000000',
+ '#FFFFFF',
+ '#808080',
+ '#FF0000',
+ '#FF6600',
+ '#FFFF00',
+ '#00FF00',
+ '#008000',
+ '#00FFFF',
+ '#0000FF',
+ '#800080',
+ '#FF00FF',
+ '#FF69B4',
+ '#A52A2A',
+ '#FFA500',
+ '#ADD8E6',
+];
+
+const FONT_SIZES = [12, 16, 20, 24, 28, 32, 36, 40];
+
+const FONT_FAMILIES = [
+ { label: 'Bold', value: 'Nunito-Bold' },
+ { label: 'Italic', value: 'Nunito-Italic' },
+ { label: 'Code', value: 'CascadiaCode-Regular' },
+ { label: 'Code Bold', value: 'CascadiaCode-Bold' },
+ { label: 'Courier', value: 'Courier' },
+] as const;
+
const STYLE_ITEMS = [
{
name: 'bold',
@@ -97,10 +137,32 @@ const STYLE_ITEMS = [
name: 'align-right',
icon: 'align-right',
},
+ {
+ name: 'text-color',
+ text: 'A',
+ },
+ {
+ name: 'bg-color',
+ text: 'BG',
+ },
+ {
+ name: 'font-size',
+ text: 'Aa',
+ },
+ {
+ name: 'font-family',
+ text: 'Ff',
+ },
] as const;
type Item = (typeof STYLE_ITEMS)[number];
type StylesState = OnChangeStateEvent;
+type OpenPicker =
+ | 'text-color'
+ | 'bg-color'
+ | 'font-size'
+ | 'font-family'
+ | null;
export interface ToolbarProps {
stylesState: StylesState;
@@ -117,6 +179,25 @@ export const Toolbar: FC = ({
onSelectImage,
layout = 'horizontal',
}) => {
+ const [openPicker, setOpenPicker] = useState(null);
+
+ const activeFgColor = stylesState.customStyle?.foregroundColor ?? '';
+ const activeBgColor = stylesState.customStyle?.backgroundColor ?? '';
+ const activeFontSize = stylesState.customStyle?.fontSize ?? 0;
+ const activeFontFamily = stylesState.customStyle?.fontFamily ?? '';
+ const activeFontFamilyLabel =
+ FONT_FAMILIES.find((family) => family.value === activeFontFamily)?.label ??
+ '';
+
+ const fgIndicatorColor =
+ activeFgColor.length > 0 ? activeFgColor : 'transparent';
+ const fgIndicatorBorder =
+ activeFgColor.length > 0 ? activeFgColor : 'rgba(255,255,255,0.4)';
+ const bgIndicatorColor =
+ activeBgColor.length > 0 ? activeBgColor : 'transparent';
+ const bgIndicatorBorder =
+ activeBgColor.length > 0 ? activeBgColor : 'rgba(255,255,255,0.4)';
+
const handlePress = (item: Item) => {
const currentRef = editorRef?.current;
if (!currentRef) return;
@@ -168,7 +249,6 @@ export const Toolbar: FC = ({
editorRef.current?.toggleOrderedList();
break;
case 'checkbox-list':
- // Make checkbox checked by default
editorRef.current?.toggleCheckboxList(true);
break;
case 'link':
@@ -289,6 +369,104 @@ export const Toolbar: FC = ({
};
const renderItem = ({ item }: ListRenderItemInfo- ) => {
+ if (item.name === 'text-color') {
+ return (
+
+ setOpenPicker((prev) =>
+ prev === 'text-color' ? null : 'text-color'
+ )
+ }
+ style={[
+ styles.colorButton,
+ layout === 'grid' ? styles.gridItem : undefined,
+ openPicker === 'text-color' && styles.colorButtonActive,
+ ]}
+ >
+ A
+
+ );
+ }
+
+ if (item.name === 'bg-color') {
+ return (
+
+ setOpenPicker((prev) => (prev === 'bg-color' ? null : 'bg-color'))
+ }
+ style={[
+ styles.colorButton,
+ layout === 'grid' ? styles.gridItem : undefined,
+ openPicker === 'bg-color' && styles.colorButtonActive,
+ ]}
+ >
+ BG
+
+ );
+ }
+
+ if (item.name === 'font-size') {
+ const fontSizeLabel = activeFontSize > 0 ? String(activeFontSize) : 'Aa';
+ return (
+
+ setOpenPicker((prev) => (prev === 'font-size' ? null : 'font-size'))
+ }
+ style={[
+ styles.colorButton,
+ layout === 'grid' ? styles.gridItem : undefined,
+ (openPicker === 'font-size' || activeFontSize > 0) &&
+ styles.colorButtonActive,
+ ]}
+ >
+ {fontSizeLabel}
+
+ );
+ }
+
+ if (item.name === 'font-family') {
+ const fontFamilyLabel = activeFontFamilyLabel || 'Ff';
+ return (
+
+ setOpenPicker((prev) =>
+ prev === 'font-family' ? null : 'font-family'
+ )
+ }
+ style={[
+ styles.colorButton,
+ layout === 'grid' ? styles.gridItem : undefined,
+ (openPicker === 'font-family' || activeFontFamily.length > 0) &&
+ styles.colorButtonActive,
+ ]}
+ >
+ {fontFamilyLabel}
+
+ );
+ }
+
return (
= ({
const keyExtractor = (item: Item) => item.name;
+ const handleSelectFgColor = (color: string) => {
+ editorRef?.current?.setStyle({ foregroundColor: color });
+ setOpenPicker(null);
+ };
+
+ const handleClearFgColor = () => {
+ editorRef?.current?.setStyle({ foregroundColor: null });
+ setOpenPicker(null);
+ };
+
+ const handleSelectBgColor = (color: string) => {
+ editorRef?.current?.setStyle({ backgroundColor: color });
+ setOpenPicker(null);
+ };
+
+ const handleClearBgColor = () => {
+ editorRef?.current?.setStyle({ backgroundColor: null });
+ setOpenPicker(null);
+ };
+
+ const handleSelectFontSize = (size: number) => {
+ editorRef?.current?.setStyle({ fontSize: size });
+ setOpenPicker(null);
+ };
+
+ const handleClearFontSize = () => {
+ editorRef?.current?.setStyle({ fontSize: null });
+ setOpenPicker(null);
+ };
+
+ const handleSelectFontFamily = (family: string) => {
+ editorRef?.current?.setStyle({ fontFamily: family });
+ setOpenPicker(null);
+ };
+
+ const handleClearFontFamily = () => {
+ editorRef?.current?.setStyle({ fontFamily: null });
+ setOpenPicker(null);
+ };
+
return (
-
+
);
};
const styles = StyleSheet.create({
- container: {
+ wrapper: {
+ width: '100%',
+ },
+ list: {
width: '100%',
},
gridItem: {
flexBasis: `${100 / GRID_COLUMNS}%`,
aspectRatio: 1,
},
+ colorButton: {
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: 56,
+ height: 56,
+ backgroundColor: 'rgba(0, 26, 114, 0.8)',
+ gap: 2,
+ },
+ colorButtonActive: {
+ backgroundColor: 'rgb(0, 26, 114)',
+ },
+ colorButtonLabel: {
+ color: 'white',
+ fontSize: 15,
+ fontWeight: '700',
+ lineHeight: 17,
+ textAlign: 'center',
+ },
+ colorIndicator: {
+ width: 20,
+ height: 5,
+ borderRadius: 2,
+ borderWidth: 1,
+ },
});
diff --git a/apps/example/src/constants/editorConfig.ts b/apps/example/src/constants/editorConfig.ts
index 2b9d44b0b..f29ac11c0 100644
--- a/apps/example/src/constants/editorConfig.ts
+++ b/apps/example/src/constants/editorConfig.ts
@@ -33,6 +33,12 @@ export const DEFAULT_STYLES: StylesState = {
mention: DEFAULT_STYLE_STATE,
checkboxList: DEFAULT_STYLE_STATE,
alignment: 'auto',
+ customStyle: {
+ foregroundColor: '',
+ backgroundColor: '',
+ fontSize: 0,
+ fontFamily: '',
+ },
};
export const DEFAULT_LINK_STATE = {
diff --git a/apps/example/src/hooks/useKeyboardHeight.ts b/apps/example/src/hooks/useKeyboardHeight.ts
new file mode 100644
index 000000000..3891f11dd
--- /dev/null
+++ b/apps/example/src/hooks/useKeyboardHeight.ts
@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+import { Keyboard } from 'react-native';
+
+export function useKeyboardHeight() {
+ const [keyboardHeight, setKeyboardHeight] = useState(0);
+
+ useEffect(() => {
+ const showSubscription = Keyboard.addListener('keyboardDidShow', (e) => {
+ setKeyboardHeight(e.endCoordinates.height);
+ });
+ const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
+ setKeyboardHeight(0);
+ });
+
+ return () => {
+ showSubscription.remove();
+ hideSubscription.remove();
+ };
+ }, []);
+
+ return keyboardHeight;
+}
diff --git a/apps/example/src/screens/TestScreen.tsx b/apps/example/src/screens/TestScreen.tsx
index 160fda327..1e64d5225 100644
--- a/apps/example/src/screens/TestScreen.tsx
+++ b/apps/example/src/screens/TestScreen.tsx
@@ -8,6 +8,7 @@ import { MentionPopup } from '../components/MentionPopup';
import { ImageModal } from '../components/ImageModal';
import { ValueModal } from '../components/ValueModal';
import { useEditorState } from '../hooks/useEditorState';
+import { useKeyboardHeight } from '../hooks/useKeyboardHeight';
import {
LINK_REGEX,
htmlStyle,
@@ -25,12 +26,16 @@ export function TestScreen({
}: TestScreenProps) {
const editor = useEditorState();
const [sizeMode, setSizeMode] = useState<'base' | 'max'>('base');
+ const keyboardHeight = useKeyboardHeight();
return (
diff --git a/cpp/parser/GumboNormalizer.c b/cpp/parser/GumboNormalizer.c
index 5a6210f15..2ccbcd885 100644
--- a/cpp/parser/GumboNormalizer.c
+++ b/cpp/parser/GumboNormalizer.c
@@ -852,9 +852,47 @@ static void walk_node(GumboNode *node, buffer_t *out) {
const char *sval = get_attr(el, "style");
size_t slen = sval ? strlen(sval) : 0;
css_styles_t s = parse_css_style(sval, slen);
+
+ size_t fg_len = 0;
+ const char *fg = find_css_value(sval, slen, "color", &fg_len);
+
+ size_t bg_len = 0;
+ const char *bg = find_css_value(sval, slen, "background-color", &bg_len);
+
+ int has_fg = (fg && fg_len > 0);
+ int has_bg = (bg && bg_len > 0);
+
+ // emit the wrapper span if colors exist
+ if (has_fg || has_bg) {
+ buffer_append_str(out, "");
+ }
+
+ // handle inner formatting (, , etc.) and children
emit_styles_open(out, s);
walk_children(node, out);
emit_styles_close(out, s);
+
+ // close the wrapper span
+ if (has_fg || has_bg) {
+ buffer_append_str(out, "");
+ }
+
return;
}
diff --git a/cpp/tests/GumboParserTest.cpp b/cpp/tests/GumboParserTest.cpp
index ff06232c9..fefbe99e9 100644
--- a/cpp/tests/GumboParserTest.cpp
+++ b/cpp/tests/GumboParserTest.cpp
@@ -253,6 +253,75 @@ TEST(GumboParserTest, SpanRemappings) {
"x"),
"x");
+
+ // Foreground color only
+ EXPECT_EQ(
+ GumboParser::normalizeHtml("x"),
+ "x");
+ EXPECT_EQ(
+ GumboParser::normalizeHtml("x"),
+ "x");
+ EXPECT_EQ(
+ GumboParser::normalizeHtml(
+ "x"),
+ "x");
+
+ // Background color only
+ EXPECT_EQ(
+ GumboParser::normalizeHtml(
+ "x"),
+ "x");
+ EXPECT_EQ(
+ GumboParser::normalizeHtml(
+ "x"),
+ "x");
+
+ // Both colors combined
+ EXPECT_EQ(
+ GumboParser::normalizeHtml(
+ "x"),
+ "x");
+ EXPECT_EQ(
+ GumboParser::normalizeHtml(
+ "x"),
+ "x");
+
+ // Color + Single Formatter
+ EXPECT_EQ(
+ GumboParser::normalizeHtml(
+ "x"),
+ "x");
+ EXPECT_EQ(
+ GumboParser::normalizeHtml(
+ "x"),
+ "x");
+ EXPECT_EQ(
+ GumboParser::normalizeHtml(
+ "x"),
+ "x");
+ EXPECT_EQ(
+ GumboParser::normalizeHtml(
+ "x"),
+ "x");
+
+ // Color + Multiple inline styles
+ EXPECT_EQ(
+ GumboParser::normalizeHtml(
+ "x"),
+ "x");
+
+ // Mix of colors and inline styles
+ EXPECT_EQ(
+ GumboParser::normalizeHtml(
+ "x"),
+ "x");
}
TEST(GumboParserTest, EnrichedTagRemappings) {
diff --git a/docs/docs/api-reference/enriched-text-input.md b/docs/docs/api-reference/enriched-text-input.md
index 382e60a39..eb4339d43 100644
--- a/docs/docs/api-reference/enriched-text-input.md
+++ b/docs/docs/api-reference/enriched-text-input.md
@@ -347,6 +347,12 @@ interface OnChangeStateEvent {
mention: StyleState;
checkboxList: StyleState;
alignment: string;
+ customStyle: {
+ foregroundColor: string;
+ backgroundColor: string;
+ fontSize: number;
+ fontFamily: string;
+ };
}
```
@@ -356,6 +362,10 @@ interface OnChangeStateEvent {
- `isConflicting` - toggling the style removes a conflicting active style
- `alignment` - current text alignment of the paragraph at the cursor:
`'left'`, `'center'`, `'right'`, `'justify'`, or `'auto'`
+- `customStyle` - the [custom style](/rich-text-formatting/custom-style) values
+ within the current selection. A field that isn't set, or
+ differs across the selection, is empty - `''` for strings and `0` for
+ `fontSize`. Colors are reported as hex strings (e.g. `#FF0000`)
:::note
@@ -973,6 +983,27 @@ up with natural alignment, the same as `'auto'`.
:::
+### `.setStyle()`
+
+```ts
+setStyle: (customStyle: {
+ foregroundColor?: ColorValue | null;
+ backgroundColor?: ColorValue | null;
+ fontSize?: number | null;
+ fontFamily?: string | null;
+}) => void;
+```
+
+Sets the [custom style](/rich-text-formatting/custom-style) at the current
+selection. Omitting a field leaves the given formatting untouched, whereas passing `null` for a field removes it.
+
+- `foregroundColor` - text color; use a hex (e.g. `#FFE066`) or named (e.g.
+ `'red'`) color
+- `backgroundColor` - text highlight color; use a hex (e.g. `#FFE066`) or named
+ (e.g. `'red'`) color
+- `fontSize` - font size of the text
+- `fontFamily` - font family of the text
+
### `.startMention()`
```ts
diff --git a/docs/docs/fundamentals/core-concepts.md b/docs/docs/fundamentals/core-concepts.md
index 52fd5593b..e391df2b9 100644
--- a/docs/docs/fundamentals/core-concepts.md
+++ b/docs/docs/fundamentals/core-concepts.md
@@ -71,7 +71,7 @@ The HTML format that both components expect is identical, what allows you to int
## The style state model
-Not every style can be combined with every other. For example, a paragraph can't be both a heading and a list item, code blocks don't support inline formatting such as bold or italic. The editor tracks this and reports it through `onChangeState`, which gives each style three booleans:
+Not every style can be combined with every other. For example, a paragraph can't be both a heading and a list item, code blocks don't support inline formatting such as bold or italic. The editor tracks this and reports it through `onChangeState`, which gives the majority of styles three booleans:
- **`isActive`** - whether the style is applied at the current selection. Use it to
highlight a toolbar button.
@@ -82,6 +82,8 @@ Not every style can be combined with every other. For example, a paragraph can't
For example, switching a blockquote paragraph to a heading removes the
blockquote. Use it to hint that the toggle is a swap, not an addition.
+Only [text alignment](/rich-text-formatting/text-alignment) and [custom style](/rich-text-formatting/custom-style) do not expose those three booleans in the `onChangeState` event, as they can be applied on any existing style. Instead, they simply carry their current value. To see the exact shape of the event's payload, see the `onChangeState` [API reference](/api-reference/enriched-text-input#onchangestate).
+
Driving your toolbar from these three flags keeps the UI honest: buttons light
up and grey out according to the editor's state.
diff --git a/docs/docs/fundamentals/html-format-and-supported-tags.md b/docs/docs/fundamentals/html-format-and-supported-tags.md
index 962dae581..ce2488e26 100644
--- a/docs/docs/fundamentals/html-format-and-supported-tags.md
+++ b/docs/docs/fundamentals/html-format-and-supported-tags.md
@@ -32,6 +32,10 @@ Both show up in the [`onChangeState`](/fundamentals/core-concepts#the-style-stat
| Link | `` | `
+
);
}
diff --git a/apps/example/ios/Podfile.lock b/apps/example/ios/Podfile.lock
index 00354487c..3ceaad194 100644
--- a/apps/example/ios/Podfile.lock
+++ b/apps/example/ios/Podfile.lock
@@ -1626,7 +1626,7 @@ PODS:
- React-utils (= 0.87.0)
- ReactNativeDependencies
- ReactNativeDependencies (0.87.0)
- - ReactNativeEnrichedHtml (1.1.0):
+ - ReactNativeEnrichedHtml (1.1.1):
- hermes-engine
- RCTRequired
- RCTTypeSafety
@@ -2005,7 +2005,7 @@ SPEC CHECKSUMS:
ReactCodegen: b54c2a8d91c25df024024b078e9fd3cdf93ce8cf
ReactCommon: 31d05b76329c8b3c9ef37fff8212f830925a2535
ReactNativeDependencies: ec5530432d8191b38e278117d498aaff05ea9d6f
- ReactNativeEnrichedHtml: 862adfa2876f765869e6d27630d21f6e6e04bf25
+ ReactNativeEnrichedHtml: 494c703157e37b8158fe254b6a62cb2e480453a1
SocketRocket: d57b1af80c029e12a75cd9b218287c67381e4593
Yoga: 58b502c52b14ad3c4468805d461fc37d275c2a42
diff --git a/apps/example/src/components/ColorPickerRow.tsx b/apps/example/src/components/ColorPickerRow.tsx
new file mode 100644
index 000000000..ad428cb11
--- /dev/null
+++ b/apps/example/src/components/ColorPickerRow.tsx
@@ -0,0 +1,92 @@
+import { type FC } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text } from 'react-native';
+
+interface Props {
+ colors: string[];
+ activeColor: string;
+ onSelectColor: (color: string) => void;
+ onClear: () => void;
+}
+
+export const ColorPickerRow: FC
+
-
+ {(openPicker === 'text-color' || openPicker === 'bg-color') && (
+
+ {toolbarItems.map((item) => (
+ {
+ item.onPress(editorRef.current);
+ }}
+ />
+ ))}
+ {alignmentItems.map((item) => (
+ {
+ editorRef.current?.setTextAlignment(item.value);
+ }}
+ />
+ ))}
+
+
+
+
+
+
+
+ {COLORS.map((color) => {
+ const isActive =
+ openPicker === 'text-color'
+ ? activeFgColor.toLowerCase() === color.toLowerCase()
+ : activeBgColor.toLowerCase() === color.toLowerCase();
+ return (
+
+ )}
+ {openPicker === 'font-size' && (
+
+
+ {FONT_SIZES.map((size) => (
+
+ ))}
+
+ )}
+ {openPicker === 'font-family' && (
+
+
+ {FONT_FAMILIES.map(({ label, value }) => (
+
+ ))}
+
+ )}
`, ``, `` | ``, `![]()
` |
| Mention | `` | ``, `` | ``, `![]()
` |
| Image | `![]()
` | ``, `` | `` |
+| Custom style | `` | -- | -- |
+
+`` carries the [custom style](/rich-text-formatting/custom-style) in its
+`style` attribute - `color`, `background-color`, `font-size` and `font-family`.
:::note
diff --git a/docs/docs/rich-text-formatting/basic-styles.mdx b/docs/docs/rich-text-formatting/basic-styles.mdx
index ce52600e2..41e9b8395 100644
--- a/docs/docs/rich-text-formatting/basic-styles.mdx
+++ b/docs/docs/rich-text-formatting/basic-styles.mdx
@@ -35,7 +35,7 @@ once.
:::note
-There are two more inline styles, which you cannot toggle quite like the others - **links** and **mentions**. You'll learn about them in their respective sections, once you finish this chapter.
+There are a few more inline styles, which you cannot toggle quite like the others - **custom style**, **links** and **mentions**. You'll learn about them in their respective sections, once you finish this chapter.
:::
diff --git a/docs/docs/rich-text-formatting/custom-style.mdx b/docs/docs/rich-text-formatting/custom-style.mdx
new file mode 100644
index 000000000..4c3789f25
--- /dev/null
+++ b/docs/docs/rich-text-formatting/custom-style.mdx
@@ -0,0 +1,98 @@
+---
+sidebar_position: 2
+---
+
+import InteractiveExample from '@site/src/components/InteractiveExample';
+import CustomStyleEditor from '@site/src/examples/CustomStyleEditor';
+import CustomStyleEditorSrc from '!!raw-loader!@site/src/examples/CustomStyleEditor';
+
+# Custom style
+
+Aside from the predefined [basic styles](/rich-text-formatting/basic-styles)
+you can apply a **custom style**, which consists of four pieces of formatting:
+text color, highlight, font size and font family. Similarly as the style-toggling
+methods, it applies to the current input's selection.
+
+## Setting a custom style
+
+`setStyle` accepts an object with four optional fields:
+
+```tsx
+setStyle(
+ {
+ foregroundColor?: string,
+ backgroundColor?: string,
+ fontSize?: number,
+ fontFamily?: string,
+ }
+);
+```
+
+Each call respects the already present custom style and modifies it with whatever
+fields you pass. For example, if you want to remove a single field, pass `null`:
+
+```tsx
+// Remove the highlight, keep the color, size and font as they are.
+ref.current?.setStyle({ backgroundColor: null });
+```
+
+Custom style doesn't conflict with or block any other style, so it combines
+freely with both inline styles and paragraph styles.
+
+:::note
+
+If a current style modifies the same thing that **custom style** sets, we have the following priority:
+**paragraph style** < **custom style** < **inline style**. E.g. if you try to apply `foregroundColor` custom style to a text with a link (which is an inline style), the link's foreground color stays.
+
+:::
+
+## Reading the current style
+
+Since custom style carries values rather than a simple on/off flag, `onChangeState`
+reports it as a separate `customStyle` object instead of the usual
+`isActive` / `isBlocking` / `isConflicting`
+[booleans](/fundamentals/core-concepts#the-style-state-model):
+
+```ts
+customStyle: {
+ foregroundColor: string;
+ backgroundColor: string;
+ fontSize: number;
+ fontFamily: string;
+}
+```
+
+Each field holds the value at the current selection. When a field isn't set, it comes back
+empty: `''` for strings and `0` for `fontSize`. That makes it easy to check whether a field
+is applied:
+
+```tsx
+const customStyleButtons = [
+ {
+ label: 'Color',
+ isActive: !!state?.customStyle.foregroundColor,
+ onPress: () => ref.current?.setStyle({ foregroundColor: '#e5484d' }),
+ },
+ {
+ label: 'Font size',
+ isActive: !!state?.customStyle.fontSize,
+ onPress: () => ref.current?.setStyle({ fontSize: 26 }),
+ },
+];
+```
+
+:::tip
+
+Pass colors to `setStyle` as hex or named colors (e.g. `'red'`). They are
+always reported as uppercase hex strings - `#RRGGBB`, or `#RRGGBBAA`.
+
+:::
+
+## Try it out
+
+Each button below sets one field of the custom style on the selection, and
+removes it when the field is already applied. Select a word and give it a color,
+then a highlight - notice how the second call doesn't touch the first one. Try
+mixing them with different fonts and sizes.
+
+(null);
+ const [state, setState] = useState(null);
+
+ const customStyle = state?.customStyle;
+
+ const buttons = [
+ {
+ label: 'Color',
+ isActive: !!customStyle?.foregroundColor,
+ onPress: () =>
+ ref.current?.setStyle({
+ foregroundColor: customStyle?.foregroundColor ? null : TEXT_COLOR,
+ }),
+ },
+ {
+ label: 'Highlight',
+ isActive: !!customStyle?.backgroundColor,
+ onPress: () =>
+ ref.current?.setStyle({
+ backgroundColor: customStyle?.backgroundColor
+ ? null
+ : HIGHLIGHT_COLOR,
+ }),
+ },
+ {
+ label: 'Font size',
+ isActive: !!customStyle?.fontSize,
+ onPress: () =>
+ ref.current?.setStyle({
+ fontSize: customStyle?.fontSize ? null : FONT_SIZE,
+ }),
+ },
+ {
+ label: 'Font family',
+ isActive: !!customStyle?.fontFamily,
+ onPress: () =>
+ ref.current?.setStyle({
+ fontFamily: customStyle?.fontFamily ? null : FONT_FAMILY,
+ }),
+ },
+ ];
+
+ return (
+
+ setState(e.nativeEvent)}
+ />
+
+ {buttons.map(button => (
+
+
+ {button.label}
+
+
+ ))}
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: { gap: 12 },
+ input: {
+ fontSize: 18,
+ color: '#232736',
+ padding: 12,
+ borderRadius: 12,
+ minHeight: 96,
+ backgroundColor: '#eef0ff',
+ },
+ row: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ justifyContent: 'center',
+ gap: 8,
+ },
+ button: {
+ width: 120,
+ padding: 8,
+ borderRadius: 24,
+ borderWidth: 1,
+ borderColor: '#919fcf',
+ },
+ buttonActive: {
+ borderColor: '#57b495',
+ backgroundColor: '#57b495',
+ },
+ text: {
+ textAlign: 'center',
+ color: '#919fcf',
+ },
+ textActive: {
+ color: '#eef0ff',
+ },
+});
diff --git a/ios/EnrichedTextInputView.mm b/ios/EnrichedTextInputView.mm
index c44d4d9dd..f4f5ab927 100644
--- a/ios/EnrichedTextInputView.mm
+++ b/ios/EnrichedTextInputView.mm
@@ -1,5 +1,6 @@
#import "EnrichedTextInputView.h"
#import "CoreText/CoreText.h"
+#import "extensions/ColorExtension.h"
#import "extensions/LayoutManagerExtension.h"
#import "extensions/StringExtension.h"
#import "generated/ReactCodegen/ReactNativeEnrichedSpec/EventEmitters.h"
@@ -21,6 +22,7 @@
#import "utils/WordsUtils.h"
#import "utils/ZeroWidthSpaceUtils.h"
#import
+#import
#import
#import
#import
@@ -62,6 +64,7 @@ @implementation EnrichedTextInputView {
NSString *_submitBehavior;
NSDictionary *_capturedAttributesBeforeChange;
NSString *_recentlyEmittedAlignment;
+ CustomStyleData *_recentlyEmittedCustomStyle;
}
@synthesize blockEmitting = blockEmitting;
@@ -1135,6 +1138,15 @@ - (void)tryUpdatingActiveStyles {
updateNeeded = YES;
}
+ // detect custom style change
+ CustomStyle *customStyle = stylesDict[@([CustomStyle getType])];
+ CustomStyleData *currentCustomStyle =
+ [customStyle getCustomStyleDataInRange:textView.selectedRange];
+ if (currentCustomStyle != _recentlyEmittedCustomStyle &&
+ ![currentCustomStyle isEqual:_recentlyEmittedCustomStyle]) {
+ updateNeeded = YES;
+ }
+
if (updateNeeded) {
auto emitter = [self getEventEmitter];
if (emitter != nullptr) {
@@ -1142,6 +1154,7 @@ - (void)tryUpdatingActiveStyles {
_activeStyles = newActiveStyles;
_blockedStyles = newBlockedStyles;
_recentlyEmittedAlignment = currentAlignment;
+ _recentlyEmittedCustomStyle = currentCustomStyle;
emitter->onChangeState(
{.bold = GET_STYLE_STATE([BoldStyle getType]),
@@ -1163,7 +1176,19 @@ - (void)tryUpdatingActiveStyles {
.codeBlock = GET_STYLE_STATE([CodeBlockStyle getType]),
.image = GET_STYLE_STATE([ImageStyle getType]),
.checkboxList = GET_STYLE_STATE([CheckboxListStyle getType]),
- .alignment = [currentAlignment UTF8String]});
+ .alignment = [currentAlignment UTF8String],
+ .customStyle = {
+ .foregroundColor =
+ [[currentCustomStyle.foregroundColor hexString] UTF8String]
+ ?: "",
+ .backgroundColor =
+ [[currentCustomStyle.backgroundColor hexString] UTF8String]
+ ?: "",
+ .fontSize = currentCustomStyle.fontSize
+ ? [currentCustomStyle.fontSize doubleValue]
+ : 0.0,
+ .fontFamily =
+ [currentCustomStyle.fontFamily UTF8String] ?: ""}});
}
}
@@ -1311,6 +1336,9 @@ - (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args {
if (!_placeholderLabel.isHidden) {
[self refreshPlaceholderLabelStyles];
}
+ } else if ([commandName isEqualToString:@"setStyle"]) {
+ NSString *styleJSON = (NSString *)args[0];
+ [self setStyle:styleJSON];
}
}
@@ -1518,6 +1546,66 @@ - (void)toggleRegularStyle:(StyleType)type {
}
}
+- (void)setStyle:(NSString *)styleJSON {
+ NSData *jsonData = [styleJSON dataUsingEncoding:NSUTF8StringEncoding];
+ if (jsonData == nil)
+ return;
+ id parsed = [NSJSONSerialization JSONObjectWithData:jsonData
+ options:0
+ error:nil];
+ if (![parsed isKindOfClass:[NSDictionary class]])
+ return;
+ NSDictionary *dict = (NSDictionary *)parsed;
+
+ NSRange selectedRange = textView.selectedRange;
+ CustomStyle *customStyleClass =
+ (CustomStyle *)stylesDict[@([CustomStyle getType])];
+ if (customStyleClass == nil)
+ return;
+
+ if (![StyleUtils handleStyleBlocksAndConflicts:[CustomStyle getType]
+ range:selectedRange
+ forHost:self]) {
+ return;
+ }
+
+ // Convert raw JSON values (NSNumber ARGB integers from processColor) to
+ // UIColor. NSNull is passed through as-is so mergeFromDict: can clear
+ // the color when the caller explicitly passes null.
+ NSMutableDictionary *processedDict = [NSMutableDictionary new];
+
+ id fgRaw = dict[@"foregroundColor"];
+ if (fgRaw != nil) {
+ processedDict[@"foregroundColor"] = [fgRaw isKindOfClass:[NSNull class]]
+ ? [NSNull null]
+ : [RCTConvert UIColor:fgRaw];
+ }
+
+ id bgRaw = dict[@"backgroundColor"];
+ if (bgRaw != nil) {
+ processedDict[@"backgroundColor"] = [bgRaw isKindOfClass:[NSNull class]]
+ ? [NSNull null]
+ : [RCTConvert UIColor:bgRaw];
+ }
+
+ id fsRaw = dict[@"fontSize"];
+ if (fsRaw != nil) {
+ processedDict[@"fontSize"] =
+ [fsRaw isKindOfClass:[NSNull class]] ? [NSNull null] : fsRaw;
+ }
+
+ id ffRaw = dict[@"fontFamily"];
+ if (ffRaw != nil) {
+ processedDict[@"fontFamily"] = [ffRaw isKindOfClass:[NSNull class]]
+ ? [NSNull null]
+ : [RCTConvert NSString:ffRaw];
+ }
+
+ [customStyleClass applyStyleFromDict:processedDict
+ selectedRange:selectedRange];
+ [self anyTextMayHaveBeenModified];
+}
+
- (void)toggleCheckboxList:(BOOL)checked {
CheckboxListStyle *style =
(CheckboxListStyle *)stylesDict[@([CheckboxListStyle getType])];
@@ -1886,6 +1974,10 @@ - (void)emitOnContextMenuItemPressEvent:(NSString *)itemText {
AlignmentStyle *alignmentStyle = stylesDict[@([AlignmentStyle getType])];
NSString *currentAlignment = [alignmentStyle getStyleState];
+ CustomStyle *customStyle = stylesDict[@([CustomStyle getType])];
+ CustomStyleData *contextCustomStyleData =
+ [customStyle getCustomStyleDataInRange:textView.selectedRange];
+
emitter->onContextMenuItemPress(
{.itemText = [itemText toCppString],
.selectedText = [selectedText toCppString],
@@ -1912,7 +2004,21 @@ - (void)emitOnContextMenuItemPressEvent:(NSString *)itemText {
.image = GET_STYLE_STATE([ImageStyle getType]),
.mention = GET_STYLE_STATE([MentionStyle getType]),
.checkboxList = GET_STYLE_STATE([CheckboxListStyle getType]),
- .alignment = [currentAlignment UTF8String]}});
+ .alignment = [currentAlignment UTF8String],
+ .customStyle = {
+ .foregroundColor =
+ [[contextCustomStyleData.foregroundColor hexString]
+ UTF8String]
+ ?: "",
+ .backgroundColor =
+ [[contextCustomStyleData.backgroundColor hexString]
+ UTF8String]
+ ?: "",
+ .fontSize = contextCustomStyleData.fontSize
+ ? [contextCustomStyleData.fontSize doubleValue]
+ : 0.0,
+ .fontFamily =
+ [contextCustomStyleData.fontFamily UTF8String] ?: ""}}});
}
}
@@ -1939,8 +2045,9 @@ - (bool)textView:(UITextView *)textView
replacementText:(NSString *)text {
// Capture the attributes at range.location that are being replaced
// (autocorrect / predictive) so didProcessEditing: can re-stamp them onto the
- // replacement. Only capture for genuine replacements (text.length > 0), not
- // for deletions/backspace (text.length == 0).
+ // replacement. Skip pure deletions (text.length == 0) — there is no incoming
+ // text to receive attributes, and capturing here would cause the deleted
+ // character's CustomStyleData to be re-stamped onto the widened editedRange.
if (range.length > 0 && text.length > 0) {
_capturedAttributesBeforeChange =
[textView.textStorage attributesAtIndex:range.location
diff --git a/ios/config/EnrichedConfig.h b/ios/config/EnrichedConfig.h
index be7b8eb7b..7f3234e6c 100644
--- a/ios/config/EnrichedConfig.h
+++ b/ios/config/EnrichedConfig.h
@@ -89,6 +89,7 @@
- (CGFloat)codeBlockBorderRadius;
- (void)setCodeBlockBorderRadius:(CGFloat)newValue;
- (void)invalidateFonts;
+- (CGFloat)scaledFontSizeForValue:(CGFloat)fontSize;
- (NSNumber *)scaledPrimaryFontSize;
- (BOOL)allowFontScaling;
- (void)setAllowFontScaling:(BOOL)newValue;
diff --git a/ios/config/EnrichedConfig.mm b/ios/config/EnrichedConfig.mm
index 89f0e9d1d..fbb1829e4 100644
--- a/ios/config/EnrichedConfig.mm
+++ b/ios/config/EnrichedConfig.mm
@@ -162,11 +162,7 @@ - (void)setPrimaryLineHeight:(CGFloat)newValue {
}
- (CGFloat)scaledPrimaryLineHeight {
- if (!_allowFontScaling) {
- return [self primaryLineHeight];
- }
- return [[UIFontMetrics defaultMetrics]
- scaledValueForValue:[self primaryLineHeight]];
+ return [self scaledFontSizeForValue:[self primaryLineHeight]];
}
- (NSString *)primaryFontWeight {
@@ -235,10 +231,7 @@ - (void)setMentionIndicators:(NSSet *)newValue {
}
- (CGFloat)h1FontSize {
- if (!_allowFontScaling) {
- return _h1FontSize;
- }
- return [[UIFontMetrics defaultMetrics] scaledValueForValue:_h1FontSize];
+ return [self scaledFontSizeForValue:_h1FontSize];
}
- (void)setH1FontSize:(CGFloat)newValue {
@@ -254,10 +247,7 @@ - (void)setH1Bold:(BOOL)newValue {
}
- (CGFloat)h2FontSize {
- if (!_allowFontScaling) {
- return _h2FontSize;
- }
- return [[UIFontMetrics defaultMetrics] scaledValueForValue:_h2FontSize];
+ return [self scaledFontSizeForValue:_h2FontSize];
}
- (void)setH2FontSize:(CGFloat)newValue {
@@ -273,10 +263,7 @@ - (void)setH2Bold:(BOOL)newValue {
}
- (CGFloat)h3FontSize {
- if (!_allowFontScaling) {
- return _h3FontSize;
- }
- return [[UIFontMetrics defaultMetrics] scaledValueForValue:_h3FontSize];
+ return [self scaledFontSizeForValue:_h3FontSize];
}
- (void)setH3FontSize:(CGFloat)newValue {
@@ -292,10 +279,7 @@ - (void)setH3Bold:(BOOL)newValue {
}
- (CGFloat)h4FontSize {
- if (!_allowFontScaling) {
- return _h4FontSize;
- }
- return [[UIFontMetrics defaultMetrics] scaledValueForValue:_h4FontSize];
+ return [self scaledFontSizeForValue:_h4FontSize];
}
- (void)setH4FontSize:(CGFloat)newValue {
@@ -311,10 +295,7 @@ - (void)setH4Bold:(BOOL)newValue {
}
- (CGFloat)h5FontSize {
- if (!_allowFontScaling) {
- return _h5FontSize;
- }
- return [[UIFontMetrics defaultMetrics] scaledValueForValue:_h5FontSize];
+ return [self scaledFontSizeForValue:_h5FontSize];
}
- (void)setH5FontSize:(CGFloat)newValue {
@@ -330,10 +311,7 @@ - (void)setH5Bold:(BOOL)newValue {
}
- (CGFloat)h6FontSize {
- if (!_allowFontScaling) {
- return _h6FontSize;
- }
- return [[UIFontMetrics defaultMetrics] scaledValueForValue:_h6FontSize];
+ return [self scaledFontSizeForValue:_h6FontSize];
}
- (void)setH6FontSize:(CGFloat)newValue {
@@ -560,13 +538,15 @@ - (void)setAllowFontScaling:(BOOL)newValue {
}
}
-- (NSNumber *)scaledPrimaryFontSize {
+- (CGFloat)scaledFontSizeForValue:(CGFloat)fontSize {
if (!_allowFontScaling) {
- return [self primaryFontSize];
+ return fontSize;
}
- CGFloat scaledSize = [[UIFontMetrics defaultMetrics]
- scaledValueForValue:[[self primaryFontSize] floatValue]];
- return @(scaledSize);
+ return [[UIFontMetrics defaultMetrics] scaledValueForValue:fontSize];
+}
+
+- (NSNumber *)scaledPrimaryFontSize {
+ return @([self scaledFontSizeForValue:[[self primaryFontSize] floatValue]]);
}
- (CGFloat)checkboxListBoxSize {
diff --git a/ios/extensions/ColorExtension.h b/ios/extensions/ColorExtension.h
index c3a2323c9..fab70da64 100644
--- a/ios/extensions/ColorExtension.h
+++ b/ios/extensions/ColorExtension.h
@@ -5,4 +5,6 @@
- (BOOL)isEqualToColor:(UIColor *)otherColor;
- (UIColor *)colorWithResolvedAlpha;
- (UIColor *)colorWithResolvedAlpha:(CGFloat)newAlpha;
+- (NSString *)hexString;
++ (UIColor *_Nullable)colorFromCSSString:(NSString *_Nullable)cssString;
@end
diff --git a/ios/extensions/ColorExtension.mm b/ios/extensions/ColorExtension.mm
index 32877787f..8c1f7ff9a 100644
--- a/ios/extensions/ColorExtension.mm
+++ b/ios/extensions/ColorExtension.mm
@@ -1,5 +1,163 @@
#import "ColorExtension.h"
+static NSDictionary *getNamedHexColors(void) {
+ static NSDictionary *namedColorHexes = nil;
+ static dispatch_once_t onceToken;
+ dispatch_once(&onceToken, ^{
+ namedColorHexes = @{
+ @"aliceblue" : @"#F0F8FFFF",
+ @"antiquewhite" : @"#FAEBD7FF",
+ @"aqua" : @"#00FFFFFF",
+ @"aquamarine" : @"#7FFFD4FF",
+ @"azure" : @"#F0FFFFFF",
+ @"beige" : @"#F5F5DCFF",
+ @"bisque" : @"#FFE4C4FF",
+ @"black" : @"#000000FF",
+ @"blanchedalmond" : @"#FFEBCDFF",
+ @"blue" : @"#0000FFFF",
+ @"blueviolet" : @"#8A2BE2FF",
+ @"brown" : @"#A52A2AFF",
+ @"burlywood" : @"#DEB887FF",
+ @"cadetblue" : @"#5F9EA0FF",
+ @"chartreuse" : @"#7FFF00FF",
+ @"chocolate" : @"#D2691EFF",
+ @"coral" : @"#FF7F50FF",
+ @"cornflowerblue" : @"#6495EDFF",
+ @"cornsilk" : @"#FFF8DCFF",
+ @"crimson" : @"#DC143CFF",
+ @"cyan" : @"#00FFFFFF",
+ @"darkblue" : @"#00008BFF",
+ @"darkcyan" : @"#008B8BFF",
+ @"darkgoldenrod" : @"#B8860BFF",
+ @"darkgray" : @"#A9A9A9FF",
+ @"darkgrey" : @"#A9A9A9FF",
+ @"darkgreen" : @"#006400FF",
+ @"darkkhaki" : @"#BDB76BFF",
+ @"darkmagenta" : @"#8B008BFF",
+ @"darkolivegreen" : @"#556B2FFF",
+ @"darkorange" : @"#FF8C00FF",
+ @"darkorchid" : @"#9932CCFF",
+ @"darkred" : @"#8B0000FF",
+ @"darksalmon" : @"#E9967AFF",
+ @"darkseagreen" : @"#8FBC8FFF",
+ @"darkslateblue" : @"#483D8BFF",
+ @"darkslategray" : @"#2F4F4FFF",
+ @"darkslategrey" : @"#2F4F4FFF",
+ @"darkturquoise" : @"#00CED1FF",
+ @"darkviolet" : @"#9400D3FF",
+ @"deeppink" : @"#FF1493FF",
+ @"deepskyblue" : @"#00BFFFFF",
+ @"dimgray" : @"#696969FF",
+ @"dimgrey" : @"#696969FF",
+ @"dodgerblue" : @"#1E90FFFF",
+ @"firebrick" : @"#B22222FF",
+ @"floralwhite" : @"#FFFAF0FF",
+ @"forestgreen" : @"#228B22FF",
+ @"fuchsia" : @"#FF00FFFF",
+ @"gainsboro" : @"#DCDCDCFF",
+ @"ghostwhite" : @"#F8F8FFFF",
+ @"gold" : @"#FFD700FF",
+ @"goldenrod" : @"#DAA520FF",
+ @"gray" : @"#808080FF",
+ @"grey" : @"#808080FF",
+ @"green" : @"#008000FF",
+ @"greenyellow" : @"#ADFF2FFF",
+ @"honeydew" : @"#F0FFF0FF",
+ @"hotpink" : @"#FF69B4FF",
+ @"indianred" : @"#CD5C5CFF",
+ @"indigo" : @"#4B0082FF",
+ @"ivory" : @"#FFFFF0FF",
+ @"khaki" : @"#F0E68CFF",
+ @"lavender" : @"#E6E6FAFF",
+ @"lavenderblush" : @"#FFF0F5FF",
+ @"lawngreen" : @"#7CFC00FF",
+ @"lemonchiffon" : @"#FFFACDFF",
+ @"lightblue" : @"#ADD8E6FF",
+ @"lightcoral" : @"#F08080FF",
+ @"lightcyan" : @"#E0FFFFFF",
+ @"lightgoldenrodyellow" : @"#FAFAD2FF",
+ @"lightgray" : @"#D3D3D3FF",
+ @"lightgrey" : @"#D3D3D3FF",
+ @"lightgreen" : @"#90EE90FF",
+ @"lightpink" : @"#FFB6C1FF",
+ @"lightsalmon" : @"#FFA07AFF",
+ @"lightseagreen" : @"#20B2AAFF",
+ @"lightskyblue" : @"#87CEFAFF",
+ @"lightslategray" : @"#778899FF",
+ @"lightslategrey" : @"#778899FF",
+ @"lightsteelblue" : @"#B0C4DEFF",
+ @"lightyellow" : @"#FFFFE0FF",
+ @"lime" : @"#00FF00FF",
+ @"limegreen" : @"#32CD32FF",
+ @"linen" : @"#FAF0E6FF",
+ @"magenta" : @"#FF00FFFF",
+ @"maroon" : @"#800000FF",
+ @"mediumaquamarine" : @"#66CDAAFF",
+ @"mediumblue" : @"#0000CDFF",
+ @"mediumorchid" : @"#BA55D3FF",
+ @"mediumpurple" : @"#9370D8FF",
+ @"mediumseagreen" : @"#3CB371FF",
+ @"mediumslateblue" : @"#7B68EEFF",
+ @"mediumspringgreen" : @"#00FA9AFF",
+ @"mediumturquoise" : @"#48D1CCFF",
+ @"mediumvioletred" : @"#C71585FF",
+ @"midnightblue" : @"#191970FF",
+ @"mintcream" : @"#F5FFFAFF",
+ @"mistyrose" : @"#FFE4E1FF",
+ @"moccasin" : @"#FFE4B5FF",
+ @"navajowhite" : @"#FFDEADFF",
+ @"navy" : @"#000080FF",
+ @"oldlace" : @"#FDF5E6FF",
+ @"olive" : @"#808000FF",
+ @"olivedrab" : @"#6B8E23FF",
+ @"orange" : @"#FFA500FF",
+ @"orangered" : @"#FF4500FF",
+ @"orchid" : @"#DA70D6FF",
+ @"palegoldenrod" : @"#EEE8AAFF",
+ @"palegreen" : @"#98FB98FF",
+ @"paleturquoise" : @"#AFEEEEFF",
+ @"palevioletred" : @"#D87093FF",
+ @"papayawhip" : @"#FFEFD5FF",
+ @"peachpuff" : @"#FFDAB9FF",
+ @"peru" : @"#CD853FFF",
+ @"pink" : @"#FFC0CBFF",
+ @"plum" : @"#DDA0DDFF",
+ @"powderblue" : @"#B0E0E6FF",
+ @"purple" : @"#800080FF",
+ @"rebeccapurple" : @"#663399FF",
+ @"red" : @"#FF0000FF",
+ @"rosybrown" : @"#BC8F8FFF",
+ @"royalblue" : @"#4169E1FF",
+ @"saddlebrown" : @"#8B4513FF",
+ @"salmon" : @"#FA8072FF",
+ @"sandybrown" : @"#F4A460FF",
+ @"seagreen" : @"#2E8B57FF",
+ @"seashell" : @"#FFF5EEFF",
+ @"sienna" : @"#A0522DFF",
+ @"silver" : @"#C0C0C0FF",
+ @"skyblue" : @"#87CEEBFF",
+ @"slateblue" : @"#6A5ACDFF",
+ @"slategray" : @"#708090FF",
+ @"slategrey" : @"#708090FF",
+ @"snow" : @"#FFFAFAFF",
+ @"springgreen" : @"#00FF7FFF",
+ @"steelblue" : @"#4682B4FF",
+ @"tan" : @"#D2B48CFF",
+ @"teal" : @"#008080FF",
+ @"thistle" : @"#D8BFD8FF",
+ @"tomato" : @"#FF6347FF",
+ @"turquoise" : @"#40E0D0FF",
+ @"violet" : @"#EE82EEFF",
+ @"wheat" : @"#F5DEB3FF",
+ @"white" : @"#FFFFFFFF",
+ @"whitesmoke" : @"#F5F5F5FF",
+ @"yellow" : @"#FFFF00FF",
+ @"yellowgreen" : @"#9ACD32FF"
+ };
+ });
+ return namedColorHexes;
+}
+
@implementation UIColor (ColorExtension)
- (BOOL)isEqualToColor:(UIColor *)otherColor {
CGColorSpaceRef colorSpaceRGB = CGColorSpaceCreateDeviceRGB();
@@ -45,4 +203,127 @@ - (UIColor *)colorWithResolvedAlpha:(CGFloat)newAlpha {
}
return self;
}
+
+// Returns a CSS hex color string.
+// Opaque colors produce 6-digit form (#RRGGBB); semi-transparent produce
+// 8-digit form (#RRGGBBAA). Returns @"" if the color cannot be expressed
+// in RGB.
+- (NSString *)hexString {
+ CGFloat red = 0.0;
+ CGFloat green = 0.0;
+ CGFloat blue = 0.0;
+ CGFloat alpha = 0.0;
+
+ if (![self getRed:&red green:&green blue:&blue alpha:&alpha])
+ return @"";
+
+ int r = (int)(red * 255.0 + 0.5);
+ int g = (int)(green * 255.0 + 0.5);
+ int b = (int)(blue * 255.0 + 0.5);
+ int a = (int)(alpha * 255.0 + 0.5);
+
+ if (a == 255)
+ return [NSString stringWithFormat:@"#%02X%02X%02X", r, g, b];
+ return [NSString stringWithFormat:@"#%02X%02X%02X%02X", r, g, b, a];
+}
+
+// Converts a CSS color string (Hex, RGB, RGBA, or Named) into a UIColor.
++ (UIColor *_Nullable)colorFromCSSString:(NSString *_Nullable)cssString {
+ if (cssString.length == 0)
+ return nil;
+
+ // Trim whitespace and force lowercase for easier matching
+ NSString *str =
+ [cssString
+ stringByTrimmingCharactersInSet:[NSCharacterSet
+ whitespaceAndNewlineCharacterSet]]
+ .lowercaseString;
+
+ // Handle Hex (#FFF, #FFFFFF, #FFFFFFFF)
+ if ([str hasPrefix:@"#"]) {
+ str = [str substringFromIndex:1];
+ NSUInteger len = str.length;
+
+ unsigned int value = 0;
+ NSScanner *scanner = [NSScanner scannerWithString:str];
+ if (![scanner scanHexInt:&value])
+ return nil;
+
+ CGFloat r, g, b, a = 1.0;
+
+ if (len == 3) {
+ r = ((value >> 8) & 0xF) / 15.0;
+ g = ((value >> 4) & 0xF) / 15.0;
+ b = (value & 0xF) / 15.0;
+ } else if (len == 6) {
+ r = ((value >> 16) & 0xFF) / 255.0;
+ g = ((value >> 8) & 0xFF) / 255.0;
+ b = (value & 0xFF) / 255.0;
+ } else if (len == 8) {
+ r = ((value >> 24) & 0xFF) / 255.0;
+ g = ((value >> 16) & 0xFF) / 255.0;
+ b = ((value >> 8) & 0xFF) / 255.0;
+ a = (value & 0xFF) / 255.0;
+ } else {
+ return nil; // Invalid hex length
+ }
+
+ return [UIColor colorWithRed:r green:g blue:b alpha:a];
+ }
+
+ // Handle rgb() and rgba()
+ if ([str hasPrefix:@"rgb"]) {
+ NSScanner *scanner = [NSScanner scannerWithString:str];
+
+ // Scan up to and including the opening parenthesis
+ [scanner scanUpToString:@"(" intoString:NULL];
+ if (![scanner scanString:@"(" intoString:NULL])
+ return nil;
+
+ float r = 0, g = 0, b = 0, a = 1.0;
+
+ // Scan Red, then require a comma
+ if (![scanner scanFloat:&r])
+ return nil;
+ if (![scanner scanString:@"," intoString:NULL])
+ return nil;
+
+ // Scan Green, then require a comma
+ if (![scanner scanFloat:&g])
+ return nil;
+ if (![scanner scanString:@"," intoString:NULL])
+ return nil;
+
+ // Scan Blue (comma not required yet, might be alpha or closing parenthesis)
+ if (![scanner scanFloat:&b])
+ return nil;
+
+ // Check if there is a 4th parameter (Alpha)
+ if ([scanner scanString:@"," intoString:NULL]) {
+ if (![scanner scanFloat:&a])
+ return nil;
+ }
+
+ // Require the closing parenthesis to guarantee the string wasn't malformed
+ // or cut off
+ if (![scanner scanString:@")" intoString:NULL])
+ return nil;
+
+ return [UIColor colorWithRed:r / 255.0
+ green:g / 255.0
+ blue:b / 255.0
+ alpha:a];
+ }
+
+ // Handle Named Colors
+ NSString *hexForName = getNamedHexColors()[str];
+ if (hexForName) {
+ // We found a match! Pass the 8-digit hex string right back into this very
+ // method to reuse the Hex parsing logic.
+ return [self colorFromCSSString:hexForName];
+ }
+
+ return nil;
+}
+
@end
diff --git a/ios/htmlParser/HtmlParser.mm b/ios/htmlParser/HtmlParser.mm
index f710a7411..13cfc65dc 100644
--- a/ios/htmlParser/HtmlParser.mm
+++ b/ios/htmlParser/HtmlParser.mm
@@ -1,7 +1,9 @@
#import "HtmlParser.h"
#import "config/EnrichedConfig.h"
+#import "extensions/ColorExtension.h"
#import "extensions/StringExtension.h"
#import "interfaces/AlignmentEntry.h"
+#import "interfaces/CustomStyleData.h"
#import "interfaces/ImageData.h"
#import "interfaces/LinkData.h"
#import "interfaces/MentionParams.h"
@@ -42,9 +44,10 @@ + (BOOL)isBlockTag:(NSString *)tagName {
* you MUST add it to the `textTags` set below.
*/
+ (NSString *)stripExtraWhiteSpacesAndNewlines:(NSString *)html {
- NSSet *textTags = [NSSet setWithObjects:@"p", @"h1", @"h2", @"h3", @"h4",
- @"h5", @"h6", @"li", @"b", @"a", @"s",
- @"mention", @"code", @"u", @"i", nil];
+ NSSet *textTags =
+ [NSSet setWithObjects:@"p", @"h1", @"h2", @"h3", @"h4", @"h5", @"h6",
+ @"li", @"b", @"a", @"s", @"mention", @"code", @"u",
+ @"i", @"span", nil];
NSMutableString *output = [NSMutableString stringWithCapacity:html.length];
NSMutableString *currentTagBuffer = [NSMutableString string];
@@ -834,9 +837,15 @@ + (NSArray *_Nonnull)getTextAndStylesFromHtml:(NSString *_Nonnull)fixedHtml
[styleArr addObject:@([BlockQuoteStyle getType])];
} else if ([tagName isEqualToString:@"codeblock"]) {
[styleArr addObject:@([CodeBlockStyle getType])];
+ } else if ([tagName isEqualToString:@"span"]) {
+ CustomStyleData *data = [self parseCustomStyleDataFromSpanParams:params];
+ if (data == nil || data.isEmpty) {
+ continue;
+ }
+ [styleArr addObject:@([CustomStyle getType])];
+ stylePair.styleValue = data;
} else {
- // some other external tags like span just don't get put into the
- // processed styles
+ // some other external tags don't get put into the processed styles
continue;
}
@@ -866,6 +875,7 @@ + (NSString *)parseToHtmlFromRange:(NSRange)range
BOOL inCodeBlock = NO;
BOOL inCheckboxList = NO;
unichar lastCharacter = 0;
+ CustomStyleData *lastCustomStyleData = nil;
for (int i = 0; i < text.length; i++) {
NSRange currentRange = NSMakeRange(offset + i, 1);
@@ -1014,6 +1024,7 @@ + (NSString *)parseToHtmlFromRange:(NSRange)range
// clear the previous styles
previousActiveStyles = [[NSSet alloc] init];
+ lastCustomStyleData = nil;
// next character opens new paragraph
newLine = YES;
@@ -1175,6 +1186,36 @@ + (NSString *)parseToHtmlFromRange:(NSRange)range
}
}
+ // Force close+reopen if CustomStyle is continuously active but its data
+ // changed, so adjacent runs with different styles produce separate
+ // tags instead of being merged into one.
+ NSNumber *customType = @([CustomStyle getType]);
+ if (![endedStyles member:customType] &&
+ [currentActiveStyles member:customType] &&
+ [previousActiveStyles member:customType]) {
+ CustomStyle *customStyleObj =
+ (CustomStyle *)host.stylesDict[customType];
+ CustomStyleData *currentData =
+ [customStyleObj getStoredCustomStyleDataAt:currentRange.location];
+ if (![currentData isEqual:lastCustomStyleData]) {
+ [fixedEndedStyles addObject:customType];
+ [stylesToBeReAdded addObject:customType];
+
+ // Inner styles (e.g. bold) must also close before the span ends and
+ // reopen inside the new span, otherwise tags cross span boundaries.
+ for (NSNumber *activeStyle in currentActiveStyles) {
+ if ([activeStyle isEqualToNumber:customType] ||
+ [activeStyle isEqualToNumber:@([ImageStyle getType])]) {
+ continue;
+ }
+ if ([activeStyle integerValue] > [customType integerValue]) {
+ [fixedEndedStyles addObject:activeStyle];
+ [stylesToBeReAdded addObject:activeStyle];
+ }
+ }
+ }
+ }
+
// they are sorted in a descending order
NSArray *sortedEndedStyles = [fixedEndedStyles
sortedArrayUsingDescriptors:@[ [NSSortDescriptor
@@ -1220,6 +1261,11 @@ + (NSString *)parseToHtmlFromRange:(NSRange)range
// append the letter and escape it if needed
[result appendString:[NSString stringByEscapingHtml:currentCharacterStr]];
+ // track CustomStyleData for the next character's data-change check
+ lastCustomStyleData =
+ [(CustomStyle *)host.stylesDict[@([CustomStyle getType])]
+ getStoredCustomStyleDataAt:currentRange.location];
+
// save current styles for next character's checks
previousActiveStyles = currentActiveStyles;
}
@@ -1440,6 +1486,50 @@ + (NSString *)tagContentForStyle:(NSNumber *)style
[style isEqualToNumber:@([CodeBlockStyle getType])]) {
// blockquotes and codeblock use tags the same way lists use
return [NSString stringWithFormat:@"p%@", cssStyleString];
+ } else if ([style isEqualToNumber:@([CustomStyle getType])]) {
+ if (openingTag) {
+ CustomStyle *customStyle =
+ (CustomStyle *)host.stylesDict[@([CustomStyle getType])];
+ if (customStyle != nil) {
+ CustomStyleData *data =
+ [customStyle getStoredCustomStyleDataAt:location];
+ if (data != nil && !data.isEmpty) {
+ NSMutableString *cssProps = [NSMutableString string];
+ NSString *fg = [[data foregroundColor] hexString];
+ NSString *bg = [[data backgroundColor] hexString];
+ if (fg.length > 0) {
+ [cssProps appendFormat:@"color: %@;", fg];
+ }
+ if (bg.length > 0) {
+ if (cssProps.length > 0)
+ [cssProps appendString:@" "];
+ [cssProps appendFormat:@"background-color: %@;", bg];
+ }
+ if (data.fontSize != nil) {
+ if (cssProps.length > 0)
+ [cssProps appendString:@" "];
+ [cssProps
+ appendFormat:@"font-size: %gpx;", [data.fontSize doubleValue]];
+ }
+ if (data.fontFamily.length > 0) {
+ if (cssProps.length > 0)
+ [cssProps appendString:@" "];
+ if ([data.fontFamily rangeOfString:@" "].location != NSNotFound) {
+ // font family contains spaces, wrap in single quotes
+ [cssProps appendFormat:@"font-family: '%@';", data.fontFamily];
+ } else {
+ [cssProps appendFormat:@"font-family: %@;", data.fontFamily];
+ }
+ }
+ if (cssProps.length > 0) {
+ return [NSString stringWithFormat:@"span style=\"%@\"", cssProps];
+ }
+ }
+ }
+ return @"span";
+ } else {
+ return @"span";
+ }
}
return @"";
}
@@ -1464,6 +1554,119 @@ + (NSString *)prepareCssStyleString:(NSInteger)location
return @"";
}
++ (CustomStyleData *_Nullable)parseCustomStyleDataFromSpanParams:
+ (NSString *)params {
+ static NSRegularExpression *styleAttrRegex;
+ static NSRegularExpression *fgRegex;
+ static NSRegularExpression *bgRegex;
+ static NSRegularExpression *fontSizeRegex;
+ static NSRegularExpression *fontFamilyRegex;
+ static dispatch_once_t onceToken;
+ dispatch_once(&onceToken, ^{
+ styleAttrRegex = [NSRegularExpression
+ regularExpressionWithPattern:@"style\\s*=\\s*[\"']([^\"']*)[\"']"
+ options:NSRegularExpressionCaseInsensitive
+ error:nil];
+ // Captures everything after "color:" until a semicolon or end of string
+ fgRegex = [NSRegularExpression
+ regularExpressionWithPattern:@"(?:^|;)\\s*color\\s*:\\s*([^;]+)"
+ options:NSRegularExpressionCaseInsensitive
+ error:nil];
+
+ // Captures everything after "background-color:" until a semicolon or end of
+ // string
+ bgRegex = [NSRegularExpression
+ regularExpressionWithPattern:@"background-color\\s*:\\s*([^;]+)"
+ options:NSRegularExpressionCaseInsensitive
+ error:nil];
+
+ fontSizeRegex = [NSRegularExpression
+ regularExpressionWithPattern:
+ @"font-size\\s*:\\s*([0-9.]+)(?:\\s*px)?(?=\\s*;|\\s*$)"
+ options:NSRegularExpressionCaseInsensitive
+ error:nil];
+
+ fontFamilyRegex = [NSRegularExpression
+ regularExpressionWithPattern:@"font-family\\s*:\\s*([^;]+)"
+ options:NSRegularExpressionCaseInsensitive
+ error:nil];
+ });
+
+ NSTextCheckingResult *attrMatch =
+ [styleAttrRegex firstMatchInString:params
+ options:0
+ range:NSMakeRange(0, params.length)];
+ if (!attrMatch)
+ return nil;
+
+ NSString *css = [params substringWithRange:[attrMatch rangeAtIndex:1]];
+ CustomStyleData *data = [[CustomStyleData alloc] init];
+
+ NSTextCheckingResult *fgMatch =
+ [fgRegex firstMatchInString:css
+ options:0
+ range:NSMakeRange(0, css.length)];
+ if (fgMatch) {
+ data.foregroundColor = [UIColor
+ colorFromCSSString:[css substringWithRange:[fgMatch rangeAtIndex:1]]];
+ }
+
+ NSTextCheckingResult *bgMatch =
+ [bgRegex firstMatchInString:css
+ options:0
+ range:NSMakeRange(0, css.length)];
+ if (bgMatch) {
+ data.backgroundColor = [UIColor
+ colorFromCSSString:[css substringWithRange:[bgMatch rangeAtIndex:1]]];
+ }
+
+ NSTextCheckingResult *fontSizeMatch =
+ [fontSizeRegex firstMatchInString:css
+ options:0
+ range:NSMakeRange(0, css.length)];
+ if (fontSizeMatch) {
+ NSString *fontSizeString =
+ [css substringWithRange:[fontSizeMatch rangeAtIndex:1]];
+ double parsedFontSize = [fontSizeString doubleValue];
+ if (parsedFontSize > 0) {
+ data.fontSize = @(parsedFontSize);
+ }
+ }
+
+ NSTextCheckingResult *fontFamilyMatch =
+ [fontFamilyRegex firstMatchInString:css
+ options:0
+ range:NSMakeRange(0, css.length)];
+ if (fontFamilyMatch) {
+ NSString *fontFamilyString = [[css
+ substringWithRange:[fontFamilyMatch rangeAtIndex:1]]
+ stringByTrimmingCharactersInSet:[NSCharacterSet
+ whitespaceAndNewlineCharacterSet]];
+
+ // If font family contains a comma, use the first part e.g. "Nunito,
+ // sans-serif" -> "Nunito"
+ NSRange commaRange = [fontFamilyString rangeOfString:@","];
+ if (commaRange.location != NSNotFound) {
+ fontFamilyString =
+ [[fontFamilyString substringToIndex:commaRange.location]
+ stringByTrimmingCharactersInSet:
+ [NSCharacterSet whitespaceAndNewlineCharacterSet]];
+ }
+ if (([fontFamilyString hasPrefix:@"'"] &&
+ [fontFamilyString hasSuffix:@"'"]) ||
+ ([fontFamilyString hasPrefix:@"\""] &&
+ [fontFamilyString hasSuffix:@"\""])) {
+ fontFamilyString = [fontFamilyString
+ substringWithRange:NSMakeRange(1, fontFamilyString.length - 2)];
+ }
+ if (fontFamilyString.length > 0) {
+ data.fontFamily = fontFamilyString;
+ }
+ }
+
+ return data.isEmpty ? nil : data;
+}
+
+ (void)checkForAlignments:(NSArray *)tagData
plainText:(NSMutableString *)plainText
foundAlignments:(NSMutableArray *)foundAlignments
diff --git a/ios/inputHtmlParser/InputHtmlParser.mm b/ios/inputHtmlParser/InputHtmlParser.mm
index 8dec7819e..18011cd92 100644
--- a/ios/inputHtmlParser/InputHtmlParser.mm
+++ b/ios/inputHtmlParser/InputHtmlParser.mm
@@ -182,6 +182,12 @@ - (void)applyProcessedStyles:(NSArray *)processedStyles
}
}
}
+ } else if ([styleType isEqualToNumber:@([CustomStyle getType])]) {
+ CustomStyle *customStyle = (CustomStyle *)baseStyle;
+ [customStyle setCustomStyleData:stylePair.styleValue
+ range:styleRange
+ withTyping:shouldAddTypingAttr
+ withDirtyRange:YES];
} else {
[baseStyle add:styleRange
withTyping:shouldAddTypingAttr
diff --git a/ios/interfaces/CustomStyleData.h b/ios/interfaces/CustomStyleData.h
new file mode 100644
index 000000000..c6ac30e40
--- /dev/null
+++ b/ios/interfaces/CustomStyleData.h
@@ -0,0 +1,17 @@
+#pragma once
+#import
+
+@interface CustomStyleData : NSObject
+
+@property(nonatomic, strong, nullable) UIColor *foregroundColor;
+@property(nonatomic, strong, nullable) UIColor *backgroundColor;
+@property(nonatomic, strong, nullable) NSNumber *fontSize;
+@property(nonatomic, copy, nullable) NSString *fontFamily;
+
+- (BOOL)isEmpty;
+
+// Applies a partial update from a dict. A key absent from the dict leaves the
+// field unchanged; NSNull value clears it.
+- (void)mergeFromDict:(NSDictionary *)dict;
+
+@end
diff --git a/ios/interfaces/CustomStyleData.mm b/ios/interfaces/CustomStyleData.mm
new file mode 100644
index 000000000..cfdd0dc81
--- /dev/null
+++ b/ios/interfaces/CustomStyleData.mm
@@ -0,0 +1,69 @@
+#import "CustomStyleData.h"
+
+@implementation CustomStyleData
+
+- (BOOL)isEmpty {
+ return _foregroundColor == nil && _backgroundColor == nil &&
+ _fontSize == nil && _fontFamily == nil;
+}
+
+- (void)mergeFromDict:(NSDictionary *)dict {
+ id fgVal = dict[@"foregroundColor"];
+ if (fgVal != nil) {
+ self.foregroundColor =
+ [fgVal isKindOfClass:[UIColor class]] ? (UIColor *)fgVal : nil;
+ }
+ id bgVal = dict[@"backgroundColor"];
+ if (bgVal != nil) {
+ self.backgroundColor =
+ [bgVal isKindOfClass:[UIColor class]] ? (UIColor *)bgVal : nil;
+ }
+ id fsVal = dict[@"fontSize"];
+ if (fsVal != nil) {
+ if ([fsVal isKindOfClass:[NSNumber class]] &&
+ [(NSNumber *)fsVal doubleValue] > 0) {
+ self.fontSize = (NSNumber *)fsVal;
+ } else {
+ self.fontSize = nil;
+ }
+ }
+ id ffVal = dict[@"fontFamily"];
+ if (ffVal != nil) {
+ self.fontFamily =
+ [ffVal isKindOfClass:[NSString class]] ? (NSString *)ffVal : nil;
+ }
+}
+
+- (BOOL)isEqual:(id)object {
+ if (self == object)
+ return YES;
+ if (![object isKindOfClass:[CustomStyleData class]])
+ return NO;
+ CustomStyleData *other = (CustomStyleData *)object;
+ BOOL fgEqual = (_foregroundColor == other.foregroundColor) ||
+ [_foregroundColor isEqual:other.foregroundColor];
+ BOOL bgEqual = (_backgroundColor == other.backgroundColor) ||
+ [_backgroundColor isEqual:other.backgroundColor];
+ BOOL fsEqual = (_fontSize == other.fontSize) ||
+ (_fontSize != nil && other.fontSize != nil &&
+ [_fontSize isEqualToNumber:other.fontSize]);
+ BOOL ffEqual = (_fontFamily == other.fontFamily) ||
+ [_fontFamily isEqualToString:other.fontFamily];
+ return fgEqual && bgEqual && fsEqual && ffEqual;
+}
+
+- (NSUInteger)hash {
+ return [_foregroundColor hash] ^ [_backgroundColor hash] ^ [_fontSize hash] ^
+ [_fontFamily hash];
+}
+
+- (id)copyWithZone:(NSZone *)zone {
+ CustomStyleData *copy = [[CustomStyleData allocWithZone:zone] init];
+ copy.foregroundColor = self.foregroundColor;
+ copy.backgroundColor = self.backgroundColor;
+ copy.fontSize = self.fontSize;
+ copy.fontFamily = self.fontFamily;
+ return copy;
+}
+
+@end
diff --git a/ios/interfaces/EnrichedTextStyleHeaders.h b/ios/interfaces/EnrichedTextStyleHeaders.h
index 008f0fce4..6d1a73af8 100644
--- a/ios/interfaces/EnrichedTextStyleHeaders.h
+++ b/ios/interfaces/EnrichedTextStyleHeaders.h
@@ -34,6 +34,9 @@
@interface EnrichedTextH6Style : H6Style
@end
+@interface EnrichedTextCustomStyle : CustomStyle
+@end
+
@interface EnrichedTextBlockQuoteStyle : BlockQuoteStyle
@end
diff --git a/ios/interfaces/StyleBase.mm b/ios/interfaces/StyleBase.mm
index 35b501556..d6056123c 100644
--- a/ios/interfaces/StyleBase.mm
+++ b/ios/interfaces/StyleBase.mm
@@ -45,7 +45,9 @@ - (BOOL)appliesStylingToTyping {
return NO;
}
-// determines the order in which the styles are applied
+// Determines the order in which the styles are applied.
+// 0 = paragraph, 1 = custom, 2 = inline (default), 3 = italic.
+// Styles are applied in ascending priority order so inline styles win.
- (NSInteger)stylePriority {
return [self isParagraph] ? 0 : 2;
}
diff --git a/ios/interfaces/StyleHeaders.h b/ios/interfaces/StyleHeaders.h
index aca5d4a3c..c664429f0 100644
--- a/ios/interfaces/StyleHeaders.h
+++ b/ios/interfaces/StyleHeaders.h
@@ -1,4 +1,5 @@
#pragma once
+#import "CustomStyleData.h"
#import "ImageData.h"
#import "LinkData.h"
#import "MentionParams.h"
@@ -6,6 +7,16 @@
@class EnrichedConfig;
+@interface CustomStyle : StyleBase
+- (void)applyStyleFromDict:(NSDictionary *)dict selectedRange:(NSRange)range;
+- (void)setCustomStyleData:(CustomStyleData *)data
+ range:(NSRange)range
+ withTyping:(BOOL)withTyping
+ withDirtyRange:(BOOL)withDirtyRange;
+- (CustomStyleData *_Nullable)getCustomStyleDataInRange:(NSRange)range;
+- (CustomStyleData *_Nullable)getStoredCustomStyleDataAt:(NSUInteger)location;
+@end
+
@interface BoldStyle : StyleBase
@end
diff --git a/ios/interfaces/StyleTypeEnum.h b/ios/interfaces/StyleTypeEnum.h
index 701d79eaf..a5c163fc8 100644
--- a/ios/interfaces/StyleTypeEnum.h
+++ b/ios/interfaces/StyleTypeEnum.h
@@ -15,6 +15,7 @@ typedef NS_ENUM(NSInteger, StyleType) {
H4,
H5,
H6,
+ Custom,
Link,
Mention,
Image,
diff --git a/ios/styles/CustomStyle.mm b/ios/styles/CustomStyle.mm
new file mode 100644
index 000000000..1ba7e4099
--- /dev/null
+++ b/ios/styles/CustomStyle.mm
@@ -0,0 +1,329 @@
+#import "EnrichedTextInputView.h"
+#import "extensions/ColorExtension.h"
+#import "extensions/FontExtension.h"
+#import "interfaces/CustomStyleData.h"
+#import "interfaces/StyleHeaders.h"
+#import "utils/RangeUtils.h"
+#import
+
+static NSString *const CustomStyleAttributeName = @"EnrichedCustomStyle";
+
+@implementation CustomStyle
+
++ (StyleType)getType {
+ return Custom;
+}
+
+- (NSString *)getKey {
+ return CustomStyleAttributeName;
+}
+
+- (BOOL)isParagraph {
+ return NO;
+}
+
+- (NSInteger)stylePriority {
+ return 1;
+}
+
+- (BOOL)isFontFamilyAvailable:(NSString *)family {
+ return [UIFont fontNamesForFamilyName:family].count > 0 ||
+ [UIFont fontWithName:family size:UIFont.systemFontSize] != nil;
+}
+
+- (UIFont *)resolveFont:(UIFont *)font forData:(CustomStyleData *)data {
+ UIFont *resolvedFont = font ?: [self.host.config primaryFont];
+ UIFont *originalFont = resolvedFont;
+
+ if (data.fontFamily.length > 0) {
+ // if the font family isn't available, we stick to the current font
+ if ([self isFontFamilyAvailable:data.fontFamily]) {
+ resolvedFont = [RCTFont updateFont:resolvedFont
+ withFamily:data.fontFamily
+ size:0
+ weight:nullptr
+ style:nullptr
+ variant:nullptr
+ scaleMultiplier:1];
+ resolvedFont = [resolvedFont withFontTraits:originalFont];
+ } else {
+ NSLog(@"[EnrichedTextInput] Font family '%@' not found, keeping the "
+ @"current font.",
+ data.fontFamily);
+ }
+ }
+
+ if (data.fontSize != nil) {
+ CGFloat pointSize =
+ [self.host.config scaledFontSizeForValue:[data.fontSize doubleValue]];
+ resolvedFont = [resolvedFont setSize:pointSize];
+ }
+
+ return resolvedFont;
+}
+
+- (BOOL)appliesStylingToTyping {
+ CustomStyleData *data =
+ [self getCustomStyleDataAt:self.host.textView.selectedRange.location];
+ return data.fontSize != nil || data.fontFamily.length > 0;
+}
+
+- (void)applyStylingToTypingAttrs:(NSMutableDictionary *)attributes {
+ CustomStyleData *data =
+ [self getCustomStyleDataAt:self.host.textView.selectedRange.location];
+ if (data.fontSize == nil && data.fontFamily.length == 0)
+ return;
+
+ UIFont *currentFont = attributes[NSFontAttributeName];
+ attributes[NSFontAttributeName] = [self resolveFont:currentFont forData:data];
+}
+
+- (BOOL)styleCondition:(id)value range:(NSRange)range {
+ if (![value isKindOfClass:[CustomStyleData class]])
+ return NO;
+ return ![(CustomStyleData *)value isEmpty];
+}
+
+- (void)applyStyling:(NSRange)range {
+ if (range.length == 0)
+ return;
+
+ NSUInteger storageLength = self.host.textView.textStorage.length;
+ if (storageLength == 0)
+ return;
+
+ NSRange safeRange = NSMakeRange(
+ range.location, MIN(range.length, storageLength - range.location));
+
+ // Enumerate each sub-range that carries its own CustomStyleData so that
+ // characters with different data values each get the correct visual attrs.
+ [self.host.textView.textStorage
+ enumerateAttribute:CustomStyleAttributeName
+ inRange:safeRange
+ options:0
+ usingBlock:^(id value, NSRange subRange, BOOL *stop) {
+ if (![value isKindOfClass:[CustomStyleData class]])
+ return;
+ CustomStyleData *data = (CustomStyleData *)value;
+ if (data.isEmpty)
+ return;
+
+ NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
+ if (data.foregroundColor != nil) {
+ attrs[NSForegroundColorAttributeName] = data.foregroundColor;
+ attrs[NSUnderlineColorAttributeName] = data.foregroundColor;
+ attrs[NSStrikethroughColorAttributeName] =
+ data.foregroundColor;
+ }
+ if (data.backgroundColor != nil) {
+ attrs[NSBackgroundColorAttributeName] =
+ [data.backgroundColor colorWithResolvedAlpha];
+ }
+
+ BOOL hasFontOverride =
+ data.fontSize != nil || data.fontFamily.length > 0;
+
+ // Skip newline characters so background color doesn't bleed.
+ NSArray *nonNewlineRanges =
+ [RangeUtils getNonNewlineRangesIn:self.host.textView
+ range:subRange];
+ for (NSValue *rangeVal in nonNewlineRanges) {
+ NSRange applyRange = [rangeVal rangeValue];
+ if (attrs.count > 0) {
+ [self.host.textView.textStorage addAttributes:attrs
+ range:applyRange];
+ }
+ if (hasFontOverride) {
+ [self.host.textView.textStorage
+ enumerateAttribute:NSFontAttributeName
+ inRange:applyRange
+ options:0
+ usingBlock:^(id _Nullable value,
+ NSRange fontRange,
+ BOOL *_Nonnull stop) {
+ UIFont *font = (UIFont *)value;
+ UIFont *newFont = [self resolveFont:font
+ forData:data];
+ [self.host.textView.textStorage
+ addAttribute:NSFontAttributeName
+ value:newFont
+ range:fontRange];
+ }];
+ }
+ }
+ }];
+}
+
+- (void)reapplyFromStylePair:(StylePair *)pair {
+ NSRange range = [pair.rangeValue rangeValue];
+ CustomStyleData *data = (CustomStyleData *)pair.styleValue;
+ if (data == nil || data.isEmpty)
+ return;
+ [self.host.textView.textStorage addAttribute:CustomStyleAttributeName
+ value:data
+ range:range];
+}
+
+- (AttributeEntry *)getEntryIfPresent:(NSRange)range {
+ CustomStyleData *data = [self getCustomStyleDataInRange:range];
+ if (data == nil || data.isEmpty)
+ return nullptr;
+
+ AttributeEntry *entry = [[AttributeEntry alloc] init];
+ entry.key = CustomStyleAttributeName;
+ entry.value = data;
+ return entry;
+}
+
+// MARK: - Public non-standard methods
+
+- (void)setCustomStyleData:(CustomStyleData *)data
+ range:(NSRange)range
+ withTyping:(BOOL)withTyping
+ withDirtyRange:(BOOL)withDirtyRange {
+ if (range.length > 0) {
+ if (data == nil || data.isEmpty) {
+ [self remove:range withDirtyRange:withDirtyRange];
+ return;
+ }
+ [self.host.textView.textStorage addAttribute:CustomStyleAttributeName
+ value:data
+ range:range];
+ if (withDirtyRange) {
+ [self.host.attributesManager addDirtyRange:range];
+ }
+ }
+
+ if (withTyping) {
+ if (data == nil || data.isEmpty) {
+ [self removeTyping];
+ } else {
+ NSMutableDictionary *newTypingAttrs =
+ [self.host.textView.typingAttributes mutableCopy];
+ newTypingAttrs[CustomStyleAttributeName] = data;
+ self.host.textView.typingAttributes = newTypingAttrs;
+ }
+ }
+}
+
+- (CustomStyleData *_Nullable)getCustomStyleDataAt:(NSUInteger)location {
+ NSRange selectedRange = self.host.textView.selectedRange;
+ if (self.host.textView.isEditable && selectedRange.length == 0 &&
+ selectedRange.location == location) {
+ id typingValue =
+ self.host.textView.typingAttributes[CustomStyleAttributeName];
+ if ([typingValue isKindOfClass:[CustomStyleData class]])
+ return (CustomStyleData *)typingValue;
+ return nil;
+ }
+
+ return [self getStoredCustomStyleDataAt:location];
+}
+
+- (CustomStyleData *_Nullable)getCustomStyleDataInRange:(NSRange)range {
+ if (range.length == 0)
+ return [self getCustomStyleDataAt:range.location];
+
+ NSMutableSet *foregroundColors = [NSMutableSet set];
+ NSMutableSet *backgroundColors = [NSMutableSet set];
+ NSMutableSet *fontSizes = [NSMutableSet set];
+ NSMutableSet *fontFamilies = [NSMutableSet set];
+
+ [self.host.textView.textStorage
+ enumerateAttribute:CustomStyleAttributeName
+ inRange:range
+ options:0
+ usingBlock:^(id value, NSRange subRange, BOOL *stop) {
+ CustomStyleData *data =
+ [value isKindOfClass:[CustomStyleData class]]
+ ? (CustomStyleData *)value
+ : nil;
+ [foregroundColors
+ addObject:data.foregroundColor ?: (id)[NSNull null]];
+ [backgroundColors
+ addObject:data.backgroundColor ?: (id)[NSNull null]];
+ [fontSizes addObject:data.fontSize ?: (id)[NSNull null]];
+ [fontFamilies addObject:data.fontFamily ?: (id)[NSNull null]];
+ }];
+
+ CustomStyleData *data = [[CustomStyleData alloc] init];
+ data.foregroundColor = [self getSingleValueFromSet:foregroundColors];
+ data.backgroundColor = [self getSingleValueFromSet:backgroundColors];
+ data.fontSize = [self getSingleValueFromSet:fontSizes];
+ data.fontFamily = [self getSingleValueFromSet:fontFamilies];
+ if (data.isEmpty)
+ return nil;
+
+ return data;
+}
+
+// Reads CustomStyleData directly from textStorage, bypassing typingAttributes.
+- (CustomStyleData *_Nullable)getStoredCustomStyleDataAt:(NSUInteger)location {
+ NSUInteger length = self.host.textView.textStorage.length;
+ if (length == 0)
+ return nil;
+ NSUInteger searchLocation = (location >= length) ? length - 1 : location;
+ id value = [self.host.textView.textStorage attribute:CustomStyleAttributeName
+ atIndex:searchLocation
+ longestEffectiveRange:nil
+ inRange:NSMakeRange(0, length)];
+ if (![value isKindOfClass:[CustomStyleData class]])
+ return nil;
+ return (CustomStyleData *)value;
+}
+
+- (void)applyStyleFromDict:(NSDictionary *)dict selectedRange:(NSRange)range {
+ BOOL withTyping = range.length == 0;
+
+ if (!withTyping) {
+ // Enumerate each existing sub-range and merge the partial update into its
+ // own data so per-character differences (e.g. fg color on some chars) are
+ // preserved when only one field (e.g. bg color) is being changed.
+ NSUInteger storageLength = self.host.textView.textStorage.length;
+ if (storageLength == 0)
+ return;
+
+ NSRange safeRange = NSMakeRange(
+ range.location, MIN(range.length, storageLength - range.location));
+
+ [self.host.textView.textStorage
+ enumerateAttribute:CustomStyleAttributeName
+ inRange:safeRange
+ options:0
+ usingBlock:^(id value, NSRange subRange, BOOL *stop) {
+ CustomStyleData *existing =
+ [value isKindOfClass:[CustomStyleData class]]
+ ? (CustomStyleData *)value
+ : nil;
+ CustomStyleData *merged =
+ existing != nil ? [existing copy]
+ : [[CustomStyleData alloc] init];
+ [merged mergeFromDict:dict];
+ [self setCustomStyleData:merged
+ range:subRange
+ withTyping:NO
+ withDirtyRange:YES];
+ }];
+ } else {
+ // Cursor only: merge into current data and update typing attributes.
+ CustomStyleData *existing = [self getCustomStyleDataAt:range.location];
+ CustomStyleData *merged =
+ existing != nil ? [existing copy] : [[CustomStyleData alloc] init];
+ [merged mergeFromDict:dict];
+ [self setCustomStyleData:merged
+ range:range
+ withTyping:YES
+ withDirtyRange:NO];
+ [self.host.attributesManager
+ didRemoveTypingAttribute:CustomStyleAttributeName];
+ }
+}
+
+- (id _Nullable)getSingleValueFromSet:(NSSet *)values {
+ if (values.count != 1)
+ return nil;
+ id value = values.anyObject;
+ return value == [NSNull null] ? nil : value;
+}
+
+@end
diff --git a/ios/styles/EnrichedTextStyles.mm b/ios/styles/EnrichedTextStyles.mm
index b7a1e40b8..8837c6744 100644
--- a/ios/styles/EnrichedTextStyles.mm
+++ b/ios/styles/EnrichedTextStyles.mm
@@ -33,6 +33,9 @@ @implementation EnrichedTextH5Style
@implementation EnrichedTextH6Style
@end
+@implementation EnrichedTextCustomStyle
+@end
+
@implementation EnrichedTextBlockQuoteStyle
@end
diff --git a/ios/textHtmlParser/TextHtmlParser.mm b/ios/textHtmlParser/TextHtmlParser.mm
index 679cb3dc7..d8287bec4 100644
--- a/ios/textHtmlParser/TextHtmlParser.mm
+++ b/ios/textHtmlParser/TextHtmlParser.mm
@@ -124,6 +124,12 @@ - (void)applyProcessedStyles:(NSArray *_Nonnull)processedStyles {
}
}
}
+ } else if ([styleType isEqualToNumber:@([CustomStyle getType])]) {
+ CustomStyle *customStyle = (CustomStyle *)style;
+ [customStyle setCustomStyleData:stylePair.styleValue
+ range:styleRange
+ withTyping:NO
+ withDirtyRange:NO];
} else {
[style add:styleRange withTyping:NO withDirtyRange:NO];
}
@@ -154,7 +160,7 @@ - (void)applyProcessedStyles:(NSArray *_Nonnull)processedStyles {
}
}
- // Respect the styling priority
+ // Respect the inline styling priority
NSArray *sortedInlineApply =
[pendingInlineApply sortedArrayBySortKey:^NSInteger(NSArray *entry) {
return [((StyleBase *)entry[0]) stylePriority];
diff --git a/ios/utils/StyleUtils.mm b/ios/utils/StyleUtils.mm
index 167a32df5..85d069e03 100644
--- a/ios/utils/StyleUtils.mm
+++ b/ios/utils/StyleUtils.mm
@@ -91,7 +91,8 @@ + (NSDictionary *)conflictMap {
@([CheckboxListStyle getType])
],
@([ImageStyle getType]) :
- @[ @([LinkStyle getType]), @([MentionStyle getType]) ]
+ @[ @([LinkStyle getType]), @([MentionStyle getType]) ],
+ @([CustomStyle getType]) : @[]
};
}
@@ -123,23 +124,35 @@ + (NSDictionary *)blockingMap {
@([AlignmentStyle getType]) : @[],
@([BlockQuoteStyle getType]) : @[],
@([CodeBlockStyle getType]) : @[],
- @([ImageStyle getType]) : @[ @([InlineCodeStyle getType]) ]
+ @([ImageStyle getType]) : @[ @([InlineCodeStyle getType]) ],
+ @([CustomStyle getType]) : @[]
};
}
+ (NSDictionary *)stylesDictForHost:(id)host
isInput:(BOOL)isInput {
NSArray *baseClasses = @[
- [BoldStyle class], [ItalicStyle class],
- [UnderlineStyle class], [StrikethroughStyle class],
- [InlineCodeStyle class], [LinkStyle class],
- [MentionStyle class], [H1Style class],
- [H2Style class], [H3Style class],
- [H4Style class], [H5Style class],
- [H6Style class], [UnorderedListStyle class],
- [OrderedListStyle class], [CheckboxListStyle class],
- [AlignmentStyle class], [BlockQuoteStyle class],
- [CodeBlockStyle class], [ImageStyle class]
+ [BoldStyle class],
+ [ItalicStyle class],
+ [UnderlineStyle class],
+ [StrikethroughStyle class],
+ [InlineCodeStyle class],
+ [LinkStyle class],
+ [MentionStyle class],
+ [H1Style class],
+ [H2Style class],
+ [H3Style class],
+ [H4Style class],
+ [H5Style class],
+ [H6Style class],
+ [CustomStyle class],
+ [UnorderedListStyle class],
+ [OrderedListStyle class],
+ [CheckboxListStyle class],
+ [AlignmentStyle class],
+ [BlockQuoteStyle class],
+ [CodeBlockStyle class],
+ [ImageStyle class]
];
NSArray *viewerClasses = @[
@@ -156,6 +169,7 @@ + (NSDictionary *)stylesDictForHost:(id)host
[EnrichedTextH4Style class],
[EnrichedTextH5Style class],
[EnrichedTextH6Style class],
+ [EnrichedTextCustomStyle class],
[EnrichedTextUnorderedListStyle class],
[EnrichedTextOrderedListStyle class],
[EnrichedTextCheckboxListStyle class],
diff --git a/src/native/EnrichedTextInput.tsx b/src/native/EnrichedTextInput.tsx
index cfe12104c..67817c1c9 100644
--- a/src/native/EnrichedTextInput.tsx
+++ b/src/native/EnrichedTextInput.tsx
@@ -14,13 +14,15 @@ import EnrichedTextInputNativeComponent, {
type OnMentionDetectedInternal,
type OnRequestHtmlResultEvent,
} from '../spec/EnrichedTextInputNativeComponent';
-import type {
- HostComponent,
- HostInstance,
- MeasureInWindowOnSuccessCallback,
- MeasureLayoutOnSuccessCallback,
- MeasureOnSuccessCallback,
- NativeSyntheticEvent,
+import {
+ processColor,
+ type ColorValue,
+ type HostComponent,
+ type HostInstance,
+ type MeasureInWindowOnSuccessCallback,
+ type MeasureLayoutOnSuccessCallback,
+ type MeasureOnSuccessCallback,
+ type NativeSyntheticEvent,
} from 'react-native';
import { normalizeHtmlStyle } from '../utils/normalizeHtmlStyle';
import { toNativeRegexConfig } from '../utils/regexParser';
@@ -39,6 +41,19 @@ const warnMentionIndicators = (indicator: string) => {
);
};
+const getSafeColorInt = (
+ color: ColorValue | null | undefined
+): number | null => {
+ if (color == null) return null;
+
+ const processed = processColor(color);
+ if (typeof processed === 'number') {
+ return processed;
+ }
+
+ return null;
+};
+
type ComponentType = ComponentRef>;
type HtmlRequest = {
@@ -279,6 +294,32 @@ export const EnrichedTextInput = ({
) => {
Commands.setTextAlignment(nullthrows(nativeRef.current), alignment);
},
+ setStyle: (customStyle: {
+ foregroundColor?: ColorValue | null;
+ backgroundColor?: ColorValue | null;
+ fontSize?: number | null;
+ fontFamily?: string | null;
+ }) => {
+ const payload: {
+ foregroundColor?: number | null;
+ backgroundColor?: number | null;
+ fontSize?: number | null;
+ fontFamily?: string | null;
+ } = {};
+ if (customStyle.foregroundColor !== undefined) {
+ payload.foregroundColor = getSafeColorInt(customStyle.foregroundColor);
+ }
+ if (customStyle.backgroundColor !== undefined) {
+ payload.backgroundColor = getSafeColorInt(customStyle.backgroundColor);
+ }
+ if (customStyle.fontSize !== undefined) {
+ payload.fontSize = customStyle.fontSize;
+ }
+ if (customStyle.fontFamily !== undefined) {
+ payload.fontFamily = customStyle.fontFamily;
+ }
+ Commands.setStyle(nullthrows(nativeRef.current), JSON.stringify(payload));
+ },
}));
const handleMentionEvent = (e: NativeSyntheticEvent) => {
diff --git a/src/spec/EnrichedTextInputNativeComponent.ts b/src/spec/EnrichedTextInputNativeComponent.ts
index c5d2e61e3..0f90daaf9 100644
--- a/src/spec/EnrichedTextInputNativeComponent.ts
+++ b/src/spec/EnrichedTextInputNativeComponent.ts
@@ -122,6 +122,12 @@ export interface OnChangeStateEvent {
isBlocking: boolean;
};
alignment: string;
+ customStyle: {
+ foregroundColor: string;
+ backgroundColor: string;
+ fontSize: CodegenTypes.Float;
+ fontFamily: string;
+ };
}
export interface OnLinkDetected {
@@ -278,6 +284,12 @@ export interface OnContextMenuItemPressEvent {
isBlocking: boolean;
};
alignment: string;
+ customStyle: {
+ foregroundColor: string;
+ backgroundColor: string;
+ fontSize: CodegenTypes.Float;
+ fontFamily: string;
+ };
};
}
@@ -482,6 +494,10 @@ interface NativeCommands {
viewRef: React.ElementRef,
alignment: string
) => void;
+ setStyle: (
+ viewRef: React.ElementRef,
+ styleJSON: string
+ ) => void;
}
export const Commands: NativeCommands = codegenNativeCommands({
@@ -516,6 +532,7 @@ export const Commands: NativeCommands = codegenNativeCommands({
'addMention',
'requestHTML',
'setTextAlignment',
+ 'setStyle',
],
});
diff --git a/src/types.ts b/src/types.ts
index d478b123c..fbe606487 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -389,6 +389,12 @@ export interface OnChangeStateEvent {
isBlocking: boolean;
};
alignment: string;
+ customStyle: {
+ foregroundColor: string;
+ backgroundColor: string;
+ fontSize: number;
+ fontFamily: string;
+ };
}
export interface OnLinkDetected {
@@ -582,6 +588,22 @@ export interface EnrichedTextInputInstance {
setTextAlignment: (
alignment: 'left' | 'center' | 'right' | 'justify' | 'auto'
) => void;
+
+ /**
+ * Sets the custom style (text and background colors, font size, font family) for
+ * the current text selection.
+ *
+ * @param customStyle - An object specifying the styles to apply.
+ * Provide `foregroundColor` to change the text color, `backgroundColor` to change
+ * the text highlight color, `fontSize` to change the font size, and `fontFamily`
+ * to change the font family. Passing `null` for a property will remove that specific style.
+ */
+ setStyle: (customStyle: {
+ foregroundColor?: ColorValue | null;
+ backgroundColor?: ColorValue | null;
+ fontSize?: number | null;
+ fontFamily?: string | null;
+ }) => void;
}
export interface ContextMenuItem {
diff --git a/src/web/EnrichedText.css b/src/web/EnrichedText.css
index 32181dad2..b0acfb1bb 100644
--- a/src/web/EnrichedText.css
+++ b/src/web/EnrichedText.css
@@ -52,6 +52,9 @@
padding: 0;
line-height: inherit;
vertical-align: baseline;
+ box-shadow:
+ 0 -1px 0 var(--et-code-bg-color),
+ 0 0 0 var(--et-code-bg-color);
}
.eti-editor h1,
diff --git a/src/web/EnrichedText.tsx b/src/web/EnrichedText.tsx
index 1786c5a4f..cb864a52d 100644
--- a/src/web/EnrichedText.tsx
+++ b/src/web/EnrichedText.tsx
@@ -1,5 +1,6 @@
import {
memo,
+ useCallback,
useImperativeHandle,
useMemo,
useRef,
@@ -27,6 +28,8 @@ import { adaptWebToNativeEvent } from './nativeMappers/adaptWebToNativeEvent';
import { useStableRef } from './utils/useStableRef';
import { assertBrowserEnvironment } from './utils/assertBrowserEnvironment';
import { useOrderedListMarkerWidth } from './htmlExtensions/useOrderedListMarkerWidth';
+import { enrichedStyleToCSSVariables } from './styleConversion/enrichedStyleToCSSVariables';
+import { useBaseFontFamily } from './utils/useBaseFontFamily';
export const EnrichedText = memo(
({
@@ -87,12 +90,19 @@ export const EnrichedText = memo(
[style]
);
+ const getContainerElement = useCallback(() => containerRef.current, []);
+ const baseFontFamily = useBaseFontFamily(
+ getContainerElement,
+ textStyle.fontFamily
+ );
+
const cssVars = useMemo(
() => ({
...enrichedTextHtmlStyleToCSSVariables(resolvedHtmlStyle),
...INLINE_IMAGE_CSS_VARIABLES,
+ ...enrichedStyleToCSSVariables({ fontFamily: baseFontFamily }),
}),
- [resolvedHtmlStyle]
+ [resolvedHtmlStyle, baseFontFamily]
);
const themingStyle = useMemo(
diff --git a/src/web/EnrichedTextInput.tsx b/src/web/EnrichedTextInput.tsx
index 1002b647c..c166059a1 100644
--- a/src/web/EnrichedTextInput.tsx
+++ b/src/web/EnrichedTextInput.tsx
@@ -42,6 +42,7 @@ import { ENRICHED_TEXT_INPUT_DEFAULT_PROPS } from '../utils/EnrichedTextInputDef
import { enrichedInputStyleToCSSProperties } from './styleConversion/enrichedInputStyleToCSSProperties';
import { enrichedInputThemingToCSSProperties } from './styleConversion/enrichedThemingToCSSProperties';
import { buildMentionRulesCSS } from './styleConversion/buildMentionRulesCSS';
+import { enrichedStyleToCSSVariables } from './styleConversion/enrichedStyleToCSSVariables';
import {
htmlStyleToCSSVariables,
mergeWithDefaultHtmlStyle,
@@ -63,6 +64,7 @@ import { EnrichedOrderedList } from './formats/EnrichedOrderedList';
import { EnrichedCheckboxItem } from './formats/EnrichedCheckboxItem';
import { EnrichedCheckboxList } from './formats/EnrichedCheckboxList';
import { EnrichedTextAlign } from './formats/EnrichedTextAlign';
+import { EnrichedCustomStyle } from './formats/EnrichedCustomStyle';
import { StripBoldInStyledHeadingsPlugin } from './pmPlugins/StripBoldInStyledHeadingsPlugin';
import { StrictMarksPlugin } from './pmPlugins/StrictMarksPlugin';
import { MergeAdjacentSameKindBlocksPlugin } from './pmPlugins/MergeAdjacentSameKindBlocksPlugin';
@@ -92,6 +94,8 @@ import {
import { assertBrowserEnvironment } from './utils/assertBrowserEnvironment';
import { runSafelyInEditor } from './utils/runSafelyInEditor';
import { useLinkPress } from './htmlExtensions/useLinkPress';
+import { useBaseFontFamily } from './utils/useBaseFontFamily';
+import { normalizeColorValue } from './normalization/colorNormalizer';
function runFocused(
editor: Editor,
@@ -234,6 +238,7 @@ export const EnrichedTextInput = ({
EnrichedOrderedList,
EnrichedCheckboxList,
EnrichedTextAlign,
+ EnrichedCustomStyle,
StripMarksInCodeBlockPlugin,
StripMarksOnImagePlugin,
StripBoldInStyledHeadingsPlugin.configure({
@@ -433,6 +438,24 @@ export const EnrichedTextInput = ({
runFocused(editor, (c) => c.setTextAlign(alignment));
}
},
+ setStyle: (customStyle) => {
+ runFocused(editor, (c) =>
+ c.setCustomStyle({
+ ...('foregroundColor' in customStyle && {
+ foregroundColor: normalizeColorValue(customStyle.foregroundColor),
+ }),
+ ...('backgroundColor' in customStyle && {
+ backgroundColor: normalizeColorValue(customStyle.backgroundColor),
+ }),
+ ...('fontSize' in customStyle && {
+ fontSize: customStyle.fontSize,
+ }),
+ ...('fontFamily' in customStyle && {
+ fontFamily: customStyle.fontFamily,
+ }),
+ })
+ );
+ },
}),
[editor, mentionIndicatorsRef, useHtmlNormalizerRef, sanitizationConfigRef]
);
@@ -442,9 +465,18 @@ export const EnrichedTextInput = ({
[scrollEnabled, style]
);
+ const getEditorElement = useCallback(() => editor.view.dom, [editor]);
+ const baseFontFamily = useBaseFontFamily(
+ getEditorElement,
+ editorStyle.fontFamily
+ );
+
const cssVars = useMemo(
- () => htmlStyleToCSSVariables(resolvedHtmlStyle),
- [resolvedHtmlStyle]
+ () => ({
+ ...htmlStyleToCSSVariables(resolvedHtmlStyle),
+ ...enrichedStyleToCSSVariables({ fontFamily: baseFontFamily }),
+ }),
+ [resolvedHtmlStyle, baseFontFamily]
);
const themingStyle = useMemo(
diff --git a/src/web/formats/EnrichedCustomStyle.ts b/src/web/formats/EnrichedCustomStyle.ts
new file mode 100644
index 000000000..b64ddbcf3
--- /dev/null
+++ b/src/web/formats/EnrichedCustomStyle.ts
@@ -0,0 +1,256 @@
+import { Mark } from '@tiptap/core';
+import type { Attrs } from '@tiptap/pm/model';
+import { withBaseFontFamilyFallback } from '../styleConversion/enrichedStyleToCSSVariables';
+
+type CustomStyleAttrs = {
+ foregroundColor?: string | null;
+ backgroundColor?: string | null;
+ fontSize?: number | null;
+ fontFamily?: string | null;
+};
+
+function normalizeFontFamily(value: string | null | undefined): string | null {
+ if (!value) return null;
+
+ let fontFamily = value.trim();
+ const commaIndex = fontFamily.indexOf(',');
+ if (commaIndex !== -1) {
+ fontFamily = fontFamily.slice(0, commaIndex).trim();
+ }
+
+ if (
+ (fontFamily.startsWith("'") && fontFamily.endsWith("'")) ||
+ (fontFamily.startsWith('"') && fontFamily.endsWith('"'))
+ ) {
+ fontFamily = fontFamily.slice(1, -1);
+ }
+
+ return fontFamily.length > 0 ? fontFamily : null;
+}
+
+function resolveFontSize(value: number | null | undefined): number | null {
+ if (value == null || value <= 0) return null;
+ return value;
+}
+
+function parseFontSize(value: string | null | undefined): number | null {
+ if (!value) return null;
+ const trimmed = value.trim();
+ const match = /^([0-9.]+)\s*(?:px)?$/i.exec(trimmed);
+ if (!match) return null;
+ const n = parseFloat(match[1]!);
+ return !Number.isNaN(n) && n > 0 ? n : null;
+}
+
+function buildStyle(attrs: Attrs, withFontFamilyFallback = false): string {
+ const parts: string[] = [];
+ if (attrs.foregroundColor) {
+ parts.push(`color: ${attrs.foregroundColor}`);
+ }
+ if (attrs.backgroundColor) {
+ parts.push(`background-color: ${attrs.backgroundColor}`);
+ }
+ if (attrs.fontSize) {
+ parts.push(`font-size: ${attrs.fontSize}px`);
+ }
+ if (attrs.fontFamily) {
+ const fontFamily = attrs.fontFamily as string;
+ // if the font family contains a space, wrap it in quotes
+ const family = /\s/.test(fontFamily) ? `'${fontFamily}'` : fontFamily;
+ // add a fall-back to the input's inherited font, if needed
+ parts.push(
+ `font-family: ${withFontFamilyFallback ? withBaseFontFamilyFallback(family) : family}`
+ );
+ }
+ return parts.join('; ');
+}
+
+declare module '@tiptap/core' {
+ interface Commands {
+ customStyle: {
+ setCustomStyle: (attrs: CustomStyleAttrs) => ReturnType;
+ };
+ }
+}
+
+export const EnrichedCustomStyle = Mark.create({
+ name: 'customStyle',
+
+ // Priority must be higher than inline marks (code: 1000, mention: 1000) so
+ // the inline marks will override the customStyle.
+ priority: 1001,
+
+ addAttributes() {
+ return {
+ foregroundColor: {
+ default: null,
+ parseHTML: (el: HTMLElement) => el.style.color || null,
+ },
+ backgroundColor: {
+ default: null,
+ parseHTML: (el: HTMLElement) => el.style.backgroundColor || null,
+ },
+ fontSize: {
+ default: null,
+ parseHTML: (el: HTMLElement) => parseFontSize(el.style.fontSize),
+ },
+ fontFamily: {
+ default: null,
+ parseHTML: (el: HTMLElement) =>
+ normalizeFontFamily(el.style.fontFamily),
+ },
+ };
+ },
+
+ parseHTML() {
+ return [
+ {
+ tag: 'span',
+ getAttrs: (el: HTMLElement) => {
+ if (
+ !el.style.color &&
+ !el.style.backgroundColor &&
+ !el.style.fontSize &&
+ !el.style.fontFamily
+ ) {
+ return false;
+ }
+ // let addAttributes handle the actual parsing
+ return null;
+ },
+ },
+ ];
+ },
+
+ renderHTML({ mark }) {
+ return ['span', { style: buildStyle(mark.attrs) }, 0];
+ },
+
+ // The editor DOM gets a style tag's font-family definition with a fallback,
+ // whereas renderHTML stays fallback-free since it's what getHTML() serializes.
+ addMarkView() {
+ return ({ mark }) => {
+ const dom = document.createElement('span');
+ dom.setAttribute('style', buildStyle(mark.attrs, true));
+ return { dom, contentDOM: dom };
+ };
+ },
+
+ addKeyboardShortcuts() {
+ return {
+ Backspace: ({ editor }) => {
+ const { state } = editor;
+ const { selection } = state;
+ if (!selection.empty) return false;
+
+ const { $from } = selection;
+ if (!$from.nodeBefore) return false;
+
+ const markType = state.schema.marks.customStyle;
+ const beforeHasMark = markType?.isInSet($from.nodeBefore.marks);
+ const afterHasMark =
+ $from.nodeAfter && markType?.isInSet($from.nodeAfter.marks);
+
+ if (beforeHasMark || !afterHasMark) return false;
+
+ // Cursor sits right at the plain-styled boundary.
+ // Handle deletion ourselves so Chrome's contenteditable
+ // normalization never touches the styled .
+ const tr = state.tr.delete($from.pos - 1, $from.pos);
+ editor.view.dispatch(tr);
+ return true;
+ },
+ };
+ },
+
+ addCommands() {
+ return {
+ setCustomStyle:
+ (attrs) =>
+ ({ state, tr, dispatch }) => {
+ const markType = state.schema.marks.customStyle;
+ if (!markType) return false;
+
+ // Only the fields explicitly present in `attrs` should override.
+ // Everything else must be preserved per existing inline run, so a
+ // selection spanning multiple fonts/colors keeps its differences.
+ const patch: CustomStyleAttrs = {};
+ if ('foregroundColor' in attrs) {
+ patch.foregroundColor = attrs.foregroundColor ?? null;
+ }
+ if ('backgroundColor' in attrs) {
+ patch.backgroundColor = attrs.backgroundColor ?? null;
+ }
+ if ('fontSize' in attrs) {
+ patch.fontSize = resolveFontSize(attrs.fontSize);
+ }
+ if ('fontFamily' in attrs) {
+ patch.fontFamily = normalizeFontFamily(attrs.fontFamily);
+ }
+
+ const mergeAttrs = (
+ existing: Attrs | undefined
+ ): Required => ({
+ foregroundColor: existing?.foregroundColor || null,
+ backgroundColor: existing?.backgroundColor || null,
+ fontSize: resolveFontSize(existing?.fontSize),
+ fontFamily: normalizeFontFamily(existing?.fontFamily),
+ ...patch,
+ });
+
+ const isEmpty = (a: Required) =>
+ !a.foregroundColor &&
+ !a.backgroundColor &&
+ !a.fontSize &&
+ !a.fontFamily;
+
+ const { selection } = state;
+
+ if (selection.empty) {
+ // Cursor only: merge into the stored (typing) mark.
+ const existing = markType.isInSet(
+ state.storedMarks ?? selection.$from.marks()
+ );
+ const merged = mergeAttrs(existing?.attrs);
+ if (dispatch) {
+ if (isEmpty(merged)) {
+ tr.removeStoredMark(markType);
+ } else {
+ tr.addStoredMark(markType.create(merged));
+ }
+ dispatch(tr);
+ }
+ return true;
+ }
+
+ if (dispatch) {
+ selection.ranges.forEach((range) => {
+ const rFrom = range.$from.pos;
+ const rTo = range.$to.pos;
+ state.doc.nodesBetween(rFrom, rTo, (node, pos) => {
+ // Only inline runs carry the mark; block nodes are skipped so
+ // per-run attributes are preserved. ProseMirror's addMark step
+ // itself skips any inline node that disallows the mark type.
+ if (!node.isInline) {
+ return;
+ }
+ const start = Math.max(pos, rFrom);
+ const end = Math.min(pos + node.nodeSize, rTo);
+ if (start >= end) return;
+
+ const existing = markType.isInSet(node.marks);
+ const merged = mergeAttrs(existing?.attrs);
+
+ tr.removeMark(start, end, markType);
+ if (!isEmpty(merged)) {
+ tr.addMark(start, end, markType.create(merged));
+ }
+ });
+ });
+ dispatch(tr);
+ }
+ return true;
+ },
+ };
+ },
+});
diff --git a/src/web/normalization/colorNormalizer.ts b/src/web/normalization/colorNormalizer.ts
new file mode 100644
index 000000000..7aceb6b61
--- /dev/null
+++ b/src/web/normalization/colorNormalizer.ts
@@ -0,0 +1,238 @@
+import type { ColorValue } from 'react-native';
+
+const CSS_NAMED_COLORS: Record = {
+ aliceblue: '#F0F8FFFF',
+ antiquewhite: '#FAEBD7FF',
+ aqua: '#00FFFFFF',
+ aquamarine: '#7FFFD4FF',
+ azure: '#F0FFFFFF',
+ beige: '#F5F5DCFF',
+ bisque: '#FFE4C4FF',
+ black: '#000000FF',
+ blanchedalmond: '#FFEBCDFF',
+ blue: '#0000FFFF',
+ blueviolet: '#8A2BE2FF',
+ brown: '#A52A2AFF',
+ burlywood: '#DEB887FF',
+ cadetblue: '#5F9EA0FF',
+ chartreuse: '#7FFF00FF',
+ chocolate: '#D2691EFF',
+ coral: '#FF7F50FF',
+ cornflowerblue: '#6495EDFF',
+ cornsilk: '#FFF8DCFF',
+ crimson: '#DC143CFF',
+ cyan: '#00FFFFFF',
+ darkblue: '#00008BFF',
+ darkcyan: '#008B8BFF',
+ darkgoldenrod: '#B8860BFF',
+ darkgray: '#A9A9A9FF',
+ darkgrey: '#A9A9A9FF',
+ darkgreen: '#006400FF',
+ darkkhaki: '#BDB76BFF',
+ darkmagenta: '#8B008BFF',
+ darkolivegreen: '#556B2FFF',
+ darkorange: '#FF8C00FF',
+ darkorchid: '#9932CCFF',
+ darkred: '#8B0000FF',
+ darksalmon: '#E9967AFF',
+ darkseagreen: '#8FBC8FFF',
+ darkslateblue: '#483D8BFF',
+ darkslategray: '#2F4F4FFF',
+ darkslategrey: '#2F4F4FFF',
+ darkturquoise: '#00CED1FF',
+ darkviolet: '#9400D3FF',
+ deeppink: '#FF1493FF',
+ deepskyblue: '#00BFFFFF',
+ dimgray: '#696969FF',
+ dimgrey: '#696969FF',
+ dodgerblue: '#1E90FFFF',
+ firebrick: '#B22222FF',
+ floralwhite: '#FFFAF0FF',
+ forestgreen: '#228B22FF',
+ fuchsia: '#FF00FFFF',
+ gainsboro: '#DCDCDCFF',
+ ghostwhite: '#F8F8FFFF',
+ gold: '#FFD700FF',
+ goldenrod: '#DAA520FF',
+ gray: '#808080FF',
+ grey: '#808080FF',
+ green: '#008000FF',
+ greenyellow: '#ADFF2FFF',
+ honeydew: '#F0FFF0FF',
+ hotpink: '#FF69B4FF',
+ indianred: '#CD5C5CFF',
+ indigo: '#4B0082FF',
+ ivory: '#FFFFF0FF',
+ khaki: '#F0E68CFF',
+ lavender: '#E6E6FAFF',
+ lavenderblush: '#FFF0F5FF',
+ lawngreen: '#7CFC00FF',
+ lemonchiffon: '#FFFACDFF',
+ lightblue: '#ADD8E6FF',
+ lightcoral: '#F08080FF',
+ lightcyan: '#E0FFFFFF',
+ lightgoldenrodyellow: '#FAFAD2FF',
+ lightgray: '#D3D3D3FF',
+ lightgrey: '#D3D3D3FF',
+ lightgreen: '#90EE90FF',
+ lightpink: '#FFB6C1FF',
+ lightsalmon: '#FFA07AFF',
+ lightseagreen: '#20B2AAFF',
+ lightskyblue: '#87CEFAFF',
+ lightslategray: '#778899FF',
+ lightslategrey: '#778899FF',
+ lightsteelblue: '#B0C4DEFF',
+ lightyellow: '#FFFFE0FF',
+ lime: '#00FF00FF',
+ limegreen: '#32CD32FF',
+ linen: '#FAF0E6FF',
+ magenta: '#FF00FFFF',
+ maroon: '#800000FF',
+ mediumaquamarine: '#66CDAAFF',
+ mediumblue: '#0000CDFF',
+ mediumorchid: '#BA55D3FF',
+ mediumpurple: '#9370D8FF',
+ mediumseagreen: '#3CB371FF',
+ mediumslateblue: '#7B68EEFF',
+ mediumspringgreen: '#00FA9AFF',
+ mediumturquoise: '#48D1CCFF',
+ mediumvioletred: '#C71585FF',
+ midnightblue: '#191970FF',
+ mintcream: '#F5FFFAFF',
+ mistyrose: '#FFE4E1FF',
+ moccasin: '#FFE4B5FF',
+ navajowhite: '#FFDEADFF',
+ navy: '#000080FF',
+ oldlace: '#FDF5E6FF',
+ olive: '#808000FF',
+ olivedrab: '#6B8E23FF',
+ orange: '#FFA500FF',
+ orangered: '#FF4500FF',
+ orchid: '#DA70D6FF',
+ palegoldenrod: '#EEE8AAFF',
+ palegreen: '#98FB98FF',
+ paleturquoise: '#AFEEEEFF',
+ palevioletred: '#D87093FF',
+ papayawhip: '#FFEFD5FF',
+ peachpuff: '#FFDAB9FF',
+ peru: '#CD853FFF',
+ pink: '#FFC0CBFF',
+ plum: '#DDA0DDFF',
+ powderblue: '#B0E0E6FF',
+ purple: '#800080FF',
+ rebeccapurple: '#663399FF',
+ red: '#FF0000FF',
+ rosybrown: '#BC8F8FFF',
+ royalblue: '#4169E1FF',
+ saddlebrown: '#8B4513FF',
+ salmon: '#FA8072FF',
+ sandybrown: '#F4A460FF',
+ seagreen: '#2E8B57FF',
+ seashell: '#FFF5EEFF',
+ sienna: '#A0522DFF',
+ silver: '#C0C0C0FF',
+ skyblue: '#87CEEBFF',
+ slateblue: '#6A5ACDFF',
+ slategray: '#708090FF',
+ slategrey: '#708090FF',
+ snow: '#FFFAFAFF',
+ springgreen: '#00FF7FFF',
+ steelblue: '#4682B4FF',
+ tan: '#D2B48CFF',
+ teal: '#008080FF',
+ thistle: '#D8BFD8FF',
+ tomato: '#FF6347FF',
+ turquoise: '#40E0D0FF',
+ violet: '#EE82EEFF',
+ wheat: '#F5DEB3FF',
+ white: '#FFFFFFFF',
+ whitesmoke: '#F5F5F5FF',
+ yellow: '#FFFF00FF',
+ yellowgreen: '#9ACD32FF',
+};
+
+export function normalizeColorToHex(
+ value: string | null | undefined
+): string | null {
+ if (!value) return null;
+ let str = value.trim().toLowerCase();
+
+ // Handle Named Colors
+ if (CSS_NAMED_COLORS[str] !== undefined) {
+ str = CSS_NAMED_COLORS[str]!.toLowerCase();
+ }
+
+ // Handle Hex (#FFF, #RGBA, #RRGGBB, #RRGGBBAA)
+ if (str.startsWith('#')) {
+ const hex = str.substring(1);
+ let r,
+ g,
+ b,
+ a = 'ff';
+
+ if (hex.length === 3) {
+ r = hex.charAt(0) + hex.charAt(0);
+ g = hex.charAt(1) + hex.charAt(1);
+ b = hex.charAt(2) + hex.charAt(2);
+ } else if (hex.length === 4) {
+ r = hex.charAt(0) + hex.charAt(0);
+ g = hex.charAt(1) + hex.charAt(1);
+ b = hex.charAt(2) + hex.charAt(2);
+ a = hex.charAt(3) + hex.charAt(3);
+ } else if (hex.length === 6) {
+ r = hex.substring(0, 2);
+ g = hex.substring(2, 4);
+ b = hex.substring(4, 6);
+ } else if (hex.length === 8) {
+ r = hex.substring(0, 2);
+ g = hex.substring(2, 4);
+ b = hex.substring(4, 6);
+ a = hex.substring(6, 8);
+ } else {
+ return null;
+ }
+
+ // drop alpha if it's 255 (FF)
+ if (a === 'ff') {
+ return `#${r}${g}${b}`.toUpperCase();
+ }
+ return `#${r}${g}${b}${a}`.toUpperCase();
+ }
+
+ // Handle rgb() and rgba()
+ if (str.startsWith('rgb')) {
+ const match = str.match(
+ /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)/
+ );
+ if (match && match[1] && match[2] && match[3]) {
+ const r = Math.round(parseFloat(match[1])).toString(16).padStart(2, '0');
+ const g = Math.round(parseFloat(match[2])).toString(16).padStart(2, '0');
+ const b = Math.round(parseFloat(match[3])).toString(16).padStart(2, '0');
+
+ let a = 'ff';
+ if (match[4] !== undefined) {
+ a = Math.round(parseFloat(match[4]) * 255)
+ .toString(16)
+ .padStart(2, '0');
+ }
+
+ if (a === 'ff') {
+ return `#${r}${g}${b}`.toUpperCase();
+ }
+ return `#${r}${g}${b}${a}`.toUpperCase();
+ }
+ }
+
+ return null;
+}
+
+export function normalizeColorValue(
+ color?: ColorValue | null
+): string | null | undefined {
+ if (color === undefined) return undefined;
+ if (color === null) return null;
+ if (typeof color === 'string') return color;
+
+ // If it's an OpaqueColorValue return null
+ return null;
+}
diff --git a/src/web/normalization/htmlNormalizer.ts b/src/web/normalization/htmlNormalizer.ts
index 35e6ef8a2..257463a07 100644
--- a/src/web/normalization/htmlNormalizer.ts
+++ b/src/web/normalization/htmlNormalizer.ts
@@ -594,10 +594,35 @@ function walkNode(node: Node, out: { buf: string }): void {
// : CSS style → inline tags
if (name === 'span') {
+ const htmlNode = node as HTMLElement;
const s = parseCssStyle(node.getAttribute('style'));
+
+ const fg = htmlNode.style.color;
+ const bg = htmlNode.style.backgroundColor;
+ const fontSize = htmlNode.style.fontSize;
+ const fontFamily = escapeText(htmlNode.style.fontFamily);
+
+ // build the preserved span if colors exist
+ let spanOpen = '';
+ let spanClose = '';
+ const styleParts: string[] = [];
+
+ if (fg) styleParts.push(`color: ${fg}`);
+ if (bg) styleParts.push(`background-color: ${bg}`);
+ if (fontSize) styleParts.push(`font-size: ${fontSize}`);
+ if (fontFamily) styleParts.push(`font-family: ${fontFamily}`);
+
+ if (styleParts.length > 0) {
+ spanOpen = ``;
+ spanClose = '';
+ }
+
+ // output everything in the correct nested order
+ out.buf += spanOpen;
out.buf += emitStylesOpen(s);
walkChildren(node, out);
out.buf += emitStylesClose(s);
+ out.buf += spanClose;
return;
}
diff --git a/src/web/normalization/prepareHtmlForWeb.ts b/src/web/normalization/prepareHtmlForWeb.ts
index 8da6d63e8..29ad25f30 100644
--- a/src/web/normalization/prepareHtmlForWeb.ts
+++ b/src/web/normalization/prepareHtmlForWeb.ts
@@ -1,4 +1,5 @@
import { normalizeHtml } from './htmlNormalizer';
+import { withBaseFontFamilyFallback } from '../styleConversion/enrichedStyleToCSSVariables';
export function prepareHtmlForWeb(
html: string,
@@ -13,6 +14,7 @@ export function prepareHtmlForWeb(
wrapBareLiContentInParagraph(doc);
checkboxHtmlToWeb(doc);
+ addFontFamilyFallback(doc);
return doc.body.innerHTML;
}
@@ -98,3 +100,12 @@ function checkboxHtmlToWeb(doc: Document) {
});
});
}
+
+function addFontFamilyFallback(doc: Document) {
+ doc.querySelectorAll('span[style]').forEach((span) => {
+ const fontFamily = span.style.fontFamily;
+ if (fontFamily) {
+ span.style.fontFamily = withBaseFontFamilyFallback(fontFamily);
+ }
+ });
+}
diff --git a/src/web/normalization/tiptapHtmlNormalizer.ts b/src/web/normalization/tiptapHtmlNormalizer.ts
index cadbda43a..27745d1ef 100644
--- a/src/web/normalization/tiptapHtmlNormalizer.ts
+++ b/src/web/normalization/tiptapHtmlNormalizer.ts
@@ -4,6 +4,7 @@ import {
checkboxHtmlForTiptap,
checkboxHtmlFromTiptap,
} from './checkboxHtmlNormalizer';
+import { normalizeColorToHex } from './colorNormalizer';
import { normalizeHtml } from './htmlNormalizer';
export function prepareHtmlForTiptap(
@@ -48,5 +49,30 @@ export function normalizeHtmlFromTiptap(
return ` to hex
+ updatedStyle = updatedStyle.replace(
+ /(?:^|;)\s*color\s*:\s*([^;]+)/gi,
+ (match, colorValue) => {
+ const hex = normalizeColorToHex(colorValue);
+ return hex ? match.replace(colorValue, hex) : match;
+ }
+ );
+
+ // Convert background-color: to hex
+ updatedStyle = updatedStyle.replace(
+ /(?:^|;)\s*background-color\s*:\s*([^;]+)/gi,
+ (match, bgColorValue) => {
+ const hex = normalizeColorToHex(bgColorValue);
+ return hex ? match.replace(bgColorValue, hex) : match;
+ }
+ );
+
+ return `style="${updatedStyle}"`;
+ });
+
return `${html}`;
}
diff --git a/src/web/pmPlugins/StripMarksInCodeBlockPlugin.ts b/src/web/pmPlugins/StripMarksInCodeBlockPlugin.ts
index 5eee201fb..66836e1a8 100644
--- a/src/web/pmPlugins/StripMarksInCodeBlockPlugin.ts
+++ b/src/web/pmPlugins/StripMarksInCodeBlockPlugin.ts
@@ -18,6 +18,9 @@ export const StripMarksInCodeBlockPlugin = Extension.create({
newState.doc.descendants((node, pos) => {
if (node.type.name === 'codeBlock') {
allMarks.forEach((markType) => {
+ if (markType.name === 'customStyle') {
+ return;
+ }
tr.removeMark(pos + 1, pos + node.nodeSize - 1, markType);
});
return false;
diff --git a/src/web/styleConversion/enrichedStyleToCSSVariables.ts b/src/web/styleConversion/enrichedStyleToCSSVariables.ts
new file mode 100644
index 000000000..d0bea9eec
--- /dev/null
+++ b/src/web/styleConversion/enrichedStyleToCSSVariables.ts
@@ -0,0 +1,18 @@
+import type { CSSProperties } from 'react';
+
+export const ET_STYLE_CSS_VARS = {
+ // The input's base font, used as the custom style font family fallback
+ fontFamily: '--et-font-family',
+} as const;
+
+export function enrichedStyleToCSSVariables(
+ style: Pick
+): CSSProperties {
+ const vars: Record = {};
+ if (style.fontFamily) vars[ET_STYLE_CSS_VARS.fontFamily] = style.fontFamily;
+ return vars as CSSProperties;
+}
+
+export function withBaseFontFamilyFallback(fontFamily: string): string {
+ return `${fontFamily}, var(${ET_STYLE_CSS_VARS.fontFamily}, ${fontFamily})`;
+}
diff --git a/src/web/tiptapWatchers/useOnChangeState.ts b/src/web/tiptapWatchers/useOnChangeState.ts
index cdee4b57b..80f175193 100644
--- a/src/web/tiptapWatchers/useOnChangeState.ts
+++ b/src/web/tiptapWatchers/useOnChangeState.ts
@@ -9,6 +9,7 @@ import {
isFormatBlocked,
} from '../formats/formatRules';
import type { HtmlStyle } from '../../types';
+import { normalizeColorToHex } from '../normalization/colorNormalizer';
export const useOnChangeState = (
editor: Editor | null,
@@ -63,6 +64,8 @@ function buildState(
};
}
+ const customStyle = getCurrentCustomStyleAttributes(editor);
+
return {
bold: inlineFormat('bold', false),
italic: inlineFormat('italic', false),
@@ -99,22 +102,68 @@ function buildState(
isBlocking: isFormatBlocked('image', editor, htmlStyle),
},
alignment: getCurrentAlignment(editor) ?? 'auto',
+ customStyle: {
+ foregroundColor: toHexColor(customStyle.foregroundColor),
+ backgroundColor: toHexColor(customStyle.backgroundColor),
+ fontSize: customStyle.fontSize ?? 0,
+ fontFamily: customStyle.fontFamily ?? '',
+ },
};
}
+function toHexColor(color: string | null | undefined): string {
+ return normalizeColorToHex(color) ?? color ?? '';
+}
+
+function getCurrentCustomStyleAttributes(editor: Editor): Record {
+ const { selection, doc, schema } = editor.state;
+ if (selection.empty) {
+ const marks = editor.state.storedMarks ?? selection.$from.marks();
+ return schema.marks.customStyle?.isInSet(marks)?.attrs ?? {};
+ }
+
+ const foregroundColors = new Set();
+ const backgroundColors = new Set();
+ const fontSizes = new Set();
+ const fontFamilies = new Set();
+
+ doc.nodesBetween(selection.from, selection.to, (node) => {
+ if (!node.isText) return;
+ const attrs = schema.marks.customStyle?.isInSet(node.marks)?.attrs;
+ foregroundColors.add(toHexColor(attrs?.foregroundColor) || null);
+ backgroundColors.add(toHexColor(attrs?.backgroundColor) || null);
+ fontSizes.add(attrs?.fontSize ?? null);
+ fontFamilies.add(attrs?.fontFamily ?? null);
+ });
+
+ return {
+ foregroundColor: getSingleValue(foregroundColors),
+ backgroundColor: getSingleValue(backgroundColors),
+ fontSize: getSingleValue(fontSizes),
+ fontFamily: getSingleValue(fontFamilies),
+ };
+}
+
+function getSingleValue(values: Set): T | null {
+ return values.size === 1 ? ([...values][0] ?? null) : null;
+}
+
function hashState(state: OnChangeStateEvent): string {
- return Object.values(state)
- .map((formatState) => {
- if (typeof formatState === 'string') return formatState;
- return String(
- getFormatHash(
- formatState.isActive,
- formatState.isConflicting,
- formatState.isBlocking
- )
- );
+ const formatEntries = Object.entries(state).filter(
+ ([key]) => key !== 'alignment' && key !== 'customStyle'
+ );
+ const formatHash = formatEntries
+ .map(([, formatState]) => {
+ const s = formatState as {
+ isActive: boolean;
+ isConflicting: boolean;
+ isBlocking: boolean;
+ };
+ return String(getFormatHash(s.isActive, s.isConflicting, s.isBlocking));
})
.join('');
+
+ return `${formatHash}|${state.alignment}|${state.customStyle.foregroundColor}|${state.customStyle.backgroundColor}|${state.customStyle.fontSize}|${state.customStyle.fontFamily}`;
}
function getFormatHash(
diff --git a/src/web/utils/useBaseFontFamily.ts b/src/web/utils/useBaseFontFamily.ts
new file mode 100644
index 000000000..185810a19
--- /dev/null
+++ b/src/web/utils/useBaseFontFamily.ts
@@ -0,0 +1,23 @@
+import { useLayoutEffect, useState } from 'react';
+
+// without a fontFamily in style, the element inherits its font from the DOM
+export const useBaseFontFamily = (
+ getElement: () => HTMLElement | null,
+ fontFamily?: string
+): string | undefined => {
+ const [inheritedFontFamily, setInheritedFontFamily] = useState();
+
+ useLayoutEffect(() => {
+ if (fontFamily) return;
+ try {
+ const element = getElement();
+ if (element) {
+ setInheritedFontFamily(getComputedStyle(element).fontFamily);
+ }
+ } catch {
+ // element isn't mounted yet
+ }
+ }, [getElement, fontFamily]);
+
+ return fontFamily ?? inheritedFontFamily;
+};