Stacks-Editor icon indicating copy to clipboard operation
Stacks-Editor copied to clipboard

feat: add language dropdown to code_block nodes

Open b-kelly opened this issue 2 years ago • 3 comments

Adds the ability to choose the language for codeblocks in richtext mode. Opening as a draft because all the code is there, but it needs a design pass before being merged.

image

Fixes #28

b-kelly avatar Mar 22 '22 17:03 b-kelly

Deploy Preview for stacks-editor ready!

Name Link
Latest commit 273b327aa283c69fe8422ac3465d38281cff6829
Latest deploy log https://app.netlify.com/sites/stacks-editor/deploys/6331f78ced3f7b00085667c6
Deploy Preview https://deploy-preview-104--stacks-editor.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify[bot] avatar Mar 22 '22 17:03 netlify[bot]

@aaronshekey One of the reasons I didn't go with the s-select originally is because it covers too much text. What should we do in cases like this:

image

If possible, I don't want to break the flow of the doc by placing the select outside of the code_block. Perhaps, we could hide that select if the user's cursor isn't in the node or take a similar approach as Jira:

image

b-kelly avatar Mar 23 '22 15:03 b-kelly

In reference to the JIRA ticket and other chat threads in Slack:

@b-kelly I was thinking something like this

image

Much of this is taken from what Collectives is doing for their tag dropdown like we talked about in chat. For the code selector though, we’d need to have the dropdown show at the bottom of the code block so that it doesn't block the middle of where people are typing any time they click into a part of the code block.

In the screenshot above I have it default to no language selected, but it seems like maybe we should have PlainText as the default?

phoebe-leung avatar Oct 03 '22 17:10 phoebe-leung