Merge pull request #42 from prezly/feature/dev-8879-do-not-render-pla…

…ceholder-nodes

[DEV-8879] Ignore `PlaceholderNode` in default renderer

package.json

@@ -79,7 +79,7 @@
     "dependencies": {
         "@prezly/linear-partition": "^1.0.2",
         "@prezly/sdk": "^6.21.0",
-        "@prezly/story-content-format": "^0.57.0",
+        "@prezly/story-content-format": "^0.58.0",
         "@prezly/uploadcare": "^2.3.2",
         "@react-hookz/web": "^12.0.0",
         "classnames": "^2.2.6",

src/Renderer.tsx

@@ -15,6 +15,7 @@ import {
     ListNode,
     Node,
     ParagraphNode,
+    PlaceholderNode,
     QuoteNode,
     TableCellNode,
     TableNode,
@@ -31,10 +32,12 @@ import * as Transformations from './transformations';
 import type { Transformation } from './types';
 import { Component, Selector } from './selector';
 
+type Fallback = 'ignore' | 'warning' | 'passthru' | ComponentType<{ node: Node }>;
+
 interface Props<N extends Node | Node[]> {
     children?: ReactNode;
     defaultComponents?: boolean;
-    defaultFallback?: 'ignore' | 'warning' | 'passthru' | ComponentType<{ node: Node }>;
+    defaultFallback?: Fallback;
     nodes: N;
     transformations?: Transformation[];
 }
@@ -68,6 +71,7 @@ export function Renderer<N extends Node | Node[]>({
                     <Component match={ListItemNode.isListItemNode} component={Elements.ListItem} />
                     <Component match={ListItemTextNode.isListItemTextNode} component={Elements.ListItemText} />
                     <Component match={ParagraphNode.isParagraphNode} component={Elements.Paragraph} />
+                    <Component match={PlaceholderNode.isPlaceholderNode} component={Elements.Ignore} />
                     <Component match={QuoteNode.isQuoteNode} component={Elements.Quote} />
                     <Component match={Text.isText} component={Elements.Text} />
                     <Component match={VariableNode.isVariableNode} component={Elements.Variable} />
@@ -77,14 +81,13 @@ export function Renderer<N extends Node | Node[]>({
                     <Component match={TableCellNode.isTableCellNode} component={Elements.TableCell} />
                 </>
             )}
-            {defaultFallback !== 'ignore' && <Component match={isAnyNode} component={fallback(defaultFallback)} />}
+            <Component match={isAnyNode} component={fallback(defaultFallback)} />
         </Selector>
     );
 }
 
-function fallback(
-    defaultFallback: 'warning' | 'passthru' | ComponentType<{ node: Node }>,
-): ComponentType<{ node: Node }> {
+function fallback(defaultFallback: Fallback): ComponentType<{ node: Node }> {
+    if (defaultFallback === 'ignore') return Elements.Ignore;
     if (defaultFallback === 'passthru') return Elements.Passthru;
     if (defaultFallback === 'warning') return Elements.Unknown;
     return defaultFallback;

src/elements/Ignore.tsx

@@ -0,0 +1,3 @@
+export function Ignore() {
+    return null;
+}

src/elements/index.ts

@@ -1,4 +1,5 @@
 export { Document } from './Document';
+export { Ignore } from './Ignore';
 export { Unknown } from './Unknown';
 export { Passthru } from './Passthru';