33 * @see https://github.com/easylogic/ace-colorpicker/blob/main/src/extension/ace/colorview.js
44 */
55
6- import Color from ' utils/color' ;
7- import { HEX , HSL , HSLA , RGB , RGBA , isValidColor } from ' utils/color/regex' ;
6+ import Color from " utils/color" ;
7+ import { HEX , HSL , HSLA , RGB , RGBA , isValidColor } from " utils/color/regex" ;
88
9- const COLORPICKER_TOKEN_CLASS = ' .ace_color' ;
9+ const COLORPICKER_TOKEN_CLASS = " .ace_color" ;
1010const changedRules = [ ] ;
1111
1212let editor = null ;
@@ -17,139 +17,140 @@ let editor = null;
1717 * @param {boolean } [force=false] Force update color view
1818 */
1919export default function initColorView ( e , force = false ) {
20- editor = e ;
21- const { renderer } = editor ;
20+ editor = e ;
21+ const { renderer } = editor ;
2222
23- editor . on ( ' changeMode' , onChangeMode ) ;
24- renderer . on ( ' afterRender' , afterRender ) ;
23+ editor . on ( " changeMode" , onChangeMode ) ;
24+ renderer . on ( " afterRender" , afterRender ) ;
2525
26- if ( force ) {
27- const { files } = editorManager ;
26+ if ( force ) {
27+ const { files } = editorManager ;
2828
29- if ( Array . isArray ( files ) ) {
30- files . forEach ( file => {
31- if ( file . session ) {
32- file . session . _addedColorRule = false ;
33- }
34- } ) ;
35- }
29+ if ( Array . isArray ( files ) ) {
30+ files . forEach ( ( file ) => {
31+ if ( file . session ) {
32+ file . session . _addedColorRule = false ;
33+ }
34+ } ) ;
35+ }
3636
37- onChangeMode ( ) ;
38- }
37+ onChangeMode ( ) ;
38+ }
3939}
4040
4141export function deactivateColorView ( ) {
42- const { renderer } = editor ;
42+ const { renderer } = editor ;
4343
44- changedRules . forEach ( ( rule ) => rule . shift ( ) ) ;
45- changedRules . length = 0 ;
46- forceTokenizer ( ) ;
44+ changedRules . forEach ( ( rule ) => rule . shift ( ) ) ;
45+ changedRules . length = 0 ;
46+ forceTokenizer ( ) ;
4747
48- editor . off ( ' changeMode' , onChangeMode ) ;
49- renderer . off ( ' afterRender' , afterRender ) ;
48+ editor . off ( " changeMode" , onChangeMode ) ;
49+ renderer . off ( " afterRender" , afterRender ) ;
5050}
5151
5252/**
5353 * Checks if the session supports color
54- * @param {AceAjax.IEditSession } session
55- * @returns
54+ * @param {AceAjax.IEditSession } session
55+ * @returns
5656 */
5757function sessionSupportsColor ( session ) {
58- const mode = session . getMode ( ) . $id . split ( '/' ) . pop ( ) ;
59- return / c s s | l e s s | s c s s | s a s s | s t y l u s | h t m l | d a r t / . test ( mode )
60- ? mode
61- : false ;
58+ const mode = session . getMode ( ) . $id . split ( "/" ) . pop ( ) ;
59+ return / c s s | l e s s | s c s s | s a s s | s t y l u s | h t m l | d a r t / . test ( mode ) ? mode : false ;
6260}
6361
6462function onChangeMode ( ) {
65- const session = editor . session ;
66- let forceUpdate = false ;
67-
68- // if mode is not css, scss, sass, less, stylus, or html, return
69- const mode = sessionSupportsColor ( session ) ;
70- if ( session . _addedColorRule || ! mode ) {
71- return ;
72- }
73-
74- let rules = session . $mode . $highlightRules . getRules ( ) ;
75-
76- if ( mode === ' css' ) {
77- rules = { ' ruleset' rules [ ' ruleset' ] } ;
78- } else if ( mode === ' html' ) {
79- rules = { ' css-ruleset' rules [ ' css-ruleset' ] } ;
80- }
81-
82- Object . keys ( rules ) . forEach ( ( key ) => {
83- const rule = rules [ key ] ;
84- if ( rule instanceof Array ) {
85- const ruleExists = rule . some ( ( r ) => r . token === ' color' ) ;
86- if ( ruleExists ) return ;
87- forceUpdate = true ;
88- rule . unshift ( {
89- token : "color" ,
90- regex : `${ HEX } ${ RGB } ${ RGBA } ${ HSL } ${ HSLA } ,
91- } ) ;
92- changedRules . push ( rule ) ;
93- return ;
94- }
95- } ) ;
96-
97- if ( ! forceUpdate ) return ;
98-
99- forceTokenizer ( ) ;
63+ const session = editor . session ;
64+ let forceUpdate = false ;
65+
66+ // if mode is not css, scss, sass, less, stylus, or html, return
67+ const mode = sessionSupportsColor ( session ) ;
68+ if ( session . _addedColorRule || ! mode ) {
69+ return ;
70+ }
71+
72+ let rules = session . $mode . $highlightRules . getRules ( ) ;
73+
74+ if ( mode === " css" ) {
75+ rules = { ruleset : rules [ " ruleset" ] } ;
76+ } else if ( mode === " html" ) {
77+ rules = { " css-ruleset" rules [ " css-ruleset" ] } ;
78+ }
79+
80+ Object . keys ( rules ) . forEach ( ( key ) => {
81+ const rule = rules [ key ] ;
82+ if ( Array . isArray ( rule ) ) {
83+ const ruleExists = rule . some ( ( r ) => r . token === " color" ) ;
84+ if ( ruleExists ) return ;
85+ forceUpdate = true ;
86+ rule . unshift ( {
87+ token : "color" ,
88+ regex : `${ HEX } ${ RGB } ${ RGBA } ${ HSL } ${ HSLA } ,
89+ } ) ;
90+ changedRules . push ( rule ) ;
91+ return ;
92+ }
93+ } ) ;
94+
95+ if ( ! forceUpdate ) return ;
96+
97+ forceTokenizer ( ) ;
10098}
10199
102100function afterRender ( ) {
103- const { session, renderer } = editor ;
104- const { content } = renderer ;
105- let classes = COLORPICKER_TOKEN_CLASS ;
106-
107- // if session is css, scss, less, sass, stylus, or html (with css mode), continue
108-
109- const mode = sessionSupportsColor ( session ) ;
110- if ( ! mode ) {
111- return ;
112- }
113-
114- if ( mode === 'scss' ) {
115- classes += ',.ace_function' ;
116- }
117-
118- content . getAll ( COLORPICKER_TOKEN_CLASS ) . forEach ( ( /**@type {HTMLElement } */ el , i , els ) => {
119- let content = el . textContent ;
120- const previousContent = els [ i - 1 ] ?. textContent ;
121- const nextContent = els [ i + 1 ] ?. textContent ;
122- const multiLinePrev = previousContent + content ;
123- const multiLineNext = content + nextContent ;
124-
125- if ( el . dataset . modified === 'true' ) return ;
126- el . dataset . modified = 'true' ;
127-
128- if ( ! isValidColor ( content ) ) {
129- if ( isValidColor ( multiLinePrev ) ) {
130- content = multiLinePrev ;
131- } else if ( isValidColor ( multiLineNext ) ) {
132- content = multiLineNext ;
133- } else {
134- return ;
135- }
136- }
137-
138- try {
139- const fontColorString = Color ( content ) . luminance > 0.5 ? "#000" : "#fff" ;
140- el . classList . add ( 'ace_color' ) ;
141- el . style . cssText = `background-color: ${ content } ${ fontColorString } ;
142- } catch ( error ) {
143- console . log ( "Invalid color" , content ) ;
144- }
145- } ) ;
101+ const { session, renderer } = editor ;
102+ const { content } = renderer ;
103+ let classes = COLORPICKER_TOKEN_CLASS ;
104+
105+ // if session is css, scss, less, sass, stylus, or html (with css mode), continue
106+
107+ const mode = sessionSupportsColor ( session ) ;
108+ if ( ! mode ) {
109+ return ;
110+ }
111+
112+ if ( mode === "scss" ) {
113+ classes += ",.ace_function" ;
114+ }
115+
116+ content
117+ . getAll ( COLORPICKER_TOKEN_CLASS )
118+ . forEach ( ( /**@type {HTMLElement } */ el , i , els ) => {
119+ let content = el . textContent ;
120+ const previousContent = els [ i - 1 ] ?. textContent ;
121+ const nextContent = els [ i + 1 ] ?. textContent ;
122+ const multiLinePrev = previousContent + content ;
123+ const multiLineNext = content + nextContent ;
124+
125+ if ( el . dataset . modified === "true" ) return ;
126+ el . dataset . modified = "true" ;
127+
128+ if ( ! isValidColor ( content ) ) {
129+ if ( isValidColor ( multiLinePrev ) ) {
130+ content = multiLinePrev ;
131+ } else if ( isValidColor ( multiLineNext ) ) {
132+ content = multiLineNext ;
133+ } else {
134+ return ;
135+ }
136+ }
137+
138+ try {
139+ const fontColorString =
140+ Color ( content ) . luminance > 0.5 ? "#000" : "#fff" ;
141+ el . classList . add ( "ace_color" ) ;
142+ el . style . cssText = `background-color: ${ content } ${ fontColorString } ;
143+ } catch ( error ) {
144+ console . log ( "Invalid color" , content ) ;
145+ }
146+ } ) ;
146147}
147148
148149function forceTokenizer ( ) {
149- const { session } = editor ;
150- // force recreation of tokenizer
151- session . $mode . $tokenizer = null ;
152- session . bgTokenizer . setTokenizer ( session . $mode . getTokenizer ( ) ) ;
153- // force re-highlight whole document
154- session . bgTokenizer . start ( 0 ) ;
150+ const { session } = editor ;
151+ // force recreation of tokenizer
152+ session . $mode . $tokenizer = null ;
153+ session . bgTokenizer . setTokenizer ( session . $mode . getTokenizer ( ) ) ;
154+ // force re-highlight whole document
155+ session . bgTokenizer . start ( 0 ) ;
155156}
0 commit comments