From d24fb140bb318b53b7445c64b753759964ea10fd Mon Sep 17 00:00:00 2001 From: Bibiana Sebestianova Date: Tue, 20 Feb 2024 11:47:28 +0100 Subject: [PATCH 1/7] fix(lib): add translatable as part of the plugin payload --- .../field-plugin/src/createFieldPlugin/FieldPluginData.ts | 1 + .../partialPluginStateFromStateChangeMessage.ts | 1 + .../containerToPluginMessage/FieldPluginSchema.ts | 5 ++++- 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/field-plugin/src/createFieldPlugin/FieldPluginData.ts b/packages/field-plugin/src/createFieldPlugin/FieldPluginData.ts index a1edf24e..71d454f4 100644 --- a/packages/field-plugin/src/createFieldPlugin/FieldPluginData.ts +++ b/packages/field-plugin/src/createFieldPlugin/FieldPluginData.ts @@ -15,6 +15,7 @@ export type FieldPluginData = { blockUid: string | undefined token: string | undefined uid: string + translatable: boolean releases: Release[] releaseId: number | undefined } diff --git a/packages/field-plugin/src/createFieldPlugin/createPluginActions/partialPluginStateFromStateChangeMessage.ts b/packages/field-plugin/src/createFieldPlugin/createPluginActions/partialPluginStateFromStateChangeMessage.ts index 298c2907..6dd54889 100644 --- a/packages/field-plugin/src/createFieldPlugin/createPluginActions/partialPluginStateFromStateChangeMessage.ts +++ b/packages/field-plugin/src/createFieldPlugin/createPluginActions/partialPluginStateFromStateChangeMessage.ts @@ -29,6 +29,7 @@ export const pluginStateFromStateChangeMessage = ( blockUid: message.blockId ?? undefined, token: message.token ?? undefined, options: recordFromFieldPluginOptions(message.schema.options), + translatable: message.schema.translatable ?? false, uid: message.uid ?? undefined, content: validateResult.content, isModalOpen: message.isModalOpen, diff --git a/packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/FieldPluginSchema.ts b/packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/FieldPluginSchema.ts index c9689020..aa8f418d 100644 --- a/packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/FieldPluginSchema.ts +++ b/packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/FieldPluginSchema.ts @@ -6,6 +6,7 @@ import { hasKey } from '../../../utils' export type FieldPluginSchema = { field_type: string options: FieldPluginOption[] + translatable: boolean } export type FieldPluginOption = { name: string; value: string } @@ -21,4 +22,6 @@ export const isFieldPluginSchema = (it: unknown): it is FieldPluginSchema => typeof it.field_type === 'string' && hasKey(it, 'options') && Array.isArray(it.options) && - it.options.every(isFieldPluginOption) + it.options.every(isFieldPluginOption) && + hasKey(it, 'translatable') && + typeof it.translatable === 'boolean' From 36f0ff11f3642ad7650ea732251d6c35f3692005 Mon Sep 17 00:00:00 2001 From: Bibiana Sebestianova Date: Tue, 20 Feb 2024 17:10:15 +0100 Subject: [PATCH 2/7] fix(lib): failed test fix --- .../createPluginActions/createPluginActions.test.ts | 2 +- .../createPluginMessageListener/handlePluginMessage.test.ts | 2 +- .../containerToPluginMessage/FieldPluginSchema.test.ts | 5 +++++ .../containerToPluginMessage/LoadedMessage.test.ts | 3 ++- 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginActions.test.ts b/packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginActions.test.ts index 10181bff..076a0241 100644 --- a/packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginActions.test.ts +++ b/packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginActions.test.ts @@ -65,7 +65,7 @@ describe('createPluginActions', () => { story: { content: {} }, storyId: 123, token: null, - schema: { options: [], field_type: 'abc' }, + schema: { options: [], field_type: 'abc', translatable: false }, language: '', interfaceLanguage: 'en', model: randomString, diff --git a/packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginMessageListener/handlePluginMessage.test.ts b/packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginMessageListener/handlePluginMessage.test.ts index 3f8fdc40..3eed8e0f 100644 --- a/packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginMessageListener/handlePluginMessage.test.ts +++ b/packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginMessageListener/handlePluginMessage.test.ts @@ -60,7 +60,7 @@ describe('handlePluginMessage', () => { model: 123, spaceId: 1234, story: { content: {} }, - schema: { options: [], field_type: 'avh' }, + schema: { options: [], field_type: 'avh', translatable: false }, storyId: 1344, token: 'rfwreff2435wewff43', isModalOpen: false, diff --git a/packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/FieldPluginSchema.test.ts b/packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/FieldPluginSchema.test.ts index 401221f2..c94f080d 100644 --- a/packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/FieldPluginSchema.test.ts +++ b/packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/FieldPluginSchema.test.ts @@ -127,6 +127,7 @@ describe('field plugin schema', () => { isFieldPluginSchema({ field_type: 'field-type-name', options: [], + translatable: false, }), ).toEqual(true) expect( @@ -140,6 +141,7 @@ describe('field plugin schema', () => { isFieldPluginSchema({ field_type: 'field-type-name', options: [], + translatable: false, }), ).toEqual(true) expect( @@ -184,6 +186,7 @@ describe('field plugin schema', () => { isFieldPluginSchema({ field_type: 'field-type-name', options: [], + translatable: false, }), ).toEqual(true) expect( @@ -197,6 +200,7 @@ describe('field plugin schema', () => { isFieldPluginSchema({ field_type: 'field-type-name', options: [], + translatable: false, }), ).toEqual(true) expect( @@ -245,6 +249,7 @@ describe('field plugin schema', () => { isFieldPluginSchema({ field_type: 'name', options: [option], + translatable: false, }), ).toEqual(true) expect( diff --git a/packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/LoadedMessage.test.ts b/packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/LoadedMessage.test.ts index d137b622..ed869355 100644 --- a/packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/LoadedMessage.test.ts +++ b/packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/LoadedMessage.test.ts @@ -13,7 +13,7 @@ const stub: LoadedMessage = { story: { content: {} }, language: '', interfaceLanguage: 'en', - schema: { options: [], field_type: 'blah' }, + schema: { options: [], field_type: 'blah', translatable: false }, releases: [], releaseId: undefined, } @@ -122,6 +122,7 @@ describe('StateChangedMessage', () => { value: 'ab', }, ], + translatable: false, } as FieldPluginSchema, }), ).toEqual(true) From 58678315b74c8fd7de879b451669988249e6ce1c Mon Sep 17 00:00:00 2001 From: Bibiana Sebestianova Date: Thu, 22 Feb 2024 10:36:58 +0100 Subject: [PATCH 3/7] fix(test): failed test fix --- packages/field-plugin/helpers/test/src/index.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/field-plugin/helpers/test/src/index.ts b/packages/field-plugin/helpers/test/src/index.ts index 971dbb98..433163b2 100644 --- a/packages/field-plugin/helpers/test/src/index.ts +++ b/packages/field-plugin/helpers/test/src/index.ts @@ -1,4 +1,5 @@ import { + FieldPluginSchema, isAssetModalChangeMessage, isGetContextMessage, isHeightChangeMessage, @@ -12,9 +13,10 @@ import { vi } from 'vitest' const sandboxOrigin: string = 'https://plugin-sandbox.storyblok.com' const getContainer = (sendToFieldPlugin: (data: unknown) => void) => { - const schema = { + const schema: FieldPluginSchema = { field_type: 'test-field-plugin', options: [], + translatable: false, } // @ts-ignore `height` is not used anywhere, but we keep it here. let height = undefined From ef6a7ddd4892c3f8d3d138c2fe9ddda95dfae8b7 Mon Sep 17 00:00:00 2001 From: Bibiana Sebestianova Date: Tue, 20 Feb 2024 11:47:28 +0100 Subject: [PATCH 4/7] fix(lib): add translatable as part of the plugin payload From 8b83b4110ac9f64cc5b2670ebe5d2b69ccdda3c3 Mon Sep 17 00:00:00 2001 From: Bibiana Sebestianova Date: Tue, 20 Feb 2024 16:42:25 +0100 Subject: [PATCH 5/7] fix(sandbox): add checkbox for translatable property, regroup settings together --- .../src/components/FieldPluginContainer.tsx | 42 +++++++++++++------ .../src/components/TranslatableCheckbox.tsx | 21 ++++++++++ 2 files changed, 50 insertions(+), 13 deletions(-) create mode 100644 packages/container/src/components/TranslatableCheckbox.tsx diff --git a/packages/container/src/components/FieldPluginContainer.tsx b/packages/container/src/components/FieldPluginContainer.tsx index c104a600..d95e94ce 100644 --- a/packages/container/src/components/FieldPluginContainer.tsx +++ b/packages/container/src/components/FieldPluginContainer.tsx @@ -52,6 +52,7 @@ import { ObjectView } from './ObjectView' import { UrlView } from './UrlView' import { usePluginParams } from './usePluginParams' import { LanguageView } from './LanguageView' +import { TranslatableCheckbox } from './TranslatableCheckbox' const defaultUrl = 'http://localhost:8080' const initialStory: StoryData = { @@ -111,15 +112,17 @@ const useSandbox = ( const [schema, setSchema] = useState({ field_type: 'preview', options: manifest.options, + translatable: false, }) const [content, setContent] = useState(initialContent) - const [language, setLanguage] = useState('') + const [language, setLanguage] = useState('default') const [stateChangedCallbackId, setStateChangedCallbackId] = useState() const stateChangedData = useMemo( () => ({ model: content, schema: schema, + interfaceLanguage: 'en', action: 'state-changed', uid, blockId: undefined, @@ -130,6 +133,8 @@ const useSandbox = ( token: null, isModalOpen, callbackId: stateChangedCallbackId, + releases: [], + releaseId: undefined, }), [ uid, @@ -371,13 +376,29 @@ export const FieldPluginContainer: FunctionComponent = () => { - Options + Settings - + + + setSchema({ ...schema, translatable: e })} + /> + + @@ -393,13 +414,6 @@ export const FieldPluginContainer: FunctionComponent = () => { content={content} setContent={setContent} /> - @@ -418,6 +432,8 @@ export const FieldPluginContainer: FunctionComponent = () => { { content, isModalOpen, + translatable: schema.translatable, + storyLang: language, options: recordFromFieldPluginOptions(schema.options), } satisfies Partial> } diff --git a/packages/container/src/components/TranslatableCheckbox.tsx b/packages/container/src/components/TranslatableCheckbox.tsx new file mode 100644 index 00000000..05c1de32 --- /dev/null +++ b/packages/container/src/components/TranslatableCheckbox.tsx @@ -0,0 +1,21 @@ +import { Checkbox, FormControl, FormLabel } from '@mui/material' +import { FunctionComponent } from 'react' + +export const TranslatableCheckbox: FunctionComponent<{ + isTranslatable: boolean + setTranslatable: (value: boolean) => void +}> = (props) => { + return ( + + Translatable + props.setTranslatable(e.target.checked)} + /> + + ) +} From 593bd75dfe4c0e95c75b5a58c9f2a20b6f8fc273 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Demetrius=20Feij=C3=B3o?= Date: Fri, 1 Mar 2024 14:39:52 -0300 Subject: [PATCH 6/7] rename all references --- CONTRIBUTING.md | 8 +-- package.json | 4 +- packages/{container => sandbox}/.eslintrc.cjs | 0 packages/{container => sandbox}/index.html | 0 .../{container => sandbox}/jest.config.js | 0 packages/{container => sandbox}/package.json | 2 +- .../{container => sandbox}/public/icon.svg | 0 .../src/components/App.tsx | 4 +- .../src/components/ContentView.tsx | 0 .../components/DisableShieldsNotification.tsx | 0 .../src/components/FieldPluginSandbox.tsx} | 6 +-- .../src/components/FieldTypePreview.tsx | 6 +-- .../src/components/FlexTypography.tsx | 0 .../src/components/LanguageView.tsx | 0 .../src/components/ObjectView/ObjectView.tsx | 0 .../src/components/ObjectView/_hljs.scss | 0 .../src/components/ObjectView/index.ts | 0 .../src/components/OptionEditor.tsx | 0 .../src/components/SandboxAppHeader.tsx | 0 .../src/components/SchemaEditor.tsx | 0 .../src/components/StoryView.tsx | 0 .../src/components/StoryblokLogo.tsx | 0 .../src/components/TranslatableCheckbox.tsx | 0 .../src/components/UrlView.tsx | 0 .../src/components/usePluginParams.tsx | 0 .../src/dom/createSandboxMessageListener.ts} | 10 ++-- packages/{container => sandbox}/src/main.tsx | 0 packages/{container => sandbox}/tsconfig.json | 0 packages/{container => sandbox}/vercel.json | 0 .../{container => sandbox}/vite.config.ts | 0 yarn.lock | 54 +++++++++---------- 31 files changed, 47 insertions(+), 47 deletions(-) rename packages/{container => sandbox}/.eslintrc.cjs (100%) rename packages/{container => sandbox}/index.html (100%) rename packages/{container => sandbox}/jest.config.js (100%) rename packages/{container => sandbox}/package.json (97%) rename packages/{container => sandbox}/public/icon.svg (100%) rename packages/{container => sandbox}/src/components/App.tsx (91%) rename packages/{container => sandbox}/src/components/ContentView.tsx (100%) rename packages/{container => sandbox}/src/components/DisableShieldsNotification.tsx (100%) rename packages/{container/src/components/FieldPluginContainer.tsx => sandbox/src/components/FieldPluginSandbox.tsx} (98%) rename packages/{container => sandbox}/src/components/FieldTypePreview.tsx (95%) rename packages/{container => sandbox}/src/components/FlexTypography.tsx (100%) rename packages/{container => sandbox}/src/components/LanguageView.tsx (100%) rename packages/{container => sandbox}/src/components/ObjectView/ObjectView.tsx (100%) rename packages/{container => sandbox}/src/components/ObjectView/_hljs.scss (100%) rename packages/{container => sandbox}/src/components/ObjectView/index.ts (100%) rename packages/{container => sandbox}/src/components/OptionEditor.tsx (100%) rename packages/{container => sandbox}/src/components/SandboxAppHeader.tsx (100%) rename packages/{container => sandbox}/src/components/SchemaEditor.tsx (100%) rename packages/{container => sandbox}/src/components/StoryView.tsx (100%) rename packages/{container => sandbox}/src/components/StoryblokLogo.tsx (100%) rename packages/{container => sandbox}/src/components/TranslatableCheckbox.tsx (100%) rename packages/{container => sandbox}/src/components/UrlView.tsx (100%) rename packages/{container => sandbox}/src/components/usePluginParams.tsx (100%) rename packages/{container/src/dom/createContainerMessageListener.ts => sandbox/src/dom/createSandboxMessageListener.ts} (88%) rename packages/{container => sandbox}/src/main.tsx (100%) rename packages/{container => sandbox}/tsconfig.json (100%) rename packages/{container => sandbox}/vercel.json (100%) rename packages/{container => sandbox}/vite.config.ts (100%) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 0a487e8b..66ea17f1 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -24,7 +24,7 @@ This repository is a monorepo that includes multiple packages. We use Yarn Works - Library (`packages/field-plugin`): This is the core library. It exports the `createFieldPlugin()` function, which sends and receives events between Storyblok's Visual Editor and your Field Plugin. - Demo (`packages/demo`): This is a demo Field Plugin that covers the basic functionalities of the Field Plugin SDK. -- Container (`packages/container`): In production, a Field Plugin is hosted within Storyblok's Visual Editor, and they exchange events. Similarly, our demo Field Plugin needs an environment like the Visual Editor. That's what Container is - a simulated environment to test your Field Plugin. +- Sandbox (`packages/sandbox`): In production, a Field Plugin is hosted within Storyblok's Visual Editor, and they exchange events. Similarly, our demo Field Plugin needs an environment like the Visual Editor. That's what the Sandbox is - a simulated container environment to test your Field Plugin. - CLI (`packages/cli`): This is a CLI package that helps you create and deploy Field Plugins. It can be accessed with `npx @storyblok/field-plugin@beta`. - Templates (`packages/cli/templates/*`): We maintain templates to create Field Plugin in React, Vue 3, Vue 2, and plain JavaScript. - Helpers (`packages/helper-*`): While `createFieldPlugin` from `@storyblok/field-plugin` is framework-agnostic, we provide framework-specific helpers such as the `useFieldPlugin` hook. These helpers are not released independently to NPM, but are included within the library and accessible as a submodule, for example, `import { useFieldPlugin } from '@storyblok/field-plugin/react'`. @@ -75,15 +75,15 @@ At the root of this repository, run the following command to run unit tests: yarn test:lib ``` -#### Test with demo and Container +#### Test with demo and Sandbox To test the library with a demo, you need to run three commands in parallel: - `yarn dev:lib`: Watches file changes in the library and updates the bundle output. - `yarn dev:demo`: Runs the demo Field Plugin located at `packages/demo`. Update it to test changes to the library. -- `yarn dev:container`: Runs Container locally. +- `yarn dev:sandbox`: Runs the Sandbox locally. -Run all the commands in three separate terminals, then open the Container at `http://localhost:7070/`. This Container hosts the demo Field Plugin. Whenever you change a file in the library, the bundle output updates automatically and the demo app does Hot-Module Replacement (HMR). You can then seamlessly test it in the Container. +Run all the commands in three separate terminals, then open the Sandbox at `http://localhost:7070/`. This Container hosts the demo Field Plugin. Whenever you change a file in the library, the bundle output updates automatically and the demo app does Hot-Module Replacement (HMR). You can then seamlessly test it in the running Sandbox application. ### CLI diff --git a/package.json b/package.json index 34272118..0b6ec565 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "build": "yarn build:lib && yarn workspaces foreach --exclude @storyblok/field-plugin run build", "build:lib": "yarn workspace @storyblok/field-plugin build", "build:cli": "yarn workspace @storyblok/field-plugin-cli build", - "build:container": "yarn build:lib && yarn workspace container build", + "build:sandbox": "yarn build:lib && yarn workspace sandbox build", "prepare-dev-configs": "./scripts/prepare-dev-vite-configs.mjs", "test": "yarn test:lib", "test:lib": "yarn workspace @storyblok/field-plugin test", @@ -48,7 +48,7 @@ "lint": "eslint .", "dev:demo": "yarn workspace demo dev", "dev:lib": "yarn workspace @storyblok/field-plugin dev", - "dev:container": "yarn workspace container dev", + "dev:sandbox": "yarn workspace sandbox dev", "dev:template": "yarn workspace field-plugin-${0}-template dev --config node_modules/.${0}-vite.config.ts", "dev:react": "yarn dev:template react", "dev:js": "yarn dev:template js", diff --git a/packages/container/.eslintrc.cjs b/packages/sandbox/.eslintrc.cjs similarity index 100% rename from packages/container/.eslintrc.cjs rename to packages/sandbox/.eslintrc.cjs diff --git a/packages/container/index.html b/packages/sandbox/index.html similarity index 100% rename from packages/container/index.html rename to packages/sandbox/index.html diff --git a/packages/container/jest.config.js b/packages/sandbox/jest.config.js similarity index 100% rename from packages/container/jest.config.js rename to packages/sandbox/jest.config.js diff --git a/packages/container/package.json b/packages/sandbox/package.json similarity index 97% rename from packages/container/package.json rename to packages/sandbox/package.json index a4c2337e..8f619b55 100644 --- a/packages/container/package.json +++ b/packages/sandbox/package.json @@ -1,5 +1,5 @@ { - "name": "container", + "name": "sandbox", "private": true, "version": "0.0.0", "type": "module", diff --git a/packages/container/public/icon.svg b/packages/sandbox/public/icon.svg similarity index 100% rename from packages/container/public/icon.svg rename to packages/sandbox/public/icon.svg diff --git a/packages/container/src/components/App.tsx b/packages/sandbox/src/components/App.tsx similarity index 91% rename from packages/container/src/components/App.tsx rename to packages/sandbox/src/components/App.tsx index 4138315e..20793d63 100644 --- a/packages/container/src/components/App.tsx +++ b/packages/sandbox/src/components/App.tsx @@ -6,7 +6,7 @@ import { NotificationProvider, } from '@storyblok/mui' import { CssBaseline, ThemeProvider } from '@mui/material' -import { FieldPluginContainer } from './FieldPluginContainer' +import { FieldPluginSandbox } from './FieldPluginSandbox' import { SandboxAppHeader } from './SandboxAppHeader' import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom' import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6' @@ -29,7 +29,7 @@ export const App: FunctionComponent = () => ( - + } diff --git a/packages/container/src/components/ContentView.tsx b/packages/sandbox/src/components/ContentView.tsx similarity index 100% rename from packages/container/src/components/ContentView.tsx rename to packages/sandbox/src/components/ContentView.tsx diff --git a/packages/container/src/components/DisableShieldsNotification.tsx b/packages/sandbox/src/components/DisableShieldsNotification.tsx similarity index 100% rename from packages/container/src/components/DisableShieldsNotification.tsx rename to packages/sandbox/src/components/DisableShieldsNotification.tsx diff --git a/packages/container/src/components/FieldPluginContainer.tsx b/packages/sandbox/src/components/FieldPluginSandbox.tsx similarity index 98% rename from packages/container/src/components/FieldPluginContainer.tsx rename to packages/sandbox/src/components/FieldPluginSandbox.tsx index d95e94ce..8b72149d 100644 --- a/packages/container/src/components/FieldPluginContainer.tsx +++ b/packages/sandbox/src/components/FieldPluginSandbox.tsx @@ -39,7 +39,7 @@ import { import { CenteredContent, useNotifications } from '@storyblok/mui' import { SchemaEditor } from './SchemaEditor' import { FieldTypePreview } from './FieldTypePreview' -import { createContainerMessageListener } from '../dom/createContainerMessageListener' +import { createSandboxMessageListener } from '../dom/createSandboxMessageListener' import { useDebounce } from 'use-debounce' import { ContentView } from './ContentView' import { @@ -259,7 +259,7 @@ const useSandbox = ( useEffect( () => - createContainerMessageListener( + createSandboxMessageListener( { setContent: onUpdate, setPluginReady: onLoaded, @@ -311,7 +311,7 @@ const useSandbox = ( ] as const } -export const FieldPluginContainer: FunctionComponent = () => { +export const FieldPluginSandbox: FunctionComponent = () => { const { error } = useNotifications() const [ { diff --git a/packages/container/src/components/FieldTypePreview.tsx b/packages/sandbox/src/components/FieldTypePreview.tsx similarity index 95% rename from packages/container/src/components/FieldTypePreview.tsx rename to packages/sandbox/src/components/FieldTypePreview.tsx index a323ab29..ec560b31 100644 --- a/packages/container/src/components/FieldTypePreview.tsx +++ b/packages/sandbox/src/components/FieldTypePreview.tsx @@ -36,7 +36,7 @@ const FieldTypeModal: FunctionComponent< ) -const FieldTypeContainer: FunctionComponent< +const FieldTypeSandbox: FunctionComponent< PropsWithChildren<{ isModal: boolean }> @@ -89,7 +89,7 @@ export const FieldTypePreview = forwardRef< sx={{ zIndex: ({ zIndex }) => zIndex.drawer }} /> - + {typeof props.src !== 'undefined' ? ( Please enter a valid URL. )} - + ) diff --git a/packages/container/src/components/FlexTypography.tsx b/packages/sandbox/src/components/FlexTypography.tsx similarity index 100% rename from packages/container/src/components/FlexTypography.tsx rename to packages/sandbox/src/components/FlexTypography.tsx diff --git a/packages/container/src/components/LanguageView.tsx b/packages/sandbox/src/components/LanguageView.tsx similarity index 100% rename from packages/container/src/components/LanguageView.tsx rename to packages/sandbox/src/components/LanguageView.tsx diff --git a/packages/container/src/components/ObjectView/ObjectView.tsx b/packages/sandbox/src/components/ObjectView/ObjectView.tsx similarity index 100% rename from packages/container/src/components/ObjectView/ObjectView.tsx rename to packages/sandbox/src/components/ObjectView/ObjectView.tsx diff --git a/packages/container/src/components/ObjectView/_hljs.scss b/packages/sandbox/src/components/ObjectView/_hljs.scss similarity index 100% rename from packages/container/src/components/ObjectView/_hljs.scss rename to packages/sandbox/src/components/ObjectView/_hljs.scss diff --git a/packages/container/src/components/ObjectView/index.ts b/packages/sandbox/src/components/ObjectView/index.ts similarity index 100% rename from packages/container/src/components/ObjectView/index.ts rename to packages/sandbox/src/components/ObjectView/index.ts diff --git a/packages/container/src/components/OptionEditor.tsx b/packages/sandbox/src/components/OptionEditor.tsx similarity index 100% rename from packages/container/src/components/OptionEditor.tsx rename to packages/sandbox/src/components/OptionEditor.tsx diff --git a/packages/container/src/components/SandboxAppHeader.tsx b/packages/sandbox/src/components/SandboxAppHeader.tsx similarity index 100% rename from packages/container/src/components/SandboxAppHeader.tsx rename to packages/sandbox/src/components/SandboxAppHeader.tsx diff --git a/packages/container/src/components/SchemaEditor.tsx b/packages/sandbox/src/components/SchemaEditor.tsx similarity index 100% rename from packages/container/src/components/SchemaEditor.tsx rename to packages/sandbox/src/components/SchemaEditor.tsx diff --git a/packages/container/src/components/StoryView.tsx b/packages/sandbox/src/components/StoryView.tsx similarity index 100% rename from packages/container/src/components/StoryView.tsx rename to packages/sandbox/src/components/StoryView.tsx diff --git a/packages/container/src/components/StoryblokLogo.tsx b/packages/sandbox/src/components/StoryblokLogo.tsx similarity index 100% rename from packages/container/src/components/StoryblokLogo.tsx rename to packages/sandbox/src/components/StoryblokLogo.tsx diff --git a/packages/container/src/components/TranslatableCheckbox.tsx b/packages/sandbox/src/components/TranslatableCheckbox.tsx similarity index 100% rename from packages/container/src/components/TranslatableCheckbox.tsx rename to packages/sandbox/src/components/TranslatableCheckbox.tsx diff --git a/packages/container/src/components/UrlView.tsx b/packages/sandbox/src/components/UrlView.tsx similarity index 100% rename from packages/container/src/components/UrlView.tsx rename to packages/sandbox/src/components/UrlView.tsx diff --git a/packages/container/src/components/usePluginParams.tsx b/packages/sandbox/src/components/usePluginParams.tsx similarity index 100% rename from packages/container/src/components/usePluginParams.tsx rename to packages/sandbox/src/components/usePluginParams.tsx diff --git a/packages/container/src/dom/createContainerMessageListener.ts b/packages/sandbox/src/dom/createSandboxMessageListener.ts similarity index 88% rename from packages/container/src/dom/createContainerMessageListener.ts rename to packages/sandbox/src/dom/createSandboxMessageListener.ts index 1fce28f9..ff92b305 100644 --- a/packages/container/src/dom/createContainerMessageListener.ts +++ b/packages/sandbox/src/dom/createSandboxMessageListener.ts @@ -14,7 +14,7 @@ import { ValueChangeMessage, } from '@storyblok/field-plugin' -type ContainerActions = { +type SandboxActions = { setHeight: (message: HeightChangeMessage) => void setContent: (message: ValueChangeMessage) => void setModalOpen: (message: ModalChangeMessage) => void @@ -23,8 +23,8 @@ type ContainerActions = { selectAsset: (message: AssetModalChangeMessage) => void } -export type CreateContainerListener = ( - eventHandlers: ContainerActions, +export type CreateSandboxListener = ( + eventHandlers: SandboxActions, options: { window: Window iframeOrigin: string | undefined @@ -32,7 +32,7 @@ export type CreateContainerListener = ( }, ) => () => void -export const createContainerMessageListener: CreateContainerListener = ( +export const createSandboxMessageListener: CreateSandboxListener = ( eventHandlers, options, ) => { @@ -62,7 +62,7 @@ export const createContainerMessageListener: CreateContainerListener = ( eventHandlers.requestContext(message) } else { console.warn( - `Container received unknown message from plugin: ${JSON.stringify( + `The Sandbox received unknown message from plugin: ${JSON.stringify( message, )}`, ) diff --git a/packages/container/src/main.tsx b/packages/sandbox/src/main.tsx similarity index 100% rename from packages/container/src/main.tsx rename to packages/sandbox/src/main.tsx diff --git a/packages/container/tsconfig.json b/packages/sandbox/tsconfig.json similarity index 100% rename from packages/container/tsconfig.json rename to packages/sandbox/tsconfig.json diff --git a/packages/container/vercel.json b/packages/sandbox/vercel.json similarity index 100% rename from packages/container/vercel.json rename to packages/sandbox/vercel.json diff --git a/packages/container/vite.config.ts b/packages/sandbox/vite.config.ts similarity index 100% rename from packages/container/vite.config.ts rename to packages/sandbox/vite.config.ts diff --git a/yarn.lock b/yarn.lock index 4b8e6cc2..b2146c15 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4203,33 +4203,6 @@ __metadata: languageName: node linkType: hard -"container@workspace:packages/container": - version: 0.0.0-use.local - resolution: "container@workspace:packages/container" - dependencies: - "@emotion/react": 11.11.3 - "@emotion/styled": 11.11.0 - "@fontsource/roboto": 4.5.8 - "@mui/material": 5.15.10 - "@storyblok/field-plugin": latest - "@storyblok/mui": 0.2.0 - "@types/react-dom": ^18.2.19 - "@vitejs/plugin-react": ^3.0.0 - eslint: ^8.56.0 - eslint-plugin-react: ^7.33.2 - eslint-plugin-react-hooks: ^4.6.0 - highlight.js: 11.9.0 - react: 18.2.0 - react-dom: 18.2.0 - react-router-dom: ^6.22.1 - sass: ^1.71.0 - use-debounce: ^9.0.3 - use-query-params: ^2.2.1 - usehooks-ts: 2.14.0 - vite: ^5.1.3 - languageName: unknown - linkType: soft - "convert-source-map@npm:^1.5.0": version: 1.9.0 resolution: "convert-source-map@npm:1.9.0" @@ -9783,6 +9756,33 @@ __metadata: languageName: node linkType: hard +"sandbox@workspace:packages/sandbox": + version: 0.0.0-use.local + resolution: "sandbox@workspace:packages/sandbox" + dependencies: + "@emotion/react": 11.11.3 + "@emotion/styled": 11.11.0 + "@fontsource/roboto": 4.5.8 + "@mui/material": 5.15.10 + "@storyblok/field-plugin": latest + "@storyblok/mui": 0.2.0 + "@types/react-dom": ^18.2.19 + "@vitejs/plugin-react": ^3.0.0 + eslint: ^8.56.0 + eslint-plugin-react: ^7.33.2 + eslint-plugin-react-hooks: ^4.6.0 + highlight.js: 11.9.0 + react: 18.2.0 + react-dom: 18.2.0 + react-router-dom: ^6.22.1 + sass: ^1.71.0 + use-debounce: ^9.0.3 + use-query-params: ^2.2.1 + usehooks-ts: 2.14.0 + vite: ^5.1.3 + languageName: unknown + linkType: soft + "sass@npm:^1.71.0": version: 1.71.1 resolution: "sass@npm:1.71.1" From b0d03e74c5b549019526e5589f6be49e71ec604c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Demetrius=20Feij=C3=B3o?= Date: Fri, 1 Mar 2024 20:35:55 -0300 Subject: [PATCH 7/7] add logic to send and receive message from any region --- packages/demo/src/components/FieldPluginDemo.tsx | 1 + .../field-plugin/helpers/react/src/useFieldPlugin.ts | 2 ++ .../field-plugin/helpers/vue3/src/useFieldPlugin.ts | 2 ++ .../src/createFieldPlugin/createFieldPlugin.ts | 11 ++++++++--- .../createPluginMessageListener.ts | 4 +++- 5 files changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/demo/src/components/FieldPluginDemo.tsx b/packages/demo/src/components/FieldPluginDemo.tsx index 1e9c1247..d59700e5 100644 --- a/packages/demo/src/components/FieldPluginDemo.tsx +++ b/packages/demo/src/components/FieldPluginDemo.tsx @@ -19,6 +19,7 @@ export type PluginComponent = FunctionComponent<{ export const FieldPluginDemo: FunctionComponent = () => { const { type, data, actions } = useFieldPlugin({ validateContent, + allowAllOrigins: true, }) if (type === 'loading') { diff --git a/packages/field-plugin/helpers/react/src/useFieldPlugin.ts b/packages/field-plugin/helpers/react/src/useFieldPlugin.ts index 995434bd..0c23f4c0 100644 --- a/packages/field-plugin/helpers/react/src/useFieldPlugin.ts +++ b/packages/field-plugin/helpers/react/src/useFieldPlugin.ts @@ -7,6 +7,7 @@ import { useEffect, useState } from 'react' export const useFieldPlugin = ({ validateContent, + allowAllOrigins, }: Omit< CreateFieldPluginOptions, 'onUpdateState' @@ -32,6 +33,7 @@ export const useFieldPlugin = ({ } }, validateContent, + allowAllOrigins, }) }, []) diff --git a/packages/field-plugin/helpers/vue3/src/useFieldPlugin.ts b/packages/field-plugin/helpers/vue3/src/useFieldPlugin.ts index 99b964bc..3401e77d 100644 --- a/packages/field-plugin/helpers/vue3/src/useFieldPlugin.ts +++ b/packages/field-plugin/helpers/vue3/src/useFieldPlugin.ts @@ -23,6 +23,7 @@ const updateObjectWithoutChangingReference = ( export const useFieldPlugin = ({ validateContent, + allowAllOrigins, }: Omit, 'onUpdateState'> = {}): UnwrapRef< FieldPluginResponse > => { @@ -89,6 +90,7 @@ export const useFieldPlugin = ({ } }, validateContent, + allowAllOrigins, }) }) diff --git a/packages/field-plugin/src/createFieldPlugin/createFieldPlugin.ts b/packages/field-plugin/src/createFieldPlugin/createFieldPlugin.ts index 446045ee..4b66f1d1 100644 --- a/packages/field-plugin/src/createFieldPlugin/createFieldPlugin.ts +++ b/packages/field-plugin/src/createFieldPlugin/createFieldPlugin.ts @@ -10,6 +10,7 @@ import { isCloneable } from '../utils/isCloneable' export type CreateFieldPluginOptions = { onUpdateState: (state: FieldPluginResponse) => void validateContent?: ValidateContent + allowAllOrigins?: boolean } export type CreateFieldPlugin = ( @@ -22,6 +23,7 @@ export type CreateFieldPlugin = ( export const createFieldPlugin: CreateFieldPlugin = ({ onUpdateState, validateContent, + allowAllOrigins = false, }) => { const isEmbedded = window.parent !== window @@ -49,9 +51,11 @@ export const createFieldPlugin: CreateFieldPlugin = ({ const { uid, host } = params const origin = - host === 'plugin-sandbox.storyblok.com' - ? 'https://plugin-sandbox.storyblok.com' - : 'https://app.storyblok.com' + allowAllOrigins === true + ? '*' + : host === 'plugin-sandbox.storyblok.com' + ? 'https://plugin-sandbox.storyblok.com' + : 'https://app.storyblok.com' const postToContainer = (message: unknown) => { try { @@ -104,6 +108,7 @@ export const createFieldPlugin: CreateFieldPlugin = ({ const cleanupMessageListenerSideEffects = createPluginMessageListener( params.uid, origin, + allowAllOrigins, messageCallbacks, ) diff --git a/packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginMessageListener/createPluginMessageListener.ts b/packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginMessageListener/createPluginMessageListener.ts index 2afcc51e..4c2c87e5 100644 --- a/packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginMessageListener/createPluginMessageListener.ts +++ b/packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginMessageListener/createPluginMessageListener.ts @@ -18,6 +18,7 @@ export type PluginMessageCallbacks = { export type CreatePluginMessageListener = ( uid: string, origin: string, + allowAllOrigins: boolean, callbacks: PluginMessageCallbacks, ) => () => void @@ -28,10 +29,11 @@ export type CreatePluginMessageListener = ( export const createPluginMessageListener: CreatePluginMessageListener = ( uid, origin, + allowAllOrigins, callbacks, ) => { const handleEvent = (event: MessageEvent) => { - if (event.origin === origin) { + if (allowAllOrigins || event.origin === origin) { handlePluginMessage(event.data, uid, callbacks) } }