Skip to content

fix: Replace NcRichContenteditable with textarea #1574

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

Merged
susnux merged 6 commits into from
May 17, 2023
Merged

fix: Replace NcRichContenteditable with textarea #1574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a002236
fix: Replace `NcRichContenteditable` with `textarea`
susnux Mar 20, 2023
f9a9357
fix: Add padding for form title text so it does not touch the border
susnux Apr 29, 2023
cacda69
fix: Make sure view and edit mode look the same
susnux Apr 29, 2023
226a39a
Add css fix for upstream server styling issue
susnux Apr 3, 2023
bccb2bd
Use same resize logic for `Question` component and for `Create` view
susnux May 16, 2023
d188962
fix: Stop content jumping when toggling edit mode by setting line hig…
susnux May 16, 2023
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
9 changes: 9 additions & 0 deletions css/forms.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,15 @@ html {
scroll-padding-top: calc(var(--header-height) + 60px);
}

/* Fix for placeholder styling
* TODO: Can be removed, as soon as it is fixed in server
* Ref.: https://github.com/nextcloud/server/pull/37522
*/
::placeholder {
color: var(--color-text-maxcontrast);
font-size: var(--default-font-size);
}

/* Fix for action-popover alignment
* TODO: Can be removed, as soon as the issue is solved in server or vue-components.
* Ref.: https://github.com/nextcloud/nextcloud-vue/issues/1384
Expand Down
38 changes: 30 additions & 8 deletions src/components/Questions/Question.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,13 +76,13 @@
</NcActions>
</div>
<div v-if="hasDescription || edit || !questionValid" class="question__header__description">
<NcRichContenteditable v-if="edit || !questionValid"
:multiline="true"
<textarea v-if="edit || !questionValid"
ref="description"
:value="description"
:placeholder="t('forms', 'Description (formatting using Markdown is supported)')"
:maxlength="maxStringLengths.questionDescription"
class="question__header__description__input"
@update:value="onDescriptionChange" />
@input="onDescriptionChange" />
<!-- eslint-disable-next-line vue/no-v-html -->
<div v-else class="question__header__description__output" v-html="computedDescription" />
</div>
Expand All @@ -99,7 +99,6 @@ import { directive as ClickOutside } from 'v-click-outside'
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js'

import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
import IconDelete from 'vue-material-design-icons/Delete.vue'
Expand All @@ -119,7 +118,6 @@ export default {
NcActions,
NcActionButton,
NcActionCheckbox,
NcRichContenteditable,
},

inject: ['$markdownit'],
Expand Down Expand Up @@ -205,20 +203,43 @@ export default {
return this.description !== ''
},
},

watch: {
edit(newEdit) {
if (newEdit || !this.questionValid) {
this.resizeDescription()
}
},
},
// Ensure description is sized correctly on initial render
mounted() {
this.$nextTick(() => this.resizeDescription())
},
methods: {
onTitleChange({ target }) {
this.$emit('update:text', target.value)
},

onDescriptionChange(value) {
this.$emit('update:description', value)
onDescriptionChange({ target }) {
this.resizeDescription()
this.$emit('update:description', target.value)
},

onRequiredChange(isRequired) {
this.$emit('update:isRequired', isRequired)
},

resizeDescription() {
// next tick ensures that the textarea is attached to DOM
this.$nextTick(() => {
const textarea = this.$refs.description
if (textarea) {
textarea.style.cssText = 'height: 0'
// include 2px border
textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px`
}
})
},

/**
* Enable the edit mode
*/
Expand Down Expand Up @@ -350,6 +371,7 @@ export default {
position: relative;
left: -12px;
padding: 4px 10px;
resize: none;
}

&__input,
Expand Down
2 changes: 2 additions & 0 deletions src/scssmixins/markdownOutput.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@
*/

@mixin markdown-output {
overflow-wrap: break-word;

::v-deep {
>:not(:first-child) {
margin-top: 1.5em;
Expand Down
89 changes: 55 additions & 34 deletions src/views/Create.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@
v-model="form.title"
class="form-title"
rows="1"
:minlength="0"
:maxlength="maxStringLengths.formTitle"
:placeholder="t('forms', 'Form title')"
:readonly="!edit"
Expand All @@ -58,13 +57,14 @@
<label class="hidden-visually" for="form-desc">
{{ t('forms', 'Description') }}
</label>
<NcRichContenteditable id="form-desc"
<textarea id="form-desc"
ref="description"
class="form-desc form-desc__input"
rows="1"
:value="form.description"
:multiline="true"
:placeholder="t('forms', 'Description (formatting using Markdown is supported)')"
:maxlength="maxStringLengths.formDescription"
@update:value="updateDescription" />
@input="updateDescription" />
</template>
<!-- eslint-disable-next-line vue/no-v-html -->
<div v-else class="form-desc form-desc__output" v-html="formDescription" />
Expand Down Expand Up @@ -142,7 +142,6 @@ import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js'
import IconPlus from 'vue-material-design-icons/Plus.vue'

import answerTypes from '../models/AnswerTypes.js'
Expand All @@ -168,7 +167,6 @@ export default {
NcAppContent,
NcEmptyContent,
NcLoadingIcon,
NcRichContenteditable,
Question,
QuestionLong,
QuestionShort,
Expand Down Expand Up @@ -257,33 +255,40 @@ export default {
'form.title'() {
SetWindowTitle(this.formTitle)
},

// resize description if form is loaded
isLoadingForm(value) {
if (!value && this.edit) {
this.resizeTitle()
this.resizeDescription()
}
},
},

beforeMount() {
mounted() {
this.fetchFullForm(this.form.id)
SetWindowTitle(this.formTitle)
this.initEdit()
},

updated() {
this.autoSizeTitle()
},

methods: {
onTitleChange() {
this.autoSizeTitle()
this.resizeTitle()
this.saveTitle()
},

disableEdit() {
// Keep edit if no title set
if (this.form.title) {
this.edit = false
this.$refs.title.style.height = 'auto'
}
},

enableEdit() {
this.edit = true
this.resizeDescription()
this.resizeTitle()
},

initEdit() {
Expand All @@ -294,14 +299,39 @@ export default {
}
},

/**
* Auto adjust the title height based its scroll height
*/
resizeTitle() {
this.$nextTick(() => {
const textarea = this.$refs.title
textarea.style.cssText = 'height: 0'
// include 2px border
textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px`
})
},

/**
* Auto adjust the description height based on its scroll height
*/
resizeDescription() {
// nextTick to ensure textarea is attached to DOM
this.$nextTick(() => {
const textarea = this.$refs.description
textarea.style.cssText = 'height: 0'
// include 2px border
textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px`
})
},

/**
* Update the description
*
* @param {string} value New description
* @param {InputEvent} ev The input event of the textarea
*/
updateDescription(value = '') {
// We need this for nextcloud/nextcloud-vue#3669
this.form.description = value.trimEnd()
updateDescription({ target }) {
this.form.description = target.value
this.resizeDescription()
this.saveDescription()
},

Expand Down Expand Up @@ -411,20 +441,6 @@ export default {
})
}, 10)
},

/**
* Auto adjust the title height based on lines number
*/
async autoSizeTitle() {
this.$nextTick(() => {
const textarea = this.$refs.title
if (textarea) {
textarea.style.cssText = 'height:auto'
// include 2px border
textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px`
}
})
},
Comment on lines -415 to -427
Copy link
Copy Markdown
Member

@jotoeri jotoeri May 16, 2023

Choose a reason for hiding this comment

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

Why?? Its in fact the same code, but more changed lines within the PR...!?

Copy link
Copy Markdown
Collaborator

@Chartman123 Chartman123 May 16, 2023

Choose a reason for hiding this comment

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

For me the behavior changed a little: before the text jumped when there was no or one line. Now it jumps for three lines in the input.

Didn't we have some old code before that computed the correct size for the field height? Or can't that be used anymore because of the new formatting capabilities?

Copy link
Copy Markdown
Collaborator Author

@susnux susnux May 16, 2023

Choose a reason for hiding this comment

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

Why?? Its in fact the same code, but more changed lines within the PR...!?

Just reordered to be more logical when reading the file, but I can revert it if you prefer small visual diff.

Copy link
Copy Markdown
Collaborator Author

@susnux susnux May 16, 2023

Choose a reason for hiding this comment

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

For me the behavior changed a little: before the text jumped when there was no or one line. Now it jumps for three lines in the input.

@Chartman123
I finally fixed the jumping content 🎉 (at least I could not find any 😉 ). The problem was that the line height was set to 1.5em which is 22.5px, now the rendered size was jumping around 1px.
Setting the line height to 22px fixed the problem for me.

},
}
</script>
Expand Down Expand Up @@ -456,8 +472,9 @@ export default {
line-height: 34px;
color: var(--color-main-text);
min-height: 36px;
padding: 0 14px; // same as submit but 2px borders
margin: 30px 0 14px; // same as on submit but minus padding-top description and borders
// padding and margin should be aligned with the submit view (but keep the 2px border in mind)
padding: 4px 14px;
margin: 22px 0 14px;
width: calc(100% - 56px); // margin of header, needed if screen is < 806px (max-width + margin-left)
overflow: hidden;
text-overflow: ellipsis;
Expand All @@ -466,6 +483,9 @@ export default {
&:read-only {
border-color: transparent;
}
&::placeholder {
font-size: 28px;
}
}

.form-desc,
Expand All @@ -478,13 +498,14 @@ export default {

.form-desc {
color: var(--color-text-maxcontrast);
line-height: 1.5em;
min-height: calc(25px + 1.5em); // one line
line-height: 22px;
min-height: 47px; // one line (25px padding + 22px text height)
padding-top: 5px; // spacing border<>text
margin: 0px;

&__input {
padding: 3px 14px 18px; // 2px smaller because of border
resize: none;
}

// Styling for rendered Output
Expand Down
4 changes: 2 additions & 2 deletions src/views/Submit.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -342,10 +342,10 @@ export default {
text-overflow: ellipsis;
}
.form-desc {
line-height: 1.5em;
line-height: 22px;
padding-bottom: 20px;
resize: none;
min-height: calc(20px + 1.5em); // one line
min-height: 42px;
color: var(--color-text-maxcontrast);

@include markdown-output;
Expand Down