Skip to content
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

Clean up empty HTML and help text in form inputs #700

Merged
merged 3 commits into from
Feb 14, 2025
Merged

Clean up empty HTML and help text in form inputs #700

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dab8b22
Clean up empty HTML and help text in form inputs
chiragchhatrala Feb 13, 2025
29108db
Update api/app/Http/Requests/UserFormRequest.php
JhumanJ Feb 14, 2025
c17787d
Merge branch 'main' into 199a6-can't-fully-remove-field-help
JhumanJ Feb 14, 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
16 changes: 16 additions & 0 deletions api/app/Http/Requests/UserFormRequest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,22 @@
*/
abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
{
protected function prepareForValidation()
{
$data = $this->all();

if (isset($data['properties']) && is_array($data['properties'])) {
$data['properties'] = array_map(function ($property) {
if (isset($property['help']) && is_string($property['help']) && strip_tags($property['help']) === '') {
$property['help'] = null;
}
return $property;
}, $data['properties']);
}

$this->merge($data);
}

/**
* Get the validation rules that apply to the request.
*
Expand Down
8 changes: 8 additions & 0 deletions client/components/forms/RichTextAreaInput.client.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,14 @@ const emit = defineEmits(['update:modelValue'])
const { compVal, inputStyle, hasError, inputWrapperProps } = useFormInput(props, { emit })
const editor = ref(null)
const mentionState = ref(null)

// Add this watch to clean up empty HTML content
watch(compVal, (val) => {
if (val && val.replace(/<[^>]*>/g, '').trim() === '') {
compVal.value = null
}
}, { immediate: true })
Comment on lines +100 to +104
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Emit update event instead of directly modifying the value.

The watcher directly modifies compVal.value which breaks the one-way data flow pattern in Vue. Instead, emit an update event to let the parent component handle the change.

Apply this diff to fix the implementation:

 watch(compVal, (val) => {
   if (val && val.replace(/<[^>]*>/g, '').trim() === '') {
-    compVal.value = null
+    emit('update:modelValue', null)
   }
 }, { immediate: true })
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
watch(compVal, (val) => {
if (val && val.replace(/<[^>]*>/g, '').trim() === '') {
compVal.value = null
}
}, { immediate: true })
watch(compVal, (val) => {
if (val && val.replace(/<[^>]*>/g, '').trim() === '') {
emit('update:modelValue', null)
}
}, { immediate: true })


// Move the mention extension registration to onMounted

if (props.enableMentions && !Quill.imports['blots/mention']) {
Expand Down
Loading