set quotation marks by site language

kitconcept · Feb 19, 2024 · c3ba633 · c3ba633
1 parent 9643543
commit c3ba633
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 15 deletions.
diff --git a/src/components/View.jsx b/src/components/View.jsx
@@ -4,16 +4,18 @@ 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';
+import { useSelector } from 'react-redux';
 
 const View = (props) => {
   const { data, isEditMode } = props;
+  const language = useSelector((state) => state.intl.locale);
 
   const customSlateSettings = {
     ...props,
     slateSettings: {
       ...config.settings.slate,
       toolbarButtons: config.settings.slate.toolbarButtons.filter(
-        (index) => index - config.settings.slate.toolbarButtons,
+        (index) => index - config.settings.slate.toolbarButtons
       ),
     },
   };
@@ -37,7 +39,8 @@ const View = (props) => {
           )}
         <blockquote
           cite={data.cite}
-          className={cx(!isEditMode && data.quotationLanguage)}
+          lang={data.quotationLanguage}
+          siteLang={language}
         >
           {!isEditMode ? (
             <TextBlockView {...props} />

diff --git a/src/components/schema.js b/src/components/schema.js
@@ -37,14 +37,14 @@ export const QuoteBlockSchema = ({ intl }) => {
   const defaultLang = config.blocks?.blocksConfig?.quote?.defaultLang;
   const allowedLanguages = config.blocks?.blocksConfig?.quote?.allowedLanguages;
   const DEFAULT_LANGUAGES = [
-    ['EN', 'EN'],
-    ['DE', 'DE'],
+    ['en', 'en'],
+    ['de', 'de'],
   ];
 
   const filterDefaultLanguages = () => {
     if (allowedLanguages) {
       return DEFAULT_LANGUAGES.filter((item) =>
-        allowedLanguages.includes(item[0]),
+        allowedLanguages.includes(item[0])
       );
     } else {
       return DEFAULT_LANGUAGES;
@@ -59,13 +59,18 @@ export const QuoteBlockSchema = ({ intl }) => {
         id: 'default',
         title: 'Default',
         fields: config?.blocks?.blocksConfig?.quote?.showImageField
-          ? ['quotationLanguage', 'image']
-          : ['quotationLanguage'],
+          ? ['image']
+          : [],
       },
       {
-        id: 'person',
-        title: 'Person',
-        fields: ['author', 'additional_information', 'cite'],
+        id: 'author',
+        title: 'Author',
+        fields: ['author', 'additional_information'],
+      },
+      {
+        id: 'accessibility',
+        title: 'Accessibility',
+        fields: ['quotationLanguage', 'cite'],
       },
     ],
     properties: {

diff --git a/src/index.js b/src/index.js
@@ -22,8 +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'],
+    defaultLang: 'en',
+    allowedLanguages: ['en', 'de'],
   };
 
   return config;

diff --git a/src/theme/main.less b/src/theme/main.less
@@ -6,8 +6,8 @@
   margin: 0em 0em 1em;
 }
 
-.block.quote blockquote:not(.edit) {
-  &.EN p {
+.block.quote blockquote:not(.block-editor-quote blockquote) {
+  &[siteLang='en'] p {
     &::before {
       content: '"';
     }
@@ -17,7 +17,7 @@
     }
   }
 
-  &.DE p {
+  &[siteLang='de'] p {
     &::before {
       content: '„';
     }