;
18 | }
19 |
20 | function FormTextInput({ value, placeholder, password, onChange }: Props) {
21 | return (
22 |
30 | );
31 | }
32 |
33 | export default FormTextInput;
34 |
--------------------------------------------------------------------------------
/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/FormTextInput/styles.module.css:
--------------------------------------------------------------------------------
1 | .inputBase {
2 | margin-top: calc(var(--ifm-pre-padding) / 2);
3 | /* height: 40px; */
4 | background-color: var(--openapi-input-background);
5 | border: none;
6 | outline: none;
7 | width: 100%;
8 | font-size: var(--ifm-code-font-size);
9 | color: var(--ifm-pre-color);
10 | padding: 12px var(--ifm-pre-padding);
11 |
12 | border-radius: 4px;
13 | }
14 |
15 | html[data-theme="light"] .input {
16 | border-color: var(--ifm-color-primary-lightest);
17 | border-style: solid;
18 | border-width: 1px;
19 | }
20 |
21 | .input {
22 | composes: inputBase;
23 | }
24 |
25 | .input:focus {
26 | box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
27 | }
28 |
--------------------------------------------------------------------------------
/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/MethodEndpoint/index.tsx:
--------------------------------------------------------------------------------
1 | /* ============================================================================
2 | * Copyright (c) Cloud Annotations
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | * ========================================================================== */
7 |
8 | import React from "react";
9 |
10 | function colorForMethod(method: string) {
11 | switch (method.toLowerCase()) {
12 | case "get":
13 | return "var(--openapi-code-blue)";
14 | case "put":
15 | return "var(--openapi-code-orange)";
16 | case "post":
17 | return "var(--openapi-code-green)";
18 | case "delete":
19 | return "var(--openapi-code-red)";
20 | default:
21 | return undefined;
22 | }
23 | }
24 |
25 | interface Props {
26 | method: string;
27 | path: string;
28 | }
29 |
30 | function MethodEndpoint({ method, path }: Props) {
31 | return (
32 |
38 |
39 | {method.toUpperCase()}
40 | {" "}
41 | {path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}
42 |
43 | );
44 | }
45 |
46 | export default MethodEndpoint;
47 |
--------------------------------------------------------------------------------
/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/ParamOptions/slice.ts:
--------------------------------------------------------------------------------
1 | /* ============================================================================
2 | * Copyright (c) Cloud Annotations
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | * ========================================================================== */
7 |
8 | import { createSlice, PayloadAction } from "@reduxjs/toolkit";
9 | import { ParameterObject } from "docusaurus-plugin-openapi/src/openapi/types";
10 |
11 | export type Param = ParameterObject & { value?: string[] | string };
12 |
13 | export interface State {
14 | path: Param[];
15 | query: Param[];
16 | header: Param[];
17 | cookie: Param[];
18 | }
19 |
20 | const initialState: State = {} as any;
21 |
22 | export const slice = createSlice({
23 | name: "params",
24 | initialState,
25 | reducers: {
26 | setParam: (state, action: PayloadAction) => {
27 | const newParam = action.payload;
28 | const paramGroup = state[action.payload.in];
29 | const index = paramGroup.findIndex((p) => p.name === newParam.name);
30 | paramGroup[index] = newParam;
31 | },
32 | },
33 | });
34 |
35 | export const { setParam } = slice.actions;
36 |
37 | export default slice.reducer;
38 |
--------------------------------------------------------------------------------
/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/Response/index.tsx:
--------------------------------------------------------------------------------
1 | /* ============================================================================
2 | * Copyright (c) Cloud Annotations
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | * ========================================================================== */
7 |
8 | import React from "react";
9 |
10 | import FloatingButton from "./../FloatingButton";
11 | import { clearResponse } from "./slice";
12 | import { useTypedDispatch, useTypedSelector } from "../hooks";
13 |
14 | // TODO: We probably shouldn't attempt to format XML...
15 | function formatXml(xml: string) {
16 | const tab = " ";
17 | let formatted = "";
18 | let indent = "";
19 |
20 | xml.split(/>\s* {
21 | if (node.match(/^\/\w/)) {
22 | // decrease indent by one 'tab'
23 | indent = indent.substring(tab.length);
24 | }
25 | formatted += indent + "<" + node + ">\r\n";
26 | if (node.match(/^]*[^/]$/)) {
27 | // increase indent
28 | indent += tab;
29 | }
30 | });
31 | return formatted.substring(1, formatted.length - 3);
32 | }
33 |
34 | function Response() {
35 | const response = useTypedSelector((state) => state.response.value);
36 | const dispatch = useTypedDispatch();
37 |
38 | if (response === undefined) {
39 | return null;
40 | }
41 |
42 | let prettyResponse: string = response;
43 | try {
44 | prettyResponse = JSON.stringify(JSON.parse(response), null, 2);
45 | } catch {
46 | if (response.startsWith(" dispatch(clearResponse())} label="Clear">
53 |
60 | {prettyResponse || "No Response"}
61 |
62 |
63 | );
64 | }
65 |
66 | export default Response;
67 |
--------------------------------------------------------------------------------
/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/Response/slice.ts:
--------------------------------------------------------------------------------
1 | /* ============================================================================
2 | * Copyright (c) Cloud Annotations
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | * ========================================================================== */
7 |
8 | import { createSlice, PayloadAction } from "@reduxjs/toolkit";
9 |
10 | export interface State {
11 | value?: string;
12 | }
13 |
14 | const initialState: State = {} as any;
15 |
16 | export const slice = createSlice({
17 | name: "response",
18 | initialState,
19 | reducers: {
20 | setResponse: (state, action: PayloadAction) => {
21 | state.value = action.payload;
22 | },
23 | clearResponse: (state) => {
24 | state.value = undefined;
25 | },
26 | },
27 | });
28 |
29 | export const { setResponse, clearResponse } = slice.actions;
30 |
31 | export default slice.reducer;
32 |
--------------------------------------------------------------------------------
/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/Server/index.tsx:
--------------------------------------------------------------------------------
1 | /* ============================================================================
2 | * Copyright (c) Cloud Annotations
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | * ========================================================================== */
7 |
8 | import React, { useState } from "react";
9 |
10 | import FormItem from "./../FormItem";
11 | import FormSelect from "./../FormSelect";
12 | import FormTextInput from "./../FormTextInput";
13 | import { setServer, setServerVariable } from "./slice";
14 | import styles from "./styles.module.css";
15 | import FloatingButton from "../FloatingButton";
16 | import { useTypedDispatch, useTypedSelector } from "../hooks";
17 |
18 | function Server() {
19 | const [isEditing, setIsEditing] = useState(false);
20 | const value = useTypedSelector((state) => state.server.value);
21 | const options = useTypedSelector((state) => state.server.options);
22 |
23 | const dispatch = useTypedDispatch();
24 |
25 | if (options.length <= 0) {
26 | return null;
27 | }
28 |
29 | if (options.length <= 1 && value?.variables === undefined) {
30 | return null;
31 | }
32 |
33 | if (!isEditing) {
34 | let url = "";
35 | if (value) {
36 | url = value.url.replace(/\/$/, "");
37 | if (value.variables) {
38 | Object.keys(value.variables).forEach((variable) => {
39 | url = url.replace(
40 | `{${variable}}`,
41 | value.variables?.[variable].storedValue ?? ""
42 | );
43 | });
44 | }
45 | }
46 | return (
47 | setIsEditing(true)} label="Edit">
48 |
54 | {url}
55 |
56 |
57 | );
58 | }
59 |
60 | return (
61 |
62 |
69 |
70 | s.url)}
72 | onChange={(e) => dispatch(setServer(e.target.value))}
73 | />
74 |
75 | {value?.variables &&
76 | Object.keys(value.variables).map((key) => {
77 | if (value.variables?.[key].enum !== undefined) {
78 | return (
79 |
80 | {
84 | dispatch(setServerVariable({ key, value: e.target.value }));
85 | }}
86 | />
87 |
88 | );
89 | }
90 | return (
91 |
92 | {
96 | dispatch(setServerVariable({ key, value: e.target.value }));
97 | }}
98 | />
99 |
100 | );
101 | })}
102 |
103 | );
104 | }
105 |
106 | export default Server;
107 |
--------------------------------------------------------------------------------
/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/Server/slice.ts:
--------------------------------------------------------------------------------
1 | /* ============================================================================
2 | * Copyright (c) Cloud Annotations
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | * ========================================================================== */
7 |
8 | import { createSlice, PayloadAction } from "@reduxjs/toolkit";
9 | // TODO: we might want to export this
10 | import {
11 | ServerObject,
12 | ServerVariable,
13 | } from "docusaurus-plugin-openapi/src/openapi/types";
14 |
15 | import { ThemeConfig } from "../../../types";
16 | import { createStorage } from "../storage-utils";
17 |
18 | interface Map {
19 | [key: string]: T;
20 | }
21 |
22 | export type ServerObjectWithStorage = ServerObject & {
23 | variables?: Map;
24 | };
25 |
26 | export function createServer({
27 | servers,
28 | options: opts,
29 | }: {
30 | servers: ServerObject[];
31 | options?: ThemeConfig["api"];
32 | }): State {
33 | const storage = createStorage(opts?.authPersistance);
34 |
35 | let options: ServerObjectWithStorage[] = servers.map((s) => {
36 | // A deep copy of the original ServerObject, augmented with `storedValue` props.
37 | const srv = JSON.parse(JSON.stringify(s)) as ServerObjectWithStorage;
38 |
39 | let persisted = undefined;
40 | try {
41 | persisted = JSON.parse(
42 | storage.getItem(`docusaurus.openapi.server/${s.url}`) ?? ""
43 | );
44 | } catch {}
45 |
46 | if (!persisted) {
47 | persisted = {};
48 | }
49 |
50 | if (!persisted.variables) {
51 | persisted.variables = {};
52 | }
53 |
54 | srv.variables = srv.variables ?? {};
55 |
56 | for (const v of Object.keys(srv.variables)) {
57 | if (v in persisted.variables) {
58 | if (
59 | persisted.variables[v].storedValue !== undefined &&
60 | persisted.variables[v].storedValue !== null &&
61 | persisted.variables[v].storedValue !== ""
62 | ) {
63 | srv.variables[v].storedValue = persisted.variables[v].storedValue;
64 | } else {
65 | srv.variables[v].storedValue = srv.variables[v].default;
66 | }
67 | }
68 | }
69 |
70 | return srv;
71 | });
72 |
73 | return { value: options[0], options: options };
74 | }
75 |
76 | export interface State {
77 | value?: ServerObjectWithStorage;
78 | options: ServerObjectWithStorage[];
79 | }
80 |
81 | const initialState: State = {} as any;
82 |
83 | export const slice = createSlice({
84 | name: "server",
85 | initialState,
86 | reducers: {
87 | setServer: (state, action: PayloadAction) => {
88 | state.value = state.options.find((s) => s.url === action.payload);
89 | },
90 | setServerVariable: (
91 | state,
92 | action: PayloadAction<{ key: string; value: string }>
93 | ) => {
94 | if (state.value?.variables) {
95 | state.value.variables[action.payload.key].storedValue =
96 | action.payload.value;
97 | }
98 | },
99 | },
100 | });
101 |
102 | export const { setServer, setServerVariable } = slice.actions;
103 |
104 | export default slice.reducer;
105 |
--------------------------------------------------------------------------------
/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/Server/styles.module.css:
--------------------------------------------------------------------------------
1 | .showMoreButton {
2 | -webkit-appearance: none;
3 | -moz-appearance: none;
4 | appearance: none;
5 |
6 | cursor: pointer;
7 | font-size: var(--ifm-code-font-size);
8 | /* font-weight: var(--ifm-button-font-weight); */
9 | /* line-height: 1.5; */
10 |
11 | padding: 0;
12 |
13 | user-select: none;
14 | white-space: nowrap;
15 |
16 | border: 0px solid transparent;
17 |
18 | display: block;
19 | /* width: 100%; */
20 |
21 | background-color: transparent;
22 |
23 | color: var(--ifm-color-primary);
24 | cursor: pointer;
25 | margin-top: var(--ifm-pre-padding);
26 | margin-bottom: 0;
27 | text-align: left;
28 | display: block;
29 | }
30 |
31 | .showMoreButton:focus {
32 | outline: 0;
33 | }
34 |
35 | .showMoreButton:hover {
36 | /* text-decoration: underline; */
37 | /* background-color: red; */
38 | color: var(--ifm-color-primary-hover);
39 | }
40 |
41 | .showMoreButton:first-child {
42 | margin-top: 0;
43 | }
44 |
45 | .optionsPanel:empty {
46 | display: none;
47 | }
48 |
49 | .optionsPanel {
50 | background: var(--openapi-card-background-color);
51 | border-radius: var(--openapi-card-border-radius);
52 | color: var(--ifm-pre-color);
53 | line-height: var(--ifm-pre-line-height);
54 | margin-bottom: var(--ifm-spacing-vertical);
55 | margin-top: 0;
56 | overflow: auto;
57 | padding: var(--ifm-pre-padding);
58 |
59 | /* hack for view calculation when monaco is hidden */
60 | position: relative;
61 | }
62 |
--------------------------------------------------------------------------------
/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/VSCode/styles.module.css:
--------------------------------------------------------------------------------
1 | .monacoBase {
2 | margin-top: calc(var(--ifm-pre-padding) / 2);
3 | border-radius: 4px;
4 | padding: var(--ifm-pre-padding);
5 | background-color: var(--openapi-monaco-background-color);
6 | }
7 |
8 | .monaco {
9 | composes: monacoBase;
10 |
11 | box-shadow: 0 0 0 1px var(--openapi-monaco-border-color);
12 | border: 2px solid transparent;
13 | }
14 |
15 | .monacoFocus {
16 | composes: monacoBase;
17 |
18 | border: 2px solid var(--openapi-input-border);
19 | }
20 |
--------------------------------------------------------------------------------
/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/buildPostmanRequest.test.ts:
--------------------------------------------------------------------------------
1 | /* ============================================================================
2 | * Copyright (c) Cloud Annotations
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | * ========================================================================== */
7 |
8 | import sdk from "postman-collection";
9 |
10 | import { openApiQueryParams2PostmanQueryParams } from "./buildPostmanRequest";
11 |
12 | describe("openApiQueryParams2PostmanQueryParams", () => {
13 | it("should transform empty array to empty array", () => {
14 | const expected: sdk.QueryParam[] = [];
15 | const actual = openApiQueryParams2PostmanQueryParams([]);
16 | expect(actual).toStrictEqual(expected);
17 | });
18 |
19 | it("default to comma delimited", () => {
20 | const expected: sdk.QueryParam[] = [
21 | new sdk.QueryParam({ key: "arrayParam", value: "abc,def" }),
22 | ];
23 | const actual = openApiQueryParams2PostmanQueryParams([
24 | {
25 | name: "arrayParam",
26 | in: "query",
27 | value: ["abc", "def"],
28 | },
29 | ]);
30 | expect(actual).toStrictEqual(expected);
31 | });
32 |
33 | it("should expand params if explode=true", () => {
34 | const expected: sdk.QueryParam[] = [
35 | new sdk.QueryParam({ key: "arrayParam", value: "abc" }),
36 | new sdk.QueryParam({ key: "arrayParam", value: "def" }),
37 | ];
38 | const actual = openApiQueryParams2PostmanQueryParams([
39 | {
40 | name: "arrayParam",
41 | in: "query",
42 | style: "form",
43 | explode: true,
44 | value: ["abc", "def"],
45 | },
46 | ]);
47 | expect(actual).toStrictEqual(expected);
48 | });
49 |
50 | it("should respect style=pipeDelimited", () => {
51 | const expected: sdk.QueryParam[] = [
52 | new sdk.QueryParam({ key: "arrayParam", value: "abc|def" }),
53 | ];
54 | const actual = openApiQueryParams2PostmanQueryParams([
55 | {
56 | name: "arrayParam",
57 | in: "query",
58 | style: "pipeDelimited",
59 | value: ["abc", "def"],
60 | },
61 | ]);
62 | expect(actual).toStrictEqual(expected);
63 | });
64 |
65 | it("should respect style=spaceDelimited", () => {
66 | const expected: sdk.QueryParam[] = [
67 | new sdk.QueryParam({ key: "arrayParam", value: "abc%20def" }),
68 | ];
69 | const actual = openApiQueryParams2PostmanQueryParams([
70 | {
71 | name: "arrayParam",
72 | in: "query",
73 | style: "spaceDelimited",
74 | value: ["abc", "def"],
75 | },
76 | ]);
77 | expect(actual).toStrictEqual(expected);
78 | });
79 | });
80 |
--------------------------------------------------------------------------------
/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/hooks.ts:
--------------------------------------------------------------------------------
1 | /* ============================================================================
2 | * Copyright (c) Cloud Annotations
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | * ========================================================================== */
7 |
8 | import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
9 |
10 | import type { RootState, AppDispatch } from "./store";
11 |
12 | export const useTypedDispatch = () => useDispatch();
13 | export const useTypedSelector: TypedUseSelectorHook = useSelector;
14 |
--------------------------------------------------------------------------------
/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/persistanceMiddleware.ts:
--------------------------------------------------------------------------------
1 | /* ============================================================================
2 | * Copyright (c) Cloud Annotations
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | * ========================================================================== */
7 |
8 | import { Middleware } from "@reduxjs/toolkit";
9 |
10 | import { setAuthData, setSelectedAuth } from "./Authorization/slice";
11 | import { setServer, setServerVariable } from "./Server/slice";
12 | import { createStorage, hashArray } from "./storage-utils";
13 | import { AppDispatch, RootState } from "./store";
14 | import { ThemeConfig } from "../../types";
15 |
16 | export function createPersistanceMiddleware(options: ThemeConfig["api"]) {
17 | const persistanceMiddleware: Middleware<{}, RootState, AppDispatch> =
18 | (storeAPI) => (next) => (action) => {
19 | const result = next(action);
20 |
21 | const state = storeAPI.getState();
22 |
23 | const storage = createStorage(options?.authPersistance);
24 |
25 | if (action.type === setAuthData.type) {
26 | for (const [key, value] of Object.entries(state.auth.data)) {
27 | if (Object.values(value).filter(Boolean).length > 0) {
28 | storage.setItem(key, JSON.stringify(value));
29 | } else {
30 | storage.removeItem(key);
31 | }
32 | }
33 | }
34 |
35 | if (action.type === setSelectedAuth.type) {
36 | if (state.auth.selected) {
37 | storage.setItem(
38 | hashArray(Object.keys(state.auth.options)),
39 | state.auth.selected
40 | );
41 | }
42 | }
43 |
44 | if (action.type === setServer.type) {
45 | if (state.server.value?.url) {
46 | // FIXME What to use as key?
47 | storage.setItem(
48 | `docusaurus.openapi.server/${state.server.value?.url}`,
49 | JSON.stringify(state.server.value)
50 | );
51 | }
52 | }
53 |
54 | if (action.type === setServerVariable.type) {
55 | if (state.server.value?.url) {
56 | storage.setItem(
57 | `docusaurus.openapi.server/${state.server.value?.url}`,
58 | JSON.stringify(state.server.value)
59 | );
60 | }
61 | }
62 |
63 | return result;
64 | };
65 | return persistanceMiddleware;
66 | }
67 |
--------------------------------------------------------------------------------
/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/storage-utils.ts:
--------------------------------------------------------------------------------
1 | /* ============================================================================
2 | * Copyright (c) Cloud Annotations
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | * ========================================================================== */
7 |
8 | import crypto from "crypto-js";
9 |
10 | export function hashArray(arr: string[]) {
11 | function hash(message: string) {
12 | return crypto.SHA1(message).toString();
13 | }
14 | const hashed = arr.map((item) => hash(item));
15 | hashed.sort();
16 | const res = hashed.join();
17 | return hash(res);
18 | }
19 |
20 | type Persistance = false | "localStorage" | "sessionStorage" | undefined;
21 |
22 | export function createStorage(persistance: Persistance): Storage {
23 | if (persistance === false) {
24 | return {
25 | getItem: () => null,
26 | setItem: () => {},
27 | clear: () => {},
28 | key: () => null,
29 | removeItem: () => {},
30 | length: 0,
31 | };
32 | }
33 |
34 | if (persistance === "sessionStorage") {
35 | return sessionStorage;
36 | }
37 |
38 | return localStorage;
39 | }
40 |
--------------------------------------------------------------------------------
/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/store.ts:
--------------------------------------------------------------------------------
1 | /* ============================================================================
2 | * Copyright (c) Cloud Annotations
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | * ========================================================================== */
7 |
8 | import { configureStore, combineReducers } from "@reduxjs/toolkit";
9 |
10 | import accept from "./Accept/slice";
11 | import auth from "./Authorization/slice";
12 | import body from "./Body/slice";
13 | import contentType from "./ContentType/slice";
14 | import params from "./ParamOptions/slice";
15 | import response from "./Response/slice";
16 | import server from "./Server/slice";
17 |
18 | const rootReducer = combineReducers({
19 | accept,
20 | contentType,
21 | response,
22 | server,
23 | body,
24 | params,
25 | auth,
26 | });
27 |
28 | export type RootState = ReturnType;
29 |
30 | export const createStoreWithState = (
31 | preloadedState: RootState,
32 | middlewares: any[]
33 | ) =>
34 | configureStore({
35 | reducer: rootReducer,
36 | preloadedState,
37 | middleware: (getDefaultMiddleware) =>
38 | getDefaultMiddleware().concat(...middlewares),
39 | });
40 |
41 | export type AppDispatch = ReturnType["dispatch"];
42 |
--------------------------------------------------------------------------------
/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/styles.module.css:
--------------------------------------------------------------------------------
1 | .optionsPanel:empty {
2 | display: none;
3 | }
4 |
5 | .optionsPanel {
6 | background: var(--openapi-card-background-color);
7 | border-radius: var(--openapi-card-border-radius);
8 | color: var(--ifm-pre-color);
9 | line-height: var(--ifm-pre-line-height);
10 | margin-bottom: var(--ifm-spacing-vertical);
11 | margin-top: 0;
12 | overflow: auto;
13 | padding: var(--ifm-pre-padding);
14 |
15 | /* hack for view calculation when monaco is hidden */
16 | position: relative;
17 | }
18 |
--------------------------------------------------------------------------------
/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/text.test.ts:
--------------------------------------------------------------------------------
1 | /* ============================================================================
2 | * Copyright (c) Cloud Annotations
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | * ========================================================================== */
7 |
8 | import { stripText } from "./text";
9 |
10 | describe("stripText function", () => {
11 | it("should return empty string when passed undefined", () => {
12 | expect(stripText(undefined)).toBe("");
13 | });
14 |
15 | it("should strip markdown", () => {
16 | expect(
17 | stripText(
18 | "**This** description contains [markdown](https://www.markdownguide.org/)"
19 | )
20 | ).toBe("This description contains markdown");
21 | });
22 |
23 | it("should strip HTML", () => {
24 | expect(
25 | stripText(
26 | 'This description contains HTML'
27 | )
28 | ).toBe("This description contains HTML");
29 | });
30 |
31 | it("should replace newlines with space", () => {
32 | expect(stripText("one\ntwo\n\nthree")).toBe("one two three");
33 | });
34 |
35 | it("should insert whitespace between HTML elements", () => {
36 | expect(
37 | stripText("two
three
four")
38 | ).toBe("one two three four");
39 | });
40 | });
41 |
--------------------------------------------------------------------------------
/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/text.ts:
--------------------------------------------------------------------------------
1 | /* ============================================================================
2 | * Copyright (c) Cloud Annotations
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | * ========================================================================== */
7 |
8 | import { marked } from "marked";
9 | import striptags from "striptags";
10 |
11 | export function stripText(text?: string): string {
12 | if (text === undefined) {
13 | return "";
14 | }
15 | const renderer = new marked.TextRenderer();
16 | marked.use({ silent: true, renderer });
17 | const parsedMarkdown = marked.parse(text, { async: false }) as string;
18 | return striptags(parsedMarkdown, [], " ").replace(/\s+/g, " ").trim();
19 | }
20 |
--------------------------------------------------------------------------------
/packages/docusaurus-theme-openapi/src/theme/ApiItem/index.tsx:
--------------------------------------------------------------------------------
1 | /* ============================================================================
2 | * Copyright (c) Cloud Annotations
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | * ========================================================================== */
7 |
8 | import React from "react";
9 |
10 | import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
11 | import { PageMetadata } from "@docusaurus/theme-common";
12 | import type { Props } from "@theme/ApiItem";
13 | import DocPaginator from "@theme/DocPaginator";
14 | import clsx from "clsx";
15 |
16 | import styles from "./styles.module.css";
17 |
18 | let ApiDemoPanel = (_: { item: any }) => ;
19 | if (ExecutionEnvironment.canUseDOM) {
20 | ApiDemoPanel = require("@theme/ApiDemoPanel").default;
21 | }
22 |
23 | function ApiItem(props: Props): JSX.Element {
24 | const { content: ApiContent } = props;
25 | const { metadata, frontMatter } = ApiContent;
26 | const { image, keywords } = frontMatter;
27 | const { description, title, api, previous, next } = metadata;
28 |
29 | return (
30 | <>
31 |
32 |
33 |
34 |
35 |
36 |
37 |
40 |
41 |
42 |
43 |
44 |
45 |
48 |
30 |
31 |
32 |
33 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |