All files / roosterjs-content-model-plugins/lib/customReplace CustomReplacePlugin.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
2x
2x
 
 
 
 
 
2x
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
1x
2x
2x
4x
 
 
 
 
 
 
 
 
1x
2x
 
 
 
 
 
 
 
 
1x
3x
3x
 
3x
3x
 
 
 
 
3x
3x
3x
3x
3x
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
import { formatTextSegmentBeforeSelectionMarker } from 'roosterjs-content-model-api';
import type {
    ContentModelText,
    EditorInputEvent,
    EditorPlugin,
    IEditor,
    PluginEvent,
    ShallowMutableContentModelParagraph,
} from 'roosterjs-content-model-types';
 
/**
 * The CustomReplace interface defines a custom replacement that can be used in CustomReplacePlugin.
 */
export interface CustomReplace {
    /**
     * The string to replace in the editor.
     */
    stringToReplace: string;
 
    /**
     * The string to replace with.
     */
    replacementString: string;
 
    /**
     * The handler to replace the string.
     * @param previousSegment The text segment to replace.
     * @param stringToReplace The string to replace.
     * @param replacementString The string to replace with.
     * @param paragraph The paragraph that contains the text segment.
     * @returns True if the string is replaced successfully, otherwise false.
     */
    replacementHandler: (
        previousSegment: ContentModelText,
        stringToReplace: string,
        replacementString: string,
        paragraph?: ShallowMutableContentModelParagraph
    ) => boolean;
}
 
/**
 * CustomReplacePlugin is a plugin that allows you to replace a string with another string in the editor.
 */
export class CustomReplacePlugin implements EditorPlugin {
    private editor: IEditor | null = null;
    private triggerKeys: string[] = [];
 
    /**
     * @param customReplacements Custom replacement rules.
     * Ex: [{ stringToReplace: ':)', replacementString: '🙂', replacementHandler: replaceEmojis }]
     */
    constructor(private customReplacements: CustomReplace[]) {}
 
    /**
     * Get name of this plugin
     */
    getName() {
        return 'CustomReplace';
    }
 
    /**
     * The first method that editor will call to a plugin when editor is initializing.
     * It will pass in the editor instance, plugin should take this chance to save the
     * editor reference so that it can call to any editor method or format API later.
     * @param editor The editor object
     */
    initialize(editor: IEditor) {
        this.editor = editor;
        this.triggerKeys = this.customReplacements.map(replacement =>
            replacement.stringToReplace.slice(-1)
        );
    }
 
    /**
     * The last method that editor will call to a plugin before it is disposed.
     * Plugin can take this chance to clear the reference to editor. After this method is
     * called, plugin should not call to any editor method since it will result in error.
     */
    dispose() {
        this.editor = null;
    }
 
    /**
     * Core method for a plugin. Once an event happens in editor, editor will call this
     * method of each plugin to handle the event as long as the event is not handled
     * exclusively by another plugin.
     * @param event The event to handle:
     */
    onPluginEvent(event: PluginEvent) {
        Eif (this.editor) {
            switch (event.eventType) {
                case 'input':
                    this.handleEditorInputEvent(this.editor, event);
                    break;
            }
        }
    }
 
    private handleEditorInputEvent(editor: IEditor, event: EditorInputEvent) {
        const rawEvent = event.rawEvent;
        const selection = editor.getDOMSelection();
        const key = rawEvent.data;
        if (
            this.customReplacements.length > 0 &&
            rawEvent.inputType === 'insertText' &&
            selection &&
            selection.type === 'range' &&
            selection.range.collapsed &&
            key &&
            this.triggerKeys.indexOf(key) > -1
        ) {
            formatTextSegmentBeforeSelectionMarker(
                editor,
                (_model, previousSegment, paragraph, _markerFormat, context) => {
                    const replaced = this.customReplacements.some(
                        ({ stringToReplace, replacementString, replacementHandler }) => {
                            return replacementHandler(
                                previousSegment,
                                stringToReplace,
                                replacementString,
                                paragraph
                            );
                        }
                    );
                    if (replaced) {
                        context.canUndoByBackspace = true;
                        return true;
                    }
                    return false;
                }
            );
        }
    }
}