TarekkMA / markdown_quill

Convert quill (Delta) fromat to and from markdown
MIT License
19 stars 43 forks source link

Force new line characters #36

Open matt3o opened 2 weeks ago

matt3o commented 2 weeks ago

Hey guys :)

Converting this text

**Kaufvertrag für ein Auto**

**Zwischen:**

**Verkäufer**  
Name: ___________________________  
Adresse: _________________________  
Telefonnummer: ___________________

yields

Kaufvertrag für ein Auto
Zwischen:
Verkäufer
Name: ___________________________
Adresse: _________________________
Telefonnummer: ___________________

But instead I would have wanted

Kaufvertrag für ein Auto

Zwischen:

Verkäufer
Name: ___________________________
Adresse: _________________________
Telefonnummer: ___________________

Is there any way to force that during the conversion process? I looked through the other issues but did not find any good tips on how to achieve that.

Thanks a lot in advance! Matthias

TarekkMA commented 2 weeks ago

Hello, thanks for reporting this issue.

Can you take a look at this PR and see if it did solve your issue? https://github.com/TarekkMA/markdown_quill/pull/35

matt3o commented 2 weeks ago

Sadly that does not change anything. I switch from 4.2.0 to the master branch of this github repo and nothing changed. Might be a regression bug as it looks way better on both flutter markdown conversion pages you linked previously.

Just to visualize the problem: Local output of the flutter app: image

https://tarekkma.github.io/markdown_quill_playground/: image

https://dart-lang.github.io/markdown/: image

matt3o commented 2 weeks ago

This the code, maybe I call it incorrectly?

// screens/quill_screen.dart
import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill.dart';
import 'package:markdown/markdown.dart' as md;
import 'package:markdown_quill/markdown_quill.dart';
import 'package:flutter_quill_delta_from_html/flutter_quill_delta_from_html.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Quill Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: QuillEditorScreen(),
    );
  }
}

class QuillEditorScreen extends StatefulWidget {
  @override
  _QuillEditorScreenState createState() => _QuillEditorScreenState();
}

class _QuillEditorScreenState extends State<QuillEditorScreen> {
  late QuillController _controller;

  @override
  void initState() {
    super.initState();
    final mdDocument = md.Document(
      encodeHtml: false,
      extensionSet: md.ExtensionSet.gitHubFlavored,
    );
    final mdToDelta = MarkdownToDelta(
      markdownDocument: mdDocument,
      // softLineBreak: true,
    );
    final delta = mdToDelta.convert(markdownSampleText);
    // final delta = HtmlToDelta().convert(htmlSampleText);
    _controller = QuillController(
      document: Document.fromDelta(delta),
      selection: TextSelection.collapsed(offset: 0),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Quill Editor'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            QuillSimpleToolbar(
              controller: _controller,
              configurations: const QuillSimpleToolbarConfigurations(),
            ),
            Expanded(
              child: QuillEditor.basic(
                controller: _controller,
                configurations: QuillEditorConfigurations(
                  embedBuilders: [
                    DividerEmbedBuilder(),
                  ],
                ),
                // unknownEmbedBuilder: (context, controller, node) {
                //   return Container(
                //     color: Colors.red,
                //     child: Text('Unsupported embed type: ${node.value.type}'),
                //   );
                // },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class DividerEmbedBuilder implements EmbedBuilder {
  @override
  String get key => 'divider';

  @override
  Widget build(BuildContext context, QuillController controller, Embed node, bool readOnly, bool isSelected, TextStyle textStyle) {
    return Divider(
      thickness: 2.0,
      color: Colors.grey,
    );
  }

  @override
  WidgetSpan buildWidgetSpan(Widget widget) {
    return WidgetSpan(child: widget);
  }

  @override
  String toPlainText(Embed node) {
    return '\n---\n';
  }

  @override
  bool get expanded => false;

  @override
  bool get triggerOnEnter => false;

  @override
  bool get triggerOnSpace => false;
}

const String markdownSampleText = """
**Kaufvertrag für ein Auto**

**Zwischen:**

**Verkäufer**  
Name: ___________________________  
Adresse: _________________________  
Telefonnummer: ___________________

und

**Käufer**  
Name: ___________________________  
Adresse: _________________________  
Telefonnummer: ___________________

**wird folgender Kaufvertrag abgeschlossen:**

---
""";
TarekkMA commented 2 weeks ago

This doesn't appear to be a regression since no tests failed.

I'll investigate this issue when I have availability. In the meantime, feel free to submit a PR if you find a solution for the issue.


Regarding the markdown testing tools:

These tools can help identify any differences (if found) in markdown handling between the two implementations.

matt3o commented 2 weeks ago

Which version is https://tarekkma.github.io/markdown_quill_playground/ actually runing on? Because there it appears to work. Might help for debugging the issue :)

TarekkMA commented 2 weeks ago

It doesn't use markdown_quill, it's just using flutter_markdown and converting it to widgets. information about it can be found here https://github.com/TarekkMA/markdown_quill_playground

matt3o commented 2 weeks ago

@TarekkMA https://github.com/TarekkMA/markdown_quill/pull/37 fixes it for me - it does however break the tests. Would be cool, if you could look into that issue, many thanks!