feat: Disable some UI options for Markdown formatting

Author: bprusinowski

CHANGELOG.md

@@ -11,7 +11,9 @@ You can also check the
 
 # Unreleased
 
-Nothing yet.
+- Features
+  - Disabled some UI options for Markdown formatting in title and description
+    fields
 
 # [5.7.1] - 2025-04-25
 

app/components/form.tsx

@@ -546,8 +546,15 @@ export const MarkdownInput = ({
   name,
   value,
   onChange,
+  disableToolbar,
 }: {
   label?: string | ReactNode;
+  disableToolbar?: {
+    textStyles?: boolean;
+    blockType?: boolean;
+    listToggles?: boolean;
+    link?: boolean;
+  };
 } & FieldProps) => {
   const classes = useMarkdownInputStyles();
 
@@ -562,12 +569,22 @@ export const MarkdownInput = ({
             toolbarContents: () => (
               <div>
                 <Box sx={{ display: "flex", gap: 2 }}>
-                  <BoldItalicUnderlineToggles />
-                  <BlockTypeMenu />
-                  <Divider flexItem orientation="vertical" />
-                  <ListToggles />
-                  <Divider flexItem orientation="vertical" />
-                  <LinkDialogToggle />
+                  {disableToolbar?.textStyles ? null : (
+                    <BoldItalicUnderlineToggles />
+                  )}
+                  {disableToolbar?.blockType ? null : <BlockTypeMenu />}
+                  {disableToolbar?.listToggles ? null : (
+                    <>
+                      <Divider flexItem orientation="vertical" />
+                      <ListToggles />
+                    </>
+                  )}
+                  {disableToolbar?.link ? null : (
+                    <>
+                      <Divider flexItem orientation="vertical" />
+                      <LinkDialogToggle />
+                    </>
+                  )}
                 </Box>
                 {label && name ? <Label htmlFor={name}>{label}</Label> : null}
               </div>

app/configurator/components/annotation-options.tsx

@@ -99,6 +99,11 @@ const AnnotationOptions = (props: AnnotationOptionsProps) => {
                 locale={locale}
                 label={getFieldLabel(locale)}
                 value={meta[activeField][locale]}
+                disableToolbar={{
+                  blockType: true,
+                  listToggles: activeField === "title",
+                  link: activeField === "title",
+                }}
               />
             </Box>
           ))}

app/configurator/components/field.tsx

@@ -628,21 +628,29 @@ export const MetaInputField = ({
   metaKey,
   locale,
   value,
+  disableToolbar,
 }: {
   type: "chart" | "layout";
   inputType: "text" | "markdown";
   label: string | ReactNode;
   metaKey: string;
   locale: string;
   value?: string;
+  disableToolbar?: ComponentProps<typeof MarkdownInput>["disableToolbar"];
 }) => {
   const field = useMetaField({ type, metaKey, locale, value });
 
   switch (inputType) {
     case "text":
       return <Input label={label} {...field} />;
     case "markdown":
-      return <MarkdownInput label={label} {...field} />;
+      return (
+        <MarkdownInput
+          label={label}
+          {...field}
+          disableToolbar={disableToolbar}
+        />
+      );
     default:
       const _exhaustiveCheck: never = inputType;
       return _exhaustiveCheck;