Update CKEditor to version 5

src/moin/constants/contenttypes.py

@@ -180,7 +180,7 @@ def ext_link(href, link_text=None):
     "text/x-rst;charset=utf-8": (("rst", _("Click for help on reST Wiki markup."))),
     "application/docbook+xml;charset=utf-8": (("docbook", _("Click for help on Docbook Wiki markup."))),
     # content type: help string
-    "text/html;charset=utf-8": ext_link("http://ckeditor.com/"),
+    "text/html;charset=utf-8": ext_link("https://ckeditor.com"),
     "text/plain;charset=utf-8": help_on_plain_text,
     "text/x-diff;charset=utf-8": help_on_plain_text,
     "text/x-python;charset=utf-8": help_on_plain_text,
@@ -197,7 +197,7 @@ def ext_link(href, link_text=None):
     "video/ogg": help_on_binary,
     "video/webm": help_on_binary,
     "video/mp4": help_on_binary,
-    "application/x-svgdraw": ext_link("http://code.google.com/p/svg-edit/"),
+    "application/x-svgdraw": ext_link("https://github.com/SVG-Edit/svgedit"),
     "application/octet-stream": help_on_binary,
     "application/x-tar": help_on_binary,
     "application/x-gtar": help_on_binary,

src/moin/static/css/common.css

@@ -721,8 +721,8 @@ figcaption { font-weight: bold; }
 .moin-autosize { min-height: 10em; }
 .moin-edit-help { float: right; }
 .moin-edit-help a { text-decoration: revert; color: var(--primary); }
-/* ckeditor hides textarea, this prevents editor help link overlaying ckeditor controls */
-#cke_f_content_form_data_text { clear: both; }
+/* prevent editor help text being overlapped by editor controls */
+.ck.ck-editor, #f_content_form_data_text { clear: both; }
 
 /* revision navigation on show, highlight, and meta views */
 .moin-revert { text-align: center; }

src/moin/static/js/common.js

@@ -869,13 +869,20 @@ $(document).ready(function () {
         location.hash = '';
     });
 
+    // CKEditor
+    const editor_elem = document.querySelector(".ckeditor");
+    if (editor_elem) {
+        createEditor(editor_elem)
+    }
+
     // add function to be executed when user clicks Load Draft button on +modify page
     $('.moin-load-draft').on('click', function () {
-        try { CKEDITOR.prop;
-            CKEDITOR.instances.f_content_form_data_text.setData($('#moin-draft-data').val());
+        const draft_data = $('#moin-draft-data').val()
+        try {
+            window.ckeditor.setData(draft_data);
         }
         catch {
-            $('.moin-edit-content').val($('#moin-draft-data').val());
+            $('.moin-edit-content').val(draft_data);
         }
         $('#moin-modify').addClass('moin-changed-input');
         $('.moin-load-draft').hide();

src/moin/static/js/editor.js

@@ -0,0 +1,253 @@
+/**
+ * This configuration was generated using the CKEditor 5 Builder. You can modify it anytime using this link:
+ * https://ckeditor.com/ckeditor-5/builder/#installation/NoJgNARCB0Cc0EYKQQdgKwgCwDYQGY0F8sAGUnYrdHUkVVBWLF2BYptVXLZCAUwB2yUmGAIwo0RImkAupABmAExzoARqV5ygA===
+ */
+
+const {
+	ClassicEditor,
+	Autosave,
+	Essentials,
+	Paragraph,
+	LinkImage,
+	Link,
+	ImageBlock,
+	ImageToolbar,
+	BlockQuote,
+	Bold,
+	CloudServices,
+	ImageUpload,
+	ImageInsertViaUrl,
+	AutoImage,
+	Table,
+	TableToolbar,
+	FontBackgroundColor,
+	FontColor,
+	FontFamily,
+	FontSize,
+	Heading,
+	Highlight,
+	HorizontalLine,
+	ImageTextAlternative,
+	ImageCaption,
+	ImageStyle,
+	Indent,
+	IndentBlock,
+	Code,
+	ImageInline,
+	Italic,
+	AutoLink,
+	List,
+	ImageUtils,
+	ImageEditing,
+	Strikethrough,
+	GeneralHtmlSupport,
+	Subscript,
+	Superscript,
+	TableCaption,
+	Alignment,
+	TodoList,
+	Underline,
+	Fullscreen,
+	TextTransformation,
+	Autoformat,
+	PasteFromMarkdownExperimental,
+	MediaEmbed,
+	ShowBlocks,
+	SourceEditing,
+	HtmlComment
+} = CKEDITOR;
+
+/**
+ * Create a free account with a trial: https://portal.ckeditor.com/checkout?plan=free
+ */
+const LICENSE_KEY = 'GPL'; // or <YOUR_LICENSE_KEY>.
+
+const editorConfig = {
+	toolbar: {
+		items: [
+			'undo',
+			'redo',
+			'|',
+			'sourceEditing',
+			'showBlocks',
+			'|',
+			'heading',
+			'|',
+			'fontSize',
+			'fontFamily',
+			'fontColor',
+			'fontBackgroundColor',
+			'|',
+			'bold',
+			'italic',
+			'underline',
+			'|',
+			'link',
+			'insertTable',
+			'highlight',
+			'blockQuote',
+			'|',
+			'alignment',
+			'|',
+			'bulletedList',
+			'numberedList',
+			'todoList',
+			'outdent',
+			'indent'
+		],
+		shouldNotGroupWhenFull: false
+	},
+	plugins: [
+		Alignment,
+		Autoformat,
+		AutoImage,
+		AutoLink,
+		Autosave,
+		BlockQuote,
+		Bold,
+		CloudServices,
+		Code,
+		Essentials,
+		FontBackgroundColor,
+		FontColor,
+		FontFamily,
+		FontSize,
+		Fullscreen,
+		GeneralHtmlSupport,
+		Heading,
+		Highlight,
+		HorizontalLine,
+		HtmlComment,
+		ImageBlock,
+		ImageCaption,
+		ImageEditing,
+		ImageInline,
+		ImageInsertViaUrl,
+		ImageStyle,
+		ImageTextAlternative,
+		ImageToolbar,
+		ImageUpload,
+		ImageUtils,
+		Indent,
+		IndentBlock,
+		Italic,
+		Link,
+		LinkImage,
+		List,
+		MediaEmbed,
+		Paragraph,
+		PasteFromMarkdownExperimental,
+		ShowBlocks,
+		SourceEditing,
+		Strikethrough,
+		Subscript,
+		Superscript,
+		Table,
+		TableCaption,
+		TableToolbar,
+		TextTransformation,
+		TodoList,
+		Underline
+	],
+	fontFamily: {
+		supportAllValues: true
+	},
+	fontSize: {
+		options: [10, 12, 14, 'default', 18, 20, 22],
+		supportAllValues: true
+	},
+	fullscreen: {
+		onEnterCallback: container =>
+			container.classList.add(
+				'editor-container',
+				'editor-container_classic-editor',
+				'editor-container_include-fullscreen',
+				'main-container'
+			)
+	},
+	heading: {
+		options: [
+			{
+				model: 'paragraph',
+				title: 'Paragraph',
+				class: 'ck-heading_paragraph'
+			},
+			{
+				model: 'heading1',
+				view: 'h1',
+				title: 'Heading 1',
+				class: 'ck-heading_heading1'
+			},
+			{
+				model: 'heading2',
+				view: 'h2',
+				title: 'Heading 2',
+				class: 'ck-heading_heading2'
+			},
+			{
+				model: 'heading3',
+				view: 'h3',
+				title: 'Heading 3',
+				class: 'ck-heading_heading3'
+			},
+			{
+				model: 'heading4',
+				view: 'h4',
+				title: 'Heading 4',
+				class: 'ck-heading_heading4'
+			},
+			{
+				model: 'heading5',
+				view: 'h5',
+				title: 'Heading 5',
+				class: 'ck-heading_heading5'
+			},
+			{
+				model: 'heading6',
+				view: 'h6',
+				title: 'Heading 6',
+				class: 'ck-heading_heading6'
+			}
+		]
+	},
+	htmlSupport: {
+		allow: [
+			{
+				name: /^.*$/,
+				styles: true,
+				attributes: true,
+				classes: true
+			}
+		]
+	},
+	image: {
+		toolbar: ['toggleImageCaption', 'imageTextAlternative', '|', 'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText']
+	},
+	licenseKey: LICENSE_KEY,
+	link: {
+		addTargetToExternalLinks: true,
+		defaultProtocol: 'https://',
+		decorators: {
+			toggleDownloadable: {
+				mode: 'manual',
+				label: 'Downloadable',
+				attributes: {
+					download: 'file'
+				}
+			}
+		}
+	},
+	menuBar: {
+		isVisible: true
+	},
+	placeholder: 'Type or paste your content here!',
+	table: {
+		contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
+	}
+};
+
+function createEditor(element) {
+	ClassicEditor.create(element, editorConfig).then( editor => {
+		window.ckeditor = editor;
+	});
+}

src/moin/templates/modify_text_html.html

@@ -9,8 +9,9 @@
 #}
 
 {% macro extra_head() %}
-    <script type="text/javascript" src="{{ url_for('serve.files', name='ckeditor', filename='ckeditor.js') }}"></script>
-    <link rel="stylesheet" href="{{ url_for('serve.files', name='ckeditor', filename='contents.css') }}">
+    <script src="{{ url_for('static', filename='js/ckeditor5.umd.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/editor.js') }}"></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/ckeditor5.css') }}">
     {#- prevent ckeditor css from making body font-size 12px #}
     <style>body {font-size: 1em;}</style>
 {% endmacro %}