@codecademy/codebytes 0.3.1-alpha.e58974.0 → 0.4.1-alpha.57228a.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [0.3.1-alpha.e58974.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.3.0...@codecademy/codebytes@0.3.1-alpha.e58974.0) (2022-01-21)
+### [0.4.1-alpha.57228a.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.4.0...@codecademy/codebytes@0.4.1-alpha.57228a.0) (2022-01-24)
 
 **Note:** Version bump only for package @codecademy/codebytes
 
@@ -11,6 +11,15 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
+## [0.4.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.3.0...@codecademy/codebytes@0.4.0) (2022-01-21)
+
+
+### Features
+
+* **Codebytes:** move language selection component disc 354 ([#17](https://github.com/Codecademy/client-modules/issues/17)) ([040553d](https://github.com/Codecademy/client-modules/commit/040553dcc7867b6e331712365bcc19ea2df306d5))
+
+
+
 ## [0.3.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.3.0) (2022-01-12)
 
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Code Editor",
-  "version": "0.3.1-alpha.e58974.0",
+  "version": "0.4.1-alpha.57228a.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -52,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "213e46aa9ab6c56591cb17af9f4fe44f58a5bd53"
+  "gitHead": "899820c8b5e4d7c9e96a6eeec0c446e402084d48"
 }

package/src/editor.tsx

@@ -40,6 +40,7 @@ type EditorProps = {
   language: LanguageOption;
   text: string;
   onChange: (text: string) => void;
+  onCopy?: (text: string, language: string) => void;
   snippetsBaseUrl?: string;
 };
 
@@ -48,6 +49,7 @@ export const Editor: React.FC<EditorProps> = ({
   text,
   hideCopyButton,
   onChange,
+  onCopy,
   snippetsBaseUrl,
 }) => {
   const [output, setOutput] = useState('');
@@ -59,8 +61,9 @@ export const Editor: React.FC<EditorProps> = ({
         .writeText(text)
         // eslint-disable-next-line no-console
         .catch(() => console.error('Failed to copy'));
-      trackClick('copy');
+      onCopy?.(text, language);
       setIsCodeByteCopied(true);
+      trackClick('copy');
     }
   };
 

package/src/helpers/index.ts

@@ -1,15 +1,8 @@
-import { decode } from 'js-base64';
 import Uri from 'jsuri';
 
-import { languageOption, validLanguages } from '../consts';
 import { trackUserClick } from '../libs/eventTracking';
 
-export type CopyButtonMode = 'hide' | undefined;
-
 export type CodebyteOptions = {
-  language: languageOption;
-  text: string;
-  copyMode: CopyButtonMode;
   clientName: string;
   parentPage: string;
   renderMode: string;
@@ -28,15 +21,6 @@ export const getOptions = (): CodebyteOptions => {
   const currentUri = new Uri(window.location.href);
 
   return {
-    language:
-      validLanguages.find(
-        (lang) =>
-          currentUri.getQueryParamValue(CodebytesParams.Language) === lang
-      ) ?? '',
-    text: decode(currentUri.getQueryParamValue(CodebytesParams.Text) ?? ''),
-    copyMode: currentUri
-      .getQueryParamValue(CodebytesParams.CopyMode)
-      ?.toLowerCase() as CopyButtonMode,
     clientName:
       currentUri.getQueryParamValue(CodebytesParams.ClientName) || 'Unknown',
     parentPage:

package/src/index.tsx

@@ -40,6 +40,8 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   hideCopyButton,
   isIFrame = false,
   snippetsBaseUrl = process.env.CONTAINER_API_BASE,
+  onEdit,
+  onLanguageChange,
 }) => {
   const [text, setText] = useState<string>(initialText);
   const [language, setLanguage] = useState<LanguageOption>(initialLanguage);
@@ -78,6 +80,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
           hideCopyButton={hideCopyButton}
           onChange={(newText: string) => {
             setText(newText);
+            onEdit?.(newText, language);
 
             const { renderMode } = getOptions();
             if (!renderMode && hasBeenEdited === false) {
@@ -95,6 +98,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
             setLanguage(newLanguage);
             setText(newText);
             trackClick('lang_select');
+            onLanguageChange?.(newText, newLanguage);
           }}
         />
       )}

package/src/types.ts

@@ -1,9 +1,13 @@
-import { languageOption } from './consts';
+import { LanguageOption } from './consts';
 
+type CodebytesChangeHandler = (text: string, language: LanguageOption) => void;
 export interface CodeByteEditorProps {
   text: string;
-  language: languageOption;
+  language: LanguageOption;
   hideCopyButton: boolean;
+  onCopy?: CodebytesChangeHandler;
   isIFrame?: boolean;
   snippetsBaseUrl?: string;
+  onEdit?: CodebytesChangeHandler;
+  onLanguageChange?: CodebytesChangeHandler;
 }