generated from eea/volto-addon-template
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Release 1.18.0 #154 from eea/develop
- Loading branch information
Showing
10 changed files
with
388 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import React from 'react'; | ||
| import cx from 'classnames'; | ||
| import Tag from '@eeacms/volto-eea-design-system/ui/Tag/Tag'; | ||
|
|
||
| export const ThemesWidget = ({ value, children, className }) => { | ||
| return value ? ( | ||
| <span className={cx(className, 'token', 'widget')}> | ||
| {value.map((tag) => ( | ||
| <Tag | ||
| href={`https://www.eea.europa.eu/en/advanced-search?filters[0][field]=topic&filters[0][values][0]=${tag.title}&filters[0][type]=any&filters[1][field]=language&filters[1][type]=any&filters[1][values][0]=en&sort-field=issued.date&sort-direction=desc`} | ||
| key={tag.token} | ||
| > | ||
| {children ? children(tag.title) : tag.title} | ||
| </Tag> | ||
| ))} | ||
| </span> | ||
| ) : ( | ||
| '' | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
src/customizations/@plone/volto-slate/editor/plugins/StyleMenu/README.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| This customization fixes bugs with styleMenu not highlighting selected styles in some scenarios. This should be removed after https://github.com/plone/volto/pull/4852 |
157 changes: 157 additions & 0 deletions
157
src/customizations/@plone/volto-slate/editor/plugins/StyleMenu/StyleMenu.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| import React from 'react'; | ||
| import { useSlate } from 'slate-react'; | ||
| import { Dropdown } from 'semantic-ui-react'; | ||
| import { useIntl, defineMessages } from 'react-intl'; | ||
| import cx from 'classnames'; | ||
| import { omit } from 'lodash'; | ||
| import { isBlockStyleActive, isInlineStyleActive, toggleStyle } from './utils'; | ||
| import config from '@plone/volto/registry'; | ||
| import { ToolbarButton } from '@plone/volto-slate/editor/ui'; | ||
| import paintSVG from '@plone/volto/icons/paint.svg'; | ||
|
|
||
| const messages = defineMessages({ | ||
| inlineStyle: { | ||
| id: 'Inline Style', | ||
| defaultMessage: 'Inline Style', | ||
| }, | ||
| paragraphStyle: { | ||
| id: 'Paragraph Style', | ||
| defaultMessage: 'Paragraph Style', | ||
| }, | ||
| additionalStyles: { | ||
| id: 'Additional Styles', | ||
| defaultMessage: 'Additional Styles', | ||
| }, | ||
| }); | ||
|
|
||
| const StyleMenuButton = ({ icon, active, ...props }) => ( | ||
| <ToolbarButton {...props} icon={icon} active={active} /> | ||
| ); | ||
|
|
||
| const MenuOpts = ({ editor, toSelect, option, type }) => { | ||
| const isActive = toSelect.includes(option); | ||
| return ( | ||
| <Dropdown.Item | ||
| as="span" | ||
| active={isActive} | ||
| className={cx(`${type}-${option.value}`, { active: isActive })} | ||
| {...omit(option, ['isBlock'])} | ||
| data-isblock={option.isBlock} | ||
| onClick={(event, selItem) => { | ||
| 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 = [ | ||
| ...config.settings.slate.styleMenu.inlineStyles.map((def) => { | ||
| return { | ||
| value: def.cssClass, | ||
| text: def.label, | ||
| icon: def.icon, | ||
| isBlock: false, | ||
| }; | ||
| }), | ||
| ]; | ||
| const blockOpts = [ | ||
| ...config.settings.slate.styleMenu.blockStyles.map((def) => { | ||
| return { | ||
| value: def.cssClass, | ||
| text: def.label, | ||
| icon: def.icon, | ||
| isBlock: true, | ||
| }; | ||
| }), | ||
| ]; | ||
|
|
||
| // Calculating the initial selection. | ||
| const toSelect = []; | ||
| // block styles | ||
| for (const val of blockOpts) { | ||
| const ia = isBlockStyleActive(editor, val.value); | ||
| if (ia) { | ||
| toSelect.push(val); | ||
| } | ||
| } | ||
| // inline styles | ||
| for (const val of inlineOpts) { | ||
| const ia = isInlineStyleActive(editor, val.value); | ||
| if (ia) { | ||
| toSelect.push(val); | ||
| } | ||
| } | ||
|
|
||
| const menuItemProps = { | ||
| toSelect, | ||
| editor, | ||
| }; | ||
| const showMenu = inlineOpts.length || blockOpts.length; | ||
| return showMenu ? ( | ||
| <Dropdown | ||
| id="style-menu" | ||
| pointing="top left" | ||
| multiple | ||
| value={toSelect} | ||
| disabled={config.settings.slate.styleMenu.disabled ?? false} | ||
| additionLabel={intl.formatMessage(messages.additionalStyles)} | ||
| trigger={ | ||
| <StyleMenuButton | ||
| title={intl.formatMessage(messages.additionalStyles)} | ||
| icon={paintSVG} | ||
| active={toSelect.length > 0} | ||
| /> | ||
| } | ||
| > | ||
| <Dropdown.Menu> | ||
| {inlineOpts.length ? ( | ||
| <> | ||
| <Dropdown.Header | ||
| content={intl.formatMessage(messages.inlineStyle)} | ||
| /> | ||
| {inlineOpts.map((option, index) => ( | ||
| <MenuOpts | ||
| {...menuItemProps} | ||
| type="inline-style" | ||
| option={option} | ||
| key={index} | ||
| /> | ||
| ))} | ||
| </> | ||
| ) : ( | ||
| '' | ||
| )} | ||
|
|
||
| {blockOpts.length ? ( | ||
| <> | ||
| <Dropdown.Header | ||
| content={intl.formatMessage(messages.paragraphStyle)} | ||
| /> | ||
| {blockOpts.map((option, index) => ( | ||
| <MenuOpts | ||
| {...menuItemProps} | ||
| type="block-style" | ||
| option={option} | ||
| key={index} | ||
| /> | ||
| ))} | ||
| </> | ||
| ) : ( | ||
| '' | ||
| )} | ||
| </Dropdown.Menu> | ||
| </Dropdown> | ||
| ) : ( | ||
| '' | ||
| ); | ||
| }; | ||
|
|
||
| export default StylingsButton; |
Oops, something went wrong.