From 90c5eb8d08fb6ac29fac4313fdf8f78d792d31d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89rico=20Andrei?= <ericof@gmail.com>
Date: Mon, 22 May 2023 12:30:54 +0200
Subject: [PATCH] fix: Line numbers now align to code (#9)

---
 src/components/Blocks/Code/DefaultView.stories.jsx |  2 +-
 src/theme/main.less                                | 12 ++++++++++++
 src/theme/theme-dark.less                          |  2 +-
 src/theme/theme-light.less                         |  1 -
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/Blocks/Code/DefaultView.stories.jsx b/src/components/Blocks/Code/DefaultView.stories.jsx
index a844d4f..912561e 100644
--- 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
index 0d96116..0ccfc74 100644
--- 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
index 4296302..53c7b5c 100644
--- a/src/theme/theme-dark.less
+++ b/src/theme/theme-dark.less
@@ -4,6 +4,7 @@ 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;
@@ -11,7 +12,6 @@ https://prismjs.com/download.html#themes=prism-twilight&languages=markup+css+cli
     -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
index ab2a598..bd6012a 100644
--- 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;