Task #85361

CKEditor RTE: Re-add button to insert soft hyphen

Added by Josef Glatz over 1 year ago. Updated about 1 year ago.

Status:
Closed
Priority:
Must have
Assignee:
Category:
RTE (rtehtmlarea + ckeditor)
Target version:
Start date:
2018-06-23
Due date:
% Done:

100%

TYPO3 Version:
9
PHP Version:
Tags:
ckeditor
Complexity:
Sprint Focus:

Description

Problem/Description

You know we are creating responsive websites nowadays. Before the core switched to CKEditor, there was this nice (and shy) soft-hyphen button. Now it's missing. We need that again – we live in an responsive (web-)world.

ToDo(s)

  • Re-add soft-hyphen button (plugin for CKEditor)
  • Add new icon to t3.icons projects on GitHub
    • respect different versions
  • Add as much translations as possible

Acceptance Criteria

*

softhyphen3-visualization-entity.jpg View - Possible to show as HTML entity in Source? (36.2 KB) Sebastian Klein, 2018-06-25 11:07

softhyphen2-visualization-wraps.jpg View - Ugly wraps in workaround to visualize shy entity (43.1 KB) Sebastian Klein, 2018-06-25 11:07

softhyphen1-visualization-css.jpg View - Possible visualization of the shy entity in RTE (33.3 KB) Sebastian Klein, 2018-06-25 11:07


Related issues

Related to TYPO3 Core - Feature #33184: htmlArea RTE: Add button to insert soft hyphen Closed 2012-01-13
Related to TYPO3 Core - Feature #85391: Soft-hyphen (shy entity) should be visible in CKEditor Under Review 2018-06-26

Associated revisions

Revision 69789334 (diff)
Added by Josef Glatz over 1 year ago

[TASK] CKEditor RTE: Add button to insert soft hyphen

This patch re-adds a missing functionality to CKEditor.

Due to the move from htmlArea to CKEditor, the well-known and actually
important button/shortcut "soft hyphen" for text in responsive webdesign
was gone.

The button is added per default to the existing CKEditor presets "default"
and "full". Existing translations from htmlArea have been migrated and
more were added.

Pasting a soft hyphen is possible via the UI button and a keyboard
shortcut: 'CTRL' + '-'. The shortcut can be deactivated in custom
RTE presets.

Resolves: #85361
Releases: master, 8.7
Change-Id: Iec97f4c9d1ede269e2df5cb4fe795df0ef5ca558
Reviewed-on: https://review.typo3.org/57344
Tested-by: TYPO3com <>
Reviewed-by: Joerg Boesche <>
Reviewed-by: Sebastian Klein <>
Tested-by: Sebastian Klein <>
Reviewed-by: Andreas Fernandez <>
Tested-by: Andreas Fernandez <>

Revision a3395ece (diff)
Added by Josef Glatz over 1 year ago

[TASK] CKEditor RTE: Add button to insert soft hyphen

This patch re-adds a missing functionality to CKEditor.

Due to the move from htmlArea to CKEditor, the well-known and actually
important button/shortcut "soft hyphen" for text in responsive webdesign
was gone.

The button is added per default to the existing CKEditor presets "default"
and "full". Existing translations from htmlArea have been migrated and
more were added.

Pasting a soft hyphen is possible via the UI button and a keyboard
shortcut: 'CTRL' + '-'. The shortcut can be deactivated in custom
RTE presets.

Resolves: #85361
Releases: master, 8.7
Change-Id: Iec97f4c9d1ede269e2df5cb4fe795df0ef5ca558
Reviewed-on: https://review.typo3.org/57373
Tested-by: TYPO3com <>
Reviewed-by: Josef Glatz <>
Tested-by: Josef Glatz <>
Tested-by: Wittkiel Gruppe <>
Reviewed-by: Joerg Boesche <>
Reviewed-by: Andreas Fernandez <>
Tested-by: Andreas Fernandez <>

History

#1 Updated by Josef Glatz over 1 year ago

  • Related to Feature #33184: htmlArea RTE: Add button to insert soft hyphen added

#2 Updated by Gerrit Code Review over 1 year ago

  • Status changed from In Progress to Under Review

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/57344

#3 Updated by Gerrit Code Review over 1 year ago

Patch set 2 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/57344

#4 Updated by Gerrit Code Review over 1 year ago

Patch set 3 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/57344

#5 Updated by Gerrit Code Review over 1 year ago

Patch set 4 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/57344

#6 Updated by Sebastian Klein over 1 year ago

I agree this should be implemented for CKEDitor in TYPO3 v8 and above.

Aside from the task of implementation, I see the following issue:
The editor can't easily see if and where he (or other editors) added a &shy; entity. Even in the source view it currently isn't shown. You can only use the arrow keys on your keyboard to navigate left or right and see if the cursor stops at a position in the text.

This already was an issue in the old RTEHtmlArea.

A current workaround:

I already built an CKEditor plugin which is far from perfect:
https://github.com/sebkln/linebreak

It does add the &shy; entity as well as the <wbr> tag for linebreaks without hyphenation. The plugin also shows the editor where &shy; entities were added. For this I added a wrap with additional CSS, which is also the major drawback of this plugin: this wrap is saved to the database with the rest of the text. In the frontend, several lines of TypoScript have to be added to remove the wrap inside paragraphs and lists.

I don't know if it's possible to add such a wrap only for the RTE, without saving it to the database and have the need to extend parseFunc that much?

tl;dr

  • soft hyphen button should be added to the CKEditor
  • inserted hyphens should be visible to the editors

#7 Updated by Gerrit Code Review over 1 year ago

Patch set 5 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/57344

#8 Updated by Gerrit Code Review over 1 year ago

Patch set 6 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/57344

#9 Updated by Gerrit Code Review over 1 year ago

Patch set 7 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/57344

#10 Updated by Josef Glatz over 1 year ago

Sebastian Klein wrote:

I agree this should be implemented for CKEDitor in TYPO3 v8 and above.

Aside from the task of implementation, I see the following issue:
The editor can't easily see if and where he (or other editors) added a &shy; entity. Even in the source view it currently isn't shown. You can only use the arrow keys on your keyboard to navigate left or right and see if the cursor stops at a position in the text.

This already was an issue in the old RTEHtmlArea.

A current workaround:

I already built an CKEditor plugin which is far from perfect:
https://github.com/sebkln/linebreak

It does add the &shy; entity as well as the <wbr> tag for linebreaks without hyphenation. The plugin also shows the editor where &shy; entities were added. For this I added a wrap with additional CSS, which is also the major drawback of this plugin: this wrap is saved to the database with the rest of the text. In the frontend, several lines of TypoScript have to be added to remove the wrap inside paragraphs and lists.

I don't know if it's possible to add such a wrap only for the RTE, without saving it to the database and have the need to extend parseFunc that much?

tl;dr

  • soft hyphen button should be added to the CKEditor
  • inserted hyphens should be visible to the editors

We should definitely add such a feature to improve the UI/UX of the editor.

I ask you to create your own issue for your idea. This is a task which should also be migrated in 8.7.

I see the visualization of one or more invisible characters in a separate feature which must be loaded in another plugin, since there is also the case that content is not only entered through the manual input in the RTE (for example, an import / API). Such functionality would make sense to load in each RTE preset for the WYSIWYG mode.

Beside of that I see it problematically, if such pseudo-temporary html tags are used inside the database for such characters

#11 Updated by Gerrit Code Review over 1 year ago

Patch set 1 for branch TYPO3_8-7 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/57373

#12 Updated by Anonymous over 1 year ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100

#13 Updated by Sebastian Klein over 1 year ago

  • Related to Feature #85391: Soft-hyphen (shy entity) should be visible in CKEditor added

#14 Updated by Benni Mack about 1 year ago

  • Status changed from Resolved to Closed

Also available in: Atom PDF