๐
This is a very rough first draft of a localization plugin + field.
See the issues for some Sanity questions & problems I have!
In order to wrap the Desk Tool in a <Provider>
element, I'm removing @sanity/desk-tool
from the main list of plugins, and replacing it with localized
, which exports a DeskTool
wrapped in a provider.
When I start sanity, I get errors along the lines of:
Error in ./node_modules/@sanity/desk-tool/lib/pane/EditorPane.jsModule not found: Error: Part "part:@sanity/form-builder" not implemented by any plugins
@ ./node_modules/@sanity/desk-tool/lib/pane/EditorPane.js 26:19-55
@ ./node_modules/@sanity/desk-tool/lib/pane/Pane.js
@ ./node_modules/@sanity/desk-tool/lib/DeskToolPanes.js
@ ./node_modules/@sanity/desk-tool/lib/DeskTool.js
@ ./node_modules/@sanity/desk-tool/lib/index.js
@ ./plugins/localized/index.js
@ ./plugins/localized (all:part:@sanity/base/tool)
@ ./node_modules/@sanity/default-layout/lib/defaultLayoutRouter.js
@ ./node_modules/@sanity/default-layout/lib/components/DefaultLayoutContainer.js (part:@sanity/base/root)
@ ./node_modules/@sanity/base/lib/components/SanityRoot.js (part:@sanity/base/sanity-root)
@ ./node_modules/@sanity/server/lib/browser/entry-dev.js
@ multi ./node_modules/react-hot-loader/patch.js ./node_modules/normalize.css/normalize.css ./node_modules/@sanity/server/lib/browser/entry-dev.js
I discovered (by mistake) that if I start sanity with the default @sanity/desk-tool
plugin, let it compile, and then replace it with localized
, everything works as expected.
To recreate this:
npm run start
. You'll see the errors._plugins
and plugins
in sanity.json, then npm run start
again.localized
.DeskTool
within the plugin (as I am doing) is the best approach, what's up with these errors and how can I get it going?The function localizeField
(see here) takes a standard field config and "localizes" it. (See it in use in the post schema)
usage:
fields: [
localizeField({
name: 'title',
title: 'Title',
type: 'string',
}),
...
]
It turns this field into an object with translations for each language. The above example turns into:
fields: [
{
name: 'title',
title: 'Title',
type: 'object',
fields: [
{
name: 'en',
title: 'English',
type: 'string',
},
{
name: 'es',
title: 'Spanish',
type: 'string',
},
// ... and so on for other languages
]
}
...
]
This is done by copying the implementation of the core ObjectInput component, with the only difference being that it hides the input if it is not the current language.
As you can see in the function, it is literally just copied and pasted.
Is there an easier way to render the child fields without needing to re-implement handleFieldChange
and all of the other props?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.