toHtml method

Future<String> toHtml()

Converts the current instance's Delta representation to HTML format.

This method loads the Quill JavaScript library and utilizes the QuillDeltaToHtmlConverter to convert the Delta representation to HTML. A headless in-app WebView is used for this conversion.

Returns:

  • A Future that completes with the converted HTML string.

Implementation

Future<String> toHtml() async {
  // Load the Quill JavaScript library from the specified path.
  final String quillJs = await rootBundle.loadString('packages/$packageName/lib/assets/js/quill.min.js');

  // Completer to hold the final HTML result.
  final Completer<String> completer = Completer<String>();

  late HeadlessInAppWebView webView;

  // Initialize the headless WebView with the loaded Quill library and a script to trigger the conversion.
  webView = HeadlessInAppWebView(
    initialData: InAppWebViewInitialData(
      data: '''
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <script>$quillJs</script>
        </head>
        <body>
            <h1>JavaScript Handlers</h1>
            <script>
                  window.addEventListener("flutterInAppWebViewPlatformReady", function(event) {
                    var converter = new QuillDeltaToHtmlConverter(${jsonEncode(toJson())}, {});
                    var html = converter.convert();
                    window.flutter_inappwebview.callHandler('deltaToHtml', ...[html]);
                  });
            </script>
        </body>
    </html>
    ''',
    ),
    onWebViewCreated: (InAppWebViewController controller) {
      // JavaScript handler to retrieve the converted HTML and complete the completer.
      controller.addJavaScriptHandler(
        handlerName: 'deltaToHtml',
        callback: (List<dynamic> args) {
          // Check if the arguments are not empty and complete the completer with the HTML string.
          if (args.isNotEmpty) {
            completer.complete(args.first as String);
          } else {
            completer.complete('');
          }
          // Dispose the WebView after getting the HTML.
          webView.dispose();
        },
      );
    },
  );
  await webView.run();

  return completer.future;
}