Add wysiwyg data object data type

.gitattributes

@@ -1,6 +1,6 @@
 
 * -text
-
+public/build/studio-npm-package.tgz binary -diff -merge -text
 
 # Exclude build/test files from archive to reduce ZIP size for composer dist download
 /.github export-ignore

assets/js/src/core/app/config/services/index.ts

@@ -79,6 +79,7 @@ import { DynamicTypeObjectLayoutFieldset } from '@Pimcore/modules/element/dynami
 import { DynamicTypeObjectLayoutFieldContainer } from '@Pimcore/modules/element/dynamic-types/definitions/objects/layout-related/types/dynamic-type-object-layout-field-container'
 import { DynamicTypeObjectDataInput } from '@Pimcore/modules/element/dynamic-types/definitions/objects/data-related/types/dynamic-type-object-data-input'
 import { DynamicTypeObjectDataTextarea } from '@Pimcore/modules/element/dynamic-types/definitions/objects/data-related/types/dynamic-type-object-data-textarea'
+import { DynamicTypeObjectDataWysiwyg } from '@Pimcore/modules/element/dynamic-types/definitions/objects/data-related/types/dynamic-type-object-data-wysiwyg'
 import { DynamicTypeObjectDataPassword } from '@Pimcore/modules/element/dynamic-types/definitions/objects/data-related/types/dynamic-type-object-data-password'
 import { DynamicTypeObjectDataInputQuantityValue } from '@Pimcore/modules/element/dynamic-types/definitions/objects/data-related/types/dynamic-type-object-data-input-quantity-value'
 import { DynamicTypeObjectDataSelect } from '@Pimcore/modules/element/dynamic-types/definitions/objects/data-related/types/dynamic-type-object-data-select'
@@ -255,6 +256,7 @@ container.bind(serviceIds['DynamicTypes/ObjectLayout/FieldContainer']).to(Dynami
 container.bind(serviceIds['DynamicTypes/ObjectDataRegistry']).to(DynamicTypeObjectDataRegistry).inSingletonScope()
 container.bind(serviceIds['DynamicTypes/ObjectData/Input']).to(DynamicTypeObjectDataInput).inSingletonScope()
 container.bind(serviceIds['DynamicTypes/ObjectData/Textarea']).to(DynamicTypeObjectDataTextarea).inSingletonScope()
+container.bind(serviceIds['DynamicTypes/ObjectData/Wysiwyg']).to(DynamicTypeObjectDataWysiwyg).inSingletonScope()
 container.bind(serviceIds['DynamicTypes/ObjectData/InputQuantityValue']).to(DynamicTypeObjectDataInputQuantityValue).inSingletonScope()
 container.bind(serviceIds['DynamicTypes/ObjectData/Password']).to(DynamicTypeObjectDataPassword).inSingletonScope()
 container.bind(serviceIds['DynamicTypes/ObjectData/Select']).to(DynamicTypeObjectDataSelect).inSingletonScope()

assets/js/src/core/app/config/services/service-ids.ts

@@ -48,6 +48,9 @@ export const serviceIds = {
   // icon library
   iconLibrary: 'IconLibrary',
 
+  // Wysiwyg
+  wysiwyg: 'Wysiwyg',
+
   // Grid
   'Grid/TypeRegistry': 'Grid/TypeRegistry',
 
@@ -122,6 +125,7 @@ export const serviceIds = {
   // Object data
   'DynamicTypes/ObjectData/Input': 'DynamicTypes/ObjectData/Input',
   'DynamicTypes/ObjectData/Textarea': 'DynamicTypes/ObjectData/Textarea',
+  'DynamicTypes/ObjectData/Wysiwyg': 'DynamicTypes/ObjectData/Wysiwyg',
   'DynamicTypes/ObjectData/Password': 'DynamicTypes/ObjectData/Password',
   'DynamicTypes/ObjectData/InputQuantityValue': 'DynamicTypes/ObjectData/InputQuantityValue',
   'DynamicTypes/ObjectData/Select': 'DynamicTypes/ObjectData/Select',

assets/js/src/core/bootstrap.ts

@@ -27,5 +27,6 @@ import '@Pimcore/modules/user'
 import '@Pimcore/modules/tags'
 import '@Pimcore/modules/notes-and-events'
 import '@Pimcore/modules/open-element'
+import '@Pimcore/modules/wysiwyg'
 import 'flexlayout-react/style/light.css'
 import '../../../css/globals.css'

assets/js/src/core/modules/element/dynamic-types/definitions/objects/data-related/types/dynamic-type-object-data-wysiwyg.tsx

@@ -0,0 +1,45 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import React from 'react'
+import {
+  type AbstractObjectDataDefinition, DynamicTypeObjectDataAbstract,
+  type EditMode,
+  type GetGridCellDefinitionProps
+} from '@Pimcore/modules/element/dynamic-types/definitions/objects/data-related/dynamic-type-object-data-abstract'
+
+import type { InheritanceOverlayType } from '@Pimcore/components/inheritance-overlay/inheritance-overlay'
+import Wysiwyg from '@Pimcore/modules/wysiwyg/wysiwyg'
+
+export type WysiwygObjectDataDefinition = AbstractObjectDataDefinition & {
+  value?: string | null
+  onChange?: (value: string | null) => void
+}
+export class DynamicTypeObjectDataWysiwyg extends DynamicTypeObjectDataAbstract {
+  id: string = 'wysiwyg'
+  inheritedMaskOverlay: InheritanceOverlayType = 'form-element'
+  gridCellEditMode: EditMode = 'edit-modal'
+
+  getObjectDataComponent (props: WysiwygObjectDataDefinition): React.ReactElement<AbstractObjectDataDefinition> {
+    return (
+      <Wysiwyg
+        { ...props }
+        disabled={ props.noteditable === true }
+      />
+    )
+  }
+
+  getGridCellPreviewComponent (props: GetGridCellDefinitionProps): React.ReactElement {
+    return <>dummy data</>
+  }
+}

assets/js/src/core/modules/element/dynamic-types/index.ts

@@ -67,6 +67,7 @@ import { type DynamicTypeObjectLayoutFieldset } from './definitions/objects/layo
 import { type DynamicTypeObjectLayoutFieldContainer } from './definitions/objects/layout-related/types/dynamic-type-object-layout-field-container'
 import { type DynamicTypeObjectDataInput } from './definitions/objects/data-related/types/dynamic-type-object-data-input'
 import { type DynamicTypeObjectDataTextarea } from '@Pimcore/modules/element/dynamic-types/definitions/objects/data-related/types/dynamic-type-object-data-textarea'
+import { type DynamicTypeObjectDataWysiwyg } from '@Pimcore/modules/element/dynamic-types/definitions/objects/data-related/types/dynamic-type-object-data-wysiwyg'
 import { type DynamicTypeObjectDataPassword } from '@Pimcore/modules/element/dynamic-types/definitions/objects/data-related/types/dynamic-type-object-data-password'
 import { type DynamicTypeObjectDataInputQuantityValue } from '@Pimcore/modules/element/dynamic-types/definitions/objects/data-related/types/dynamic-type-object-data-input-quantity-value'
 import { type DynamicTypeObjectDataSelect } from '@Pimcore/modules/element/dynamic-types/definitions/objects/data-related/types/dynamic-type-object-data-select'
@@ -218,6 +219,7 @@ moduleSystem.registerModule({
 
     objectDataRegistry.registerDynamicType(container.get<DynamicTypeObjectDataInput>(serviceIds['DynamicTypes/ObjectData/Input']))
     objectDataRegistry.registerDynamicType(container.get<DynamicTypeObjectDataTextarea>(serviceIds['DynamicTypes/ObjectData/Textarea']))
+    objectDataRegistry.registerDynamicType(container.get<DynamicTypeObjectDataWysiwyg>(serviceIds['DynamicTypes/ObjectData/Wysiwyg']))
     objectDataRegistry.registerDynamicType(container.get<DynamicTypeObjectDataPassword>(serviceIds['DynamicTypes/ObjectData/Password']))
     objectDataRegistry.registerDynamicType(container.get<DynamicTypeObjectDataInputQuantityValue>(serviceIds['DynamicTypes/ObjectData/InputQuantityValue']))
     objectDataRegistry.registerDynamicType(container.get<DynamicTypeObjectDataSelect>(serviceIds['DynamicTypes/ObjectData/Select']))

assets/js/src/core/modules/wysiwyg/default-wysiwyg-editor/default-wysiwyg-editor.styles.ts

@@ -0,0 +1,32 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { createStyles } from 'antd-style'
+
+export const useStyles = createStyles(({ css, token }) => {
+  return {
+    editor: css`
+      border: 1px solid ${token.colorBorder};
+      padding: ${token.paddingSM}px;
+      border-radius: ${token.borderRadius}px;
+      min-height: 100px;
+      background-color: ${token.colorBgContainer};
+      cursor: text;
+
+      &[contenteditable='false'] {
+        background-color: ${token.colorBgContainerDisabled};
+        cursor: not-allowed;
+      }
+    `
+  }
+})

assets/js/src/core/modules/wysiwyg/default-wysiwyg-editor/default-wysiwyg-editor.tsx

@@ -0,0 +1,45 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import React, { useEffect, useRef } from 'react'
+import { type WysiwygProps } from '../interface/wysiwyg'
+import { isNull } from 'lodash'
+import { useStyles } from './default-wysiwyg-editor.styles'
+
+export const DefaultWysiwygEditor = ({ value, onChange, disabled }: WysiwygProps): React.JSX.Element => {
+  const editorRef = useRef<HTMLDivElement>(null)
+  const { styles } = useStyles()
+
+  useEffect(() => {
+    if (!isNull(editorRef.current) && editorRef.current.innerHTML !== value) {
+      editorRef.current.innerHTML = value ?? ''
+    }
+  }, [value])
+
+  const handleInput = (event: React.FormEvent<HTMLDivElement>): void => {
+    if (onChange !== undefined && onChange !== null) {
+      onChange(event.currentTarget.innerHTML)
+    }
+  }
+
+  return (
+    <div
+      className={ styles.editor }
+      contentEditable={ disabled !== true }
+      onInput={ handleInput }
+      ref={ editorRef }
+    />
+  )
+}
+
+export default DefaultWysiwygEditor

assets/js/src/core/modules/wysiwyg/index.ts

@@ -0,0 +1,29 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { moduleSystem } from '@Pimcore/app/module-system/module-system'
+import { type ComponentRegistry } from '@Pimcore/modules/app/component-registry/component-registry'
+import { container } from '@Pimcore/app/depency-injection'
+import DefaultWysiwygEditor from './default-wysiwyg-editor/default-wysiwyg-editor'
+import { serviceIds } from '@Pimcore/app/config/services/service-ids'
+
+moduleSystem.registerModule({
+  onInit: () => {
+    const componentRegistry = container.get<ComponentRegistry>(serviceIds['App/ComponentRegistry/ComponentRegistry'])
+
+    componentRegistry.register({
+      name: 'wysiwygEditor',
+      component: DefaultWysiwygEditor
+    })
+  }
+})

assets/js/src/core/modules/wysiwyg/interface/wysiwyg.ts

@@ -0,0 +1,18 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+export interface WysiwygProps {
+  value?: string | null
+  onChange?: (value: string | null) => void
+  disabled?: boolean
+}

assets/js/src/core/modules/wysiwyg/wysiwyg.tsx

@@ -0,0 +1,32 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import React from 'react'
+import { type WysiwygProps } from './interface/wysiwyg'
+import { container } from '@Pimcore/app/depency-injection'
+import { serviceIds } from '@Pimcore/app/config/services/service-ids'
+import { type ComponentRegistry } from '../app/component-registry/component-registry'
+
+export const Wysiwyg = (props: WysiwygProps): React.JSX.Element => {
+  const componentRegistry = container.get<ComponentRegistry>(serviceIds['App/ComponentRegistry/ComponentRegistry'])
+
+  const WysiwygEditor = componentRegistry.get<WysiwygProps>('wysiwygEditor')
+
+  return (
+    <WysiwygEditor
+      { ...props }
+    />
+  )
+}
+
+export default Wysiwyg

assets/js/src/sdk/modules/wysiwyg/index.ts

@@ -0,0 +1,14 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+export * from '@Pimcore/modules/wysiwyg/interface/wysiwyg'

assets/webpack.sdk.config.js

@@ -66,6 +66,7 @@ Encore
   .addEntry('modules/user/index', path.resolve(__dirname, 'js', 'src', 'sdk', 'modules', 'user', 'index.ts'))
   .addEntry('modules/widget-manager/index', path.resolve(__dirname, 'js', 'src', 'sdk', 'modules', 'widget-manager', 'index.ts'))
   .addEntry('modules/utils/index', path.resolve(__dirname, 'js', 'src', 'sdk', 'utils', 'index.ts'))
+  .addEntry('modules/wysiwyg/index', path.resolve(__dirname, 'js', 'src', 'sdk', 'modules', 'wysiwyg', 'index.ts'))
 
 // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
 // .enableStimulusBridge('./assets/controllers.json')

public/build/5cbaa73b-becb-41ab-82c3-f12ef1b8a870/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "main": {
+      "js": [
+        "/bundles/pimcorestudioui/build/5cbaa73b-becb-41ab-82c3-f12ef1b8a870/main.js"
+      ]
+    }
+  }
+}

public/build/5cbaa73b-becb-41ab-82c3-f12ef1b8a870/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/5cbaa73b-becb-41ab-82c3-f12ef1b8a870/main.js": "/bundles/pimcorestudioui/build/5cbaa73b-becb-41ab-82c3-f12ef1b8a870/main.js"
+}

public/build/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/entrypoints.json

@@ -0,0 +1,12 @@
+{
+  "entrypoints": {
+    "core-dll": {
+      "css": [
+        "/bundles/pimcorestudioui/build/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/core-dll.css"
+      ],
+      "js": [
+        "/bundles/pimcorestudioui/build/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/core-dll.js"
+      ]
+    }
+  }
+}

public/build/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/manifest.json

@@ -0,0 +1,14 @@
+{
+  "bundles/pimcorestudioui/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/core-dll.css": "/bundles/pimcorestudioui/build/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/core-dll.css",
+  "bundles/pimcorestudioui/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/core-dll.js": "/bundles/pimcorestudioui/build/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/core-dll.js",
+  "bundles/pimcorestudioui/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/105.js": "/bundles/pimcorestudioui/build/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/105.js",
+  "bundles/pimcorestudioui/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/fonts/Lato-Light.ttf": "/bundles/pimcorestudioui/build/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/fonts/Lato-Light.c7400fca.ttf",
+  "bundles/pimcorestudioui/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/fonts/Lato-Regular.ttf": "/bundles/pimcorestudioui/build/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/fonts/Lato-Regular.9d883d54.ttf",
+  "bundles/pimcorestudioui/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/fonts/Lato-Bold.ttf": "/bundles/pimcorestudioui/build/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/fonts/Lato-Bold.636be8de.ttf",
+  "bundles/pimcorestudioui/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/images/spritesheet.svg": "/bundles/pimcorestudioui/build/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/images/spritesheet.a4e0eb7a.svg",
+  "bundles/pimcorestudioui/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/images/spritesheet-2x.png": "/bundles/pimcorestudioui/build/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/images/spritesheet-2x.7ea3a6d4.png",
+  "bundles/pimcorestudioui/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/images/spritesheet.png": "/bundles/pimcorestudioui/build/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/images/spritesheet.ef32ea2b.png",
+  "bundles/pimcorestudioui/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/images/marker-icon.png": "/bundles/pimcorestudioui/build/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/images/marker-icon.2b3e1faf.png",
+  "bundles/pimcorestudioui/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/images/layers-2x.png": "/bundles/pimcorestudioui/build/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/images/layers-2x.8f2c4d11.png",
+  "bundles/pimcorestudioui/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/images/layers.png": "/bundles/pimcorestudioui/build/c9bf981d-c17a-4dfc-92ad-934b0467c9b5/images/layers.416d9136.png"
+}

public/build/d4f2c692-2c3a-406b-a672-ca008e5f88b9/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "vendor": {
+      "js": [
+        "/bundles/pimcorestudioui/build/d4f2c692-2c3a-406b-a672-ca008e5f88b9/vendor.js"
+      ]
+    }
+  }
+}

public/build/d4f2c692-2c3a-406b-a672-ca008e5f88b9/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/d4f2c692-2c3a-406b-a672-ca008e5f88b9/vendor.js": "/bundles/pimcorestudioui/build/d4f2c692-2c3a-406b-a672-ca008e5f88b9/vendor.js"
+}