issue #661: v3: code first for easy editing and then display result

C2DH · Dec 13, 2024 · 0c50a36 · 0c50a36
1 parent 4704fbb
commit 0c50a36
Showing 1 changed file with 23 additions and 9 deletions.
diff --git a/src/components/ArticleV3/ArticleCell.js b/src/components/ArticleV3/ArticleCell.js
@@ -54,6 +54,7 @@ const ArticleCell = ({
     (d) => typeof d.metadata === 'object' && d.metadata['text/html']?.isolated,
   )
   const renderUsingThebe = type === CellTypeCode && !figure?.isSound; //tags.includes('data');
+  const isCover = isFigure && figure?.isCover;
 
   // const ref = useCallback(
   //   (node) => {
@@ -97,6 +98,25 @@ const ArticleCell = ({
   return (
     <div className={`ArticleCell ${layer}`} onClick={onClick}>
       <Container fluid={layer === LayerData} className={containerClassNames.join(' ')}>
+        {type === CellTypeCode && !isCover && renderUsingThebe && (
+          <Row>
+            <Col xs={7} className="code">
+              <React.Suspense fallback={<div>loading...</div>}>
+                <ArticleCellSourceCodeWrapper
+                  cellIdx={idx}
+                  toggleVisibility={false}
+                  visible={false}
+                  readOnly={!ready}
+                />
+              </React.Suspense>
+            </Col>
+
+            <Col xs={5} className="p-2">
+              <ArticleCellCodeTools cellIdx={idx} source={source} />
+            </Col>
+          </Row>
+        )}
+
         {(outputs.length > 0 || errors) && (
           <Row>
             <Col
@@ -172,24 +192,18 @@ const ArticleCell = ({
           </Row>
         )}
 
-        {type === CellTypeCode && (!isFigure || !figure?.isCover) && (
+        {type === CellTypeCode && !isCover && !renderUsingThebe && (
           <Row>
-            <Col xs={!renderUsingThebe ? 12 : 7} className="code">
+            <Col xs={12} className="code">
               <React.Suspense fallback={<div>loading...</div>}>
                 <ArticleCellSourceCodeWrapper
                   cellIdx={idx}
-                  toggleVisibility={!renderUsingThebe}
+                  toggleVisibility={true}
                   visible={false}
                   readOnly={!ready}
                 />
               </React.Suspense>
             </Col>
-
-            {renderUsingThebe && (
-              <Col xs={5} className="p-2">
-                <ArticleCellCodeTools cellIdx={idx} source={source} />
-              </Col>
-            )}
           </Row>
         )}
       </Container>