[SuperEditor] Hint text

[jeprojects]

I am trying to create a component that will display hint text when the document is empty and once clicked on (caret showing), the hint text will disappear.

I have tried this component: demo_text_with_hint.dart but can't find a way to detect the document has been clicked on and is in focus.

The wiki has some code to detect that a caret is present, but that code seems out of date.

[matthew-carroll]

Please show what you've tried and where you're getting stuck.

[jeprojects]

Hi @matthew-carroll, thanks for your help. Here is the component. The commented-out section is from the wiki, and I can't find a way to detect if there is a caret present in order to not show the hint text.

class HintComponentBuilder implements ComponentBuilder {
  const HintComponentBuilder();

  @override
  SingleColumnLayoutComponentViewModel? createViewModel(
      Document document, DocumentNode node) {
    return null;
  }

  @override
  Widget? createComponent(SingleColumnDocumentComponentContext componentContext,
      SingleColumnLayoutComponentViewModel componentViewModel) {
    if (componentViewModel is! ParagraphComponentViewModel) {
      return null;
    }

  /*
    final hasCaret = componentContext.nodeSelection != null
        ? componentContext.nodeSelection.isExtent
        : false;
    if (hasCaret) {
      return null;
    }

    */

    final textSelection = componentViewModel.selection;

    return TextWithHintComponent(
      key: componentContext.componentKey,
      text: componentViewModel.text,
      textStyleBuilder: _textStyleBuilder,
      metadata: componentViewModel.blockType != null
          ? {
              'blockType': componentViewModel.blockType,
            }
          : {},
      // This is the text displayed as a hint.
      hintText: AttributedText(
        'Message...',
      ),
      textSelection: textSelection,
      selectionColor: componentViewModel.selectionColor,
    );
  }
}

[matthew-carroll]

You have final textSelection = componentViewModel.selection; - If textSelection.extent >= 0 then there's either a caret or an expanded selection. Does that solve your problem?