Function useInlineCode

app/src/interfaces/input-rich-text-html/useInlineCode.ts:20–64

(editor: Ref<any>)

}

export default function useInlineCode(editor: Ref<any>): UsableInlineCode {
	let keydownHandler: ((event: KeyboardEvent) => void) | null = null;

	const inlineCodeButton: InlineCodeButton = {
		tooltip: i18n.global.t('wysiwyg_options.codeblock'),
		icon: 'code-sample',

		onAction: () => {
			editor.value.execCommand('mceToggleFormat', false, 'code');
		},

		onSetup: (api) => {
			const updateActiveState = () => {
				const isInlineCode = editor.value.formatter.match('code');

				api.setActive(isInlineCode);
			};

			updateActiveState();

			const codeFormatChangedUnbind = editor.value.formatter.formatChanged('code', updateActiveState).unbind;

			keydownHandler = (event: KeyboardEvent) => {
				const currentNode = editor.value.selection.getNode();
				if (!isInlineCode(currentNode)) return;

				if (event.key === 'Enter') {
					event.preventDefault();

					editor.value.execCommand('removeformat');
					updateActiveState();
				}
			};

			editor.value.on('keydown', keydownHandler);

			return () => {
				if (codeFormatChangedUnbind) codeFormatChangedUnbind();
				if (keydownHandler) editor.value.off('keydown', keydownHandler);
			};
		},
	};

	return { inlineCodeButton };
}