Gutenberg fixes

rage · Oct 11, 2024 · ac6a3b0 · ac6a3b0
1 parent 79d3b41
commit ac6a3b0
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 14 deletions.
diff --git a/services/cms/src/components/editors/GutenbergEditor.tsx b/services/cms/src/components/editors/GutenbergEditor.tsx
@@ -15,17 +15,19 @@ import {
   BlockEditorKeyboardShortcuts,
   BlockEditorProvider,
   BlockInspector,
-  // @ts-ignore: no type definition
+  // @ts-expect-error: no type definition
   __experimentalLibrary as BlockLibrary,
   BlockList,
   EditorBlockListSettings,
   EditorSettings,
-  // @ts-ignore: no type definition
+  // @ts-expect-error: no type definition
   __experimentalListView as ListView,
   ObserveTyping,
+  // @ts-expect-error: no type definition
+  __unstableUseBlockSelectionClearer as useBlockSelectionClearer,
   WritingFlow,
 } from "@wordpress/block-editor"
-// @ts-ignore: no type definition
+// @ts-expect-error: no type definition
 import { BlockTools } from "@wordpress/block-editor/build-module/components/"
 import { registerCoreBlocks } from "@wordpress/block-library"
 import {
@@ -35,14 +37,14 @@ import {
   registerBlockType,
   setCategories,
   unregisterBlockType,
-  /* @ts-ignore: type signature incorrect */
   unregisterBlockVariation,
 } from "@wordpress/blocks"
 import { Popover, SlotFillProvider } from "@wordpress/components"
+import { useMergeRefs } from "@wordpress/compose"
 import { addFilter, removeFilter } from "@wordpress/hooks"
-// @ts-ignore: no types
+// @ts-expect-error: no types
 import { ShortcutProvider } from "@wordpress/keyboard-shortcuts"
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useRef, useState } from "react"
 import toast from "react-hot-toast"
 import { useTranslation } from "react-i18next"
 
@@ -96,6 +98,10 @@ const GutenbergEditor: React.FC<React.PropsWithChildren<GutenbergEditorProps>> =
 }: GutenbergEditorProps) => {
   const { t } = useTranslation()
   useDisableBrowserDefaultDragFileBehavior()
+  const clearerRef = useBlockSelectionClearer()
+  const localRef = useRef()
+  const contentRef = useMergeRefs([clearerRef, localRef])
+
   const [editorSettings, setEditorSettings] = useState<
     Partial<
       EditorSettings & EditorBlockListSettings & { mediaUpload: (props: MediaUploadProps) => void }
@@ -148,7 +154,7 @@ const GutenbergEditor: React.FC<React.PropsWithChildren<GutenbergEditorProps>> =
     if (allowedBlockVariations) {
       for (const [blockName, allowedVariations] of Object.entries(allowedBlockVariations)) {
         /* @ts-ignore: type signature incorrect */
-        getBlockType(blockName).variations.forEach((variation) => {
+        getBlockType(blockName)?.variations?.forEach((variation) => {
           if (allowedVariations.indexOf(variation.name) === -1) {
             unregisterBlockVariation(blockName, variation.name)
           }
@@ -345,12 +351,22 @@ const GutenbergEditor: React.FC<React.PropsWithChildren<GutenbergEditorProps>> =
               </div>
             )}
             <div className="editor__content">
-              <BlockTools>
+              <BlockTools __unstableContentRef={localRef}>
                 <div className="editor-styles-wrapper">
                   {/* @ts-ignore: type signature incorrect */}
                   <BlockEditorKeyboardShortcuts.Register />
                   <CommonKeyboardShortcuts />
-                  <WritingFlow>
+                  <WritingFlow
+                    // @ts-expect-error: Ref missing from type definitions
+                    ref={contentRef}
+                    className="editor-styles-wrapper"
+                    tabIndex={-1}
+                    // eslint-disable-next-line react/forbid-component-props
+                    style={{
+                      height: "100%",
+                      width: "100%",
+                    }}
+                  >
                     <ObserveTyping>
                       <BlockList />
                     </ObserveTyping>

diff --git a/services/cms/src/styles/Gutenberg/editor-styles.scss b/services/cms/src/styles/Gutenberg/editor-styles.scss
@@ -133,3 +133,16 @@
 .block-editor-plain-text {
   width: 100%;
 }
+
+.wp-block.is-selected {
+  // Makes the typing caret visible on a empty block
+  outline-offset: 5px;
+  // Makes the current block highlight less distracting
+  outline-color: #bec3c7;
+
+  // Apply the same styles to direct children, so that the highlight customization works with more block types
+  & > * {
+    outline-offset: 5px;
+    outline-color: #bec3c7;
+  }
+}
diff --git a/services/cms/src/styles/Gutenberg/style.scss b/services/cms/src/styles/Gutenberg/style.scss
@@ -15,9 +15,13 @@ $sidebar-width: 350px;
   // Reference element for the block popover position.
   position: relative;
 
+  width: 100%;
+  height: 100%;
+
   /* Give space for sidebar so that it won't accidentally overlap the main editor */
   /* Same as sidebar width */
   margin-right: calc("auto" - $sidebar-width);
+
   @media (max-width: $sidebar-threshold) {
     // Disable the margin-right if min-width more than 600px for responsiveness
     margin-right: 0px;
@@ -29,6 +33,7 @@ $sidebar-width: 350px;
   /* Give space for sidebar so that it won't accidentally overlap the main editor */
   /* Same as sidebar width */
   margin-right: calc("auto" - $sidebar-width);
+
   @media (max-width: $sidebar-threshold) {
     // Disable the margin-right if min-width more than 600px for responsiveness
     margin-right: 0px;
@@ -53,6 +58,7 @@ $sidebar-width: 350px;
   // Temporarily disable the sidebar on mobile
   // Do we want to support advanced content editing with a mobile phone?
   display: block;
+
   @media (max-width: $sidebar-threshold) {
     display: none;
   }
@@ -61,8 +67,10 @@ $sidebar-width: 350px;
 .editor__top-button-wrapper {
   padding: 1rem;
   display: none;
+
   @media (max-width: $sidebar-threshold) {
     display: block;
   }
+
   background: #f5f6f7;
 }
diff --git a/services/course-material/src/components/ContentRenderer/core/formatting/TableBlock.tsx b/services/course-material/src/components/ContentRenderer/core/formatting/TableBlock.tsx
@@ -94,7 +94,7 @@ const TableBlock: React.FC<React.PropsWithChildren<BlockRendererProps<TableAttri
                       rowSpan={stringToNumberOrPlaceholder(cell.rowspan, undefined)}
                       dangerouslySetInnerHTML={{
                         __html: parseText(
-                          cell.content !== "" ? cell.content ?? "&#xFEFF;" : "&#xFEFF;",
+                          cell.content !== "" ? (cell.content ?? "&#xFEFF;") : "&#xFEFF;",
                           terms,
                         ).parsedText,
                       }}
@@ -116,7 +116,7 @@ const TableBlock: React.FC<React.PropsWithChildren<BlockRendererProps<TableAttri
                     rowSpan={stringToNumberOrPlaceholder(cell.rowspan, undefined)}
                     dangerouslySetInnerHTML={{
                       __html: parseText(
-                        cell.content !== "" ? cell.content ?? "&#xFEFF;" : "&#xFEFF;",
+                        cell.content !== "" ? (cell.content ?? "&#xFEFF;") : "&#xFEFF;",
                         terms,
                       ).parsedText,
                     }}
@@ -138,7 +138,7 @@ const TableBlock: React.FC<React.PropsWithChildren<BlockRendererProps<TableAttri
                       rowSpan={stringToNumberOrPlaceholder(cell.rowspan, undefined)}
                       dangerouslySetInnerHTML={{
                         __html: parseText(
-                          cell.content !== "" ? cell.content ?? "&#xFEFF;" : "&#xFEFF;",
+                          cell.content !== "" ? (cell.content ?? "&#xFEFF;") : "&#xFEFF;",
                           terms,
                         ).parsedText,
                       }}

diff --git a/...ices/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/ExerciseTask.tsx b/...ices/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/ExerciseTask.tsx
@@ -51,7 +51,7 @@ const ExerciseTask: React.FC<React.PropsWithChildren<ExerciseTaskProps>> = ({
 
   const feedbackText =
     postThisStateToIFrame.view_type === "view-submission"
-      ? postThisStateToIFrame.data.grading?.feedback_text ?? null
+      ? (postThisStateToIFrame.data.grading?.feedback_text ?? null)
       : null
   const cannotAnswerButNoSubmission =
     !canPostSubmission && !exerciseTask.previous_submission && signedIn

diff --git a/services/main-frontend/src/pages/manage/regradings/[id].tsx b/services/main-frontend/src/pages/manage/regradings/[id].tsx
@@ -148,7 +148,7 @@ const ViewRegradingPage: React.FC<React.PropsWithChildren<unknown>> = () => {
                 <td>{si.grading_before_regrading.score_given ?? "null"}</td>
                 <td>
                   {si.grading_after_regrading
-                    ? si.grading_after_regrading.score_given ?? "null"
+                    ? (si.grading_after_regrading.score_given ?? "null")
                     : "null"}
                 </td>
               </FullWidthTableRow>