This is WIP implementation of https://github.com/fleather-editor/fleather/discussions/62 .

Atm it works without introducing a new embed type. I like the simplicity of it but it might not be the case in real life scenarios (e.g horizontal rule must be the only child on a line). So maybe we can add a constraint on horizontal rule that it must be lone child or let it up to the user?

How does it work?

I have implemented GroupEmbedProxy (I don't like the name :/). This new proxy class simply delegates laying out the children to Flutter's Flex widget. I had to create new RenderGroupEmbedProxy class so that it implements caret methods.

What I need help with:

• Feedback
• Testing
• Pointers where and how to write tests (I am new to Flutter)

What I am planning to work on more:

• Fix: Inserting text between the embeds only splits new line and doesn't show the text. Text later reappears after inserting new line.
• Fix: It is not possible to remove new line between two embeds.

Screencast from 2022-12-10 14-35-41.webm

What do you think of adding support for displaying multiple remote selections?

What do you think of the direction of this patch?

(I suspect to do it really nicely we also need to add overlays where we display the name associated to each selections).

Probably some fade-in / fade-out also.

This PR is necessary to close #56. Parchment can now convert a document Delta to HTML and convert HTML to Delta.

Encoding :

• Code blocks are converted to

<pre>
  <code>void main() {</code>
  <code>  println('Hello world!');</code>
  <code>}</code>
</pre>

• Alignments translate to

<p style="text-align:left|center|right|justify;">Some text</p>

• Checklists give the following result:

<div class="checklist">
  <div class="checklist-item><input type="checkbox" checked><label>item 1</label></div>
  <div class="checklist-item><input type="checkbox"><label>item 2</label></div>
</div>

• Indentations on blocks that are not lists give the following

<p style="padding-left:32px">indented text</p>

• Directionality is converted as follows:

<p dir="rtl">العربية</p>

• Single paragraphs (plain blocks) are encoded to simple text (no <p>)

A single <strong>paragraph</strong>

Decoding :

• Checklists are not supported as there are numerous ways to layout <input>s
• Indentations in blocks that are not lists are not supported due to the numerous way of materializing in HTML
• <br>'s are ignored as they do not map to any attribute in Fleather (new line lead necessarily to a new block)

• Add a vscode launch configuration to easily launch the example
• stop throwing when _textInputConnection is null (this happens on Linux from time to time)
• stop requesting focus/keyboard every time the text changes, this makes it impossible to have two collaborative editor on the same page. (one editor steal the focus of the other when receiving changes otherwise)

The last change probably needs serious testing on all platform. (there must be a reason it was there..)

I can rebase, split into smaller changes if needed.

Fixes #29

Before fix (go to menu once document is open, emulates opening an empty document and setting focus)

https://user-images.githubusercontent.com/17318211/186650849-74b992b9-dea5-419a-bbe9-e3778ada3ddc.mov

After fix

https://user-images.githubusercontent.com/17318211/186650873-f787b8a9-3a67-4c4d-b504-e238fc7f669d.mov

This is an example of a collaborative editor for Fleather.

Should we extract the logic somehow to make it reusable?

Note that there is a bug that make the focus switch between the two editors in the example.

Feedback welcome :)

This is the first part of a couple of PRs (the first one is related to Parchment) Simply adapts the text style with the appropriate background color.

NB: this won't build successfully as it has a dependency on Parchment NB: no toolbar item to pick a color in the PR, this will be part of a later PR

Fixes to _ParchmentHtmlEncoder:

1. ParchmentHtmlCodec wasn't exported from the package. :smiley:
2. Text with empty line breaks did not render as blank lines.
3. Text with HTML characters such as < > and & were not escaped.
4. Code blocks (<pre>) were not rendering with line breaks.
5. Block quotes (<blockquote>) were not rendering in the fashion that you see in Fleather, or that you'd typically see in HTML email.
6. Checklist changes - Added some space between the checkbox and the label, they rendered kind of jammed together. Also, render the checkbox as disabled so the user cannot check/uncheck it.
7. There was an issue with multi-level lists with a plain paragraph following them - the paragraph would get rendering in the list.
8. Render images so that they will fit within the parent's width, if any. If the parent doesn't have any width, this does nothing. This is useful when generation email HTML, for example, so that the image doesn't bleed out of view.
9. Fix checklist followed by a paragraph.

cc: @amantoux

Hey,

I am currently writing a mobile app for a CMS I develop. In the web app I currently use tinyMCE, is it possible to load the HTML into fleather or convert it to open?

Greetings DerKnerd

Considering the following embed

SpanEmbed square() => SpanEmbed('square');

with the embed builder

if (node.value.type == 'square') {
  return SizedBox(
    width: 120,
    height: 50,
    child: Container(
      color: Colors.red,
    ),
  );
}

and this input

{
  "insert": "Some text"
},
{
  "insert": {
    "_type": "square",
    "_inline": true
  }
},
{
  "insert": {
    "_type": "square",
    "_inline": true
  }
},
{
  "insert": "some other text\n"
}

results in

and with softwrap

otherwise _hasFocus for EditableTextLine is false while the widget has the focus and the cursor is not displayed.

This is triggered when the text field is empty. (not always, but most of the time).

In practice: you click on an empty Fleather editor and nothing happens. (the cursor doesn't start blinking). I also tried to remove the the _hasFocus check from https://github.com/fleather-editor/fleather/blob/master/packages/fleather/lib/src/rendering/editable_text_line.dart#L731 and it worked perfectly from my test. (not printing the cursor when it was not needed...so if you know what is best...)

Otherwise hitTest are wrong and onEnter/onExit/recognizer/mouseCursor of TextSpans recognise the trailing empty space as a hit while it actually is not.

Before:

https://user-images.githubusercontent.com/49141/208324135-26cd552d-403f-41e3-a554-469c7b183e6a.mov

After:

https://user-images.githubusercontent.com/49141/208324132-a03ce4f7-f1d0-4af4-92d7-be37f2bca324.mov

This is a revisited implementation of my original MR: https://github.com/fleather-editor/fleather/pull/66

I had to rewrite EnsureEmbedLineRule because I couldn't understand what was going on there...

Screencast from 2022-12-17 19-43-59.webm

This is a WIP mostly because I believe the API is quite brittle. It is working nicely for me. I wonder what is the best way to integrate all that. Do you have ideas for the API? Should we provide the whole overlay system.

It currently uses the internals of flutter_portal so that everything can align nicely and stay within the overlay window if requested. (this is what portalTheater is useful for)

Mention are based on a branch of fleather_mention by @Amir-P, see here: https://github.com/jotshq/fleather_mention PS: the mention branch has not been cleaned yet.

They enable the following workflows:

/ triggers a mention autocomplete	overlay on hover	floating toolbar

== Anchors ==

Anchors have two modes:

• withLayerLink: allows having a layerLink associated to a TextPosition
• Selection: to draw a selection or cursor

The first mode is useful for properly positioning mentions or a floating toolbar. The second mode is useful for remote selections.

I plan to rebase the TextSelection like we do with the main selection on changes. (yet to implement)

== customTextSpan ==

customTextSpan allows overriding the construction of our textSpans. It is useful to get access to mouseEnter/mouseExit and also provide a layerLink associated with the current rendered line. It can be used for displaying overlays when hovering a mention or a link.

• document: throw instead of assert when document is invalid, invalid document is just a valid error, leave a chance to the user of the API to fix it.
• display an error instead of throwing on invalid textspan / embed. Another fix may be avoid throwing on in the default embed builder.

what do you think?