Use value "unstyled" rather than empty string

First-Peoples-Cultural-Council · Nov 4, 2024 · a9863a6 · a9863a6
1 parent 0db6cc5
commit a9863a6
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/components/Form/WysiwygControls/BlockStyleToolbar.js b/src/components/Form/WysiwygControls/BlockStyleToolbar.js
@@ -4,10 +4,12 @@ import { RichUtils } from 'draft-js'
 import 'draft-js/dist/Draft.css'
 
 // FPCC
-import WysiwygControls from 'components/Form/WysiwygControls'
+import Button from 'components/Form/WysiwygControls/Button'
+import HeaderSelect from 'components/Form/WysiwygControls/HeaderSelect'
 import getIcon from 'common/utils/getIcon'
 
 export const headerBlockTypes = [
+  { label: 'Normal', value: 'unstyled' },
   { label: 'Heading', value: 'header-two' },
   { label: 'Subheading', value: 'header-three' },
 ]
@@ -27,14 +29,14 @@ function BlockStyleToolbar({ editorState, onChange, toolbar }) {
   return (
     <span className="flex border-b border-charcoal-100 text-xl text-charcoal-700">
       {toolbar?.includes('HEADER') && (
-        <WysiwygControls.HeaderSelect
+        <HeaderSelect
           headerBlockTypes={headerBlockTypes}
           value={currentBlockType}
           handleSelectChange={toggleBlockType}
         />
       )}
       {toolbar?.includes('OL') && (
-        <WysiwygControls.Button
+        <Button
           onClickHandler={(event) =>
             toggleBlockType(event, 'ordered-list-item')
           }
@@ -43,7 +45,7 @@ function BlockStyleToolbar({ editorState, onChange, toolbar }) {
         />
       )}
       {toolbar?.includes('UL') && (
-        <WysiwygControls.Button
+        <Button
           onClickHandler={(event) =>
             toggleBlockType(event, 'unordered-list-item')
           }

diff --git a/src/components/Form/WysiwygControls/HeaderSelect.js b/src/components/Form/WysiwygControls/HeaderSelect.js
@@ -14,7 +14,6 @@ function HeaderSelect({ value, handleSelectChange, headerBlockTypes }) {
       onChange={onToggle}
       className="border-r border-charcoal-100 pl-3 pr-10 py-2 focus:outline-none focus:ring-scarlet-800 focus:border-scarlet-800 text-sm"
     >
-      <option value="">Normal</option>
       {headerBlockTypes.map((heading) => (
         <option key={heading.value} value={heading.value}>
           {heading.label}