feat: add automatic completion.

[CorvusYe]

Make customizing your own automatic completion possible.

For example:

CodeField(
  ..., 
  autoComplete: CodeAutoComplete<String>(
    optionsBuilder: (text, cursorIndex, mode) {
      return ['class', 'import', 'abstract', 'with']; // anything your can create by text and mode.
    },
    itemBuilder: (context, tip, selected, onTap) {
      return ListTile(
        title: Text(tip),
        selected: selected, // you can use arrowDown、arrowUp、enter in code field and choose the tip.
        onTap: () {
          onTap(tip); // write back to the code field when you pick the item.
        },
      );
    },
    backgroundColor: Colors.black,
    offset: const Offset(0, 0),
  ),
),

[CorvusYe]

Another example:

https://github.com/BertrandBev/code_field/assets/15630211/8e744380-1526-456f-8524-598d7a817427

CodeField(
  ..., 
  autoComplete: CodeAutoComplete<String>(
    optionsBuilder: (text, cursorIndex, mode) {
      var cursorBefore = text.substring(0, cursorIndex);
      var b = cursorBefore.lastIndexOf(RegExp('\\s'));
      var lastWord = cursorBefore.substring(max(b, 0)).trim();
      List<String> tips = keywordsFromMode(mode);
      if (lastWord.trim().isEmpty) return [];
      return tips
          .where((element) => element
              .toLowerCase()
              .startsWith(lastWord.toLowerCase()))
          .toList()
        ..sort((a, b) => a.length.compareTo(b.length));
    },
    itemBuilder: (context, tip, selected, onTap) {
      return ListTile(
        title: Text(tip),
        selected: selected, // you can use arrowDown、arrowUp、enter in code field and choose the tip.
        onTap: () {
          onTap(tip); // write back to the code field when you pick the item.
        },
      );
    },
    backgroundColor: Colors.black,
    offset: const Offset(0, 0),
  ),
),

// -----

  static List<String> keywordsFromMode(mode) {
    var tips = <String>[
      ...mode?.keywords?.keys ?? [],
    ];
    mode?.contains?.forEach((m) {
      tips.addAll(keywordsFromMode(m));
    });
    return tips;
  }

[BertrandBev]

Really good stuff, thanks @CorvusYe !

[CorvusYe]

And thank you for the excellent work you've done before. @BertrandBev

[com-insidecode]

Hi, i need add this on my project. can you please help me with a complete tutorial how i can add your code.

Thanks!

[CorvusYe]

@com-insidecode Is there anything I can do to help?

[com-insidecode]

Thanks for answer, i just trying to add your code but its not doing nothing. Can you share me a sample code implementing your example. Thanks!

[CorvusYe]

@com-insidecode

https://github.com/BertrandBev/code_field/assets/15630211/8e744380-1526-456f-8524-598d7a817427

I just submitted a minimum implementation method. Perhaps you can make some changes based on this version.

[com-insidecode]

Excellent, it works perfect for me. It's there a way to implement owns objects?

[CorvusYe]

@com-insidecode Do you mean the following?

autoComplete: CodeAutoComplete<T>(
   optionsBuilder: (...) {
       return [T()];
   },
   itemBuilder: (ctx, T owesObjectTip, ...) {

   }
)

[com-insidecode]

No i mean create like custom clases?

Ex: JavaScript:

import * as Example from "/src/script.js";

console.log(Example.Name);

Output: Name

[CorvusYe]

@com-insidecode Like this？

autoComplete: CodeAutoComplete<Example>(
   optionsBuilder: (...) {
       return [Example()];
   },
   itemBuilder: (ctx, Example ex, ...) {
       return Text(ex.Name);
   }
)

Sorry, I don't think I understand.

[VittorioParagallo]

Can't find the autocomplete parameter. Can it be that i'm using the version from pub dev and that's not updated?

[CorvusYe]

@VittorioParagallo Could you refer to this https://github.com/CorvusYe/issues_demo/blob/main/code_field_82/lib/main.dart#L65-L65

[VittorioParagallo]

@VittorioParagallo Could you refer to this https://github.com/CorvusYe/issues_demo/blob/main/code_field_82/lib/main.dart#L65-L65

Ok thanks.. i saw your pubspec and solved the problem!

[VittorioParagallo]

One more question about the autocomplete constraints for the tip panel size.. i can't figure out how to tell that the overlay menu of tip panel should be dynamicly big from the point it pops-up till the end of the windows for both height and width. I don't want to give fixed values like 200x200.