Skip to content

Instantly share code, notes, and snippets.

@loominade

loominade/softHyphen.js

Last active October 19, 2022 11:49
Show Gist options
  • Save loominade/b8d314ffeca52387cae47ad6f1237268 to your computer and use it in GitHub Desktop.
Save loominade/b8d314ffeca52387cae47ad6f1237268 to your computer and use it in GitHub Desktop.
Download ZIP
Soft hyphen CKEDITOR plugin
Raw
softHyphen.js
const SOFTHYPHEN = 'softHyphen';
class insertSoftHyphenCommand extends CKEditor5.core.Command {
execute(options = {}) {
const insertPosition = editor.model.document.selection.getFirstPosition();
this.editor.model.change(writer => {
const insertPosition = editor.model.document.selection.getFirstPosition();
writer.insertText('­', {}, insertPosition);
});
}
}
class softHyphenUI extends CKEditor5.core.Plugin {
/**
* @inheritDoc
*/
static get pluginName() {
return 'softHyphenUI';
}
/**
* @inheritDoc
*/
init() {
const editor = this.editor;
const t = editor.t;
editor.ui.componentFactory.add(SOFTHYPHEN, locale => {
const command = editor.commands.get( SOFTHYPHEN );
const view = new CKEditor5.ui.ButtonView( locale );
view.set({
label: t('Soft hyphen'),
icon: `
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
<path d="M12 10H8" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
<path d="M12 14a4 4 0 0 0 0-8M8 14a4 4 0 0 1 0-8" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round"/>
</svg>
`,
// Here I'd add a shortcut but the pipe is not a supported character
// keystroke: 'CTRL+H',
tooltip: true,
isToggleable: false,
});
this.listenTo(view, 'execute', () => {
editor.execute(SOFTHYPHEN);
editor.editing.view.focus();
});
return view;
});
}
}
class softHyphenEditing extends CKEditor5.core.Plugin {
static get pluginName() {
return 'softHyphenEditing';
}
/**
* @inheritDoc
*/
init() {
const editor = this.editor;
editor.commands.add( SOFTHYPHEN, new insertSoftHyphenCommand( editor ) );
// Here I'd add a shortcut but the pipe is not a supported character
// editor.keystrokes.set( 'CTRL+|', SOFTHYPHEN );
}
}
class SoftHypen extends CKEditor5.core.Plugin {
/**
* @inheritDoc
*/
static get requires() {
return [ softHyphenEditing, softHyphenUI ];
}
/**
* @inheritDoc
*/
static get pluginName() {
return 'softHyphen';
}
}
Raw
~demo.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Classic editor</title>
<script src="node_modules/ckeditor5/build/ckeditor5-dll.js"></script>
<script src="node_modules/@ckeditor/ckeditor5-editor-classic/build/editor-classic.js"></script>
<script src="node_modules/@ckeditor/ckeditor5-essentials/build/essentials.js"></script>
<script src="node_modules/@ckeditor/ckeditor5-heading/build/heading.js"></script>
<script src="softHyphen.js"></script>
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css" />
</head>
<body>
<div id="editor">
<p>This is some sample content.</p>
</div>
<script>
CKEditor5.editorClassic.ClassicEditor
.create(document.querySelector('#editor'), {
toolbar: {
items: [
'softHyphen',
],
},
plugins: [
CKEditor5.heading.Heading,
SoftHypen,
]
})
.then( editor => {
window.editor = editor;
CKEditorInspector.attach( 'body-editor', editor );
})
.catch( error => {
console.error( error );
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment