github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix(nc-gui): form rich text placeholder and render as text issue

pull/7741/head
Ramesh Mane 9 months ago
parent
6344238dcf
commit
779319abee
3 changed files with 94 additions and 63 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 95
      packages/nc-gui/components/cell/RichText.vue
  2. 61
      packages/nc-gui/components/smartsheet/Form.vue
  3. 1
      packages/nc-gui/lang/en.json

95
packages/nc-gui/components/cell/RichText.vue
Unescape View File

@ -6,6 +6,7 @@ import TurndownService from 'turndown'
import { marked } from 'marked'
import { generateJSON } from '@tiptap/html'
import Underline from '@tiptap/extension-underline'
import Placeholder from '@tiptap/extension-placeholder'
import { TaskItem } from '@/helpers/dbTiptapExtensions/task-item'
import { Link } from '@/helpers/dbTiptapExtensions/links'
import { IsExpandedFormOpenInj, IsFormInj, ReadonlyInj, RowHeightInj, onClickOutside } from '#imports'
@ -19,6 +20,8 @@ const props = defineProps<{
isFormField?: boolean
autofocus?: boolean
isTabPressed?: boolean
placeholder?: string
renderAsText?: boolean
}>()
const emits = defineEmits(['update:value'])
@ -117,6 +120,10 @@ const tiptapExtensions = [
}),
Underline,
Link,
Placeholder.configure({
emptyEditorClass: 'is-editor-empty',
placeholder: props.placeholder,
}),
]
const editor = useEditor({
@ -140,16 +147,6 @@ const editor = useEditor({
},
})
watch(props, () => {
if (props.isFormField) {
if (props.readOnly) {
editor.value?.setEditable(false)
} else {
editor.value?.setEditable(true)
}
}
})
const setEditorContent = (contentMd: any, focusEndOfDoc?: boolean) => {
if (!editor.value) return
@ -176,8 +173,18 @@ const setEditorContent = (contentMd: any, focusEndOfDoc?: boolean) => {
}, 100)
}
watch([props, editor], () => {
if (props.isFormField) {
if (props.readOnly && editor.value?.isEditable) {
editor.value?.setEditable(false)
} else if (!editor.value?.isEditable) {
editor.value?.setEditable(true)
}
}
})
if (props.syncValueChange) {
watch(vModel, () => {
watch([vModel, editor], () => {
setEditorContent(vModel.value)
})
}
@ -214,34 +221,39 @@ onClickOutside(editorDom, (e) => {
}"
:tabindex="readOnlyCell || isFormField ? -1 : 0"
>
<div
v-if="showMenu && !readOnly && !isFormField"
class="absolute top-0 right-0.5 xs:hidden"
:class="{
'max-w-[calc(100%_-_198px)] flex justify-end rounded-tr-2xl overflow-hidden': fullMode,
}"
>
<div class="nc-longtext-scrollbar">
<CellRichTextSelectedBubbleMenu v-if="editor" :editor="editor" embed-mode :is-form-field="isFormField" />
</div>
</div>
<CellRichTextSelectedBubbleMenuPopup v-if="editor && !isFormField" :editor="editor" />
<CellRichTextLinkOptions v-if="editor" :editor="editor" />
<EditorContent
ref="editorDom"
:editor="editor"
class="flex flex-col nc-textarea-rich-editor w-full"
:class="{
'mt-2.5 flex-grow': fullMode,
'nc-scrollbar-md': !fullMode || (!fullMode && isExpandedFormOpen),
'flex-grow': isExpandedFormOpen,
[`!overflow-hidden children:line-clamp-${rowHeight}`]:
!fullMode && readOnly && rowHeight && !isExpandedFormOpen && !isForm,
}"
/>
<div v-if="isFormField && !readOnly && isFocused">
<CellRichTextSelectedBubbleMenu v-if="editor" :editor="editor" embed-mode is-form-field />
<div v-if="renderAsText" class="truncate">
<span v-if="editor"> {{ editor?.getText() ?? '' }}</span>
</div>
<template v-else>
<div
v-if="showMenu && !readOnly && !isFormField"
class="absolute top-0 right-0.5 xs:hidden"
:class="{
'max-w-[calc(100%_-_198px)] flex justify-end rounded-tr-2xl overflow-hidden': fullMode,
}"
>
<div class="nc-longtext-scrollbar">
<CellRichTextSelectedBubbleMenu v-if="editor" :editor="editor" embed-mode :is-form-field="isFormField" />
</div>
</div>
<CellRichTextSelectedBubbleMenuPopup v-if="editor && !isFormField" :editor="editor" />
<CellRichTextLinkOptions v-if="editor" :editor="editor" />
<EditorContent
ref="editorDom"
:editor="editor"
class="flex flex-col nc-textarea-rich-editor w-full"
:class="{
'mt-2.5 flex-grow': fullMode,
'nc-scrollbar-md': !fullMode || (!fullMode && isExpandedFormOpen),
'flex-grow': isExpandedFormOpen,
[`!overflow-hidden children:line-clamp-${rowHeight}`]:
!fullMode && readOnly && rowHeight && !isExpandedFormOpen && !isForm,
}"
/>
<div v-if="isFormField && !readOnly && isFocused">
<CellRichTextSelectedBubbleMenu v-if="editor" :editor="editor" embed-mode is-form-field />
</div>
</template>
</div>
</template>
@ -302,6 +314,13 @@ onClickOutside(editorDom, (e) => {
}
.nc-textarea-rich-editor {
.tiptap p.is-editor-empty:first-child::before {
color: #6a7184;
content: attr(data-placeholder);
float: left;
height: 0;
pointer-events: none;
}
.ProseMirror {
@apply flex-grow pt-1 border-1 border-gray-200 rounded-lg;

61
packages/nc-gui/components/smartsheet/Form.vue
Unescape View File

@ -827,6 +827,7 @@ useEventListener(
<LazyCellRichText
v-if="isEditable && !isLocked"
v-model:value="formViewData.heading"
:placeholder="$t('msg.info.formTitle')"
class="nc-form-focus-element font-bold text-2xl text-gray-900"
is-form-field
:autofocus="activeRow === 'nc-form-heading'"
@ -837,10 +838,12 @@ useEventListener(
/>
<LazyCellRichText
v-else
v-model:value="formViewData.heading"
:value="formViewData.heading"
placeholder="Form Title"
class="font-bold text-2xl text-gray-900"
is-form-field
read-only
sync-value-change
/>
</div>
@ -869,6 +872,7 @@ useEventListener(
<LazyCellRichText
v-if="isEditable && !isLocked"
v-model:value="formViewData.subheading"
:placeholder="$t('msg.info.formDesc')"
class="nc-form-focus-element font-medium text-base !text-gray-500"
is-form-field
:autofocus="activeRow === 'nc-form-sub-heading'"
@ -878,11 +882,12 @@ useEventListener(
@update:value="updateView"
/>
<LazyCellRichText
v-else
v-model:value="formViewData.subheading"
v-else-if="formViewData.subheading"
:value="formViewData.subheading"
class="font-medium text-base !text-gray-500"
is-form-field
read-only
sync-value-change
/>
</div>
</div>
@ -935,7 +940,7 @@ useEventListener(
<span data-testid="nc-form-input-label">
<LazyCellRichText
v-if="element.label"
v-model:value="element.label"
:value="element.label"
is-form-field
read-only
sync-value-change
@ -945,7 +950,7 @@ useEventListener(
/>
<LazyCellRichText
v-else
v-model:value="element.title"
:value="element.title"
is-form-field
read-only
sync-value-change
@ -961,7 +966,7 @@ useEventListener(
<LazyCellRichText
v-if="element.description"
v-model:value="element.description"
:value="element.description"
is-form-field
read-only
sync-value-change
@ -1019,24 +1024,29 @@ useEventListener(
<div class="nc-form-field-body" :class="activeRow === element.title ? 'p-4 lg:p-6' : ''">
<template v-if="activeRow === element.title">
<LazyCellRichText
v-model:value="element.label"
is-form-field
autofocus
:is-tab-pressed="isTabPressed"
class="form-meta-input nc-form-input-label mb-2"
data-testid="nc-form-input-label"
@update:value="updateColMeta(element)"
/>
<LazyCellRichText
v-model:value="element.description"
class="form-meta-input nc-form-input-help-text mb-3"
is-form-field
:is-tab-pressed="isTabPressed"
data-testid="nc-form-input-help-text"
@update:value="updateColMeta(element)"
/>
<a-form-item class="my-0 !mb-2">
<LazyCellRichText
v-model:value="element.label"
:placeholder="$t('msg.info.formInput')"
autofocus
is-form-field
:is-tab-pressed="isTabPressed"
class="form-meta-input nc-form-input-label"
data-testid="nc-form-input-label"
@update:value="updateColMeta(element)"
/>
</a-form-item>
<a-form-item class="my-0 !mb-3">
<LazyCellRichText
v-model:value="element.description"
:placeholder="$t('msg.info.formHelpText')"
class="form-meta-input nc-form-input-help-text"
is-form-field
:is-tab-pressed="isTabPressed"
data-testid="nc-form-input-help-text"
@update:value="updateColMeta(element)"
/></a-form-item>
<a-form-item
v-if="columnSupportsScanning(element.uidt)"
@ -1346,10 +1356,11 @@ useEventListener(
</template>
<span data-testid="nc-field-label">
<LazyCellRichText
v-model:value="field.label"
:value="field.label"
is-form-field
read-only
sync-value-change
render-as-text
class="text-xs font-normal text-gray-700"
data-testid="nc-form-help-text"
/>

1
packages/nc-gui/lang/en.json
Unescape View File

@ -1181,6 +1181,7 @@
"formInput": "Enter form input label",
"formHelpText": "Add some help text",
"onlyCreator": "Only visible to Creator",
"formTitle": "Add form Title",
"formDesc": "Add form description",
"beforeEnablePwd": "Restrict access with a password",
"afterEnablePwd": "Access is password restricted",

Write Preview
Loading…
Cancel
Save