Skip to content

chore(website): update code editor library with editable code block info #4290

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.

Sign up for GitHub

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

Merged
merged 6 commits into from
Apr 9, 2025
+14 −7
Merged

chore(website): update code editor library with editable code block info #4290

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c2a4b39
chore(website): update code editor library with editable code block info
serifluous Mar 21, 2025
3b81243
chore: align max width values
serifluous Apr 8, 2025
2267ab2
chore: add Anchor import to code editor library page
serifluous Apr 8, 2025
d6ec4dc
Merge branch 'main' into website-update-code-editor-library-with-code…
serifluous Apr 8, 2025
b0536eb
chore(website): add marginY for callout
PixeledCode Apr 9, 2025
b500842
Merge branch 'main' into website-update-code-editor-library-with-code…
kodiakhq[bot] Apr 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 12 additions & 5 deletions packages/paste-website/src/pages/core/libraries/code-editor/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import packageJson from '@twilio-paste/code-editor-library/package.json';
import {SidebarCategoryRoutes} from '../../../../constants';
import {getNavigationData} from '../../../../utils/api';
import DefaultLayout from '../../../../layouts/DefaultLayout';
import {Anchor} from '@twilio-paste/anchor';
import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout';

export default DefaultLayout;

Expand Down Expand Up @@ -43,14 +45,19 @@ export const getStaticProps = async () => {

## About

The Code Editor allows for a full code-editing experiences on the web, including syntax highlighting and displaying line numbers.
The Code Editor library is the code editor that powers the stylized [Editable Code Block](/components/editable-code-block) component. It allows for full code-editing functionality on the web, including syntax highlighting and displaying line numbers.

This library is built on top of [monaco-react](https://github.com/suren-atoyan/monaco-react), which wraps the
[Monaco Editor](https://github.com/microsoft/monaco-editor).

Our library exposes a theme for use in Twilio products, aptly called the `PasteTheme`. This theme is based on the
[Monaco Editor](https://github.com/microsoft/monaco-editor). The library exposes a theme for use in Twilio products, aptly called the `PasteTheme`. This theme is based on the
[Night Owl theme by Sarah Drasner](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl&WT.mc_id=github-theme-sdras).

<Callout variant='neutral'>
<CalloutHeading as="h3">Are you looking for stylized UI components?</CalloutHeading>
<CalloutText>
For fully styled components, use the <Anchor href="https://paste.twilio.design/components/editable-code-block">Editable Code Block</Anchor>. Or if you don't need editing functionality, use the <Anchor href="https://paste.twilio.design/components/code-block">Code Block</Anchor>.
</CalloutText>
</Callout>

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: it seems like there is a space missing here
Screenshot 2025-04-08 at 4 47 03 PM

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added a marginY on the callout component like we do in other places

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ooh, thank you!

### Installation

```bash
Expand Down Expand Up @@ -105,7 +112,7 @@ const PasteThemeEditor = (): React.ReactNode => {

---

See more examples on our [Storybook](https://paste-storybook.twilio.design/?path=/story/libraries-code-editor-editor--).
See more examples on our [Storybook](https://paste-storybook.twilio.design/?path=/story/libraries-code-editor-editor--javascript-editor).

</content>

Expand Down
4 changes: 2 additions & 2 deletions packages/paste-website/src/pages/foundations/spacing-and-layout/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ Horizontal spacing is very similar to vertical space, using 8-pixel multiples. R

## Max widths

We suggest a max width of 1440px for the content area (not including margins).
We suggest a max width of 1232px or `size-120` for the content area (not including margins).

<Callout variant="neutral" marginY="space70">
<CalloutHeading as="h5">What responsive breakpoints do I use for my feature?</CalloutHeading>
Expand All @@ -171,7 +171,7 @@ We suggest a max width of 1440px for the content area (not including margins).

#### Text widths

Your text width should not be as long as your max width (1140px). In fact, a good rule of thumb for your text widths is no more than 65 characters per line. For Twilio default body text, we aim for about 712 pixels (`size-70`) for text width.
Your text width should not be as long as your max width (1232px or `size-120`). In fact, a good rule of thumb for your text widths is no more than 65 characters per line. For Twilio default body text, we aim for about 712 pixels (`size-70`) for text width.

It's sometimes helpful to also break up content by pairing it with a hero image. By doing this, you're visually signaling that this is an effortless conversation.

Expand Down
Loading