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,6 +221,10 @@ onClickOutside(editorDom, (e) => {
     }"
     :tabindex="readOnlyCell || isFormField ? -1 : 0"
   >
+    <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"
@@ -242,6 +253,7 @@ onClickOutside(editorDom, (e) => {
       <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">
+                          <a-form-item class="my-0 !mb-2">
                             <LazyCellRichText
                               v-model:value="element.label"
-                            is-form-field
+                              :placeholder="$t('msg.info.formInput')"
                               autofocus
+                              is-form-field
                               :is-tab-pressed="isTabPressed"
-                            class="form-meta-input nc-form-input-label mb-2"
+                              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"
-                            class="form-meta-input nc-form-input-help-text mb-3"
+                              :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",