fix: render default inline object as a span

portabletext · Jan 31, 2025 · e3821e2 · e3821e2
1 parent 52cda8d
commit e3821e2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/packages/editor/src/editor/components/DefaultObject.tsx b/packages/editor/src/editor/components/DefaultObject.tsx
@@ -1,6 +1,6 @@
 import type {PortableTextBlock, PortableTextChild} from '@sanity/types'
 
-export function DefaultObject(props: {
+export function DefaultBlockObject(props: {
   value: PortableTextBlock | PortableTextChild
 }) {
   return (
@@ -9,3 +9,13 @@ export function DefaultObject(props: {
     </div>
   )
 }
+
+export function DefaultInlineObject(props: {
+  value: PortableTextBlock | PortableTextChild
+}) {
+  return (
+    <span style={{userSelect: 'none'}}>
+      [{props.value._type}: {props.value._key}]
+    </span>
+  )
+}
diff --git a/packages/editor/src/editor/components/Element.tsx b/packages/editor/src/editor/components/Element.tsx
@@ -29,7 +29,7 @@ import type {
   RenderListItemFunction,
   RenderStyleFunction,
 } from '../../types/editor'
-import {DefaultObject} from './DefaultObject'
+import {DefaultBlockObject, DefaultInlineObject} from './DefaultObject'
 import {DraggableBlock} from './DraggableBlock'
 
 const debug = debugWithName('components:Element')
@@ -137,7 +137,7 @@ export const Element: FunctionComponent<ElementProps> = ({
             {renderChild &&
               renderChild({
                 annotations: EMPTY_ANNOTATIONS, // These inline objects currently doesn't support annotations. This is a limitation of the current PT spec/model.
-                children: <DefaultObject value={value} />,
+                children: <DefaultInlineObject value={value} />,
                 editorElementRef: inlineBlockObjectRef,
                 focused,
                 path: elmPath,
@@ -146,7 +146,7 @@ export const Element: FunctionComponent<ElementProps> = ({
                 type: schemaType,
                 value: value as PortableTextChild,
               })}
-            {!renderChild && <DefaultObject value={value} />}
+            {!renderChild && <DefaultInlineObject value={value} />}
           </span>
         </span>
       )
@@ -280,7 +280,7 @@ export const Element: FunctionComponent<ElementProps> = ({
   if (renderBlock) {
     const _props: Omit<BlockRenderProps, 'type'> = Object.defineProperty(
       {
-        children: <DefaultObject value={value} />,
+        children: <DefaultBlockObject value={value} />,
         editorElementRef: blockRef,
         focused,
         path: blockPath,
@@ -310,7 +310,7 @@ export const Element: FunctionComponent<ElementProps> = ({
           {renderedBlockFromProps ? (
             renderedBlockFromProps
           ) : (
-            <DefaultObject value={value} />
+            <DefaultBlockObject value={value} />
           )}
         </div>
       </DraggableBlock>