Make layout options optional

prezly · Aug 1, 2024 · ed91b90 · ed91b90
1 parent 7850525
commit ed91b90
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 12 deletions.
diff --git a/packages/slate-editor/src/extensions/coverage/CoverageExtension.tsx b/packages/slate-editor/src/extensions/coverage/CoverageExtension.tsx
@@ -13,7 +13,7 @@ export const EXTENSION_ID = 'CoverageExtension';
 
 export interface Parameters extends CoverageExtensionConfiguration {}
 
-export const CoverageExtension = ({ dateFormat, fetchCoverage, onEdit }: Parameters): Extension => ({
+export const CoverageExtension = ({ dateFormat, fetchCoverage, onEdit, withLayoutOptions }: Parameters): Extension => ({
     id: EXTENSION_ID,
     deserialize: {
         element: composeElementDeserializer({
@@ -43,6 +43,7 @@ export const CoverageExtension = ({ dateFormat, fetchCoverage, onEdit }: Paramet
                     element={element}
                     fetchCoverage={fetchCoverage}
                     onEdit={onEdit}
+                    withLayoutOptions={withLayoutOptions}
                 >
                     {children}
                 </CoverageElement>

diff --git a/packages/slate-editor/src/extensions/coverage/components/CoverageElement.tsx b/packages/slate-editor/src/extensions/coverage/components/CoverageElement.tsx
@@ -28,6 +28,7 @@ interface Props extends RenderElementProps {
     element: CoverageNode;
     fetchCoverage: (id: CoverageEntry['id']) => Promise<CoverageEntry>;
     onEdit: (id: CoverageEntry['id']) => void;
+    withLayoutOptions: boolean;
 }
 
 export function CoverageElement({
@@ -37,6 +38,7 @@ export function CoverageElement({
     element,
     fetchCoverage,
     onEdit,
+    withLayoutOptions,
 }: Props) {
     const editor = useSlateStatic();
     const coverageId = element.coverage.id;
@@ -72,6 +74,7 @@ export function CoverageElement({
                     element={element}
                     onEdit={handleEdit}
                     onRemove={handleRemove}
+                    withLayoutOptions={withLayoutOptions}
                 />
             ) : undefined}
             renderReadOnlyFrame={function () {

diff --git a/packages/slate-editor/src/extensions/coverage/components/CoverageMenu.tsx b/packages/slate-editor/src/extensions/coverage/components/CoverageMenu.tsx
@@ -6,7 +6,7 @@ import React from 'react';
 import { useSelected, useSlate } from 'slate-react';
 
 import type { OptionsGroupOption } from '#components';
-import { Button, OptionsGroup, Toggle, Toolbox, VStack } from '#components';
+import { Button, OptionsGroup, Toggle, Toolbox } from '#components';
 import { Delete, ExternalLink, ItemsLayoutHorizontal, ItemsLayoutVertical } from '#icons';
 
 import { getCoverageImageUrl, updateCoverage } from '../lib';
@@ -18,6 +18,7 @@ interface Props {
     element: CoverageNode;
     onEdit: () => void;
     onRemove: () => void;
+    withLayoutOptions: boolean;
 }
 
 const LAYOUT_OPTIONS: OptionsGroupOption<CoverageLayout>[] = [
@@ -46,6 +47,7 @@ export function CoverageMenu({
     element,
     onEdit,
     onRemove,
+    withLayoutOptions,
 }: Props) {
     const editor = useSlate();
     const isSelected = useSelected();
@@ -73,8 +75,8 @@ export function CoverageMenu({
                 </Toggle>
             </Toolbox.Section>
 
-            <Toolbox.Section caption="Card layout">
-                <VStack spacing="2-5">
+            {withLayoutOptions && (
+                <Toolbox.Section caption="Card layout">
                     <OptionsGroup<CoverageLayout>
                         columns={3}
                         disabled={!isLayoutChangeable}
@@ -83,14 +85,17 @@ export function CoverageMenu({
                         options={LAYOUT_OPTIONS}
                         selectedValue={activeLayout}
                     />
-                    <Toggle
-                            name="new_tab"
-                            value={element.new_tab}
-                            onChange={(new_tab) => updateCoverage(editor, { new_tab })}
-                        >
-                            Open in new tab
-                        </Toggle>
-                </VStack>
+                </Toolbox.Section>
+            )}
+
+            <Toolbox.Section caption="Link">
+                <Toggle
+                    name="new_tab"
+                    value={element.new_tab}
+                    onChange={(new_tab) => updateCoverage(editor, { new_tab })}
+                >
+                    Open in new tab
+                </Toggle>
             </Toolbox.Section>
 
             <Toolbox.Section noPadding>

diff --git a/packages/slate-editor/src/extensions/coverage/types.ts b/packages/slate-editor/src/extensions/coverage/types.ts
@@ -7,4 +7,5 @@ export interface CoverageExtensionConfiguration {
     dateFormat: string;
     fetchCoverage: (id: CoverageEntry['id']) => Promise<CoverageEntry>;
     onEdit: (id: CoverageEntry['id']) => void;
+    withLayoutOptions: boolean;
 }
diff --git a/packages/slate-editor/src/modules/editor/test-utils.ts b/packages/slate-editor/src/modules/editor/test-utils.ts
@@ -37,6 +37,7 @@ export function getAllExtensions() {
                 renderSuggestionsFooter: () => null,
                 onCreateCoverage: createDelayedResolve({ coverage }),
                 onEdit: () => {},
+                withLayoutOptions: true,
             },
             withCustomNormalization: false,
             withDivider: true,