Extending CKEditor5

Hi,

I tried to extend the CKEditor5 with a simple functionality: I wanted to be able to add   when I enter CTRL + Space in the editor. I failed doing that, obviously :smiley:

What I got:

My Settings.yaml

Neos:
  Neos:
    Ui:
      resources:
        javascript:
          'My.EditorPlugins:Spaces':
            resource: 'resource://My.EditorPlugins.Spaces/Public/Spaces/Plugin.js'

The Resources/Private/Spaces/src/index.js contains: require('./manifest');


Resources/Private/Spaces/src/manifest.js


manifest('My.EditorPlugins:Spaces', {}, globalRegistry => {
    const addSpacesPluginToCkEditorConfig = (ckEditorConfiguration, options) => {
        ckEditorConfiguration.plugins = ckEditorConfiguration.plugins || [];
        return $add('plugins', Spaces, ckEditorConfiguration);
    };
    const config = globalRegistry.get('ckEditor5').get('config');
    config.set('spaces', addSpacesPluginToCkEditorConfig);
});

The actual plugin code in Resources/Private/Spaces/src/Plugin.js:
(which is actually a slightly modified copy of a ckeditor4 plugin)

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';

export default class Spaces extends Plugin {
	init() {
		this.editor.addCommand( 'insertNbsp', {
			exec: function( editor ) {
				editor.insertHtml( ' ', 'text' );
			}
		});
		editor.setKeystroke( CKEDITOR.CTRL + 32 /* space */, 'insertNbsp' );
	}
}

And finally the package.json

{
    "description": "",
    "license": "GNU GPLv3",
    "private": true,
    "scripts": {
      "build": "neos-react-scripts build",
      "watch": "neos-react-scripts watch"
    },
    "devDependencies": {
      "@neos-project/neos-ui-extensibility": "*"
    },
    "neos": {
      "buildTargetDirectory": "../../Public/Spaces"
    },
    "dependencies": {
      "@ckeditor/ckeditor5-engine": "^11.0",
      "@ckeditor/ckeditor5-core": "^10.0"
    }
  }

I did forced flush the cache, did a ./flow flow:package:rescan and ran yarn


yarn output:

$ yarn
yarn install v1.17.3
[1/4] Resolving packages...
warning jest > jest-cli > prompts > kleur@2.0.2: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "linux" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
Done in 64.14s.

I also ran npm run build, but npm did not build a Plugin.js in Public. Maybe because the unmet peer dependencies?

Finally: In the backend I get the error:

Uncaught SyntaxError: Unexpected identifier Plugin.js:8

Because the import of Plugin from import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; does not work.

I got stuck here. I watched the Video in the manual but it only got me where I am now.
Any help is appreciated.

Many thanks in advance.

Hi,

when using a current Neos.Ui version you should use

import {Plugin} from 'ckeditor5-exports';

Yields

Uncaught SyntaxError: Unexpected token {

Im using

neos/neos 4.2.13
neos/neos-ui 1.4.1
neos/neos-ui-compiled 1.4.1

But besides the import: Isn’t it necessary that npm build builds/compiles the sources in /Private/Spaces and creates a compiled version in /Public/Spaces? Because that is not happening, too.

Oh please use neos-ui 3.8.x or any more up-to-date version

The package.json needs to be in the folder where the src folder is. And you should run the commands with yarn and not npm.

You can also take a look at one of my newer plugins https://github.com/Sebobo/Shel.Neos.Hyphens/tree/master/Resources/Private/Scripts/HyphensEditor