feat: inline editor #606

fsbraun · 2022-05-04T14:25:16Z

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!

Fix: Admin forms w/o plugin

vinitkumar

Looks good to me!

djangocms_text_ckeditor/templates/cms/plugins/text.html

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

djangocms_text_ckeditor/static/djangocms_text_ckeditor/js/cms.ckeditor.js

fsbraun · 2022-06-07T14:53:52Z

@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 · 2022-06-08T08:54:48Z

@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.

djangocms_text_ckeditor/static/djangocms_text_ckeditor/ckeditor_plugins/cmswidget/plugin.js

vxsx · 2022-06-08T13:30:24Z

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 · 2022-06-08T13:35:08Z

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

fsbraun · 2022-06-08T13:44:05Z

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 · 2022-06-08T15:03:19Z

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 · 2022-06-08T15:09:46Z

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 · 2022-06-13T16:12:56Z

djangocms_text_ckeditor/static/djangocms_text_ckeditor/ckeditor_plugins/cmsplugins/plugin.js

-                that.editor.insertHtml(res, 'unfiltered_html');
-                that.editor.fire('updateSnapshot');
+				CMS.CKEditor.editors[editor.id].changed = true;
+				CMS.CKEditor.editors[editor.id].child_changed = true;


seems like some sort of tabs vs spaces issue

fsbraun · 2022-06-13T17:27:05Z

@vxsx Thanks so much! 🚀

fsbraun added 30 commits March 22, 2022 13:06

Fix: Tests dj4 compatible

f3d0a0e

Merge branch 'django-cms:master' into master

3acb10a

Feature: Inline editing

01766fc

Make flake (8 happy)

096e2d5

Fix: Inline editing js only loaded in edit mode.

10bfceb

Fix: Only create InlineEditor for visible elements

f3e8b19

Fix: Keep child plugins in tact while inline editing

94d67cb

Fix: Tests

4d71492

Fix: Flake8 and isort

41a0bfc

Fix: Add editor condig to dom using toolbar

80ca947

Refactor: unify ckeditor management

49ea268

Add: Plugin editing in the inline editor

883df88

Fix: Avoid prepare single load of text

6c5031e

Fix: Strongly increased responsiveness. Common csrf token

c3ab886

Fix: isort, flake8

4801505

Fix: isort

cfcc94c

Add: dark mode for frontend editing

39f7dd7

Fix: only group plugins into modules if there are any

8ea4739

Fix: non-placholder fields

ee71958

Fix: Add cms_path to post requests

2e7db57

Add: show toolbar loader when saving

9b15686

Fix: remove console.logs, better style

8be8029

Fix: Bind CKEDITOR only after load

603d284

Fix: Reload toolbar after save to allow edits to be published

b5ab516

Fix: Refactor toolbar reload for better reusability

5328a2f

Fix: Memorize styles before first edit

667aa26

Fix: Admin forms w/o plugin

Fix: updated js file in widgets.py

f6b57d3

Fix: admin htmlfields

e40bb0d

Fix: Remove debug console.log statements

39ec6e9

Fix: Child Plugin editor confusion.

dbb8376

fsbraun marked this pull request as ready for review May 30, 2022 10:48

Fix: Remove toggle button on touch devices and in collapsed menus.

5e0c32f

fsbraun assigned vxsx Jun 6, 2022

fsbraun requested a review from vxsx June 6, 2022 05:24

fsbraun unassigned vxsx Jun 6, 2022

vinitkumar approved these changes Jun 6, 2022

View reviewed changes

vxsx reviewed Jun 7, 2022

View reviewed changes

djangocms_text_ckeditor/templates/cms/plugins/text.html Outdated Show resolved Hide resolved

fsbraun added 2 commits June 7, 2022 15:59

No white space before of

af70959

Fix: No white space at elf for inline.html

25f1d8b

vxsx reviewed Jun 7, 2022

View reviewed changes

fsbraun added 2 commits June 7, 2022 18:15

Merge branch 'django-cms:master' into feature/inline-editor

8b7bc12

Fix: namespace events, unregister events

90eb21b

fsbraun added 4 commits June 8, 2022 11:17

Fix: z-index to let dialog float above structure board

331849f

Update: readme.rst

bb33c3d

NO NEWLINE AT THE END!

c405647

NO NEWLINE AT THE END

320ee5b

vxsx reviewed Jun 8, 2022

View reviewed changes

djangocms_text_ckeditor/static/djangocms_text_ckeditor/ckeditor_plugins/cmswidget/plugin.js Show resolved Hide resolved

Fix: remove newlines at end of text.html and inline.html

8d6bfe2

Fix: displayStyle undefined bug

3481820

vxsx approved these changes Jun 13, 2022

View reviewed changes

fsbraun added the status: ready to be merged label Jun 13, 2022

vinitkumar merged commit 31cb918 into django-cms:master Jun 13, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: inline editor #606

feat: inline editor #606

fsbraun commented May 4, 2022 •

edited

Loading

vinitkumar left a comment

vxsx left a comment

fsbraun commented Jun 7, 2022

fsbraun commented Jun 8, 2022

vxsx commented Jun 8, 2022 •

edited

Loading

vxsx commented Jun 8, 2022

fsbraun commented Jun 8, 2022

fsbraun commented Jun 8, 2022

fsbraun commented Jun 8, 2022

vxsx left a comment

vxsx Jun 13, 2022

fsbraun commented Jun 13, 2022

feat: inline editor #606

feat: inline editor #606

Conversation

fsbraun commented May 4, 2022 • edited Loading

New feature: Inline editing

Drawbacks

Bugs fixed

Know bugs (to be fixed)

vinitkumar left a comment

Choose a reason for hiding this comment

vxsx left a comment

Choose a reason for hiding this comment

fsbraun commented Jun 7, 2022

fsbraun commented Jun 8, 2022

vxsx commented Jun 8, 2022 • edited Loading

vxsx commented Jun 8, 2022

fsbraun commented Jun 8, 2022

fsbraun commented Jun 8, 2022

fsbraun commented Jun 8, 2022

vxsx left a comment

Choose a reason for hiding this comment

vxsx Jun 13, 2022

Choose a reason for hiding this comment

fsbraun commented Jun 13, 2022

fsbraun commented May 4, 2022 •

edited

Loading

vxsx commented Jun 8, 2022 •

edited

Loading