From 61ba09fa3a66252180e9f9bdac5f81ef671db7e4 Mon Sep 17 00:00:00 2001 From: Shadi Date: Tue, 11 Jul 2023 17:59:11 -0400 Subject: [PATCH] feat(code-editor): add package (#3309) * chore: test * feat(code-editor-library): add package * feat(code-editor, editable-code-block): add packages * fix: lint and a11y * chore: disable landmark-unique rule in a11y test-runner --- .changeset/rich-pots-tell.md | 6 + .changeset/tender-bees-raise.md | 6 + .codesandbox/ci.json | 2 + .storybook/test-runner.js | 5 + .../paste-codemods/tools/.cache/mappings.json | 1 + .../components/editable-code-block/build.js | 3 + .../editable-code-block/package.json | 86 +++ .../src/EditableCodeBlock.tsx | 41 ++ .../editable-code-block/src/index.tsx | 1 + .../stories/index.stories.tsx | 145 +++++ .../editable-code-block/tsconfig.json | 8 + packages/paste-core/core-bundle/.gitignore | 2 + .../core-bundle/code-editor/package.json | 8 + packages/paste-core/core-bundle/package.json | 2 + .../core-bundle/src/code-editor-library.tsx | 1 + .../core-bundle/src/editable-code-block.tsx | 1 + packages/paste-core/core-bundle/src/index.tsx | 1 + .../paste-libraries/code-editor/CHANGELOG.md | 0 packages/paste-libraries/code-editor/build.js | 3 + .../paste-libraries/code-editor/package.json | 38 ++ .../code-editor/src/PasteTheme.ts | 543 ++++++++++++++++++ .../paste-libraries/code-editor/src/index.tsx | 29 + .../stories/diffEditor.stories.tsx | 107 ++++ .../code-editor/stories/editor.stories.tsx | 98 ++++ .../paste-libraries/code-editor/tsconfig.json | 8 + packages/paste-website/next.config.mjs | 14 + yarn.lock | 118 ++++ 27 files changed, 1277 insertions(+) create mode 100644 .changeset/rich-pots-tell.md create mode 100644 .changeset/tender-bees-raise.md create mode 100644 packages/paste-core/components/editable-code-block/build.js create mode 100644 packages/paste-core/components/editable-code-block/package.json create mode 100644 packages/paste-core/components/editable-code-block/src/EditableCodeBlock.tsx create mode 100644 packages/paste-core/components/editable-code-block/src/index.tsx create mode 100644 packages/paste-core/components/editable-code-block/stories/index.stories.tsx create mode 100644 packages/paste-core/components/editable-code-block/tsconfig.json create mode 100644 packages/paste-core/core-bundle/code-editor/package.json create mode 100644 packages/paste-core/core-bundle/src/code-editor-library.tsx create mode 100644 packages/paste-core/core-bundle/src/editable-code-block.tsx create mode 100644 packages/paste-libraries/code-editor/CHANGELOG.md create mode 100644 packages/paste-libraries/code-editor/build.js create mode 100644 packages/paste-libraries/code-editor/package.json create mode 100644 packages/paste-libraries/code-editor/src/PasteTheme.ts create mode 100644 packages/paste-libraries/code-editor/src/index.tsx create mode 100644 packages/paste-libraries/code-editor/stories/diffEditor.stories.tsx create mode 100644 packages/paste-libraries/code-editor/stories/editor.stories.tsx create mode 100644 packages/paste-libraries/code-editor/tsconfig.json diff --git a/.changeset/rich-pots-tell.md b/.changeset/rich-pots-tell.md new file mode 100644 index 0000000000..d5ddd6053c --- /dev/null +++ b/.changeset/rich-pots-tell.md @@ -0,0 +1,6 @@ +--- +'@twilio-paste/core': minor +'@twilio-paste/code-editor-library': major +--- + +[Code Editor Library] Add new Code Editor library package which wraps the excellent Monaco editor. Enables building full featured code editors in the browser, like Visual Studio code. diff --git a/.changeset/tender-bees-raise.md b/.changeset/tender-bees-raise.md new file mode 100644 index 0000000000..56cb47e228 --- /dev/null +++ b/.changeset/tender-bees-raise.md @@ -0,0 +1,6 @@ +--- +'@twilio-paste/editable-code-block': major +'@twilio-paste/core': minor +--- + +[Editable Code Block] Add the new EditableCodeBlock component. Enables building code editors in the browser, styled with Paste default styles. diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index e83b671cb5..8ac746b01e 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -24,6 +24,7 @@ "/packages/paste-core/components/checkbox", "/packages/paste-libraries/clipboard-copy", "/packages/paste-core/components/code-block", + "/packages/paste-libraries/code-editor", "/packages/paste-color-contrast-utils", "/packages/paste-core/components/combobox", "/packages/paste-core/primitives/combobox", @@ -39,6 +40,7 @@ "/packages/paste-core/components/display-heading", "/packages/paste-core/components/display-pill-group", "/packages/paste-libraries/dropdown", + "/packages/paste-core/components/editable-code-block", "/packages/paste-core/components/file-picker", "/packages/paste-core/components/file-uploader", "/packages/paste-core/layout/flex", diff --git a/.storybook/test-runner.js b/.storybook/test-runner.js index f90640985d..9c958ad1dc 100644 --- a/.storybook/test-runner.js +++ b/.storybook/test-runner.js @@ -16,6 +16,11 @@ const a11yConfig = { await configureAxe(page, { rules: [ + { + // Page level test that states one main element is present. Not applicable for isolated components. + id: 'landmark-unique', + enabled: false, + }, { // Page level test that states one main element is present. Not applicable for isolated components. id: 'landmark-one-main', diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json index 4d811142ee..6c8a45e065 100644 --- a/packages/paste-codemods/tools/.cache/mappings.json +++ b/packages/paste-codemods/tools/.cache/mappings.json @@ -99,6 +99,7 @@ "DisplayHeading": "@twilio-paste/core/display-heading", "DisplayPill": "@twilio-paste/core/display-pill-group", "DisplayPillGroup": "@twilio-paste/core/display-pill-group", + "EditableCodeBlock": "@twilio-paste/core/editable-code-block", "FilePicker": "@twilio-paste/core/file-picker", "FilePickerButton": "@twilio-paste/core/file-picker", "FileUploader": "@twilio-paste/core/file-uploader", diff --git a/packages/paste-core/components/editable-code-block/build.js b/packages/paste-core/components/editable-code-block/build.js new file mode 100644 index 0000000000..a4edeab49b --- /dev/null +++ b/packages/paste-core/components/editable-code-block/build.js @@ -0,0 +1,3 @@ +const {build} = require('../../../../tools/build/esbuild'); + +build(require('./package.json')); diff --git a/packages/paste-core/components/editable-code-block/package.json b/packages/paste-core/components/editable-code-block/package.json new file mode 100644 index 0000000000..ec8bcc7ad7 --- /dev/null +++ b/packages/paste-core/components/editable-code-block/package.json @@ -0,0 +1,86 @@ +{ + "name": "@twilio-paste/editable-code-block", + "version": "0.0.0", + "category": "data display", + "status": "alpha", + "description": "An Editable Code Block is used to display and make changes to large blocks of code.", + "author": "Twilio Inc.", + "license": "MIT", + "main:dev": "src/index.tsx", + "main": "dist/index.js", + "module": "dist/index.es.js", + "types": "dist/index.d.ts", + "sideEffects": false, + "publishConfig": { + "access": "public" + }, + "files": [ + "dist" + ], + "scripts": { + "build": "yarn clean && NODE_ENV=production node build.js && tsc", + "build:js": "NODE_ENV=development node build.js", + "clean": "rm -rf ./dist", + "tsc": "tsc" + }, + "peerDependencies": { + "@twilio-paste/anchor": "^11.0.0", + "@twilio-paste/animation-library": "^1.0.0", + "@twilio-paste/badge": "^7.0.0", + "@twilio-paste/box": "^9.1.0", + "@twilio-paste/button": "^13.0.1", + "@twilio-paste/code-editor-library": "^0.0.0", + "@twilio-paste/color-contrast-utils": "^4.0.0", + "@twilio-paste/customization": "^7.0.0", + "@twilio-paste/design-tokens": "^9.0.0", + "@twilio-paste/disclosure-primitive": "^1.0.0", + "@twilio-paste/icons": "^11.0.0", + "@twilio-paste/reakit-library": "^1.0.0", + "@twilio-paste/screen-reader-only": "^12.0.0", + "@twilio-paste/spinner": "^13.0.0", + "@twilio-paste/stack": "^7.0.0", + "@twilio-paste/style-props": "^8.0.0", + "@twilio-paste/styling-library": "^2.0.0", + "@twilio-paste/text": "^9.0.0", + "@twilio-paste/theme": "^10.0.0", + "@twilio-paste/truncate": "^13.0.0", + "@twilio-paste/types": "^5.0.0", + "@twilio-paste/uid-library": "^1.0.0", + "@twilio-paste/utils": "^4.0.0", + "@types/react": "^16.8.6 || ^17.0.2 || ^18.0.27", + "@types/react-dom": "^16.8.6 || ^17.0.2 || ^18.0.10", + "prop-types": "^15.7.2", + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" + }, + "devDependencies": { + "@twilio-paste/anchor": "^11.0.0", + "@twilio-paste/animation-library": "^1.0.0", + "@twilio-paste/badge": "^7.1.0", + "@twilio-paste/box": "^9.1.0", + "@twilio-paste/button": "^13.0.3", + "@twilio-paste/code-editor-library": "^0.0.0", + "@twilio-paste/color-contrast-utils": "^4.0.0", + "@twilio-paste/customization": "^7.0.0", + "@twilio-paste/design-tokens": "^9.2.1", + "@twilio-paste/disclosure-primitive": "^1.0.0", + "@twilio-paste/icons": "^11.2.1", + "@twilio-paste/reakit-library": "^1.0.0", + "@twilio-paste/screen-reader-only": "^12.0.0", + "@twilio-paste/spinner": "^13.0.0", + "@twilio-paste/stack": "^7.0.0", + "@twilio-paste/style-props": "^8.0.0", + "@twilio-paste/styling-library": "^2.0.2", + "@twilio-paste/text": "^9.0.1", + "@twilio-paste/theme": "^10.0.2", + "@twilio-paste/truncate": "^13.0.0", + "@twilio-paste/types": "^5.0.0", + "@twilio-paste/uid-library": "^1.0.0", + "@twilio-paste/utils": "^4.0.0", + "@types/react": "^18.0.27", + "@types/react-dom": "^18.0.10", + "prop-types": "^15.7.2", + "react": "^18.0.0", + "react-dom": "^18.0.0" + } +} diff --git a/packages/paste-core/components/editable-code-block/src/EditableCodeBlock.tsx b/packages/paste-core/components/editable-code-block/src/EditableCodeBlock.tsx new file mode 100644 index 0000000000..a79ee89dc9 --- /dev/null +++ b/packages/paste-core/components/editable-code-block/src/EditableCodeBlock.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import {Box, type BoxProps} from '@twilio-paste/box'; +import { + CodeEditor, + CodeEditorPasteTheme, + type CodeEditorProps, + type Editor, + type Monaco, +} from '@twilio-paste/code-editor-library'; + +export interface EditableCodeBlockProps + extends Omit { + element?: BoxProps['element']; +} + +export const EditableCodeBlock: React.FC = ({ + onMount, + element = 'EDITABLE_CODE_BLOCK', + ...props +}) => { + const handleEditorDidMount = (editor: Editor.IStandaloneCodeEditor, monaco: Monaco): void => { + // Sets the Paste theme for the editor + monaco.editor.defineTheme('paste', CodeEditorPasteTheme); + monaco.editor.setTheme('paste'); + + /* + * Call provided onMount function. + * This can be used to add custom language support, or to grab a + * reference to the ref (monaco) object. + */ + onMount?.(editor, monaco); + }; + + return ( + + + + ); +}; + +EditableCodeBlock.displayName = 'EditableCodeBlock'; diff --git a/packages/paste-core/components/editable-code-block/src/index.tsx b/packages/paste-core/components/editable-code-block/src/index.tsx new file mode 100644 index 0000000000..d15a0afab6 --- /dev/null +++ b/packages/paste-core/components/editable-code-block/src/index.tsx @@ -0,0 +1 @@ +export * from './EditableCodeBlock'; diff --git a/packages/paste-core/components/editable-code-block/stories/index.stories.tsx b/packages/paste-core/components/editable-code-block/stories/index.stories.tsx new file mode 100644 index 0000000000..edf4cec54d --- /dev/null +++ b/packages/paste-core/components/editable-code-block/stories/index.stories.tsx @@ -0,0 +1,145 @@ +import * as React from 'react'; +import {Stack} from '@twilio-paste/stack'; +import {RadioButtonGroup, RadioButton} from '@twilio-paste/radio-button-group'; + +import {EditableCodeBlock} from '../src'; + +// eslint-disable-next-line import/no-default-export +export default { + title: 'Components/Editable Code Block', +}; + +export const Default = (): React.ReactNode => { + return ( + + ); +}; + +export const ReadOnly = (): React.ReactNode => { + return ( + + ); +}; + +const Files = { + JS: { + name: 'script.js', + language: 'javascript', + value: `// program that checks if the number is positive, negative or zero +// input from the user +const number = parseInt(prompt("Enter a number: ")); + +// check if number is greater than 0 +if (number > 0) { + console.log("The number is positive"); +} + +// check if number is 0 +else if (number == 0) { + console.log("The number is zero"); +} + +// if number is less than 0 +else { + console.log("The number is negative"); +}`, + }, + CSS: { + name: 'style.css', + language: 'css', + value: `.content-area { + background-color: #fff; + border: 1px solid #e5e5e5; + border-radius: 3px; + padding: 16px; + margin-bottom: 16px; +}`, + }, + HTML: { + name: 'index.html', + language: 'html', + value: ` + + + +
+

My Website

+

Welcome to my website

+
+ +`, + }, +}; + +export const MultiFileEditor = (): React.ReactNode => { + const [fileKey, setFileKey] = React.useState('JS'); + return ( + + setFileKey(_fileKey)} + > + {Object.keys(Files).map((key) => ( + + {Files[key].name} + + ))} + + + + ); +}; diff --git a/packages/paste-core/components/editable-code-block/tsconfig.json b/packages/paste-core/components/editable-code-block/tsconfig.json new file mode 100644 index 0000000000..5e8a3b17a2 --- /dev/null +++ b/packages/paste-core/components/editable-code-block/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "dist/" + }, + "include": ["src/**/*"], + "exclude": ["node_modules"] +} diff --git a/packages/paste-core/core-bundle/.gitignore b/packages/paste-core/core-bundle/.gitignore index 53239a4ea2..e2a53d6dda 100644 --- a/packages/paste-core/core-bundle/.gitignore +++ b/packages/paste-core/core-bundle/.gitignore @@ -20,6 +20,7 @@ /checkbox /clipboard-copy-library /code-block +/code-editor-library /color-contrast-utils /combobox /combobox-primitive @@ -35,6 +36,7 @@ /display-heading /display-pill-group /dropdown-library +/editable-code-block /file-picker /file-uploader /flex diff --git a/packages/paste-core/core-bundle/code-editor/package.json b/packages/paste-core/core-bundle/code-editor/package.json new file mode 100644 index 0000000000..97ae5d27ce --- /dev/null +++ b/packages/paste-core/core-bundle/code-editor/package.json @@ -0,0 +1,8 @@ +{ + "name": "@twilio-paste-core/code-editor", + "version": "0.0.0", + "private": true, + "sideEffects": false, + "main": "../dist/code-editor.js", + "types": "../dist/code-editor.d.ts" +} diff --git a/packages/paste-core/core-bundle/package.json b/packages/paste-core/core-bundle/package.json index 0941eab7ed..52fb09468b 100644 --- a/packages/paste-core/core-bundle/package.json +++ b/packages/paste-core/core-bundle/package.json @@ -91,6 +91,7 @@ "@twilio-paste/checkbox": "^12.0.0", "@twilio-paste/clipboard-copy-library": "^2.0.0", "@twilio-paste/code-block": "^3.1.1", + "@twilio-paste/code-editor-library": "^0.0.0", "@twilio-paste/color-contrast-utils": "^4.0.0", "@twilio-paste/combobox": "^15.0.3", "@twilio-paste/combobox-primitive": "^1.0.1", @@ -106,6 +107,7 @@ "@twilio-paste/display-heading": "^3.0.0", "@twilio-paste/display-pill-group": "^7.0.0", "@twilio-paste/dropdown-library": "^2.0.0", + "@twilio-paste/editable-code-block": "^0.0.0", "@twilio-paste/file-picker": "^3.0.1", "@twilio-paste/file-uploader": "^3.0.0", "@twilio-paste/flex": "^7.0.0", diff --git a/packages/paste-core/core-bundle/src/code-editor-library.tsx b/packages/paste-core/core-bundle/src/code-editor-library.tsx new file mode 100644 index 0000000000..fa99fd399e --- /dev/null +++ b/packages/paste-core/core-bundle/src/code-editor-library.tsx @@ -0,0 +1 @@ +export * from '@twilio-paste/code-editor-library'; diff --git a/packages/paste-core/core-bundle/src/editable-code-block.tsx b/packages/paste-core/core-bundle/src/editable-code-block.tsx new file mode 100644 index 0000000000..b2f3315522 --- /dev/null +++ b/packages/paste-core/core-bundle/src/editable-code-block.tsx @@ -0,0 +1 @@ +export * from '@twilio-paste/editable-code-block'; diff --git a/packages/paste-core/core-bundle/src/index.tsx b/packages/paste-core/core-bundle/src/index.tsx index 3e4ca4e962..2da6db953c 100644 --- a/packages/paste-core/core-bundle/src/index.tsx +++ b/packages/paste-core/core-bundle/src/index.tsx @@ -26,6 +26,7 @@ export * from '@twilio-paste/disclosure'; export * from '@twilio-paste/disclosure-primitive'; export * from '@twilio-paste/display-heading'; export * from '@twilio-paste/display-pill-group'; +export * from '@twilio-paste/editable-code-block'; export * from '@twilio-paste/file-picker'; export * from '@twilio-paste/file-uploader'; export * from '@twilio-paste/flex'; diff --git a/packages/paste-libraries/code-editor/CHANGELOG.md b/packages/paste-libraries/code-editor/CHANGELOG.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/paste-libraries/code-editor/build.js b/packages/paste-libraries/code-editor/build.js new file mode 100644 index 0000000000..f4c531c5dc --- /dev/null +++ b/packages/paste-libraries/code-editor/build.js @@ -0,0 +1,3 @@ +const {build} = require('../../../tools/build/esbuild'); + +build(require('./package.json')); diff --git a/packages/paste-libraries/code-editor/package.json b/packages/paste-libraries/code-editor/package.json new file mode 100644 index 0000000000..9b4ffd2dc4 --- /dev/null +++ b/packages/paste-libraries/code-editor/package.json @@ -0,0 +1,38 @@ +{ + "name": "@twilio-paste/code-editor-library", + "version": "0.0.0", + "category": "library", + "status": "production", + "description": "A library to display and make changes to large blocks of code.", + "author": "Twilio Inc.", + "license": "MIT", + "main:dev": "src/index.tsx", + "main": "dist/index.js", + "module": "dist/index.es.js", + "types": "dist/index.d.ts", + "sideEffects": false, + "publishConfig": { + "access": "public" + }, + "files": [ + "dist" + ], + "scripts": { + "build": "yarn clean && NODE_ENV=production node build.js && tsc", + "build:js": "NODE_ENV=development node build.js", + "clean": "rm -rf ./dist", + "tsc": "tsc" + }, + "dependencies": { + "@monaco-editor/react": "4.5.1", + "monaco-editor": "0.39.0" + }, + "peerDependencies": { + "react": "^16.8.6 || ^17.0.2 || ^18.0.0", + "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" + }, + "devDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + } +} diff --git a/packages/paste-libraries/code-editor/src/PasteTheme.ts b/packages/paste-libraries/code-editor/src/PasteTheme.ts new file mode 100644 index 0000000000..4b4d7c9ece --- /dev/null +++ b/packages/paste-libraries/code-editor/src/PasteTheme.ts @@ -0,0 +1,543 @@ +import type {editor} from 'monaco-editor'; + +// Night-Owl theme from https://github.com/brijeshb42/monaco-themes +export const PasteTheme: editor.IStandaloneThemeData = { + base: 'vs-dark', + inherit: true, + colors: { + contrastBorder: '#122d42', + focusBorder: '#122d42', + foreground: '#d6deeb', + 'widget.shadow': '#011627', + 'selection.background': '#4373c2', + errorForeground: '#EF5350', + 'button.background': '#7e57c2cc', + 'button.foreground': '#ffffffcc', + 'button.hoverBackground': '#7e57c2', + 'dropdown.background': '#011627', + 'dropdown.border': '#5f7e97', + 'dropdown.foreground': '#ffffffcc', + 'input.background': '#0b253a', + 'input.border': '#5f7e97', + 'input.foreground': '#ffffffcc', + 'input.placeholderForeground': '#5f7e97', + 'inputOption.activeBorder': '#ffffffcc', + 'punctuation.definition.generic.begin.html': '#ef5350f2', + 'inputValidation.errorBackground': '#AB0300F2', + 'inputValidation.errorBorder': '#EF5350', + 'inputValidation.infoBackground': '#00589EF2', + 'inputValidation.infoBorder': '#64B5F6', + 'inputValidation.warningBackground': '#675700F2', + 'inputValidation.warningBorder': '#FFCA28', + 'scrollbar.shadow': '#010b14', + 'scrollbarSlider.activeBackground': '#084d8180', + 'scrollbarSlider.background': '#084d8180', + 'scrollbarSlider.hoverBackground': '#084d8180', + 'badge.background': '#5f7e97', + 'badge.foreground': '#ffffff', + 'progress.background': '#7e57c2', + 'breadcrumb.foreground': '#A599E9', + 'breadcrumb.focusForeground': '#ffffff', + 'breadcrumb.activeSelectionForeground': '#FFFFFF', + 'breadcrumbPicker.background': '#001122', + 'list.activeSelectionBackground': '#234d708c', + 'list.activeSelectionForeground': '#ffffff', + 'list.invalidItemForeground': '#975f94', + 'list.dropBackground': '#011627', + 'list.focusBackground': '#010d18', + 'list.focusForeground': '#ffffff', + 'list.highlightForeground': '#ffffff', + 'list.hoverBackground': '#011627', + 'list.hoverForeground': '#ffffff', + 'list.inactiveSelectionBackground': '#0e293f', + 'list.inactiveSelectionForeground': '#5f7e97', + 'activityBar.background': '#011627', + 'activityBar.dropBackground': '#5f7e97', + 'activityBar.foreground': '#5f7e97', + 'activityBar.border': '#011627', + 'activityBarBadge.background': '#44596b', + 'activityBarBadge.foreground': '#ffffff', + 'sideBar.background': '#011627', + 'sideBar.foreground': '#89a4bb', + 'sideBar.border': '#011627', + 'sideBarTitle.foreground': '#5f7e97', + 'sideBarSectionHeader.background': '#011627', + 'sideBarSectionHeader.foreground': '#5f7e97', + 'editorGroup.emptyBackground': '#011627', + 'editorGroup.border': '#011627', + 'editorGroup.dropBackground': '#7e57c273', + 'editorGroupHeader.noTabsBackground': '#011627', + 'editorGroupHeader.tabsBackground': '#011627', + 'editorGroupHeader.tabsBorder': '#262A39', + 'tab.activeBackground': '#0b2942', + 'tab.activeForeground': '#d2dee7', + 'tab.border': '#272B3B', + 'tab.activeBorder': '#262A39', + 'tab.unfocusedActiveBorder': '#262A39', + 'tab.inactiveBackground': '#01111d', + 'tab.inactiveForeground': '#5f7e97', + 'tab.unfocusedActiveForeground': '#5f7e97', + 'tab.unfocusedInactiveForeground': '#5f7e97', + 'editor.background': '#011627', + 'editor.foreground': '#d6deeb', + 'editorLineNumber.foreground': '#728ea6', + 'editorLineNumber.activeForeground': '#C5E4FD', + 'editorCursor.foreground': '#80a4c2', + 'editor.selectionBackground': '#1d3b53', + 'editor.selectionHighlightBackground': '#5f7e9779', + 'editor.inactiveSelectionBackground': '#7e57c25a', + 'editor.wordHighlightBackground': '#f6bbe533', + 'editor.wordHighlightStrongBackground': '#e2a2f433', + 'editor.findMatchBackground': '#5f7e9779', + 'editor.findMatchHighlightBackground': '#1085bb5d', + 'editor.hoverHighlightBackground': '#7e57c25a', + 'editor.lineHighlightBackground': '#0003', + 'editor.rangeHighlightBackground': '#7e57c25a', + 'editorIndentGuide.background': '#5e81ce52', + 'editorIndentGuide.activeBackground': '#7E97AC', + 'editorRuler.foreground': '#5e81ce52', + 'editorCodeLens.foreground': '#5e82ceb4', + 'editorBracketMatch.background': '#5f7e974d', + 'editorOverviewRuler.currentContentForeground': '#7e57c2', + 'editorOverviewRuler.incomingContentForeground': '#7e57c2', + 'editorOverviewRuler.commonContentForeground': '#7e57c2', + 'editorError.foreground': '#EF5350', + 'editorWarning.foreground': '#b39554', + 'editorGutter.background': '#011627', + 'editorGutter.modifiedBackground': '#e2b93d', + 'editorGutter.addedBackground': '#9CCC65', + 'editorGutter.deletedBackground': '#EF5350', + 'diffEditor.insertedTextBackground': '#99b76d23', + 'diffEditor.insertedTextBorder': '#c5e47833', + 'diffEditor.removedTextBackground': '#ef535033', + 'diffEditor.removedTextBorder': '#ef53504d', + 'editorWidget.background': '#021320', + 'editorWidget.border': '#5f7e97', + 'editorSuggestWidget.background': '#2C3043', + 'editorSuggestWidget.border': '#2B2F40', + 'editorSuggestWidget.foreground': '#d6deeb', + 'editorSuggestWidget.highlightForeground': '#ffffff', + 'editorSuggestWidget.selectedBackground': '#5f7e97', + 'editorHoverWidget.background': '#011627', + 'editorHoverWidget.border': '#5f7e97', + 'debugExceptionWidget.background': '#011627', + 'debugExceptionWidget.border': '#5f7e97', + 'editorMarkerNavigation.background': '#0b2942', + 'editorMarkerNavigationError.background': '#EF5350', + 'editorMarkerNavigationWarning.background': '#FFCA28', + 'peekView.border': '#5f7e97', + 'peekViewEditor.background': '#011627', + 'peekViewEditor.matchHighlightBackground': '#7e57c25a', + 'peekViewResult.background': '#011627', + 'peekViewResult.fileForeground': '#5f7e97', + 'peekViewResult.lineForeground': '#5f7e97', + 'peekViewResult.matchHighlightBackground': '#ffffffcc', + 'peekViewResult.selectionBackground': '#2E3250', + 'peekViewResult.selectionForeground': '#5f7e97', + 'peekViewTitle.background': '#011627', + 'peekViewTitleDescription.foreground': '#697098', + 'peekViewTitleLabel.foreground': '#5f7e97', + 'merge.currentHeaderBackground': '#5f7e97', + 'merge.incomingHeaderBackground': '#7e57c25a', + 'panel.background': '#011627', + 'panel.border': '#5f7e97', + 'panelTitle.activeBorder': '#5f7e97', + 'panelTitle.activeForeground': '#ffffffcc', + 'panelTitle.inactiveForeground': '#d6deeb80', + 'statusBar.background': '#011627', + 'statusBar.foreground': '#5f7e97', + 'statusBar.border': '#262A39', + 'statusBar.debuggingBackground': '#202431', + 'statusBar.debuggingBorder': '#1F2330', + 'statusBar.noFolderBackground': '#011627', + 'statusBar.noFolderBorder': '#25293A', + 'statusBarItem.activeBackground': '#202431', + 'statusBarItem.hoverBackground': '#202431', + 'statusBarItem.prominentBackground': '#202431', + 'statusBarItem.prominentHoverBackground': '#202431', + 'titleBar.activeBackground': '#011627', + 'titleBar.activeForeground': '#eeefff', + 'titleBar.inactiveBackground': '#010e1a', + 'notifications.background': '#01111d', + 'notifications.border': '#262a39', + 'notificationCenter.border': '#262a39', + 'notificationToast.border': '#262a39', + 'notifications.foreground': '#ffffffcc', + 'notificationLink.foreground': '#80CBC4', + 'extensionButton.prominentForeground': '#ffffffcc', + 'extensionButton.prominentBackground': '#7e57c2cc', + 'extensionButton.prominentHoverBackground': '#7e57c2', + 'pickerGroup.foreground': '#d1aaff', + 'pickerGroup.border': '#011627', + 'terminal.ansiWhite': '#ffffff', + 'terminal.ansiBlack': '#011627', + 'terminal.ansiBlue': '#82AAFF', + 'terminal.ansiCyan': '#21c7a8', + 'terminal.ansiGreen': '#22da6e', + 'terminal.ansiMagenta': '#C792EA', + 'terminal.ansiRed': '#EF5350', + 'terminal.ansiYellow': '#c5e478', + 'terminal.ansiBrightWhite': '#ffffff', + 'terminal.ansiBrightBlack': '#575656', + 'terminal.ansiBrightBlue': '#82AAFF', + 'terminal.ansiBrightCyan': '#7fdbca', + 'terminal.ansiBrightGreen': '#22da6e', + 'terminal.ansiBrightMagenta': '#C792EA', + 'terminal.ansiBrightRed': '#EF5350', + 'terminal.ansiBrightYellow': '#ffeb95', + 'terminal.selectionBackground': '#1b90dd4d', + 'terminalCursor.background': '#234d70', + 'textCodeBlock.background': '#4f4f4f', + 'debugToolBar.background': '#011627', + 'welcomePage.buttonBackground': '#011627', + 'welcomePage.buttonHoverBackground': '#011627', + 'walkThrough.embeddedEditorBackground': '#011627', + 'gitDecoration.modifiedResourceForeground': '#a2bffc', + 'gitDecoration.deletedResourceForeground': '#EF535090', + 'gitDecoration.untrackedResourceForeground': '#c5e478ff', + 'gitDecoration.ignoredResourceForeground': '#395a75', + 'gitDecoration.conflictingResourceForeground': '#ffeb95cc', + 'source.elm': '#5f7e97', + 'string.quoted.single.js': '#ffffff', + 'meta.objectliteral.js': '#82AAFF', + }, + rules: [ + { + foreground: '#DCDCAA', + token: 'entity.name.function', + }, + { + foreground: '#DCDCAA', + token: 'support.function', + }, + { + foreground: '#DCDCAA', + token: 'support.constant.handlebars', + }, + { + foreground: '#DCDCAA', + token: 'source.powershell variable.other.member', + }, + { + foreground: '#DCDCAA', + token: 'entity.name.operator.custom-literal', + }, + { + foreground: '#4EC9B0', + token: 'meta.return-type', + }, + { + foreground: '#4EC9B0', + token: 'support.class', + }, + { + foreground: '#4EC9B0', + token: 'support.type', + }, + { + foreground: '#4EC9B0', + token: 'entity.name.type', + }, + { + foreground: '#4EC9B0', + token: 'entity.name.namespace', + }, + { + foreground: '#4EC9B0', + token: 'entity.other.attribute', + }, + { + foreground: '#4EC9B0', + token: 'entity.name.scope-resolution', + }, + { + foreground: '#4EC9B0', + token: 'entity.name.class', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.numeric.go', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.byte.go', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.boolean.go', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.string.go', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.uintptr.go', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.error.go', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.rune.go', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.cs', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.generic.cs', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.modifier.cs', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.variable.cs', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.annotation.java', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.generic.java', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.java', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.object.array.java', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.primitive.array.java', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.primitive.java', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.token.java', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.groovy', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.annotation.groovy', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.parameters.groovy', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.generic.groovy', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.object.array.groovy', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.primitive.array.groovy', + }, + { + foreground: '#4EC9B0', + token: 'storage.type.primitive.groovy', + }, + { + foreground: '#4EC9B0', + token: 'meta.type.cast.expr', + }, + { + foreground: '#4EC9B0', + token: 'meta.type.new.expr', + }, + { + foreground: '#4EC9B0', + token: 'support.constant.math', + }, + { + foreground: '#4EC9B0', + token: 'support.constant.dom', + }, + { + foreground: '#4EC9B0', + token: 'support.constant.json', + }, + { + foreground: '#4EC9B0', + token: 'entity.other.inherited-class', + }, + { + foreground: '#C586C0', + token: 'keyword.control', + }, + { + foreground: '#C586C0', + token: 'source.cpp keyword.operator.new', + }, + { + foreground: '#C586C0', + token: 'keyword.operator.delete', + }, + { + foreground: '#C586C0', + token: 'keyword.other.using', + }, + { + foreground: '#C586C0', + token: 'keyword.other.operator', + }, + { + foreground: '#C586C0', + token: 'entity.name.operator', + }, + { + foreground: '#9CDCFE', + token: 'variable', + }, + { + foreground: '#9CDCFE', + token: 'meta.definition.variable.name', + }, + { + foreground: '#9CDCFE', + token: 'support.variable', + }, + { + foreground: '#9CDCFE', + token: 'entity.name.variable', + }, + { + foreground: '#4FC1FF', + token: 'variable.other.constant', + }, + { + foreground: '#4FC1FF', + token: 'variable.other.enummember', + }, + { + foreground: '#9CDCFE', + token: 'meta.object-literal.key', + }, + { + foreground: '#CE9178', + token: 'support.constant.property-value', + }, + { + foreground: '#CE9178', + token: 'support.constant.font-name', + }, + { + foreground: '#CE9178', + token: 'support.constant.media-type', + }, + { + foreground: '#CE9178', + token: 'support.constant.media', + }, + { + foreground: '#CE9178', + token: 'constant.other.color.rgb-value', + }, + { + foreground: '#CE9178', + token: 'constant.other.rgb-value', + }, + { + foreground: '#CE9178', + token: 'support.constant.color', + }, + { + foreground: '#CE9178', + token: 'punctuation.definition.group.regexp', + }, + { + foreground: '#CE9178', + token: 'punctuation.definition.group.assertion.regexp', + }, + { + foreground: '#CE9178', + token: 'punctuation.definition.character-class.regexp', + }, + { + foreground: '#CE9178', + token: 'punctuation.character.set.begin.regexp', + }, + { + foreground: '#CE9178', + token: 'punctuation.character.set.end.regexp', + }, + { + foreground: '#CE9178', + token: 'keyword.operator.negation.regexp', + }, + { + foreground: '#CE9178', + token: 'support.other.parenthesis.regexp', + }, + { + foreground: '#d16969', + token: 'constant.character.character-class.regexp', + }, + { + foreground: '#d16969', + token: 'constant.other.character-class.set.regexp', + }, + { + foreground: '#d16969', + token: 'constant.other.character-class.regexp', + }, + { + foreground: '#d16969', + token: 'constant.character.set.regexp', + }, + { + foreground: '#DCDCAA', + token: 'keyword.operator.or.regexp', + }, + { + foreground: '#DCDCAA', + token: 'keyword.control.anchor.regexp', + }, + { + foreground: '#d7ba7d', + token: 'keyword.operator.quantifier.regexp', + }, + { + foreground: '#569cd6', + token: 'constant.character', + }, + { + foreground: '#d7ba7d', + token: 'constant.character.escape', + }, + { + foreground: '#C8C8C8', + token: 'entity.name.label', + }, + { + foreground: '#569CD6', + token: 'constant.language', + }, + { + foreground: '#569CD6', + token: 'entity.name.tag', + }, + { + foreground: '#569cd6', + token: 'storage', + }, + ], + encodedTokensColors: [], +}; diff --git a/packages/paste-libraries/code-editor/src/index.tsx b/packages/paste-libraries/code-editor/src/index.tsx new file mode 100644 index 0000000000..9e8457d83d --- /dev/null +++ b/packages/paste-libraries/code-editor/src/index.tsx @@ -0,0 +1,29 @@ +export { + Editor as CodeEditor, + DiffEditor as CodeEditorDiff, + type EditorProps as CodeEditorProps, + type DiffEditorProps as CodeEditorDiffProps, + type Monaco, +} from '@monaco-editor/react'; +export {PasteTheme as CodeEditorPasteTheme} from './PasteTheme'; +export type { + editor as Editor, + languages as Languages, + worker as Worker, + ITrustedTypePolicyOptions, + IDisposable, + IEvent, + IMarkdownString, + IKeyboardEvent, + IMouseEvent, + IScrollEvent, + IPosition, + Position, + IRange, + ISelection, + Selection, + SelectionDirection, + Token, + Emitter, + Environment, +} from 'monaco-editor'; diff --git a/packages/paste-libraries/code-editor/stories/diffEditor.stories.tsx b/packages/paste-libraries/code-editor/stories/diffEditor.stories.tsx new file mode 100644 index 0000000000..45cd7804de --- /dev/null +++ b/packages/paste-libraries/code-editor/stories/diffEditor.stories.tsx @@ -0,0 +1,107 @@ +import * as React from 'react'; + +import {CodeEditorDiff, CodeEditorPasteTheme, type Editor, type Monaco} from '../src'; + +// eslint-disable-next-line import/no-default-export +export default { + title: 'Libraries/code-editor/DiffEditor', +}; + +const setTheme = (monaco: Monaco): void => { + // you can also store it in `useRef` for further usage + monaco.editor.defineTheme('paste', CodeEditorPasteTheme); + monaco.editor.setTheme('paste'); +}; + +const originalText = `This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text`; + +const modifiedText = `just some text\nabcz\nzzzzefgh\nSome more text\nThis line is removed on the left.`; + +export const TextDiffExample = (): React.ReactNode => { + const diffEditorRef = React.useRef(undefined); + + const handleEditorDidMount = (editor: Editor.IStandaloneDiffEditor, monaco: Monaco): void => { + diffEditorRef.current = editor; + setTheme(monaco); + }; + + const showOriginalValue = (): void => { + if (diffEditorRef.current) { + // eslint-disable-next-line no-alert + alert(diffEditorRef.current.getOriginalEditor().getValue()); + } + }; + + const showModifiedValue = (): void => { + if (diffEditorRef.current) { + // eslint-disable-next-line no-alert + alert(diffEditorRef.current.getModifiedEditor().getValue()); + } + }; + + return ( + <> + + + + ; + + ); +}; + +const originalCode = `interface User { + name: string; + id: number; +} + +class UserAccount { + name: string; + id: number; + + constructor(name: string, id: number) { + this.name = name; + this.id = id; + } +} + +const user: User = new UserAccount("Murphy", 1);`; + +const modifiedCode = `interface Person { + name: string; + id: string; +} + +class PersonAccount { + name: string; + id: string; + + constructor(name: string, id: string) { + this.name = name; + this.id = id; + } +} + +const person: Person = new PersonAccount("Murphy", "1");`; + +export const CodeDiffExample = (): React.ReactNode => { + return ( + + ); +}; diff --git a/packages/paste-libraries/code-editor/stories/editor.stories.tsx b/packages/paste-libraries/code-editor/stories/editor.stories.tsx new file mode 100644 index 0000000000..20e4f80857 --- /dev/null +++ b/packages/paste-libraries/code-editor/stories/editor.stories.tsx @@ -0,0 +1,98 @@ +import * as React from 'react'; + +import {CodeEditor, CodeEditorPasteTheme, type Monaco, type Editor} from '../src'; + +// eslint-disable-next-line import/no-default-export +export default { + title: 'Libraries/code-editor/Editor', +}; + +const JavascriptExample = `// program that checks if the number is positive, negative or zero +// input from the user +const number = parseInt(prompt("Enter a number: ")); + +// check if number is greater than 0 +if (number > 0) { + console.log("The number is positive"); +} + +// check if number is 0 +else if (number == 0) { + console.log("The number is zero"); +} + +// if number is less than 0 +else { + console.log("The number is negative"); +}`; + +const TypescriptExample = `interface User { + name: string; + id: number; +} + +class UserAccount { + name: string; + id: number; + + constructor(name: string, id: number) { + this.name = name; + this.id = id; + } +} + +const user: User = new UserAccount("Murphy", 1);`; + +const CExample = `#include +int main() { + int n, i, sum = 0; + + printf("Enter a positive integer: "); + scanf("%d", &n); + + for (i = 1; i <= n; ++i) { + sum += i; + } + + printf("Sum = %d", sum); + return 0; +}`; + +export const JavascriptEditor = (): React.ReactNode => { + return ; +}; + +export const TypescriptEditor = (): React.ReactNode => { + return ; +}; + +export const CEditor = (): React.ReactNode => { + return ; +}; + +const handleEditorDidMount = (editor: Editor.IStandaloneCodeEditor, monaco: Monaco): void => { + // you can also store it in `useRef` for further usage + monaco.editor.defineTheme('paste', CodeEditorPasteTheme); + monaco.editor.setTheme('paste'); +}; + +export const PasteThemeEditor = (): React.ReactNode => { + return ( + + ); +}; diff --git a/packages/paste-libraries/code-editor/tsconfig.json b/packages/paste-libraries/code-editor/tsconfig.json new file mode 100644 index 0000000000..e30c6663c3 --- /dev/null +++ b/packages/paste-libraries/code-editor/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "outDir": "dist/" + }, + "include": ["src/**/*"], + "exclude": ["node_modules", "__tests__"] +} diff --git a/packages/paste-website/next.config.mjs b/packages/paste-website/next.config.mjs index e1a5eddebe..1ce35a76f4 100644 --- a/packages/paste-website/next.config.mjs +++ b/packages/paste-website/next.config.mjs @@ -28,6 +28,20 @@ const nextConfig = { experimental: { legacyBrowsers: false, }, + // https://nextjs.org/docs/pages/api-reference/next-config-js/headers + async headers() { + return [ + { + source: '/components/:path*', + headers: [ + { + key: 'Content-Security-Polic', + value: 'frame-src * frame-ancestors *', + }, + ], + }, + ]; + }, }; export default withBundleAnalyzer(withMDX(nextConfig)); diff --git a/yarn.lock b/yarn.lock index 216998fb48..fabf837ad0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6413,6 +6413,30 @@ __metadata: languageName: node linkType: hard +"@monaco-editor/loader@npm:^1.3.3": + version: 1.3.3 + resolution: "@monaco-editor/loader@npm:1.3.3" + dependencies: + state-local: ^1.0.6 + peerDependencies: + monaco-editor: ">= 0.21.0 < 1" + checksum: 037dd4758651cb623482398fba884c0ddec1ed40502185f1fa417e54f47485291e236eb13bcdffb7bca292edd97ca8e3c51c2c3505e17a3184f4c6d11016fcac + languageName: node + linkType: hard + +"@monaco-editor/react@npm:4.5.1": + version: 4.5.1 + resolution: "@monaco-editor/react@npm:4.5.1" + dependencies: + "@monaco-editor/loader": ^1.3.3 + peerDependencies: + monaco-editor: ">= 0.25.0 < 1" + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 989b98f5750f0b0ad54dc1dd7da8e92c67fcab55e89e26465ab7312fae87b3795f2e4603e7979e9545b7ad5d00fbcb3f21d20144d9e7eafa6f6989a76ad78c3a + languageName: node + linkType: hard + "@mrmlnc/readdir-enhanced@npm:^2.2.1": version: 2.2.1 resolution: "@mrmlnc/readdir-enhanced@npm:2.2.1" @@ -10613,6 +10637,20 @@ __metadata: languageName: unknown linkType: soft +"@twilio-paste/code-editor-library@^0.0.0, @twilio-paste/code-editor-library@workspace:packages/paste-libraries/code-editor": + version: 0.0.0-use.local + resolution: "@twilio-paste/code-editor-library@workspace:packages/paste-libraries/code-editor" + dependencies: + "@monaco-editor/react": 4.5.1 + monaco-editor: 0.39.0 + react: ^18.0.0 + react-dom: ^18.0.0 + peerDependencies: + react: ^16.8.6 || ^17.0.2 || ^18.0.0 + react-dom: ^16.8.6 || ^17.0.2 || ^18.0.0 + languageName: unknown + linkType: soft + "@twilio-paste/codemods@workspace:packages/paste-codemods": version: 0.0.0-use.local resolution: "@twilio-paste/codemods@workspace:packages/paste-codemods" @@ -10763,6 +10801,7 @@ __metadata: "@twilio-paste/checkbox": ^12.0.0 "@twilio-paste/clipboard-copy-library": ^2.0.0 "@twilio-paste/code-block": ^3.1.1 + "@twilio-paste/code-editor-library": ^0.0.0 "@twilio-paste/color-contrast-utils": ^4.0.0 "@twilio-paste/combobox": ^15.0.3 "@twilio-paste/combobox-primitive": ^1.0.1 @@ -10778,6 +10817,7 @@ __metadata: "@twilio-paste/display-heading": ^3.0.0 "@twilio-paste/display-pill-group": ^7.0.0 "@twilio-paste/dropdown-library": ^2.0.0 + "@twilio-paste/editable-code-block": ^0.0.0 "@twilio-paste/file-picker": ^3.0.1 "@twilio-paste/file-uploader": ^3.0.0 "@twilio-paste/flex": ^7.0.0 @@ -11279,6 +11319,70 @@ __metadata: languageName: unknown linkType: soft +"@twilio-paste/editable-code-block@^0.0.0, @twilio-paste/editable-code-block@workspace:packages/paste-core/components/editable-code-block": + version: 0.0.0-use.local + resolution: "@twilio-paste/editable-code-block@workspace:packages/paste-core/components/editable-code-block" + dependencies: + "@twilio-paste/anchor": ^11.0.0 + "@twilio-paste/animation-library": ^1.0.0 + "@twilio-paste/badge": ^7.1.0 + "@twilio-paste/box": ^9.1.0 + "@twilio-paste/button": ^13.0.3 + "@twilio-paste/code-editor-library": ^0.0.0 + "@twilio-paste/color-contrast-utils": ^4.0.0 + "@twilio-paste/customization": ^7.0.0 + "@twilio-paste/design-tokens": ^9.2.1 + "@twilio-paste/disclosure-primitive": ^1.0.0 + "@twilio-paste/icons": ^11.2.1 + "@twilio-paste/reakit-library": ^1.0.0 + "@twilio-paste/screen-reader-only": ^12.0.0 + "@twilio-paste/spinner": ^13.0.0 + "@twilio-paste/stack": ^7.0.0 + "@twilio-paste/style-props": ^8.0.0 + "@twilio-paste/styling-library": ^2.0.2 + "@twilio-paste/text": ^9.0.1 + "@twilio-paste/theme": ^10.0.2 + "@twilio-paste/truncate": ^13.0.0 + "@twilio-paste/types": ^5.0.0 + "@twilio-paste/uid-library": ^1.0.0 + "@twilio-paste/utils": ^4.0.0 + "@types/react": ^18.0.27 + "@types/react-dom": ^18.0.10 + prop-types: ^15.7.2 + react: ^18.0.0 + react-dom: ^18.0.0 + peerDependencies: + "@twilio-paste/anchor": ^11.0.0 + "@twilio-paste/animation-library": ^1.0.0 + "@twilio-paste/badge": ^7.0.0 + "@twilio-paste/box": ^9.1.0 + "@twilio-paste/button": ^13.0.1 + "@twilio-paste/code-editor-library": ^0.0.0 + "@twilio-paste/color-contrast-utils": ^4.0.0 + "@twilio-paste/customization": ^7.0.0 + "@twilio-paste/design-tokens": ^9.0.0 + "@twilio-paste/disclosure-primitive": ^1.0.0 + "@twilio-paste/icons": ^11.0.0 + "@twilio-paste/reakit-library": ^1.0.0 + "@twilio-paste/screen-reader-only": ^12.0.0 + "@twilio-paste/spinner": ^13.0.0 + "@twilio-paste/stack": ^7.0.0 + "@twilio-paste/style-props": ^8.0.0 + "@twilio-paste/styling-library": ^2.0.0 + "@twilio-paste/text": ^9.0.0 + "@twilio-paste/theme": ^10.0.0 + "@twilio-paste/truncate": ^13.0.0 + "@twilio-paste/types": ^5.0.0 + "@twilio-paste/uid-library": ^1.0.0 + "@twilio-paste/utils": ^4.0.0 + "@types/react": ^16.8.6 || ^17.0.2 || ^18.0.27 + "@types/react-dom": ^16.8.6 || ^17.0.2 || ^18.0.10 + prop-types: ^15.7.2 + react: ^16.8.6 || ^17.0.2 || ^18.0.0 + react-dom: ^16.8.6 || ^17.0.2 || ^18.0.0 + languageName: unknown + linkType: soft + "@twilio-paste/file-picker@^3.0.0, @twilio-paste/file-picker@^3.0.1, @twilio-paste/file-picker@workspace:packages/paste-core/components/file-picker": version: 0.0.0-use.local resolution: "@twilio-paste/file-picker@workspace:packages/paste-core/components/file-picker" @@ -32799,6 +32903,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"monaco-editor@npm:0.39.0": + version: 0.39.0 + resolution: "monaco-editor@npm:0.39.0" + checksum: 6d906c5f07fc6761b93bebee70bc1c461d6bbea493252751f4e2e60f26678faced9261ed9cca21613511695e6d7b75c2f2214b6d53aaa479a7e0b6f2d912f90b + languageName: node + linkType: hard + "monopeers@npm:^1.0.2": version: 1.0.2 resolution: "monopeers@npm:1.0.2" @@ -40485,6 +40596,13 @@ resolve@^2.0.0-next.3: languageName: node linkType: hard +"state-local@npm:^1.0.6": + version: 1.0.7 + resolution: "state-local@npm:1.0.7" + checksum: d1afcf1429e7e6eb08685b3a94be8797db847369316d4776fd51f3962b15b984dacc7f8e401ad20968e5798c9565b4b377afedf4e4c4d60fe7495e1cbe14a251 + languageName: node + linkType: hard + "state-toggle@npm:^1.0.0": version: 1.0.3 resolution: "state-toggle@npm:1.0.3"