Support accordion block, description block, teaser block. Make tooltip component customizable.

.eslintrc.js

@@ -1,16 +1,14 @@
 const fs = require('fs');
 const projectRootPath = __dirname;
-const AddonConfigurationRegistry = require('@plone/registry/src/addon-registry');
+const { AddonRegistry } = require('@plone/registry/addon-registry');
 
 let coreLocation;
 if (fs.existsSync(`${projectRootPath}/core`))
   coreLocation = `${projectRootPath}/core`;
 else if (fs.existsSync(`${projectRootPath}/../../core`))
   coreLocation = `${projectRootPath}/../../core`;
 
-const registry = new AddonConfigurationRegistry(
-  `${coreLocation}/packages/volto`,
-);
+const { registry } = AddonRegistry.init(`${coreLocation}/packages/volto`);
 
 // Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
 const addonAliases = Object.keys(registry.packages).map((o) => [

.github/workflows/unit.yml

@@ -44,4 +44,4 @@ jobs:
         run: make install
 
       - name: Unit tests
-        run: make test-ci
+        run: make ci-test

Makefile

@@ -82,11 +82,6 @@ backend-test:  ## Test backend codebase
 # 	$(MAKE) -C "./backend/" clean
 # 	$(MAKE) -C "./frontend/" clean
 
-# .PHONY: check
-# check:  ## Lint and Format codebase
-# 	@echo "Lint and Format codebase"
-# 	$(PRE_COMMIT) run -a
-
 
 ###########################################
 # Frontend
@@ -149,12 +144,17 @@ release-dry-run: ## Dry-run the release of the add-on on npmjs.org
 test: ## Run unit tests
 	pnpm test
 
-.PHONY: test-ci
+.PHONY: ci-test
 ci-test: ## Run unit tests in CI
 	# Unit Tests need the i18n to be built
 	VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto i18n
 	CI=1 RAZZLE_JEST_CONFIG=$(CURRENT_DIR)/jest-addon.config.js pnpm --filter @plone/volto test -- --passWithNoTests
 
+.PHONY: check
+check:  ## Lint and Format codebase (run pre-commit)
+	@echo "Lint and Format codebase"
+	$(PRE_COMMIT) run -a
+
 .PHONY: backend-docker-start
 backend-docker-start:	## Starts a Docker-based backend for development
 	@echo "$(GREEN)==> Start Docker-based Plone Backend$(RESET)"

README.md

@@ -46,18 +46,12 @@ Regardless of this setting, when you have a fully uppercase term, for example `R
 
 By default we show tooltips for all occurrences of a term.
 
-Since version 2.0.0 you can configure to only show tooltips for the first occurence on a page.
+You can configure to only show tooltips for the first occurence on a page.
 
 ```js
 config.settings.glossary.matchOnlyFirstOccurence = true;
 ```
 
-
-User can opt-out by setting glossarytooltips to false.
-Add a boolean member field *glossarytooltips* for it.
-
-## Further configurations
-
 Hide alphabet navigation of glossary view:
 
 ```js
@@ -69,3 +63,129 @@ Show glossary term in tooltips header:
 ```js
 config.settings.glossary.mentionTermInTooltip = true;
 ```
+
+Show tooltips also in text blocks of an [accordion block](https://github.com/eea/volto-accordion-block):
+
+```js
+config.settings.glossary.includeAccordionBlock = true;
+```
+
+
+### Show tooltips also in a teaser block
+
+Per default only texts of slate blocks are equipped with tooltips.
+`TextWithGlossaryTooltips` can be used to enhance other texts with tooltip markup.
+
+Create a custom `TeaserView` component in your project:
+
+```js
+import TeaserBody from '@plone/volto/components/manage/Blocks/Teaser/Body';
+import { withBlockExtensions } from '@plone/volto/helpers/Extensions';
+import { TextWithGlossaryTooltips } from '@rohberg/volto-slate-glossary/utils';
+
+const TeaserView = (props) => {
+  return (
+    <TeaserBody
+      {...{
+        ...props,
+        data: {
+          ...props.data,
+          description: TextWithGlossaryTooltips({
+            text: props.data.description,
+          }),
+        },
+      }}
+    />
+  );
+};
+
+export default withBlockExtensions(TeaserView);
+```
+
+Register your `TeaserView` component:
+
+```js
+import TeaserViewWithTooltips from './components/TeaserViewWithTooltips'; // import by speaking name
+
+const applyConfig = (config) => {
+  // your project configuration…
+
+  // teaser block with tooltips 
+  config.blocks.blocksConfig.teaser.view = TeaserViewWithTooltips;
+  // teaser block in grid block also with tooltips 
+  config.blocks.blocksConfig.gridBlock.blocksConfig.teaser.view =
+    TeaserViewWithTooltips;
+
+  return config;
+};
+
+export default applyConfig;
+```
+
+You can find the code also via `packages/policy/src/index.js`.
+
+
+### Show tooltips also in a description block
+
+Per default only texts of slate blocks are equipped with tooltips.
+`TextWithGlossaryTooltips` can be used to enhance other texts with tooltip markup.
+
+Create a custom `DescriptionBlockView` in your project:
+
+```js
+import { TextWithGlossaryTooltips } from '@rohberg/volto-slate-glossary/utils';
+
+const DescriptionBlockView = ({ properties, metadata, id }) => {
+  let description = (metadata || properties)['description'] || '';
+  description = TextWithGlossaryTooltips({ text: description });
+
+  return <p className="documentDescription">{description}</p>;
+};
+
+export default DescriptionBlockView;
+````
+
+Register your `DescriptionBlockView` component:
+
+```js
+config.blocks.blocksConfig.description.view = DescriptionBlockViewWithTooltips; // import by speaking name
+```
+
+You can find the code also via `packages/policy/src/index.js`.
+
+
+### Register Custom tooltip component
+
+The tooltip component can be replaced by a custom one.
+
+```js
+  config.registerComponent({
+    name: 'TooltipPopup',
+    component: CustomTooltipPopup,
+  });
+  ````
+
+## Demo
+
+To see the add-on in action, set up backend and frontend of this package.
+
+backend:
+
+```shell
+make backend-install
+make backend-create-site
+make backend-start
+```
+
+frontend:
+
+```shell
+make install
+make start
+```
+
+
+## Opt-out for users
+
+A user can opt-out by setting glossarytooltips to false.
+Add a boolean member field `glossarytooltips` to provide this.