# Pull Request Template
## Description
This PR fixes,
1. **Issue with canned response insertion** - Canned responses with
formatting (bold, italic, code, lists, etc.) were not being inserted
into channels that don't support that formatting.
Now unsupported markdown syntax is automatically stripped based on the
channel's schema before insertion.
2. **Make image node optional** - Images are now stripped while paste.
9e269fca04
3. Enable **bold** and _italic_ for API channel
Fixes
https://linear.app/chatwoot/issue/CW-6091/editor-breaks-when-inserting-canned-response
## Type of change
- [x] Bug fix (non-breaking change which fixes an issue)
## How Has This Been Tested?
### Loom video
https://www.loom.com/share/9a5215dfef2949fcaa3871f51bdec4bb
## Checklist:
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged and published in downstream
modules
249 lines
5.7 KiB
JavaScript
249 lines
5.7 KiB
JavaScript
// Formatting rules for different contexts (channels and special contexts)
|
|
// marks: inline formatting (strong, em, code, link, strike)
|
|
// nodes: block structures (bulletList, orderedList, codeBlock, blockquote)
|
|
export const FORMATTING = {
|
|
// Channel formatting
|
|
'Channel::Email': {
|
|
marks: ['strong', 'em', 'code', 'link'],
|
|
nodes: ['bulletList', 'orderedList', 'codeBlock', 'blockquote'],
|
|
menu: [
|
|
'strong',
|
|
'em',
|
|
'code',
|
|
'link',
|
|
'bulletList',
|
|
'orderedList',
|
|
'undo',
|
|
'redo',
|
|
],
|
|
},
|
|
'Channel::WebWidget': {
|
|
marks: ['strong', 'em', 'code', 'link', 'strike'],
|
|
nodes: ['bulletList', 'orderedList', 'codeBlock', 'blockquote'],
|
|
menu: [
|
|
'strong',
|
|
'em',
|
|
'code',
|
|
'link',
|
|
'strike',
|
|
'bulletList',
|
|
'orderedList',
|
|
'undo',
|
|
'redo',
|
|
],
|
|
},
|
|
'Channel::Api': {
|
|
marks: ['strong', 'em'],
|
|
nodes: [],
|
|
menu: ['strong', 'em', 'undo', 'redo'],
|
|
},
|
|
'Channel::FacebookPage': {
|
|
marks: ['strong', 'em', 'code', 'strike'],
|
|
nodes: ['bulletList', 'orderedList', 'codeBlock'],
|
|
menu: [
|
|
'strong',
|
|
'em',
|
|
'code',
|
|
'strike',
|
|
'bulletList',
|
|
'orderedList',
|
|
'undo',
|
|
'redo',
|
|
],
|
|
},
|
|
'Channel::TwitterProfile': {
|
|
marks: [],
|
|
nodes: [],
|
|
menu: [],
|
|
},
|
|
'Channel::TwilioSms': {
|
|
marks: [],
|
|
nodes: [],
|
|
menu: [],
|
|
},
|
|
'Channel::Sms': {
|
|
marks: [],
|
|
nodes: [],
|
|
menu: [],
|
|
},
|
|
'Channel::Whatsapp': {
|
|
marks: ['strong', 'em', 'code', 'strike'],
|
|
nodes: ['bulletList', 'orderedList', 'codeBlock'],
|
|
menu: [
|
|
'strong',
|
|
'em',
|
|
'code',
|
|
'strike',
|
|
'bulletList',
|
|
'orderedList',
|
|
'undo',
|
|
'redo',
|
|
],
|
|
},
|
|
'Channel::Line': {
|
|
marks: ['strong', 'em', 'code', 'strike'],
|
|
nodes: ['codeBlock'],
|
|
menu: ['strong', 'em', 'code', 'strike', 'undo', 'redo'],
|
|
},
|
|
'Channel::Telegram': {
|
|
marks: ['strong', 'em', 'link', 'code'],
|
|
nodes: [],
|
|
menu: ['strong', 'em', 'link', 'code', 'undo', 'redo'],
|
|
},
|
|
'Channel::Instagram': {
|
|
marks: ['strong', 'em', 'code', 'strike'],
|
|
nodes: ['bulletList', 'orderedList'],
|
|
menu: [
|
|
'strong',
|
|
'em',
|
|
'code',
|
|
'bulletList',
|
|
'orderedList',
|
|
'strike',
|
|
'undo',
|
|
'redo',
|
|
],
|
|
},
|
|
'Channel::Voice': {
|
|
marks: [],
|
|
nodes: [],
|
|
menu: [],
|
|
},
|
|
// Special contexts (not actual channels)
|
|
'Context::Default': {
|
|
marks: ['strong', 'em', 'code', 'link', 'strike'],
|
|
nodes: ['bulletList', 'orderedList', 'codeBlock', 'blockquote'],
|
|
menu: [
|
|
'strong',
|
|
'em',
|
|
'code',
|
|
'link',
|
|
'strike',
|
|
'bulletList',
|
|
'orderedList',
|
|
'undo',
|
|
'redo',
|
|
],
|
|
},
|
|
'Context::MessageSignature': {
|
|
marks: ['strong', 'em', 'link'],
|
|
nodes: [],
|
|
menu: ['strong', 'em', 'link', 'undo', 'redo', 'imageUpload'],
|
|
},
|
|
'Context::InboxSettings': {
|
|
marks: ['strong', 'em', 'link'],
|
|
nodes: [],
|
|
menu: ['strong', 'em', 'link', 'undo', 'redo'],
|
|
},
|
|
};
|
|
|
|
// Editor menu options for Full Editor
|
|
export const ARTICLE_EDITOR_MENU_OPTIONS = [
|
|
'strong',
|
|
'em',
|
|
'link',
|
|
'undo',
|
|
'redo',
|
|
'bulletList',
|
|
'orderedList',
|
|
'h1',
|
|
'h2',
|
|
'h3',
|
|
'imageUpload',
|
|
'code',
|
|
];
|
|
|
|
/**
|
|
* Markdown formatting patterns for stripping unsupported formatting.
|
|
*
|
|
* Maps camelCase type names to ProseMirror snake_case schema names.
|
|
* Order matters: codeBlock before code to avoid partial matches.
|
|
*/
|
|
export const MARKDOWN_PATTERNS = [
|
|
// --- BLOCK NODES ---
|
|
{
|
|
type: 'codeBlock', // PM: code_block, eg: ```js\ncode\n```
|
|
patterns: [
|
|
{ pattern: /`{3}(?:\w+)?\n?([\s\S]*?)`{3}/g, replacement: '$1' },
|
|
],
|
|
},
|
|
{
|
|
type: 'blockquote', // PM: blockquote, eg: > quote
|
|
patterns: [{ pattern: /^> ?/gm, replacement: '' }],
|
|
},
|
|
{
|
|
type: 'bulletList', // PM: bullet_list, eg: - item
|
|
patterns: [{ pattern: /^[\t ]*[-*+]\s+/gm, replacement: '' }],
|
|
},
|
|
{
|
|
type: 'orderedList', // PM: ordered_list, eg: 1. item
|
|
patterns: [{ pattern: /^[\t ]*\d+\.\s+/gm, replacement: '' }],
|
|
},
|
|
{
|
|
type: 'heading', // PM: heading, eg: ## Heading
|
|
patterns: [{ pattern: /^#{1,6}\s+/gm, replacement: '' }],
|
|
},
|
|
{
|
|
type: 'horizontalRule', // PM: horizontal_rule, eg: ---
|
|
patterns: [{ pattern: /^(?:---|___|\*\*\*)\s*$/gm, replacement: '' }],
|
|
},
|
|
{
|
|
type: 'image', // PM: image, eg: 
|
|
patterns: [{ pattern: /!\[([^\]]*)\]\([^)]+\)/g, replacement: '$1' }],
|
|
},
|
|
{
|
|
type: 'hardBreak', // PM: hard_break, eg: line\\\n or line \n
|
|
patterns: [
|
|
{ pattern: /\\\n/g, replacement: '\n' },
|
|
{ pattern: / {2,}\n/g, replacement: '\n' },
|
|
],
|
|
},
|
|
// --- INLINE MARKS ---
|
|
{
|
|
type: 'strong', // PM: strong, eg: **bold** or __bold__
|
|
patterns: [
|
|
{ pattern: /\*\*(.+?)\*\*/g, replacement: '$1' },
|
|
{ pattern: /__(.+?)__/g, replacement: '$1' },
|
|
],
|
|
},
|
|
{
|
|
type: 'em', // PM: em, eg: *italic* or _italic_
|
|
patterns: [
|
|
{ pattern: /(?<!\*)\*(?!\*)(.+?)(?<!\*)\*(?!\*)/g, replacement: '$1' },
|
|
{ pattern: /(?<!_)_(?!_)(.+?)(?<!_)_(?!_)/g, replacement: '$1' },
|
|
],
|
|
},
|
|
{
|
|
type: 'strike', // PM: strike, eg: ~~strikethrough~~
|
|
patterns: [{ pattern: /~~(.+?)~~/g, replacement: '$1' }],
|
|
},
|
|
{
|
|
type: 'code', // PM: code, eg: `inline code`
|
|
patterns: [{ pattern: /`([^`]+)`/g, replacement: '$1' }],
|
|
},
|
|
{
|
|
type: 'link', // PM: link, eg: [text](url)
|
|
patterns: [{ pattern: /\[([^\]]+)\]\([^)]+\)/g, replacement: '$1' }],
|
|
},
|
|
];
|
|
|
|
// Editor image resize options for Message Editor
|
|
export const MESSAGE_EDITOR_IMAGE_RESIZES = [
|
|
{
|
|
name: 'Small',
|
|
height: '24px',
|
|
},
|
|
{
|
|
name: 'Medium',
|
|
height: '48px',
|
|
},
|
|
{
|
|
name: 'Large',
|
|
height: '72px',
|
|
},
|
|
{
|
|
name: 'Original Size',
|
|
height: 'auto',
|
|
},
|
|
];
|