Merge pull request #2922 from serlo/some-box-improvements

fix(editor): first box fixes/improvements
serlo · Sep 25, 2023 · 55304eb · 55304eb
2 parents 8fba275 + b127495
commit 55304eb
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 27 deletions.
diff --git a/src/serlo-editor/plugins/box/editor.tsx b/src/serlo-editor/plugins/box/editor.tsx
@@ -32,8 +32,9 @@ export function BoxEditor(props: BoxProps) {
   const borderColorClass = Object.hasOwn(style, 'borderColorClass')
     ? style.borderColorClass
     : defaultStyle.borderColorClass
+
   const contentId = content.get()
-  const contentIsEmpty = useAppSelector((state) =>
+  const isEmptyContent = useAppSelector((state) =>
     selectIsEmptyRows(state, contentId)
   )
   const { strings } = useInstanceData()
@@ -43,34 +44,39 @@ export function BoxEditor(props: BoxProps) {
     selectIsFocused(state, title.id)
   )
 
-  const hasFocus = focused || isTitleFocused
+  const showToolbar = focused || isTitleFocused
 
   if (hasNoType) {
     return (
       <>
         <figure
           className={clsx(
-            'relative rounded-xl border-3 p-4 pt-2',
+            'relative mx-side rounded-xl border-3 p-4 pt-2',
             borderColorClass
           )}
         >
-          <b className="block pb-4">{editorStrings.plugins.box.type}</b>
-          <ul className="unstyled-list pb-8">{renderSettingsListItems()}</ul>
+          <b className="block pb-3">{editorStrings.plugins.box.type}</b>
+          <ul className="unstyled-list">{renderSettingsListItems()}</ul>
         </figure>
       </>
     )
   }
 
   return (
     <>
-      {hasFocus ? <BoxToolbar {...props} /> : null}
+      {showToolbar ? <BoxToolbar {...props} /> : null}
 
       <div
         className={clsx(
-          hasFocus && '[&>figure]:rounded-t-none',
+          showToolbar && '[&>figure]:rounded-t-none',
+          'transition-opacity',
+          editable && isEmptyContent && 'opacity-30 focus-within:opacity-100',
+          showToolbar && '!opacity-100 ',
+          // making space for first toolbar, not wysiwyg
+          '[&>figure>figcaption]:!mb-9',
+          // toolbar finetuning
           editable &&
             tw`
-            [&>figure>div]:!mt-8
             [&_.plugin-toolbar]:ml-[-2px]
             [&_.plugin-toolbar]:mr-[-16px]
             [&_.plugin-toolbar]:rounded-none
@@ -95,8 +101,8 @@ export function BoxEditor(props: BoxProps) {
         >
           <div className="-ml-3 px-side">{content.render()}</div>
         </BoxRenderer>
+        {renderWarning()}
       </div>
-      {renderWarning()}
     </>
   )
 
@@ -109,13 +115,12 @@ export function BoxEditor(props: BoxProps) {
         : undefined
 
       return (
-        <li key={typedBoxType} className="inline-block pb-4 pr-4">
+        <li key={typedBoxType} className="inline-block pb-3.5 pr-4">
           <button
             className="serlo-button-editor-secondary"
             onClick={(event) => {
               event.preventDefault()
               type.set(typedBoxType)
-              if (anchorId.value === '') generateAnchorId()
             }}
           >
             {listIcon ? <FaIcon className="mr-1" icon={listIcon} /> : null}
@@ -126,14 +131,10 @@ export function BoxEditor(props: BoxProps) {
     })
   }
 
-  function generateAnchorId() {
-    anchorId.set(`box${Math.floor(10000 + Math.random() * 90000)}`)
-  }
-
   function renderWarning() {
-    return contentIsEmpty && props.editable ? (
-      <div className="mt-1 text-right">
-        <span className="bg-editor-primary-100 p-0.5 text-sm">
+    return isEmptyContent && editable ? (
+      <div className="box-warning text-side absolute left-10 -mt-[1.65rem]">
+        <span className="bg-editor-primary-100 px-1.5 py-0.5 text-sm">
           ⚠️ {editorStrings.plugins.box.emptyContentWarning}
         </span>
       </div>

diff --git a/src/serlo-editor/plugins/box/index.tsx b/src/serlo-editor/plugins/box/index.tsx
@@ -17,6 +17,7 @@ function createBoxState(allowedPlugins: (EditorPluginType | string)[]) {
         noLinebreaks: true,
       },
     }),
+    // we don't generate new id's any more but keep the old ones for now
     anchorId: string(''),
     content: child({
       plugin: EditorPluginType.Rows,

diff --git a/src/serlo-editor/plugins/box/renderer.tsx b/src/serlo-editor/plugins/box/renderer.tsx
@@ -80,16 +80,14 @@ export function BoxRenderer({ boxType, title, anchorId, children }: BoxProps) {
   function renderHeader() {
     return (
       <figcaption className="px-side pb-2 pt-2.5 text-lg">
-        <a className="!no-underline" id={anchorId}>
+        <a className="!no-underline">
           {isBlank ? null : (
-            <>
-              <span
-                className={clsx(title && !isBlank ? 'mr-1.5' : '', colorClass)}
-              >
-                {icon ? <FaIcon className="mr-1" icon={icon} /> : null}
-                {strings.content.boxTypes[boxType]}
-              </span>
-            </>
+            <span
+              className={clsx(title && !isBlank ? 'mr-1.5' : '', colorClass)}
+            >
+              {icon ? <FaIcon className="mr-1" icon={icon} /> : null}
+              {strings.content.boxTypes[boxType]}
+            </span>
           )}
           {title}
         </a>