-
Notifications
You must be signed in to change notification settings - Fork 118
/
ContentfulEditorProvider.ts
50 lines (36 loc) · 1.33 KB
/
ContentfulEditorProvider.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import { createContext, useContext } from 'react';
import { FieldExtensionSDK } from '@contentful/app-sdk';
import { usePlateEditorRef, usePlateEditorState } from '@udecode/plate-core';
import { RichTextEditor } from './types';
export function getContentfulEditorId(sdk: FieldExtensionSDK) {
const { entry, field } = sdk;
const sys = entry.getSys();
return `rich-text-editor-${sys.id}-${field.id}-${field.locale}`;
}
export const editorContext = createContext('');
export const ContentfulEditorIdProvider = editorContext.Provider;
export function useContentfulEditorId(id?: string) {
const contextId = useContext(editorContext);
if (id) {
return id;
}
if (!contextId) {
throw new Error(
'could not find editor id. Please ensure the component is wrapped in <ContentfulEditorIdProvider> '
);
}
return contextId;
}
// This hook re-renders when the value changes
// Use case: Toolbar icons, for example
export function useContentfulEditor(id?: string) {
const editorId = useContentfulEditorId(id);
const editor = usePlateEditorState<RichTextEditor>(editorId);
return editor;
}
// This doesn't re-render when the value changes
export function useContentfulEditorRef(id?: string) {
const editorId = useContentfulEditorId(id);
const editor = usePlateEditorRef<RichTextEditor>(editorId);
return editor;
}