fix: preview is now dev-preview.17 compatible

sanity-io · Sep 15, 2022 · 58a75d9 · 58a75d9
1 parent ed69217
commit 58a75d9
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/src/PreviewCode.tsx b/src/PreviewCode.tsx
@@ -27,7 +27,7 @@ const PreviewInner = styled(Box)`
 
 export interface PreviewCodeProps {
   type?: CodeInputType
-  value?: CodeInputValue
+  value?: {selection?: CodeInputValue}
 }
 
 export default function PreviewCode(props: PreviewCodeProps) {
@@ -52,14 +52,15 @@ export default function PreviewCode(props: PreviewCodeProps) {
   const {value, type} = props
   const fixedLanguage = type?.options?.language
 
-  const mode = value?.language || fixedLanguage || 'text'
-  const AceEditor = useAceEditor()
+  const selection = value?.selection
+  const mode = selection?.language || fixedLanguage || 'text'
 
+  const AceEditor = useAceEditor()
   return (
     <PreviewContainer>
       <PreviewInner padding={4}>
         {AceEditor && (
-          <Suspense fallback={<div>Loading code editor...</div>}>
+          <Suspense fallback={<div>Loading code preview...</div>}>
             <AceEditor
               ref={aceEditorRef}
               focus={false}
@@ -73,10 +74,10 @@ export default function PreviewCode(props: PreviewCodeProps) {
               showPrintMargin={false}
               highlightActiveLine={false}
               cursorStart={-1}
-              value={(value && value.code) || ''}
+              value={selection?.code || ''}
               markers={
-                value && value.highlightedLines
-                  ? createHighlightMarkers(value.highlightedLines)
+                selection?.highlightedLines
+                  ? createHighlightMarkers(selection.highlightedLines)
                   : undefined
               }
               tabSize={2}

diff --git a/src/ace-editor/AceEditorLazy.tsx b/src/ace-editor/AceEditorLazy.tsx
@@ -12,7 +12,7 @@ export const AceEditorLazy = React.lazy(() => import('./editorSupport'))
 export function useAceEditor() {
   const [mounted, setMounted] = useState(false)
   useEffect(() => {
-    setMounted(true)
+    requestAnimationFrame(() => setMounted(true))
   }, [])
 
   return mounted ? AceEditorLazy : null

diff --git a/src/schema.tsx b/src/schema.tsx
@@ -59,6 +59,7 @@ export default defineType({
       return {
         title: value.filename || (value.language || 'unknown').toUpperCase(),
         media: getMedia(value?.language),
+        selection: value,
       }
     },
   },