feat: plugin hover focus state frame shadow

apps/web/src/assets-webkit/styles/serlo-tailwind.css

@@ -3,6 +3,7 @@
 @import 'tailwindcss/components';
 
 @import '../../../../../packages/editor/src/tailwind/components.css';
+@import '../../../../../packages/editor/src/tailwind/utilities.css';
 @import './components.css';
 
 @import 'tailwindcss/utilities';

packages/editor/src/editor-ui/embed-wrapper.tsx

@@ -48,8 +48,8 @@ export function EmbedWrapper({
     <div
       className={cn(
         `
-        group relative mx-side mb-block block
-        cursor-pointer bg-cover bg-center [contain:content]
+        group relative mb-block block cursor-pointer
+        bg-cover bg-center pl-[2px] [contain:content]
         `,
         className
       )}
@@ -65,7 +65,7 @@ export function EmbedWrapper({
 
     return (
       <div className="w-full">
-        <div className="relative flex aspect-[16/9] w-full justify-center rounded-xl bg-editor-primary-100">
+        <div className="relative flex aspect-[16/9] w-full justify-center rounded-lg bg-editor-primary-100">
           <img
             className="w-full object-contain opacity-50"
             src={previewImageUrl}

packages/editor/src/editor-ui/plugin-toolbar/plugin-toolbar.tsx

@@ -36,8 +36,8 @@ export function PluginToolbar({
     <div
       className={cn(
         `
-        plugin-toolbar absolute -top-[2.6rem] left-[5px] right-0 z-[21] flex
-        h-9 items-center justify-between rounded-t-lg bg-editor-primary-100 pl-2
+        plugin-toolbar clip-vertical-shadow absolute -top-[2rem] left-[7px] right-0 z-[21]
+        flex h-9 items-center justify-between rounded-t-lg bg-editor-primary-100 pl-2 shadow-plugin-focus
         `,
         !noWhiteShadow &&
           `

packages/editor/src/plugins/article/renderer.tsx

@@ -29,7 +29,7 @@ export function ArticleRenderer({
 
   return (
     <>
-      <div className="[&>div]:mx-side [&>div]:rounded-xl [&>div]:border-3 [&>div]:border-brand-50 [&>div]:py-5 ">
+      <div className="[&>div]:rounded-lg [&>div]:border-3 [&>div]:border-brand-50 [&>div]:py-5 ">
         {introduction}
       </div>
       {content}

packages/editor/src/plugins/box/editor.tsx

@@ -67,7 +67,6 @@ export function BoxEditor(props: BoxProps) {
           `
             [&_.plugin-toolbar]:ml-[-2px]
             [&_.plugin-toolbar]:mr-[-16px]
-            [&_.plugin-toolbar]:rounded-none
             [&_.rows-child:first-child_.plugin-toolbar:before]:hidden
           `
         )}

packages/editor/src/plugins/box/renderer.tsx

@@ -59,8 +59,8 @@ export function BoxRenderer({
       id={anchorId}
       className={cn(
         `
-          serlo-box relative mx-side mb-6 
-          rounded-xl border-3 pb-2 pt-[2px]
+          serlo-box relative mb-6 
+          rounded-lg border-3 pb-2 pt-[2px]
           [&>div.my-block]:first:mt-3.5
           [&>div.my-block]:last:mb-3.5
         `,

packages/editor/src/plugins/box/toolbar.tsx

@@ -37,7 +37,7 @@ export const BoxToolbar = ({ id, state }: BoxProps) => {
         </>
       }
       pluginControls={<PluginDefaultTools pluginId={id} />}
-      className="!left-[21px] top-[-33px] w-[calc(100%-37px)]"
+      className="!left-[5px] top-[-31px] w-[calc(100%-5px)]"
     />
   )
 }

packages/editor/src/plugins/highlight/editor.tsx

@@ -34,16 +34,18 @@ export function HighlightEditor(props: HighlightProps) {
 
   if (!throttledEdit && !focused) {
     return (
-      <Renderer
-        language={state.language.value}
-        showLineNumbers={state.showLineNumbers.value}
-        code={state.code.value}
-      />
+      <div className="px-2 pb-4 pt-6">
+        <Renderer
+          language={state.language.value}
+          showLineNumbers={state.showLineNumbers.value}
+          code={state.code.value}
+        />
+      </div>
     )
   }
 
   return (
-    <div className="mx-side">
+    <div className="mx-side px-2 pb-4 pt-6">
       {focused && <HighlightToolbar {...props} />}
       <textarea
         value={state.code.value}
@@ -57,9 +59,9 @@ export function HighlightEditor(props: HighlightProps) {
         // make sure editor does not create new plugin on enter etc
         onKeyDown={(e) => e.stopPropagation()}
         className={cn(`
-            m-auto w-full items-center rounded-xl border-3 border-editor-primary-200 p-side
-            pt-6 font-mono
-            focus-within:border-editor-primary-200 focus-within:outline-none
+            m-auto block w-full items-center rounded-xl border-3 border-brand-200
+            p-side pt-6 font-mono
+            focus-within:border-brand-200 focus-within:outline-none
         `)}
         style={{ height: `${50 + numberOflines * 26}px` }} // simple autogrow
       >

packages/editor/src/plugins/highlight/renderer.tsx

@@ -36,7 +36,7 @@ export function HighlightRenderer({
 }: HighlightRendererProps) {
   // SyntaxHighlighter has own styles on pre, so wrap in div to use own classes
   return (
-    <div className="mx-side mb-block mt-1 overflow-auto rounded-xl border-3 border-brand-150 pt-[0.8rem]">
+    <div className="mx-side overflow-auto rounded-xl border-3 border-brand-150 pt-[0.8rem]">
       <SyntaxHighlighter
         language={language.toLowerCase()}
         showLineNumbers={showLineNumbers}

packages/editor/src/plugins/image/editor.tsx

@@ -101,7 +101,7 @@ export function ImageEditor(props: ImageProps) {
 
       <div
         className={cn(
-          'z-[2] [&_img]:min-h-[4rem]',
+          'z-[2] pl-1 [&_img]:min-h-[4rem]',
           hasFocus && showInlineImageUrl ? 'relative' : ''
         )}
         data-qa="plugin-image-editor"

packages/editor/src/plugins/image/renderer.tsx

@@ -26,15 +26,15 @@ export function ImageRenderer({
 
   return (
     <figure
-      className="mb-block bg-white px-4 text-center"
+      className="mb-block px-4 text-center"
       itemScope
       itemType="http://schema.org/ImageObject"
     >
       <div style={{ maxWidth }} className="mx-auto">
         {wrapWithLink(
           placeholder ?? (
             <EditorImage
-              className="serlo-img"
+              className="serlo-img bg-white"
               src={src}
               alt={alt ? alt : altFallbackString}
               itemProp="contentUrl"

packages/editor/src/plugins/multimedia/editor.tsx

@@ -86,7 +86,7 @@ export function MultimediaEditor(props: MultimediaProps) {
       ) : (
         <button
           className={cn(`
-            absolute right-0 top-[-65px] z-[22] hidden h-6 rounded-t-md bg-gray-100
+            absolute right-0 top-[-56px] z-[22] hidden h-6 rounded-t-md bg-gray-100
             px-2 pt-0.5 text-sm font-bold
             hover:bg-editor-primary-100 group-focus-within/multimedia:block
           `)}

packages/editor/src/plugins/rows/editor-renderer.tsx

@@ -25,15 +25,6 @@ interface RowDragObject {
 
 const validFileTypes = [NativeTypes.FILE, NativeTypes.URL]
 
-const pluginsWithOwnBorder = [
-  EditorPluginType.Box,
-  EditorPluginType.Geogebra,
-  EditorPluginType.Highlight,
-  EditorPluginType.SerloTable,
-  EditorPluginType.Spoiler,
-  EditorPluginType.Video,
-]
-
 export function EditorRowRenderer({
   config,
   row,
@@ -184,7 +175,6 @@ export function EditorRowRenderer({
     ) : null
 
   const rowPluginType = selectDocumentPluginType(store.getState(), row.id)
-  const shouldShowBorder = !pluginsWithOwnBorder.includes(rowPluginType)
 
   const isMultimediaPlugin = rowPluginType === EditorPluginType.Multimedia
 
@@ -194,22 +184,17 @@ export function EditorRowRenderer({
       <div
         ref={container}
         className={cn(
+          // Base class, used for nested selectors and DOM querying
           'rows-editor-renderer-container',
-          'border-l-2 border-transparent',
-          shouldShowBorder &&
-            `
-            transition-colors
-            focus-within:border-gray-400
-            hover:!border-gray-200
-            hover:focus-within:!border-gray-400
-            [&:has(.rows-editor-renderer-container:focus-within)]:border-transparent
-            [&:hover:has(.rows-editor-renderer-container:focus-within)]:!border-gray-200
-            `,
-          `
-          [&:focus-within>.rows-tools]:opacity-100
-          [&:has(.rows-editor-renderer-container:focus-within)>.rows-tools]:opacity-0
-          [&:hover>.rows-tools]:!opacity-100
-          `,
+          // Hover and focus indicator styles
+          'rounded-b-lg',
+          'hover:shadow-plugin-hover',
+          'focus-within:shadow-plugin-focus',
+          'hover:focus-within:!shadow-plugin-focus',
+          // Left sidebar styles
+          '[&:focus-within>.rows-tools]:opacity-100',
+          '[&:has(.rows-editor-renderer-container:focus-within)>.rows-tools]:opacity-0',
+          '[&:hover>.rows-tools]:!opacity-100',
           isMultimediaPlugin &&
             '[&>.rows-tools]:!-left-1 [&>.rows-tools]:!-top-9'
         )}

packages/editor/src/plugins/spoiler/editor.tsx

@@ -66,7 +66,6 @@ export function SpoilerEditor(props: SpoilerProps) {
           '[&>div>button]:!mb-[17px]',
           // toolbar finetuning
           `
-            [&_.plugin-toolbar]:rounded-none
             [&_.rows-child:first-child_.plugin-toolbar:before]:hidden
           `
         )}
@@ -89,7 +88,7 @@ export function SpoilerEditor(props: SpoilerProps) {
       <PluginToolbar
         pluginType={EditorPluginType.Spoiler}
         pluginControls={<PluginDefaultTools pluginId={id} />}
-        className="!left-[21px] top-[-33px] w-[calc(100%-37px)]"
+        className="!left-[5px] top-[-31px] w-[calc(100%-5px)]"
       />
     )
   }

packages/editor/src/plugins/spoiler/renderer.tsx

@@ -25,7 +25,7 @@ export function SpoilerRenderer({
   return (
     <div
       className={cn(
-        'mb-block flex flex-col rounded-xl border-3 mobile:mx-side',
+        'mb-block flex flex-col rounded-lg border-3',
         '[&>div.my-block:first-of-type]:mt-5',
         isOpen ? 'border-brand-200' : 'border-brand-100'
       )}

packages/editor/src/plugins/video/editor.tsx

@@ -36,7 +36,7 @@ export const VideoEditor = (props: VideoProps) => {
         </EmbedWrapper>
       ) : (
         <div
-          className="mx-side cursor-pointer rounded-lg bg-editor-primary-50 py-32 text-center"
+          className="cursor-pointer rounded-lg bg-editor-primary-50 py-32 text-center"
           data-qa="plugin-video-placeholder"
           onClick={() => setShowSettingsModal('url')}
         >

packages/editor/src/tailwind/editor.css

@@ -1,7 +1,7 @@
 /* https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports */
 @import 'tailwindcss/base';
 @import './components.css';
-@import 'tailwindcss/utilities';
+@import './utilities.css';
 
 /* stop body from scrolling when a modal is open */
 body.ReactModal__Body--open {

packages/editor/src/tailwind/tailwind-base.js

@@ -110,6 +110,8 @@ export default {
         modal: '0px 0px 10px 0px rgba(0, 0, 0, 0.25)',
         input: `0 0 4px 0 ${brand}`,
         stickysearch: ' 0px 7px 7px 3px rgba(255,255,255,0.8)',
+        'plugin-hover': '0 4px 4px 0 rgba(0, 0, 0, 0.1)',
+        'plugin-focus': '0 4px 4px 0 rgba(0, 0, 0, 0.25)',
       },
       minHeight: {
         8: '32px',

packages/editor/src/tailwind/utilities.css

@@ -0,0 +1,7 @@
+@tailwind utilities;
+
+@layer utilities {
+  .clip-vertical-shadow {
+    clip-path: inset(0 -10px);
+  }
+}