From 41db968e99093e6ae333439553056f980aae338f Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Wed, 30 Mar 2022 21:39:32 +1100
Subject: [PATCH] Fix XSS issue with Squiggle Editor

---
 packages/components/src/SquiggleEditor.tsx    |  6 +----
 .../src/stories/SquiggleEditor.stories.mdx    | 22 +++++++++++++++++++
 2 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 packages/components/src/stories/SquiggleEditor.stories.mdx

diff --git a/packages/components/src/SquiggleEditor.tsx b/packages/components/src/SquiggleEditor.tsx
index ac199b1e..fdfda430 100644
--- a/packages/components/src/SquiggleEditor.tsx
+++ b/packages/components/src/SquiggleEditor.tsx
@@ -25,11 +25,7 @@ export interface SquiggleEditorProps {
   onEnvChange?(env: exportEnv): void;
 }
 
-const highlight = (editor: HTMLInputElement) => {
-  let code = editor.textContent;
-  code = code.replace(/\((\w+?)(\b)/g, '(<font color="#8a2be2">$1</font>$2');
-  editor.innerHTML = code;
-};
+const highlight = (_: HTMLInputElement) => {};
 
 interface SquiggleEditorState {
   expression: string;
diff --git a/packages/components/src/stories/SquiggleEditor.stories.mdx b/packages/components/src/stories/SquiggleEditor.stories.mdx
new file mode 100644
index 00000000..9f3a5a1a
--- /dev/null
+++ b/packages/components/src/stories/SquiggleEditor.stories.mdx
@@ -0,0 +1,22 @@
+import { SquiggleEditor } from "../SquiggleEditor";
+import { Canvas, Meta, Story, Props } from "@storybook/addon-docs";
+
+<Meta title="Squiggle/SquiggleEditor" component={SquiggleEditor} />
+
+export const Template = (props) => <SquiggleEditor {...props} />;
+
+# Squiggle Editor
+
+Squiggle Editor is a Squiggle chart with a text editor included for changing
+the distribution.
+
+<Canvas>
+  <Story
+    name="Normal"
+    args={{
+      initialSquiggleString: "normal(5,2)",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>