ndimatteo / sanity-plugin-note-field

Custom Note Fields for Sanity

Note Fields for Sanity

Display inline notes within your schemas
✨ uses Sanity UI ✨ multiple styles ✨ dark mode compatible ✨

🔌 Install

yarn add sanity-plugin-note-field
# or npm
npm i sanity-plugin-note-field

Warning
This is a Sanity Studio V3 plugin. For the V2 version, please refer to the studio-v2 branch.

⚙️ Configure

// `sanity.config.ts` / `sanity.config.js`:
import { defineConfig } from 'sanity'
import { noteField } from 'sanity-plugin-note-field'

export default defineConfig({
  // ...
  plugins: [
    // ...
    noteField(),
  ],
})

🗒️ Usage

defineField({
  title: 'Important!',
  description: 'a custom Message...',
  name: 'myCustomNote',
  type: 'note',
  options: {
    icon: () => <Warning size={20} weight="duotone" />,
    tone: 'caution',
  },
})

Properties

Name	Type	Description
type	string	(Required) Value must be set to note.
name	string	(Required) The field name. This will be the key in the data record.
title	string	(Optional) Short title, appears in bold above the optional description.
description	string / React.Component	(Optional) Long form message, displayed under the title.

Options

Name	Type	Description
icon	React.Component	(Optional) Display an icon alongside your note's title/message. Just remember that any schema file with icons in them should have a .jsx or .tsx extension.
tone	string	(Optional) The color of the note. Accepts any of the Sanity UI Card tone values. Defaults to primary.

🧪 Develop & test

This plugin uses @sanity/plugin-kit with default configuration for build & watch scripts.

See Testing a plugin in Sanity Studio on how to run this plugin with hotreload in the studio.

🤝 License

MIT

nickdimatteo.com  ·  Github @ndimatteo  ·  Instagram @ndimatteo

sanity-plugin-note-field's Issues

Upgrade to Sanity Studio v3

It would be great to see this plugin be compatible with Sanity Studio v3

Custom Html Message

Hello Matteo,

I have been using your plugin for almost a year now, but since, v3 the Notes block has been giving me issues.
i used render a custom html element in the message of the note, is there any alternative for this in v3.

Thank you for you time

Crashes when used with @sanity/color-input

Got below error and scratched my head for a good 2 hours before realizing it was because of having installed the plugin @sanity/color-input which for some reason I cannot figure out clashes with using note-field, even though I am not even using a type: "color" input in the same schema, simply including the plugin in sanity.json leads to the desk crashing.

My usage of note-field, removing this from this type stops the form from crashing:

{
  name: "note",
  type: "note",
  localize: false,
  options: {
    message:
      "Keep title short, as it will be shown in a very tiny space. Usually 1 word is preferred.",
    tone: "transparent"
  },
},

My sanity.json:

{
  "root": true,
  "project": {
    "name": "..."
  },
  "api": {
    "projectId": "...",
    "dataset": "..."
  },
  "plugins": [
    "@sanity/base",
    "@sanity/components",
    "@sanity/default-layout",
    "@sanity/default-login",
    "@sanity/desk-tool",
    "@sanity/color-input",
    "studio-logo",
    "note-field",
    "create-logo",
    "default-preview",
    "translations"
  ],
  "env": {
    "development": {
      "plugins": [
        "@sanity/vision"
      ]
    }
  },
  "parts": [
    {
      "name": "part:@sanity/base/schema",
      "path": "./schemas/schema"
    },
    {
      "implements": "part:@sanity/base/theme/variables/override-style",
      "path": "variableOverrides.css"
    },
    {
      "name": "part:@sanity/desk-tool/structure",
      "path": "./deskStructure.js"
    }
  ]
}

Stack trace:
Error: Can only set one of `children` or `props.dangerouslySetInnerHTML`.
    at assertValidProps (/static/js/vendor.bundle.js:8118:15)
    at setInitialProperties (/static/js/vendor.bundle.js:9402:3)
    at finalizeInitialChildren (/static/js/vendor.bundle.js:10876:3)
    at completeWork (/static/js/vendor.bundle.js:22355:17)
    at completeUnitOfWork (/static/js/vendor.bundle.js:25569:16)
    at performUnitOfWork (/static/js/vendor.bundle.js:25542:12)
    at workLoopSync (/static/js/vendor.bundle.js:25507:22)
    at performSyncWorkOnRoot (/static/js/vendor.bundle.js:25133:9)
    at http://localhost:3333/static/js/vendor.bundle.js:14466:24
    at unstable_runWithPriority (/static/js/vendor.bundle.js:29135:12)
Component stack:
    in div (created by styled.div)
    in styled.div (created by ForwardRef(Text2))
    in ForwardRef(Text2) (created by ForwardRef)
    in div (created by ForwardRef(Inline2))
    in div (created by styled.div)
    in styled.div (created by ForwardRef(Box2))
    in ForwardRef(Box2) (created by Styled(Component))
    in Styled(Component) (created by ForwardRef(Inline2))
    in ForwardRef(Inline2) (created by ForwardRef)
    in div (created by styled.div)
    in styled.div (created by ForwardRef(Box2))
    in ForwardRef(Box2) (created by Styled(Component))
    in Styled(Component) (created by ForwardRef(Card2))
    in Fe (created by ThemeProvider)
    in ThemeProvider (created by ThemeColorProvider)
    in ThemeColorProvider (created by ForwardRef(Card2))
    in ForwardRef(Card2) (created by ForwardRef)
    in ForwardRef (created by FormBuilderInputInner)
    in ChangeIndicatorProvider (created by FormBuilderInputInner)
    in div (created by FormBuilderInputInner)
    in FormBuilderInputInner (created by FormBuilderInput)
    in FormBuilderInput (created by ForwardRef(ObjectInputField))
    in ConditionalField (created by ForwardRef(ObjectInputField))
    in ForwardRef(ObjectInputField) (created by ForwardRef(ObjectInput))
    in div (created by styled.div)
    in styled.div (created by ForwardRef(Box2))
    in ForwardRef(Box2) (created by Styled(Component))
    in Styled(Component) (created by ForwardRef(Grid2))
    in ForwardRef(Grid2) (created by ForwardRef(ObjectInput))
    in ForwardRef(ObjectInput)
    in ForwardRef(ObjectInput) (created by FormBuilderInputInner)
    in ChangeIndicatorProvider (created by FormBuilderInputInner)
    in div (created by FormBuilderInputInner)
    in FormBuilderInputInner (created by FormBuilderInput)
    in FormBuilderInput (created by SanityFormBuilder)
    in FormBuilderContext (created by SanityFormBuilderContext)
    in SanityFormBuilderContext (created by SanityFormBuilder)
    in SanityFormBuilder (created by EditForm)
    in form (created by EditForm)
    in EditForm (created by FormView)
    in div (created by ForwardRef(RegionsWithIntersections))
    in div (created by ForwardRef(RegionsWithIntersections))
    in ForwardRef(RegionsWithIntersections) (created by StickyOverlay)
    in StickyOverlay (created by OverlayEnabled)
    in Tracker (created by OverlayEnabled)
    in OverlayEnabled (created by FormView)
    in div (created by FormView)
    in FormView (created by DocumentPanel)
    in div (created by ForwardRef(ScrollContainer))
    in ForwardRef(ScrollContainer) (created by DocumentPanel)
    in div (created by DocumentPanel)
    in BoundaryElementProvider (created by DocumentPanel)
    in PortalProvider (created by DocumentPanel)
    in div (created by styled.div)
    in styled.div (created by ForwardRef(Box2))
    in ForwardRef(Box2) (created by Styled(Component))
    in Styled(Component) (created by ForwardRef(Card2))
    in Fe (created by ThemeProvider)
    in ThemeProvider (created by ThemeColorProvider)
    in ThemeColorProvider (created by ForwardRef(Card2))
    in ForwardRef(Card2) (created by DocumentPanel)
    in DocumentPanel (created by DocumentPane)
    in div (created by DocumentPane)
    in div (created by ForwardRef(ScrollContainer))
    in ForwardRef(ScrollContainer) (created by EnabledChangeConnectorRoot)
    in Tracker (created by EnabledChangeConnectorRoot)
    in EnabledChangeConnectorRoot (created by DocumentPane)
    in DialogProvider (created by DocumentPane)
    in div (created by KeyboardShortcutResponder)
    in KeyboardShortcutResponder (created by GetHookCollectionState)
    in GetHookCollectionState (created by RenderActionCollectionState)
    in RenderActionCollectionState (created by DocumentActionShortcuts)
    in DocumentActionShortcuts (created by DocumentPane)
    in LayerProvider (created by LegacyLayerProvider)
    in LegacyLayerProvider (created by DocumentPane)
    in DocumentPane (created by DocumentPaneProvider)
    in DocumentHistoryProvider (created by DocumentPaneProvider)
    in DocumentPaneProvider
    in StreamingComponent
    in StreamingComponent (created by Context.Consumer)
    in WithInitialValueWrapper (created by DeskToolPane)
    in DeskToolPane (created by DeskToolPanes)
    in SplitPaneWrapper (created by DeskToolPanes)
    in div (created by Pane)
    in Pane (created by SplitPane)
    in div (created by SplitPane)
    in SplitPane (created by PanesSplitController)
    in div (created by PanesSplitController)
    in div (created by Pane)
    in Pane (created by SplitPane)
    in div (created by SplitPane)
    in SplitPane (created by PanesSplitController)
    in div (created by PanesSplitController)
    in div (created by Pane)
    in Pane (created by SplitPane)
    in div (created by SplitPane)
    in SplitPane (created by PanesSplitController)
    in div (created by PanesSplitController)
    in div (created by Pane)
    in Pane (created by SplitPane)
    in div (created by SplitPane)
    in SplitPane (created by PanesSplitController)
    in div (created by PanesSplitController)
    in PanesSplitController (created by DeskToolPanes)
    in PortalProvider (created by DeskToolPanes)
    in div (created by styled.div)
    in styled.div (created by DeskToolPanes)
    in DeskToolPanes (created by DeskTool)
    in DeskTool (created by withRouter(DeskTool))
    in withRouter(DeskTool) (created by DeskToolPaneStateSyncer)
    in DeskToolPaneStateSyncer (created by DeskTool)
    in DeskToolFeaturesProvider (created by DeskTool)
    in DeskTool (created by RenderTool)
    in RenderTool (created by SchemaErrorReporter)
    in RouteScope (created by SchemaErrorReporter)
    in div (created by SchemaErrorReporter)
    in div (created by SchemaErrorReporter)
    in div (created by SchemaErrorReporter)
    in SchemaErrorReporter (created by DefaultLayout)
    in DefaultLayout (created by withRouter(DefaultLayout))
    in withRouter(DefaultLayout) (created by DefaultLayoutRoot)
    in RouterProvider (created by DefaultLayoutRoot)
    in LoginWrapper (created by DefaultLayoutRoot)
    in DefaultLayoutRoot (created by AppProvider)
    in div (created by styled.div)
    in styled.div (created by ForwardRef(Box2))
    in ForwardRef(Box2) (created by Styled(Component))
    in Styled(Component) (created by ForwardRef(Card2))
    in Fe (created by ThemeProvider)
    in ThemeProvider (created by ThemeColorProvider)
    in ThemeColorProvider (created by ForwardRef(Card2))
    in ForwardRef(Card2) (created by Styled(Component))
    in Styled(Component) (created by AppProvider)
    in SnackbarProvider (created by AppProvider)
    in ToastProvider (created by AppProvider)
    in LayerProvider (created by AppProvider)
    in PortalProvider (created by AppProvider)
    in UserColorManagerProvider (created by AppProvider)
    in AppProvider (created by SanityRoot)
    in Fe (created by ThemeProvider)
    in ThemeProvider (created by SanityRoot)
    in ZIndexProvider (created by SanityRoot)
    in SanityRoot
    in AppContainer

Deploying a studio with this plugin on netlify breaks.

Netlify is a case sensitive platform, so when this plugin fails to build the studio as the import is lodash/startcase and not lodash/startCase.

Optional class/id attribute

First off, great little plugin!

One small issue. It's purely aesthetic. The way Sanity spaces the fields in the form makes it feel like these notes aren't directly related to the field they're above. I'd like to bring the bottom margin down on these notes, so they look more like they're a part of the field for which they're noting, but there's currently no reliable identifier on the markup to hook into.

Can you please give the outer Card element a specific class name like sanity-plugin-note-field or let us add our own classes to the rendered Card element?

And before you say open a pull request, I probably will not. This seems simple enough to get around to whenever you can get around to it. Correct me if I'm wrong though. Maybe it's not trivial. ¯_(ツ)_/¯

It's a subtle change, but I think it makes a big difference.

Thanks!

HTML code is rendered as plain text

HTML code is rendered as plain text. Maybe sanity changed its behaviour to prevent html-code injected?

Uncaught error

Hey Matteo - I get the below error when i try to add this plugin to my sanity config/schema.

The defineField is being added within a defineType type:'document'.

When i add the defineField, the below error occurs.

Uncaught error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

console-export-2024-2-21_12-52-9.txt

Node: v18.16.0
Sanity: v30.0.0

Any insight would be helpful.