Skip to content

Refactor packaging and embed in IFrame

Martijn Vermaat requested to merge refactor-packaging into master

This is an attempt to have the editor as a reusable React component.

Packaging is cleaned up. We no longer use Grunt, but just NPM script definitions. Most everything was done by Webpack anyway.

We use react-frame-component to embed the editor in an IFrame. This way we can sandbox the styling and assume we have the entire document. Note that this does not sandbox the JavaScript, the editor is still completely controlled from the parent document.

Remaining issues

  • Font Awesome icons don't work in Chrome (fixed by setting base URL)
  • Undo/redo toolbar buttons are smaller (fixed by adding doctype, react-frame-component#13)
  • Dropdown toolbar button isn't collapsed when clicking outside it (fixed with react-bootstrap#463)
  • Tooltips are placed incorrectly (fixed with react-bootstrap#463)
  • How does including the component in an external project work? (building, dependencies, ...)
  • Layout needs work (actually irrespective this merge request)

There are probably more, but I hope this is at least a proof of concept.

@z.tatum Could you test this? Should probably:

rm -Rf node_modules
npm install
npm run dev

Merge request reports