feat(pte): add hideToolbar and fullscreen props to `PortableTextI…

…nput` (#6621) * feat(form/inputs): add prop to hide the toolbar in PT-input * feat(form/inputs): control PT-input fullscreen from props * chore(test-studio): add example document type with custom block editor variants * refactor: rename `fullscreen` to `initialFullscreen` * refactor: don't unnecessarily alias `initialFullscreen` prop --------- Co-authored-by: Per-Kristian Nordnes <per.kristian.nordnes@gmail.com>
sanity-io · May 14, 2024 · 800149f · 800149f
1 parent 5f0227c
commit 800149f
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 2 deletions.
diff --git a/dev/test-studio/schema/index.ts b/dev/test-studio/schema/index.ts
@@ -96,6 +96,7 @@ import numbers from './standard/numbers'
 import objects, {myObject} from './standard/objects'
 import {ptAllTheBellsAndWhistlesType} from './standard/portableText/allTheBellsAndWhistles'
 import blocks from './standard/portableText/blocks'
+import {ptCustomBlockEditors} from './standard/portableText/customBlockEditors'
 import {ptCustomMarkersTestType} from './standard/portableText/customMarkers'
 import manyEditors from './standard/portableText/manyEditors'
 import richTextObject from './standard/portableText/richTextObject'
@@ -159,6 +160,7 @@ export const schemaTypes = [
   objects,
   ptAllTheBellsAndWhistlesType,
   blocks,
+  ptCustomBlockEditors,
   ptCustomMarkersTestType,
   richTextObject,
   ...Object.values(scrollBugTypes),

diff --git a/dev/test-studio/schema/standard/portableText/customBlockEditors.tsx b/dev/test-studio/schema/standard/portableText/customBlockEditors.tsx
@@ -0,0 +1,40 @@
+import {BlockEditor, defineType, type PortableTextInputProps} from 'sanity'
+
+export const ptCustomBlockEditors = defineType({
+  name: 'pt_customBlockEditors',
+  title: 'BlockEditor examples',
+  type: 'document',
+  fields: [
+    {
+      name: 'title',
+      title: 'Title',
+      type: 'string',
+    },
+    {
+      name: 'default',
+      title: 'Default',
+      type: 'array',
+      of: [{type: 'block'}],
+    },
+    {
+      name: 'hiddenToolbar',
+      title: 'Hidden toolbar',
+      description: 'hideToolbar=true',
+      type: 'array',
+      components: {
+        input: (props: PortableTextInputProps) => <BlockEditor {...props} hideToolbar />,
+      },
+      of: [{type: 'block'}],
+    },
+    {
+      name: 'readOnly',
+      title: 'Read only',
+      description: 'readOnly=true',
+      type: 'array',
+      components: {
+        input: (props: PortableTextInputProps) => <BlockEditor {...props} readOnly />,
+      },
+      of: [{type: 'block'}],
+    },
+  ],
+})
diff --git a/dev/test-studio/structure/constants.ts b/dev/test-studio/structure/constants.ts
@@ -23,6 +23,7 @@ export const STANDARD_PORTABLE_TEXT_INPUT_TYPES = [
   'simpleBlock',
   'manyEditors',
   'documentWithHoistedPt',
+  'pt_customBlockEditors',
 ]
 
 export const PLUGIN_INPUT_TYPES = [

diff --git a/packages/sanity/src/core/form/inputs/PortableText/Compositor.tsx b/packages/sanity/src/core/form/inputs/PortableText/Compositor.tsx
@@ -30,6 +30,7 @@ import {TextBlock} from './text'
 interface InputProps extends ArrayOfObjectsInputProps<PortableTextBlock> {
   elementRef: React.RefObject<HTMLDivElement>
   hasFocusWithin: boolean
+  hideToolbar?: boolean
   hotkeys?: HotkeyOptions
   isActive: boolean
   isFullscreen: boolean
@@ -54,6 +55,7 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
     focused,
     focusPath = EMPTY_ARRAY,
     hasFocusWithin,
+    hideToolbar,
     hotkeys,
     isActive,
     isFullscreen,
@@ -392,6 +394,7 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
         ariaDescribedBy={ariaDescribedBy}
         elementRef={elementRef}
         initialSelection={initialSelection}
+        hideToolbar={hideToolbar}
         hotkeys={editorHotkeys}
         isActive={isActive}
         isFullscreen={isFullscreen}
@@ -420,6 +423,7 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
       editorRenderChild,
       elementRef,
       handleToggleFullscreen,
+      hideToolbar,
       initialSelection,
       isActive,
       isFullscreen,

diff --git a/packages/sanity/src/core/form/inputs/PortableText/Editor.tsx b/packages/sanity/src/core/form/inputs/PortableText/Editor.tsx
@@ -52,6 +52,7 @@ const PlaceholderWrapper = styled.span((props) => {
 
 interface EditorProps {
   elementRef: React.RefObject<HTMLDivElement>
+  hideToolbar?: boolean
   hotkeys: HotkeyOptions
   initialSelection?: EditorSelection
   isActive: boolean
@@ -89,6 +90,7 @@ const renderListItem: RenderListItemFunction = (props) => {
 export function Editor(props: EditorProps): ReactNode {
   const {
     elementRef,
+    hideToolbar,
     hotkeys,
     initialSelection,
     isActive,
@@ -192,7 +194,7 @@ export function Editor(props: EditorProps): ReactNode {
 
   return (
     <Root data-fullscreen={isFullscreen} data-testid="pt-editor">
-      {isActive && (
+      {isActive && !hideToolbar && (
         <TooltipDelayGroupProvider>
           <ToolbarCard data-testid="pt-editor__toolbar-card" shadow={1}>
             <Toolbar

diff --git a/packages/sanity/src/core/form/inputs/PortableText/PortableTextInput.tsx b/packages/sanity/src/core/form/inputs/PortableText/PortableTextInput.tsx
@@ -81,6 +81,7 @@ export function PortableTextInput(props: PortableTextInputProps): ReactNode {
     editorRef: editorRefProp,
     elementProps,
     hotkeys,
+    initialFullscreen,
     markers = EMPTY_ARRAY,
     onChange,
     onCopy,
@@ -118,7 +119,7 @@ export function PortableTextInput(props: PortableTextInputProps): ReactNode {
   const {t} = useTranslation()
   const [ignoreValidationError, setIgnoreValidationError] = useState(false)
   const [invalidValue, setInvalidValue] = useState<InvalidValue | null>(null)
-  const [isFullscreen, setIsFullscreen] = useState(false)
+  const [isFullscreen, setIsFullscreen] = useState(initialFullscreen ?? false)
   const [isActive, setIsActive] = useState(false)
   const [isOffline, setIsOffline] = useState(false)
   const [hasFocusWithin, setHasFocusWithin] = useState(false)

diff --git a/packages/sanity/src/core/form/types/inputProps.ts b/packages/sanity/src/core/form/types/inputProps.ts
@@ -507,10 +507,18 @@ export interface PortableTextInputProps
    * A React Ref that can reference the underlying editor instance
    */
   editorRef?: React.MutableRefObject<PortableTextEditor | null>
+  /**
+   * Option to hide the default toolbar
+   */
+  hideToolbar?: boolean
   /**
    * Assign hotkeys that can be attached to custom editing functions
    */
   hotkeys?: HotkeyOptions
+  /**
+   * Whether the input is _initially_ open in fullscreen mode
+   */
+  initialFullscreen?: boolean
   /**
    * Array of {@link PortableTextMarker} with meta data connected to the content.
    * @deprecated will be removed in the next major version of Sanity Studio.