strip HTML and markdown from form field placeholders (#258)

Author: chris48s

demo/examples/petstore.yaml

@@ -300,6 +300,9 @@ paths:
             schema:
               type: string
               format: binary
+              description: |
+                This description contains <a href="https://www.w3.org/html/">HTML</a><br />
+                Cat pics plz
   /pet/findByStatus:
     get:
       tags:
@@ -838,13 +841,15 @@ paths:
       parameters:
         - name: username
           in: query
-          description: The user name for login
+          description: |
+            This description contains <a href="https://www.w3.org/html/">HTML</a><br />The user name for login
           required: true
           schema:
             type: string
         - name: password
           in: query
-          description: The password for login in clear text
+          description: |
+            This description contains [markdown](https://www.markdownguide.org/)<br />The password for login in clear text
           required: true
           schema:
             type: string

packages/docusaurus-theme-openapi/package.json

@@ -45,6 +45,7 @@
     "docusaurus-plugin-openapi": "^0.7.2",
     "immer": "^9.0.7",
     "lodash": "^4.17.20",
+    "marked": "^11.0.0",
     "monaco-editor": "^0.31.1",
     "postman-code-generators": "^1.0.0",
     "postman-collection": "^4.1.0",
@@ -54,6 +55,7 @@
     "react-redux": "^7.2.0",
     "redux-devtools-extension": "^2.13.8",
     "refractor": "^4.8.1",
+    "striptags": "^3.2.0",
     "webpack": "^5.88.1"
   },
   "peerDependencies": {

packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/FormFileUpload/index.tsx

@@ -12,6 +12,7 @@ import MagicDropzone from "react-magic-dropzone";
 
 import styles from "./styles.module.css";
 import FloatingButton from "../FloatingButton";
+import { stripText } from "../text";
 
 type PreviewFile = { preview: string } & File;
 
@@ -107,7 +108,7 @@ function FormFileUpload({ placeholder, onChange }: Props) {
             <RenderPreview file={file} />
           </>
         ) : (
-          <div className={styles.dropzoneContent}>{placeholder}</div>
+          <div className={styles.dropzoneContent}>{stripText(placeholder)}</div>
         )}
       </MagicDropzone>
     </FloatingButton>

packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/FormTextInput/index.tsx

@@ -8,6 +8,7 @@
 import React from "react";
 
 import styles from "./styles.module.css";
+import { stripText } from "../text";
 
 interface Props {
   value?: string;
@@ -21,7 +22,7 @@ function FormTextInput({ value, placeholder, password, onChange }: Props) {
     <input
       className={styles.input}
       type={password ? "password" : "text"}
-      placeholder={placeholder}
+      placeholder={stripText(placeholder)}
       value={value}
       onChange={onChange}
       autoComplete="off"

packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/text.test.ts

@@ -0,0 +1,40 @@
+/* ============================================================================
+ * Copyright (c) Cloud Annotations
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import { stripText } from "./text";
+
+describe("stripText function", () => {
+  it("should return empty string when passed undefined", () => {
+    expect(stripText(undefined)).toBe("");
+  });
+
+  it("should strip markdown", () => {
+    expect(
+      stripText(
+        "**This** description contains [markdown](https://www.markdownguide.org/)"
+      )
+    ).toBe("This description contains markdown");
+  });
+
+  it("should strip HTML", () => {
+    expect(
+      stripText(
+        '<strong>This</strong> description contains <a href="https://www.w3.org/html/">HTML</a>'
+      )
+    ).toBe("This description contains HTML");
+  });
+
+  it("should replace newlines with space", () => {
+    expect(stripText("one\ntwo\n\nthree")).toBe("one two three");
+  });
+
+  it("should insert whitespace between HTML elements", () => {
+    expect(
+      stripText("<div><div>one</div></div><p>two</p><p>three</p><br />four")
+    ).toBe("one two three four");
+  });
+});

packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/text.ts

@@ -0,0 +1,19 @@
+/* ============================================================================
+ * Copyright (c) Cloud Annotations
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import { marked } from "marked";
+import striptags from "striptags";
+
+export function stripText(text?: string): string {
+  if (text === undefined) {
+    return "";
+  }
+  const renderer = new marked.TextRenderer();
+  marked.use({ silent: true, renderer });
+  const parsedMarkdown = marked.parse(text, { async: false }) as string;
+  return striptags(parsedMarkdown, [], " ").replace(/\s+/g, " ").trim();
+}

yarn.lock

@@ -10517,6 +10517,11 @@ marked@2.0.1:
   resolved "https://registry.yarnpkg.com/marked/-/marked-2.0.1.tgz#5e7ed7009bfa5c95182e4eb696f85e948cefcee3"
   integrity sha512-5+/fKgMv2hARmMW7DOpykr2iLhl0NgjyELk5yn92iE7z8Se1IS9n3UsFm86hFXIkvMBmVxki8+ckcpjBeyo/hw==
 
+marked@^11.0.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-11.1.0.tgz#f2d12323e80ba8a97cc8262fe7e94fcc007476ab"
+  integrity sha512-fvKJWAPEafVj1dwGwcPI5mBB/0pvViL6NlCbNDG1HOIRwwAU/jeMoFxfbRLuirO1wRH7m4yPvBqD/O1wyWvayw==
+
 mdast-util-directive@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/mdast-util-directive/-/mdast-util-directive-3.0.0.tgz#3fb1764e705bbdf0afb0d3f889e4404c3e82561f"
@@ -14802,6 +14807,11 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
 
+striptags@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/striptags/-/striptags-3.2.0.tgz#cc74a137db2de8b0b9a370006334161f7dd67052"
+  integrity sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw==
+
 strong-log-transformer@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz#0f5ed78d325e0421ac6f90f7f10e691d6ae3ae10"