From 932d1601f7ac98ecd204ef02627df22008b84d0f Mon Sep 17 00:00:00 2001
From: Per-Kristian Nordnes <per.kristian.nordnes@gmail.com>
Date: Tue, 31 Oct 2023 12:08:59 +0100
Subject: [PATCH] wip

---
 dev/test-studio/sanity.config.ts              |   2 +
 .../src/editor/Editable.tsx                   |   9 +-
 .../src/editor/PortableTextEditor.tsx         |   6 +-
 .../editor/plugins/createWithEditableAPI.ts   |   3 +
 .../portable-text-editor/src/types/editor.ts  |   4 +-
 packages/sanity/exports/scratchPad.ts         |   1 +
 packages/sanity/package.json                  |  15 ++
 .../form/inputs/PortableText/Compositor.tsx   |  10 +-
 .../core/form/types/definitionExtensions.ts   |   2 +-
 .../sanity/src/scratchPad/components/Form.tsx | 190 ++++++++++++++++++
 .../src/scratchPad/components/Layout.tsx      |  27 +++
 .../sanity/src/scratchPad/components/Root.tsx |  15 ++
 .../components/assistant/Assistant.tsx        |  77 +++++++
 .../components/editor/AssistanceRange.tsx     |  19 ++
 .../scratchPad/components/editor/Editable.tsx | 164 +++++++++++++++
 .../scratchPad/components/editor/Input.tsx    |  44 ++++
 .../components/rendering/renderBlock.tsx      |  65 ++++++
 .../sanity/src/scratchPad/config/index.ts     |  38 ++++
 .../scratchPad/context/ScratchPadProvider.tsx | 166 +++++++++++++++
 .../src/scratchPad/hooks/useScratchPad.tsx    |  12 ++
 packages/sanity/src/scratchPad/index.ts       |   1 +
 .../sanity/src/scratchPad/scratchPadTool.ts   |  32 +++
 .../src/scratchPad/utils/toAssistantText.ts   |  27 +++
 23 files changed, 909 insertions(+), 20 deletions(-)
 create mode 100644 packages/sanity/exports/scratchPad.ts
 create mode 100644 packages/sanity/src/scratchPad/components/Form.tsx
 create mode 100644 packages/sanity/src/scratchPad/components/Layout.tsx
 create mode 100644 packages/sanity/src/scratchPad/components/Root.tsx
 create mode 100644 packages/sanity/src/scratchPad/components/assistant/Assistant.tsx
 create mode 100644 packages/sanity/src/scratchPad/components/editor/AssistanceRange.tsx
 create mode 100644 packages/sanity/src/scratchPad/components/editor/Editable.tsx
 create mode 100644 packages/sanity/src/scratchPad/components/editor/Input.tsx
 create mode 100644 packages/sanity/src/scratchPad/components/rendering/renderBlock.tsx
 create mode 100644 packages/sanity/src/scratchPad/config/index.ts
 create mode 100644 packages/sanity/src/scratchPad/context/ScratchPadProvider.tsx
 create mode 100644 packages/sanity/src/scratchPad/hooks/useScratchPad.tsx
 create mode 100644 packages/sanity/src/scratchPad/index.ts
 create mode 100644 packages/sanity/src/scratchPad/scratchPadTool.ts
 create mode 100644 packages/sanity/src/scratchPad/utils/toAssistantText.ts

diff --git a/dev/test-studio/sanity.config.ts b/dev/test-studio/sanity.config.ts
index 12c708ed827..8f0aba9936a 100644
--- a/dev/test-studio/sanity.config.ts
+++ b/dev/test-studio/sanity.config.ts
@@ -17,6 +17,7 @@ import {schemaTypes} from './schema'
 import {defaultDocumentNode, newDocumentOptions, structure} from './structure'
 import {workshopTool} from './workshop'
 import {presenceTool} from './plugins/presence'
+import {scratchPadTool} from 'sanity/scratchPad'
 import {
   CustomLayout,
   CustomLogo,
@@ -85,6 +86,7 @@ const sharedSettings = definePlugin({
       structure,
       defaultDocumentNode,
     }),
+    scratchPadTool(),
     languageFilter({
       defaultLanguages: ['nb'],
       supportedLanguages: [
diff --git a/packages/@sanity/portable-text-editor/src/editor/Editable.tsx b/packages/@sanity/portable-text-editor/src/editor/Editable.tsx
index b90f1017d67..faffa2465b8 100644
--- a/packages/@sanity/portable-text-editor/src/editor/Editable.tsx
+++ b/packages/@sanity/portable-text-editor/src/editor/Editable.tsx
@@ -1,12 +1,5 @@
 import {BaseRange, Transforms, Text, NodeEntry, Range as SlateRange} from 'slate'
-import React, {
-  forwardRef,
-  KeyboardEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
+import React, {forwardRef, KeyboardEvent, useCallback, useEffect, useMemo, useState} from 'react'
 import {
   Editable as SlateEditable,
   ReactEditor,
diff --git a/packages/@sanity/portable-text-editor/src/editor/PortableTextEditor.tsx b/packages/@sanity/portable-text-editor/src/editor/PortableTextEditor.tsx
index 2a9c922d65f..5cd15d7a645 100644
--- a/packages/@sanity/portable-text-editor/src/editor/PortableTextEditor.tsx
+++ b/packages/@sanity/portable-text-editor/src/editor/PortableTextEditor.tsx
@@ -103,7 +103,7 @@ export class PortableTextEditor extends React.Component<PortableTextEditorProps>
     super(props)
 
     if (!props.schemaType) {
-      throw new Error('PortableTextEditor: missing "type" property')
+      throw new Error('PortableTextEditor: missing "schemaType" property')
     }
 
     if (props.incomingPatches$) {
@@ -271,4 +271,8 @@ export class PortableTextEditor extends React.Component<PortableTextEditorProps>
     debug(`Host toggling mark`, mark)
     editor.editable?.toggleMark(mark)
   }
+  static getFragment = (editor: PortableTextEditor): PortableTextBlock[] | undefined => {
+    debug(`Host getting fragment`)
+    return editor.editable?.getFragment()
+  }
 }
diff --git a/packages/@sanity/portable-text-editor/src/editor/plugins/createWithEditableAPI.ts b/packages/@sanity/portable-text-editor/src/editor/plugins/createWithEditableAPI.ts
index a7b6a1b444a..086818f35f2 100644
--- a/packages/@sanity/portable-text-editor/src/editor/plugins/createWithEditableAPI.ts
+++ b/packages/@sanity/portable-text-editor/src/editor/plugins/createWithEditableAPI.ts
@@ -484,6 +484,9 @@ export function createWithEditableAPI(
         editor.insertBreak()
         editor.onChange()
       },
+      getFragment: () => {
+        return fromSlateValue(editor.getFragment(), types.block.name)
+      },
     })
     return editor
   }
diff --git a/packages/@sanity/portable-text-editor/src/types/editor.ts b/packages/@sanity/portable-text-editor/src/types/editor.ts
index 8dc8a1e0369..4830aab6b0f 100644
--- a/packages/@sanity/portable-text-editor/src/types/editor.ts
+++ b/packages/@sanity/portable-text-editor/src/types/editor.ts
@@ -18,7 +18,8 @@ import {
 import {Subject, Observable} from 'rxjs'
 import {Descendant, Node as SlateNode, Operation as SlateOperation} from 'slate'
 import {ReactEditor} from 'slate-react'
-import {FocusEvent} from 'react'
+import {FocusEvent, PropsWithChildren, ReactElement} from 'react'
+import {DOMNode} from 'slate-react/dist/utils/dom'
 import type {Patch} from '../types/patch'
 import {PortableTextEditor} from '../editor/PortableTextEditor'
 
@@ -42,6 +43,7 @@ export interface EditableAPI {
   focusBlock: () => PortableTextBlock | undefined
   focusChild: () => PortableTextChild | undefined
   getSelection: () => EditorSelection
+  getFragment: () => PortableTextBlock[] | undefined
   getValue: () => PortableTextBlock[] | undefined
   hasBlockStyle: (style: string) => boolean
   hasListStyle: (listStyle: string) => boolean
diff --git a/packages/sanity/exports/scratchPad.ts b/packages/sanity/exports/scratchPad.ts
new file mode 100644
index 00000000000..d5ef8baa155
--- /dev/null
+++ b/packages/sanity/exports/scratchPad.ts
@@ -0,0 +1 @@
+export * from '../src/scratchPad'
diff --git a/packages/sanity/package.json b/packages/sanity/package.json
index cb04a1e2115..4d86ff71162 100644
--- a/packages/sanity/package.json
+++ b/packages/sanity/package.json
@@ -77,6 +77,17 @@
       "import": "./lib/router.esm.js",
       "default": "./lib/router.esm.js"
     },
+    "./scratchPad": {
+      "types": "./lib/exports/scratchPad.d.ts",
+      "source": "./exports/scratchPad.ts",
+      "require": "./lib/scratchPad.js",
+      "node": {
+        "import": "./lib/scratchPad.cjs.mjs",
+        "require": "./lib/scratchPad.js"
+      },
+      "import": "./lib/scratchPad.esm.js",
+      "default": "./lib/scratchPad.esm.js"
+    },
     "./package.json": "./package.json"
   },
   "main": "./lib/index.js",
@@ -94,6 +105,9 @@
       "desk": [
         "./lib/exports/desk.d.ts"
       ],
+      "scratchPad": [
+        "./lib/exports/scratchPad.d.ts"
+      ],
       "router": [
         "./lib/exports/router.d.ts"
       ]
@@ -107,6 +121,7 @@
     "bin",
     "cli.js",
     "desk.js",
+    "scratchPad.js",
     "lib",
     "router.js",
     "src",
diff --git a/packages/sanity/src/core/form/inputs/PortableText/Compositor.tsx b/packages/sanity/src/core/form/inputs/PortableText/Compositor.tsx
index 392dfc16d4e..0f50f3f5de6 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/Compositor.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/Compositor.tsx
@@ -163,6 +163,7 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
       renderInput,
       renderItem,
       renderPreview,
+      scrollElement,
     ],
   )
 
@@ -410,7 +411,6 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
     [
       ariaDescribedBy,
       editorHotkeys,
-      editorHotkeys,
       isActive,
       isFullscreen,
       onItemOpen,
@@ -423,15 +423,7 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
       editorRenderAnnotation,
       editorRenderBlock,
       editorRenderChild,
-      handleToggleFullscreen,
       initialSelection,
-      isActive,
-      isFullscreen,
-      onCopy,
-      onItemOpen,
-      onPaste,
-      path,
-      readOnly,
       scrollElement,
     ],
   )
diff --git a/packages/sanity/src/core/form/types/definitionExtensions.ts b/packages/sanity/src/core/form/types/definitionExtensions.ts
index 24fd59a88b3..99326975de6 100644
--- a/packages/sanity/src/core/form/types/definitionExtensions.ts
+++ b/packages/sanity/src/core/form/types/definitionExtensions.ts
@@ -45,7 +45,7 @@ export interface ArrayOfObjectsComponents {
   diff?: ComponentType<any>
   field?: ComponentType<ArrayFieldProps>
   inlineBlock?: ComponentType<BlockProps>
-  input?: ComponentType<ArrayOfObjectsInputProps>
+  input?: ComponentType<ArrayOfObjectsInputProps | PortableTextInputProps>
   item?: ComponentType<ObjectItemProps>
   preview?: ComponentType<PreviewProps>
 }
diff --git a/packages/sanity/src/scratchPad/components/Form.tsx b/packages/sanity/src/scratchPad/components/Form.tsx
new file mode 100644
index 00000000000..d19d8e5852c
--- /dev/null
+++ b/packages/sanity/src/scratchPad/components/Form.tsx
@@ -0,0 +1,190 @@
+import {Path, Schema, ValidationContext, ValidationMarker} from '@sanity/types'
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {validateDocument} from '../../core/validation'
+import {applyAll} from '../../core/form/patch/applyPatch'
+import {useScratchPad} from '../hooks/useScratchPad'
+import {
+  EMPTY_ARRAY,
+  FormBuilder,
+  FormBuilderProps,
+  getExpandOperations,
+  noop,
+  PatchEvent,
+  setAtPath,
+  StateTree,
+  useFormState,
+} from 'sanity'
+
+export function ScratchPadForm({schema}: {schema: Schema}) {
+  const [validation, setValidation] = useState<ValidationMarker[]>([])
+  const [openPath, onSetOpenPath] = useState<Path>([])
+  const [fieldGroupState, onSetFieldGroupState] = useState<StateTree<string>>()
+  const [collapsedPaths, onSetCollapsedPath] = useState<StateTree<boolean>>()
+  const [collapsedFieldSets, onSetCollapsedFieldSets] = useState<StateTree<boolean>>()
+  const {patchChannel, document, setDocument} = useScratchPad()
+  const [focusPath, setFocusPath] = useState<Path>(() => [])
+
+  useEffect(() => {
+    patchChannel.publish({
+      type: 'mutation',
+      patches: [],
+      snapshot: document,
+    })
+  }, [document, patchChannel])
+
+  const schemaType = schema.get('scratchPadDocument')
+
+  if (!schemaType) {
+    throw new Error('missing schema type')
+  }
+
+  if (schemaType.jsonType !== 'object') {
+    throw new Error('schema type is not an object')
+  }
+
+  useEffect(() => {
+    validateStaticDocument(document, schema, (result) => setValidation(result))
+  }, [document, schema])
+
+  const formState = useFormState(schemaType, {
+    focusPath,
+    collapsedPaths,
+    collapsedFieldSets,
+    comparisonValue: null,
+    fieldGroupState,
+    openPath,
+    presence: EMPTY_ARRAY,
+    validation,
+    value: document,
+  })
+
+  const formStateRef = useRef(formState)
+  formStateRef.current = formState
+
+  const handleFocus = useCallback(
+    (nextFocusPath: Path) => {
+      setFocusPath(nextFocusPath)
+    },
+    [setFocusPath],
+  )
+
+  const handleBlur = useCallback(() => {
+    setFocusPath([])
+  }, [setFocusPath])
+
+  const patchRef = useRef<(event: PatchEvent) => void>(() => {
+    throw new Error('Nope')
+  })
+
+  patchRef.current = (event: PatchEvent) => {
+    setDocument((currentDocumentValue) => applyAll(currentDocumentValue, event.patches))
+  }
+
+  const handleChange = useCallback((event: any) => patchRef.current(event), [])
+
+  const handleOnSetCollapsedPath = useCallback((path: Path, collapsed: boolean) => {
+    onSetCollapsedPath((prevState) => setAtPath(prevState, path, collapsed))
+  }, [])
+
+  const handleOnSetCollapsedFieldSet = useCallback((path: Path, collapsed: boolean) => {
+    onSetCollapsedFieldSets((prevState) => setAtPath(prevState, path, collapsed))
+  }, [])
+
+  const handleSetActiveFieldGroup = useCallback(
+    (path: Path, groupName: string) =>
+      onSetFieldGroupState((prevState) => setAtPath(prevState, path, groupName)),
+    [],
+  )
+
+  const setOpenPath = useCallback(
+    (path: Path) => {
+      const ops = getExpandOperations(formStateRef.current!, path)
+      ops.forEach((op) => {
+        if (op.type === 'expandPath') {
+          onSetCollapsedPath((prevState) => setAtPath(prevState, op.path, false))
+        }
+        if (op.type === 'expandFieldSet') {
+          onSetCollapsedFieldSets((prevState) => setAtPath(prevState, op.path, false))
+        }
+        if (op.type === 'setSelectedGroup') {
+          onSetFieldGroupState((prevState) => setAtPath(prevState, op.path, op.groupName))
+        }
+      })
+      onSetOpenPath(path)
+    },
+    [formStateRef],
+  )
+
+  const formBuilderProps: FormBuilderProps = useMemo(
+    () => ({
+      // eslint-disable-next-line camelcase
+      __internal_patchChannel: patchChannel,
+      changed: false,
+      changesOpen: false,
+      collapsedFieldSets: undefined,
+      collapsedPaths: undefined,
+      focused: formState?.focused,
+      focusPath: formState?.focusPath || EMPTY_ARRAY,
+      groups: formState?.groups || EMPTY_ARRAY,
+      id: formState?.id || '',
+      level: formState?.level || 0,
+      members: formState?.members || EMPTY_ARRAY,
+      onChange: handleChange,
+      onFieldGroupSelect: noop,
+      onPathBlur: handleBlur,
+      onPathFocus: handleFocus,
+      onPathOpen: setOpenPath,
+      onSelectFieldGroup: handleSetActiveFieldGroup,
+      onSetFieldSetCollapsed: handleOnSetCollapsedFieldSet,
+      onSetPathCollapsed: handleOnSetCollapsedPath,
+      path: EMPTY_ARRAY,
+      presence: EMPTY_ARRAY,
+      schemaType: formState?.schemaType || schemaType,
+      validation,
+      value: formState?.value,
+    }),
+    [
+      formState?.focusPath,
+      formState?.focused,
+      formState?.groups,
+      formState?.id,
+      formState?.level,
+      formState?.members,
+      formState?.schemaType,
+      formState?.value,
+      handleBlur,
+      handleChange,
+      handleFocus,
+      handleOnSetCollapsedFieldSet,
+      handleOnSetCollapsedPath,
+      handleSetActiveFieldGroup,
+      patchChannel,
+      schemaType,
+      setOpenPath,
+      validation,
+    ],
+  )
+
+  return <FormBuilder {...formBuilderProps} />
+}
+
+async function validateStaticDocument(
+  document: any,
+  schema: any,
+  setCallback: (result: ValidationMarker[]) => void,
+) {
+  const result = await validateDocument(getClient, document, schema)
+  setCallback(result)
+}
+
+const client = createMockSanityClient() as any as ReturnType<ValidationContext['getClient']>
+const getClient = (options: {apiVersion: string}) => client
+
+export function createMockSanityClient() {
+  const _client = {
+    fetch: (query: string) => Promise.resolve(null) as Promise<any>,
+    withConfig: () => _client,
+  }
+
+  return _client
+}
diff --git a/packages/sanity/src/scratchPad/components/Layout.tsx b/packages/sanity/src/scratchPad/components/Layout.tsx
new file mode 100644
index 00000000000..0210df35a67
--- /dev/null
+++ b/packages/sanity/src/scratchPad/components/Layout.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import {Card} from '@sanity/ui'
+import {Pane, PaneContent, PaneLayout} from '../../desk/components'
+import {schema} from '../config'
+import {ScratchPadAssistant} from './assistant/Assistant'
+import {ScratchPadForm} from './Form'
+
+export default function ScratchPadLayout() {
+  return (
+    <PaneLayout height="fill">
+      <Pane id="scratch-pad-input-pane">
+        <PaneContent>
+          <Card padding={3}>
+            <ScratchPadForm schema={schema} />
+          </Card>
+        </PaneContent>
+      </Pane>
+      <Pane id="scratch-pad-assistant-pane">
+        <PaneContent>
+          <Card padding={3}>
+            <ScratchPadAssistant />
+          </Card>
+        </PaneContent>
+      </Pane>
+    </PaneLayout>
+  )
+}
diff --git a/packages/sanity/src/scratchPad/components/Root.tsx b/packages/sanity/src/scratchPad/components/Root.tsx
new file mode 100644
index 00000000000..7dfd5535927
--- /dev/null
+++ b/packages/sanity/src/scratchPad/components/Root.tsx
@@ -0,0 +1,15 @@
+import React, {useRef} from 'react'
+import {PortableTextEditor} from '@sanity/portable-text-editor'
+import {ScratchPadProvider} from '../context/ScratchPadProvider'
+import ScratchPadLayout from './Layout'
+
+export default function ScratchPadRoot() {
+  const editorRef = useRef<PortableTextEditor | null>(null)
+  const assistantPromptRef = useRef<HTMLTextAreaElement | null>(null)
+
+  return (
+    <ScratchPadProvider editorRef={editorRef} assistantPromptRef={assistantPromptRef}>
+      <ScratchPadLayout />
+    </ScratchPadProvider>
+  )
+}
diff --git a/packages/sanity/src/scratchPad/components/assistant/Assistant.tsx b/packages/sanity/src/scratchPad/components/assistant/Assistant.tsx
new file mode 100644
index 00000000000..cbf688c8b82
--- /dev/null
+++ b/packages/sanity/src/scratchPad/components/assistant/Assistant.tsx
@@ -0,0 +1,77 @@
+import {Box, Card, TextArea} from '@sanity/ui'
+import React, {useEffect, useState} from 'react'
+import {PortableTextBlock} from '@sanity/types'
+import {keyGenerator} from '@sanity/portable-text-editor'
+import {useScratchPad} from '../../hooks/useScratchPad'
+import {fragmentToAssistantText} from '../../utils/toAssistantText'
+
+export interface AssistantResponse {
+  key: string
+  response: string
+  fragment: {
+    text: string | undefined
+    portableText: PortableTextBlock[] | undefined
+  } | null
+}
+
+const DESCRIPTIONS = [
+  'swell',
+  'not that good to be honest',
+  'marvelous',
+  'really hitting the nail',
+  'something else',
+  'excellent',
+  'just right',
+  'brave',
+  'boring',
+  'explaining this too complicated',
+  'too full of buzzwords',
+]
+
+const FIRST_RESPONSE: AssistantResponse = {
+  key: 'first',
+  response: "Hey, I'm a AI assistant and here to help you with your content.",
+  fragment: null,
+}
+
+export function ScratchPadAssistant() {
+  const {assistanceFragment, assistantPromptRef} = useScratchPad()
+  const [assistantResponses, setAssistantResponses] = useState<AssistantResponse[]>([
+    FIRST_RESPONSE,
+  ])
+
+  useEffect(() => {
+    const text = fragmentToAssistantText(assistanceFragment)
+    if (text) {
+      setAssistantResponses((prevState) => [
+        ...prevState,
+        {
+          key: keyGenerator(),
+          response: `Your text "${text}" is ${
+            DESCRIPTIONS[Math.floor(Math.random() * DESCRIPTIONS.length)]
+          }.`,
+          fragment: {portableText: assistanceFragment, text},
+        },
+      ])
+    }
+  }, [assistanceFragment])
+
+  return (
+    <>
+      <Card marginTop={4}>
+        <Box>
+          <ul>
+            {assistantResponses.map((item) => (
+              <li key={`response-${item.key}`}>
+                <Box>{item.response}</Box>
+              </li>
+            ))}
+          </ul>
+        </Box>
+      </Card>
+      <Card marginTop={4}>
+        <TextArea placeholder="Ask or instruct the assistant" ref={assistantPromptRef} />
+      </Card>
+    </>
+  )
+}
diff --git a/packages/sanity/src/scratchPad/components/editor/AssistanceRange.tsx b/packages/sanity/src/scratchPad/components/editor/AssistanceRange.tsx
new file mode 100644
index 00000000000..124b94d0c3d
--- /dev/null
+++ b/packages/sanity/src/scratchPad/components/editor/AssistanceRange.tsx
@@ -0,0 +1,19 @@
+import {useTheme} from '@sanity/ui'
+import React, {PropsWithChildren, useCallback} from 'react'
+import {useScratchPad} from '../../hooks/useScratchPad'
+
+export const AssistanceRange = (props: PropsWithChildren) => {
+  const theme = useTheme()
+  const {onAssistanceRangeSelect} = useScratchPad()
+  const color = theme.sanity.color.solid.positive.enabled.bg
+
+  const handleClick = useCallback(() => {
+    onAssistanceRangeSelect(null)
+  }, [onAssistanceRangeSelect])
+
+  return (
+    <span style={{backgroundColor: color, backgroundBlendMode: 'multiply'}} onClick={handleClick}>
+      {props.children}
+    </span>
+  )
+}
diff --git a/packages/sanity/src/scratchPad/components/editor/Editable.tsx b/packages/sanity/src/scratchPad/components/editor/Editable.tsx
new file mode 100644
index 00000000000..45f80731c8c
--- /dev/null
+++ b/packages/sanity/src/scratchPad/components/editor/Editable.tsx
@@ -0,0 +1,164 @@
+import React, {PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {Stack} from '@sanity/ui'
+import {
+  BlockDecoratorRenderProps,
+  BlockRenderProps,
+  BlockStyleRenderProps,
+  PortableTextEditable,
+  PortableTextEditor,
+  RangeDecoration,
+  usePortableTextEditor,
+  usePortableTextEditorSelection,
+} from '@sanity/portable-text-editor'
+import styled, {css} from 'styled-components'
+import {debounce} from 'lodash'
+import isHotkey from 'is-hotkey'
+import {useScratchPad} from '../../hooks/useScratchPad'
+import {ScratchPadContextValue} from '../../context/ScratchPadProvider'
+import {PortableTextInputProps} from '../../../core'
+import {TextBlock} from '../rendering/renderBlock'
+import {Style} from '../../../core/form/inputs/PortableText/text/Style'
+import {Decorator} from '../../../core/form/inputs/PortableText/text'
+import {AssistanceRange} from './AssistanceRange'
+
+const INLINE_STYLE: React.CSSProperties = {outline: 'none'}
+const MODIFIER_KEY = 'Alt+Control'
+
+const EditableWrapStack = styled(Stack)(() => {
+  return css`
+    & > div:first-child {
+      [data-slate-node='element']:not(:last-child) {
+        margin-bottom: 1em; // todo: improve
+      }
+    }
+  `
+})
+
+interface EditableProps {
+  formProps: PortableTextInputProps
+  onBlur?: (e: React.FormEvent<HTMLDivElement>) => void
+  onFocus?: (e: React.FormEvent<HTMLDivElement>) => void
+  onKeyDown?: (e: React.KeyboardEvent<Element>) => void
+  placeholder?: React.ReactNode
+}
+
+export function Editable(props: EditableProps) {
+  const {placeholder = 'Write down your ideas', onFocus, onBlur, onKeyDown, formProps} = props
+  const rootElementRef = useRef<HTMLDivElement | null>(null)
+  const editableRef = useRef<HTMLDivElement | null>(null)
+  const editor = usePortableTextEditor()
+  const editorSelection = usePortableTextEditorSelection()
+  const [modifierKeyPressed, setIsModifierKeyPressed] = useState(false)
+
+  const {onEditorBeforeInput, onAssistanceRangeSelect, assistanceSelection, editorFocused} =
+    useScratchPad()
+
+  const rangeDecorations: RangeDecoration[] = useMemo(
+    () => [
+      {
+        isRangeInvalid: () => false,
+        component: (componentProps: PropsWithChildren) => (
+          <AssistanceRange>{componentProps.children}</AssistanceRange>
+        ),
+        selection: assistanceSelection,
+      },
+    ],
+    [assistanceSelection],
+  )
+
+  const renderPlaceholder = useCallback(() => <span>{placeholder}</span>, [placeholder])
+
+  const handleSetAssistantRangeKey = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (isHotkey(MODIFIER_KEY, event)) {
+      setIsModifierKeyPressed(true)
+    }
+  }, [])
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      handleSetAssistantRangeKey(event)
+      if (onKeyDown) {
+        onKeyDown(event)
+      }
+    },
+    [handleSetAssistantRangeKey, onKeyDown],
+  )
+
+  const handleKeyUp = useCallback(() => {
+    setIsModifierKeyPressed(false)
+  }, [])
+
+  // Update the assistance selection when user is done selecting something, and modifier key is pressed
+  useEffect(() => {
+    createAssistSelectionDebounced(editor, onAssistanceRangeSelect)
+  }, [editor, modifierKeyPressed, onAssistanceRangeSelect])
+
+  // These render functions piggybacks on the PT-input's rendering components
+  const _renderBlock = useCallback(
+    (editorRenderProps: BlockRenderProps) => {
+      if (!rootElementRef.current) {
+        return <></>
+      }
+      return (
+        <TextBlock
+          formProps={formProps}
+          blockProps={editorRenderProps}
+          boundaryElement={rootElementRef.current}
+          scrollElement={rootElementRef.current}
+        />
+      )
+    },
+    [formProps],
+  )
+
+  const _renderDecorator = useCallback((editorRenderProps: BlockDecoratorRenderProps) => {
+    return <Decorator {...editorRenderProps} />
+  }, [])
+
+  const _renderStyle = useCallback((editorRenderProps: BlockStyleRenderProps) => {
+    return <Style {...editorRenderProps} />
+  }, [])
+
+  return (
+    <EditableWrapStack ref={rootElementRef} data-ui="EditableWrapStack">
+      <PortableTextEditable
+        onBeforeInput={onEditorBeforeInput}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        onKeyDown={handleKeyDown}
+        onKeyUp={handleKeyUp}
+        ref={editableRef}
+        renderBlock={_renderBlock}
+        renderDecorator={_renderDecorator}
+        // renderChild={renderChild}
+        // renderAnnotation={renderAnnotation}
+        renderStyle={_renderStyle}
+        rangeDecorations={rangeDecorations}
+        renderPlaceholder={renderPlaceholder}
+        style={INLINE_STYLE}
+      />
+    </EditableWrapStack>
+  )
+}
+
+// This debounced function will get the user selection,
+// after the user is done actively selecting, so we don't
+// give a new selection to the Assistant before the user
+// is done selecting (like when selecting with arrow-keys)
+const createAssistSelectionDebounced = debounce(
+  (
+    editor: PortableTextEditor,
+    onAssistanceRangeSelect: ScratchPadContextValue['onAssistanceRangeSelect'],
+  ) => {
+    const eligibleSelection =
+      (PortableTextEditor.isExpandedSelection(editor) && PortableTextEditor.getSelection(editor)) ||
+      null
+    if (!eligibleSelection) {
+      onAssistanceRangeSelect(null)
+      return
+    }
+    onAssistanceRangeSelect(eligibleSelection)
+  },
+  300,
+  {trailing: true, leading: false},
+)
diff --git a/packages/sanity/src/scratchPad/components/editor/Input.tsx b/packages/sanity/src/scratchPad/components/editor/Input.tsx
new file mode 100644
index 00000000000..4e5bedeb9ac
--- /dev/null
+++ b/packages/sanity/src/scratchPad/components/editor/Input.tsx
@@ -0,0 +1,44 @@
+import React, {useCallback} from 'react'
+import {Stack} from '@sanity/ui'
+import {EditorChange, Patch, PortableTextEditor} from '@sanity/portable-text-editor'
+import {PortableTextInputProps, SANITY_PATCH_TYPE} from '../../../core'
+import {useScratchPad} from '../../hooks/useScratchPad'
+import {Editable} from './Editable'
+
+export const ScratchPadInput = function ScratchPadInput(props: PortableTextInputProps) {
+  const {onChange, schemaType, value} = props
+
+  const {editorRef, onEditorFocus, onEditorBlur} = useScratchPad()
+
+  const handleEditorChange = useCallback(
+    (change: EditorChange) => {
+      if (change.type === 'mutation') {
+        onChange(toFormPatches(change.patches))
+      }
+      if (change.type === 'focus') {
+        onEditorFocus()
+      }
+      if (change.type === 'blur') {
+        onEditorBlur()
+      }
+    },
+    [onChange, onEditorBlur, onEditorFocus],
+  )
+
+  return (
+    <Stack data-testid="scratchpad-input">
+      <PortableTextEditor
+        onChange={handleEditorChange}
+        schemaType={schemaType}
+        value={value}
+        ref={editorRef}
+      >
+        <Editable formProps={props} />
+      </PortableTextEditor>
+    </Stack>
+  )
+}
+
+function toFormPatches(patches: any) {
+  return patches.map((p: Patch) => ({...p, patchType: SANITY_PATCH_TYPE}))
+}
diff --git a/packages/sanity/src/scratchPad/components/rendering/renderBlock.tsx b/packages/sanity/src/scratchPad/components/rendering/renderBlock.tsx
new file mode 100644
index 00000000000..5a79f511012
--- /dev/null
+++ b/packages/sanity/src/scratchPad/components/rendering/renderBlock.tsx
@@ -0,0 +1,65 @@
+import {BlockRenderProps} from '@sanity/portable-text-editor'
+import React from 'react'
+import {PortableTextTextBlock} from '@sanity/types'
+import {TextBlock as InputsTextBlock} from '../../../core/form/inputs/PortableText/text/TextBlock'
+import {PortableTextInputProps} from '../../../core'
+
+interface EditorRenderBlockProps {
+  blockProps: BlockRenderProps
+  formProps: PortableTextInputProps
+  boundaryElement: HTMLElement
+  scrollElement: HTMLElement
+}
+
+export const TextBlock = (props: EditorRenderBlockProps) => {
+  const {
+    children,
+    focused: blockFocused,
+    path: blockPath,
+    schemaType: blockSchemaType,
+    selected,
+    value: block,
+  } = props.blockProps
+  const {
+    onItemClose,
+    onItemOpen,
+    onItemRemove,
+    onPathFocus,
+    path,
+    readOnly,
+    renderAnnotation,
+    renderBlock,
+    renderField,
+    renderInlineBlock,
+    renderInput,
+    renderItem,
+    renderPreview,
+  } = props.formProps
+  const {boundaryElement, scrollElement} = props
+  return (
+    <InputsTextBlock
+      floatingBoundary={boundaryElement}
+      focused={blockFocused}
+      isFullscreen={false}
+      onItemClose={onItemClose}
+      onItemOpen={onItemOpen}
+      onItemRemove={onItemRemove}
+      onPathFocus={onPathFocus}
+      path={path.concat(blockPath)}
+      readOnly={readOnly}
+      referenceBoundary={scrollElement}
+      renderAnnotation={renderAnnotation}
+      renderBlock={renderBlock}
+      renderField={renderField}
+      renderInlineBlock={renderInlineBlock}
+      renderInput={renderInput}
+      renderItem={renderItem}
+      renderPreview={renderPreview}
+      schemaType={blockSchemaType}
+      selected={selected}
+      value={block as PortableTextTextBlock}
+    >
+      {children}
+    </InputsTextBlock>
+  )
+}
diff --git a/packages/sanity/src/scratchPad/config/index.ts b/packages/sanity/src/scratchPad/config/index.ts
new file mode 100644
index 00000000000..8e3de69184a
--- /dev/null
+++ b/packages/sanity/src/scratchPad/config/index.ts
@@ -0,0 +1,38 @@
+import {BoldIcon, ItalicIcon, LinkIcon} from '@sanity/icons'
+import {Schema} from '@sanity/schema'
+import {defineField, defineType} from '@sanity/types'
+import {ScratchPadInput} from '../components/editor/Input'
+import {fragmentToAssistantText} from '../utils/toAssistantText'
+
+const blockType = defineField({
+  type: 'block',
+  name: 'block',
+  validation: (Rule) =>
+    Rule.custom<any>((block) => {
+      const text = fragmentToAssistantText(block ? [block] : [])
+      return text.length === 1 ? 'Please write a longer paragraph.' : true
+    }),
+})
+
+export const portableTextType = defineType({
+  type: 'array',
+  name: 'portableText',
+  of: [blockType],
+  components: {
+    input: ScratchPadInput,
+  },
+})
+
+export const document = defineType({
+  type: 'object',
+  name: 'scratchPadDocument',
+  title: 'ScratchPad Document',
+  fields: [defineField(portableTextType)],
+})
+
+export const schema = Schema.compile({
+  name: 'scratchPad',
+  types: [document, portableTextType],
+})
+
+export const editorSchemaType = schema.get('portableText')
diff --git a/packages/sanity/src/scratchPad/context/ScratchPadProvider.tsx b/packages/sanity/src/scratchPad/context/ScratchPadProvider.tsx
new file mode 100644
index 00000000000..de3499dd37a
--- /dev/null
+++ b/packages/sanity/src/scratchPad/context/ScratchPadProvider.tsx
@@ -0,0 +1,166 @@
+import {EditorSelection, PortableTextEditor} from '@sanity/portable-text-editor'
+import React, {useCallback, useEffect, useMemo, useState} from 'react'
+import {PortableTextBlock, SanityDocument} from '@sanity/types'
+import {PatchChannel, createPatchChannel} from '../../core'
+
+export interface ScratchPadContextValue {
+  assistantPromptRef: React.MutableRefObject<HTMLTextAreaElement | null>
+  assistanceFragment: PortableTextBlock[] | undefined
+  assistanceSelection: EditorSelection
+  closeEditorToolbarMenu: () => void
+  document: SanityDocument
+  editorFocused: boolean
+  editorRef: React.MutableRefObject<PortableTextEditor | null>
+  editorToolbarMenuOpen: boolean
+  focusAssistantPrompt: () => void
+  focusEditor: () => void
+  onAssistanceRangeSelect: (selection: EditorSelection) => void
+  onEditorBeforeInput: (event: InputEvent) => void
+  onEditorBlur: () => void
+  onEditorFocus: () => void
+  openEditorToolbarMenu: () => void
+  patchChannel: PatchChannel
+  setDocument: React.Dispatch<React.SetStateAction<SanityDocument>>
+}
+
+export const ScratchPadContext = React.createContext<ScratchPadContextValue | null>(null)
+
+interface ScratchPadProviderProps {
+  assistantPromptRef: React.MutableRefObject<HTMLTextAreaElement | null>
+  children: React.ReactNode
+  editorRef: React.RefObject<PortableTextEditor | null>
+}
+
+export function ScratchPadProvider(props: ScratchPadProviderProps) {
+  const {children, editorRef, assistantPromptRef} = props
+  const [editorFocused, setEditorFocused] = useState(false)
+  const editor = editorRef.current
+
+  const patchChannel = useMemo(() => createPatchChannel(), [])
+
+  const [document, setDocument] = useState<SanityDocument>({
+    _id: '123',
+    _type: 'scratchPadDocument',
+    _createdAt: new Date().toISOString(),
+    _updatedAt: new Date().toISOString(),
+    _rev: '123',
+    portableText: [
+      {
+        _key: '123',
+        _type: 'block',
+        style: 'h1',
+        markDefs: [],
+        children: [
+          {
+            _key: 'abc',
+            _type: 'span',
+            text: 'My brainstorm',
+            marks: [],
+          },
+        ],
+      },
+    ],
+  })
+
+  // A content selection that the user has requested assistance with
+  const [assistanceSelection, setAssistanceSelection] = useState<EditorSelection | null>(null)
+
+  // A fragment (contents) of the assistanceSelection
+  const [assistanceFragment, setAssistanceFragment] = useState<PortableTextBlock[] | undefined>()
+
+  const [editorToolbarMenuOpen, setEditorToolbarMenuOpen] = useState<boolean>(false)
+
+  const focusEditor = useCallback(() => {
+    requestAnimationFrame(() => {
+      if (editor) {
+        PortableTextEditor.focus(editor)
+      }
+    })
+  }, [editor])
+
+  const focusAssistantPrompt = useCallback(() => {
+    assistantPromptRef.current?.focus()
+  }, [assistantPromptRef])
+
+  const closeEditorToolbarMenu = useCallback(() => {
+    requestAnimationFrame(() => setEditorToolbarMenuOpen(false))
+  }, [])
+
+  const onEditorFocus = useCallback((): void => {
+    setEditorFocused(true)
+  }, [])
+
+  const onEditorBlur = useCallback((): void => {
+    setEditorFocused(false)
+  }, [])
+
+  const openEditorToolbarMenu = useCallback(() => {
+    requestAnimationFrame(() => setEditorToolbarMenuOpen(true))
+  }, [])
+
+  const onEditorBeforeInput = useCallback((event: InputEvent): void => {
+    // eslint-disable-next-line no-console
+    // console.log('On editor beforeInput')
+  }, [])
+
+  const onAssistanceRangeSelect = useCallback(
+    (selection: EditorSelection): void => {
+      setAssistanceSelection(selection)
+      setTimeout(() => {
+        if (selection) {
+          focusAssistantPrompt()
+        }
+      }, 100)
+    },
+    [focusAssistantPrompt],
+  )
+
+  useEffect(() => {
+    if (assistanceSelection && editor) {
+      setAssistanceFragment(PortableTextEditor.getFragment(editor))
+    }
+  }, [assistanceSelection, editor])
+
+  const ctxValue = useMemo(
+    () =>
+      ({
+        assistanceFragment,
+        assistanceSelection,
+        assistantPromptRef,
+        closeEditorToolbarMenu,
+        document,
+        editorFocused,
+        editorRef,
+        editorToolbarMenuOpen,
+        focusAssistantPrompt,
+        focusEditor,
+        onAssistanceRangeSelect,
+        onEditorBeforeInput,
+        onEditorBlur,
+        onEditorFocus,
+        openEditorToolbarMenu,
+        patchChannel,
+        setDocument,
+      }) satisfies ScratchPadContextValue,
+    [
+      assistanceFragment,
+      assistanceSelection,
+      assistantPromptRef,
+      closeEditorToolbarMenu,
+      document,
+      editorFocused,
+      editorRef,
+      editorToolbarMenuOpen,
+      focusAssistantPrompt,
+      focusEditor,
+      onAssistanceRangeSelect,
+      onEditorBeforeInput,
+      onEditorBlur,
+      onEditorFocus,
+      openEditorToolbarMenu,
+      patchChannel,
+    ],
+  )
+
+  return <ScratchPadContext.Provider value={ctxValue}>{children}</ScratchPadContext.Provider>
+}
diff --git a/packages/sanity/src/scratchPad/hooks/useScratchPad.tsx b/packages/sanity/src/scratchPad/hooks/useScratchPad.tsx
new file mode 100644
index 00000000000..b421c8c3bf7
--- /dev/null
+++ b/packages/sanity/src/scratchPad/hooks/useScratchPad.tsx
@@ -0,0 +1,12 @@
+import {useContext} from 'react'
+import {ScratchPadContext, ScratchPadContextValue} from '../context/ScratchPadProvider'
+
+export function useScratchPad(): ScratchPadContextValue {
+  const ctx = useContext(ScratchPadContext)
+
+  if (!ctx) {
+    throw new Error('useScratchPad must be used within a ScratchPadProvider')
+  }
+
+  return ctx
+}
diff --git a/packages/sanity/src/scratchPad/index.ts b/packages/sanity/src/scratchPad/index.ts
new file mode 100644
index 00000000000..dbcfbbf6b8a
--- /dev/null
+++ b/packages/sanity/src/scratchPad/index.ts
@@ -0,0 +1 @@
+export * from './scratchPadTool'
diff --git a/packages/sanity/src/scratchPad/scratchPadTool.ts b/packages/sanity/src/scratchPad/scratchPadTool.ts
new file mode 100644
index 00000000000..4b11bf27515
--- /dev/null
+++ b/packages/sanity/src/scratchPad/scratchPadTool.ts
@@ -0,0 +1,32 @@
+import {BulbFilledIcon} from '@sanity/icons'
+import {lazy} from 'react'
+import {definePlugin} from 'sanity'
+
+const ScratchPadRoot = lazy(() => import('./components/Root'))
+
+export interface ScratchPadToolOptions {
+  icon?: React.ComponentType
+  name?: string
+  title?: string
+}
+
+export const scratchPadTool = definePlugin<ScratchPadToolOptions | void>((options) => ({
+  name: '@sanity/scratchpad-tool',
+  form: {
+    components: {
+      // No field like field
+      field: (fieldProps) => {
+        return fieldProps.children
+      },
+    },
+  },
+  tools: [
+    {
+      name: options?.name || 'scratchPad',
+      title: options?.title || 'Scratch Pad',
+      icon: options?.icon || BulbFilledIcon,
+      component: ScratchPadRoot,
+      options,
+    },
+  ],
+}))
diff --git a/packages/sanity/src/scratchPad/utils/toAssistantText.ts b/packages/sanity/src/scratchPad/utils/toAssistantText.ts
new file mode 100644
index 00000000000..aa85651f897
--- /dev/null
+++ b/packages/sanity/src/scratchPad/utils/toAssistantText.ts
@@ -0,0 +1,27 @@
+import {
+  PortableTextBlock,
+  PortableTextChild,
+  isPortableTextSpan,
+  isPortableTextTextBlock,
+} from '@sanity/types'
+
+export const fragmentToAssistantText = (fragment: PortableTextBlock[] | undefined): string => {
+  if (!fragment) {
+    return ''
+  }
+  return fragment
+    .map((block) => {
+      if (isPortableTextTextBlock(block)) {
+        return block.children
+          .map((child: PortableTextChild) => {
+            if (isPortableTextSpan(child)) {
+              return child.text
+            }
+            return `[${child._type || 'Object'}]`
+          })
+          .join('')
+      }
+      return `[${block._type || 'Object'}]`
+    })
+    .join('\n\n')
+}