Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rostimelk/pt-string
Single line portable text
https://github.com/rostimelk/pt-string
Last synced: 2 months ago
JSON representation
Single line portable text
- Host: GitHub
- URL: https://github.com/rostimelk/pt-string
- Owner: RostiMelk
- License: mit
- Created: 2024-07-03T14:41:02.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-08-13T10:18:02.000Z (5 months ago)
- Last Synced: 2024-10-14T09:27:56.025Z (3 months ago)
- Language: TypeScript
- Size: 314 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# pt-string
[](https://www.npmjs.com/package/sanity-plugin-pt-string)
A single line portable text input.
> This is a **Sanity Studio v3** plugin.
## Installation
```sh
npm install sanity-plugin-pt-string
```
## Usage
Add it as a plugin in `sanity.config.ts` (or .js):
```ts
import {defineConfig} from 'sanity'
import {ptString} from 'sanity-plugin-pt-string'
export default defineConfig({
//...
plugins: [ptString()],
})
```
Use in your schema:
```ts
import {defineType} from 'sanity'
export default defineType({
name: 'myType',
type: 'document',
fields: [
{
name: 'myField',
type: 'pt-string',
title: 'My Field',
},
],
})
```
### Preview
Add a preview config your schema type: `schemaTypes/schema.ts`:
```ts
import {defineType, defineField} from 'sanity'
import {ptStringPreview} from 'sanity-plugin-pt-string'
export default defineType({
name: 'myType',
type: 'document',
fields: [
defineField({
name: 'myField',
type: 'pt-string',
title: 'My Field',
preview: ptStringPreview,
}),
],
preview: ptStringPreview('myField'),
})
```
### Options
Customize decorators by passing an object with the following properties:
```ts
import {defineType} from 'sanity'
export default defineType({
name: 'myType',
type: 'document',
fields: [
{
name: 'myField',
type: 'pt-string',
title: 'My Field',
options: {
decorators: [
{title: 'Strong', value: 'strong'},
{title: 'Emphasis', value: 'em'},
{title: 'Code', value: 'code'},
{title: 'Underline', value: 'underline'},
{title: 'Strike', value: 'strike-through'},
],
},
},
],
})
```
Add your own custom decorators:
```ts
import { defineType } from 'sanity';
import { HighlightIcon } from '@sanity/icons';
const HighlightDecorator = (props) => {props.children};
export default defineType({
name: 'myType',
type: 'document',
fields: [
{
name: 'myField',
type: 'pt-string',
title: 'My Field',
options: {
decorators: [
{ title: 'Strong', value: 'strong' },
{ title: 'Emphasis', value: 'em' },
{ title: 'Code', value: 'code' },
{ title: 'Underline', value: 'underline' },
{ title: 'Strike', value: 'strike-through' },
// Custom highlight decorator
{
title: 'Highlight',
value: 'highlight',
icon: HighlightIcon,
component: HighlightDecorator,
},
],
},
},
],
});
```
## Usage
The data is output as a Portable Text block. You can use the `PortableText` component from `@portabletext/react` to render it in React:
```tsx
import {PortableText} from '@portabletext/react'
const PortableTextParagraph = (props) => {
return
}
```
If you want to customize the rendering of the blocks, you can pass a `components` prop to the `PortableText` component. Following is an example of how to render your content within a `h2` tag:
```tsx
import {PortableText} from '@portabletext/react'
const components = {
block: {
normal: ({ children }) =>
{children}
}
}
const PortableTextHeading = (props) => {
return
}
```
## Migrations
See the migration script inside ./migrations/transformStringToPortableText.js of this Repo.
Follow the instructions inside the script and set the \_type and field name you wish to target.
Please take a backup first!
## License
[MIT](LICENSE) © Rostislav Melkumyan
## Develop & test
This plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)
with default configuration for build & watch scripts.
See [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)
on how to run this plugin with hotreload in the studio.