hym_ui/lib/Compose.dart

import 'package:flutter/material.dart';
import 'package:super_editor/super_editor.dart';
import 'package:super_editor_markdown/super_editor_markdown.dart';

class ComposeEmail extends StatefulWidget {
  final VoidCallback onClose;
  final Function(String) onMinimize;
  final Function(String) onSendMessage;
  const ComposeEmail({
    Key? key,
    required this.onMinimize,
    required this.onClose,
    required this.onSendMessage,
  }) : super(key: key);

  @override
  _ComposeEmailState createState() => _ComposeEmailState();
}

class _ComposeEmailState extends State<ComposeEmail> {
  // if one were to alter a mutableDocument, one should only alter the document through EditRequest to the Editor
  late final Editor _editor;
  late final MutableDocument _document;
  late final MutableDocumentComposer _composer;
  TextEditingController _emailRecipientController = TextEditingController();

  @override
  void initState() {
    super.initState();

    _document = MutableDocument(nodes: [
      ParagraphNode(
        id: Editor.createNodeId(),
        text: AttributedText("hello world!"),
      )
    ]);
    _composer = MutableDocumentComposer();
    _editor =
        createDefaultDocumentEditor(document: _document!, composer: _composer!);
  }

  @override
  void dispose() {
    _editor.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Positioned(
      bottom: 10.0,
      right: 10.0,
      child: Material(
        elevation: 8.0,
        child: Container(
            width: 600.0,
            height: 616.0,
            decoration: BoxDecoration(
              color: Colors.white,
            ),
            child: Column(children: [
              AppBar(
                title: const Text("new message"),
                actions: [
                  IconButton(
                      onPressed: () {
                        //TODO: implement minimize, and submit email to drafts
                        widget.onClose();
                      },
                      icon: Icon(Icons.minimize, color: Colors.grey[600])),
                  IconButton(
                      onPressed: () {
                        //TODO: implement that maximizing
                      },
                      icon: Icon(Icons.maximize, color: Colors.grey[600])),
                  IconButton(
                      onPressed: () {
                        widget.onClose();
                      },
                      icon: Icon(Icons.close, color: Colors.grey[600])),
                ],
              ),
              Container(
                // TODO: WHEN NOT CLICKED ITS ONLY A TEXTFIELD WITH A HINT, AND THEN WHEN CLICKED THIS 
                width: 500.0,
                height: 40.0,
                child: Row(
                  children: [
                    TextButton(onPressed: () {}, child: Text("To:")),
                    Expanded(
                      child: TextField(
                        controller: _emailRecipientController,
                      ),
                    ),
                    TextButton(onPressed: () {}, child: Text("Cc")),
                    SizedBox(
                      width: 4.0,
                    ),
                    TextButton(onPressed: () {}, child: Text("Bcc")),
                  ],
                ),
              ),
              Expanded(
                  //here the widget goes
                  child: SuperEditor(
                    editor: _editor!,
                    plugins: {MarkdownInlineUpstreamSyntaxPlugin()},
                    stylesheet: Stylesheet(
                      rules: [StyleRule(BlockSelector.all, (doc, docNode) {
                        return {
                          Styles.maxWidth: 640.0,
                          Styles.padding: const CascadingPadding.symmetric(horizontal: 24),
                          Styles.textStyle: const TextStyle(
                            color: Colors.black,
                            fontSize: 15,
                            height: 1.4,
                          ),
                        };
                      }),],
                      inlineTextStyler: defaultInlineTextStyler)
                  ),
              )
            ])),
      ),
    );
  }
}

class OverlayService {
  static final OverlayService _instance = OverlayService._internal();
  factory OverlayService() => _instance;
  OverlayService._internal();
  OverlayEntry? _overlayEntry;

  void showPersistentWidget(BuildContext context) {
    if (_overlayEntry != null) {
      print("overlay visible");
      return;
    }
    _overlayEntry = OverlayEntry(
        builder: (context) => ComposeEmail(
              onClose: () {
                removeComposeWidget();
              },
              onMinimize: (String content) {
                minimizeComposeWidget(content);
              },
              onSendMessage: (message) {
                print('msg senf form overlay $message');
              },
            ));
    Navigator.of(context).overlay?.insert(_overlayEntry!);
    print("inserted into tree");
  }

  void removeComposeWidget() {
    _overlayEntry?.remove();
    _overlayEntry = null;
  }

  String minimizeComposeWidget(String content) {
    //just hide the overlay but keep its info
    return '';
  }
}