Skip to content

fix(Android): recalculating layout after changing html styles #233

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
IvanIhnatsiuk wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(Android): recalculating layout after changing html styles #233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f93aff9
fix: recalculating layout after changing html styles
IvanIhnatsiuk Nov 8, 2025
6762946
Merge branch 'main' into fix/initial-hmtl-styles-are-not-applied
IvanIhnatsiuk Dec 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions android/src/main/java/com/swmansion/enriched/EnrichedTextInputView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,12 @@ class EnrichedTextInputView : AppCompatEditText {

val mentionHandler: MentionHandler? = MentionHandler(this)
var htmlStyle: HtmlStyle = HtmlStyle(this, null)
set(value) {
if (field != value) {
field = value
reapplyTextWithNewStyles()
}
}
var spanWatcher: EnrichedSpanWatcher? = null
var layoutManager: EnrichedTextInputViewLayoutManager = EnrichedTextInputViewLayoutManager(this)

Expand Down Expand Up @@ -577,6 +583,27 @@ class EnrichedTextInputView : AppCompatEditText {
}
}

private fun reapplyTextWithNewStyles() {
Copy link
Collaborator

@exploIF exploIF Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't exactly get main idea here. Why do we have to parse text twice just to update span styles? Isn't it enough to iterate over spans and update their style?

val currentText = text
if (currentText != null && currentText.isNotEmpty()) {
runAsATransaction {
val currentHtml = EnrichedParser.toHtml(currentText as Spannable)
val newText = parseText(currentHtml)

val currentSelectionStart = selectionStart
val currentSelectionEnd = selectionEnd

setText(newText)
Copy link
Collaborator

@exploIF exploIF Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is incorrect, for manually setting text we setValue, which also handles applying necessary listeners


val newLength = text?.length ?: 0
val safeStart = currentSelectionStart.coerceIn(0, newLength)
val safeEnd = currentSelectionEnd.coerceIn(0, newLength)
setSelection(safeStart, safeEnd)
layoutManager.invalidateLayout()
}
}
}

override fun onAttachedToWindow() {
super.onAttachedToWindow()

Expand Down
77 changes: 76 additions & 1 deletion example/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,8 @@
const [isImageModalOpen, setIsImageModalOpen] = useState(false);
const [isValueModalOpen, setIsValueModalOpen] = useState(false);
const [currentHtml, setCurrentHtml] = useState('');
const [currentHtmlStyle, setCurrentHtmlStyle] =
useState<HtmlStyle>(htmlStyle);

const [selection, setSelection] = useState<Selection>();
const [stylesState, setStylesState] = useState<StylesState>(DEFAULT_STYLE);
Expand Down Expand Up @@ -273,6 +275,12 @@
closeChannelMentionPopup();
};

const handleChangeHtmlStyle = () => {
setCurrentHtmlStyle((style) =>
style === htmlStyle ? anotherHtmlStyle : htmlStyle
);
};

const handleFocusEvent = () => {
console.log('Input focused');
};
Expand Down Expand Up @@ -304,7 +312,7 @@
ref={ref}
mentionIndicators={['@', '#']}
style={styles.editorInput}
htmlStyle={htmlStyle}
htmlStyle={currentHtmlStyle}
placeholder="Type something here..."
placeholderTextColor="rgb(0, 26, 114)"
selectionColor="deepskyblue"
Expand Down Expand Up @@ -336,6 +344,11 @@
<Button title="Focus" onPress={handleFocus} style={styles.button} />
<Button title="Blur" onPress={handleBlur} style={styles.button} />
</View>
<Button
title="Change HTML Style"
onPress={handleChangeHtmlStyle}
style={styles.valueButton}
/>
<Button
title="Set input's value"
onPress={openValueModal}
Expand Down Expand Up @@ -379,6 +392,68 @@
);
}

const anotherHtmlStyle: HtmlStyle = {
h1: {
fontSize: 100,
bold: false,
},
h2: {
fontSize: 50,
bold: false,
},
h3: {
fontSize: 30,
bold: false,
},
blockquote: {
borderColor: 'orange',
borderWidth: 1,
gapWidth: 4,
color: 'orange',
},
codeblock: {
color: 'red',
borderRadius: 0,
backgroundColor: 'black',
},
code: {
color: 'yellow',
backgroundColor: 'purple',
},
a: {
color: 'red',
textDecorationLine: 'none',
},
mention: {
'#': {
color: 'darkred',
backgroundColor: 'lightcoral',
textDecorationLine: 'none',
},
'@': {
color: 'darkgreen',
backgroundColor: 'transparent',
textDecorationLine: 'underline',
},
},
img: {

Check failure on line 439 in example/src/App.tsx

View workflow job for this annotation

GitHub Actions / lint 

Object literal may only specify known properties, and 'img' does not exist in type 'HtmlStyle'.
width: 200,
height: 200,
},
ol: {
gapWidth: 4,
marginLeft: 8,
markerColor: 'orange',
markerFontWeight: 'normal',
},
ul: {
bulletColor: 'black',
bulletSize: 2,
marginLeft: 8,
gapWidth: 4,
},
};

const htmlStyle: HtmlStyle = {
h1: {
fontSize: 40,
Expand Down
Loading