👍 Import ckeditor

resources/js/components/elements/inputs/editor.tsx

@@ -0,0 +1,45 @@
+import { CKEditor } from '@ckeditor/ckeditor5-react';
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+import {useState} from "react";
+
+export interface EditorProps {
+    name?: string;
+    id?: string;
+    label?: string;
+    type?: string;
+    value?: string;
+    class?: string;
+}
+
+export default function Editor(props: EditorProps) {
+    const [data, setData] = useState(props.value);
+
+    const handleChange = (event: any, editor: any) => {
+        const data = editor.getData();
+
+        console.log( { event, editor, data } );
+
+        setData(data);
+    }
+
+    return <div className={'form-group'}>
+        <label className="col-form-label" htmlFor={props.id}>{props.label}</label>
+        <textarea className={'box-hidden'+ (props.class ? ' ' + props.class : '')} name={props.name}>{data}</textarea>
+
+        <CKEditor
+            editor={ ClassicEditor }
+            id={props.id}
+            data={data}
+            onReady={ editor => {
+                console.log( 'Editor is ready to use!', editor );
+            } }
+            onChange={ handleChange }
+            onBlur={ ( event, editor ) => {
+                console.log( 'Blur.', editor );
+            } }
+            onFocus={ ( event, editor ) => {
+                console.log( 'Focus.', editor );
+            } }
+        />
+    </div>
+}

resources/js/types/config.ts

@@ -7,39 +7,37 @@ export interface Config {
     logo: string
 }
 
-export interface BaseAdminPageProps extends Page<PageProps> {
+export interface BaseAdminPageProps {
     [key: string]: unknown;
-    props: {
-        errors: Errors & ErrorBag,
-        flash: {
-            success?: string,
-            error?: string,
-        },
-        currentTheme: string,
-        user: {
-            id: number,
-            name: string,
-            email: string,
-            avatar: string,
-        },
-        langs: any,
-        currentLang: string,
-        trans: any,
-        adminUrl: string,
-        adminPrefix: string,
-        totalNotifications: number,
-        leftMenuItems: MenuItem[],
-        currentUrl: string,
-        currentPath: string,
-        config: {
-            title: string,
-            description: string,
-        },
-        breadcrumbItems: Array<{
-            title: string,
-            url?: string
-        }>
-    }
+    flash: {
+        success?: string,
+        error?: string,
+    },
+    currentTheme: string,
+    user: {
+        id: number,
+        name: string,
+        email: string,
+        avatar: string,
+    },
+    langs: any,
+    currentLang: string,
+    trans: any,
+    adminUrl: string,
+    adminPrefix: string,
+    totalNotifications: number,
+    leftMenuItems: MenuItem[],
+    currentUrl: string,
+    currentPath: string,
+    config: {
+        title: string,
+        description: string,
+    },
+    breadcrumbItems: Array<{
+        title: string,
+        url?: string
+    }>,
+    title: string
 }
 
 export interface BasePageProps extends Page<PageProps> {