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

Copy to clipboard in query builder #6584

Merged
merged 2 commits into from
Oct 29, 2019
Merged

Copy to clipboard in query builder #6584

merged 2 commits into from
Oct 29, 2019

Conversation

crgrieve
Copy link
Contributor

@crgrieve crgrieve commented Oct 4, 2019

Hello,

I thought it would be cool (and hopefully useful) to have "copy to clipboard" functionality to the Query Builder in template editor.

See screenshot:
image

Thanks,
Carole

Querybuilder copy to clipboard
@bjarnef
Copy link
Contributor

bjarnef commented Oct 5, 2019

@crgrieve it seems like a great Idea, but I think it would be useful to create e.g. a component like umb-code-snippet which include this button as part of the code snippet. This can be re-used in other part of the backoffice, e.g. by package developers.

Maybe this button as part of the code area, e.g. in top right corner.
https://i.stack.imgur.com/NtG3c.gif

This could also use a plugin to highlight code syntax and e.g. possible to specify the code syntax via a property. Not sure if it is possible to auto detect the code syntax.

Also it would be great if this code snippet use font like monospace or similar.

As far I can see we don't have any syntax highlighting except ace code editor, but we could use highlight.js

@nul800sebastiaan any thoughts on this?

An example in a newer version of Angular, but it might work as inspiration.
https://angular.carbondesignsystem.com/documentation/components/CodeSnippet.html
https://angular.carbondesignsystem.com/documentation/components/CodeSnippet.html#example

<umb-code-snippet language="js">Code</umb-code-snippet>

@nul800sebastiaan
Copy link
Member

Thanks @crgrieve, we'll have a look soon!

@bjarnef adding a highlighter is nice but seems like a bit of overkill for one small piece of code, we would need a broader use-case for loading even more javascript libraries into people's browsers,

@bjarnef
Copy link
Contributor

bjarnef commented Oct 6, 2019

@nul800sebastiaan okay, but adding this as a component might be useful anyway, e.g. in the custom view after installing a package :)

@nul800sebastiaan
Copy link
Member

We usually try to work with the 80/20 rule: will adding something like this benefit 80% of the users of the CMS? In this case, I don't see this benefiting very many people so the answer is: not right now. :-)

@nul800sebastiaan
Copy link
Member

Thanks very much @crgrieve - nice work! 👍

@bjarnef
Copy link
Contributor

bjarnef commented Oct 31, 2019

@nul800sebastiaan an alternative to highlight.js could be Prism, but yes depends on if we need it somewhere else in backoffice, e.g. it seems this blogpost is using Prism to show the code snippets:
https://spin.atomicobject.com/2017/08/07/intro-mocking-moq/

@bjarnef
Copy link
Contributor

bjarnef commented Nov 5, 2019

@nul800sebastiaan a benefit with Prism is that TinyMCE support this to allow inserting code snippet into the richtext editor.
https://www.tiny.cloud/docs/plugins/codesample/

image

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

Successfully merging this pull request may close these issues.

5 participants