1+ // Handle the click event of the style buttons inside the editor.
2+ window . handleClick = ( style , element ) => {
3+ const { styles } = editorConfig ( ) ;
4+ const input = element . querySelectorAll ( "textarea" ) [ 0 ] ;
5+
6+ // Get the start and end positions of the current selection.
7+ const selectionStart = input . selectionStart ;
8+ const selectionEnd = input . selectionEnd ;
9+
10+ // Find the style in the configuration.
11+ const styleFormat = styles [ style ] ;
12+
13+ // Get any prefix and/or suffix characters from the selected style.
14+ const prefix = styleFormat . before ? styleFormat . before : "" ;
15+ const suffix = styleFormat . after ? styleFormat . after : "" ;
16+
17+ // Insert the prefix at the relevant position.
18+ input . value = insertCharactersAtPosition (
19+ input . value ,
20+ prefix ,
21+ selectionStart
22+ ) ;
23+
24+ // Insert the suffix at the relevant position.
25+ input . value = insertCharactersAtPosition (
26+ input . value ,
27+ suffix ,
28+ selectionEnd + prefix . length
29+ ) ;
30+
31+ // Reselect the selection and focus the input.
32+ input . setSelectionRange (
33+ selectionStart + prefix . length ,
34+ selectionEnd + prefix . length
35+ ) ;
36+ input . focus ( ) ;
37+ }
38+
39+ // Insert provided characters at the desired place in a string.
40+ const insertCharactersAtPosition = ( string , character , position ) => {
41+ return [
42+ string . slice ( 0 , position ) ,
43+ character ,
44+ string . slice ( position )
45+ ] . join ( "" ) ;
46+ }
47+
48+ // Configuration object for the text editor.
49+ window . editorConfig = ( ) => {
50+ return {
51+ styles : {
52+ header : {
53+ before : "### " ,
54+ class : {
55+ "fa-header" : true
56+ }
57+ } ,
58+ bold : {
59+ before : "**" ,
60+ after : "**" ,
61+ class : {
62+ "fa-bold" : true
63+ }
64+ } ,
65+ italic : {
66+ before : "_" ,
67+ after : "_" ,
68+ class : {
69+ "fa-italic" : true
70+ }
71+ } ,
72+ quote : {
73+ before : "> " ,
74+ class : {
75+ "fa-quote-left" : true
76+ }
77+ } ,
78+ code : {
79+ before : "`" ,
80+ after : "`" ,
81+ class : {
82+ "fa-code" : true
83+ }
84+ } ,
85+ link : {
86+ before : "[](" ,
87+ after : ")" ,
88+ class : {
89+ "fa-link" : true
90+ }
91+ } ,
92+ image : {
93+ before : "" ,
95+ class : {
96+ "fa-file-image-o" : true
97+ }
98+ }
99+ }
100+ }
101+ }
102+
103+ window . expand = ( event , minHeight ) => {
104+ setTimeout ( function ( ) {
105+ if ( event . target . scrollHeight <= minHeight ) {
106+ return ;
107+ }
108+
109+ event . target . style . cssText = 'height:auto;' ;
110+ event . target . style . cssText = 'height:' + event . target . scrollHeight + 'px' ;
111+ } , 0 ) ;
112+ }
0 commit comments