From 0c50a36bfe70644f90640675170712a14ad498b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Reis?= <frederic.reis@uni.lu>
Date: Fri, 13 Dec 2024 14:43:40 +0100
Subject: [PATCH] issue #661: v3: code first for easy editing and then display
 result

---
 src/components/ArticleV3/ArticleCell.js | 32 ++++++++++++++++++-------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/ArticleV3/ArticleCell.js b/src/components/ArticleV3/ArticleCell.js
index 92824156..295caf71 100644
--- 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>