Use CKEditor 5 for description editing.

This commit is contained in:
Jan Böhmer 2022-07-26 01:20:58 +02:00
parent a4f07e9b82
commit 63b7e0458c
11 changed files with 527 additions and 75 deletions

View file

@ -0,0 +1,34 @@
import { Plugin } from 'ckeditor5/src/core';
import GFMDataProcessor from '@ckeditor/ckeditor5-markdown-gfm/src/gfmdataprocessor';
const ALLOWED_TAGS = [
//Common elements
'sup',
'sub',
];
/**
* The GitHub Flavored Markdown (GFM) plugin with added HTML tags, which are kept in the output. (inline mode)
*
*/
export default class ExtendedMarkdown extends Plugin {
/**
* @inheritDoc
*/
constructor( editor ) {
super( editor );
editor.data.processor = new GFMDataProcessor( editor.data.viewDocument );
for (const tag of ALLOWED_TAGS) {
editor.data.processor.keepHtml(tag);
}
}
/**
* @inheritDoc
*/
static get pluginName() {
return 'Markdown';
}
}

View file

@ -0,0 +1,40 @@
import { Plugin } from 'ckeditor5/src/core';
import GFMDataProcessor from '@ckeditor/ckeditor5-markdown-gfm/src/gfmdataprocessor';
const ALLOWED_TAGS = [
//Common elements
'sup',
'sub',
'u',
'kbd',
'mark',
'ins',
'small',
'abbr',
];
/**
* The GitHub Flavored Markdown (GFM) plugin with added HTML tags, which are kept in the output. (inline mode)
*
*/
export default class ExtendedMarkdownInline extends Plugin {
/**
* @inheritDoc
*/
constructor( editor ) {
super( editor );
editor.data.processor = new GFMDataProcessor( editor.data.viewDocument );
for (const tag of ALLOWED_TAGS) {
editor.data.processor.keepHtml(tag);
}
}
/**
* @inheritDoc
*/
static get pluginName() {
return 'Markdown';
}
}

View file

@ -0,0 +1,29 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
export default class SingleLinePlugin extends Plugin {
init() {
const editor = this.editor;
const view = editor.editing.view;
const viewDocument = view.document;
//Listen to enter presses
this.listenTo( viewDocument, 'enter', ( evt, data ) => {
//If user presses enter, prevent the enter action
evt.stop();
}, { priority: 'high' } );
//And clipboard pastes
this.listenTo( viewDocument, 'clipboardInput', ( evt, data ) => {
let dataTransfer = data.dataTransfer;
//Clean text input (replace newlines with spaces)
let input = dataTransfer.getData("text");
let cleaned = input.replace(/\r?\n/g, ' ');
//We can not use the dataTransfer.setData method because the old object is somehow protected
data.dataTransfer = new DataTransfer();
data.dataTransfer.setData("text", cleaned);
}, { priority: 'high' } );
}
}