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

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

* chore: align max width values

* chore: add Anchor import to code editor library page

* chore(website): add marginY for callout

---------

Co-authored-by: PixeledCode <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: 3 people

packages/paste-website/src/pages/core/libraries/code-editor/index.mdx

@@ -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;
 
@@ -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' marginY="space70">
+    <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>
+
 ### Installation
 
 ```bash
@@ -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>
 

packages/paste-website/src/pages/foundations/spacing-and-layout/index.mdx

@@ -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>
@@ -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.