# @keystone-alpha/field-content > A block-based content field for KeystoneJS Latest version **3.1.4** (published 2019-10-23) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install @keystone-alpha/field-content pnpm add @keystone-alpha/field-content yarn add @keystone-alpha/field-content bun add @keystone-alpha/field-content ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 3.1.4 | | Published | 2019-10-23 | | First published | 2019-07-05 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | >=8.4.0 | | Dependencies | 27 | | Unpacked size | 223 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | The KeystoneJS Development Team | | Maintainers | dominikwilkowski, jedwatson, jesstelford, mitchellhamilton, molomby, timl | ## Links - npm: https://www.npmjs.com/package/@keystone-alpha/field-content - npm.io page: https://npm.io/package/@keystone-alpha/field-content ## Dependencies (27) - [react](https://npm.io/package/react.md) ^16.8.6 - [slate](https://npm.io/package/slate.md) ^0.47.4 - [apply-ref](https://npm.io/package/apply-ref.md) ^0.2.0 - [is-hotkey](https://npm.io/package/is-hotkey.md) ^0.1.4 - [react-dom](https://npm.io/package/react-dom.md) ^16.8.6 - [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2 - [nanoassert](https://npm.io/package/nanoassert.md) ^2.0.0 - [memoize-one](https://npm.io/package/memoize-one.md) ^4.0.2 - [slate-react](https://npm.io/package/slate-react.md) ^0.22.4 - [p-is-promise](https://npm.io/package/p-is-promise.md) ^3.0.0 - [react-popper](https://npm.io/package/react-popper.md) ^1.3.3 - [@emotion/core](https://npm.io/package/@emotion/core.md) ^10.0.14 - [@arch-ui/hooks](https://npm.io/package/@arch-ui/hooks.md) ^0.0.4 - [@arch-ui/icons](https://npm.io/package/@arch-ui/icons.md) ^0.0.5 - [@arch-ui/input](https://npm.io/package/@arch-ui/input.md) ^0.1.0 - [@arch-ui/theme](https://npm.io/package/@arch-ui/theme.md) ^0.0.5 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.4.3 - [@arch-ui/fields](https://npm.io/package/@arch-ui/fields.md) ^2.0.1 - [@arch-ui/tooltip](https://npm.io/package/@arch-ui/tooltip.md) ^0.1.2 - [image-extensions](https://npm.io/package/image-extensions.md) ^1.1.0 - [@arch-ui/typography](https://npm.io/package/@arch-ui/typography.md) ^0.0.8 - [get-selection-range](https://npm.io/package/get-selection-range.md) ^0.1.0 - [@arch-ui/color-utils](https://npm.io/package/@arch-ui/color-utils.md) ^0.0.1 - [@keystone-alpha/utils](https://npm.io/package/@keystone-alpha/utils.md) ^3.2.0 - [@keystone-alpha/fields](https://npm.io/package/@keystone-alpha/fields.md) ^15.0.0 - [slate-drop-or-paste-images](https://npm.io/package/slate-drop-or-paste-images.md) ^0.9.1 - [@keystone-alpha/build-field-types](https://npm.io/package/@keystone-alpha/build-field-types.md) ^1.0.6 ## Recent versions - 3.1.4 (latest) — 2019-10-23 - 3.1.3 — 2019-10-15 - 3.1.2 — 2019-10-02 - 3.1.1 — 2019-09-18 - 3.1.0 — 2019-09-17 - 3.0.1 — 2019-09-17 - 3.0.0 — 2019-09-12 - 2.1.0 — 2019-08-13 - 2.0.2 — 2019-07-19 - 2.0.1 — 2019-07-09 - 2.0.0 — 2019-07-08 - 1.0.0 — 2019-07-05 ## README # Content Field A Block-based Content Field for composing rich text such as blog posts, wikis, and even complete pages. The `Content` field type can accept an optional array of _Blocks_ which enhance the editing experience of that field in various ways. Built on top of Slate.js, _Blocks_ are a powerful tool for creating structured and unstructured content editing flows. ## Usage ```javascript keystone.createList('Post', { fields: { body: { type: Content, blocks: [Content.blocks.blockquote, CloudinaryImage.blocks.image], }, }, }); ``` ## API Each _Block_ is defined by the following API: ```javascript { // (required) // A globally unique name for this block. Alpha-num characters only. // NOTE: This must match the value exported from `getAdminViews()#type`. type: 'MyBlock', // (required) // The views this block will provide. // See below for the expected exports. // Blocks can insert/render other blocks (eg; an image gallery can insert // an image block). These other block views should also be included here. getAdminViews: () => ['/absolute/path/to/built/view/file'], // (optional) // The server-side serialization implementation logic. // If not provided, any data included in the block will be serialised and // stored as a string in the database, and passed directly back to the // slate.js editor client side. // NOTE: See getAdminViews()#serialiser for complimentary client-side logic implementation: SingleImageBlock, // TODO: The client-side serialization implementation logic. } ``` The view files referenced from the `getAdminViews()` option can have the following exports: ```javascript // (required) // A globally unique name for this block. Alpha-num characters only. // NOTE: This must match the value exported from the Block config .type export const type = 'MyBlock'; // (required) // The element rendered into the slate.js editor. // Is passed all the props a slate.js `renderNode()` receives. export const Node = /* ... */; // (optional) // A button / element to insert into the side bar when it's opened. // Will be passed a single prop; `editor` which is an instance of the Slate.js // editor. export const Sidebar = /* ... */; // (optional) // The individual button which shows in the toolbar export const ToolbarElement = /* ... */; // (optional) // Toolbar overwrite. Useful if clicking the button needs to show more info. // Will be rendered within the toolbar, and passed {children} which is the // regular toolbar. It can opt to not render the {children} so the entire // toolbar is replaced with this element. export const Toolbar = /* ... */; // (optional) // Wraps the entire Content Editor. The value is the options object passed to // the block from the field config. // TODO: Can we skip this and instead pass the options into each of the above // views directly? export const Provider = /* ... */; // (optional) // slate.js schema object, injected into the slate.js schema as: // { // document: { /* .. */ }, // blocks: { // [type]: , // }, // } export const schema = /* ... */; // (optional) // slate.js plugins array. export const plugins = /* ... */; // (optional) // export function processNodeForConnectQuery({ id, node }) { return { node, query } }; ``` --- _Source: https://npm.io/package/@keystone-alpha/field-content · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._