diff --git a/src/editor/plugins/StyleMenu/StyleMenu.jsx b/src/editor/plugins/StyleMenu/StyleMenu.jsx
index c171cb3a..4d0a48d5 100644
--- a/src/editor/plugins/StyleMenu/StyleMenu.jsx
+++ b/src/editor/plugins/StyleMenu/StyleMenu.jsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { ReactEditor, useSlate } from 'slate-react';
+import { useSlate } from 'slate-react';
import { Dropdown } from 'semantic-ui-react';
import { useIntl, defineMessages } from 'react-intl';
import cx from 'classnames';
@@ -27,19 +27,31 @@ const StyleMenuButton = ({ icon, active, ...props }) => (
);
-const StylingsButton = () => {
+const MenuOpts = ({ editor, toSelect, option }) => {
+ const isActive = toSelect.includes(option);
+ return (
+ {
+ event.stopPropagation();
+ toggleStyle(editor, {
+ cssClass: selItem.value,
+ isBlock: selItem.isBlock,
+ });
+ }}
+ />
+ );
+};
+
+const StylingsButton = (props) => {
const editor = useSlate();
const intl = useIntl();
// Converting the settings to a format that is required by dropdowns.
const inlineOpts = [
- {
- text: intl.formatMessage(messages.inlineStyle),
- disabled: false,
- selected: false,
- style: { opacity: 0.45 },
- onClick: (event) => event.preventDefault(),
- },
...config.settings.slate.styleMenu.inlineStyles.map((def) => {
return {
value: def.cssClass,
@@ -50,13 +62,6 @@ const StylingsButton = () => {
}),
];
const blockOpts = [
- {
- text: intl.formatMessage(messages.paragraphStyle),
- disabled: false,
- selected: false,
- style: { opacity: 0.45 },
- onClick: (event) => event.preventDefault(),
- },
...config.settings.slate.styleMenu.blockStyles.map((def) => {
return {
value: def.cssClass,
@@ -84,10 +89,14 @@ const StylingsButton = () => {
}
}
+ const menuItemProps = {
+ toSelect,
+ editor,
+ };
const showMenu = inlineOpts.length || blockOpts.length;
return showMenu ? (
) : (
diff --git a/src/editor/plugins/StyleMenu/index.js b/src/editor/plugins/StyleMenu/index.js
index f3be4c39..7e2685fc 100644
--- a/src/editor/plugins/StyleMenu/index.js
+++ b/src/editor/plugins/StyleMenu/index.js
@@ -1,8 +1,6 @@
import React from 'react';
import StyleMenu from './StyleMenu';
-import './style.css';
-import { Icon } from '@plone/volto/components';
-import paintSVG from '@plone/volto/icons/paint.svg';
+import './style.less';
export default function install(config) {
const { slate } = config.settings;
@@ -12,29 +10,10 @@ export default function install(config) {
slate.toolbarButtons.push('styleMenu');
slate.expandedToolbarButtons.push('styleMenu');
- /* The slate Menu configuration in an addon */
-
- slate.styleMenu = config.settings.slate.styleMenu || {};
- slate.styleMenu.inlineStyles = [
- {
- cssClass: 'cool-inline-text',
- label: 'Cool Inline Text',
- icon: (props) => ,
- },
- ];
- slate.styleMenu.blockStyles = [
- {
- cssClass: 'underline-block-text',
- label: 'Cool Block Text',
- icon: (props) => ,
- },
- ];
-
- // slate.styleMenu = {
- // inlineStyles: [],
- // blockStyles: [],
- // //themeColors = { primary: 'red' };
- // };
+ slate.styleMenu = {
+ inlineStyles: [],
+ blockStyles: [],
+ };
return config;
}
diff --git a/src/editor/plugins/StyleMenu/style.css b/src/editor/plugins/StyleMenu/style.css
deleted file mode 100644
index 6c2e90c9..00000000
--- a/src/editor/plugins/StyleMenu/style.css
+++ /dev/null
@@ -1,30 +0,0 @@
-/* Demo styles */
-
-.green-block-text {
- color: green;
-}
-
-.underline-block-text {
- text-decoration: underline;
-}
-
-.cool-inline-text {
- font-style: italic;
- font-weight: bold;
-}
-
-.red-inline-text {
- color: red;
-}
-
-.style-menu.ui.dropdown .menu .item {
- user-select: none !important;
-}
-
-.style-menu.ui.dropdown .menu .active {
- z-index: 1;
- background: #68778d !important;
- box-shadow: none;
- color: #ffffff !important;
- font-weight: 300 !important;
-}
diff --git a/src/editor/plugins/StyleMenu/style.less b/src/editor/plugins/StyleMenu/style.less
new file mode 100644
index 00000000..731f61af
--- /dev/null
+++ b/src/editor/plugins/StyleMenu/style.less
@@ -0,0 +1,48 @@
+/* Demo styles */
+
+.green-block-text {
+ color: green;
+}
+
+.underline-block-text {
+ text-decoration: underline;
+}
+
+.cool-inline-text {
+ font-style: italic;
+ font-weight: bold;
+}
+
+.red-inline-text {
+ color: red;
+}
+
+#style-menu.ui.dropdown .menu {
+ .item {
+ display: flex;
+ user-select: none;
+
+ span.text {
+ margin-top: auto;
+ line-height: normal;
+ vertical-align: middle;
+ }
+ }
+
+ .header {
+ color: rgb(153, 153, 153);
+ font-size: 1rem;
+ font-weight: normal;
+ }
+
+ .active {
+ z-index: 1;
+ background: #68778d;
+ box-shadow: none;
+ color: #ffffff;
+ font-weight: 300;
+ }
+
+ overflow: auto;
+ max-height: 50vh;
+}
diff --git a/src/editor/plugins/StyleMenu/utils.js b/src/editor/plugins/StyleMenu/utils.js
index 95c89e22..bb0a43dc 100644
--- a/src/editor/plugins/StyleMenu/utils.js
+++ b/src/editor/plugins/StyleMenu/utils.js
@@ -1,7 +1,7 @@
/* eslint no-console: ["error", { allow: ["warn", "error"] }] */
import { Editor, Transforms } from 'slate';
-import { isBlockActive } from 'volto-slate/utils';
import config from '@plone/volto/registry';
+import { isBlockActive } from 'volto-slate/utils';
/**
* Toggles a style (e.g. in the StyleMenu plugin).
diff --git a/src/editor/render.jsx b/src/editor/render.jsx
index 7fa0f5f1..9be8a5f5 100644
--- a/src/editor/render.jsx
+++ b/src/editor/render.jsx
@@ -15,10 +15,12 @@ export const Element = ({ element, attributes = {}, extras, ...rest }) => {
const El = elements[element.type] || elements['default'];
const out = Object.assign(
- element.styleName ? { className: element.styleName } : {},
...Object.keys(attributes || {}).map((k) =>
!isEmpty(attributes[k]) ? { [k]: attributes[k] } : {},
),
+ element.styleName
+ ? { className: cx(attributes.className, element.styleName) }
+ : {},
);
return (