feat: inline editor

[fsbraun]

New feature: Inline editing

Especially for small changes but also for all layouts that consist of more than one Text plugin the edit cycle is simplified: If activated the modal for the change form of a Text plugin does not have to be opened.

Activate by having TEXT_INLINE_EDITING = True in your settings.py.

• Just click on the text and start typing!
• Plugins are saved automatically when leaving the editor
• All styles of the page are available (since the edited text is rendered in its template not the change form).
• Text child plugins are available
• Text plugins are created as usual in the structure board.
• Traditional modal editing is still available from the structure board
• Works best with django-cms 3.10+ (since previous versions have a bug not updating the toolbar correctly after edits)
• A button in the toolbar allows users to turn on and off inline editing: Useful of you need right-clicks on your HTML (otherwise caught by ckeditor)

Drawbacks

• A Text plugin's HTML has to be encapsulated by a div to allow inline editing. This can break some custom styles. Use "View published" or switch inline editing off using the toggle button with the pencil
• For this to work the way the ckeditor config is communicated from the backend to the frontend has changed: It's separated in a <script> tag generated by Dajngo's json_script template tag - also if TEXT_INLINE_EDITING is not set to True.

Bugs fixed

• Unwanted scrolling
• Now also works in setups with a custom cms/plugins/text.html file. Price is a new cms/plugins/inline.html template.
• Child plugins with a Select field make CKEditor open the Select field dialog above the child plugin dialog
• Stops users accidentally navigating away from unsaved edits
• Toolbar update keeps the right url for inline editor toggle button
• Toggle button only for non-touch devices and expanded toolbar.

Know bugs (to be fixed)

Please add comments to this PR if you find any!

[vinitkumar]

Looks good to me!

[vxsx]

thanks for the pull request, the feature looks very nice. still need to actually test it, but added some comments from what i could see so far

[fsbraun]

@vxsx Thanks very much for the comments! They make a lot of sense to me! I appreciate it! Let me know what you think when trying out!

I'll have a thought about auto save but my initial reaction is that it will be a must. You always can revert to the published version.

[fsbraun]

@vxsx Vadim, I've made some changes. Thanks once more for the helpful comments

• Events are now namespaced .cms-ckeditor
• They are unregistered when destroying the editors
• To interact with CMS' user interface as little as possible, I have
  • Changed the events so that (except for double click) they propagate to the CMS
  • The tooltip is forced to be hidden for Text plugins when inline editing (since they contain an incorrect message and are covering the text to be edited)
  • A click triggers the _highlight_Textplugin method (since the build-in highlight only works if the tooltip is visible).
• As a result shift-hover and other CMS events work now as expected
• In my opinion auto-save is the natural way to do inline editing. (Users can always revert to the published version or use djangocms-history or djangocms-versioning.) This behavior mimics Word or Google Docs. The only viable alternative to me seems to have a save button in the toolbar when inline editing. This would lead to problems with text plugins (since changing one requires the page to reload and therefore to be saved) and I fear confusion of save and publish.

[vxsx]

i also encountered this when testing locally https://www.dropbox.com/s/nk7ykacpvaa2qqe/something%20weird.mov?dl=0

however afterwards it worked correctly, not quite sure what was up

first text plugin was created without inline editing mode, afterwards i've enabled the setting and refreshed

[vxsx]

otherwise looks good to me
i sadly won't be available till next monday for any further help (short vacation, sorry)

[fsbraun]

The newline gives me a headache: I cannot stop pycharm adding one automatically. Apparently github editor does the same. Tried emacs, no success, alas. Finally did install truncate on my machine. Wow!

Will fix the bug for inline. It is actually was supposed to solve a bug leading to inline-flex objects be shown as block objects in ckeditor.

[fsbraun]

Also, the bug you've recorded @vxsx seems to be a "follow-up" effect of the displayStyle bug and should be fixed now. Let me know if not!

I've managed to remove the new lines at the end of text.html and inline.html.

Have a great vacation!

[fsbraun]

i also encountered this when testing locally https://www.dropbox.com/s/nk7ykacpvaa2qqe/something%20weird.mov?dl=0

Quick explanation: CKeditor inserts its css into the head of the page. When the toolbar is reloaded the css is removed. Therefore I keep a copy of the css and replace it after reload. If the spawning of the editor fails before it is finished (e.g. due to the displayStyle bug) the css is not saved and the editor toolbar just contains the names of the toolbar items like in the screen recording.

however afterwards it worked correctly, not quite sure what was up

first text plugin was created without inline editing mode, afterwards i've enabled the setting and refreshed

Creation (or copying) of text plugins is only possible through the structure boards "+" button.

[vxsx]

LGTM!

[vxsx]

seems like some sort of tabs vs spaces issue

[fsbraun]

@vxsx Thanks so much! 🚀