@eeacms/volto-slate-metadata-mentions 4.0.3 → 5.0.0

package/CHANGELOG.md

@@ -4,9 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [5.0.0](https://github.com/eea/volto-slate-metadata-mentions/compare/4.0.3...5.0.0)
+
+- [Fix #24] Change metadata selector property name from 'id' to 'metadata' [`#24`](https://github.com/eea/volto-slate-metadata-mentions/issues/24)
+- Breaking 5.0.0 [`9daf888`](https://github.com/eea/volto-slate-metadata-mentions/commit/9daf88800e0f375b9e7927540827c64c8f03c00e)
+
 #### [4.0.3](https://github.com/eea/volto-slate-metadata-mentions/compare/4.0.2...4.0.3)
 
-- Disable faulty cypress test [`60f9d12`](https://github.com/eea/volto-slate-metadata-mentions/commit/60f9d12bf52282624b386b1d0490400bd9826f78)
+> 16 March 2022
+
+- Disable faulty cypress test [`#23`](https://github.com/eea/volto-slate-metadata-mentions/pull/23)
 
 #### [4.0.2](https://github.com/eea/volto-slate-metadata-mentions/compare/4.0.1...4.0.2)
 

package/Jenkinsfile

@@ -4,7 +4,7 @@ pipeline {
   environment {
         GIT_NAME = "volto-slate-metadata-mentions"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims,climate-energy.eea.europa.eu,sustainability.eionet.europa.eu,forest.eea.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims,climate-energy.eea.europa.eu,sustainability.eionet.europa.eu,forest.eea.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu"
         DEPENDENCIES = ""
         PLONE_VERSIONS = "plone.schema=1.3.0 plone.restapi=8.9.1"
         PLONE_ADDONS = "eea.schema.slate"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-slate-metadata-mentions",
-  "version": "4.0.3",
+  "version": "5.0.0",
   "description": "Volto Slate Metadata Mentions Plugin",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/plugins/Mentions/MentionEditor.jsx

@@ -44,6 +44,7 @@ export default (props) => {
   const active = getActiveElement(editor);
   const [elementNode] = active;
   const isElement = isActiveElement(editor);
+  const id = elementNode?.data?.metadata || elementNode?.data?.id;
 
   // Update the form data based on the current footnote
   const elRef = React.useRef(null);
@@ -53,7 +54,7 @@ export default (props) => {
     const data = elementNode.data
       ? {
           ...elementNode.data,
-          [elementNode.data.id]: metaData?.[elementNode.data.id],
+          [id]: metaData?.[id],
         }
       : {};
     setFormData(data);
@@ -68,10 +69,14 @@ export default (props) => {
         : {}; // TODO: provide fake block props in volto-slate. onChangeField is onChange
       if (hasValue(formData)) {
         // hasValue(formData) = !!formData.footnote
-        insertElement(editor, { id: formData?.id, widget: formData?.widget });
+        insertElement(editor, {
+          metadata: formData?.metadata,
+          widget: formData?.widget,
+        });
 
         // Update document metadata
-        onChangeField && onChangeField(formData?.id, formData[formData?.id]);
+        onChangeField &&
+          onChangeField(formData?.metadata, formData?.[formData?.metadata]);
       } else {
         unwrapElement(editor);
       }
@@ -104,8 +109,8 @@ export default (props) => {
         ],
         properties: {
           ...MentionSchema.properties,
-          id: {
-            ...MentionSchema.properties.id,
+          metadata: {
+            ...MentionSchema.properties.metadata,
             choices: Object.keys(properties)
               .map((key) => {
                 const val = properties[key];
@@ -121,16 +126,16 @@ export default (props) => {
   );
 
   React.useEffect(() => {
-    const metaId = elementNode?.data?.id;
+    const metaId = id;
     updateSchema(metaId);
-  }, [updateSchema, elementNode?.data?.id]);
+  }, [updateSchema, id]);
 
   const onChangeValues = React.useCallback(
     (id, value) => {
       const metaData = editor.getBlockProps
         ? editor.getBlockProps().metadata || editor.getBlockProps().properties
         : {};
-      if (id === 'id') {
+      if (id === 'metadata') {
         setFormData({
           ...formData,
           [id]: value,
@@ -149,7 +154,7 @@ export default (props) => {
   );
 
   const checkForCancel = () => {
-    if (!elementNode.data.id) {
+    if (!id) {
       unwrapElement(editor);
     }
   };

package/src/plugins/Mentions/index.js

@@ -50,7 +50,7 @@ export default (config) => {
     isInlineElement: true,
     editSchema: MentionSchema,
     extensions: [withMention],
-    hasValue: (formData) => !!formData.id,
+    hasValue: (formData) => !!(formData.metadata || formData.id),
     toolbarButtonIcon: mentionsSVG,
     messages,
   };

package/src/plugins/Mentions/render.jsx

@@ -17,6 +17,7 @@ export const MentionElement = ({
   const { data = {} } = element;
   const initialFormData = useSelector((state) => state?.content?.data || {});
   let metadata = { ...(extras?.metadata || initialFormData) };
+  const id = data?.metadata || data?.id;
 
   // Get data from the editor, if it exists. The editor has up to date block
   // props
@@ -27,21 +28,21 @@ export const MentionElement = ({
     metadata = blockProps.metadata || blockProps.properties || {};
   }
 
-  let output = metadata[data.id];
+  let output = metadata[id];
   let Widget = views.getWidget(data);
-  let className = 'metadata mention ' + data?.id;
+  let className = 'metadata mention ' + id;
 
   // If edit mode and output is empty render it's id
   if (editor && !output) {
     className += ' empty';
-    output = data?.id;
+    output = id;
     Widget = views.getWidget({ widget: 'default' });
   }
 
   return (
     <>
       {mode === 'view' ? (
-        <ErrorBoundary name={data.id}>
+        <ErrorBoundary name={id}>
           <Widget value={output} className={className}>
             {(child) => wrapInlineMarkupText(children, (c) => child)}
           </Widget>
@@ -57,7 +58,7 @@ export const MentionElement = ({
           }
         >
           <PopupContent>
-            <ErrorBoundary name={data.id}>
+            <ErrorBoundary name={id}>
               <Widget value={output} className={className} />
             </ErrorBoundary>
           </PopupContent>

package/src/plugins/Mentions/schema.js

@@ -4,15 +4,13 @@ export const MentionSchema = {
     {
       id: 'default',
       title: 'Default',
-      fields: ['id', 'widget'],
+      fields: ['metadata', 'widget'],
     },
   ],
   properties: {
-    id: {
+    metadata: {
       title: 'Metadata',
       description: 'Select metadata to be used',
-      factory: 'Choice',
-      type: 'string',
       choices: [
         ['title', 'Title'],
         ['description', 'Description'],
@@ -23,5 +21,5 @@ export const MentionSchema = {
       type: 'string',
     },
   },
-  required: ['id'],
+  required: ['metadata'],
 };