Skip to content

Commit af495e9

Browse files
fashxpfashxp
authored
Added docs examples (#22)
1 parent a45c090 commit af495e9

55 files changed

Lines changed: 1906 additions & 11 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎assets/js/src/examples/custom-asset-type/asset/editor/types/indesign/tab-manager/indesign-tab-manager.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { injectable } from '@pimcore/studio-ui-bundle/app'
2+
import { TabManager } from '@pimcore/studio-ui-bundle/modules/element'
3+
4+
@injectable()
5+
export class InDesignTabManager extends TabManager {
6+
constructor () {
7+
super()
8+
this.type = 'indesign'
9+
}
10+
}

‎assets/js/src/examples/custom-asset-type/index.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { type IAbstractPlugin } from '@pimcore/studio-ui-bundle'
2+
import { InDesignTabManager } from './asset/editor/types/indesign/tab-manager/indesign-tab-manager'
3+
import { InDesignAssetModule } from './modules/indesign-asset-module'
4+
5+
export const CustomAssetTypePlugin: IAbstractPlugin = {
6+
name: 'CustomAssetTypePlugin',
7+
8+
onInit: ({ container }): void => {
9+
container.bind('ExampleBundle/Asset/Editor/InDesignTabManager')
10+
.to(InDesignTabManager)
11+
.inSingletonScope()
12+
},
13+
14+
onStartup: ({ moduleSystem }): void => {
15+
moduleSystem.registerModule(InDesignAssetModule)
16+
}
17+
}

‎assets/js/src/examples/custom-asset-type/modules/indesign-asset-module.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { container, type AbstractModule } from '@pimcore/studio-ui-bundle'
2+
import { serviceIds } from '@pimcore/studio-ui-bundle/app'
3+
import {
4+
TAB_DEPENDENCIES,
5+
TAB_NOTES_AND_EVENTS,
6+
TAB_PROPERTIES,
7+
TAB_TAGS,
8+
TAB_WORKFLOW,
9+
type TypeRegistryInterface
10+
} from '@pimcore/studio-ui-bundle/modules/element'
11+
import {
12+
TAB_CUSTOM_METADATA,
13+
TAB_VERSIONS
14+
} from '@pimcore/studio-ui-bundle/modules/asset'
15+
import { type InDesignTabManager } from '../asset/editor/types/indesign/tab-manager/indesign-tab-manager'
16+
17+
const INDESIGN_TAB_MANAGER_SERVICE_ID = 'ExampleBundle/Asset/Editor/InDesignTabManager'
18+
19+
const registerAssetType = (): void => {
20+
const typeRegistry = container.get<TypeRegistryInterface>(
21+
serviceIds['Asset/Editor/TypeRegistry']
22+
)
23+
24+
typeRegistry.register({
25+
name: 'indesign',
26+
tabManagerServiceId: INDESIGN_TAB_MANAGER_SERVICE_ID
27+
})
28+
}
29+
30+
const registerTabs = (): void => {
31+
const indesignTabManager = container.get<InDesignTabManager>(INDESIGN_TAB_MANAGER_SERVICE_ID)
32+
indesignTabManager.register(TAB_CUSTOM_METADATA)
33+
indesignTabManager.register(TAB_PROPERTIES)
34+
indesignTabManager.register(TAB_VERSIONS)
35+
indesignTabManager.register(TAB_DEPENDENCIES)
36+
indesignTabManager.register(TAB_NOTES_AND_EVENTS)
37+
indesignTabManager.register(TAB_TAGS)
38+
indesignTabManager.register(TAB_WORKFLOW)
39+
}
40+
41+
export const InDesignAssetModule: AbstractModule = {
42+
onInit: (): void => {
43+
registerAssetType()
44+
registerTabs()
45+
}
46+
}

‎assets/js/src/examples/custom-document-editable/dynamic-types/definitions/dynamic-type-document-editable-markdown.styles.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { createStyles } from 'antd-style'
2+
3+
export const useStyles = createStyles(({ token }) => {
4+
return {
5+
markdownTextarea: {
6+
fontFamily: 'monospace',
7+
padding: '8px',
8+
border: `1px solid ${token.colorBorder}`,
9+
borderRadius: `${token.borderRadius}px`,
10+
resize: 'both' as const,
11+
outline: 'none',
12+
13+
'&:hover': {
14+
borderColor: token.colorPrimaryHover
15+
},
16+
17+
'&:focus': {
18+
borderColor: token.colorPrimary,
19+
boxShadow: `0 0 0 2px ${token.colorPrimaryBg}`
20+
}
21+
}
22+
}
23+
})

‎assets/js/src/examples/custom-document-editable/dynamic-types/definitions/dynamic-type-document-editable-markdown.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from 'react'
2+
import { injectable } from '@pimcore/studio-ui-bundle/app'
3+
import { type AbstractDocumentEditableDefinition, DynamicTypeDocumentEditableAbstract } from '@pimcore/studio-ui-bundle/modules/element'
4+
import { InheritanceOverlay } from '@pimcore/studio-ui-bundle/modules/document'
5+
import { isNonEmptyString } from '@pimcore/studio-ui-bundle/utils'
6+
import { useStyles } from './dynamic-type-document-editable-markdown.styles'
7+
8+
export type MarkdownEditableDefinition = Omit<AbstractDocumentEditableDefinition, 'config'> & {
9+
config?: {
10+
placeholder?: string
11+
width?: number
12+
height?: number
13+
class?: string
14+
required?: boolean
15+
}
16+
}
17+
18+
interface MarkdownTextareaProps {
19+
value?: string | null
20+
onChange?: (value: string) => void
21+
config?: MarkdownEditableDefinition['config']
22+
inherited?: boolean
23+
}
24+
25+
const MarkdownTextarea = ({ value, onChange, config, inherited = false }: MarkdownTextareaProps): React.JSX.Element => {
26+
const { styles } = useStyles()
27+
28+
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
29+
onChange?.(e.target.value)
30+
}
31+
32+
const handleOverwrite = (): void => {
33+
onChange?.(value ?? '')
34+
}
35+
36+
return (
37+
<InheritanceOverlay
38+
isInherited={ inherited }
39+
onOverwrite={ handleOverwrite }
40+
>
41+
<textarea
42+
className={ `${styles.markdownTextarea} ${config?.class ?? ''}`.trim() }
43+
onChange={ handleChange }
44+
placeholder={ config?.placeholder }
45+
style={ {
46+
width: config?.width ?? 600,
47+
height: config?.height ?? 300
48+
} }
49+
value={ value ?? '' }
50+
/>
51+
</InheritanceOverlay>
52+
)
53+
}
54+
55+
@injectable()
56+
export class DynamicTypeDocumentEditableMarkdown extends DynamicTypeDocumentEditableAbstract {
57+
id: string = 'markdown'
58+
59+
getEditableDataComponent (props: MarkdownEditableDefinition): React.ReactElement {
60+
return (
61+
<MarkdownTextarea
62+
config={ props.config }
63+
inherited={ props.inherited }
64+
/>
65+
)
66+
}
67+
68+
isEmpty (value: any, props: MarkdownEditableDefinition): boolean {
69+
return !isNonEmptyString(value)
70+
}
71+
}

‎assets/js/src/examples/custom-document-editable/index.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { type IAbstractPlugin } from '@pimcore/studio-ui-bundle'
2+
import { DynamicTypeDocumentEditableMarkdown } from './dynamic-types/definitions/dynamic-type-document-editable-markdown'
3+
import { MarkdownEditableModule } from './modules/markdown-editable-module'
4+
5+
const MARKDOWN_SERVICE_ID = 'ExampleBundle/DynamicTypes/DocumentEditable/Markdown'
6+
7+
export const CustomDocumentEditablePlugin: IAbstractPlugin = {
8+
name: 'CustomDocumentEditablePlugin',
9+
10+
onInit: ({ container }): void => {
11+
container.bind(MARKDOWN_SERVICE_ID)
12+
.to(DynamicTypeDocumentEditableMarkdown)
13+
.inSingletonScope()
14+
},
15+
16+
onStartup: ({ moduleSystem }): void => {
17+
moduleSystem.registerModule(MarkdownEditableModule)
18+
}
19+
}

‎assets/js/src/examples/custom-document-editable/modules/markdown-editable-module.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { container, type AbstractModule } from '@pimcore/studio-ui-bundle'
2+
import { serviceIds } from '@pimcore/studio-ui-bundle/app'
3+
import { type DynamicTypeDocumentEditableRegistry } from '@pimcore/studio-ui-bundle/modules/element'
4+
5+
const MARKDOWN_SERVICE_ID = 'ExampleBundle/DynamicTypes/DocumentEditable/Markdown'
6+
7+
export const MarkdownEditableModule: AbstractModule = {
8+
onInit: (): void => {
9+
const registry = container.get<DynamicTypeDocumentEditableRegistry>(
10+
serviceIds['DynamicTypes/DocumentEditableRegistry']
11+
)
12+
13+
registry.registerDynamicType(container.get(MARKDOWN_SERVICE_ID))
14+
}
15+
}

‎assets/js/src/examples/custom-document-type/document/editor/types/book/tab-manager/book-tab-manager.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { injectable } from '@pimcore/studio-ui-bundle/app'
2+
import { TabManager } from '@pimcore/studio-ui-bundle/modules/element'
3+
4+
@injectable()
5+
export class BookTabManager extends TabManager {
6+
constructor () {
7+
super()
8+
this.type = 'book'
9+
}
10+
}

‎assets/js/src/examples/custom-document-type/index.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { type IAbstractPlugin } from '@pimcore/studio-ui-bundle'
2+
import { DocumentSidebarManager } from '@pimcore/studio-ui-bundle/modules/document'
3+
import { BookTabManager } from './document/editor/types/book/tab-manager/book-tab-manager'
4+
import { BookDocumentModule } from './modules/book-document-module'
5+
6+
export const CustomDocumentTypePlugin: IAbstractPlugin = {
7+
name: 'CustomDocumentTypePlugin',
8+
9+
onInit: ({ container }): void => {
10+
container.bind('ExampleBundle/Document/Editor/BookTabManager')
11+
.to(BookTabManager)
12+
.inSingletonScope()
13+
container.bind('Document/Editor/Sidebar/BookSidebarManager')
14+
.to(DocumentSidebarManager)
15+
.inSingletonScope()
16+
},
17+
18+
onStartup: ({ moduleSystem }): void => {
19+
moduleSystem.registerModule(BookDocumentModule)
20+
}
21+
}

‎assets/js/src/examples/custom-document-type/modules/book-document-module.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import { container, type AbstractModule } from '@pimcore/studio-ui-bundle'
2+
import { serviceIds, useTranslation } from '@pimcore/studio-ui-bundle/app'
3+
import {
4+
TAB_DEPENDENCIES,
5+
TAB_NOTES_AND_EVENTS,
6+
TAB_PROPERTIES,
7+
TAB_TAGS,
8+
TAB_WORKFLOW,
9+
type TypeRegistryInterface
10+
} from '@pimcore/studio-ui-bundle/modules/element'
11+
import {
12+
TAB_VERSIONS,
13+
TAB_EDIT,
14+
TAB_PREVIEW,
15+
SIDEBAR_AREABLOCK_TYPES,
16+
SIDEBAR_CONTENT_SETTINGS,
17+
SIDEBAR_DOCUMENT_CONFIGURATION,
18+
type DocumentSidebarManager,
19+
useAddDocument,
20+
AddDocumentFormType
21+
} from '@pimcore/studio-ui-bundle/modules/document'
22+
import {
23+
contextMenuConfig,
24+
type ContextMenuRegistry,
25+
type TreeContextMenuProps
26+
} from '@pimcore/studio-ui-bundle/modules/app'
27+
import { type BookTabManager } from '../document/editor/types/book/tab-manager/book-tab-manager'
28+
29+
const BOOK_TAB_MANAGER_SERVICE_ID = 'ExampleBundle/Document/Editor/BookTabManager'
30+
const BOOK_SIDEBAR_MANAGER_SERVICE_ID = 'Document/Editor/Sidebar/BookSidebarManager'
31+
32+
const registerDocumentType = (): void => {
33+
const typeRegistry = container.get<TypeRegistryInterface>(
34+
serviceIds['Document/Editor/TypeRegistry']
35+
)
36+
37+
typeRegistry.register({
38+
name: 'book',
39+
tabManagerServiceId: BOOK_TAB_MANAGER_SERVICE_ID
40+
})
41+
}
42+
43+
const registerTabs = (): void => {
44+
const bookTabManager = container.get<BookTabManager>(BOOK_TAB_MANAGER_SERVICE_ID)
45+
bookTabManager.register(TAB_EDIT)
46+
bookTabManager.register(TAB_PREVIEW)
47+
bookTabManager.register(TAB_PROPERTIES)
48+
bookTabManager.register(TAB_VERSIONS)
49+
bookTabManager.register(TAB_DEPENDENCIES)
50+
bookTabManager.register(TAB_NOTES_AND_EVENTS)
51+
bookTabManager.register(TAB_TAGS)
52+
bookTabManager.register(TAB_WORKFLOW)
53+
}
54+
55+
const registerSidebars = (): void => {
56+
const sidebarManager = container.get<DocumentSidebarManager>(BOOK_SIDEBAR_MANAGER_SERVICE_ID)
57+
sidebarManager.registerEntry(SIDEBAR_AREABLOCK_TYPES)
58+
sidebarManager.registerEntry(SIDEBAR_CONTENT_SETTINGS)
59+
sidebarManager.registerEntry(SIDEBAR_DOCUMENT_CONFIGURATION)
60+
}
61+
62+
const registerContextMenu = (): void => {
63+
const contextMenuRegistry = container.get<ContextMenuRegistry>(
64+
serviceIds['App/ContextMenuRegistry/ContextMenuRegistry']
65+
)
66+
const config = contextMenuConfig.documentTree
67+
68+
contextMenuRegistry.registerToSlot(config.name, {
69+
name: 'addBook',
70+
priority: config.priority.addHardlink + 2,
71+
useMenuItem: (context: TreeContextMenuProps) => {
72+
const { t } = useTranslation()
73+
const { addDocumentTreeContextMenuItem } = useAddDocument({
74+
type: 'book',
75+
iconValue: 'book',
76+
contextMenuKey: 'addBook',
77+
formType: AddDocumentFormType.KEY_ONLY,
78+
modalTitle: t('document.tree.context-menu.add-book', 'Add Book')
79+
})
80+
return addDocumentTreeContextMenuItem(context.target)
81+
}
82+
})
83+
}
84+
85+
export const BookDocumentModule: AbstractModule = {
86+
onInit: (): void => {
87+
registerDocumentType()
88+
registerTabs()
89+
registerSidebars()
90+
registerContextMenu()
91+
}
92+
}

0 commit comments

Comments
 (0)