feat(slate): Add css identifier to slate style menu options (#4847)

Co-authored-by: Steve Piercy <web@stevepiercy.com>
plone · Jun 9, 2023 · 8d74597 · 8d74597
1 parent c0bec37
commit 8d74597
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/news/4846.feature b/news/4846.feature
@@ -0,0 +1 @@
+Added a CSS identifier to the Slate style menu options. @razvanMiu
diff --git a/packages/volto-slate/src/editor/plugins/StyleMenu/StyleMenu.jsx b/packages/volto-slate/src/editor/plugins/StyleMenu/StyleMenu.jsx
@@ -28,13 +28,13 @@ const StyleMenuButton = ({ icon, active, ...props }) => (
   <ToolbarButton {...props} icon={icon} active={active} />
 );
 
-const MenuOpts = ({ editor, toSelect, option, ...rest }) => {
+const MenuOpts = ({ editor, toSelect, option, type }) => {
   const isActive = toSelect.includes(option);
   return (
     <Dropdown.Item
       as="span"
       active={isActive}
-      className={cx({ active: isActive })}
+      className={cx(`${type}-${option.value}`, { active: isActive })}
       {...omit(option, ['isBlock'])}
       data-isblock={option.isBlock}
       onClick={(event, selItem) => {
@@ -118,7 +118,12 @@ const StylingsButton = (props) => {
               content={intl.formatMessage(messages.inlineStyle)}
             />
             {inlineOpts.map((option, index) => (
-              <MenuOpts {...menuItemProps} option={option} key={index} />
+              <MenuOpts
+                {...menuItemProps}
+                type="inline-style"
+                option={option}
+                key={index}
+              />
             ))}
           </>
         )}
@@ -129,7 +134,12 @@ const StylingsButton = (props) => {
               content={intl.formatMessage(messages.paragraphStyle)}
             />
             {blockOpts.map((option, index) => (
-              <MenuOpts {...menuItemProps} option={option} key={index} />
+              <MenuOpts
+                {...menuItemProps}
+                type="block-style"
+                option={option}
+                key={index}
+              />
             ))}
           </>
         )}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Added a CSS identifier to the Slate style menu options. @razvanMiu