How to unformat SourceEditingMode?

[matbk49751]

📝 Ask a question

In source editing mode. The lines are indented too much and each HTML tag gets added onto a new line. I'm trying to revert back to how it was formatted in Ckeditor4. I have the below, but I'm still not overriding the formatting. Thoughts?

Browser: Chrome OS: Windows 10 CKEditor version: 35.1.0

const editor = this.editor;

const SourceEditing = editor.plugins.get('SourceEditing').formatHtml;

SourceEditing(html) {
      return html.replace(/\s+/g, '').trim();
}

[matbk49751]

I tried the below. My tests worked in the console, but I'm still not seeing it work in Ckeditor5 Source Editing Mode.

init() {
		const editor = this.editor;

		editor.on('ready', () => {

			const SourceEditing = editor.plugins.get('SourceEditing');
			console.log(SourceEditing);

			if(SourceEditing) {
				console.log('SourceEditing plugin found!');
				SourceEditing.formatHtml = (input) => {
					console.log('Custom html format found!');
					// const elementNamesToFormat = 'div|p|span|a|img';
					const elementsToFormat = [
						{ name: 'address', isVoid: false },
						{ name: 'article', isVoid: false },
						{ name: 'aside', isVoid: false },
						{ name: 'blockquote', isVoid: false },
						{ name: 'details', isVoid: false },
						{ name: 'dialog', isVoid: false },
						{ name: 'dd', isVoid: false },
						{ name: 'div', isVoid: false },
						{ name: 'dl', isVoid: false },
						{ name: 'dt', isVoid: false },
						{ name: 'fieldset', isVoid: false },
						{ name: 'figcaption', isVoid: false },
						{ name: 'figure', isVoid: false },
						{ name: 'footer', isVoid: false },
						{ name: 'form', isVoid: false },
						{ name: 'h1', isVoid: false },
						{ name: 'h2', isVoid: false },
						{ name: 'h3', isVoid: false },
						{ name: 'h4', isVoid: false },
						{ name: 'h5', isVoid: false },
						{ name: 'h6', isVoid: false },
						{ name: 'header', isVoid: false },
						{ name: 'hgroup', isVoid: false },
						{ name: 'hr', isVoid: false },
						{ name: 'li', isVoid: false },
						{ name: 'main', isVoid: false },
						{ name: 'nav', isVoid: false },
						{ name: 'ol', isVoid: false },
						{ name: 'p', isVoid: false },
						{ name: 'section', isVoid: false },
						{ name: 'table', isVoid: false },
						{ name: 'tbody', isVoid: false },
						{ name: 'td', isVoid: false },
						{ name: 'th', isVoid: false },
						{ name: 'thead', isVoid: false },
						{ name: 'tr', isVoid: false },
						{ name: 'ul', isVoid: false }
					];
					const elementNamesToFormat = elementsToFormat.map(element => element.name).join('|');
					
					const formatted = input.replace(/\n\s*/g, '').replace(/\s{2,}/g, '');
		
					return formatted.replace(new RegExp(`</?(${elementNamesToFormat})( .*?)?>`, 'g'), '$&');
				};

				const testString = 'Hello\nWorld!\nThis\nis\nmy\nstring';
				console.log('Before formatting:', testString);
				const formatted = SourceEditing.formatHtml(testString);
				console.log('After formatting:', formatted);
			} else {
				console.log('SourceEditing plugin not found');
			}
		});
	}

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[matbk49751]

You can now close this issue. Thank you!