Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ability to customize Editor #245

Open
ashmaroli opened this issue Dec 2, 2016 · 18 comments
Open

Ability to customize Editor #245

ashmaroli opened this issue Dec 2, 2016 · 18 comments

Comments

@ashmaroli
Copy link
Member

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:

ja-editor-def

And I would like it to be customized to:

ja-editor-cust

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

@mertkahyaoglu
Copy link
Member

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
Copy link
Member Author

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
Copy link
Member Author

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
Copy link
Member

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
Copy link
Member Author

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
Copy link
Member

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
Copy link
Member Author

ashmaroli commented Dec 2, 2016

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
Copy link
Member

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

@ashmaroli
Copy link
Member Author

@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
Copy link
Member Author

@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
Copy link
Member

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

@ashmaroli
Copy link
Member Author

light background: xcode
dark background: monokai

@jekyllbot
Copy link

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
Copy link
Member Author

Still more than a month away from going stale @jekyllbot

@jekyllbot jekyllbot removed the stale label Jan 23, 2017
@mertkahyaoglu
Copy link
Member

@jekyllbot :trollface:

@mertkahyaoglu mertkahyaoglu added this to the Nice to have milestone Feb 15, 2017
@jekyllbot
Copy link

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
Copy link

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.

@jekyllbot jekyllbot removed the stale label May 1, 2018
@kenman345
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants