Ckeditor5: Add Special Characters feature

[jannakha]

🆕 Feature request

can you please add SpecialChars feature.
University of Queensland uses CKEditor 4 for Thesis Submission form and which requires special characters scientific papers. It would be great to migrate to CKEditor 5.

Thanks!

PS: Emojis are not required, but I'm sure people will love 'em too!

---

Add 👍reaction to this post if you want this feature to be implemented.

[Reinmar]

Thanks for reporting. It'd be great to have this feature.

BTW, it's a fairly simple feature to be implemented. Apart from the UI, it just requires calling writer.insertText() or, more generally (to handle non-collapsed selections and selection attributes), model.insertContent(). If you'd like to give it a try, we'll be happy to give you more hints.

[gcoluni]

Has there been any update on when this might be supported?

[ma2ciek]

I'm afraid that this feature isn't on our pipeline yet. But we'd be glad seeing the community trying to implement it.

[jodator]

@gcoluni & @jannakha could you write also which type of special characters you refer to? It might be a case for https://github.com/ckeditor/ckeditor5/issues/1490.

[gcoluni]

I am referring to the toolbar Omega icon that was in version 4 that allowed for selecting the special character from the pop-up.

[Reinmar]

Related thread: inserting non-breaking spaces: https://github.com/ckeditor/ckeditor5/issues/1669.

With a code sample how to bind Alt+space to inserting an nbsp: https://github.com/ckeditor/ckeditor5/issues/1669#issuecomment-478934583. May be useful if someone wants to write their own "special char" plugin.

[pomek]

This is how the feature looks in CKEditor 4:

In CKEditor 5 we could use the same dropdown mechanism which is used for displaying font/background colors:

Each square could have a special character. After clicking on it, the character will be inserted to the editor (is model.insertContent() safe in such case?).

It would be good to use panes here. In the first one, we could keep special characters, in the second one – emoji. I am not sure whether it is possible.

My question is – what are special characters? Should we include 0-9, A-z, and other "standard" combinations that could be added to the editor by pressing SHIFT+[0-9]?

Also, the Special Characters plugin will provide a list of special characters. How would like we to give a user the ability to extend the list?

Should we allow defining all items by the user (as an array config.specialCharacters.symbols) or provide a default set of the special character and items listed in config.specialCharacters.symbols will be appended to our default set?

[jodator]

Each square could have a special character. After clicking on it, the character will be inserted to the editor (is model.insertContent() safe in such case?).

Yes - we're using this in text transformations and AFAIR it's a preffered way.

My question is – what are special characters? Should we include 0-9, A-z, and other "standard"

I had the same doubts when looking at CKE4 but it might be that what's standard in western languages might not be in other languages (Arabic, Chinese, ?) - but I'm not 100% sure on this.

[oleq]

It would be good to use panes here. In the first one, we could keep special characters, in the second one – emoji. I am not sure whether it is possible.

We don't have this kind of component yet (namely: tabs) but probably we'll expect something similar to the native MacOS selector

The implementation should be fairly simple.

As for categories, both MS Word and other WYSIWIG editor on the market use similar categories like "arrows", "mathematical", "punctuation". This is a good place to start because people will a UX they're familiar with. A sane set of defaults (a couple of categories with entries) and a possibility to configure your own should do the trick.

P.S. This could be also the right place to provide the emoji feature.

[oleq]

I created a simple mockup (food for thought before the f2f talk) of what it could look like:

Here's a list of random thoughts that came to my mind designing it:

• Tabs are not the best idea. Because either:
  
  
  
  • We go with icons in tabs that represent the category, but then each new category (like developer–configured) needs another icon and that's a PITA because
    
    
    
    
    
    • They need to design it,
    
    
    
    • They need to figure out how to import it, which is impossible when using a ready–to–use editor build — how to pass the icon to the config? We could provide some CSS background solution but this is sooooo overengineered.
    
    
    
  
  
  • We go with the text in tabs, but then when there are like 3+ categories, there are more tabs than visual horizontal space and we need to figure out how to make tabs dynamic (like a button to reveal more invisible tabs etc.) and that makes our tabs component a PITA to implement, maintain, provide a11y, etc.
  
  
• A simple native HTML <select> is way simpler because we can feed it special chars categories straight from the editor config and that's it.

• Do we need a search box? There are tons of special characters out there in the Unicode (and they are named) and it's quite handy to search for some phrase, for instance, like GDocs allows

  

  Another reason the search field is a good idea is that since we display the characters table as a dropdown panel (instead of a full–sized modal/popup) and we cannot go crazy with its dimensions. It must be compact because it is always attached to the toolbar. And that means not all glyphs will be visible at once in the category and looking for them (I mean: scrolling) is a chore. It's way easier to just type "smile" and get all smiley emojis.

• Do we want a preview? We had it in v4 (like below) and it could be helpful when some glyphs are small and complex and there's a couple of very ones to choose from.

  

[Reinmar]

Notes from the yesterday's meeting.

MVP

• Command?
  
  
  
  • It's very similar to the input command, but we can create it anyway.
  
  
  • would insert by item's name: execute( { item: 'arrow right' } )
  
  
  • Should be disabled if the input command is disabled.
    
    
    
    
    
    • Example: MultiCommand
    
    
    
  
  
• UI
  
  
  
  • No tabs (more complicated to implement, width limits their number, would have to use singular character as a label what would cause some confusion)
  
  
  • Dropdown (all, mathematical, arrows, ...)
  
  
  • Grid with characters
  
  
• Docs
• Essential + atomic categories
  
  
  
  • There will be a base SpecialCharacters plugin implementing the architecture, UI, etc.
  
  
  • Groups of special chars will be delivered by plugins – SpecialCharactersMathematical, SpecialCharactersArrows. The goal is to have them delivered in a granular fashion so you can load only these that you want and reduce code size.
  
  
  • However, to make it easy to enable all the groups at once, we can also have SpecialCharactersEssentials.
  
  
• Translations
  
  
  
  • Group names (not a problem)
  
  
  • Item names... 💥
    
    
    
    
    
    • Can we extract translations from some database (official unicode spec or some other, open database)?
    
    
    
  
  

• API:

  // MVP
  ClassicEditor.create( foo, {
      plugins: [ SpecialCharacters, SpecialCharactersEssentials ]
  } );
  
  // MVP
  ClassicEditor.create( foo, {
      plugins: [ SpecialCharacters, SpecialCharactersMathematical, SpecialCharactersEmojis ]
  } );
  
  // MVP (just because we need this API for the above mentioned options)
  // Adding new group
  ClassicEditor.create( foo, {
      plugins: [ SpecialCharacters, SpecialCharactersMathematical, SpecialCharactersEmojis, MyPlugin ]
  } );
  class MyPlugin extends Plugin {
      init() {
          editor.plugins.get( 'SpecialCharacters' ).addItems( 'My group', [
              {
                  title: 'arrow right',
                  character: '🤜'
              },
              // ...
          ] );
      }
  }
  
  // MVP (just because we need this API for the above mentioned options)
  // Adding item to an existing group
  ClassicEditor.create( foo, {
      plugins: [ SpecialCharacters, SpecialCharactersMathematical, SpecialCharactersEmojis, MyMathematicalPlugin ]
  } );
  class MyMathematicalPlugin extends Plugin {
      init() {
          editor.plugins.get( 'SpecialCharacters' ).addItems( 'Mathematical', [
              {
                  title: 'arrow right',
                  character: '🤜'
              },
              // ...
          ] );
      }
  }
  

Future

• Keyboard navigation
• Search

• Configurability

  ClassicEditor.create( foo, {
      plugins: [ SpecialCharacters, SpecialCharactersMathematical, SpecialCharactersEmojis ],
      specialCharacters: {
          // non MVP
          groups: [ 'All', 'Emojis', 'Mathematical' ],
          // non MVP
          extraGroups: {
              'Custom characters': [
                  {
                      title: 'arrow right',
                      character: '🤜'
                  }
              ]
          }
      } );
  

• How to remove pre-defined characters?

  ClassicEditor.create( foo, {
      plugins: [ SpecialCharacters, SpecialCharactersMathematical, SpecialCharactersEmojis ],
      specialCharacters: {
          removeItems: [ 'arrow right', ... ]
      }
  } );
  

• Preview?

[mlewand]

Hey everyone, during the testing phase we decided that we need to polish our special character plugin a little bit before releasing. So it means that improved version will be released in iteration 29th. Sorry for the delay, but we hope it will be worth it!

[Reinmar]

TODO:

• [X] Decide about the command => https://github.com/ckeditor/ckeditor5/issues/1110#issuecomment-561125830
• [X] Translations => https://github.com/ckeditor/ckeditor5/issues/1110#issuecomment-561557972
• [ ] Default character set => https://github.com/ckeditor/ckeditor5/issues/5952
• [ ] Review internal data model => https://github.com/ckeditor/ckeditor5/issues/5951
• [X] Finish the UI (get rid of the tooltip by intrucing a status bar) => https://github.com/ckeditor/ckeditor5-special-characters/pull/2
• [X] [Griiiidddddddd](https://github.com/ckeditor/ckeditor5-special-characters/pull/2)
• [X] Feature guide => https://github.com/ckeditor/ckeditor5/issues/5879

[pomek]

Reopening because there are still things TODO (https://github.com/ckeditor/ckeditor5/issues/1110#issuecomment-560429211).

[pomek]

Decide about the command

There is no point in keeping a command that executes another command. Let's remove it. Also, the editing part of the feature could be removed because it only adds the command. I will remove it as well.

[pomek]

Translations

I wrapped all Unicode names in the t() function. Not sure, what I could do more.

[pomek]

Default character set

I guess it is not enough but TBH I have no idea which special characters we should include. There are many of them…

[ma2ciek]

Translations

I wrapped all Unicode names in the t() function. Not sure, what I could do more.

I don't know if the lang/contexts.json file is already created, but if not, then it should be 😄 Based on this file the translations are uploaded on the Transifex, so the translation context is known better for the translator.

Edit: I don't know if that file is mentioned somewhere in our internal docs 🤔

[pomek]

@ma2ciek, I didn't mention about the file because it's obvious for us. We remember about it :D