editor: fix code-block ui

apps/theme-builder/src/components/theme-builder/index.tsx

@@ -643,25 +643,13 @@ function exportTheme(theme: ThemeDefinition) {
     }),
     `${theme.id}.json`
   );
-  const confirmed = window.confirm(
-    "Do you also want to download code-block.css for this theme?"
-  );
-  if (confirmed) {
-    FileSaver.saveAs(
-      new Blob([theme.codeBlockCSS], {
-        type: "text/plain"
-      }),
-      `code-block.css`
-    );
-  }
 }
 
 function themeToJSON(theme: ThemeDefinition) {
   return JSON.stringify(
     {
       $schema: JSON_SCHEMA_URL,
-      ...theme,
-      codeBlockCSS: undefined
+      ...theme
     },
     undefined,
     2

packages/editor/src/extensions/attachment/component.tsx

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { Box, Text } from "@theme-ui/components";
 import { AttachmentWithProgress } from "./attachment";
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import { Icon } from "@notesnook/ui";
 import { Icons } from "../../toolbar/icons";
 import { SelectionBasedReactNodeViewProps } from "../react";
@@ -32,7 +32,6 @@ export function AttachmentComponent(
   const { editor, node, selected } = props;
   const { filename, size, progress } = node.attrs;
   const elementRef = useRef<HTMLSpanElement>();
-  const [isDragging, setIsDragging] = useState(false);
 
   return (
     <Box
@@ -58,9 +57,6 @@ export function AttachmentComponent(
         }
       }}
       title={filename}
-      onDragStart={() => setIsDragging(true)}
-      onDragEnd={() => setIsDragging(false)}
-      data-drag-handle
     >
       <Icon path={Icons.attachment} size={14} />
       <Text
@@ -87,7 +83,7 @@ export function AttachmentComponent(
         {progress ? `${progress}%` : formatBytes(size)}
       </Text>
       <DesktopOnly>
-        {selected && !isDragging && (
+        {selected && (
           <ToolbarGroup
             editor={editor}
             tools={

packages/editor/src/extensions/code-block/component.tsx

@@ -73,11 +73,11 @@ export function CodeblockComponent(
 
               "::selection,*::selection": {
                 bg: "background-selected",
-                color: "paragraph-selected"
+                color: "inherit"
               },
               "::-moz-selection,*::-moz-selection": {
                 bg: "background-selected",
-                color: "paragraph-selected"
+                color: "inherit"
               }
             },
             fontFamily: "monospace",
@@ -202,7 +202,7 @@ export function CodeblockComponent(
           location: "top",
           yOffset: 5
         }}
-        title="Change code block language"
+        title="Select language"
       >
         <LanguageSelector
           selectedLanguage={languageDefinition?.filename || "Plaintext"}
@@ -230,13 +230,12 @@ function LanguageSelector(props: LanguageSelectorProps) {
   const [languages, setLanguages] = useState(Languages);
 
   return (
-    <Popup title="Select language" onClose={onClose}>
+    <Popup onClose={onClose}>
       <Flex
         sx={{
           flexDirection: "column",
           height: 200,
           width: ["auto", 300],
-          overflowY: "auto",
           bg: "background"
         }}
       >
@@ -245,12 +244,11 @@ function LanguageSelector(props: LanguageSelectorProps) {
           placeholder="Search languages"
           sx={{
             width: "auto",
-            position: "sticky",
-            top: 0,
             bg: "background",
             mx: 2,
             p: "7px",
-            zIndex: 999
+            zIndex: 999,
+            mt: 1
           }}
           onChange={(e) => {
             if (!e.target.value) return setLanguages(Languages);
@@ -271,7 +269,8 @@ function LanguageSelector(props: LanguageSelectorProps) {
           sx={{
             flexDirection: "column",
             pt: 1,
-            mt: 1
+            mt: 1,
+            overflowY: "auto"
           }}
         >
           {languages.map((lang) => (
@@ -292,7 +291,7 @@ function LanguageSelector(props: LanguageSelectorProps) {
                 <Icon path={Icons.check} size="small" />
               ) : lang.alias ? (
                 <Text variant={"subBody"} sx={{ fontSize: "10px" }}>
-                  {lang.alias.slice(0, 3).join(", ")}
+                  {lang.alias.slice(0, 3).join(", ").toUpperCase()}
                 </Text>
               ) : null}
             </Button>