Merge pull request #259 from enonic/next

v0.8.5

package.json

@@ -11,20 +11,20 @@
     "lint": "npx next lint"
   },
   "dependencies": {
-    "html-react-parser": "^1.4.11",
+    "html-react-parser": "^1.4.12",
     "next": "^12.1.5",
     "node-html-parser": "^5.3.3",
-    "react": "18.0.0",
-    "react-dom": "18.0.0"
+    "react": "18.1.0",
+    "react-dom": "18.1.0"
   },
   "devDependencies": {
-    "@types/node": "^17.0.25",
+    "@types/node": "^17.0.31",
     "@types/next": "^9.0.0",
-    "@types/react": "18.0.7",
-    "@types/react-dom": "^18.0.1",
-    "eslint": "8.14.0",
-    "eslint-config-next": "12.1.5",
+    "@types/react": "18.0.9",
+    "@types/react-dom": "^18.0.3",
+    "eslint": "8.15.0",
+    "eslint-config-next": "12.1.6",
     "prettier": "^2.6.2",
-    "typescript": "4.6.3"
+    "typescript": "4.6.4"
   }
 }

src/_enonicAdapter/guillotine/getMetaData.ts

@@ -15,7 +15,7 @@ const COMPONENTS_QUERY = `
           configAsJson
         }
         text {
-          value(processHtml:{type:absolute}) {
+          value(processHtml:{type:absolute, imageWidths:[400, 800, 1200], imageSizes:"(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"}) {
             processedHtml
             links {
               ref

src/_enonicAdapter/views/Region.tsx

@@ -22,10 +22,8 @@ export interface RegionsProps {
 /** Single region */
 export const RegionView = (props: RegionProps) => {
     const {name, components, common, meta, className} = props;
-    const regionAttrs: { [key: string]: string } = {
-        id: name + "Region",
-        [PORTAL_REGION_ATTRIBUTE]: name,
-    };
+    const regionAttrs: { [key: string]: string } = {};
+
     if (className) {
         regionAttrs.className = className;
     }
@@ -34,11 +32,14 @@ export const RegionView = (props: RegionProps) => {
         <BaseComponent key={regionAttrs.id + "-" + i} component={component} common={common} meta={meta}/>
     ))
 
-    if (meta.renderMode === RENDER_MODE.LIVE) {
-        // do not make region wrappers in live mode
-        return (<>{children}</>)
-    } else {
+    if (meta.renderMode === RENDER_MODE.EDIT) {
+        regionAttrs.id = name + "Region";
+        regionAttrs[PORTAL_REGION_ATTRIBUTE] = name;
+    }
+    if (Object.keys(regionAttrs).length) {
         return <div {...regionAttrs}>{children}</div>;
+    } else {
+        return <>{children}</>
     }
 }
 

src/_enonicAdapter/views/RichTextView.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+import {RENDER_MODE} from '../utils';
+import {RichTextProcessor, TextData} from '../RichTextProcessor';
+
+type Props = {
+    data: TextData,
+    mode?: RENDER_MODE,
+    tag?: string,
+}
+
+const RichTextView = ({tag, mode, data}: Props) => {
+    const CustomTag = tag as keyof JSX.IntrinsicElements || 'section';
+    const customMode = mode || RENDER_MODE.NEXT;
+    return <CustomTag dangerouslySetInnerHTML={{__html: RichTextProcessor.process(data, customMode)}}/>
+}
+
+export default RichTextView;

src/_enonicAdapter/views/Text.tsx

@@ -1,6 +1,7 @@
 import React from "react"
-import {LinkData, RichTextProcessor} from '../RichTextProcessor';
+import {LinkData} from '../RichTextProcessor';
 import {MetaData} from '../guillotine/getMetaData';
+import RichTextView from './RichTextView';
 
 type Props = {
     meta: MetaData,
@@ -15,7 +16,7 @@ type Props = {
 const DefaultTextView = ({component, meta}: Props) => (
     // temporary workaround for TextComponent expecting section inside of a root element
     <div>
-        <section dangerouslySetInnerHTML={{__html: RichTextProcessor.process(component.value, meta.renderMode)}}/>
+        <RichTextView data={component.value} mode={meta.renderMode}/>
     </div>
 );
 

src/components/parts/Heading.tsx

@@ -11,7 +11,7 @@ export interface HeadingData {
 }
 
 const HeadingView = ({part, common}: HeadingData) => (
-    <h2>{part?.config?.heading || common.displayName}</h2>
+    <h2>{part?.config?.heading || common?.get?.displayName}</h2>
 );
 
 export default HeadingView;