Stop 2417 doc viewer mask issue (#2814)

* fix: added maskdata to doc viewer

* fix: Issue fix with masking for ninja and studio view

* fix: duplicate prop removed from NodeContent

* Bump up elements-core and elements-dev-portal versions

* fix: added disableProps for root level properties

---------

Co-authored-by: Pradeep Bande <pradeep.bande@smartbear.com>

Author: prafullaAtSB

packages/elements-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "9.0.3",
+  "version": "9.0.4",
   "sideEffects": [
     "web-components.min.js",
     "src/web-components/**",

packages/elements-core/src/components/Docs/Docs.tsx

@@ -162,6 +162,7 @@ export interface DocsProps extends BaseDocsProps {
   useNodeForRefResolving?: boolean;
   refResolver?: ReferenceResolver;
   maxRefDepth?: number;
+  disableProps?: any;
 }
 
 export interface DocsComponentProps<T = unknown> extends BaseDocsProps {
@@ -176,6 +177,7 @@ export const Docs = React.memo<DocsProps>(
   ({
     nodeType,
     nodeData,
+    disableProps,
     useNodeForRefResolving = false,
     refResolver,
     maxRefDepth,
@@ -190,7 +192,7 @@ export const Docs = React.memo<DocsProps>(
       return null;
     }
 
-    let elem = <ParsedDocs node={parsedNode} {...commonProps} />;
+    let elem = <ParsedDocs node={parsedNode} disableProps={disableProps} {...commonProps} />;
 
     if (useNodeForRefResolving) {
       elem = (
@@ -210,11 +212,10 @@ export const Docs = React.memo<DocsProps>(
 
 export interface ParsedDocsProps extends BaseDocsProps {
   node: ParsedNode;
+  disableProps?: any;
 }
 
-export const ParsedDocs = ({ node, nodeUnsupported, ...commonProps }: ParsedDocsProps) => {
-  const disableProps = (node.data as any)?.disableProps;
-
+export const ParsedDocs = ({ node, nodeUnsupported, disableProps, ...commonProps }: ParsedDocsProps) => {
   switch (node.type) {
     case 'article':
       return <Article data={node.data} {...commonProps} />;

packages/elements-core/src/components/Docs/HttpOperation/Body.tsx

@@ -53,7 +53,7 @@ export const Body = ({ body, onChange, isHttpWebhookOperation = false, disablePr
       const { location, paths } = configEntry;
       paths.forEach(item => {
         // Construct the full absolute path
-        const fullPath = `${location}/${item.path}`;
+        const fullPath = location === '#' ? item?.path : `${location}/${item.path}`;
         absolutePathsToHide.push({ path: fullPath });
       });
     });

packages/elements-core/src/components/Docs/HttpOperation/Responses.tsx

@@ -208,7 +208,7 @@ const Response = ({ response, onMediaTypeChange, disableProps, statusCode }: Res
     const absolutePathsToHide: Array<{ path: string; required?: boolean }> = [];
     configEntries.forEach(({ location, paths }) => {
       paths.forEach(item => {
-        absolutePathsToHide.push({ path: `${location}/${item.path}` });
+        absolutePathsToHide.push({ path: location === '#' ? item?.path : `${location}/${item.path}` });
       });
     });
     return absolutePathsToHide;

packages/elements-core/src/components/Docs/Model/Model.tsx

@@ -78,7 +78,7 @@ const ModelComponent: React.FC<ModelProps> = ({
       disablePropsConfig.forEach((configEntry: any) => {
         const { location, paths } = configEntry;
         paths.forEach((item: any) => {
-          const fullPath = `${location}/${item.path}`;
+          const fullPath = location === '#' ? item?.path : `${location}/${item.path}`;
           absolutePathsToHide.push({ path: fullPath });
         });
       });

packages/elements-core/src/index.ts

@@ -41,8 +41,8 @@ export { useRouter } from './hooks/useRouter';
 export { Styled, withStyles } from './styled';
 export { Divider, Group, ITableOfContentsTree, Item, ParsedNode, RoutingProps, TableOfContentItem } from './types';
 export { isHttpOperation, isHttpService, isHttpWebhookOperation } from './utils/guards';
+export { resolveUrl } from './utils/http-spec/IServer';
 export { ReferenceResolver } from './utils/ref-resolving/ReferenceResolver';
 export { createResolvedObject } from './utils/ref-resolving/resolvedObject';
-export { slugify, resolveRelativeLink } from './utils/string';
+export { resolveRelativeLink, slugify } from './utils/string';
 export { createElementClass } from './web-components/createElementClass';
-export { resolveUrl } from './utils/http-spec/IServer';

packages/elements-dev-portal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-dev-portal",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "sideEffects": [
@@ -66,7 +66,7 @@
   "dependencies": {
     "@stoplight/markdown-viewer": "^5.7.1",
     "@stoplight/mosaic": "^1.53.4",
-    "@stoplight/elements-core": "~9.0.3",
+    "@stoplight/elements-core": "~9.0.4",
     "@stoplight/path": "^1.3.2",
     "@stoplight/types": "^14.0.0",
     "classnames": "^2.2.6",

packages/elements-dev-portal/src/components/NodeContent/NodeContent.tsx

@@ -87,6 +87,7 @@ export const NodeContent = ({
           <Docs
             nodeType={node.type as NodeType}
             nodeData={node.data}
+            disableProps={node?.disableProps}
             nodeTitle={node.title}
             layoutOptions={{
               compact,

packages/elements-dev-portal/src/types.ts

@@ -37,6 +37,7 @@ export type Node = NodeSummary & {
   };
   outbound_edges: NodeEdge[];
   inbound_edges: NodeEdge[];
+  disableProps?: any;
 };
 
 export type NodeSummary = {

packages/elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements",
-  "version": "9.0.3",
+  "version": "9.0.4",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "sideEffects": [
@@ -63,7 +63,7 @@
     ]
   },
   "dependencies": {
-    "@stoplight/elements-core": "~9.0.3",
+    "@stoplight/elements-core": "~9.0.4",
     "@stoplight/http-spec": "^7.1.0",
     "@stoplight/json": "^3.18.1",
     "@stoplight/mosaic": "^1.53.4",