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;