1.0.8 • Published 5 months ago
itc-mui-edit v1.0.8
README
Build & Publish
npm i
npm run build
npm login
cd dist
npm publish
Editor Component
Full Mode (format="full") Property Description
Core Properties
Property | Type | Required | Description |
---|---|---|---|
data | Block[] | No | Editor data content |
blockTypes | BlockType[] | Yes | Available block type definition |
onChange | (data: Block[]) => void | No | Data change callback function |
title | string | No | Editor Title |
cardinality | number | No | Block quantity limit, default is -1 indicating no limit |
addBlockDisplayFormat | 'select' | 'button' | No | Add block button display format, default is 'select' |
storage | EditorState'storage' | No | Editor storage configuration |
editorTheme | Theme | No | Editor theme configuration |
isFullScreen | boolean | No | Whether in full screen mode |
previewSrc | string | No | Preview iframe source address |
previewWidth | 'sm' | 'md' | 'lg' | 'xl' | 'full' | No | Preview area width |
allowedOrigins | string[] | No | Allow preview iframe source domain name list |
Event Callback
Callback Method | Type | Description |
---|---|---|
onFullScreen | () => void | Enter full screen trigger |
onFullScreenExit | () => void | Exit full screen trigger |
onPreviewIframeLoad | (iframe: HTMLIFrameElement) => void | Preview iframe load complete trigger |
onPreviewInstanceLoad | (preview: PreviewInstance) => void | Preview instance load complete trigger |
onAction | (action: { type: string; payload: any }) => void | Editor operation event trigger callback |
Custom Component
Property | Type | Description |
---|---|---|
previewWrapperComponent | React.ElementType | Custom preview area wrapper component |
Usage Example
Basic Preview Mode
<Editor
format="full"
value={code}
language="javascript"
previewSrc="https://preview.example.com"
previewWidth="md"
allowedOrigins={['example.com']}
/>
Full Screen Mode Control
<Editor
format="full"
isFullScreen={isFullScreen}
onFullScreen={() => {
console.log('Trigger full screen event');
setIsFullScreen(true);
}}
onFullScreenExit={() => {
console.log('Trigger exit full screen event');
setIsFullScreen(false);
}}
/>
Preview Load Event Handling
<Editor
format="full"
onPreviewIframeLoad={(iframe) => {
console.log('preview iframe loaded', iframe);
}}
onPreviewInstanceLoad={(preview) => {
console.log('preview instance loaded', preview);
}}
/>
Custom Preview Wrapper Component
const CustomPreviewWrapper = ({ children }) => (
<div className="custom-preview-container">
{children}
</div>
);
<Editor
format="full"
previewWrapperComponent={CustomPreviewWrapper}
/>
Operation Event Listening
<Editor
format="full"
onAction={({ type, payload }) => {
switch (type) {
case 'save':
console.log('save operation', payload);
break;
case 'format':
console.log('format operation', payload);
break;
}
}}
/>
Preview Width Description
Preview area width (previewWidth) correspondence:
- sm: 375px
- md: 1024px
- lg: 1280px
- xl: 1536px
- full: 100%
Security Description
Use the allowedOrigins
property to restrict the source domain name of the preview iframe, increasing security:
<Editor
format="full"
previewSrc="https://preview.example.com"
allowedOrigins={[
'preview.example.com',
'test.example.com'
]}
/>
Notes
- When using the full mode, ensure that the
previewSrc
points to a valid preview service - When switching to full screen mode, it is recommended to synchronize the other UI state of the application
- After the preview instance is loaded, you can obtain the instance through the
onPreviewInstanceLoad
callback for further interaction - When customizing the preview wrapper component, ensure that the child component is correctly passed
Editor Formats
Editor supports three display formats:
- Full Format (format="full")
<Editor
format="full"
blockTypes={blockTypes}
data={data}
onChange={handleChange}
title="My Editor"
/>
- Sidebar Format (format="sidebar")
<Editor
format="sidebar"
blockTypes={blockTypes}
data={data}
onChange={handleChange}
onBack={() => {/* return event */}}
/>
- Inline Format (format="inline")
<Editor
format="inline"
blockTypes={blockTypes}
data={data}
onChange={handleChange}
/>
Block Types
blockTypes defines the available block types, example:
const blockTypes: BlockType[] = [
{
type: 'text',
title: 'Text Block',
}
];
Cardinality
cardinality property is used to limit the number of blocks:
- -1: No limit (default)
- 0: No blocks allowed
- n: Maximum of n blocks allowed
Full example of Editor Component
<Editor
onFullScreen={() => {
document.documentElement.requestFullscreen();
}}
onFullScreenExit={() => {
document.exitFullscreen();
}}
format="full"
data={data}
allowedOrigins={[env.wordpressUrl, window.location.origin]}
blockTypes={blockTypes}
previewSrc={`${window.location.origin}/${locale}/editor/wordpress/preview`}
onAction={(action) => {
const { type, payload } = action;
switch (type) {
case "editor/jwtToken":
configStorage.init({ token: payload });
objectStorage.init({ token: payload });
case "editor/page/categoryId":
// How to mock the payload?
// window.postMessage({type:"editor/page/categoryId", payload: "15"})
// window.previewPayload = payload;
break;
}
}}
storage={{
object: objectStorage,
config: configStorage,
}}
onChange={(newData) => {
if (isDev && !isInIframe) {
window.clearTimeout(timeoutId);
setData(newData);
timeoutId = window.setTimeout(() => {
localStorage.setItem(storageKey, JSON.stringify(newData));
}, 300);
}
}}
/>
1.0.2
6 months ago
1.0.1
6 months ago
1.0.0
6 months ago
1.0.8
5 months ago
1.0.7
5 months ago
1.0.6
6 months ago
1.0.5
6 months ago
0.2.11
7 months ago
1.0.4
6 months ago
0.2.10
8 months ago
1.0.3
6 months ago
0.2.10-dev
7 months ago
0.2.9
8 months ago
0.2.7
10 months ago
0.2.6
10 months ago
0.2.8
10 months ago
0.2.5
10 months ago
0.2.4
10 months ago
0.2.3
12 months ago
0.2.2
12 months ago
0.2.1
12 months ago
0.2.0
12 months ago