@dotcms/react 0.0.1-alpha.31 → 0.0.1-alpha.33

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@dotcms/react",
-  "version": "0.0.1-alpha.31",
+  "version": "0.0.1-alpha.33",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@dotcms/client": "0.0.1-alpha.31"
+    "@dotcms/client": "0.0.1-alpha.33",
+    "@tinymce/tinymce-react": "^5.1.1"
   },
   "description": "Official React Components library to render a dotCMS page.",
   "repository": {

package/src/index.d.ts

@@ -1,4 +1,5 @@
 export * from './lib/components/DotcmsLayout/DotcmsLayout';
+export * from './lib/components/DotEditableText/DotEditableText';
 export * from './lib/components/PageProvider/PageProvider';
 export * from './lib/components/Row/Row';
 export * from './lib/hooks/useDotcmsPageContext';

package/src/lib/components/DotEditableText/DotEditableText.d.ts

@@ -0,0 +1,3 @@
+import { DotEditableTextProps } from './utils';
+export declare function DotEditableText({ mode, format, contentlet, fieldName }: Readonly<DotEditableTextProps>): import("react/jsx-runtime").JSX.Element;
+export default DotEditableText;

package/src/lib/components/DotEditableText/utils.d.ts

@@ -0,0 +1,36 @@
+import { IAllProps } from '@tinymce/tinymce-react';
+import { DotCMSContentlet } from '../../models';
+export type DOT_EDITABLE_TEXT_FORMAT = 'html' | 'text';
+export type DOT_EDITABLE_TEXT_MODE = 'minimal' | 'full' | 'plain';
+export interface DotEditableTextProps {
+    /**
+     * Represents the field name of the `contentlet` that can be edited
+     *
+     * @memberof DotEditableTextProps
+     */
+    fieldName: string;
+    /**
+     * Represents the format of the editor which can be `text` or `html`
+     *
+     * @type {DOT_EDITABLE_TEXT_FORMAT}
+     * @memberof DotEditableTextProps
+     */
+    format?: DOT_EDITABLE_TEXT_FORMAT;
+    /**
+     * Represents the mode of the editor which can be `plain`, `minimal`, or `full`
+     *
+     * @type {DOT_EDITABLE_TEXT_MODE}
+     * @memberof DotEditableTextProps
+     */
+    mode?: DOT_EDITABLE_TEXT_MODE;
+    /**
+     * Represents the `contentlet` that can be inline edited
+     *
+     * @type {DotCMSContentlet}
+     * @memberof DotEditableTextProps
+     */
+    contentlet: DotCMSContentlet;
+}
+export declare const TINYMCE_CONFIG: {
+    [key in DOT_EDITABLE_TEXT_MODE]: IAllProps['init'];
+};

package/src/lib/mocks/mockPageContext.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import { DotCMSPageContext } from '../models';
+import { DotCMSPageContext, DotCMSContentlet } from '../models';
+export declare const dotcmsContentletMock: DotCMSContentlet;
 export declare const mockPageContext: DotCMSPageContext;
 export declare const MockContextRender: ({ children, mockContext }: {
     children: JSX.Element;

package/src/lib/models/index.d.ts

@@ -86,3 +86,42 @@ export interface DotCMSPageContext {
     };
     isInsideEditor: boolean;
 }
+export interface DotCMSContentlet {
+    archived: boolean;
+    binaryContentAsset?: string;
+    deleted?: boolean;
+    baseType: string;
+    binary?: string;
+    binaryVersion?: string;
+    file?: string;
+    contentType: string;
+    hasLiveVersion?: boolean;
+    folder: string;
+    hasTitleImage: boolean;
+    hostName: string;
+    host: string;
+    inode: string;
+    identifier: string;
+    languageId: number;
+    image?: string;
+    locked: boolean;
+    language?: string;
+    mimeType?: string;
+    modUser: string;
+    modDate: string;
+    live: boolean;
+    sortOrder: number;
+    owner: string;
+    title: string;
+    stInode: string;
+    titleImage: string;
+    modUserName: string;
+    text?: string;
+    working: boolean;
+    url: string;
+    contentTypeIcon?: string;
+    body?: string;
+    variant?: string;
+    __icon__?: string;
+    [key: string]: any;
+}