Feature Request: How about adding a placeholder attribute to the suggestion plugin?

[guanriyue]

Description

Before using the placeholder.

2024-11-07.16.13.37.mov

After that, it looks like this.

2024-11-07.16.17.09.mov

After activating the suggestion menu, a placeholder text appears to provide a hint for the user.

This is just a simple implementation of mine, using a pseudo-element. However, it has a drawback: when the placeholder text is long and the input position is towards the end of the current line, the placeholder wraps to the next line, which misaligns the popup's position from what’s expected.

Simply modify this part of the code as follows.

tiptap/packages/suggestion/src/suggestion.ts

Lines 373 to 387 in 8837156

	decorations(state) {
	const { active, range, decorationId } = plugin.getState(state)
	if (!active) {
	return null
	}
	return DecorationSet.create(state.doc, [
	Decoration.inline(range.from, range.to, {
	nodeName: decorationTag,
	class: decorationClass,
	'data-decoration-id': decorationId,
	}),
	])
	},

    spec.props.decorations = state => {
      const pluginState = plugin.getState(state);
      if (!pluginState) {
        return undefined;
      }

      const { active, range, decorationId, query } = pluginState;

      if (!active) {
        return null;
      }

      return DecorationSet.create(state.doc, [
        Decoration.inline(range.from, range.to, {
          nodeName: options.decorationTag,
          class: options.decorationClass,
          'data-decoration-id': decorationId,
          'data-suggestion-placeholder': query
            ? undefined
            : options.placeholder
        }),
      ]);
    }

And add a bit of styling too.

.ProseMirror [data-suggestion-placeholder]::after {
  content: attr(data-suggestion-placeholder);
  height: 0;
  color: #adb5bd;
  pointer-events: none;
}

Perhaps we could implement it in a better way.

Use Case

For a more user-friendly interaction.

Type

New feature

[ercgrat]

Agree this is super useful and important for making the search discoverable! I implemented this using placeholder styling as well. My workaround was to set a data-show-suggestion-placeholder attribute with the correct value on the closest .tiptap element in onBeforeStart and onBeforeUpdate. Obviously this solution only works well if you only have one suggestion at a time.

Hope this helps someone.

onBeforeStart: (props) => {
  props.decorationNode
    ?.closest('.tiptap')
    ?.setAttribute('data-show-suggestion-placeholder', 'true')
},