Process, whitelist, blacklist, migrate available blocks, styles and entities when pasting rich text #50

thibaudcolas · 2017-03-10T10:39:25Z

Very WIP.

coveralls · 2017-03-10T10:44:38Z

Coverage increased (+0.2%) to 56.543% when pulling e2feca2 on feature/rich-paste-filtering into fa88c74 on master.

coveralls · 2017-03-10T18:28:32Z

Coverage increased (+0.2%) to 56.543% when pulling 3e36fd5 on feature/rich-paste-filtering into 3641d6f on master.

…led (#103)

thibaudcolas · 2017-12-03T17:39:22Z

.github/CONTRIBUTING.md

@@ -15,7 +15,6 @@ The behavior of this editor is heavily inspired by prior art. If you want to dis
 * [ ] [Google Docs](https://docs.google.com/)
 * [ ] [Apple Pages](https://www.apple.com/lae/pages/)
 * [ ] [Dropbox Paper](https://www.dropbox.com/paper)
-* [ ] [Open Office Writer](https://www.openoffice.org/product/writer.html)


On second thought, I don't want to support this.

thibaudcolas · 2017-12-03T17:39:38Z

.travis.yml

 - mv webpack/webpack-stats.html public || true
+- mv coverage/lcov-report public || true


thibaudcolas · 2017-12-03T17:48:23Z

docs/README.md

+
+Here are specific external sources we want to pay special attention too, and for which we have ready-made test documents with all of the possible rich content.
+
+* [ ] [Microsoft Word](https://products.office.com/en/word): TODO


TODO, urgently. I want to try this on Windows especially, and it will be easier once this is merged.

thibaudcolas · 2017-12-03T17:49:01Z

docs/README.md


 * https://github.com/springload/draftail/blob/df903f86c882bd5101eb05e152e8b8a8b9a4915e/lib/blocks/MediaBlock.js#L60-L71
 * https://github.com/springload/draftail/commit/431c3fd09c4cfc043c8b334544b05b9f580b75d2
 * https://github.com/springload/draftail/blob/df903f86c882bd5101eb05e152e8b8a8b9a4915e/lib/api/behavior.js#L100-L110
 * https://github.com/springload/draftail/commit/8d9de77349cd2f7ee1cba36b03f2946a21039dde
 * https://github.com/springload/draftail/blob/df903f86c882bd5101eb05e152e8b8a8b9a4915e/lib/api/behavior.js#L23:L26
+* https://github.com/springload/draftail/commit/162fc13e193ac581f662de393151efde477183b9


Might add a few more once this is merged, because the paste behavior is very dependent on Draft.js internals right now.

thibaudcolas · 2017-12-03T17:49:56Z

examples/index.html

                <div data-mount-test></div>

-                <hr>
-
                <h3>Copy/paste test cases</h3>


Might put this in a separate file in the future.

thibaudcolas · 2017-12-03T20:13:28Z

lib/api/normalize.js

+                    .filter(type => !enabledTypes.includes(type))
+                    .forEach(type => {
+                        altered = true;
+                        newChar = CharacterMetadata.removeStyle(newChar, type);


Reducing over the array to create a char without any styles. There may be a simpler way, but I doubt there would be chars with more than say 10 inline styles in a worst case scenario. 2-3 is already a lot for real-world content.

thibaudcolas · 2017-12-03T20:14:41Z

lib/api/normalize.js

+                block =>
+                    block.getType() === BLOCK_TYPE.ATOMIC &&
+                    (block.getText() !== ' ' ||
+                        block.getInlineStyleAt(0).size !== 0),


Normalises the block if its text isn't right, or if it has inline styles on it. Happens with pasting from Google Docs.

thibaudcolas · 2017-12-03T20:15:40Z

lib/api/normalize.js

+                const entityKey = block.getEntityAt(0);
+                let shouldReset = false;
+
+                if (entityKey) {


I'm not sure how there could be an atomic block without an entity in real-world content, but we never know.

thibaudcolas · 2017-12-03T20:16:24Z

lib/api/normalize.js

+         * on paste.
+         * A better approach would probably be to split the block where the image is and
+         * create an atomic block there, but that's another story. This is what Draft.js
+         * does when the copy-paste is all within one editor.


This may not be that complicated with the Modifier method that does this, but another time.

thibaudcolas · 2017-12-03T20:16:39Z

lib/api/normalize.js

+                     * that Draft.js inserts.
+                     * If we want to remove this in the future, consider that:
+                     * - It needs to be removed in the block text, where it's 2 chars / 1 code point.
+                     * - The corresponding CharacterMetadata needs to be removed too, and it's 2 instances


Unicode fun.

thibaudcolas added the enhancement New feature or request label Mar 10, 2017

thibaudcolas mentioned this pull request Apr 26, 2017

Deprecate Hallo.js wagtail/wagtail#2409

Closed

4 tasks

thibaudcolas force-pushed the feature/rich-paste-filtering branch from 3e36fd5 to 9b3a7bd Compare May 25, 2017 15:45

thibaudcolas force-pushed the feature/rich-paste-filtering branch 2 times, most recently from 74e7acb to 80ea9c3 Compare October 18, 2017 08:03

thibaudcolas mentioned this pull request Oct 18, 2017

Good copy/pasting support #9

Closed

10 tasks

thibaudcolas force-pushed the feature/rich-paste-filtering branch 2 times, most recently from 9ec1f12 to f5ab772 Compare December 2, 2017 13:48

thibaudcolas and others added 20 commits December 2, 2017 17:32

Add block type normalisation function

b9b1bb5

Implement block type filtering on paste

1adc5d9

Implement function to normalise inline styles

7811581

Add missing test for DraftUtils normalise inline style

101a1a3

Enable filtering / whitelisting of inline styles on paste

52216c4

Add custom styles to pasting test suite

4a30b12

Add TODO comments

29daa20

Remove image, embed, document, and link entities on paste if not enab…

f92d9e9

…led (#103)

Move all paste-related code to a separate module

355809c

Add tests for filterPastedContent call onChange

104b00c

Document manual test plan for copy-paste features

ed0f9ea

Remove duplicate HR_TYPE in favor of ENTITY_TYPE.HORIZONTAL_RULE

564a82e

Finish implementing entity filtering

24b4488

Document and refactor normalize API

01198cc

Mention lack of line break filtering

162fc13

Upgrade considerations

af18f1a

Update demo site to better cater for rich paste testing

291be8f

Add MS Office Online test doc

035f77b

Create images as MUTABLE, like a paste would

603de90

Remove mentions to OpenOffice Writer

103b6c4

thibaudcolas added 3 commits December 3, 2017 17:28

Normalise atomic block text on paste

666364f

Publish coverage report to demo site

969eff6

Add missing tests for pasting filtering

dcba485

thibaudcolas force-pushed the feature/rich-paste-filtering branch from f5ab772 to dcba485 Compare December 3, 2017 17:09

thibaudcolas changed the title ~~[WIP] Filter available blocks, styles and entities when pasting rich text~~ Filter available blocks, styles and entities when pasting rich text Dec 3, 2017

Add first preserve function, for pasting of image/embed/hr blocks

c517d25

thibaudcolas changed the title ~~Filter available blocks, styles and entities when pasting rich text~~ Process, whitelist, blacklist, migrate available blocks, styles and entities when pasting rich text Dec 3, 2017

thibaudcolas added this to the Wagtail 2.0 milestone Dec 3, 2017

thibaudcolas self-assigned this Dec 3, 2017

thibaudcolas added 3 commits December 3, 2017 20:10

Update docs

38ab717

Filter inline styles on atomic blocks

c8de7f6

Fix link to examples page of the site

187fb76

thibaudcolas commented Dec 3, 2017

View reviewed changes

thibaudcolas merged commit 8361d48 into master Dec 3, 2017

thibaudcolas deleted the feature/rich-paste-filtering branch December 3, 2017 20:26

springload deleted a comment from deborahharrus Dec 3, 2017

thibaudcolas mentioned this pull request Dec 4, 2017

Add more copy-paste filtering #123

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Process, whitelist, blacklist, migrate available blocks, styles and entities when pasting rich text #50

Process, whitelist, blacklist, migrate available blocks, styles and entities when pasting rich text #50

thibaudcolas commented Mar 10, 2017

coveralls commented Mar 10, 2017 •

edited

Loading

coveralls commented Mar 10, 2017 •

edited

Loading

thibaudcolas Dec 3, 2017

thibaudcolas Dec 3, 2017

thibaudcolas Dec 3, 2017

thibaudcolas Dec 3, 2017

thibaudcolas Dec 3, 2017

thibaudcolas Dec 3, 2017

thibaudcolas Dec 3, 2017

thibaudcolas Dec 3, 2017

thibaudcolas Dec 3, 2017

thibaudcolas Dec 3, 2017

		- mv webpack/webpack-stats.html public \|\| true
		- mv coverage/lcov-report public \|\| true


		Here are specific external sources we want to pay special attention too, and for which we have ready-made test documents with all of the possible rich content.

		* [ ] [Microsoft Word](https://products.office.com/en/word): TODO

Process, whitelist, blacklist, migrate available blocks, styles and entities when pasting rich text #50

Process, whitelist, blacklist, migrate available blocks, styles and entities when pasting rich text #50

Conversation

thibaudcolas commented Mar 10, 2017

coveralls commented Mar 10, 2017 • edited Loading

coveralls commented Mar 10, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coveralls commented Mar 10, 2017 •

edited

Loading

coveralls commented Mar 10, 2017 •

edited

Loading