# Pull Request Template ## Description This PR includes, 1. **Channel-specific formatting and menu options** for the rich reply editor. 2. **Removal of the plain reply editor** and full **standardization** on the rich reply editor across all channels. 3. **Fix for multiple canned responses insertion:** * **Before:** The plain editor only allowed inserting canned responses at the beginning of a message, making it impossible to combine multiple canned responses in a single reply. This caused inconsistent behavior across the app. * **Solution:** Replaced the plain reply editor with the rich (ProseMirror) editor to ensure a unified experience. Agents can now insert multiple canned responses at any cursor position. 4. **Floating editor menu** for the reply box to improve accessibility and overall user experience. 5. **New Strikethrough formatting option** added to the editor menu. --- **Editor repo PR**: https://github.com/chatwoot/prosemirror-schema/pull/36 Fixes https://github.com/chatwoot/chatwoot/issues/12517, [CW-5924](https://linear.app/chatwoot/issue/CW-5924/standardize-the-editor), [CW-5679](https://linear.app/chatwoot/issue/CW-5679/allow-inserting-multiple-canned-responses-in-a-single-message) ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? ### Screenshot **Dark** <img width="850" height="345" alt="image" src="https://github.com/user-attachments/assets/47748e6c-380f-44a3-9e3b-c27e0c830bd0" /> **Light** <img width="850" height="345" alt="image" src="https://github.com/user-attachments/assets/6746cf32-bf63-4280-a5bd-bbd42c3cbe84" /> ## 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 - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Pranav <pranav@chatwoot.com> Co-authored-by: Vinay Keerthi <11478411+stonecharioteer@users.noreply.github.com>
138 lines
3.6 KiB
JavaScript
138 lines
3.6 KiB
JavaScript
// Moved from editorHelper.spec.js to editorContentHelper.spec.js
|
|
// the mock of chatwoot/prosemirror-schema is getting conflicted with other specs
|
|
import { getContentNode } from '../editorHelper';
|
|
import { MessageMarkdownTransformer } from '@chatwoot/prosemirror-schema';
|
|
import { replaceVariablesInMessage } from '@chatwoot/utils';
|
|
|
|
vi.mock('@chatwoot/prosemirror-schema', () => ({
|
|
MessageMarkdownTransformer: vi.fn(),
|
|
}));
|
|
|
|
vi.mock('@chatwoot/utils', () => ({
|
|
replaceVariablesInMessage: vi.fn(),
|
|
}));
|
|
|
|
describe('getContentNode', () => {
|
|
let editorView;
|
|
|
|
beforeEach(() => {
|
|
editorView = {
|
|
state: {
|
|
schema: {
|
|
nodes: {
|
|
mention: {
|
|
create: vi.fn(),
|
|
},
|
|
},
|
|
text: vi.fn(),
|
|
},
|
|
},
|
|
};
|
|
});
|
|
|
|
describe('getMentionNode', () => {
|
|
it('should create a mention node', () => {
|
|
const content = { id: 1, name: 'John Doe' };
|
|
const from = 0;
|
|
const to = 10;
|
|
getContentNode(editorView, 'mention', content, {
|
|
from,
|
|
to,
|
|
});
|
|
|
|
expect(editorView.state.schema.nodes.mention.create).toHaveBeenCalledWith(
|
|
{
|
|
userId: content.id,
|
|
userFullName: content.name,
|
|
mentionType: 'user',
|
|
}
|
|
);
|
|
});
|
|
});
|
|
|
|
describe('getCannedResponseNode', () => {
|
|
it('should create a canned response node', () => {
|
|
const content = 'Hello {{name}}';
|
|
const variables = { name: 'John' };
|
|
const from = 0;
|
|
const to = 10;
|
|
const updatedMessage = 'Hello John';
|
|
|
|
// Mock the node that will be returned by parse
|
|
const mockNode = { textContent: updatedMessage };
|
|
|
|
replaceVariablesInMessage.mockReturnValue(updatedMessage);
|
|
|
|
// Mock MessageMarkdownTransformer instance with parse method
|
|
const mockTransformer = {
|
|
parse: vi.fn().mockReturnValue(mockNode),
|
|
};
|
|
MessageMarkdownTransformer.mockImplementation(() => mockTransformer);
|
|
|
|
const result = getContentNode(
|
|
editorView,
|
|
'cannedResponse',
|
|
content,
|
|
{ from, to },
|
|
variables
|
|
);
|
|
|
|
expect(replaceVariablesInMessage).toHaveBeenCalledWith({
|
|
message: content,
|
|
variables,
|
|
});
|
|
expect(MessageMarkdownTransformer).toHaveBeenCalledWith(
|
|
editorView.state.schema
|
|
);
|
|
expect(mockTransformer.parse).toHaveBeenCalledWith(updatedMessage);
|
|
expect(result.node).toBe(mockNode);
|
|
expect(result.node.textContent).toBe(updatedMessage);
|
|
// When textContent matches updatedMessage, from should remain unchanged
|
|
expect(result.from).toBe(from);
|
|
expect(result.to).toBe(to);
|
|
});
|
|
});
|
|
|
|
describe('getVariableNode', () => {
|
|
it('should create a variable node', () => {
|
|
const content = 'name';
|
|
const from = 0;
|
|
const to = 10;
|
|
getContentNode(editorView, 'variable', content, {
|
|
from,
|
|
to,
|
|
});
|
|
|
|
expect(editorView.state.schema.text).toHaveBeenCalledWith('{{name}}');
|
|
});
|
|
});
|
|
|
|
describe('getEmojiNode', () => {
|
|
it('should create an emoji node', () => {
|
|
const content = '😊';
|
|
const from = 0;
|
|
const to = 2;
|
|
getContentNode(editorView, 'emoji', content, {
|
|
from,
|
|
to,
|
|
});
|
|
|
|
expect(editorView.state.schema.text).toHaveBeenCalledWith('😊');
|
|
});
|
|
});
|
|
|
|
describe('getContentNode', () => {
|
|
it('should return null for invalid type', () => {
|
|
const content = 'invalid';
|
|
const from = 0;
|
|
const to = 10;
|
|
const { node } = getContentNode(editorView, 'invalid', content, {
|
|
from,
|
|
to,
|
|
});
|
|
|
|
expect(node).toBeNull();
|
|
});
|
|
});
|
|
});
|