diff --git a/services/cms/src/components/editors/GutenbergEditor.tsx b/services/cms/src/components/editors/GutenbergEditor.tsx index 86f7ab7d8f85..b7544140d359 100644 --- 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> = }: 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> = 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> = )}
- +
{/* @ts-ignore: type signature incorrect */} - + diff --git a/services/cms/src/styles/Gutenberg/editor-styles.scss b/services/cms/src/styles/Gutenberg/editor-styles.scss index 9d5eeb310dd9..0a701c0b93eb 100644 --- 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 index 75851ba5b09d..61205bd72f39 100644 --- 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 index 53c5f02fd9a6..0aac8f030fce 100644 --- 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> = ({ 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 index 4644c8c0d507..90cf59ee3635 100644 --- 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> = () => { {si.grading_before_regrading.score_given ?? "null"} {si.grading_after_regrading - ? si.grading_after_regrading.score_given ?? "null" + ? (si.grading_after_regrading.score_given ?? "null") : "null"}