diff --git a/README.md b/README.md index 800f6c6..dff1ba5 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,24 @@ -# Volto Add-On @rohberg/volto-slate-glossary +# @rohberg/volto-slate-glossary -## Add tooltips for glossary terms of [collective.glossary](https://github.com/collective/collective.glossary) +Volto Add-On `@rohberg/volto-slate-glossary` adds tooltips for glossary terms of [collective.glossary](https://github.com/collective/collective.glossary) -![Tooltips @rohberg/volto-slate-glossary](https://github.com/rohberg/volto-slate-glossary/blob/6deebe7ecfa5a6265e2ead8f5902cfd2243329ca/public/tooltips.png) +![Tooltips @rohberg/volto-slate-glossary](https://github.com/rohberg/volto-slate-glossary/raw/main/public/volto-slate-glossary-tooltips.png) -## work-in-progress - -Include in your project with +Determine where to apply tooltips in your project by match configuration: import { Tooltips } from '@rohberg/volto-slate-glossary/components'; - // All your imports required for the config here BEFORE this line - import '@plone/volto/config'; - export default function applyConfig(config) { config.settings = { ...config.settings, appExtras: [ ...config.settings.appExtras, { - match: '', + match: '/documentation', + component: Tooltips, + }, + { + match: '/news', component: Tooltips, }, ], @@ -28,9 +27,8 @@ Include in your project with return config; } -Hack: Use the customized *serializeNodes* in *TextBlockView* instead of that from volto-slate. **TODO** Find a way to hook into rendering of blocks. A block tranformer is not appropriate as it manipulates the block data permanently. We want the blocks data to be untouched. -Install Plone Add-On [collective.glossary branch Plone5.2](https://github.com/collective/collective.glossary) in your backend. +Install Plone Add-On [collective.glossary](https://github.com/collective/collective.glossary) in your backend. User can opt-out by setting glossarytooltips to false. Add a member field *glossarytooltips*. diff --git a/TODO.md b/TODO.md index 5ab5a7c..2cbcdf5 100644 --- a/TODO.md +++ b/TODO.md @@ -1,3 +1,4 @@ ## TODO -- Restrict to collective.glossary settings portal types \ No newline at end of file +- Restrict to collective.glossary settings portal types +- Support global switch of collective.glossary diff --git a/package.json b/package.json index 6708fa0..9c461c7 100644 --- a/package.json +++ b/package.json @@ -14,10 +14,8 @@ "i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon" }, "addons": [ - "volto-slate:asDefault" ], "dependencies": { - "@plone/scripts": "*", - "volto-slate": "*" + "@plone/scripts": "*" } } diff --git a/public/tooltips.png b/public/tooltips.png deleted file mode 100644 index 61f81c6..0000000 Binary files a/public/tooltips.png and /dev/null differ diff --git a/public/volto-slate-glossary-tooltips.png b/public/volto-slate-glossary-tooltips.png new file mode 100644 index 0000000..60b5ceb Binary files /dev/null and b/public/volto-slate-glossary-tooltips.png differ diff --git a/src/components/GlossaryView.jsx b/src/components/GlossaryView.jsx index 1d6054f..b3df2d4 100644 --- a/src/components/GlossaryView.jsx +++ b/src/components/GlossaryView.jsx @@ -27,7 +27,7 @@ const GlossaryView = ({ content }) => {
{Object.keys(glossaryentries || {})?.map((letter) => ( -
+

{letter}

{glossaryentries[letter].map((item) => (
diff --git a/src/components/TermView.jsx b/src/components/TermView.jsx index 923dd63..73158d4 100644 --- a/src/components/TermView.jsx +++ b/src/components/TermView.jsx @@ -24,7 +24,7 @@ const TermView = ({ content }) => { {content.definition && (

)} diff --git a/src/index.js b/src/index.js index 04a9776..6b638cb 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,12 @@ -import { serializeNodes } from './utils'; import GlossaryView from './components/GlossaryView'; import TermView from './components/TermView'; import { glossarytermsReducer, glossarytooltiptermsReducer } from './reducers'; - -// TODO restrict tooltips to paths and portal_types +import { TextWithGlossaryTooltips } from './utils'; export default (config) => { + config.settings.slate.leafs = { + text: ({ children }) => , + }; config.views = { ...config.views, contentTypesViews: { @@ -23,5 +24,3 @@ export default (config) => { return config; }; - -export { serializeNodes }; diff --git a/src/utils.js b/src/utils.js index 039ddcf..66c7852 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,27 +1,24 @@ -/** - * customization of serializeNodes from volto-slate to apply glossary tooltips in text blocks - * TODO find better solution without overriding serializeNodes. Something like a configurable Leaf. - * See https://community.plone.org/t/slate-rendering/13787/4 - */ - import React from 'react'; import { useSelector } from 'react-redux'; -import { flatten, isEqual } from 'lodash'; +import { flatten } from 'lodash'; import { Popup } from 'semantic-ui-react'; -import { Node, Text } from 'slate'; - -import { Element, Leaf } from 'volto-slate/editor/render'; +import { useLocation } from 'react-router-dom'; -const TextWithGlossaryTooltips = ({ text }) => { +export const TextWithGlossaryTooltips = ({ text }) => { const glossaryterms = useSelector( (state) => state.glossarytooltipterms?.result?.items, ); + const location = useLocation(); // no tooltips if user opted out const currentuser = useSelector((state) => state.users?.user); const glossarytooltips = currentuser?.glossarytooltips ?? true; if (!glossarytooltips) { - return {text}; + return text; + } + const isEditMode = location.pathname.slice(-5) === '/edit'; + if (isEditMode || location.pathname === '/' || !__CLIENT__) { + return text; } let result = [{ type: 'text', val: text }]; @@ -63,7 +60,6 @@ const TextWithGlossaryTooltips = ({ text }) => { } else { let idx = glossaryterms.findIndex((variant) => variant.term === el.val); let definition = glossaryterms[idx]?.definition || ''; - // TODO convert definition to ul switch (definition.length) { case 0: definition = ''; @@ -96,40 +92,3 @@ const TextWithGlossaryTooltips = ({ text }) => { } }); }; - -const serializeData = (node) => { - return JSON.stringify({ type: node.type, data: node.data }); -}; - -export const serializeNodes = (nodes, getAttributes) => { - const editor = { children: nodes || [] }; - - const _serializeNodes = (nodes) => { - return (nodes || []).map(([node, path], i) => { - return Text.isText(node) ? ( - - - - ) : ( - - {_serializeNodes(Array.from(Node.children(editor, path)))} - - ); - }); - }; - - return _serializeNodes(Array.from(Node.children(editor, []))); -};