Merge branch 'master' into dnd-kit

contentful · Sep 25, 2023 · 3b0f518 · 3b0f518
2 parents da1ef66 + 31e1eea
commit 3b0f518
Show file tree

Hide file tree

Showing 13 changed files with 68 additions and 12 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -4,4 +4,4 @@
 cypress/        @contentful/team-tolkien
 packages/        @contentful/team-tolkien
 
-apps/    @contentful/team-extensibility
+apps/    @contentful/team-developer-experience
diff --git a/cypress/e2e/rich-text/RichTextEditor.Links.spec.ts b/cypress/e2e/rich-text/RichTextEditor.Links.spec.ts
@@ -61,6 +61,7 @@ describe('Rich Text Editor - Links', { viewportHeight: 2000 }, () => {
       'using the link keyboard shortcut',
       () => {
         richText.editor.type(`{${mod}}k`);
+        richText.forms.hyperlink.linkTarget.type('{backspace}'); //weird cypress bug where using CMD+K shortcut types a "k" value in the text field that is focussed. So, we remove it first.
       },
     ],
   ];
@@ -316,4 +317,19 @@ describe('Rich Text Editor - Links', { viewportHeight: 2000 }, () => {
       });
     });
   }
+
+  it('focuses on the "Link target" field if it is present', () => {
+    safelyType('Sample Text{selectall}');
+
+    getIframe().findByTestId('hyperlink-toolbar-button').click();
+
+    const form = richText.forms.hyperlink;
+
+    form.linkType.should('have.value', 'hyperlink');
+
+    getIframe().then((body) => {
+      const focusedEl = body[0].ownerDocument.activeElement;
+      expect(focusedEl?.getAttribute('name')).to.eq('linkTarget');
+    });
+  });
 });
diff --git a/cypress/fixtures/utils.ts b/cypress/fixtures/utils.ts
@@ -8,12 +8,12 @@ export const newLink = (linkType: string, id: string): Link => ({
   },
 });
 
-export const getIframe = () => {
+export const getIframe = (): Cypress.Chainable<JQuery<HTMLBodyElement>> => {
   return cy
     .get('#storybook-preview-iframe')
     .its('0.contentDocument.body')
     .should('not.be.empty')
-    .then(cy.wrap);
+    .then((body) => cy.wrap(body as HTMLBodyElement));
 };
 
 export const getIframeWindow = () => {

diff --git a/packages/default-field-editors/CHANGELOG.md b/packages/default-field-editors/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.5.5](https://github.com/contentful/field-editors/compare/@contentful/default-field-editors@1.5.4...@contentful/default-field-editors@1.5.5) (2023-09-21)
+
+**Note:** Version bump only for package @contentful/default-field-editors
+
+## [1.5.4](https://github.com/contentful/field-editors/compare/@contentful/default-field-editors@1.5.3...@contentful/default-field-editors@1.5.4) (2023-09-21)
+
+**Note:** Version bump only for package @contentful/default-field-editors
+
 ## [1.5.3](https://github.com/contentful/field-editors/compare/@contentful/default-field-editors@1.5.2...@contentful/default-field-editors@1.5.3) (2023-09-18)
 
 **Note:** Version bump only for package @contentful/default-field-editors

diff --git a/packages/default-field-editors/package.json b/packages/default-field-editors/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@contentful/default-field-editors",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -40,7 +40,7 @@
     "@contentful/field-editor-checkbox": "^1.4.0",
     "@contentful/field-editor-date": "^1.6.0",
     "@contentful/field-editor-dropdown": "^1.4.0",
-    "@contentful/field-editor-json": "^3.3.3",
+    "@contentful/field-editor-json": "^3.3.4",
     "@contentful/field-editor-list": "^1.4.0",
     "@contentful/field-editor-location": "^1.3.3",
     "@contentful/field-editor-markdown": "^1.5.0",
@@ -49,7 +49,7 @@
     "@contentful/field-editor-radio": "^1.4.0",
     "@contentful/field-editor-rating": "^1.4.0",
     "@contentful/field-editor-reference": "^5.16.1",
-    "@contentful/field-editor-rich-text": "^3.11.0",
+    "@contentful/field-editor-rich-text": "^3.12.0",
     "@contentful/field-editor-shared": "^1.4.0",
     "@contentful/field-editor-single-line": "^1.3.2",
     "@contentful/field-editor-slug": "^1.4.0",

diff --git a/packages/json/CHANGELOG.md b/packages/json/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.3.4](https://github.com/contentful/field-editors/compare/@contentful/field-editor-json@3.3.3...@contentful/field-editor-json@3.3.4) (2023-09-21)
+
+### Bug Fixes
+
+- **json-editor:** consolidate tab width ([#1496](https://github.com/contentful/field-editors/issues/1496)) ([648deda](https://github.com/contentful/field-editors/commit/648deda56a851a0325480327f5eb24ba83e8bd32))
+
 ## [3.3.3](https://github.com/contentful/field-editors/compare/@contentful/field-editor-json@3.3.2...@contentful/field-editor-json@3.3.3) (2023-09-12)
 
 **Note:** Version bump only for package @contentful/field-editor-json

diff --git a/packages/json/package.json b/packages/json/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-json",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",

diff --git a/packages/json/src/JsonEditor.tsx b/packages/json/src/JsonEditor.tsx
@@ -8,7 +8,7 @@ import { JsonEditorField } from './JsonEditorField';
 import { JsonEditorToolbar } from './JsonEditorToolbar';
 import { JsonInvalidStatus } from './JsonInvalidStatus';
 import { JSONObject } from './types';
-import { stringifyJSON, parseJSON } from './utils';
+import { stringifyJSON, parseJSON, SPACE_INDENT_COUNT } from './utils';
 
 export interface JsonEditorProps {
   /**
@@ -168,7 +168,8 @@ export default function JsonEditor(props: JsonEditorProps) {
       isInitiallyDisabled={props.isInitiallyDisabled}
       isEqualValues={(value1, value2) => {
         return deepEqual(value1, value2);
-      }}>
+      }}
+    >
       {({ value, disabled, setValue, externalReset }) => {
         return (
           <ConnectedJsonEditor
@@ -183,3 +184,5 @@ export default function JsonEditor(props: JsonEditorProps) {
     </FieldConnector>
   );
 }
+
+JsonEditor.tabWidth = SPACE_INDENT_COUNT;
diff --git a/packages/json/src/JsonEditorField.tsx b/packages/json/src/JsonEditorField.tsx
@@ -1,11 +1,14 @@
 import * as React from 'react';
 
 import { json } from '@codemirror/lang-json';
+import { indentUnit } from '@codemirror/language';
 import { EditorView } from '@codemirror/view';
 import tokens from '@contentful/f36-tokens';
 import CodeMirror from '@uiw/react-codemirror';
 import { css, cx } from 'emotion';
 
+import { SPACE_INDENT_COUNT } from './utils';
+
 type JsonEditorFieldProps = {
   isDisabled: boolean;
   value: string;
@@ -61,7 +64,11 @@ export function JsonEditorField(props: JsonEditorFieldProps) {
         value={props.value}
         onChange={props.onChange}
         theme="light"
-        extensions={[json(), EditorView.lineWrapping]}
+        extensions={[
+          json(),
+          EditorView.lineWrapping,
+          indentUnit.of(new Array(SPACE_INDENT_COUNT).fill(' ').join('')),
+        ]}
         basicSetup={{
           closeBrackets: false,
           lineNumbers: false,

diff --git a/packages/json/src/utils.ts b/packages/json/src/utils.ts
@@ -1,10 +1,12 @@
 import { JSONObject } from './types';
 
+export const SPACE_INDENT_COUNT = 4;
+
 export function stringifyJSON(obj: JSONObject | null | undefined): string {
   if (obj === null || obj === undefined) {
     return '';
   } else {
-    return JSON.stringify(obj, null, 4);
+    return JSON.stringify(obj, null, SPACE_INDENT_COUNT);
   }
 }
 

diff --git a/packages/rich-text/CHANGELOG.md b/packages/rich-text/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.12.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-rich-text@3.11.0...@contentful/field-editor-rich-text@3.12.0) (2023-09-21)
+
+### Features
+
+- set focus in link modal [TOL-1502] ([#1498](https://github.com/contentful/field-editors/issues/1498)) ([e2f580b](https://github.com/contentful/field-editors/commit/e2f580b2e4c766136e11ddfd3dd34b1fe10264a2))
+
 # [3.11.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-rich-text@3.10.1...@contentful/field-editor-rich-text@3.11.0) (2023-09-18)
 
 ### Features

diff --git a/packages/rich-text/package.json b/packages/rich-text/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-rich-text",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "source": "./src/index.tsx",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

diff --git a/packages/rich-text/src/plugins/Hyperlink/HyperlinkModal.tsx b/packages/rich-text/src/plugins/Hyperlink/HyperlinkModal.tsx
@@ -65,6 +65,13 @@ export function HyperlinkModal(props: HyperlinkModalProps) {
   const [linkType, setLinkType] = React.useState(props.linkType ?? defaultLinkType);
   const [linkTarget, setLinkTarget] = React.useState(props.linkTarget ?? '');
   const [linkEntity, setLinkEntity] = React.useState<Link | null>(props.linkEntity ?? null);
+  const linkTargetInputRef = React.useRef<HTMLInputElement>(null);
+
+  React.useEffect(() => {
+    if (linkType === INLINES.HYPERLINK && linkTargetInputRef.current) {
+      linkTargetInputRef.current.focus();
+    }
+  }, [linkType]);
 
   function isLinkComplete() {
     const isRegularLink = linkType === INLINES.HYPERLINK;
@@ -159,6 +166,7 @@ export function HyperlinkModal(props: HyperlinkModalProps) {
               <FormControl id="linkTarget" isRequired>
                 <FormControl.Label>Link target</FormControl.Label>
                 <TextInput
+                  ref={linkTargetInputRef}
                   name="linkTarget"
                   value={linkTarget}
                   onChange={(event: React.ChangeEvent<HTMLInputElement>) => {