Merge pull request #1624 from SenseNet/feature/Tinymce-editor

Feature Tinymce Editor
SenseNet · Jul 25, 2024 · 88c7851 · 88c7851
2 parents 890ec34 + 03c7907
commit 88c7851
Show file tree

Hide file tree

Showing 23 changed files with 2,788 additions and 4,118 deletions.
diff --git a/apps/sensenet/.gitignore b/apps/sensenet/.gitignore
@@ -68,3 +68,5 @@ cypress/screenshots
 
 # Instrumented code for cypress code coverage
 instrumented
+
+/tinymce
diff --git a/apps/sensenet/index.html b/apps/sensenet/index.html
@@ -4,8 +4,7 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, height=device-height, minimum-scale=1.0, initial-scale=1.0, user-scalable=0"
-    />
+      content="width=device-width, height=device-height, minimum-scale=1.0, initial-scale=1.0, user-scalable=0" />
     <meta name="description" content="sensenet application" />
     <title>sensenet</title>
     <style>
@@ -38,6 +37,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" />
   </head>
   <body>
-    <div id="root" style="height: inherit;"></div>
+    <div id="root" style="height: inherit"></div>
   </body>
 </html>
diff --git a/apps/sensenet/src/components/content-list/content-list.tsx b/apps/sensenet/src/components/content-list/content-list.tsx
@@ -716,16 +716,15 @@ export const ContentList = <T extends GenericContent = GenericContent>(props: Co
             /* If the Order by Column Is The Display. The client will sort it. Due to some locale and indexing issues */
             items={
               currentOrder === 'DisplayName'
-                ? children.sort((a, b) => {
+                ? children?.sort((a, b) => {
                     // If no display Name
-                    if (!a?.DisplayName || !b?.DisplayName) {
-                      return 0
-                    }
+                    const nameA = a?.DisplayName ?? '' // Provide a default value if displayName is undefined
+                    const nameB = b?.DisplayName ?? '' // Provide a default value if displayName is undefined
 
                     if (currentDirection === 'asc') {
-                      return a?.DisplayName.localeCompare(b?.DisplayName)
+                      return nameA.localeCompare(nameB)
                     }
-                    return b?.DisplayName.localeCompare(a?.DisplayName)
+                    return nameB.localeCompare(nameA)
                   })
                 : children
             }

diff --git a/apps/sensenet/src/components/field-controls/index.ts b/apps/sensenet/src/components/field-controls/index.ts
@@ -7,3 +7,4 @@ export * from './webhook-trigger'
 export * from './webhook-headers'
 export * from './webhook-payload'
 export * from './html-editor'
+export * from './tinymce-editor'
diff --git a/apps/sensenet/src/components/field-controls/tinymce-editor.tsx b/apps/sensenet/src/components/field-controls/tinymce-editor.tsx
@@ -0,0 +1,15 @@
+/**
+ * @module FieldControls
+ */
+import { ReactClientFieldSetting, TinymceEditor as SnTinymceEditor } from '@sensenet/controls-react'
+import React from 'react'
+import { useLocalization } from '../../hooks'
+
+/**
+ * Field control that represents a RichText field. Available values will be populated from the FieldSettings.
+ */
+export const TinymceEditor: React.FC<ReactClientFieldSetting> = (props) => {
+  const localization = useLocalization()
+
+  return <SnTinymceEditor {...props} localization={{ richTextEditor: localization.editor }} />
+}
diff --git a/apps/sensenet/src/components/react-control-mapper.ts b/apps/sensenet/src/components/react-control-mapper.ts
@@ -42,6 +42,8 @@ export const reactControlMapper = (repository: Repository) => {
         case 'sn:RichText':
         case 'sn:TipTapEditor':
           return FieldControls.RichTextEditor
+        case 'sn:TinymceEditor':
+          return FieldControls.TinymceEditor
         default:
       }
 

diff --git a/jest/global-setup.js b/jest/global-setup.js
@@ -1 +1,11 @@
+window.matchMedia =
+  window.matchMedia ||
+  function () {
+    return {
+      matches: false,
+      addListener() {},
+      removeListener() {},
+    }
+  }
+
 require('isomorphic-fetch')
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
   },
   "scripts": {
     "postinstall": "husky install",
-    "cy:run:dms": "cypress run --project ./examples/sn-dms-demo",
+       "cy:run:dms": "cypress run --project ./examples/sn-dms-demo",
     "start:dms:e2e": "cross-env NODE_OPTIONS=--openssl-legacy-provider yarn workspace sn-dms-demo start:e2e",
     "test:dms:e2e": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-server-and-test start:dms:e2e http-get://localhost:3000 cy:run:dms",
     "snapp": "yarn workspace @app/sensenet",

diff --git a/packages/sn-client-utils/src/utc-to-locale.ts b/packages/sn-client-utils/src/utc-to-locale.ts
@@ -18,6 +18,7 @@ export function convertUtcToLocale(utcDateString: string) {
 
     return new Intl.DateTimeFormat(window.navigator.language, options).format(date)
   } catch (error) {
-    return console.error(error.message)
+    console.error(error.message)
+    return ''
   }
 }
diff --git a/packages/sn-controls-react/src/editor-wrapper.ts b/packages/sn-controls-react/src/editor-wrapper.ts
@@ -1 +1 @@
-export { Editor as default } from '@sensenet/editor-react'
+export { Editor as default, TinymceEditor } from '@sensenet/editor-react'
diff --git a/packages/sn-controls-react/src/fieldcontrols/index.ts b/packages/sn-controls-react/src/fieldcontrols/index.ts
@@ -13,7 +13,7 @@ export * from './radio-button-group'
 export * from './short-text'
 export * from './tags-input'
 export * from './textarea'
-export * from './rich-text-editor'
+export * from './tinymce-editor'
 export * from './name'
 export * from './password'
 export * from './file-name'
@@ -33,3 +33,4 @@ export * from './localization'
 export * from './file-size'
 export * from './page-count'
 export * from './html-editor'
+export * from './rich-text-editor'
diff --git a/packages/sn-controls-react/src/fieldcontrols/tinymce-editor.tsx b/packages/sn-controls-react/src/fieldcontrols/tinymce-editor.tsx
@@ -0,0 +1,108 @@
+/**
+ * @module FieldControls
+ */
+import { CircularProgress, createStyles, FormHelperText, InputLabel, makeStyles, Typography } from '@material-ui/core'
+import { deepMerge } from '@sensenet/client-utils'
+import { renderHtml } from '@sensenet/editor-react'
+import React, { lazy, Suspense } from 'react'
+import { changeTemplatedValue } from '../helpers'
+import { ReactClientFieldSetting } from './client-field-setting'
+import { defaultLocalization } from './localization'
+const Editor = lazy(() => import('../editor-wrapper').then((module) => ({ default: module.TinymceEditor })))
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    richTextEditor: {},
+  }),
+)
+
+type RichTextEditorClassKey = Partial<ReturnType<typeof useStyles>>
+
+interface ParsedRichTextFieldValue {
+  text: string
+  editor: string
+}
+
+const getFieldValue = (rawValue?: string) => {
+  let value
+
+  if (rawValue === undefined || rawValue === null) {
+    return undefined
+  }
+
+  try {
+    value = JSON.parse(rawValue) as ParsedRichTextFieldValue
+  } catch (_) {
+    return rawValue
+  }
+
+  try {
+    return value.editor ? JSON.parse(value.editor) : value.text
+  } catch (_) {
+    return value.text
+  }
+}
+
+/**
+ * Field control that represents a LongText field. Available values will be populated from the FieldSettings.
+ */
+export const TinymceEditor: React.FC<
+  ReactClientFieldSetting & { classes?: RichTextEditorClassKey; fieldValue?: string }
+> = (props) => {
+  const localization = deepMerge(defaultLocalization.richTextEditor, props.localization?.richTextEditor)
+
+  const initialState =
+    getFieldValue(props.fieldValue) ||
+    (props.actionName === 'new' && changeTemplatedValue(props.settings.DefaultValue)) ||
+    ''
+  const classes = useStyles(props)
+
+  switch (props.actionName) {
+    case 'edit':
+    case 'new':
+      return (
+        <div className={classes.richTextEditor}>
+          <InputLabel shrink htmlFor={props.settings.Name} required={props.settings.Compulsory}>
+            {props.settings.DisplayName}
+          </InputLabel>
+
+          <Suspense
+            fallback={
+              <div style={{ textAlign: 'center' }}>
+                <CircularProgress />
+                <div>{localization.loading}</div>
+              </div>
+            }>
+            <Editor
+              initvalue={initialState}
+              onChange={(content) => {
+                props.fieldOnChange?.(props.settings.Name, content)
+              }}
+            />
+          </Suspense>
+
+          {!props.hideDescription && <FormHelperText>{props.settings.Description}</FormHelperText>}
+        </div>
+      )
+    case 'browse':
+    default:
+      return (
+        <div>
+          <Typography variant="caption" gutterBottom={true}>
+            {props.settings.DisplayName}
+          </Typography>
+          {initialState ? (
+            <div
+              dangerouslySetInnerHTML={{
+                __html: typeof initialState === 'string' ? initialState : renderHtml(initialState),
+              }}
+            />
+          ) : (
+            <Typography variant="body1" gutterBottom={true}>
+              {localization.noValue}
+            </Typography>
+          )}
+        </div>
+      )
+  }
+}
diff --git a/packages/sn-editor-react/.gitignore b/packages/sn-editor-react/.gitignore
@@ -60,3 +60,4 @@ typings/
 dist
 temp
 bundle
+/public/tinymce/
diff --git a/packages/sn-editor-react/package.json b/packages/sn-editor-react/package.json
@@ -45,6 +45,7 @@
     "@babel/runtime": "^7.18.9",
     "@material-ui/icons": "^4.11.3",
     "@sensenet/client-utils": "^2.3.0",
+    "@tinymce/tinymce-react": "^5.1.1",
     "@tiptap/core": "^2.0.0-beta.102",
     "@tiptap/extension-blockquote": "^2.0.0-beta.15",
     "@tiptap/extension-bold": "^2.0.0-beta.15",
@@ -74,6 +75,8 @@
     "@tiptap/extension-underline": "^2.0.0-beta.16",
     "@tiptap/html": "^2.0.0-beta.101",
     "@tiptap/react": "^2.0.0-beta.63",
+    "fs-extra": "^11.2.0",
+    "tinymce": "^7",
     "tslib": "^2.4.0"
   },
   "devDependencies": {

diff --git a/packages/sn-editor-react/src/components/controls/accordion-control.tsx b/packages/sn-editor-react/src/components/controls/accordion-control.tsx
@@ -186,7 +186,7 @@ export const AccordionControl: FC<AccordionControlProps> = ({ buttonProps, edito
         className={classes.dialog}
         onClose={handleSubmit}
         aria-labelledby="form-dialog-title"
-        maxWidth="md"
+        maxWidth="sm"
         fullWidth>
         <DialogTitle id="form-dialog-title">{localization.accordionControl.title}</DialogTitle>
         <DialogContent>

diff --git a/packages/sn-editor-react/src/index.ts b/packages/sn-editor-react/src/index.ts
@@ -1,3 +1,4 @@
 export * from './components'
 export * from './context'
 export * from './utils'
+export * from './tinymce'
Original file line number	Diff line number	Diff line change
Expand Up		@@ -68,3 +68,5 @@ cypress/screenshots

		# Instrumented code for cypress code coverage
		instrumented

		/tinymce
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { Editor as default } from '@sensenet/editor-react'
		export { Editor as default, TinymceEditor } from '@sensenet/editor-react'
-Original file line number
+Diff line change
@@ Expand Up / @@ -60,3 +60,4 @@ typings/ @@
     dist
     temp
     bundle
+    /public/tinymce/