@contentful/field-editor-rich-text 4.19.3-alpha.0 → 4.19.3-canary.7

package/dist/cjs/RichTextEditor.js

@@ -101,7 +101,9 @@ const ConnectedRichTextEditor = (props)=>{
     }) : undefined, props.maxHeight !== undefined ? (0, _emotion.css)({
         maxHeight: props.maxHeight
     }) : undefined, props.isDisabled ? _RichTextEditorstyles.styles.disabled : _RichTextEditorstyles.styles.enabled, props.isToolbarHidden && _RichTextEditorstyles.styles.hiddenToolbar, direction === 'rtl' ? _RichTextEditorstyles.styles.rtl : _RichTextEditorstyles.styles.ltr);
-    return /*#__PURE__*/ _react.createElement(_fieldeditorreference.EntityProvider, {
+    return /*#__PURE__*/ _react.createElement(_fieldeditorshared.SharedQueryClientProvider, {
+        client: props.queryClient
+    }, /*#__PURE__*/ _react.createElement(_fieldeditorreference.EntityProvider, {
         sdk: sdk
     }, /*#__PURE__*/ _react.createElement(_SdkProvider.SdkProvider, {
         sdk: sdk
@@ -128,10 +130,10 @@ const ConnectedRichTextEditor = (props)=>{
         className: classNames,
         readOnly: props.isDisabled,
         scrollSelectionIntoView: _editoroverrides.defaultScrollSelectionIntoView
-    }), props.withCharValidation && /*#__PURE__*/ _react.createElement(_CharConstraints.CharConstraints, null))))));
+    }), props.withCharValidation && /*#__PURE__*/ _react.createElement(_CharConstraints.CharConstraints, null)))))));
 };
 const RichTextEditor = (props)=>{
-    const { sdk, isInitiallyDisabled, onAction, restrictedMarks, onChange, isDisabled, ...otherProps } = props;
+    const { sdk, isInitiallyDisabled, onAction, restrictedMarks, onChange, isDisabled, queryClient, ...otherProps } = props;
     const isEmptyValue = _react.useCallback((value)=>!value || (0, _fastdeepequal.default)(value, _richtexttypes.EMPTY_DOCUMENT), []);
     _react.useEffect(()=>{
         if (!onChange) {
@@ -158,7 +160,8 @@ const RichTextEditor = (props)=>{
             isDisabled: disabled,
             onChange: setValue,
             restrictedMarks: restrictedMarks,
-            withCharValidation: props.withCharValidation ?? true
+            withCharValidation: props.withCharValidation ?? true,
+            queryClient: queryClient
         }));
 };
 const _default = RichTextEditor;

package/dist/cjs/__fixtures__/FakeSdk.js

@@ -106,7 +106,16 @@ function newReferenceEditorFakeSdk(props) {
                         return _fixtures.contentTypes.published;
                     }
                     return Promise.reject({});
-                }
+                },
+                getMany: async ()=>({
+                        items: Object.values(_fixtures.contentTypes),
+                        total: Object.values(_fixtures.contentTypes).length,
+                        skip: 0,
+                        limit: 1000,
+                        sys: {
+                            type: 'Array'
+                        }
+                    })
             },
             locale: {
                 getMany: async ()=>_fixtures.locales.list

package/dist/cjs/plugins/CommandPalette/hooks/useCommandList.js

@@ -67,6 +67,16 @@ const useCommandList = (commandItems, container)=>{
         return commandItems[0].id;
     });
     const [isOpen, setIsOpen] = _react.useState(commandItems.length > 0);
+    _react.useEffect(()=>{
+        if (!commandItems.length) {
+            setSelectedItem('');
+            return;
+        }
+        const firstItemId = 'group' in commandItems[0] ? commandItems[0].commands[0].id : commandItems[0].id;
+        setSelectedItem(firstItemId);
+    }, [
+        commandItems
+    ]);
     _react.useEffect(()=>{
         if (!container.current) {
             return;
@@ -74,10 +84,8 @@ const useCommandList = (commandItems, container)=>{
         const buttons = Array.from(container.current.querySelectorAll('button'));
         const currBtn = buttons.find((btn)=>btn.id === selectedItem);
         const currIndex = currBtn ? buttons.indexOf(currBtn) : 0;
-        const shouldSelectFirstBtn = !currBtn && buttons.length;
-        if (shouldSelectFirstBtn) {
-            setSelectedItem(buttons[0].id);
-            buttons[0].scrollIntoView({
+        if (currBtn) {
+            currBtn.scrollIntoView({
                 block: 'nearest',
                 inline: 'start'
             });

package/dist/cjs/plugins/CommandPalette/useCommands.js

@@ -17,6 +17,7 @@ _export(exports, {
     }
 });
 const _react = require("react");
+const _fieldeditorshared = require("@contentful/field-editor-shared");
 const _richtexttypes = require("@contentful/rich-text-types");
 const _editor = require("../../helpers/editor");
 const _validations = require("../../helpers/validations");
@@ -85,7 +86,7 @@ const getAllowedContentTypesFromValidation = (validations)=>{
     }, {});
 };
 const useCommands = (sdk, query, editor)=>{
-    const contentTypes = sdk.space.getCachedContentTypes();
+    const { contentTypes } = (0, _fieldeditorshared.useContentTypes)(sdk);
     const { inlineAllowed, entriesAllowed, assetsAllowed } = getCommandPermissions(sdk, editor);
     const allowedContentTypesFromValidation = getAllowedContentTypesFromValidation(sdk.field.validations);
     const filterContentTypesByValidation = (type)=>contentTypes.filter((contentType)=>allowedContentTypesFromValidation[type]?.[contentType.sys.id]);
@@ -95,7 +96,8 @@ const useCommands = (sdk, query, editor)=>{
     const blockContentTypesToUse = getContentTypeToUse(entriesAllowed, filteredBlockContentTypes.length > 0, filteredBlockContentTypes);
     const inlineContentTypesToUse = getContentTypeToUse(inlineAllowed, filteredInlineContentTypes.length > 0, filteredInlineContentTypes);
     const relevantContentTypes = contentTypes.filter((ct)=>blockContentTypesToUse.includes(ct) || inlineContentTypesToUse.includes(ct));
-    const [commands, setCommands] = (0, _react.useState)(()=>{
+    const [commands, setCommands] = (0, _react.useState)([]);
+    const initialCommands = (0, _react.useMemo)(()=>{
         const getEmbedEntry = (contentType)=>{
             return {
                 id: contentType.sys.id,
@@ -234,8 +236,19 @@ const useCommands = (sdk, query, editor)=>{
             ];
         }
         return contentTypeCommands;
-    });
-    return query ? commands.reduce((list, nextItem)=>{
+    }, [
+        relevantContentTypes,
+        entriesAllowed,
+        inlineAllowed,
+        assetsAllowed,
+        blockContentTypesToUse,
+        inlineContentTypesToUse,
+        sdk,
+        editor,
+        query
+    ]);
+    const displayCommands = commands.length > 0 ? commands : initialCommands;
+    return query ? displayCommands.reduce((list, nextItem)=>{
         if ('group' in nextItem) {
             const subcommands = nextItem.commands.filter((command)=>{
                 return command.label.toLowerCase().includes(query.toLowerCase());
@@ -249,5 +262,5 @@ const useCommands = (sdk, query, editor)=>{
             }
         }
         return list;
-    }, []) : commands;
+    }, []) : displayCommands;
 };

package/dist/cjs/plugins/EmbeddedEntityInline/FetchingWrappedInlineEntryCard.js

@@ -121,6 +121,7 @@ function InternalFetchingWrappedInlineEntryCard({ entry, allContentTypes, locale
 function FetchingWrappedInlineEntryCard(props) {
     const { data: entry, status: requestStatus } = (0, _fieldeditorreference.useEntity)('Entry', props.entryId);
     const { getEntityScheduledActions } = (0, _fieldeditorreference.useEntityLoader)();
+    const { contentTypes: allContentTypes } = (0, _fieldeditorshared.useContentTypes)(props.sdk);
     const { onEntityFetchComplete } = props;
     _react.useEffect(()=>{
         if (requestStatus !== 'success') {
@@ -159,7 +160,7 @@ function FetchingWrappedInlineEntryCard(props) {
         });
     }
     return /*#__PURE__*/ _react.createElement(InternalFetchingWrappedInlineEntryCard, {
-        allContentTypes: props.sdk.space.getCachedContentTypes(),
+        allContentTypes: allContentTypes,
         getEntityScheduledActions: ()=>getEntityScheduledActions('Entry', props.entryId),
         locale: props.sdk.field.locale,
         defaultLocale: props.sdk.locales.default,

package/dist/cjs/plugins/Hyperlink/useEntityInfo.js

@@ -12,16 +12,12 @@ const _react = require("react");
 const _fieldeditorshared = require("@contentful/field-editor-shared");
 const _utils = require("./utils");
 async function fetchAllData({ sdk, entityId, entityType, localeCode, defaultLocaleCode }) {
-    let contentType;
     const entity = await (entityType === 'Entry' ? sdk.cma.entry.get({
         entryId: entityId
     }) : sdk.cma.asset.get({
         assetId: entityId
     }));
-    if (entity.sys.contentType) {
-        const contentTypeId = entity.sys.contentType.sys.id;
-        contentType = sdk.space.getCachedContentTypes().find((ct)=>ct.sys.id === contentTypeId);
-    }
+    const contentType = entity.sys.contentType ? await (0, _fieldeditorshared.fetchContentType)(sdk, entity.sys.contentType.sys.id) : undefined;
     const entityTitle = entityType === 'Entry' ? _fieldeditorshared.entityHelpers.getEntryTitle({
         entry: entity,
         contentType,

package/dist/esm/RichTextEditor.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { EntityProvider } from '@contentful/field-editor-reference';
-import { FieldConnector } from '@contentful/field-editor-shared';
+import { FieldConnector, SharedQueryClientProvider } from '@contentful/field-editor-shared';
 import * as Contentful from '@contentful/rich-text-types';
 import { PlateContent, Plate } from '@udecode/plate-common';
 import { css, cx } from 'emotion';
@@ -37,7 +37,9 @@ export const ConnectedRichTextEditor = (props)=>{
     }) : undefined, props.maxHeight !== undefined ? css({
         maxHeight: props.maxHeight
     }) : undefined, props.isDisabled ? styles.disabled : styles.enabled, props.isToolbarHidden && styles.hiddenToolbar, direction === 'rtl' ? styles.rtl : styles.ltr);
-    return /*#__PURE__*/ React.createElement(EntityProvider, {
+    return /*#__PURE__*/ React.createElement(SharedQueryClientProvider, {
+        client: props.queryClient
+    }, /*#__PURE__*/ React.createElement(EntityProvider, {
         sdk: sdk
     }, /*#__PURE__*/ React.createElement(SdkProvider, {
         sdk: sdk
@@ -64,10 +66,10 @@ export const ConnectedRichTextEditor = (props)=>{
         className: classNames,
         readOnly: props.isDisabled,
         scrollSelectionIntoView: defaultScrollSelectionIntoView
-    }), props.withCharValidation && /*#__PURE__*/ React.createElement(CharConstraints, null))))));
+    }), props.withCharValidation && /*#__PURE__*/ React.createElement(CharConstraints, null)))))));
 };
 const RichTextEditor = (props)=>{
-    const { sdk, isInitiallyDisabled, onAction, restrictedMarks, onChange, isDisabled, ...otherProps } = props;
+    const { sdk, isInitiallyDisabled, onAction, restrictedMarks, onChange, isDisabled, queryClient, ...otherProps } = props;
     const isEmptyValue = React.useCallback((value)=>!value || deepEquals(value, Contentful.EMPTY_DOCUMENT), []);
     React.useEffect(()=>{
         if (!onChange) {
@@ -94,7 +96,8 @@ const RichTextEditor = (props)=>{
             isDisabled: disabled,
             onChange: setValue,
             restrictedMarks: restrictedMarks,
-            withCharValidation: props.withCharValidation ?? true
+            withCharValidation: props.withCharValidation ?? true,
+            queryClient: queryClient
         }));
 };
 export default RichTextEditor;

package/dist/esm/__fixtures__/FakeSdk.js

@@ -96,7 +96,16 @@ export function newReferenceEditorFakeSdk(props) {
                         return contentTypes.published;
                     }
                     return Promise.reject({});
-                }
+                },
+                getMany: async ()=>({
+                        items: Object.values(contentTypes),
+                        total: Object.values(contentTypes).length,
+                        skip: 0,
+                        limit: 1000,
+                        sys: {
+                            type: 'Array'
+                        }
+                    })
             },
             locale: {
                 getMany: async ()=>localesFixtures.list

package/dist/esm/plugins/CommandPalette/hooks/useCommandList.js

@@ -11,6 +11,16 @@ export const useCommandList = (commandItems, container)=>{
         return commandItems[0].id;
     });
     const [isOpen, setIsOpen] = React.useState(commandItems.length > 0);
+    React.useEffect(()=>{
+        if (!commandItems.length) {
+            setSelectedItem('');
+            return;
+        }
+        const firstItemId = 'group' in commandItems[0] ? commandItems[0].commands[0].id : commandItems[0].id;
+        setSelectedItem(firstItemId);
+    }, [
+        commandItems
+    ]);
     React.useEffect(()=>{
         if (!container.current) {
             return;
@@ -18,10 +28,8 @@ export const useCommandList = (commandItems, container)=>{
         const buttons = Array.from(container.current.querySelectorAll('button'));
         const currBtn = buttons.find((btn)=>btn.id === selectedItem);
         const currIndex = currBtn ? buttons.indexOf(currBtn) : 0;
-        const shouldSelectFirstBtn = !currBtn && buttons.length;
-        if (shouldSelectFirstBtn) {
-            setSelectedItem(buttons[0].id);
-            buttons[0].scrollIntoView({
+        if (currBtn) {
+            currBtn.scrollIntoView({
                 block: 'nearest',
                 inline: 'start'
             });

package/dist/esm/plugins/CommandPalette/useCommands.js

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
+import { useContentTypes } from '@contentful/field-editor-shared';
 import { BLOCKS, INLINES } from '@contentful/rich-text-types';
 import { isNodeTypeSelected } from '../../helpers/editor';
 import { isNodeTypeEnabled } from '../../helpers/validations';
@@ -67,7 +68,7 @@ const getAllowedContentTypesFromValidation = (validations)=>{
     }, {});
 };
 export const useCommands = (sdk, query, editor)=>{
-    const contentTypes = sdk.space.getCachedContentTypes();
+    const { contentTypes } = useContentTypes(sdk);
     const { inlineAllowed, entriesAllowed, assetsAllowed } = getCommandPermissions(sdk, editor);
     const allowedContentTypesFromValidation = getAllowedContentTypesFromValidation(sdk.field.validations);
     const filterContentTypesByValidation = (type)=>contentTypes.filter((contentType)=>allowedContentTypesFromValidation[type]?.[contentType.sys.id]);
@@ -77,7 +78,8 @@ export const useCommands = (sdk, query, editor)=>{
     const blockContentTypesToUse = getContentTypeToUse(entriesAllowed, filteredBlockContentTypes.length > 0, filteredBlockContentTypes);
     const inlineContentTypesToUse = getContentTypeToUse(inlineAllowed, filteredInlineContentTypes.length > 0, filteredInlineContentTypes);
     const relevantContentTypes = contentTypes.filter((ct)=>blockContentTypesToUse.includes(ct) || inlineContentTypesToUse.includes(ct));
-    const [commands, setCommands] = useState(()=>{
+    const [commands, setCommands] = useState([]);
+    const initialCommands = useMemo(()=>{
         const getEmbedEntry = (contentType)=>{
             return {
                 id: contentType.sys.id,
@@ -216,8 +218,19 @@ export const useCommands = (sdk, query, editor)=>{
             ];
         }
         return contentTypeCommands;
-    });
-    return query ? commands.reduce((list, nextItem)=>{
+    }, [
+        relevantContentTypes,
+        entriesAllowed,
+        inlineAllowed,
+        assetsAllowed,
+        blockContentTypesToUse,
+        inlineContentTypesToUse,
+        sdk,
+        editor,
+        query
+    ]);
+    const displayCommands = commands.length > 0 ? commands : initialCommands;
+    return query ? displayCommands.reduce((list, nextItem)=>{
         if ('group' in nextItem) {
             const subcommands = nextItem.commands.filter((command)=>{
                 return command.label.toLowerCase().includes(query.toLowerCase());
@@ -231,5 +244,5 @@ export const useCommands = (sdk, query, editor)=>{
             }
         }
         return list;
-    }, []) : commands;
+    }, []) : displayCommands;
 };

package/dist/esm/plugins/EmbeddedEntityInline/FetchingWrappedInlineEntryCard.js

@@ -3,7 +3,7 @@ import { InlineEntryCard, MenuItem, Text } from '@contentful/f36-components';
 import { ClockIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
 import { ScheduledIconWithTooltip, useEntity, useEntityLoader } from '@contentful/field-editor-reference';
-import { entityHelpers } from '@contentful/field-editor-shared';
+import { entityHelpers, useContentTypes } from '@contentful/field-editor-shared';
 import { INLINES } from '@contentful/rich-text-types';
 import { css } from 'emotion';
 const { getEntryTitle, getEntityStatus } = entityHelpers;
@@ -65,6 +65,7 @@ function InternalFetchingWrappedInlineEntryCard({ entry, allContentTypes, locale
 export function FetchingWrappedInlineEntryCard(props) {
     const { data: entry, status: requestStatus } = useEntity('Entry', props.entryId);
     const { getEntityScheduledActions } = useEntityLoader();
+    const { contentTypes: allContentTypes } = useContentTypes(props.sdk);
     const { onEntityFetchComplete } = props;
     React.useEffect(()=>{
         if (requestStatus !== 'success') {
@@ -103,7 +104,7 @@ export function FetchingWrappedInlineEntryCard(props) {
         });
     }
     return /*#__PURE__*/ React.createElement(InternalFetchingWrappedInlineEntryCard, {
-        allContentTypes: props.sdk.space.getCachedContentTypes(),
+        allContentTypes: allContentTypes,
         getEntityScheduledActions: ()=>getEntityScheduledActions('Entry', props.entryId),
         locale: props.sdk.field.locale,
         defaultLocale: props.sdk.locales.default,

package/dist/esm/plugins/Hyperlink/useEntityInfo.js

@@ -1,17 +1,13 @@
 import { useEffect, useState } from 'react';
-import { entityHelpers } from '@contentful/field-editor-shared';
+import { entityHelpers, fetchContentType } from '@contentful/field-editor-shared';
 import { getEntityInfo } from './utils';
 async function fetchAllData({ sdk, entityId, entityType, localeCode, defaultLocaleCode }) {
-    let contentType;
     const entity = await (entityType === 'Entry' ? sdk.cma.entry.get({
         entryId: entityId
     }) : sdk.cma.asset.get({
         assetId: entityId
     }));
-    if (entity.sys.contentType) {
-        const contentTypeId = entity.sys.contentType.sys.id;
-        contentType = sdk.space.getCachedContentTypes().find((ct)=>ct.sys.id === contentTypeId);
-    }
+    const contentType = entity.sys.contentType ? await fetchContentType(sdk, entity.sys.contentType.sys.id) : undefined;
     const entityTitle = entityType === 'Entry' ? entityHelpers.getEntryTitle({
         entry: entity,
         contentType,

package/dist/types/RichTextEditor.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { FieldAppSDK } from '@contentful/app-sdk';
 import * as Contentful from '@contentful/rich-text-types';
+import { QueryClient } from '@tanstack/react-query';
 import { RichTextTrackingActionHandler } from './plugins/Tracking';
 type RichTextProps = {
     sdk: FieldAppSDK;
@@ -18,6 +19,7 @@ type RichTextProps = {
      */
     onChange?: (doc: Contentful.Document) => unknown;
     withCharValidation?: boolean;
+    queryClient?: QueryClient;
 };
 type ConnectedRichTextProps = {
     sdk: FieldAppSDK;
@@ -32,6 +34,7 @@ type ConnectedRichTextProps = {
     actionsDisabled?: boolean;
     stickyToolbarOffset?: number;
     withCharValidation?: boolean;
+    queryClient?: QueryClient;
 };
 export declare const ConnectedRichTextEditor: (props: ConnectedRichTextProps) => React.JSX.Element;
 declare const RichTextEditor: (props: RichTextProps) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-rich-text",
-  "version": "4.19.3-alpha.0",
+  "version": "4.19.3-canary.7+54b401aa",
   "source": "./src/index.tsx",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -44,8 +44,8 @@
     "@contentful/f36-icons": "^5.4.1",
     "@contentful/f36-tokens": "^5.1.0",
     "@contentful/f36-utils": "^5.1.0",
-    "@contentful/field-editor-reference": "^6.19.2-alpha.0",
-    "@contentful/field-editor-shared": "^2.17.1-alpha.0",
+    "@contentful/field-editor-reference": "^6.19.2-canary.7+54b401aa",
+    "@contentful/field-editor-shared": "^2.17.1-canary.59+54b401aa",
     "@contentful/rich-text-plain-text-renderer": "^17.0.0",
     "@contentful/rich-text-types": "^17.2.5",
     "@popperjs/core": "^2.11.5",
@@ -86,13 +86,10 @@
     "@types/is-hotkey": "^0.1.6",
     "@udecode/plate-test-utils": "^3.2.0",
     "prism-react-renderer": "2.4.1",
-    "react": "18.3.1",
-    "slate": "0.118.1",
-    "slate-dom": "0.118.1",
-    "slate-react": "0.118.2"
+    "react": "18.3.1"
   },
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "447875c5a2ef25eb4552c29b990d90ec40bc6985"
+  "gitHead": "54b401aa9908c8380c3801bf25fa38e23dff72d2"
 }