When will support for math formulas be added?

[jackie-weiwei]

I added the following code in function _embedBuilder to support mathematical formulas. It works very well. The only problem is that when the formula is too long, the display is incomplete. I would like to ask if there is a better way to solve this problem.

if (node.value.type == "latex") {
      final aa = node.value.data['source'];
      return Math.tex(
        aa,
        mathStyle: MathStyle.display,
        // textStyle: const TextStyle(fontSize: 30),
      );
    }

[Amir-P]

I used latext to render LaTeX and it seems to work well and wraps into two lines when overflows the width of the editor. Here's an example:

import 'package:fleather/fleather.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:latext/latext.dart';

void main() {
  runApp(const FleatherApp());
}

class FleatherApp extends StatelessWidget {
  const FleatherApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData.light(),
        darkTheme: ThemeData.dark(),
        title: 'Fleather - rich-text editor for Flutter',
        home: HomePage(),
      );
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

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

class _HomePageState extends State<HomePage> {
  final FocusNode _focusNode = FocusNode();
  late final FleatherController _controller;

  @override
  void initState() {
    super.initState();
    _controller = FleatherController(
        document: ParchmentDocument.fromJson([
      {"insert": "Fleather"},
      {
        "insert": "\n",
        "attributes": {"heading": 1}
      },
      {
        "insert": {
          "_type": "latex",
          "_inline": false,
          "content":
              r"A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B",
        }
      },
      {"insert": "\nFleather\n"},
    ]));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(elevation: 0, title: Text('Fleather Demo')),
      body: Column(
        children: [
          FleatherToolbar.basic(controller: _controller),
          Divider(height: 1, thickness: 1, color: Colors.grey.shade200),
          Expanded(
            child: FleatherEditor(
              controller: _controller,
              focusNode: _focusNode,
              padding: EdgeInsets.only(
                left: 16,
                right: 16,
                bottom: MediaQuery.of(context).padding.bottom,
              ),
              maxContentWidth: 800,
              embedBuilder: _embedBuilder,
              spellCheckConfiguration: SpellCheckConfiguration(
                  spellCheckService: DefaultSpellCheckService(),
                  misspelledSelectionColor: Colors.red,
                  misspelledTextStyle: DefaultTextStyle.of(context).style),
            ),
          ),
        ],
      ),
    );
  }

  Widget _embedBuilder(BuildContext context, EmbedNode node) {
    if (node.value.type == 'latex') {
      return LaTexT(
          laTeXCode: Text(
              // node.value.data['content'],
              r"A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B=A-$\alpha$-B",
              style: Theme.of(context)
                  .textTheme
                  .bodyText1
                  ?.copyWith(color: Colors.red)));
    }

    return defaultFleatherEmbedBuilder(context, node);
  }
}