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

feat: add language dropdown to code_block nodes #104

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from

Conversation

b-kelly
Copy link
Collaborator

@b-kelly b-kelly commented Mar 22, 2022

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 b-kelly added the mode - rich text Affects the editor's rich text (wysiwyg) mode label Mar 22, 2022
@netlify
Copy link

netlify bot commented Mar 22, 2022

Deploy Preview for stacks-editor ready!

Name Link
🔨 Latest commit 273b327
🔍 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.

@b-kelly
Copy link
Collaborator Author

b-kelly commented Mar 23, 2022

@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

@phoebe-leung
Copy link

phoebe-leung commented Oct 3, 2022

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
mode - rich text Affects the editor's rich text (wysiwyg) mode
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add the ability to change the code block language in rich text mode
4 participants