fix: Line numbers now align to code (#9)

plonegovbr · May 22, 2023 · 90c5eb8 · 90c5eb8
1 parent e8605bf
commit 90c5eb8
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git a/src/components/Blocks/Code/DefaultView.stories.jsx b/src/components/Blocks/Code/DefaultView.stories.jsx
@@ -4,7 +4,7 @@ import CodeView from './DefaultView';
 import Wrapper from '@plone/volto/storybook';
 
 const codePython =
-  'import requests\nresp = requests.get("https://plone.org")\nassert resp.status_code == 200';
+  'from Testing.makerequest import makerequest\nfrom zope.component.hooks import setSite\nimport transaction\n\n\napp = makerequest(app)\nsite = app.Plone\nsetSite(site)\n\n# Change admin password\nuser = "admin"\npassword = "verynotsecure"\napp.acl_users.users.updateUserPassword(user, password)\n\n\n# Persist changes\ntransaction.commit()\napp._p_jar.sync()';
 
 const codeLongLines =
   '# Code to show how wrap long lines would work\n\ntext = "This is a really, really, really, really long line including a lot of words and letters and a text that should not make any sense, but should be long, very long"\n\nprint(text)';

diff --git a/src/theme/main.less b/src/theme/main.less
@@ -4,6 +4,18 @@
 .block.code {
   > .code-block-wrapper {
     &.edit {
+      &.dark {
+        > textarea {
+          caret-color: #fff;
+        }
+      }
+
+      &.light {
+        > textarea {
+          caret-color: #657b83;
+        }
+      }
+
       > textarea {
         overflow: hidden;
         width: 100%;

diff --git a/src/theme/theme-dark.less b/src/theme/theme-dark.less
@@ -4,14 +4,14 @@ https://prismjs.com/download.html#themes=prism-twilight&languages=markup+css+cli
   code[class*='language-'],
   pre[class*='language-'] {
     background: 0 0;
+    caret-color: #fff;
     color: #fff;
     font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
     font-size: 1em;
     -webkit-hyphens: none;
     -moz-hyphens: none;
     -ms-hyphens: none;
     hyphens: none;
-    line-height: 1.5;
     -moz-tab-size: 4;
     -o-tab-size: 4;
     tab-size: 4;

diff --git a/src/theme/theme-light.less b/src/theme/theme-light.less
@@ -10,7 +10,6 @@ https://prismjs.com/download.html#themes=prism-solarizedlight&languages=markup+c
     -moz-hyphens: none;
     -ms-hyphens: none;
     hyphens: none;
-    line-height: 1.5;
     -moz-tab-size: 4;
     -o-tab-size: 4;
     tab-size: 4;