Is there any plan or road map to support more formatting in the default Rich Text editor? For example superscript <sup> html tag or the subscript <sub> tag?

Thanks to @suevalov I just learned that when using the <MarkdownEditor /> I have to import the CodeMirror CSS, too.

import 'codemirror/lib/codemirror.css';
import { MarkdownEditor } from '@contentful/field-editor-markdown';

The referenced docs didn't point that out. It'd be great if this part could be added to the documentation. :)

Thanks a bunch!

👋🏻 Hello,

Right now there seems to be no way to get a reference to the rich-text and json editors when they are initialized. Markdown editor has an onReady prop which is awesome, would you consider adding those to the rich-text and json editors as well?

Thanks

Hi there,

the onCreate prop passed to the LinkActions in the Reference Editor are forcing the developer to a specific handling of the editor as it creates a new entry in the background and opens the drawer. Would it be possible to also pass the onCreate Callback of the https://github.com/contentful/field-editors/blob/c6db8bf095f1f1cf2b3de610f34bbe483098ca04/packages/reference/src/common/MultipleReferenceEditor.tsx down to the renderCustomComponents so the dev can build custom actions like creating a copy of the active entry and open this?

Hey, I'm trying to use the SingleMediaEditor in an custom contentful extension with a field type that is JSON object but it throws the following error:

Uncaught TypeError: value.sys is undefined
    SingleReferenceEditor SingleReferenceEditor.tsx:84
    render FieldConnector.ts:138
    React 16
    parcelRequire<["index.tsx"]</< index.tsx:29
    j cf-extension-api.js:1
    promise callback*parcelRequire<["../node_modules/contentful-ui-extensions-sdk/dist/cf-extension-api.js"]</</j< cf-extension-api.js:1
    parcelRequire<["index.tsx"]< index.tsx:28
    newRequire src.f69400ca.js:47
    parcelRequire src.f69400ca.js:81
    <anonymous> src.f69400ca.js:120
SingleReferenceEditor.tsx:84:12
The above error occurred in the <FieldConnector> component:
    in FieldConnector (created by ReferenceEditor)
    in Constate (created by ReferenceEditor)
    in ReferenceEditor (created by SingleReferenceEditor)
    in SingleReferenceEditor (created by SingleMediaEditor)
    in SingleMediaEditor
    in div (created by Form)
    in form (created by Form)
    in Form
    in Unknown

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries. react-dom.development.js:19527:12

That is here:

Here's the sample app code:

import * as React from 'react';
import { render } from 'react-dom';
import { init, FieldExtensionSDK } from 'contentful-ui-extensions-sdk';
import { GlobalStyles } from '@contentful/f36-components';
import { Form } from '@contentful/forma-36-react-components';
import '@contentful/forma-36-react-components/dist/styles.css';
import { SingleMediaEditor } from '@contentful/field-editor-reference';

export const App = ({ sdk }: { sdk: FieldExtensionSDK }) => {
  console.log('sdk', sdk);

  return (
    <Form>
      <SingleMediaEditor
        viewType="card"
        sdk={sdk}
        parameters={{
          instance: {
            showCreateEntityAction: true,
            showLinkEntityAction: true,
          },
        }}
      />
    </Form>
  );
};

init(sdk => {
  render(
    <>
      <GlobalStyles />
      <App sdk={sdk as FieldExtensionSDK} />
    </>,
    document.getElementById('root')
  );
});

{
  "devDependencies": {
    "@babel/core": "7.12.3",
    "@babel/plugin-transform-runtime": "7.12.1",
    "@babel/preset-env": "7.12.1",
    "@babel/preset-react": "7.12.1",
    "@contentful/contentful-extension-scripts": "0.21.0",
    "@contentful/eslint-config-extension": "0.4.3",
    "@types/jest": "26.0.15",
    "@types/react": "16.9.56",
    "@types/react-dom": "16.9.9",
    "@types/webpack-env": "1.15.3",
    "contentful-cli": "1.4.48",
    "cssnano": "4.1.10",
    "eslint": "7.12.1",
    "typescript": "4.0.5"
  },
  "scripts": {
    "start": "rm -rf build && contentful-extension-scripts start",
    "build": "rm -rf build && contentful-extension-scripts build",
    "lint": "eslint ./ --ext .js,.jsx,.ts,.tsx && tsc -p ./ --noEmit",
    "test": "contentful-extension-scripts test --env=jsdom --watch",
    "test:coverage": "contentful-extension-scripts test --env=jsdom --coverage",
    "deploy": "npm run build && contentful extension update --force",
    "configure": "contentful space use && contentful space environment use",
    "login": "contentful login",
    "logout": "contentful logout",
    "help": "contentful-extension-scripts help"
  },
  "resolutions": {
    "parcel-bundler": "1.12.3"
  },
  "dependencies": {
    "@contentful/browserslist-config": "^2.0.0",
    "@contentful/field-editor-date": "^1.0.1",
    "@contentful/field-editor-reference": "^2.21.2",
    "@contentful/forma-36-fcss": "^0.3.4",
    "@contentful/forma-36-react-components": "3.100.2",
    "@contentful/forma-36-tokens": "^0.11.1",
    "contentful-ui-extensions-sdk": "4.3.1",
    "react": "16.14.0",
    "react-dom": "16.14.0"
  },
  "browserslist": [
    "last 5 Chrome version",
    "> 1%",
    "not ie <= 11"
  ]
}

wip

After updating @contentful/field-editor-rich-text to version 0.18.11 to fix issue #715, I am unable to compile my project with the following error message showing up.

/***/node_modules/@contentful/field-editor-rich-text/dist/field-editor-rich-text.esm.js
Attempted import error: 'DefaultElement' is not exported from 'slate-react'.

Hello everybody,

when building complex apps that for example are running in the entry location it would be great to have a component available that wraps all Contentful editors. The idea would be to have this wrapper component which renders the "default Contentful experience" depending on its field type.

A component could look like the component used in the grouping fields example.

<Field key={k.id} field={fields[k.id]} locales={locales} />

Having something like this available could speed up building complex apps, because developers wouldn't have to think about how to render the default Contentful experience for an entry field. Additionally, it would lead to cleaner apps because developers don't have to write this big switch themselves anymore. :)

When running "npm install @contentful/default-field-editors" this error is given:
No matching version found for @contentful/field-editor-radio@^0.11.2

Sounds like the latest version of field-editor-radio isn't published?

I'm trying to add a simple custom field for my web app, but the official demo from your website is working at all.

// package.json
    "@contentful/field-editor-boolean": "1.0.1",
    "@contentful/field-editor-markdown": "1.0.1",
    "@contentful/field-editor-checkbox": "1.0.1",
    "@contentful/field-editor-radio": "1.0.1",
    "@contentful/field-editor-single-line": "1.0.1",

// CustomField.tsx
import React from 'react';
import { PlainClientAPI } from 'contentful-management';
import { Paragraph } from '@contentful/forma-36-react-components';
import { FieldExtensionSDK } from '@contentful/app-sdk';
import { Field as DefaultField, FieldWrapper } from '@contentful/default-field-editors';
import { SingleLineEditor } from '@contentful/field-editor-single-line';

interface FieldProps {
  sdk: FieldExtensionSDK;
  cma: PlainClientAPI;
}

const Field = ({ sdk }: FieldProps) => {
  return <SingleLineEditor field={sdk.field} locales={sdk.locales} />;
};

// This is not working either. Same glinch.
// const Field = ({ sdk }: FieldProps) => {
//   return (
//     <FieldWrapper sdk={sdk} name={sdk.field.id}>
//       <DefaultField sdk={sdk} widgetId="singleLine" />
//     </FieldWrapper>
//   );
// };

Actual

Currently the mdx docs for MultipleMediaEditor is like this:

<MultipleMediaEditor
  viewType="card"
  sdk={sdk}
  isInitiallyDisabled={false}
  parameters={{
    instance: {
      canCreateEntity: true,
      canLinkEntity: true
    }
  }}
 />

Expected

I think canCreateEntity and canLinkEntity should be showCreateEntityAction and showLinkEntityAction as defined in ReferenceEditorProps interface.

Affected components:

• SingleMediaEditor
• MultipleMediaEditor
• SingleEntryReferenceEditor
• MultipleEntryReferenceEditor

Hi there,

it seems the https://github.com/contentful/field-editors/blob/master/packages/_shared/src/utils/entityHelpers.ts getFieldValue return the wrong type string | undefined. When the Field is not a string field it would return another type.

As we would like to use the method in our App, would it be possible to

1. change the returned type to unknown | undefined

or

2. use a generic type like

export function getFieldValue<T = string>({
  /**
   * Expects an entity fetched with a flag Skip-Transformation: true
   */
  entity,
  fieldId,
  localeCode,
  defaultLocaleCode,
}: {
  entity: {
    fields: { [key: string]: { [valueKey: string]: string | undefined } };
  };
  fieldId: string;
  localeCode: string;
  defaultLocaleCode: string;
}): T | undefined {
  const values = get(entity, ['fields', fieldId]);
  if (!isObject(values)) {
    return;
  }

  const firstLocaleCode = Object.keys(values)[0];

  return values[localeCode] || values[defaultLocaleCode] || values[firstLocaleCode];
}

Thanks

Alex

I used the SingleMediaEditor in an App field extension and it works great. One thing I noticed is that the edit options (edit / remove) behind the three dots are going out of the iframe viewport.

It would be great to implement the behavior of the SingleEntryReferenceEditor. This editor seems to take of that by placing the tooltip in the visible area. :) Thanks.

☝️ Example shows that the reference editor is 100% functional, whereas the asset editor places the tool tip out of reach.

Getting an error trying to run the entry-extension-collapsible extension locally.

plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]

Babel related?

Hello,

First of all, thank you for your work on this library.

I have created a Contentful App that display fields conditionally in function of a select field. But everytime i try to edit a field of type RichTextEditor, I have this error that is displayed : TypeError: Cannot use 'in' operator to search for 'type' in document (other fields that i tried are working fine).

Have you an idea if it comes from your library ?

Thanks

If a previously linked entry is deleted, and then removed from the MRE via the MissingEntityCard element, onAction is not called.

It seems that the main issue with passing the onRemove function defined in FetchingWrappedEntryCard instead of props.onRemove() is that two of the values passed to onAction are retrieved from the entry object (which doesn't exist):
id: get(entry, 'sys.id'), contentTypeId: get(entry, 'sys.contentType.sys.id')

As far as I can tell, the id could be pulled from the props, props.entryId, which just leaves the contentTypeId. Does anyone see an issue if this was supplied as null/undefined?

As an FYI, our specific use case is that we're using the onAction method inside an entry editor to sync two different fields in the entry. So in the given scenario, the secondary field is left with a dead entry as it would normally be removed in the onAction call.

Also, I'm fairly new to contentful, so it's possibly I've missed something in my analysis :)

Is there a way to query the enabled formatting options of a rich text field to create a toolbar with those options in mind?

Background
I'm attempting to create an enhanced multi-reference editor, styled and operating as per the default Contentful (Forma 36) functionality, but from which I can have entry fields be directly editable on the sortable card.

This is to cut down on the multiple steps it currently takes a content author to open a referenced entry, check a field value, change the field value, publish and then return.

By leveraging the renderCustomCard property on the MultipleEntryReferenceEditor to return a reimplemented WrappedEntryCard and having that import a custom EntryCard based on the source, I have almost gotten this to work.

Unfortunately, changes that I make to the referenced entries using sdk.space.updateEntry are not syncing back into the MultipleEntryReferenceEditor.

Issue
It appears that field extensions are not provided access to sdk.space.onEntityChanged, so the EntityStore used by the ReferenceEditor does not observe changes made to the referenced entries.

The default Entry links list appearance provided by Contentful does not experience this.

I have not been able to find a viable workaround to having the referenced entries update after either my own or external changes.

Replication
The lack of syncing changes from referenced entries into the multi-reference extension can be seen in the extensions/multiple-references-extension example provided in this repository.

• Install the example as per the instructions
• Apply it to an appropriate field in your Content model
• Create demo content if necessary
• Open two browser windows
• Access and edit a referenced entry in the second window

The status and values shown on the card in the first window will quickly become out of sync.

Hello, there is some kind of bug preventing a user from using the rich-text editor as expected (compared to the one in the builtin entry editor).

How it's implemented

Via @contentful/create-contentful-app using the @contentful/app-sdk:

<FieldWrapper
  sdk={sdkRef}
  name={label}
>
  <Field
    sdk={sdkRef}
    widgetId={widget}
  />
</FieldWrapper>

Expected behavior

Builtin entry editor:

Actual behavior

FieldWrapper with Field

Versions

• @contentful/default-field-editors: 1.1.2
  • @contentful/field-editor-rich-text: 1.1.1
• @contentful/app-scripts: 0.14.114
• @contentful/app-sdk: 4.3.1
• npm: 8.1.2
• node: 16.13.1

Please let me know if there is anything else I need to provide. Thank you.

On creating a new contentful app using create-contentful-app cli and thereafter installing @contentful/field-editor-reference using command npm i @contentful/field-editor-reference causes error during installation.

% npm i @contentful/field-editor-reference
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@">=16.8.0" from @contentful/[email protected]
npm ERR!   node_modules/@contentful/field-editor-shared
npm ERR!     @contentful/field-editor-shared@"^0.16.0" from @contentful/[email protected]
npm ERR!     node_modules/@contentful/field-editor-single-line
npm ERR!       @contentful/field-editor-single-line@"^0.14.1" from the root project
npm ERR!     @contentful/field-editor-shared@"^0.16.0" from @contentful/[email protected]
npm ERR!     node_modules/@contentful/field-editor-test-utils
npm ERR!       @contentful/field-editor-test-utils@"^0.11.1" from the root project
npm ERR!     1 more (@contentful/field-editor-reference)
npm ERR!   peer react@">=16.8.0" from @contentful/[email protected]
npm ERR!   node_modules/@contentful/field-editor-single-line
npm ERR!     @contentful/field-editor-single-line@"^0.14.1" from the root project
npm ERR!   13 more (@contentful/field-editor-test-utils, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from [email protected]
npm ERR! node_modules/@contentful/field-editor-reference/node_modules/react-sortable-hoc
npm ERR!   react-sortable-hoc@"^1.11.0" from @contentful/[email protected]
npm ERR!   node_modules/@contentful/field-editor-reference
npm ERR!     @contentful/field-editor-reference@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 

As per the above log, [email protected] depends on react@"^0.14.0 || ^15.0.0 || ^16.0.0" whereas create-contentful-app cli installs latest react using create-react-app internally.

Downgrading react version to use [email protected] has 3 high severity vulnerabilities which not a good option.
Thus recommending to update the package dependency version to fix the breakage.

Steps to reproduce:

1. Create new contentful app.
   npx @contentful/create-contentful-app init my-first-app
2. Install package @contentful/field-editor-reference
npm i @contentful/field-editor-reference --save
   Error will be shown

I have a custom editor that contains localised fields. However changing the locale on the side bar is not being reflected in the editor. I have tried storing the selected locale in React state and changing the state with the function editor.onLocaleSettingsChanged.
This still doesn't work. Any pointers will be helpful. Thanks

I'm trying to get the functionality of the Tag field editor, but having it additionally show the image corresponding to the url:

To implement this functionality, I'd basically to have clone the TagsEditor component and render that slightly modified version via <Field>. I feel like this would be a lot easier if I could simply pass in a prop to modify the presentation of the Tags, but that's currently impossible:
https://github.com/contentful/field-editors/blob/master/packages/tags/src/TagsEditor.tsx#L11

I'm seeing this warning in the console when using these field editors- they seem to be using parts of the app-sdk that are deprecated.

Are there plans to switch out the sdk as a client for the cma instead?

I am working on creating an entry editor for some content model. I am using @contentful/app-sdk and @contentful/forma-36-react-components. I am able to have the UI the way I want with the forma-36 components but I also want to use @contentful/field-editor-reference to have access to the original functionality of the field.

The problem I am running into is when I pass sdk to the MultipleEntryReferenceEditor component from @contentful/field-editor-reference. I get the following error

Type ‘import("/node_modules/@contentful/app-sdk/dist/types").FieldExtensionSDK’ is not assignable to type ‘import("/node_modules/contentful-ui-extensions-sdk/dist/types").FieldExtensionSDK’.

I believe Contentful recommends using @contentful/app-sdk over contentful-ui-extensions-sdk but @contentful/field-editor-reference has a transient dependency on contentful-ui-extensions-sdk.

The RichText editor on the Contentful site now has the table option added to the toolbar. I don't see it in the code here or any APIs to be able to add it ourselves. Are their plans to add it to this package?

Hello,

Right now the the onReady prop for the MarkdownEditor is typed as Function and InitializedEditorType type is not exported from the package, so there is no way to type the argument passed to the onReady function on the consumer side.

Ideally both onReady could be more specifically typed and the InitializedEditorType type exported.

Would be happy to open a PR if that's something you are open to, but perhaps I'm missing some reason why this was not done?

Thanks

Something like this. The html tags are preserved after pasting

https://youtu.be/mzf5DsJ6Ayg

The single line input can be used on long text fields as well as short text fields but it assumes the max limit is 256 characters. This should be expanded to check the field type on which the extension is sitting and use 256 if short text or 50000 if long text.

reported on the community slack: https://contentful-community.slack.com/archives/C8FEA1S57/p1575450260071300

I'd like to request a feature for a character count to be included on the multiline long text field editor similar to the one on the markdown editor and short text field editor.

A bug exists in the rich text editor which allows for nodes to exist with undefined content.

{
  data: {},
  content: [
    {
      data: {
        uri: 'https://www.xerox.com/digital-printing/latest/IG5DS-09J.PDF'
      },
      content: [
        {
          data: {},
          marks: [],
          value: 'Bezbarwny toner (PDF, 1,2 MB)',
          nodeType: 'text'
        }
      ],
      nodeType: 'hyperlink'
    },
    {
      data: {
        uri: 'https://www.xerox.com/pl-pl/digital-printing/clear-dry-ink'
      },
      content: [ undefined ],
      nodeType: 'hyperlink'
    }
  ],
  nodeType: 'paragraph'
}

The node is completely invisible to the author using the editor. Their first indication of a problem is the node refusing to render due to this condition causing an error inside rich-text-links.
contentful/rich-text#243

This relates to Contentful support ticket: 79759
https://support.contentful.com/hc/en-us/requests/79759

As it was done for UI Extensions SDK repository:

• contentful/ui-extensions-sdk#272

To reproduce this:

1. Clone https://github.com/kamsar/ctfl-multi-reference-embed-bug (specific repro code location)
2. npm run start
3. In Contentful, add a private app pointed at http://localhost:1338, with a Entry field editor for Entry reference, list
4. Assign the app's field editor to any Entry reference, list field. Ensure that more than one content type is allowed to be linked.
5. Edit an entry with the custom editor. It will render correctly and work as a duplicate of the default multiple reference editor until you click Create new entry and link. Then the dropdown for content type selection becomes hidden and can't be clicked.

The same view, but with sdk.window.startAutoResizer() replaced with sdk.window.updateHeight(800) to force a very tall iframe:

There are two issues here (and they're probably closely related):

1. The extension SDK's autoResizer is not picking up the opening of the dropdown and resizing the iframe
2. This seems to be because the technique used to open the dropdown is also not updating any of the usual browser height detection properties, such as document.body.scrollHeight or document.documentElement.getBoundingClientRect() all of which remain constant within the iframe whether the dropdown is open or not.

This is a follow up to #283. It'd be great to have renderProps for the media ref editors, too. 🙈

Hello, there is some kind of bug preventing a user from using the markdown editor as expected (compared to the one in the builtin entry editor).

How it's implemented

Via @contentful/create-contentful-app using the @contentful/app-sdk:

<FieldWrapper
  sdk={sdkRef}
  name={label}
>
  <Field
    sdk={sdkRef}
    widgetId={widget}
  />
</FieldWrapper>

Expected behavior

Builtin entry editor:

Actual behavior

FieldWrapper with Field

Versions

• @contentful/default-field-editors: 1.1.2
  • @contentful/field-editor-markdown: 1.1.1
• @contentful/app-scripts: 0.14.114
• @contentful/app-sdk: 4.3.1
• npm: 8.1.2
• node: 16.13.1

Please let me know if there is anything else I need to provide. Thank you.

Hello I justed wanted to give the renderCustomCard for the SingleMediaEditor a try and it looks like it's not implemented. :)

I have the following code:

import { SingleMediaEditor } from '@contentful/field-editor-reference';
import { Button, Pill } from '@contentful/forma-36-react-components';

function SJSingleMediaEditor({ sdk }) {
  return (
    <>
      <SingleMediaEditor
        sdk={sdk}
        parameters={{
          instance: {
            showCreateEntityAction: true,
            showLinkEntityAction: true,
          },
        }}
        viewType="card"
        renderCustomCard={(props) => (
          <>
            {console.log(props)}
            <Button onClick={props.onEdit} style={{ marginRight: '10px' }}>
              Edit
            </Button>
            <Button onClick={props.onRemove}>Remove</Button>
          </>
        )}
      />
    </>
  );
}

which renders to the default asset cards. I debugged a little bit and ended up in FetchingWrappedAssetCard. renderCustomCard is available in props but it doesn't seem to be handled in the component as it's not include in the commonProps object. :)

Thanks a bunch for looking into it. :)

Hello everybody. 👋

When using the reference and asset editors I'd love to have a way to control how the selected entry/asset is rendered in the Contentful UI.

Currently, the usage of these reference editors looks like below:

<SingleEntryReferenceEditor viewType="card" sdk={sdk} />

Unfortunately, there is no easy way to customize the rendering of selected entries other then re-implementing the whole reference component. I'd like to propose a way to make that possible.

Add a render prop

With a render prop developers could control how the entry would be rendered after it's selected.

<SingleEntryReferenceEditor viewType="card" sdk={sdk} renderEntry={(entry) => <h1>entry.fields.title</h1>}/>

In the above example, selected entries would only be rendered with an h1 element.

Pass down a component

The reference editors could accept an optional component to render the entry.

<ReferenceEditor customComponents={{ item: MyItem }} />

In the above example, selected entries would render as MyItem component.

Looking forward to your thoughts. :)

On running npm install @contentful/default-field-editors I get the error No matching version found for @contentful/field-editor-date@^0.8.0.

When I install @contentful/field-editor-date, the installed version is 0.7.1, so looks like the latest version wasn't properly published?

Hi there, this is more of a question than an issue. Apologies if this is a dumb question!

Is it possible to use these editors as components in a web app outside of the Contentful UI? For example, we have an internal web app that we would like to use to manage Contentful content outside of the Contentful dashboard.

I tried using an example similar to the following, but it didn't work, the callback from the init function never gets called:

import { init } from 'contentful-ui-extensions-sdk';
import { RichTextEditor } from '@contentful/field-editor-rich-text';

const OurPage = () => {
  const [sdk, setSdk] = useState();

  useEffect(() => {
    // The callback from `init` never gets called

    init((initSdk) => setSdk(initSdk));
  }, []);

  return sdk && <RichTextEditor sdk={sdk} />;
};

I am trying to use @contentful/field-editor-date in our project, but I can't get past the TypeScript error for the type definitions of FieldConnector in @contentful/field-editor-shared. Line 42 of FieldConnector.d.ts has the following error:

Namespace '_' has no exported member 'Cancelable'

This comes up where import("lodash").Cancelable is included in the return type for setValue. I have tried installing lodash, lodash-es, and their corresponding @types/____ modules, but the error persists.

Hi, I'm building an app extension using next js, and was having build errors I couldn't resolve at the ts level when using the latest package for @contentful/field-editor-reference.

node_modules/@contentful/f36-components/dist/f36-components.modern.js:1
export*from"@contentful/f36-badge";export*from"@contentful/f36-icon";export*from"@contentful/f36-card";export*from"@contentful/f36-core";export*from"@contentful/f36-drag-handle";export*from"@contentful/f36-spinner";export*from"@contentful/f36-table";export*from"@contentful/f36-typography";export*from"@contentful/f36-list";export*from"@contentful/f36-note";export*from"@contentful/f36-tooltip";export*from"@contentful/f36-forms";export*from"@contentful/f36-pill";export*from"@contentful/f36-button";export*from"@contentful/f36-text-link";export*from"@contentful/f36-skeleton";export*from"@contentful/f36-accordion";export*from"@contentful/f36-tabs";export*from"@contentful/f36-copybutton";export*from"@contentful/f36-popover";export*from"@contentful/f36-menu";export*from"@contentful/f36-modal";export*from"@contentful/f36-notification";export*from"@contentful/f36-asset";export*from"@contentful/f36-autocomplete";export*from"@contentful/f36-datetime";export*from"@contentful/f36-entity-list";
^^^^^^

SyntaxError: Unexpected token 'export'

Tweaks to next js's ts.config didn't help.

I had to set the package version to ^2.21.2 which is the version used in the references example app to get it to work without doing something hacky like using next's dynamic import.

Any ideas why this is happening?

Follow up: seems like the difference maker here is f36 vs forma-36, where the way the forma-36 components are distributed wasn't causing any issues with typescript.

Further follow up: the problem seems like it's in the package json for f36-components, if the exports key is changed to
"exports": { "import": "./dist/f36-components.modern.js", "require": "./dist/f36-components.js" }, the typescript errors go away.

setState on this line is causing React warnings when component is re-rendered before the promise is resolved. I suggest to use basic mount check before updating state there -

https://github.com/contentful/field-editors/blob/master/packages/rich-text/src/Toolbar/index.js#L74

VM191 src.f69400ca.js:3977 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in Toolbar (created by ConnectedRichTextEditor)
    in div (created by StickyToolbarWrapper)
    in StickyToolbarWrapper (created by ConnectedRichTextEditor)
    in div (created by ConnectedRichTextEditor)
    in ConnectedRichTextEditor (created by FieldConnector)
    in FieldConnector (created by RichTextEditor)
    in useEntitiesStore.Provider (created by RichTextEditor)

Hello,

I am trying to develop a custom plugin that I need to customize the actions the user needs to do in a rich text, basically, the user can select a text block, clicks on a button, and modifies the original content when user clicks the button - I see that the rich text editor doesn't have any option to do so.

There is any way to fork a native implementation of the rich text component and implement those changes on my own?

Thanks,

Hi, I am looking for a way to extract data from a rich text field but it's not very clear how to achieve that in the documentation.

I am using the contentful SDK and dynamically rendering fields based on a dropdown list and I would like to access the data from a parent function.

<RichTextEditor sdk={sdk} />

I have tried a bunch of functions such as onChange and onAction and weirdly enough they do not fire.

Any ideas?

Thanks

Currently, the new Markdown editor calculates text direction by itself based on the locale code using the rtl-detect package.

This will cause inconsistent direction in some edge cases with other field editors used in the web-app as their direction is calculated in the web-app with a slightly different logic (in addition to the rtl-detect check, all locales not known to the web-app's locales list are always treated as LTR automatically!)

I propose that we either:

1. Let the SDK expose some more advanced locales info like sdk.field.localObject.direction. localeObject would also hold more info like .code or
2. Introduce a helper function getLocaleDirection(code) or isRtlLocale(code) in the SDK that returns the direction, consistently with how the web-app would do it. or
3. Introduce sdk.locales.directions[code]

Either solution should guard all editor field extensions against inconsistent behavior once we update any text direction logic or introduce a new feature like allowing customers to manually define direction on e.g. the CMA's Locale objects.

The problem

Inline code is really hard to spot, due to only slightly changing the appearance compared to normal text.

Three works comment, description and remarks are actually code elements.

The proposed solution

Add a (grey) background around the element to more strongly differentiate it, just like on github.

E.g.
just text vs. a code element

Breaking changes

• none

@cezarsmpio Looks like hostname-transformer is a private npm package:

npm install @contentful/default-field-editors

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@contentful%2fhostname-transformer - Not found
npm ERR! 404
npm ERR! 404  '@contentful/hostname-transformer@^1.4.10' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of '@contentful/field-editor-markdown'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

Originally posted by @Stupidism in #946 (comment)

Allow the same styling for the field as we do for rich text editor