@redocly/marketing-pages 0.1.16 → 0.1.17

package/dist/pages/editor/components/EditorPanel.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';
+interface EditorPanelProps {
+    value: string;
+    onChange: (value: string | undefined) => void;
+    onValidationUpdate?: (errors: Monaco.editor.IMarkerData[], value: string | undefined) => void;
+    hideWarnings: boolean;
+    gotoPosition?: {
+        line: number;
+        column: number;
+    } | null;
+}
+declare const EditorPanel: React.FC<EditorPanelProps>;
+export default EditorPanel;

package/dist/pages/editor/components/EditorPanel.js

@@ -0,0 +1 @@
+import*as t from"react";import f from"@monaco-editor/react";import{useMonacoEditor as s}from"../hooks/useMonacoEditor";import{DEFAULT_EDITOR_OPTIONS as d,EDITOR_LANGUAGE as p,EDITOR_THEMES as C}from"../constants/editorConfig";const I=({value:r,onChange:l,onValidationUpdate:o,hideWarnings:u,gotoPosition:e})=>{const[c,i]=t.useState(!1);t.useEffect(()=>i(!0),[]);const{activeColorMode:a,handleEditorDidMount:m,editorRef:n}=s({onValidationUpdate:o,hideWarnings:u,onClick:E=>{console.log("Editor clicked at position:",E)}});return t.useEffect(()=>{e&&n.current&&(n.current.revealPositionInCenter({lineNumber:e.line,column:e.column}),n.current.setPosition({lineNumber:e.line,column:e.column}),n.current.focus())},[e,n]),c?t.createElement(f,{language:p,theme:C[a],value:r,options:d,onChange:l,onMount:m}):null};var O=I;export{O as default};

package/dist/pages/editor/components/EmptyState.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface EmptyStateProps {
+    onTemplateClick?: () => void;
+    onUploadClick?: (content: string, fileName: string) => void;
+}
+export default function EmptyState({ onTemplateClick, onUploadClick }: EmptyStateProps): React.JSX.Element;
+export {};

package/dist/pages/editor/components/EmptyState.js

@@ -0,0 +1,31 @@
+import e from"react";import t from"styled-components";import{Button as n}from"@redocly/theme/components/Button/Button";function o({onTemplateClick:i,onUploadClick:r}){return e.createElement(l,null,e.createElement(a,null),e.createElement(c,null,"Redocly Editor"),e.createElement(p,null,"Write, test, and preview your API references in a fully interactive environment. Use real-time rendering to build and refine your docs before publishing."),e.createElement(m,null,e.createElement(n,{onClick:i},"Use template"),e.createElement(n,{variant:"outlined",onClick:r},"Upload file")))}const l=t.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 24px;
+  text-align: center;
+`,a=t.div`
+  width: 160px;
+  height: 160px;
+  border-radius: 12px;
+  background-color: #f5f5f7;
+  margin-bottom: 24px;
+`,c=t.h2`
+  margin: 0 0 12px 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-color-primary);
+`,p=t.p`
+  max-width: 560px;
+  margin: 0 0 24px 0;
+  font-size: 15px;
+  line-height: 1.45;
+  color: #4b5563;
+`,m=t.div`
+  display: flex;
+  gap: 8px;
+`,f=t.span`
+  font-size: 10px;
+`;export{o as default};

package/dist/pages/editor/components/Page.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function Page(): React.JSX.Element;

package/dist/pages/editor/components/Page.js

@@ -0,0 +1,59 @@
+import r from"styled-components";import e from"react";import{Panel as t,PanelGroup as f,PanelResizeHandle as h}from"react-resizable-panels";import{useEditorState as L}from"../hooks/useEditorState";import{useOpenApiValidation as O}from"../hooks/useOpenApiValidation";import{useFileOperations as W}from"../hooks/useFileOperations";import H from"./EditorPanel";import{ProblemsPanel as N}from"./ProblemsPanel";import T from"./Toolbar";import G from"./PreviewPanel";function J(){const[v,g]=e.useState(!1);e.useEffect(()=>g(!0),[]);const{value:a,setValue:d,validatedValue:b,setValidatedValue:E,validationErrors:q,setValidationErrors:c,fileName:B,setFileName:P,parsedErrors:z,hasStructErrors:m,hideWarnings:p,setHideWarnings:x}=L(),{definition:y,hasRenderedOnce:C,setHasRenderedOnce:k}=O({validatedValue:b,hasStructErrors:m}),[w,S]=e.useState(null),[l,u]=e.useState(!0),n=e.useRef(null),o=W({setValue:d,setFileName:P,setHasRenderedOnce:k,setValidationErrors:c}),V=(i,s)=>{c(i),E(s)},R=(i,s)=>{S({line:i,column:s}),l&&n.current?.expand()},D=()=>o.handleDownloadYaml(a),F=()=>o.handleDownloadJson(a);return e.createElement(Y,null,e.createElement(U,{direction:"horizontal"},e.createElement(A,{defaultSize:50,minSize:20},e.createElement(T,{onFileLoad:o.handleFileLoad,onDownloadYamlClick:D,onDownloadJsonClick:F,hideWarnings:p,onHideWarningsChange:x}),e.createElement(I,null,e.createElement(f,{direction:"vertical"},e.createElement(t,{defaultSize:95},e.createElement(H,{value:a,onChange:d,onValidationUpdate:V,hideWarnings:p,gotoPosition:w})),e.createElement(h,{className:"resize-handle-horizontal",style:{display:l?"none":"block"}}),e.createElement(t,{ref:n,collapsible:!0,collapsedSize:5,defaultSize:5,minSize:20,onCollapse:u.bind(null,!0),onExpand:u.bind(null,!1)},e.createElement(N,{problems:z,onProblemClick:R,isCollapsed:l,onToggle:()=>{l?n.current?.expand():n.current?.collapse()}}))))),e.createElement(h,{className:"resize-handle"}),e.createElement(j,{defaultSize:50,minSize:20,collapsible:!0,collapsedSize:0},v&&e.createElement(G,{definition:y,rawValue:a,hasRenderedOnce:C,hasStructErrors:m,onTemplateClick:o.handleTemplateClick,onFileLoad:o.handleFileLoad}))))}const Y=r.div`
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - var(--navbar-height));
+
+  background-color: var(--bg-color);
+  color: var(--text-color-primary);
+
+  [data-component-name='Layout/PageLayout']:has(&) + div + footer {
+    display: none;
+  }
+`,U=r(f)`
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+  overflow: visible;
+
+  .resize-handle {
+    width: 8px;
+    background-color: var(--border-color-primary);
+    cursor: col-resize;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: var(--color-primary-variant);
+    }
+  }
+
+  .resize-handle-horizontal {
+    height: 8px;
+    background-color: var(--border-color-primary);
+    cursor: row-resize;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: var(--color-primary-variant);
+    }
+  }
+`,A=r(t)`
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+
+  .monaco-editor {
+    --vscode-editor-background: var(--layer-color);
+    --vscode-editorGutter-background: var(--layer-color);
+  }
+`,I=r.div`
+  flex: 1;
+  min-height: 0;
+  display: flex;
+`,j=r(t)`
+  flex: 3;
+  position: relative;
+  border-left: 1px solid var(--border-color-primary);
+  --sidebar-width: 0px;
+  --panel-gap-horizontal: var(--spacing-md);
+`;export{J as default};

package/dist/pages/editor/components/PreviewPanel.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface PreviewPanelProps {
+    definition: any | null;
+    rawValue: string;
+    hasRenderedOnce: boolean;
+    hasStructErrors: boolean;
+    onTemplateClick: () => void;
+    onFileLoad: (content: string, fileName: string) => void;
+}
+declare const PreviewPanel: React.FC<PreviewPanelProps>;
+export default PreviewPanel;

package/dist/pages/editor/components/PreviewPanel.js

@@ -0,0 +1,20 @@
+import*as e from"react";import d from"styled-components";import{useEffect as o,useRef as i}from"react";import R from"./EmptyState";import{useColorMode as b}from"../hooks/useColorMode";const I=d.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(255, 235, 238, 0.95);
+  color: #5c2121;
+  padding: 8px 16px;
+  border-bottom: 1px solid #f5c6cb;
+  text-align: center;
+  font-size: 0.9em;
+  z-index: 10;
+`,x=d.iframe`
+  width: 100%;
+  height: 100%;
+  border: none;
+`,M=({definition:s,rawValue:l,hasStructErrors:g,onTemplateClick:h,onFileLoad:y})=>{const f=i(null),n=s||f.current,u=b(),v=i(null),t=i(null),[a,w]=e.useState(!1),[E,S]=e.useState(0),m=i(!1);o(()=>{const c=r=>{r.data?.type!=="scroll-sync"||r.data?.source==="preview"||!t.current||m.current||(m.current=!0,t.current.postMessage(r.data,"*"),setTimeout(()=>{m.current=!1},50))};return window.addEventListener("message",c),()=>window.removeEventListener("message",c)},[]),o(()=>{const c=r=>{t.current=r,r.updateDefinition(n),w(!0),setTimeout(()=>{r.postMessage({type:"theme-change",theme:u},"*")},100)};window.onReady=c},[n]),o(()=>{s&&(f.current=s)},[s]),o(()=>{t.current&&a&&t.current.updateDefinition(n)},[n,a]),o(()=>{t.current&&a&&t.current.postMessage({type:"theme-change",theme:u},"*")},[u,a]);const p=g&&e.createElement(I,null,"Preview is showing the last valid version. The current content has structural errors. Please check editor messages.")||null;return!l||typeof l!="string"||l.trim()===""?e.createElement(R,{onTemplateClick:h,onUploadClick:y}):n?e.createElement(e.Fragment,null,p,e.createElement(P,null,e.createElement(x,{key:E,ref:v,title:"API Documentation Preview",src:"/preview",onLoad:()=>{}}))):p||"Loading..."};var L=M;const P=d.div`
+  height: 100%;
+  overflow: hidden;
+`;export{L as default};

package/dist/pages/editor/components/ProblemsPanel.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { editor as MonacoEditor } from 'monaco-editor';
+interface ProblemsPanelProps {
+    problems: MonacoEditor.IMarkerData[];
+    onProblemClick: (line: number, column: number) => void;
+    isCollapsed: boolean;
+    onToggle: () => void;
+}
+export declare const ProblemsPanel: React.FC<ProblemsPanelProps>;
+export {};

package/dist/pages/editor/components/ProblemsPanel.js

@@ -0,0 +1,71 @@
+import*as e from"react";import n from"styled-components";import{ChevronDownIcon as b}from"@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon";import{ChevronUpIcon as k}from"@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon";const E={8:"Error",4:"Warning",2:"Info",1:"Hint"},h={8:"var(--color-error)",4:"var(--color-warning)",2:"var(--color-info)",1:"var(--color-info)"},T=({problems:o,onProblemClick:m,isCollapsed:a,onToggle:v})=>{const[r,f]=e.useState({key:"severity",direction:"descending"}),p=e.useMemo(()=>{let t=[...o];return r!==null&&t.sort((i,c)=>r.key==="line"?i.startLineNumber<c.startLineNumber?r.direction==="ascending"?-1:1:i.startLineNumber>c.startLineNumber?r.direction==="ascending"?1:-1:0:i[r.key]<c[r.key]?r.direction==="ascending"?-1:1:i[r.key]>c[r.key]?r.direction==="ascending"?1:-1:0),t},[o,r]),s=t=>{let i="ascending";r&&r.key===t&&r.direction==="ascending"&&(i="descending"),f({key:t,direction:i})},y=o.filter(t=>t.severity===8).length,x=o.filter(t=>t.severity===4).length;return e.createElement(C,{$collapsed:a},e.createElement(w,{onClick:v},e.createElement($,null,"Problems ",o.length,e.createElement(L,null,"(",e.createElement(d,{color:"var(--color-error)"},y," Errors"),e.createElement(d,{color:"var(--color-warning)"},x," Warnings"),")")),a?e.createElement(k,null):e.createElement(b,null)),!a&&e.createElement(S,null,e.createElement(g,null,e.createElement(l,{onClick:()=>s("severity")},"Severity ",r?.key==="severity"?r?.direction==="ascending"?"\u2191":"\u2193":""),e.createElement(l,{onClick:()=>s("message")},"Message ",r?.key==="message"?r?.direction==="ascending"?"\u2191":"\u2193":""),e.createElement(l,{onClick:()=>s("line")},"Line ",r?.key==="line"?r?.direction==="ascending"?"\u2191":"\u2193":"")),e.createElement(P,null,p.map((t,i)=>e.createElement(u,{key:i,onClick:()=>m(t.startLineNumber,t.startColumn)},e.createElement(l,null,e.createElement(z,{color:h[t.severity]},E[t.severity])),e.createElement(l,null,t.message),e.createElement(l,null,t.startLineNumber,":",t.startColumn))))))},C=n.div`
+  display: flex;
+  flex-direction: column;
+  height: ${o=>o.$collapsed?"34px":"100%"};
+  max-height: ${o=>o.$collapsed?"34px":"none"};
+  background-color: var(--bg-color);
+`,w=n.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  height: 34px;
+  padding: 0 12px;
+  border-top: 1px solid var(--border-color-primary);
+  cursor: pointer;
+  user-select: none;
+`,$=n.div`
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+`,L=n.div`
+  display: flex;
+  gap: 8px;
+`,d=n.span`
+  color: ${o=>o.color};
+`,S=n.div`
+  flex-grow: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  font-size: var(--font-size-sm);
+`,N="100px 1fr 100px 100px",u=n.div`
+  display: grid;
+  grid-template-columns: ${N};
+  border-bottom: 1px solid var(--border-color-primary);
+  cursor: pointer;
+  &:hover {
+    background-color: var(--layer-color);
+  }
+`,g=n(u)`
+  position: sticky;
+  top: 0;
+  background-color: var(--bg-color);
+  font-weight: bold;
+  border-bottom-width: 2px;
+  cursor: default;
+
+  &:hover {
+    background-color: var(--bg-color);
+  }
+`,P=n.div`
+  overflow-y: auto;
+`,l=n.div`
+  padding: 6px 12px;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  ${g} & {
+    cursor: pointer;
+    user-select: none;
+    &:hover {
+      background-color: var(--lay);
+    }
+  }
+`,z=n.span`
+  color: ${o=>o.color};
+  font-weight: bold;
+`;export{T as ProblemsPanel};

package/dist/pages/editor/components/Toolbar.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface ToolbarProps {
+    onFileLoad: (content: string, fileName: string) => void;
+    onDownloadYamlClick: () => void;
+    onDownloadJsonClick: () => void;
+    hideWarnings: boolean;
+    onHideWarningsChange: (hide: boolean) => void;
+}
+export default function Toolbar({ hideWarnings, onHideWarningsChange, onDownloadYamlClick, onDownloadJsonClick, onFileLoad }: ToolbarProps): React.JSX.Element;
+export {};

package/dist/pages/editor/components/Toolbar.js

@@ -0,0 +1,50 @@
+import e,{useRef as v,useState as E}from"react";import o from"styled-components";import{Button as i}from"@redocly/theme/components/Button/Button";import{DownloadIcon as p}from"@redocly/theme/icons/DownloadIcon/DownloadIcon";import{ChevronDownIcon as k}from"@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon";function C({hideWarnings:m,onHideWarningsChange:f,onDownloadYamlClick:c,onDownloadJsonClick:u,onFileLoad:g}){const d=v(null),[x,t]=E(!1),b=()=>{d.current?.click()},h=()=>t(n=>!n),w=n=>{const r=n.target.files?.[0];if(!r)return;const l=new FileReader;l.onload=a=>{const y=a.target?.result;g(y,r.name)},l.onerror=a=>{console.error("Failed to read file!",a)},l.readAsText(r),n.target.value=""};return e.createElement(D,null,e.createElement(I,null,e.createElement("input",{type:"checkbox",checked:m,onChange:n=>f(n.target.checked),id:"hide-warnings"}),"Hide warnings"),e.createElement(F,null,e.createElement(i,{variant:"text",icon:e.createElement(p,{style:{transform:"rotate(180deg)"}}),onClick:b,"aria-label":"Upload spec"}),e.createElement(A,{type:"file",ref:d,onChange:w,accept:".yaml,.yml,.json"}),e.createElement(R,null,e.createElement(i,{onClick:c,iconPosition:"left",icon:e.createElement(p,null)},"Download"),e.createElement(i,{icon:e.createElement(k,null),onClick:h,"aria-label":"Download options"}),x&&e.createElement(z,null,e.createElement(s,{onClick:()=>{c(),t(!1)}},"Download YAML"),e.createElement(s,{onClick:()=>{u(),t(!1)}},"Download JSON")))))}const D=o.div`
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--border-color-primary);
+  display: flex;
+  align-items: center;
+  background-color: var(--bg-color);
+  color: var(--text-color-primary);
+  gap: 16px;
+`,I=o.label`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.875rem;
+  cursor: pointer;
+`,F=o.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto; /* Push to far right */
+`,R=o.div`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: calc(var(--spacing-xxs) / 2);
+`,z=o.ul`
+  position: absolute;
+  right: 0;
+  top: 100%;
+  margin: 4px 0 0 0;
+  padding: 4px 0;
+  list-style: none;
+  border: 1px solid var(--border-color-primary, #ccc);
+  background-color: var(--bg-color, #fff);
+  color: var(--text-color-primary, #111);
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  min-width: 140px;
+  z-index: 20;
+`,s=o.li`
+  padding: 6px 12px;
+  font-size: 0.875rem;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--bg-color-active, #f5f5f5);
+  }
+`,A=o.input`
+  display: none;
+`;export{C as default};

package/dist/pages/editor/constants/editorConfig.d.ts

@@ -0,0 +1,7 @@
+import type * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';
+export declare const DEFAULT_EDITOR_OPTIONS: Monaco.editor.IStandaloneEditorConstructionOptions;
+export declare const EDITOR_LANGUAGE = "yaml";
+export declare const EDITOR_THEMES: {
+    readonly light: "light";
+    readonly dark: "vs-dark";
+};

package/dist/pages/editor/constants/editorConfig.js

@@ -0,0 +1 @@
+const t={padding:{top:12,bottom:12},fontSize:14,tabSize:2,detectIndentation:!0,minimap:{enabled:!1},renderLineHighlight:"all",placeholder:"Drag your file here or start typing...",stickyScroll:{enabled:!0}},e="yaml",r={light:"light",dark:"vs-dark"};export{t as DEFAULT_EDITOR_OPTIONS,e as EDITOR_LANGUAGE,r as EDITOR_THEMES};

package/dist/pages/editor/editor.page.d.ts

@@ -0,0 +1,8 @@
+import Page from './components/Page';
+export declare const frontmatter: {
+    seo: {
+        title: string;
+    };
+    slug: string;
+};
+export default Page;

package/dist/pages/editor/editor.page.js

@@ -0,0 +1 @@
+import t from"./components/Page";const e={seo:{title:"Redocly Editor"},slug:"/editor"};var r=t;export{r as default,e as frontmatter};

package/dist/pages/editor/hooks/useColorMode.d.ts

@@ -0,0 +1 @@
+export declare const useColorMode: () => string;

package/dist/pages/editor/hooks/useColorMode.js

@@ -0,0 +1 @@
+import{useEffect as r,useState as s}from"react";const d=()=>{const[t,o]=s(typeof document<"u"&&document.documentElement.classList.contains("dark")?"dark":"light");return r(()=>{if(typeof document>"u")return;const e=new MutationObserver(()=>{const n=document.documentElement.classList.contains("dark");o(n?"dark":"light")});return e.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]}),()=>{e.disconnect()}},[]),t};export{d as useColorMode};

package/dist/pages/editor/hooks/useEditorState.d.ts

@@ -0,0 +1,18 @@
+import { editor } from 'monaco-editor';
+export interface EditorState {
+    value: string;
+    setValue: (value: string) => void;
+    validatedValue: string | undefined;
+    setValidatedValue: (value: string | undefined) => void;
+    validationErrors: editor.IMarkerData[];
+    setValidationErrors: (errors: editor.IMarkerData[]) => void;
+    fileName: string;
+    setFileName: (fileName: string) => void;
+    parsedErrors: (editor.IMarkerData & {
+        rule: string;
+    })[];
+    hasStructErrors: boolean;
+    hideWarnings: boolean;
+    setHideWarnings: (hide: boolean) => void;
+}
+export declare function useEditorState(): EditorState;

package/dist/pages/editor/hooks/useEditorState.js

@@ -0,0 +1 @@
+import{useEffect as l,useMemo as n,useState as t}from"react";function h(){const i=typeof localStorage<"u"&&localStorage.getItem("editorValue")||"",[e,u]=t(i),[c,o]=t(void 0),[r,d]=t([]),[m,f]=t(""),[V,g]=t(!1),E=/Rule: ([\w-_\/]+)/,s=n(()=>r.map(a=>({...a,rule:a.message.match(E)?.[1]})),[r]),S=n(()=>s.some(a=>a.rule==="struct"),[s]);return l(()=>{localStorage.setItem("editorValue",e)},[e]),l(()=>{o(e)},[e]),{value:e,setValue:u,validatedValue:c,setValidatedValue:o,validationErrors:r,setValidationErrors:d,fileName:m,setFileName:f,hideWarnings:V,setHideWarnings:g,parsedErrors:s,hasStructErrors:S}}export{h as useEditorState};

package/dist/pages/editor/hooks/useFileOperations.d.ts

@@ -0,0 +1,13 @@
+interface FileOperationsCallbacks {
+    setValue: (value: string) => void;
+    setFileName: (name: string) => void;
+    setHasRenderedOnce: (hasRendered: boolean) => void;
+    setValidationErrors: (errors: any[]) => void;
+}
+export declare function useFileOperations(callbacks: FileOperationsCallbacks): {
+    handleFileLoad: (content: string, fileName: string) => void;
+    handleTemplateClick: () => void;
+    handleDownloadYaml: (value: string) => void;
+    handleDownloadJson: (value: string) => void;
+};
+export {};

package/dist/pages/editor/hooks/useFileOperations.js

@@ -0,0 +1 @@
+import{dump as p,load as e}from"js-yaml";import{downloadFile as d}from"../utils/download";import{defaultOpenapiTemplate as m}from"../templates/defaultOpenapiTemplate";function L(s){const{setValue:a,setFileName:i,setHasRenderedOnce:r,setValidationErrors:l}=s;return{handleFileLoad:(n,o)=>{a(n),console.log(`Loaded file: ${o}`),i(o),r(!1),l([])},handleTemplateClick:()=>{a(m),console.log("Loaded default template."),r(!1),l([])},handleDownloadYaml:n=>{let o=n;try{if(n.trim().startsWith("{")){const t=JSON.parse(n);o=p(t)}else e(n),o=n}catch(t){try{e(n),o=n}catch(c){alert("Content is not valid JSON or YAML. Cannot convert to YAML for download."),console.error("Error preparing YAML for download:",t,c);return}}d(o,"openapi.yaml","application/x-yaml")},handleDownloadJson:n=>{try{const o=e(n);if(typeof o!="object"||o===null)throw new Error("Parsed content is not an object.");const t=JSON.stringify(o,null,2);d(t,"openapi.json","application/json")}catch(o){alert("Content is not valid YAML/JSON. Cannot convert to JSON for download."),console.error("Error preparing JSON for download:",o)}}}}export{L as useFileOperations};

package/dist/pages/editor/hooks/useMonacoEditor.d.ts

@@ -0,0 +1,12 @@
+import type { editor, Position } from "monaco-editor";
+export interface MonacoEditorOptions {
+    onValidationUpdate?: (errors: editor.IMarkerData[], value: string) => void;
+    onClick?: (position: Position) => void;
+    hideWarnings?: boolean;
+}
+export declare function useMonacoEditor({ onValidationUpdate, onClick, hideWarnings }: MonacoEditorOptions): {
+    editorRef: import("react").MutableRefObject<editor.IStandaloneCodeEditor | null>;
+    monacoRef: import("react").MutableRefObject<null>;
+    activeColorMode: string;
+    handleEditorDidMount: (editor: editor.IStandaloneCodeEditor, monaco: any) => () => void;
+};

package/dist/pages/editor/hooks/useMonacoEditor.js

@@ -0,0 +1 @@
+import{useEffect as M,useRef as r}from"react";import{LanguageServerService as d}from"../services/languageServerService";import{useColorMode as v}from"./useColorMode";import{useThemeHooks as D}from"@redocly/theme/core/hooks";function w({onValidationUpdate:n,onClick:i,hideWarnings:e}){const u=r(null),c=r(null),o=r(null),{useGlobalData:s}=D(),R=s(),a=v(),f=(t,l)=>{u.current=t,c.current=l,o.current||(o.current=new d),o.current.initialize(t,l);const m=o.current.setupAutoValidation(n,e);return t.onMouseDown(({target:p})=>{i?.(p.position)}),()=>{m()}};return M(()=>{o.current?.setupAutoValidation(n,e)},[e]),{editorRef:u,monacoRef:c,activeColorMode:a,handleEditorDidMount:f}}export{w as useMonacoEditor};

package/dist/pages/editor/hooks/useOpenApiValidation.d.ts

@@ -0,0 +1,14 @@
+interface OpenApiValidationHook {
+    definition: any | null;
+    hasRenderedOnce: boolean;
+    setHasRenderedOnce: (hasRendered: boolean) => void;
+}
+interface ValidationDependencies {
+    validatedValue: string | undefined;
+    hasStructErrors: boolean;
+}
+/**
+ * Custom hook to handle OpenAPI definition validation and parsing
+ */
+export declare function useOpenApiValidation({ validatedValue, hasStructErrors }: ValidationDependencies): OpenApiValidationHook;
+export {};

package/dist/pages/editor/hooks/useOpenApiValidation.js

@@ -0,0 +1 @@
+import{useState as s,useEffect as p}from"react";import{load as c}from"js-yaml";function O({validatedValue:t,hasStructErrors:o}){const[f,n]=s(null),[i,r]=s(!1);return p(()=>{try{if(o){n(null);return}if(!t){n(null);return}const e=c(t);if(!(e&&typeof e=="object"&&e.openapi&&typeof e.openapi=="string")){n(null);return}n(e),i||r(!0)}catch{n(null)}},[t,o,i]),{definition:f,hasRenderedOnce:i,setHasRenderedOnce:r}}export{O as useOpenApiValidation};

package/dist/pages/editor/services/languageServerService.d.ts

@@ -0,0 +1,52 @@
+import type * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';
+export interface LSPosition {
+    line: number;
+    character: number;
+}
+export interface DocumentProvider {
+    getText: (options?: {
+        start?: number;
+        end?: number;
+    }) => string;
+    offsetAt: (position: LSPosition) => number;
+    positionAt: (offset: number) => Monaco.IPosition;
+}
+export interface ValidationCallback {
+    (errors: Monaco.editor.IMarkerData[], value: string): void;
+}
+/**
+ * Service class to handle OpenAPI Language Server integration
+ */
+export declare class LanguageServerService {
+    private monaco;
+    private editor;
+    constructor();
+    /**
+     * Initialize the language server with Monaco editor instance
+     */
+    initialize(editor: Monaco.editor.IStandaloneCodeEditor, monaco: typeof Monaco): void;
+    /**
+     * Register documents provider for the language server
+     */
+    private registerDocumentsProvider;
+    /**
+     * Create document provider for current editor content
+     */
+    private createDocumentProvider;
+    /**
+     * Register completion item provider
+     */
+    private registerCompletionProvider;
+    /**
+     * Register definition provider
+     */
+    private registerDefinitionProvider;
+    /**
+     * Validate OpenAPI content and provide diagnostics
+     */
+    validateContent(onValidationUpdate?: ValidationCallback, hideWarnings?: boolean): Promise<void>;
+    /**
+     * Setup automatic validation on content changes
+     */
+    setupAutoValidation(onValidationUpdate?: ValidationCallback, hideWarnings?: boolean): () => void;
+}

package/dist/pages/editor/services/languageServerService.js

@@ -0,0 +1,3 @@
+import{load as v}from"js-yaml";class M{constructor(){this.monaco=null,this.editor=null}initialize(n,r){this.editor=n,this.monaco=r}registerDocumentsProvider(){}createDocumentProvider(){return{getText:({start:n=0,end:r=void 0}={})=>(this.editor?.getModel()?.getValue()||"").slice(n,r),offsetAt:n=>{const r=this.editor?.getModel();return r?r.getOffsetAt({lineNumber:n.line+1,column:n.character+1}):0},positionAt:n=>{const r=this.editor?.getModel();if(!r)return{lineNumber:1,column:1};const s=r.getPositionAt(n);return{lineNumber:s.lineNumber,column:s.column}}}}registerCompletionProvider(){this.monaco&&this.monaco.languages.registerCompletionItemProvider("yaml",{triggerCharacters:[" ",`
+`,"\\","/",'"',"'"],provideCompletionItems:async(n,r)=>({suggestions:[]})})}registerDefinitionProvider(){this.monaco&&this.monaco.languages.registerDefinitionProvider("yaml",{provideDefinition:async(n,r)=>[]})}async validateContent(n,r){if(!this.editor||!this.monaco)return;const s=this.editor.getModel();if(!s)return;const o=s.getValue(),C={uri:s.uri.toString(),languageId:"yaml",version:s.getVersionId(),getText:()=>o,positionAt:e=>{const c=s.getPositionAt(e);return{line:c.lineNumber-1,character:c.column-1}},offsetAt:e=>s.getOffsetAt({lineNumber:e.line+1,column:e.character+1}),lineCount:s.getLineCount()};try{let e=[];r&&(e=e.filter(t=>t.severity!==4));let c=null;try{v(o)}catch(t){c={severity:8,message:t.reason+" Rule: struct",startLineNumber:t.mark?.line||1,startColumn:0,endLineNumber:t.mark?.line||1,endColumn:1e3},e.push(c)}const u=o.split(`
+`);u.forEach((t,i)=>{const p=t.match(/^\s*type:\s*([^\s#]+)\s*(?:#.*)?$/);if(p){const l=L(u,i),m=l?new Set(["apiKey","http","oauth2","openIdConnect"]):new Set(["string","number","integer","boolean","array","object"]),a=p[1].trim();if(!m.has(a)){const g=t.indexOf("type:")+5+2;e.push({severity:8,message:l?`Invalid security scheme type '${a}'. Allowed: apiKey, http, oauth2, openIdConnect. Rule: struct`:`Invalid schema type '${a}'. Allowed: string, number, integer, boolean, array, object. Rule: struct`,startLineNumber:i+1,startColumn:Math.max(1,g),endLineNumber:i+1,endColumn:t.length+1,source:"Custom YAML Validator"})}}const f=t.match(/^(\s*)-(\s*)$/);if(f){const l={severity:8,message:"Empty list item detected. List items should have content. Rule: struct",startLineNumber:i+1,startColumn:f[1].length+1,endLineNumber:i+1,endColumn:t.length+1,source:"Custom YAML Validator"};e.push(l)}const d=t.match(/^(\s*)([^#\s][^:]*):\s*$/);if(d&&!t.trim().endsWith(":")){const l=d[2].trim().toLowerCase();if(["version","title","description","type","format","required","default","example"].some(a=>l.includes(a))){const a={severity:8,message:"Key without value detected. This key typically requires a value. Rule: struct",startLineNumber:i+1,startColumn:d[1].length+1,endLineNumber:i+1,endColumn:t.length+1,source:"Custom YAML Validator"};e.push(a)}}const y=t.match(/^(\s*)-(\s*)(.*)$/);if(y){const[l,m,a,g]=y;if(g.trim().length>0&&a.length!==1){const b={severity:8,message:a.length===0?"Missing space after dash in list item. There should be exactly one space between the dash and content. Rule: struct":"Too many spaces after dash in list item. There should be exactly one space between the dash and content. Rule: struct",startLineNumber:i+1,startColumn:m.length+2,endLineNumber:i+1,endColumn:t.length+1,source:"Custom YAML Validator"};e.push(b)}}}),this.monaco.editor.setModelMarkers(s,"openapi-ls",e),n&&n(e,o)}catch(e){console.error("Error during validation:",e)}}setupAutoValidation(n,r){if(!this.editor)return()=>{};const s=()=>this.validateContent(n,r);s();const o=this.editor.onDidChangeModelContent(()=>{s()});return()=>o.dispose()}}function L(h,n){const s=(h[n]||"").match(/^\s*/)?.[0].length||0;for(let o=n;o>=0;o--){const e=(h[o]??"").replace(/#.*$/,"");if(!e.trim())continue;const c=e.match(/^\s*/)?.[0].length||0,u=e.match(/^\s*([A-Za-z0-9_\-]+):\s*$/);if(u&&c<s&&u[1]==="components")return!1;if(u&&c<=s){const t=u[1];if(t==="securitySchemes")return!0;if(new Set(["schemas","responses","parameters","examples","requestBodies","headers","links","callbacks","pathItems"]).has(t))return!1}}return!1}export{M as LanguageServerService};

package/dist/pages/editor/templates/defaultOpenapiTemplate.d.ts

@@ -0,0 +1 @@
+export declare const defaultOpenapiTemplate = "openapi: 3.0.0\ninfo:\n  title: My API\n  version: 1.0.0\n  description: A new API to be documented.\npaths:\n  /example:\n    get:\n      summary: Example endpoint\n      description: This is a sample endpoint.\n      responses:\n        '200':\n          description: Successful response\n          content:\n            application/json:\n              schema:\n                type: object\n                properties:\n                  message:\n                    type: string\n                    example: Hello World!\n";

package/dist/pages/editor/templates/defaultOpenapiTemplate.js

@@ -0,0 +1,22 @@
+const e=`openapi: 3.0.0
+info:
+  title: My API
+  version: 1.0.0
+  description: A new API to be documented.
+paths:
+  /example:
+    get:
+      summary: Example endpoint
+      description: This is a sample endpoint.
+      responses:
+        '200':
+          description: Successful response
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  message:
+                    type: string
+                    example: Hello World!
+`;export{e as defaultOpenapiTemplate};

package/dist/pages/editor/utils/download.d.ts

@@ -0,0 +1 @@
+export declare const downloadFile: (content: string, fileName: string, contentType: string) => void;

package/dist/pages/editor/utils/download.js

@@ -0,0 +1 @@
+const c=(o,t,d)=>{const e=document.createElement("a"),n=new Blob([o],{type:d});e.href=URL.createObjectURL(n),e.download=t,document.body.appendChild(e),e.click(),document.body.removeChild(e)};export{c as downloadFile};

package/dist/pages/editor-preview/editor-preview.page.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface PageProps {
+    RedoclyOpenAPIDocs: any;
+}
+export default function Page({ RedoclyOpenAPIDocs }: PageProps): React.JSX.Element;
+export {};

package/dist/pages/editor-preview/editor-preview.page.js

@@ -0,0 +1 @@
+import*as t from"react";function g({RedoclyOpenAPIDocs:c}){const[n,r]=t.useState(null),a=t.useRef(null),[h,d]=t.useState("light"),u=t.useRef(!1),p=t.useRef(null);return t.useEffect(()=>{const s=new URLSearchParams(window.location.search).get("theme");if(s)d(s);else{const e=document.documentElement.classList.contains("dark");d(e?"dark":"light")}window.updateDefinition=e=>{if(e&&typeof e=="object"&&typeof e.openapi=="string"){const o=y(e);a.current=o,r(o)}else a.current?p.current!==a.current&&r(a.current):r(null);p.current=e},window.parent.onReady(window)},[]),t.useEffect(()=>{h==="dark"?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")},[h]),t.useEffect(()=>{const f=()=>{if(u.current)return;const e=document.querySelector("article");if(!e)return;const i=window.innerHeight,o=e.scrollHeight,m=window.scrollY,l=o-i;if(l<=0)return;const w=Math.round(m/l*100);window.parent.postMessage({type:"scroll-sync",position:{absolute:m,relative:w},source:"preview"},"*")},s=e=>{if(e.data?.type==="theme-change"){d(e.data.theme);return}if(e.data?.type!=="scroll-sync"||e.data?.source==="preview"||u.current)return;const i=document.querySelector("article");if(!i)return;const o=window.innerHeight,l=i.scrollHeight-o;if(l<=0)return;u.current=!0;const w=Math.round(e.data.position.relative/100*l);window.scrollTo({top:w,behavior:"smooth"}),setTimeout(()=>{u.current=!1},50)};return window.addEventListener("scroll",f),window.addEventListener("message",s),()=>{window.removeEventListener("scroll",f),window.removeEventListener("message",s)}},[]),n?t.createElement(c,{store:{options:{routingBasePath:"/preview",disableRouter:!0,hideSidebar:!0,scrollYOffset:0},definition:n}}):t.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh",fontFamily:"system-ui, -apple-system, sans-serif",color:"#666"}},"No API definition available")}function y(c){try{const n={...c};return Array.isArray(n.servers)&&(n.servers=n.servers.filter(r=>r&&typeof r=="object").filter(r=>typeof r.url=="string"&&r.url.trim().length>0)),n}catch{return c}}export{g as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/marketing-pages",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "keywords": [],
   "author": "",
   "license": "UNLICENSED",
@@ -23,38 +23,44 @@
     "@codemirror/language": "^6.11.0",
     "@codemirror/legacy-modes": "^6.5.1",
     "@itseasy21/react-elastic-carousel": "^0.12.3",
+    "@monaco-editor/react": "^4.7.0",
     "@rebilly/lead-source-tracker": "^2.18.13",
     "@redocly/json-to-json-schema": "^0.0.1",
     "@uiw/react-codemirror": "^4.23.12",
     "dayjs": "^1.11.13",
     "framer-motion": "^12.10.5",
+    "highlight-words-core": "^1.2.3",
+    "html2canvas": "^1.4.1",
     "js-yaml": "^4.1.0",
+    "json-schema-to-ts": "^3.1.0",
+    "jspdf": "^3.0.2",
     "lottie-react": "^2.4.0",
+    "monaco-editor": "^0.53.0",
     "polished": "^4.2.2",
     "react-copy-to-clipboard": "^5.1.0",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.56.3",
     "react-hubspot-form": "^1.3.7",
+    "react-resizable-panels": "^3.0.6",
     "react-responsive-carousel": "^3.2.23",
-    "react-spring": "^9.7.3",
+    "react-spring": "^9.6.2",
     "react-tabs": "^6.1.0",
     "react-tooltip": "^4.2.21",
     "reactjs-popup": "^2.0.6",
+    "styled-system": "^5.1.5",
     "ulid": "^2.3.0",
-    "vitest": "^3.1.3",
-    "html2canvas": "^1.4.1",
-    "jspdf": "^3.0.2",
-    "json-schema-to-ts": "^3.1.0"
+    "vitest": "^3.1.3"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0",
     "styled-components": ">=5.3.11"
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.5",
     "@redocly/config": "^0.24.0",
     "@redocly/theme": "^0.53.0",
+    "@markdoc/markdoc": "0.5.1",
     "@shikijs/types": "3.4.0",
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^22.15.17",