Ability to customize Editor

[ashmaroli]

Hi,
I would like to know if you can add the ability to customize the AceEditor component in src/components/Editor.js

e.g. (on JekyllAdmin-0.1.1, Windows-7)
This is the default view:

And I would like it to be customized to:

Perhaps a gear icon somewhere that would allow to select another theme, change font-sizes, etc..
Thanks

[mertkahyaoglu]

That would be a cool feature 👍

Ace Editor allows us to select the syntax highlighting but it should be hardcoded like here. The solution for that we can preload all modules and change the prop here on the runtime. Other things like font-sizes and background color can be changed via css.

[ashmaroli]

Ace Editor allows us to select the syntax highlighting but it should be hardcoded

That's exactly how I changed to theme="monokai".. while running server-frontend, but couldn't find a way to have it be altered in a jekyll site..

[ashmaroli]

Other things like font-sizes and background color can be changed via css.

True. But a Jekyll Site user doesn't have access to the Admin Panel's CSS.. no?

[mertkahyaoglu]

That's exactly how I changed to theme="monokai"

Maybe we can read the highlighting theme from config file and change it accordingly.

For the font size, React Ace has the right prop for that, fontSize, again that can be read from the config file or we may put it under the gear icon you suggested.

[ashmaroli]

ReactJS is still a foreign territory for me. So, I wont be creating a pull request towards this.
I'm leaving a few points below. They may be considered (optional) by whoever is planning to create the pull..

--

• FrontEnd (visible in Browser) :
  • Icon: gear / wrench / spanner
  • Fields: (The data entered in the following will be saved in a file called .adminconfig and it will be placed inside the Jekyll Site's source_dir)
    • Format (YAML/CSV/TOML), or auto-detect from DatafileType:
    • Theme:
      (Fields below will be predefined by theme. Altering them will change Theme: to "Custom")
      • Font-Size:
      • Color:
      • Background:
• BackEnd (not visible via Browser) :
  • .adminconfig : Located at the root of the Jekyll Site's source_dir, its a file to house settings data from Admin FrontEnd (can also include settings for SimpleMDE component.). This removes the need to have the plugin read the site's _config.yml and have it be updated to save user preferences.

[mertkahyaoglu]

In the first step, we better rely on default themes rather than creating custom ones by changing color and background.

Other than that, LGTM 👍 Thanks for the details. @ashmaroli

[ashmaroli]

If you compare the two images I posted in the main comment, you'll see that there's a slight difference apart from the theme-change..:

• I changed the font-size from default 12 to 14px
• The content was at position: absolute, so I moved it down and towards right by 9px ( top: 9px, left: 9px)

If you feel that can be a permanent modification, without issues in future, I'll open a PR to have it added to the main CSS file.

[mertkahyaoglu]

Please open the PR 👍 I tried to fix it with padding but couldn't achieve that.

[ashmaroli]

@mertkahyaoglu I wont be submitting the pull.. Tests conducted locally show that I will cause issues for bigger datafiles (that require scrolling to view the last line / last word)
Alternatively, I've noticed that AceEditor has an onScroll function which starts at margin-top: 0 and margin-left: 0 and end at negative margins at the other end.
This could be leveraged to start at margin-top: 10px & margin-left: 10px and have their respective ending margins adjusted accordingly.

But its outside my skill-level.

[ashmaroli]

@mertkahyaoglu can I place a minor request here? The github theme used by the Editor component is very bland (offers barely-there syntax highlighting out-of-the-box). Can you change to another default theme? Thanks :)

[mertkahyaoglu]

Yeah, I agree but I couldn't decide what to choose. Any suggestions? (themes)

[ashmaroli]

light background: xcode
dark background: monokai

[jekyllbot]

This issue has been automatically marked as stale because it has not been commented on for at least two months.

The resources of the Jekyll team are limited, and so we are asking for your help.

If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open.

If this is a feature request, please consider whether it can be accomplished in another way. If it cannot, please elaborate on why it is core to this project and why you feel more than 80% of users would find this beneficial.

This issue will automatically be closed in two months if no further activity occurs. Thank you for all your contributions.

[ashmaroli]

Still more than a month away from going stale @jekyllbot

[mertkahyaoglu]

@jekyllbot

[jekyllbot]

This issue has been automatically marked as stale because it has not been commented on for at least two months.

The resources of the Jekyll team are limited, and so we are asking for your help.

If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open.

If this is a feature request, please consider whether it can be accomplished in another way. If it cannot, please elaborate on why it is core to this project and why you feel more than 80% of users would find this beneficial.

This issue will automatically be closed in two months if no further activity occurs. Thank you for all your contributions.

[kenman345]

just wanted to throw some input of my own into this.

the jekyll site I help run has right now two schema files we use.

1. sections_schema.yml
2. websites_schema.yml

We use these to run against Kwalify validator that our data for the directory we run is in the right structure for us to use properly. If Jekyll-Admin had a way of consuming this schema yaml files, then it would be able to assist in adding more data to a file when it sees which one it identifies. Its easy to use Kwalify to generate a ruby class from the schema, but also to have it help generate the schema based on (I think, I usually do it by hand but believe I saw some documentation on it).

For our use cases, we run the validator on the schema first, then on the data files here:
https://github.com/acceptbitcoincash/acceptbitcoincash/blob/master/verify.rb#L138-L157

but the point is that it wouldnt be the worst thing (from at least my point of view) if more sites that use jekyll with _data or other collections would be able to generate these types of files if they wished, to have Jekyll-Admin and potentially other Jekyll administrative tools to run against and make use of in the future. The use of schemas to validate data makes sense for data consistency and perfect sense for helping Jekyll-Admin understand whats available as key/value pairs for data.

Side note, while I'm not very great at ruby, I have been learning and put together a few rake tasks that make use of the schema files I mentioned above to allow the rake task ask for data and assist a user to adding data. I get that this is a bit nuanced to how I use jekyll and Rake/ruby but it is an example of the power these schema files can give us. The fact that if we add a new key/value pair to the schema and my rake tasks automatically will be able to make use of it to ask for user input and for the schema to validate all the data before we publish, is really powerful for us maintainers of the site.

[kenman345]

Also wanted to add that the schema's I mentioned in my post above allow for enums to be defined. It makes it great from defining expected data sets/limiting what the values are, which can be useful in a UI to give a dropdown set of options to users.

I looked at ruby-awesome to see if I saw any other validation solutions out there and while I saw a few, none were as well documented and thought out as tKwalifies standards and did not have ruby class generation from the schemas that would allow easy compilation of the schema to use as is or as a ruby class for the backend of Jekyll-admin