How does element suggestion work?

[5e-Cleric]

Hi, i am working on a web app and using CodeMirror 6 to style stuff inside it.

I was wondering how do you manage to provide a list of selectors to suggest to the user, do you use an extension? how do you create the dynamic list of selectors?

[webextensions]

@5e-Cleric

It is custom code. There are 2 parts for suggesting the CSS selectors:

1. Getting existing selectors: Defined in function getExistingCSSSelectors at:

   live-css-editor/extension/scripts/magicss/magicss.js

   Line 1078 in ad07e6f

   var getExistingCSSSelectors = function (tagsToExclude) {

2. Generating selectors: Defined in function generateSelector in file https://github.com/webextensions/live-css-editor/blob/ad07e6fe50d1c7684eab8313fe760cf70ccdafd1/extension/scripts/magicss/generate-selector.js which is used at:

   live-css-editor/extension/scripts/magicss/magicss.js

   Line 2158 in ad07e6f

   window.generateSelector(targetElement, {skipClass: 'magicss-mouse-over-dom-element'}),

There is an intention to move these aspects into their own libraries when time permits, as noted at:

live-css-editor/TODO.md

Line 34 in ad07e6f

* Move some functionalities into their own projects, for example, generate selectors, get existing selectors, point-and-click etc

[5e-Cleric]

If they were libraries that would be awesome, meanwhile thanks for all the info! Have you considered making the entire code esitor with the extra features as an entire library or package? i would consider it as an alternative to codeMirror. Specially with the less and scss compatibility.

[webextensions]

@5e-Cleric
Thank you for your appreciation!

We may move such reusable functions into npm packages of their own (or at least export them from some package).

While those functions are not well documented, we hope that those functions should be robust enough and can be copy-pasted by someone who wishes to utilize those.

From time-to-time, we move some of our reusable functions / wrappers under https://www.npmjs.com/package/helpmate and https://www.npmjs.com/package/helpmate-css from our different projects (though without any documentation so far, apart from a decent enough function name).

This editor extensively utilizes CodeMirror (v5) and its various plugins. We had to customize some aspects of those plugins to enable some of those auto-complete features (Ref: https://github.com/webextensions/live-css-editor/blob/ad07e6fe50d1c7684eab8313fe760cf70ccdafd1/extension/scripts/3rdparty/codemirror/addons/hint/css-hint_customized.js.source.txt and other such customized files near that location).

The floating editor in itself (with customizable toolbar etc) may be made as a reusable project, as intended at:

live-css-editor/TODO.md

Line 26 in ad07e6f

* Make "editor" a standalone project, so that it can be added to an HTML page as well

But, that would need a more dedicated effort, bigger refactoring and other practical decisions (eg: should that be rewritten in React?). Hence, not expecting that in near future.

[5e-Cleric]

While those functions are not well documented, we hope that those functions should be robust enough and can be copy-pasted by someone who wishes to utilize those.

I'll probably have to write them from scratch for my project, because the structure is different, and we don't use jQuery, but it is a great place to start.