Merge pull request #6 from kitconcept/quotaion-enhancements

Quotation enhancements
kitconcept · Jan 30, 2024 · 55ebc18 · 55ebc18
2 parents a17a11f + 2668df1
commit 55ebc18
Show file tree

Hide file tree

Showing 11 changed files with 196 additions and 60 deletions.
diff --git a/README.md b/README.md
@@ -55,6 +55,24 @@ This option will enable an image and an alignment widget in the block settings,
 config.blocks.blocksConfig.quote.showImageField = true;
 ```
 
+#### `defaultLang`
+
+This option will set the default language in which the quotation marks should be shown. By default this option is set to `EN`.
+
+```js
+config.blocks.blocksConfig.quote.defaultLang = 'EN';
+```
+
+#### `allowedLanguages`
+
+This option will set the languages that are available to show the . By default this option is set to `['EN', 'DE']`.
+
+```js
+config.blocks.blocksConfig.quote.allowedLanguages = ['EN', 'DE'];
+```
+
+Currently available languages: EN, DE
+
 ## Credits
 
 <img alt="Deutsches Zentrum für Luft- und Raumfahrt (DLR)" width="200px" src="https://www.dlr.de/static/media/Logo-de.697a8e1f.svg" style="background-color:white">

diff --git a/acceptance/cypress/tests/basic.cy.js b/acceptance/cypress/tests/basic.cy.js
@@ -30,14 +30,15 @@ context("Basic Acceptance Tests", () => {
       cy.get(
         '[style="transition: opacity 500ms ease 0ms;"] > :nth-child(3) > .ui'
       ).click();
-      cy.get("#field-quote").click();
-      cy.get("#field-quote").type(
-        "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
-      );
+      cy.get(".block-editor-quote .text-slate-editor-inner .slate-editor p")
+        .click()
+        .type(
+          "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
+        );
       cy.get("#field-name").click();
       cy.get("#field-name").type("Quotator");
-      cy.get("#field-additionalData").click();
-      cy.get("#field-additionalData").type("Position and/or Date");
+      cy.get("#field-additional_information").click();
+      cy.get("#field-additional_information").type("Position and/or Date");
 
       cy.get("#toolbar-save").click();
     });
@@ -57,14 +58,15 @@ context("Basic Acceptance Tests", () => {
       cy.get(
         '[style="transition: opacity 500ms ease 0ms;"] > :nth-child(3) > .ui'
       ).click();
-      cy.get("#field-quote").click();
-      cy.get("#field-quote").type(
-        "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
-      );
+      cy.get(".block-editor-quote .text-slate-editor-inner .slate-editor p")
+        .click()
+        .type(
+          "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
+        );
       cy.get("#field-name").click();
       cy.get("#field-name").type("Quotator");
-      cy.get("#field-additionalData").click();
-      cy.get("#field-additionalData").type("Position and/or Date");
+      cy.get("#field-additional_information").click();
+      cy.get("#field-additional_information").type("Position and/or Date");
       cy.get(
         "#blockform-fieldset-default > .segment > .text > .grid > .stretched > .eight > .objectbrowser-field > .ui > .icon"
       ).click();

diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po
@@ -12,20 +12,25 @@ msgstr ""
 "Plural-Forms: \n"
 
 #: components/schema
-# defaultMessage: Additional data
-msgid "Additional data"
+# defaultMessage: Additional information
+msgid "Additional information"
 msgstr "Zusatzinformationen"
 
 #: components/schema
-# defaultMessage: undefined
-msgid "Alignment"
-msgstr "Ausrichtung"
+# defaultMessage: Cite
+msgid "Cite"
+msgstr "Zitiert"
 
 #: components/schema
 # defaultMessage: Image
 msgid "Image"
 msgstr "Bild"
 
+#: components/schema
+# defaultMessage: Language
+msgid "Language"
+msgstr "Sprache"
+
 #: components/schema
 # defaultMessage: Name
 msgid "Name"
@@ -35,3 +40,8 @@ msgstr "Name"
 # defaultMessage: Quote
 msgid "Quote"
 msgstr "Zitat"
+
+#: components/schema
+# defaultMessage: This field expects an URL as input (optional). If an URL is provided the additional information will have a relation to this URL, this is due to accessibility norms.
+msgid "This field expects an URL as input (optional). If an URL is provided the additional information will have a relation to this URL, this is due to accessibility norms."
+msgstr "Dieses Feld erwartet eine URL als Eingabe (optional). Wenn eine URL angegeben wird, beziehen sich die Zusatzinformationen auf diese URL, um Barrierefreiheit zu gewährleisten."
diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po
@@ -12,20 +12,25 @@ msgstr ""
 "Plural-Forms: \n"
 
 #: components/schema
-# defaultMessage: Additional data
-msgid "Additional data"
+# defaultMessage: Additional information
+msgid "Additional information"
 msgstr ""
 
 #: components/schema
-# defaultMessage: undefined
-msgid "Alignment"
+# defaultMessage: Cite
+msgid "Cite"
 msgstr ""
 
 #: components/schema
 # defaultMessage: Image
 msgid "Image"
 msgstr ""
 
+#: components/schema
+# defaultMessage: Language
+msgid "Language"
+msgstr ""
+
 #: components/schema
 # defaultMessage: Name
 msgid "Name"
@@ -35,3 +40,8 @@ msgstr ""
 # defaultMessage: Quote
 msgid "Quote"
 msgstr ""
+
+#: components/schema
+# defaultMessage: This field expects an URL as input (optional). If an URL is provided the additional information will have a relation to this URL, this is due to accessibility norms.
+msgid "This field expects an URL as input (optional). If an URL is provided the additional information will have a relation to this URL, this is due to accessibility norms."
+msgstr ""
diff --git a/locales/volto.pot b/locales/volto.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-01-08T10:14:30.347Z\n"
+"POT-Creation-Date: 2024-01-30T09:51:05.697Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -14,20 +14,25 @@ msgstr ""
 "Domain: volto\n"
 
 #: components/schema
-# defaultMessage: Additional data
-msgid "Additional data"
+# defaultMessage: Additional information
+msgid "Additional information"
 msgstr ""
 
 #: components/schema
-# defaultMessage: undefined
-msgid "Alignment"
+# defaultMessage: Cite
+msgid "Cite"
 msgstr ""
 
 #: components/schema
 # defaultMessage: Image
 msgid "Image"
 msgstr ""
 
+#: components/schema
+# defaultMessage: Language
+msgid "Language"
+msgstr ""
+
 #: components/schema
 # defaultMessage: Name
 msgid "Name"
@@ -37,3 +42,8 @@ msgstr ""
 # defaultMessage: Quote
 msgid "Quote"
 msgstr ""
+
+#: components/schema
+# defaultMessage: This field expects an URL as input (optional). If an URL is provided the additional information will have a relation to this URL, this is due to accessibility norms.
+msgid "This field expects an URL as input (optional). If an URL is provided the additional information will have a relation to this URL, this is due to accessibility norms."
+msgstr ""
diff --git a/news/4.feature b/news/4.feature
@@ -0,0 +1 @@
+- implement inline text editor [@jonaspiterek]
diff --git a/news/5.feature b/news/5.feature
@@ -0,0 +1 @@
+- implement language selector to display typographical correct quotation marks for different languages [@jonaspiterek]
diff --git a/src/components/View.jsx b/src/components/View.jsx
@@ -2,34 +2,59 @@ import React from 'react';
 import config from '@plone/volto/registry';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import cx from 'classnames';
+import { DetachedTextBlockEditor } from '@plone/volto-slate/blocks/Text/DetachedTextBlockEditor';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 
 const View = (props) => {
-  const { data } = props;
+  const { data, isEditMode } = props;
+
+  const customSlateSettings = {
+    ...props,
+    slateSettings: {
+      ...config.settings.slate,
+      toolbarButtons: config.settings.slate.toolbarButtons.filter(
+        (index) => index - config.settings.slate.toolbarButtons,
+      ),
+    },
+  };
 
   return (
     <div className="block quote">
       <div className="inner-wrapper">
-        {config?.blocks?.blocksConfig?.quote.showImageField &&
-          data?.image?.[0] && (
-            <div className={cx('image-wrapper', `align-${data.alignment}`)}>
+        {config.blocks?.blocksConfig?.quote?.showImageField &&
+          data.image?.[0] && (
+            <div className="image-wrapper">
               <img
-                src={`${flattenToAppURL(data?.image[0]['@id'])}/${
-                  data?.image[0]?.image_scales?.image[0]?.scales?.preview
+                src={`${flattenToAppURL(data.image?.[0]?.['@id'])}/${
+                  data.image?.[0]?.image_scales?.image[0]?.scales?.preview
                     ?.download
                 }}`}
-                alt={data.image[0].title}
+                alt={data.image?.[0]?.title}
                 className="image"
                 loading="lazy"
               />
             </div>
           )}
-        <figure className="quotation">
-          <blockquote className="quote-text">{data.quote}</blockquote>
-          <figcaption className="person">
-            <span className="name">{data.name}</span>
-            {data.additionalData && `, ${data.additionalData}`}
-          </figcaption>
-        </figure>
+        <blockquote
+          cite={data.cite}
+          className={cx(data.language, isEditMode && 'edit')}
+        >
+          {!isEditMode ? (
+            <TextBlockView {...props} />
+          ) : (
+            <DetachedTextBlockEditor {...customSlateSettings} />
+          )}
+          <footer>
+            {`${data.name}, `}
+            {data.additional_information && data.cite ? (
+              <cite>{data.additional_information}</cite>
+            ) : (
+              data.additional_information && (
+                <span>{data.additional_information}</span>
+              )
+            )}
+          </footer>
+        </blockquote>
       </div>
     </div>
   );

diff --git a/src/components/schema.js b/src/components/schema.js
@@ -6,6 +6,10 @@ const messages = defineMessages({
     id: 'Quote',
     defaultMessage: 'Quote',
   },
+  language: {
+    id: 'Language',
+    defaultMessage: 'Language',
+  },
   image: {
     id: 'Image',
     defaultMessage: 'Image',
@@ -14,38 +18,63 @@ const messages = defineMessages({
     id: 'Name',
     defaultMessage: 'Name',
   },
-  additionalData: {
-    id: 'Additional data',
-    defaultMessage: 'Additional data',
+  additional_information: {
+    id: 'Additional information',
+    defaultMessage: 'Additional information',
+  },
+  cite: {
+    id: 'Cite',
+    defaultMessage: 'Cite',
   },
-  alignment: {
-    id: 'Alignment',
-    defineMessage: 'Alignment',
+  description: {
+    id: 'This field expects an URL as input (optional). If an URL is provided the additional information will have a relation to this URL, this is due to accessibility norms.',
+    defaultMessage:
+      'This field expects an URL as input (optional). If an URL is provided the additional information will have a relation to this URL, this is due to accessibility norms.',
   },
 });
 
 export const QuoteBlockSchema = ({ intl }) => {
+  const defaultLang = config.blocks?.blocksConfig?.quote?.defaultLang;
+  const allowed_languages =
+    config.blocks?.blocksConfig?.quote?.allowed_languages;
+  const DEFAULT_LANGUAGES = [
+    ['EN', 'EN'],
+    ['DE', 'DE'],
+  ];
+
+  const filterDefaultLanguages = () => {
+    if (allowed_languages) {
+      return DEFAULT_LANGUAGES.filter((item) =>
+        allowed_languages.includes(item[0]),
+      );
+    } else {
+      return DEFAULT_LANGUAGES;
+    }
+  };
+
   return {
     title: intl.formatMessage(messages.quote),
     block: 'quote',
     fieldsets: [
       {
         id: 'default',
         title: 'Default',
-        fields: config?.blocks?.blocksConfig?.quote.showImageField
-          ? ['quote', 'image', 'alignment']
-          : ['quote'],
+        fields: config?.blocks?.blocksConfig?.quote?.showImageField
+          ? ['language', 'image']
+          : ['language'],
       },
       {
         id: 'person',
         title: 'Person',
-        fields: ['name', 'additionalData'],
+        fields: ['name', 'additional_information', 'cite'],
       },
     ],
     properties: {
-      quote: {
-        title: intl.formatMessage(messages.quote),
-        widget: 'textarea',
+      language: {
+        title: intl.formatMessage(messages.language),
+        choices: filterDefaultLanguages(),
+        default: defaultLang,
+        noValueOption: false,
       },
       image: {
         title: intl.formatMessage(messages.image),
@@ -57,14 +86,13 @@ export const QuoteBlockSchema = ({ intl }) => {
       name: {
         title: intl.formatMessage(messages.name),
       },
-      additionalData: {
-        title: intl.formatMessage(messages.additionalData),
+      additional_information: {
+        title: intl.formatMessage(messages.additional_information),
       },
-      alignment: {
-        title: intl.formatMessage(messages.alignment),
-        widget: 'align',
-        actions: ['left', 'center', 'right'],
-        default: 'center',
+      cite: {
+        title: intl.formatMessage(messages.cite),
+        widget: 'url',
+        description: intl.formatMessage(messages.description),
       },
     },
     required: [],

diff --git a/src/index.js b/src/index.js
@@ -22,6 +22,8 @@ const applyConfig = (config) => {
     // If an image is added and later on the image field get's disabled by setting 'showImageField' to 'false',
     // the image and alignment fields aswell as the image won't show any longer.
     showImageField: true,
+    defaultLang: 'EN',
+    allowedLanguages: ['EN', 'DE'],
   };
 
   return config;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- implement language selector to display typographical correct quotation marks for different languages [@jonaspiterek]