enhance: replace placeholder with css (#15)

huozhi · Jan 25, 2025 · f037e6d · f037e6d
1 parent b093a06
commit f037e6d
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 10 deletions.
diff --git a/src/code/code.test.tsx b/src/code/code.test.tsx
@@ -47,7 +47,7 @@ describe('Code', () => {
       [data-codice-code] .sh__line[data-highlight] {
         background-color: var(--codice-code-highlight-color);
       }
-      </style><div data-codice-editor-header="true"><style data-codice-style="true">[data-codice-editor-header] {
+      </style><div data-codice-editor-header="true" data-codice-editor-header-controls="false"><style data-codice-style="true">[data-codice-editor-header] {
         position: relative;
         display: flex;
         padding: 16px 22px 8px;
@@ -70,6 +70,9 @@ describe('Code', () => {
       [data-codice-editor-header] [data-codice-editor-controls-placeholder] {
         width: 52px;
       }
+      [data-codice-editor-header-controls="true"] [data-codice-editor-title] {
+        padding-right: 52px;
+      }
       [data-codice-editor-header] [data-codice-editor-control] {
         display: flex;
         width: 10px;
@@ -102,7 +105,7 @@ describe('Code', () => {
       [data-codice-code] .sh__line[data-highlight] {
         background-color: var(--codice-code-highlight-color);
       }
-      </style><div data-codice-editor-header="true"><style data-codice-style="true">[data-codice-editor-header] {
+      </style><div data-codice-editor-header="true" data-codice-editor-header-controls="true"><style data-codice-style="true">[data-codice-editor-header] {
         position: relative;
         display: flex;
         padding: 16px 22px 8px;
@@ -125,6 +128,9 @@ describe('Code', () => {
       [data-codice-editor-header] [data-codice-editor-controls-placeholder] {
         width: 52px;
       }
+      [data-codice-editor-header-controls="true"] [data-codice-editor-title] {
+        padding-right: 52px;
+      }
       [data-codice-editor-header] [data-codice-editor-control] {
         display: flex;
         width: 10px;
@@ -133,7 +139,7 @@ describe('Code', () => {
         border-radius: 50%;
         background-color: var(--codice-editor-control-color);
       }
-      </style><div data-codice-editor-controls="true"><span data-codice-editor-control="true"></span><span data-codice-editor-control="true"></span><span data-codice-editor-control="true"></span></div><span data-codice-editor-controls-placeholder="true"></span></div><pre data-codice-code-content="true"><code><span class="sh__line"><span class="sh__token--identifier" style="color:var(--sh-identifier)">test</span></span></code></pre></div>"
+      </style><div data-codice-editor-controls="true"><span data-codice-editor-control="true"></span><span data-codice-editor-control="true"></span><span data-codice-editor-control="true"></span></div></div><pre data-codice-code-content="true"><code><span class="sh__line"><span class="sh__token--identifier" style="color:var(--sh-identifier)">test</span></span></code></pre></div>"
     `)
   })
 })
diff --git a/src/code/code.tsx b/src/code/code.tsx
@@ -64,9 +64,12 @@ function generateHighlightedLines(
 
 export function CodeHeader({ title, controls = false }: { title?: string; controls: boolean }) {
   if (!title && !controls) return null
-  // TODO: migrate inline css
+
   return (
-    <div data-codice-editor-header>
+    <div 
+      data-codice-editor-header
+      data-codice-editor-header-controls={controls}
+    >
       <style data-codice-style>{headerCss}</style>
       {controls ? (
         <div data-codice-editor-controls>
@@ -76,7 +79,6 @@ export function CodeHeader({ title, controls = false }: { title?: string; contro
         </div>
       ) : null}
       {title ? <div data-codice-editor-title>{title}</div> : null}
-      {controls ? <span data-codice-editor-controls-placeholder /> : null}
     </div>
   )
 }

diff --git a/src/code/css.ts b/src/code/css.ts
@@ -46,6 +46,9 @@ ${H} [data-codice-editor-controls],
 ${H} [data-codice-editor-controls-placeholder] {
   width: 52px;
 }
+[data-codice-editor-header-controls="true"] [data-codice-editor-title] {
+  padding-right: 52px;
+}
 ${H} [data-codice-editor-control] {
   display: flex;
   width: 10px;

diff --git a/src/editor/editor.test.tsx b/src/editor/editor.test.tsx
@@ -59,7 +59,7 @@ describe('Code', () => {
       [data-codice-editor][data-codice-editor-line-numbers="true"] textarea {
         padding-left: 55px;
       }
-      </style><div data-codice-editor-header="true"><style data-codice-style="true">[data-codice-editor-header] {
+      </style><div data-codice-editor-header="true" data-codice-editor-header-controls="true"><style data-codice-style="true">[data-codice-editor-header] {
         position: relative;
         display: flex;
         padding: 16px 22px 8px;
@@ -82,6 +82,9 @@ describe('Code', () => {
       [data-codice-editor-header] [data-codice-editor-controls-placeholder] {
         width: 52px;
       }
+      [data-codice-editor-header-controls="true"] [data-codice-editor-title] {
+        padding-right: 52px;
+      }
       [data-codice-editor-header] [data-codice-editor-control] {
         display: flex;
         width: 10px;
@@ -90,7 +93,7 @@ describe('Code', () => {
         border-radius: 50%;
         background-color: var(--codice-editor-control-color);
       }
-      </style><div data-codice-editor-controls="true"><span data-codice-editor-control="true"></span><span data-codice-editor-control="true"></span><span data-codice-editor-control="true"></span></div><span data-codice-editor-controls-placeholder="true"></span></div><div data-codice-editor-content="true"><div data-codice-code="true"><style data-codice-style="true">[data-codice-code] {
+      </style><div data-codice-editor-controls="true"><span data-codice-editor-control="true"></span><span data-codice-editor-control="true"></span><span data-codice-editor-control="true"></span></div></div><div data-codice-editor-content="true"><div data-codice-code="true"><style data-codice-style="true">[data-codice-code] {
         --codice-code-line-number-color: #a4a4a4;
         --codice-code-highlight-color: #555555;
       }
@@ -184,7 +187,7 @@ describe('Code', () => {
       [data-codice-editor][data-codice-editor-line-numbers="true"] textarea {
         padding-left: 55px;
       }
-      </style><div data-codice-editor-header="true"><style data-codice-style="true">[data-codice-editor-header] {
+      </style><div data-codice-editor-header="true" data-codice-editor-header-controls="true"><style data-codice-style="true">[data-codice-editor-header] {
         position: relative;
         display: flex;
         padding: 16px 22px 8px;
@@ -207,6 +210,9 @@ describe('Code', () => {
       [data-codice-editor-header] [data-codice-editor-controls-placeholder] {
         width: 52px;
       }
+      [data-codice-editor-header-controls="true"] [data-codice-editor-title] {
+        padding-right: 52px;
+      }
       [data-codice-editor-header] [data-codice-editor-control] {
         display: flex;
         width: 10px;
@@ -215,7 +221,7 @@ describe('Code', () => {
         border-radius: 50%;
         background-color: var(--codice-editor-control-color);
       }
-      </style><div data-codice-editor-controls="true"><span data-codice-editor-control="true"></span><span data-codice-editor-control="true"></span><span data-codice-editor-control="true"></span></div><div data-codice-editor-title="true">file.js</div><span data-codice-editor-controls-placeholder="true"></span></div><div data-codice-editor-content="true"><div data-codice-code="true"><style data-codice-style="true">[data-codice-code] {
+      </style><div data-codice-editor-controls="true"><span data-codice-editor-control="true"></span><span data-codice-editor-control="true"></span><span data-codice-editor-control="true"></span></div><div data-codice-editor-title="true">file.js</div></div><div data-codice-editor-content="true"><div data-codice-code="true"><style data-codice-style="true">[data-codice-code] {
         --codice-code-line-number-color: #a4a4a4;
         --codice-code-highlight-color: #555555;
       }