@plone/volto 14.4.0 → 14.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 14.5.0 (2022-01-26)
+
+### Feature
+
+- VocabularyTermsWidget: Token is now on creation of term editable, but stays ineditable afterwards.  @ksuess
+
+### Bugfix
+
+- Fix A11Y violations in Navigation @iRohitSingh
+- Fix `language-independent-field` CSS class styling @sneridagh
+
+### Internal
+
+- Lazyload react-beautiful-dnd @tiberiuichim
+- Lazyload react-dnd @tiberiuichim
+- Improve docs on environment variables, add recipes @sneridagh
+- Update p.restapi to 8.20.0 and plone.volto to 4.0.0a1 and plone.rest to 2.0.0a2 @sneridagh
+
 ## 14.4.0 (2022-01-21)
 
 ### Feature
@@ -16,6 +34,7 @@
 
 ### Bugfix
 
+- Fix ListingBlock to add "No results" message when there are no messages @erral
 - Fix overflow table in Content view @giuliaghisini
 - Fixed url validation in FormValidation to admit ip addresses. @giuliaghisini
 - Upgrade to plone.restapi 8.19.0 (to support the language independent fields serialization) @sneridagh

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "14.4.0",
+  "version": "14.5.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"

package/src/components/manage/Add/Add.jsx

@@ -12,8 +12,6 @@ import { keys, isEmpty } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Button, Grid, Menu } from 'semantic-ui-react';
 import { Portal } from 'react-portal';
-import { DragDropContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
 import { v4 as uuid } from 'uuid';
 import qs from 'query-string';
 import { toast } from 'react-toastify';
@@ -446,7 +444,6 @@ class Add extends Component {
 }
 
 export default compose(
-  DragDropContext(HTML5Backend),
   injectIntl,
   connect(
     (state, props) => ({

package/src/components/manage/Blocks/Block/BlocksForm.test.jsx

@@ -6,6 +6,12 @@ import { render } from '@testing-library/react';
 
 import config from '@plone/volto/registry';
 
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
 let mockSerial = 0;
 
 jest.mock('uuid', () => {

package/src/components/manage/Blocks/Listing/ListingBody.jsx

@@ -97,6 +97,12 @@ const ListingBody = withQuerystringResults((props) => {
     </div>
   ) : (
     <div>
+      {hasLoaded && (
+        <FormattedMessage
+          id="No results found."
+          defaultMessage="No results found."
+        />
+      )}
       <Dimmer active={!hasLoaded} inverted>
         <Loader indeterminate size="small">
           <FormattedMessage id="loading" defaultMessage="Loading" />

package/src/components/manage/Contents/Contents.jsx

@@ -33,8 +33,6 @@ import {
   pull,
 } from 'lodash';
 import move from 'lodash-move';
-import { DragDropContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { asyncConnect } from '@plone/volto/helpers';
 
@@ -1780,9 +1778,21 @@ class Contents extends Component {
   }
 }
 
+const DragDropConnector = (props) => {
+  const { DragDropContext } = props.reactDnd;
+  const HTML5Backend = props.reactDndHtml5Backend.default;
+
+  const DndConnectedContents = React.useMemo(
+    () => DragDropContext(HTML5Backend)(Contents),
+    [DragDropContext, HTML5Backend],
+  );
+
+  return <DndConnectedContents {...props} />;
+};
+
 export const __test__ = compose(
   injectIntl,
-  injectLazyLibs(['toastify']),
+  injectLazyLibs(['toastify', 'reactDnd']),
   connect(
     (store, props) => {
       return {
@@ -1822,7 +1832,6 @@ export const __test__ = compose(
 )(Contents);
 
 export default compose(
-  DragDropContext(HTML5Backend),
   injectIntl,
   connect(
     (store, props) => {
@@ -1869,5 +1878,5 @@ export default compose(
         await dispatch(listActions(getBaseUrl(location.pathname))),
     },
   ]),
-  injectLazyLibs(['toastify']),
-)(Contents);
+  injectLazyLibs(['toastify', 'reactDnd', 'reactDndHtml5Backend']),
+)(DragDropConnector);

package/src/components/manage/Contents/ContentsIndexHeader.jsx

@@ -5,8 +5,8 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DragSource, DropTarget } from 'react-dnd';
 import { injectIntl } from 'react-intl';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 const widthValues = [
   'one',
@@ -69,39 +69,51 @@ ContentsIndexHeaderComponent.propTypes = {
   onOrderIndex: PropTypes.func.isRequired,
 };
 
-export default DropTarget(
-  'index',
-  {
-    hover(props, monitor) {
-      const dragOrder = monitor.getItem().order;
-      const hoverOrder = props.order;
+const DragDropConnector = (props) => {
+  const { DropTarget, DragSource } = props.reactDnd;
 
-      if (dragOrder === hoverOrder) {
-        return;
-      }
+  const DndConnectedContentsIndexHeader = React.useMemo(
+    () =>
+      DropTarget(
+        'index',
+        {
+          hover(props, monitor) {
+            const dragOrder = monitor.getItem().order;
+            const hoverOrder = props.order;
 
-      props.onOrderIndex(dragOrder, hoverOrder - dragOrder);
+            if (dragOrder === hoverOrder) {
+              return;
+            }
 
-      monitor.getItem().order = hoverOrder;
-    },
-  },
-  (connect) => ({
-    connectDropTarget: connect.dropTarget(),
-  }),
-)(
-  DragSource(
-    'index',
-    {
-      beginDrag(props) {
-        return {
-          id: props.label,
-          order: props.order,
-        };
-      },
-    },
-    (connect, monitor) => ({
-      connectDragSource: connect.dragSource(),
-      isDragging: monitor.isDragging(),
-    }),
-  )(injectIntl(ContentsIndexHeaderComponent)),
-);
+            props.onOrderIndex(dragOrder, hoverOrder - dragOrder);
+
+            monitor.getItem().order = hoverOrder;
+          },
+        },
+        (connect) => ({
+          connectDropTarget: connect.dropTarget(),
+        }),
+      )(
+        DragSource(
+          'index',
+          {
+            beginDrag(props) {
+              return {
+                id: props.label,
+                order: props.order,
+              };
+            },
+          },
+          (connect, monitor) => ({
+            connectDragSource: connect.dragSource(),
+            isDragging: monitor.isDragging(),
+          }),
+        )(injectIntl(ContentsIndexHeaderComponent)),
+      ),
+    [DragSource, DropTarget],
+  );
+
+  return <DndConnectedContentsIndexHeader {...props} />;
+};
+
+export default injectLazyLibs('reactDnd')(DragDropConnector);

package/src/components/manage/Contents/ContentsItem.jsx

@@ -9,7 +9,6 @@ import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
 import moment from 'moment';
-import { DragSource, DropTarget } from 'react-dnd';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { Icon, Circle } from '@plone/volto/components';
 import { getContentIcon } from '@plone/volto/helpers';
@@ -26,6 +25,8 @@ import editingSVG from '@plone/volto/icons/editing.svg';
 import dragSVG from '@plone/volto/icons/drag.svg';
 import cx from 'classnames';
 
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
 const messages = defineMessages({
   private: {
     id: 'private',
@@ -313,55 +314,67 @@ ContentsItemComponent.propTypes = {
   onOrderItem: PropTypes.func.isRequired,
 };
 
-export default DropTarget(
-  'item',
-  {
-    hover(props, monitor) {
-      const id = monitor.getItem().id;
-      const dragOrder = monitor.getItem().order;
-      const hoverOrder = props.order;
+const DragDropConnector = (props) => {
+  const { DropTarget, DragSource } = props.reactDnd;
 
-      if (dragOrder === hoverOrder) {
-        return;
-      }
+  const DndConnectedContentsItem = React.useMemo(
+    () =>
+      DropTarget(
+        'item',
+        {
+          hover(props, monitor) {
+            const id = monitor.getItem().id;
+            const dragOrder = monitor.getItem().order;
+            const hoverOrder = props.order;
 
-      props.onOrderItem(id, dragOrder, hoverOrder - dragOrder, false);
+            if (dragOrder === hoverOrder) {
+              return;
+            }
 
-      monitor.getItem().order = hoverOrder;
-    },
-    drop(props, monitor) {
-      const id = monitor.getItem().id;
-      const dragOrder = monitor.getItem().startOrder;
-      const dropOrder = props.order;
+            props.onOrderItem(id, dragOrder, hoverOrder - dragOrder, false);
 
-      if (dragOrder === dropOrder) {
-        return;
-      }
+            monitor.getItem().order = hoverOrder;
+          },
+          drop(props, monitor) {
+            const id = monitor.getItem().id;
+            const dragOrder = monitor.getItem().startOrder;
+            const dropOrder = props.order;
 
-      props.onOrderItem(id, dragOrder, dropOrder - dragOrder, true);
+            if (dragOrder === dropOrder) {
+              return;
+            }
 
-      monitor.getItem().order = dropOrder;
-    },
-  },
-  (connect) => ({
-    connectDropTarget: connect.dropTarget(),
-  }),
-)(
-  DragSource(
-    'item',
-    {
-      beginDrag(props) {
-        return {
-          id: props.item['@id'],
-          order: props.order,
-          startOrder: props.order,
-        };
-      },
-    },
-    (connect, monitor) => ({
-      connectDragSource: connect.dragSource(),
-      connectDragPreview: connect.dragPreview(),
-      isDragging: monitor.isDragging(),
-    }),
-  )(ContentsItemComponent),
-);
+            props.onOrderItem(id, dragOrder, dropOrder - dragOrder, true);
+
+            monitor.getItem().order = dropOrder;
+          },
+        },
+        (connect) => ({
+          connectDropTarget: connect.dropTarget(),
+        }),
+      )(
+        DragSource(
+          'item',
+          {
+            beginDrag(props) {
+              return {
+                id: props.item['@id'],
+                order: props.order,
+                startOrder: props.order,
+              };
+            },
+          },
+          (connect, monitor) => ({
+            connectDragSource: connect.dragSource(),
+            connectDragPreview: connect.dragPreview(),
+            isDragging: monitor.isDragging(),
+          }),
+        )(ContentsItemComponent),
+      ),
+    [DragSource, DropTarget],
+  );
+
+  return <DndConnectedContentsItem {...props} />;
+};
+
+export default injectLazyLibs('reactDnd')(DragDropConnector);

package/src/components/manage/DragDropList/DragDropList.jsx

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { isEmpty } from 'lodash';
-import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { v4 as uuid } from 'uuid';
 
 const getPlaceholder = (draggedDOM, sourceIndex, destinationIndex) => {
@@ -55,7 +55,9 @@ const DragDropList = (props) => {
     as = 'div',
     style,
     forwardedAriaLabelledBy,
+    reactBeautifulDnd,
   } = props; //renderChild
+  const { DragDropContext, Draggable, Droppable } = reactBeautifulDnd;
   const [placeholderProps, setPlaceholderProps] = React.useState({});
   const [uid] = React.useState(uuid());
   // queueing timed action
@@ -157,4 +159,4 @@ const DragDropList = (props) => {
   );
 };
 
-export default DragDropList;
+export default injectLazyLibs(['reactBeautifulDnd'])(DragDropList);

package/src/components/manage/Form/Field.jsx

@@ -5,9 +5,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DragSource, DropTarget } from 'react-dnd';
 import { injectIntl } from 'react-intl';
 import config from '@plone/volto/registry';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 const MODE_HIDDEN = 'hidden'; //hidden mode. If mode is hidden, field is not rendered
 /**
@@ -150,7 +150,7 @@ const getWidgetByType = (type) => config.widgets.type[type] || null;
  * @param {Object} props Properties.
  * @returns {string} Markup of the component.
  */
-const Field = (props, { intl }) => {
+const UnconnectedField = (props, { intl }) => {
   const Widget =
     getWidgetByFieldId(props.id) ||
     getWidgetFromTaggedValues(props.widgetOptions) ||
@@ -173,6 +173,7 @@ const Field = (props, { intl }) => {
   };
 
   if (props.onOrder) {
+    const { DropTarget, DragSource } = props.reactDnd;
     const WrappedWidget = DropTarget(
       'field',
       {
@@ -230,6 +231,15 @@ const Field = (props, { intl }) => {
   return <Widget {...widgetProps} />;
 };
 
+const DndConnectedField = injectLazyLibs(['reactDnd'])(UnconnectedField);
+
+const Field = (props) =>
+  props.onOrder ? (
+    <DndConnectedField {...props} />
+  ) : (
+    <UnconnectedField {...props} />
+  );
+
 /**
  * Property types.
  * @property {Object} propTypes Property types.

package/src/components/manage/Widgets/ObjectListWidget.test.js

@@ -5,6 +5,12 @@ import configureStore from 'redux-mock-store';
 import '@testing-library/jest-dom/extend-expect';
 import ObjectListWidget from './ObjectListWidget';
 
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
 let mockSerial = 0;
 const mockStore = configureStore();
 

package/src/components/manage/Widgets/SchemaWidget.jsx

@@ -11,7 +11,7 @@ import { concat, findIndex, isString, map, omit, slice, without } from 'lodash';
 import move from 'lodash-move';
 import { Confirm, Form, Grid, Icon, Message, Segment } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
-import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import {
   Field,
@@ -1078,7 +1078,8 @@ class SchemaWidget extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    const { error } = this.props;
+    const { error, reactBeautifulDnd } = this.props;
+    const { Draggable, DragDropContext, Droppable } = reactBeautifulDnd;
     if (!this.props.value) {
       return '';
     }
@@ -1427,6 +1428,7 @@ class SchemaWidget extends Component {
 
 export default compose(
   injectIntl,
+  injectLazyLibs(['reactBeautifulDnd']),
   connect(
     (state, props) => ({
       value: isString(props.value) ? JSON.parse(props.value) : props.value,

package/src/components/manage/Widgets/SchemaWidget.test.jsx

@@ -5,6 +5,12 @@ import { Provider } from 'react-intl-redux';
 
 import SchemaWidget from './SchemaWidget';
 
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
 const mockStore = configureStore();
 
 test('renders a schema widget component', () => {

package/src/components/manage/Widgets/SchemaWidgetFieldset.jsx

@@ -7,9 +7,10 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Draggable } from 'react-beautiful-dnd';
 import { Icon } from 'semantic-ui-react';
 
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
 /**
  * Schema widget fieldset component.
  * @function SchemaWidgetFieldset
@@ -26,8 +27,9 @@ export const SchemaWidgetFieldsetComponent = ({
   getItemStyle,
   isDraggable,
   isDisabled,
+  reactBeautifulDnd,
 }) => (
-  <Draggable draggableId={title} index={order} key={title}>
+  <reactBeautifulDnd.Draggable draggableId={title} index={order} key={title}>
     {(provided, snapshot) => (
       <div
         className={`item${active ? ' active' : ''}`}
@@ -71,7 +73,7 @@ export const SchemaWidgetFieldsetComponent = ({
         )}
       </div>
     )}
-  </Draggable>
+  </reactBeautifulDnd.Draggable>
 );
 
 /**
@@ -91,4 +93,6 @@ SchemaWidgetFieldsetComponent.propTypes = {
   isDisabled: PropTypes.bool,
 };
 
-export default SchemaWidgetFieldsetComponent;
+export default injectLazyLibs(['reactBeautifulDnd'])(
+  SchemaWidgetFieldsetComponent,
+);

package/src/components/manage/Widgets/SchemaWidgetFieldset.test.jsx

@@ -1,7 +1,13 @@
 import React from 'react';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import renderer from 'react-test-renderer';
-import { SchemaWidgetFieldsetComponent } from './SchemaWidgetFieldset';
+import SchemaWidgetFieldsetComponent from './SchemaWidgetFieldset';
+
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
 
 test('renders a contents item component', () => {
   const component = renderer.create(

package/src/components/manage/Widgets/VocabularyTermsWidget.jsx

@@ -84,11 +84,11 @@ def TalkTypesVocabulary(context):
 
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { findIndex, remove } from 'lodash';
+import { find, findIndex, remove } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
 import { v4 as uuid } from 'uuid';
 
-import { Button, Segment } from 'semantic-ui-react';
+import { Button } from 'semantic-ui-react';
 
 import {
   DragDropList,
@@ -134,6 +134,7 @@ const VocabularyTermsWidget = (props) => {
   var widgetvalue = value;
   const dispatch = useDispatch();
   const [toFocusId, setToFocusId] = React.useState('');
+  const [editableToken, setEditableToken] = React.useState('');
   const intl = useIntl();
 
   React.useEffect(() => {
@@ -206,6 +207,7 @@ const VocabularyTermsWidget = (props) => {
       items: newitems,
     });
     setToFocusId(`field-${supportedLanguages[0]}-0-${id}-${newtoken}`);
+    setEditableToken(newtoken);
   }
 
   function swap(arr, from, to) {
@@ -217,10 +219,7 @@ const VocabularyTermsWidget = (props) => {
   });
 
   return (
-    <FormFieldWrapper {...props} className="dictwidget">
-      <Segment basic>
-        <h3>{props.title}</h3>
-      </Segment>
+    <FormFieldWrapper {...props} className="vocabularytermswidget dictwidget">
       <div className="add-item-button-wrapper">
         <Button
           aria-label={intl.formatMessage(messages.termtitle)}
@@ -268,7 +267,7 @@ const VocabularyTermsWidget = (props) => {
               schema={TermSchema}
               title="Translation of term"
             />,
-            termProps,
+            { editableToken, setEditableToken, ...termProps },
           );
         }}
       </DragDropList>
@@ -287,6 +286,33 @@ const TermsWrapper = (props) => {
   const { termProps, draginfo, children } = props;
   const { id, vocabularyterms, vterm, onChange } = termProps;
 
+  const _updateTermsWithNewToken = (term, newtoken) => {
+    let newitems = termProps.vocabularyterms;
+    let index = findIndex(newitems, { token: term.token });
+    newitems.splice(index, 1, {
+      token: newtoken,
+      titles: newitems[index].titles,
+    });
+    onChange(id, {
+      items: newitems,
+    });
+  };
+
+  function onChangeTokenHandler(event) {
+    let value = event.target.value;
+    // required token length: 3
+    if (value.length > 2) {
+      // check if value is different from already used tokens
+      if (find(termProps.vocabularyterms, (el) => el.token === value)) {
+        // token already token. Stay with uuid.
+      } else {
+        // `token '${value}' is OK`
+        _updateTermsWithNewToken(vterm, value);
+        termProps.setEditableToken('');
+      }
+    }
+  }
+
   return (
     <div
       ref={draginfo.innerRef}
@@ -299,6 +325,14 @@ const TermsWrapper = (props) => {
         </div>
         <div className="ui drag block inner">{children}</div>
         <div>
+          {vterm.token === termProps.editableToken ? (
+            <input
+              id={`token-${vterm.token}`}
+              title="Token"
+              placeholder="token"
+              onBlur={onChangeTokenHandler}
+            />
+          ) : null}
           <Button
             icon
             basic

package/src/components/manage/Widgets/VocabularyTermsWidget.stories.js

@@ -1,10 +1,9 @@
-import VocabularyTermsWidget from './VocabularyTermsWidget';
 import React from 'react';
-
+import VocabularyTermsWidget from './VocabularyTermsWidget';
 import WidgetStory from './story';
 
-export const JSONField = WidgetStory.bind({
-  props: { id: 'simplevocabulary', title: 'Vocabulary terms' },
+export const VocabularyTerms = WidgetStory.bind({
+  props: { id: 'vocabularyterms', title: 'Vocabulary terms', block: 'block' },
   widget: VocabularyTermsWidget,
   customStore: {
     userSession: { token: '1234' },
@@ -34,26 +33,12 @@ export const JSONField = WidgetStory.bind({
     ],
   },
 });
-
-export const Simple = WidgetStory.bind({
-  props: { id: 'simplevocabulary', title: 'Vocabulary terms' },
-  widget: VocabularyTermsWidget,
-  customStore: {
-    userSession: { token: '1234' },
-    intl: {
-      locale: 'en',
-      messages: {},
-    },
-  },
-  initialValue: {
-    '001': 'manual',
-    '002': 'questions & answers',
-  },
-});
+VocabularyTerms.args = {};
 
 export default {
-  title: 'Widgets/Vocabulary',
+  title: 'Widgets/VocabularyTerms',
   component: VocabularyTermsWidget,
+  argTypes: {},
   decorators: [
     (Story) => (
       <div className="ui segment form attached" style={{ width: '600px' }}>

package/src/components/manage/Widgets/VocabularyTermsWidget.test.jsx

@@ -5,6 +5,12 @@ import { Provider } from 'react-intl-redux';
 
 import VocabularyTermsWidget from './VocabularyTermsWidget';
 
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
 let mockSerial = 0;
 const mockStore = configureStore();
 

package/src/components/theme/Navigation/Navigation.jsx

@@ -124,7 +124,7 @@ class Navigation extends Component {
    */
   render() {
     return (
-      <nav className="navigation" id="navigation">
+      <nav className="navigation" id="navigation" aria-label="navigation">
         <div className="hamburger-wrapper mobile tablet only">
           <button
             className={cx('hamburger hamburger--spin', {

package/src/config/Loadables.jsx

@@ -29,4 +29,7 @@ export const loadables = {
   diffLib: loadable.lib(() => import('diff')),
   moment: loadable.lib(() => import('moment')),
   reactDates: loadable.lib(() => import('react-dates')),
+  reactDnd: loadable.lib(() => import('react-dnd')),
+  reactDndHtml5Backend: loadable.lib(() => import('react-dnd-html5-backend')),
+  reactBeautifulDnd: loadable.lib(() => import('react-beautiful-dnd')),
 };

package/src/config/index.js

@@ -133,6 +133,7 @@ let config = {
         'prismCore',
         'toastify',
         'reactSelect',
+        'reactBeautifulDnd',
         // 'diffLib',
       ],
     },

package/theme/themes/pastanaga/extras/widgets.less

@@ -138,7 +138,7 @@
 
 // Fake "disabled" field for language independent fields
 // Only on Add form
-#page-add .language-independent-field {
+#page-add-translation #page-add .language-independent-field {
   pointer-events: none;
 
   input,