Codemirror 6 editor with custom parser (or language)
Budget: $250 – $750 USD
Using Codemirror 6 and building on top of github.com/codemirror/basic-setup (see https://codemirror.net/6/examples/bundle/ )
===
Part A: Create either A) lezer language or B) codemirror-5-style streaming parser, to enable the editor do the following things:
A.1. indentation based folding (e.g. similar to python) - where below lines are foldable if their leading white space is longer than above line (see https://codemirror.net/6/examples/lang-package/ )
A.2. on input, parse active line(s!)' first 3 characters, and assign css class to line(s) based on the characters value e.g. if first 3 characters on line j are "xyz" assign class ".custom-class-xyz" to line j (same for all multi selected lines) (see https://codemirror.net/6/examples/styling/ )
A.3. on enter/new line, before moving cursor down, if current line doesn't contain "@abc", inject "@abc(param1)" at the end of line (with min & max of 1 leading space) ( see https://codemirror.net/6/examples/change/ )
A.4. @abc() function name auto complete, on typing "@" then: [abc, def, xyz, ...] list should show, if abc is selected, then @abc( should be inserted (see plugin github.com/codemirror/autocomplete )
A.5. function parameters autocomplete, for example if @abc() can accept min of 0 and max of 2 parameters: e.g. param1 and param2, like so @abc(param1, param2) - then typing "@abc(" should suggest first autocomplete values for param1: [val1, val2, val3, ...], if one value is selected or typed, then suggest values for second parameter, and so on.
A.6. each function "@abc(...)" should have it's own css class if @abc() then ".custom-func-class-abc", if @def() then".custom-func-class-def" and os on (see styling guid above)
A.6. each function's parameter's value @abc(val1, val99) should have it's own class, based on simple if-else rule, e.g. if param1(val1)==='123' then val1 will get css class ".custom-func-class-input-123" (see styling guid above)
B.7 enable inline image load and display via @image(url) using codemirror's decorations, see bottom of https://codemirror.net/6/examples/decoration/ for "checkbox" example
B.8 in similar manner, enable @link(_url_) to be clickable - but only the "_url_" part, so that it is still editable
===
Part B: Enable additional plugins
B.1 github.com/codemirror/collab plugin with a simple nodejs ws server (see https://codemirror.net/6/examples/collab/ ) - add remote users selection(s!) highlight, different color for each user - make sure multi-selections work and are highlighted properly - user with many selections will have main selection at full opacity, and secondary at lower opacity
B.2 enable zebra stripes, see https://codemirror.net/6/examples/zebra/
B.3 enable bold, italic, and underline, see https://codemirror.net/6/examples/decoration/
===
Part C: The result
C.1 No other third party libraries are to be used, only codemirror 6 and it's plugins. Confirm for special cases.
C.2 TypeScript or JavaScript will be accepted
C.3 It should just work (e.g. after npm install, launching node server, and opening browser on multiple devices)
C.4 Source code must be clean and organized, with comments for follow up work by other people.
C.5 The final result must be a private git repo, or a zip, that contains everything except node_modules folder
P.S. Codemirror 6 docs are very good: https://codemirror.net/6/docs/
===
Part A: Create either A) lezer language or B) codemirror-5-style streaming parser, to enable the editor do the following things:
A.1. indentation based folding (e.g. similar to python) - where below lines are foldable if their leading white space is longer than above line (see https://codemirror.net/6/examples/lang-package/ )
A.2. on input, parse active line(s!)' first 3 characters, and assign css class to line(s) based on the characters value e.g. if first 3 characters on line j are "xyz" assign class ".custom-class-xyz" to line j (same for all multi selected lines) (see https://codemirror.net/6/examples/styling/ )
A.3. on enter/new line, before moving cursor down, if current line doesn't contain "@abc", inject "@abc(param1)" at the end of line (with min & max of 1 leading space) ( see https://codemirror.net/6/examples/change/ )
A.4. @abc() function name auto complete, on typing "@" then: [abc, def, xyz, ...] list should show, if abc is selected, then @abc( should be inserted (see plugin github.com/codemirror/autocomplete )
A.5. function parameters autocomplete, for example if @abc() can accept min of 0 and max of 2 parameters: e.g. param1 and param2, like so @abc(param1, param2) - then typing "@abc(" should suggest first autocomplete values for param1: [val1, val2, val3, ...], if one value is selected or typed, then suggest values for second parameter, and so on.
A.6. each function "@abc(...)" should have it's own css class if @abc() then ".custom-func-class-abc", if @def() then".custom-func-class-def" and os on (see styling guid above)
A.6. each function's parameter's value @abc(val1, val99) should have it's own class, based on simple if-else rule, e.g. if param1(val1)==='123' then val1 will get css class ".custom-func-class-input-123" (see styling guid above)
B.7 enable inline image load and display via @image(url) using codemirror's decorations, see bottom of https://codemirror.net/6/examples/decoration/ for "checkbox" example
B.8 in similar manner, enable @link(_url_) to be clickable - but only the "_url_" part, so that it is still editable
===
Part B: Enable additional plugins
B.1 github.com/codemirror/collab plugin with a simple nodejs ws server (see https://codemirror.net/6/examples/collab/ ) - add remote users selection(s!) highlight, different color for each user - make sure multi-selections work and are highlighted properly - user with many selections will have main selection at full opacity, and secondary at lower opacity
B.2 enable zebra stripes, see https://codemirror.net/6/examples/zebra/
B.3 enable bold, italic, and underline, see https://codemirror.net/6/examples/decoration/
===
Part C: The result
C.1 No other third party libraries are to be used, only codemirror 6 and it's plugins. Confirm for special cases.
C.2 TypeScript or JavaScript will be accepted
C.3 It should just work (e.g. after npm install, launching node server, and opening browser on multiple devices)
C.4 Source code must be clean and organized, with comments for follow up work by other people.
C.5 The final result must be a private git repo, or a zip, that contains everything except node_modules folder
P.S. Codemirror 6 docs are very good: https://codemirror.net/6/docs/