How can I turn a string www.google.com as a link just by the user typing it? or make mentions like @john? Can you point me in the right direction?

[ember11498]

I want to have a behavior exactly like twitter does when creating a tweet.

If i type www.google.com it automatically understands it is a link.

also, if i type @ it automatically understands it is a mention.

Can you point me in the right direction and I figure it out on my own?

[ember11498]

this is what I get so far (this code still doesnt try to implement the link and the mentions as I am a bit out of ideas on how to do it):

class FleatherTextEditor extends StatefulWidget {
  final ParchmentDocument doc;
  final Function onSaved;

  const FleatherTextEditor(
      {super.key, required this.doc, required this.onSaved});

  @override
  State<FleatherTextEditor> createState() => _FleatherTextEditorState();
}

class _FleatherTextEditorState extends State<FleatherTextEditor> {
  late final FocusNode node;
  late final FleatherController controller;
  final threshold = 301;

  @override
  void initState() {
    super.initState();
    node = FocusNode();
    controller = FleatherController(document: widget.doc);
    //controller = FleatherController(document: widget.doc);
    controller.addListener(() {
      final counter = controller.document.length;
      final overflow = counter - threshold;
      if (counter > threshold) {
        controller.formatText(
            threshold,
            overflow,
            ParchmentAttribute.backgroundColor
                .withColor(Colors.orangeAccent.value));
      }
    });
  }

  Widget backgroundColorBuilder(BuildContext context, value) => Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          const Icon(
            Icons.mode_edit_outline_outlined,
            size: 16,
          ),
          Container(
            width: 18,
            height: 4,
            decoration: BoxDecoration(color: value),
          )
        ],
      );
  Widget textColorBuilder(BuildContext context, value) {
    Color effectiveColor =
        value ?? DefaultTextStyle.of(context).style.color ?? Colors.black;
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      children: [
        const Icon(
          Icons.text_fields_sharp,
          size: 16,
        ),
        Container(
          width: 18,
          height: 4,
          decoration: BoxDecoration(color: effectiveColor),
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      appBar: AppBar(
        title: Text(
          'Text editor',
          style: context.large,
        ),
        actions: [
          GestureDetector(
            onTap: () {
              widget.onSaved();
              context.pop();
            },
            child: Container(
              padding: const EdgeInsets.all(Spacing.small),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30),
                  color: context.primary),
              child: Text(
                'Done',
                style: context.regularSecondaryBold,
              ),
            ),
          )
        ],
      ),
      body: ConstrainedBox(
        constraints: const BoxConstraints(maxWidth: 600),
        child: SafeArea(
          child: CustomFleatherTheme(
            child: Column(
              children: [
                Expanded(
                  child: FleatherEditor(
                    controller: controller,
                    focusNode: node,
                    autofocus: true,
                    padding: const EdgeInsets.symmetric(
                      horizontal: 8,
                    ),
                  ),
                ),
                KeyboardVisibilityBuilder(
                  builder: (p0, isKeyboardVisible) {
                    if (isKeyboardVisible) {
                      return SizedBox(
                        width: MediaQuery.of(context).size.width,
                        height: 35,
                        child: FleatherToolbar(
                          padding: const EdgeInsets.all(0),
                          children: [
                            ToggleStyleButton(
                              attribute: ParchmentAttribute.bold,
                              icon: Icons.format_bold,
                              controller: controller,
                            ),
                            ToggleStyleButton(
                              attribute: ParchmentAttribute.italic,
                              icon: Icons.format_italic,
                              controller: controller,
                            ),
                            ToggleStyleButton(
                              attribute: ParchmentAttribute.underline,
                              icon: Icons.format_underline,
                              controller: controller,
                            ),
                            ToggleStyleButton(
                              attribute: ParchmentAttribute.strikethrough,
                              icon: Icons.format_strikethrough,
                              controller: controller,
                            ),
                            ColorButton(
                              controller: controller,
                              attributeKey: ParchmentAttribute.foregroundColor,
                              nullColorLabel: 'Automatic',
                              builder: (context, color) =>
                                  textColorBuilder(context, color),
                            ),
                            ColorButton(
                              controller: controller,
                              attributeKey: ParchmentAttribute.backgroundColor,
                              nullColorLabel: 'No color',
                              builder: backgroundColorBuilder,
                            ),
                            ToggleStyleButton(
                              attribute: ParchmentAttribute.left,
                              icon: Icons.format_align_left,
                              controller: controller,
                            ),
                            ToggleStyleButton(
                              attribute: ParchmentAttribute.center,
                              icon: Icons.format_align_center,
                              controller: controller,
                            ),
                            ToggleStyleButton(
                              attribute: ParchmentAttribute.right,
                              icon: Icons.format_align_right,
                              controller: controller,
                            ),
                            ToggleStyleButton(
                              attribute: ParchmentAttribute.justify,
                              icon: Icons.format_align_justify,
                              controller: controller,
                            ),
                            IndentationButton(
                              increase: false,
                              controller: controller,
                            ),
                            IndentationButton(
                              controller: controller,
                            ),
                            ToggleStyleButton(
                              attribute: ParchmentAttribute.block.numberList,
                              controller: controller,
                              icon: Icons.format_list_numbered,
                            ),
                            ToggleStyleButton(
                              attribute: ParchmentAttribute.block.bulletList,
                              controller: controller,
                              icon: Icons.format_list_bulleted,
                            ),
                            ToggleStyleButton(
                              attribute: ParchmentAttribute.block.checkList,
                              controller: controller,
                              icon: Icons.checklist,
                            ),
                            ToggleStyleButton(
                              attribute: ParchmentAttribute.block.code,
                              controller: controller,
                              icon: Icons.code,
                            ),
                            ToggleStyleButton(
                              attribute: ParchmentAttribute.block.quote,
                              controller: controller,
                              icon: Icons.format_quote,
                            ),
                            InsertEmbedButton(
                              controller: controller,
                              icon: Icons.horizontal_rule,
                            ),
                            SelectHeadingButton(controller: controller),
                            UndoRedoButton.undo(controller: controller),
                            UndoRedoButton.redo(controller: controller),
                          ],
                        ),
                      );
                    }
                    return const SizedBox();
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class IncrementCounter extends Cubit<int> {
  IncrementCounter() : super(0);

  void change(int lenght) => emit(lenght);
}

[Amir-P]

With Fleather 1.12.0 we introduced AutoFormats to handle custom formatting while the user edits text. Right now the url auto formatting happens in the editor but you can implement and provide your own AutoFormat to the editor. Please check the current AutoFormats to get inspiration. @ember11498