| autocomplete.js |
Prepares an editor instance for autocompletion.
|
10229 |
| codemirror |
|
|
| codemirror6 |
|
|
| css-autocompleter.js |
Here is what this file (+ css-parsing-utils.js) do.
The main objective here is to provide as much suggestions to the user editing
a stylesheet in Style Editor. The possible things that can be suggested are:
- CSS property names
- CSS property values
- CSS Selectors
- Some other known CSS keywords
Gecko provides a list of both property names and their corresponding values.
We take out a list of matching selectors using the Inspector actor's
`getSuggestionsForQuery` method. Now the only thing is to parse the CSS being
edited by the user, figure out what token or word is being written and last
but the most difficult, what is being edited.
The file 'css-parsing-utils' helps to convert the CSS into meaningful tokens,
each having a certain type associated with it. These tokens help us to figure
out the currently edited word and to write a CSS state machine to figure out
what the user is currently editing (e.g. a selector or a property or a value,
or even fine grained information like an id in the selector).
The `resolveState` method iterated over the tokens spitted out by the
tokenizer, using switch cases, follows a state machine logic and finally
figures out these informations:
- The state of the CSS at the cursor (one out of CSS_STATES)
- The current token that is being edited `completing`
- If the state is "selector", the selector state (one of SELECTOR_STATES)
- If the state is "selector", the current selector till the cursor
- If the state is "value", the corresponding property name
In case of "value" and "property" states, we simply use the information
provided by Gecko to filter out the possible suggestions.
For "selector" state, we request the Inspector actor to query the page DOM
and filter out the possible suggestions.
For "media" and "keyframes" state, the only possible suggestions for now are
"media" and "keyframes" respectively, although "media" can have suggestions
like "max-width", "orientation" etc. Similarly "value" state can also have
much better logical suggestions if we fine grain identify a sub state just
like we do for the "selector" state.
|
42856 |
| editor-commands-controller.js |
The source editor exposes XUL commands that can be used when embedded in a XUL
document. This controller drives the availability and behavior of the commands. When
the editor input field is focused, this controller will update the matching menu item
entries found in application menus or context menus.
|
2382 |
| editor.js |
A very thin wrapper around CodeMirror. Provides a number
of helper methods to make our use of CodeMirror easier and
another method, appendTo, to actually create and append
the CodeMirror instance.
Note that Editor doesn't expose CodeMirror instance to the
outside world.
Constructor accepts one argument, config. It is very
similar to the CodeMirror configuration object so for most
properties go to CodeMirror's documentation (see below).
Other than that, it accepts one additional and optional
property contextMenu. This property should be an element, or
an ID of an element that we can use as a context menu.
This object is also an event emitter.
CodeMirror docs: http://codemirror.net/doc/manual.html
|
113376 |
| moz.build |
|
580 |
| package.json |
|
730 |
| README |
This is the CodeMirror editor packaged for the Mozilla Project. CodeMirror |
10980 |
| rollup.config.mjs |
eslint-disable import/no-unresolved |
653 |
| test |
|
|
| wasm.js |
|
2360 |
| webpack.config.js |
|
2249 |