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

packages/nc-gui/components/cell/RichText.vue

@@ -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;
 

packages/nc-gui/components/smartsheet/Form.vue

@@ -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"
                                     />

packages/nc-gui/lang/en.json

@@ -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",