├── LICENSE ├── README.md ├── configuration.png ├── example.png ├── extension.json └── index.html /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Lukas Oppermann 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Contentful Key Value Editor 2 | > A form for adding key value pairs with an optional type dropdown to an object field. 3 | 4 | ![Example of key value pairs with a dropdown][example] 5 | 6 | ## Configuration 7 | You can set the following per instance of the editor: 8 | 9 | ![Configuration options][configuration] 10 | 11 | #### Keys 12 | If left empty the key will be a normal input field. If a comma separated list is provided, a dropdown will be shown. You can specify the values as shown below. 13 | 14 | ```bash 15 | # Using the same string for label and value of the dropdown 16 | facebook-id, google-id 17 | # Using a different label and value for the dropdown 18 | Facebook ID:facebook-id, Google ID:google-id 19 | ``` 20 | 21 | #### optionalParameter Dropdown 22 | Empty by default (no dropdown will be shown). If you add a list of comma separated values they will be turned into a dropdown and stored with the data. You can specify the values as shown above. 23 | 24 | ## Data structure 25 | The data will be stored as an array with an object per item. 26 | 27 | ```Javascript 28 | Array({ 29 | key: "someKey", 30 | value: "yourValue", 31 | optionalParameter: "Option A" || null 32 | }, {…}) 33 | ``` 34 | ## Installation 35 | As this plugin uses parameters, you will need to install it using the [contentful cli](https://github.com/contentful/contentful-cli) with the [extension command](https://github.com/contentful/contentful-cli/tree/master/docs/extension). 36 | 37 | 1. Install the [contentful cli](https://github.com/contentful/contentful-cli) and [login](https://github.com/contentful/contentful-cli/tree/master/docs/login). 38 | 39 | 2. [Download](https://github.com/lukasoppermann/contentful-key-value-editor/archive/master.zip) or clone this repo to you computer. 40 | 41 | 3. In your terminal cd into the folder of this plugin and run the following commands 42 | 43 | ```bash 44 | # cd into the folder of this extension 45 | cd your/folder/contentful-key-value-editor 46 | # If you did not login yet 47 | contentful login 48 | # Tell contentful to use your main space (alternatively use the --space-id flag in the folllowing commands) 49 | contentful space use 50 | # create an extension 51 | contentful extension create 52 | ``` 53 | 54 | ## Updating the extension 55 | If you want to install a new update of this extension, you need to download the latest version to your computer and run the following commands: 56 | 57 | ```bash 58 | # cd into the folder of this extension 59 | cd your/folder/contentful-key-value-editor 60 | # update the extension 61 | contentful extension update 62 | ``` 63 | 64 | [example]: example.png 65 | [configuration]: configuration.png 66 | -------------------------------------------------------------------------------- /configuration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukasoppermann/contentful-key-value-editor/310abc7713917a870c34c1c0fbcbd693881766a7/configuration.png -------------------------------------------------------------------------------- /example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukasoppermann/contentful-key-value-editor/310abc7713917a870c34c1c0fbcbd693881766a7/example.png -------------------------------------------------------------------------------- /extension.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "keyValueEditor", 3 | "name": "Key Value Editor", 4 | "srcdoc": "./index.html", 5 | "fieldTypes": ["Object"], 6 | "parameters": { 7 | "instance": [ 8 | { 9 | "id": "keys", 10 | "name": "Predefined values for key", 11 | "description": "Leave empty for free input. A comma separated list will be turned into a dropdown. Use 'Label:value' to define a seperate label.", 12 | "type": "Symbol", 13 | "default": "" 14 | }, 15 | { 16 | "id": "optionalParameter", 17 | "type": "Symbol", 18 | "name": "Optional parameter", 19 | "description": "Comma separated list of items for optional dropdown. Use 'Label:value' to define a seperate label.", 20 | "default": "" 21 | } 22 | ] 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Key Value Editor Widget 5 | 6 | 7 | 42 | 43 | 44 | 45 | 49 | 50 | 62 | 63 | 64 |
65 |
66 | 67 | 68 | 227 | 228 | 229 | 230 | --------------------------------------------------------------------------------