Nested properties get ignored.

[jay-cox]

When initializing a quill view with existing content nested properties get overridden by the outermost definition

Steps for Reproduction

1. Visit the quilljs.com interactive playground
2. Replace the contents of the #editor-container with
   <span style="color: #000;">black <span style="color: #F00;">red</span> black</span>

Expected behavior:
The word red should be colored red.

Actual behavior:
All the words are black

Platforms:
safari 10.0.3
OS X Yosemite 10.10.5

Version:
1.2.0

[jay-cox]

After investigating I have found that the clipboard module is building up the document in a depth first order. This causes parent attributes to always overwrite child attributes.

One way to fix this is by adding an option for 'retain' Deltas to be soft - i.e. to preserve existing attribute values if they exist.

I have pull requests on the quill-delta and quilljs projects that implement this:

• quill-delta pull request # 8
• quilljs pull request Preserve nested formatting #1336

[jhchen]

I think for the Clipboard's purposes it should always favor the lower tree nodes since that how CSS rules are prioritized so a config is not necessary. I don't think modifying the Delta API is the best approach and others should be explored first as the cost of this approach is supporting that API forever and all the interactions with other APIs.

[jay-cox]

Yes, for clipboard (as currently written) use case you always want to prioritize the existing values, but for the interactive case you always want to prioritize the new values.

Modifying the delta API should certainly be considered carefully.

The clipboard traverse and match* functions could be rewritten to work top down with the existing delta API, but this will require some extra bookkeeping outside of the Deltas.

[jay-cox]

The Delta API is very simple with only insert, retain, and delete operations, but powerful enough to build a full text editor on top of.

My proposed "soft" retain, while it would be useful in certain document creation situations, is not likely to be useful for general document editing.

If the Delta API is to be expanded is should probably be in a way that is much more generally applicable than my 'soft' retain proposal.

One possible addition that would work for both document editing and creation cases is to allow passing in a function to control how attributes are merged on retain operations. This could be an optional argument to retain operations, or it could be a new operation type.

Doing it that way would allow a simple way to add editor features like 'make selected text 20% larger' as well as allow for a simple way to perform 'soft' retains for document creation workflows.

it could be used something like this:

function scale_text(a, b)
{
  let attributes = extend(true, {}, a);
  if (a['font-size'])
    attributes['font-size'] *= b.scale_factor;  // real code would need to account for units.
  else
    attributes['font-size'] = b.scale_factor + 'em';
  return attributes;
}

filter = new Delta().retain(12, {scale_factor: 1.2}, scale_text)

If it is a requirement that Deltas are able to be persisted, then one could add an indirection through a registry without too much extra effort.

[jhchen]

I think I would favor just fixing this specific bug in the Clipboard (which is used for initialization).

[dsathyan]

I can still reproduce the issue

From test case - <span style="color: red;"><span style="color: blue;">Test</span></span>

If I add this to editor(innerHTML) and get the delta (quill.getContents()), I get -
{"ops":[{"attributes":{"color":"red"},"insert":"Test"},{"insert":"\n"}]}

In the clipboard - select the string + cut + undo and the text becomes red

[jhchen]

It's working for me. @dsathyan You are following the steps for reproduction precisely? It sounds like you are doing something else from the mention of innerHTML

[dsathyan]

My bad, it does work

And innerHTML unleashes a different beast and not related to clipboard