diff --git a/packages/js/email-editor/src/blocks/core/rich-text.ts b/packages/js/email-editor/src/blocks/core/rich-text.ts deleted file mode 100644 index f2b8ffb039..0000000000 --- a/packages/js/email-editor/src/blocks/core/rich-text.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { unregisterFormatType } from '@wordpress/rich-text'; - -/** - * Disable Rich text formats we currently cannot support - * Note: This will remove its support for all blocks in the email editor e.g., p, h1,h2, etc - */ -function disableCertainRichTextFormats() { - // remove support for inline image - We can't use it - unregisterFormatType( 'core/image' ); - - // remove support for Inline code - Not well formatted - unregisterFormatType( 'core/code' ); - - // remove support for Language - Not supported for now - unregisterFormatType( 'core/language' ); -} - -export { disableCertainRichTextFormats }; diff --git a/packages/js/email-editor/src/blocks/core/rich-text.tsx b/packages/js/email-editor/src/blocks/core/rich-text.tsx new file mode 100644 index 0000000000..7733003b42 --- /dev/null +++ b/packages/js/email-editor/src/blocks/core/rich-text.tsx @@ -0,0 +1,53 @@ +import { registerFormatType, unregisterFormatType } from '@wordpress/rich-text'; +import { __ } from '@wordpress/i18n'; +import { BlockControls } from '@wordpress/block-editor'; +import { ToolbarButton, ToolbarGroup } from '@wordpress/components'; + +/** + * Disable Rich text formats we currently cannot support + * Note: This will remove its support for all blocks in the email editor e.g., p, h1,h2, etc + */ +function disableCertainRichTextFormats() { + // remove support for inline image - We can't use it + unregisterFormatType( 'core/image' ); + + // remove support for Inline code - Not well formatted + unregisterFormatType( 'core/code' ); + + // remove support for Language - Not supported for now + unregisterFormatType( 'core/language' ); +} + +/** + * A button to the rich text editor to open modal with registered personalization tags. + */ +function PersonalizationTagsButton() { + return ( + + + {} } + /> + + + ); +} + +/** + * Extend the rich text formats with a button for personalization tags. + */ +function extendRichTextFormats() { + registerFormatType( 'mailpoet-email-editor/shortcode', { + title: __( 'Personalization Tags', 'mailpoet' ), + className: 'mailpoet-email-editor-personalization-tags', + tagName: 'span', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- The types does not match + // @ts-ignore + attributes: {}, + edit: PersonalizationTagsButton, + } ); +} + +export { disableCertainRichTextFormats, extendRichTextFormats }; diff --git a/packages/js/email-editor/src/blocks/index.ts b/packages/js/email-editor/src/blocks/index.ts index bcbaf55022..5093bd243a 100644 --- a/packages/js/email-editor/src/blocks/index.ts +++ b/packages/js/email-editor/src/blocks/index.ts @@ -8,7 +8,10 @@ import { import { enhancePostContentBlock } from './core/post-content'; import { disableGroupVariations } from './core/group'; import { disableImageFilter, hideExpandOnClick } from './core/image'; -import { disableCertainRichTextFormats } from './core/rich-text'; +import { + disableCertainRichTextFormats, + extendRichTextFormats, +} from './core/rich-text'; import { enhanceButtonBlock } from './core/button'; import { enhanceButtonsBlock } from './core/buttons'; import { alterSupportConfiguration } from './core/general-block-support'; @@ -25,6 +28,7 @@ export function initBlocks() { enhanceColumnBlock(); enhanceColumnsBlock(); enhancePostContentBlock(); + extendRichTextFormats(); alterSupportConfiguration(); registerCoreBlocks(); }