feat: add experimentalOperatorPosition to website

Author: clementdessoude

website/src/pages/playground/index.tsx

@@ -13,6 +13,7 @@ interface State {
   useTabs?: boolean;
   trailingComma?: TrailingComma;
   requirePragma?: boolean;
+  experimentalOperatorPosition?: ExperimentalOperatorPosition;
   code?: string;
 }
 
@@ -22,6 +23,11 @@ enum TrailingComma {
   None = "none"
 }
 
+enum ExperimentalOperatorPosition {
+  START = 'start',
+  END = 'end'
+}
+
 const codeSample = `public interface MyInterface {
   String foo();
   int[] bar();
@@ -69,6 +75,9 @@ function Inner() {
   const [requirePragma, setRequirePragma] = useState(
     initialState.requirePragma ?? false
   );
+  const [experimentalOperatorPosition, setExperimentalOperatorPosition] = useState(
+    initialState.experimentalOperatorPosition ?? ExperimentalOperatorPosition.END
+  );
   const [code, setCode] = useState(initialState.code ?? codeSample);
   const [formattedCode, setFormattedCode] = useState("");
 
@@ -84,6 +93,7 @@ function Inner() {
         useTabs,
         trailingComma,
         requirePragma,
+        experimentalOperatorPosition,
         code
       });
       history.replace({ ...location, hash });
@@ -97,6 +107,7 @@ function Inner() {
         tabWidth,
         useTabs,
         trailingComma,
+        experimentalOperatorPosition,
         requirePragma
       })
       .then(setFormattedCode)
@@ -150,6 +161,19 @@ function Inner() {
               ))}
             </select>
           </label>
+          <label title="Where to print operators when binary expressions wrap lines.">
+            --experimental-operator-position{" "}
+            <select
+              value={experimentalOperatorPosition}
+              onChange={event =>
+                setExperimentalOperatorPosition(event.target.value as ExperimentalOperatorPosition)
+              }
+            >
+              {Object.values(ExperimentalOperatorPosition).map(option => (
+                <option key={option}>{option}</option>
+              ))}
+            </select>
+          </label>
         </details>
         <details open>
           <summary>Special</summary>