Add cursorOffset to Playground (#15751)

Author: thorn0

website/playground/Playground.js

@@ -104,7 +104,15 @@ class Playground extends React.Component {
     this.setContent = (content) => this.setState({ content });
     this.clearContent = this.setContent.bind(this, "");
     this.resetOptions = () => this.setState({ options: defaultOptions });
-    this.setSelection = (selection) => this.setState({ selection });
+    this.setSelection = (selection) => {
+      this.setState({ selection });
+      if (this.state.trackCursorOffset) {
+        this.handleOptionValueChange(
+          this.cursorOffsetOption,
+          util.convertSelectionToRange(selection, this.state.content)[0],
+        );
+      }
+    };
     this.setSelectionAsRange = () => {
       const { selection, content, options } = this.state;
       const [rangeStart, rangeEnd] = util.convertSelectionToRange(
@@ -126,6 +134,9 @@ class Playground extends React.Component {
     this.rangeEndOption = props.availableOptions.find(
       (opt) => opt.name === "rangeEnd",
     );
+    this.cursorOffsetOption = props.availableOptions.find(
+      (opt) => opt.name === "cursorOffset",
+    );
 
     this.formatInput = this.formatInput.bind(this);
     this.insertDummyId = this.insertDummyId.bind(this);
@@ -172,6 +183,7 @@ class Playground extends React.Component {
       ...ENABLED_OPTIONS,
       "rangeStart",
       "rangeEnd",
+      "cursorOffset",
     ]);
     const cliOptions = util.buildCliArgs(orderedOptions, options);
 
@@ -247,7 +259,7 @@ class Playground extends React.Component {
             reformat={editorState.showSecondFormat}
             rethrowEmbedErrors={editorState.rethrowEmbedErrors}
           >
-            {({ formatted, debug }) => {
+            {({ formatted, debug, cursorOffset }) => {
               const fullReport = this.getMarkdown({
                 formatted,
                 reformatted: debug.reformatted,
@@ -294,6 +306,49 @@ class Playground extends React.Component {
                           Set selected text as range
                         </Button>
                       </SidebarCategory>
+                      <SidebarCategory title="Cursor">
+                        <Option
+                          option={this.cursorOffsetOption}
+                          value={
+                            options.cursorOffset >= 0
+                              ? options.cursorOffset
+                              : ""
+                          }
+                          onChange={this.handleOptionValueChange}
+                        />
+                        <div
+                          style={{
+                            display: "flex",
+                            alignItems: "baseline",
+                            gap: "10px",
+                          }}
+                        >
+                          <Checkbox
+                            label="track"
+                            checked={Boolean(this.state.trackCursorOffset)}
+                            onChange={() =>
+                              this.setState((state) => ({
+                                trackCursorOffset: !state.trackCursorOffset,
+                              }))
+                            }
+                          />
+                          {options.cursorOffset >= 0 && (
+                            <>
+                              <Button
+                                onClick={() => {
+                                  this.handleOptionValueChange(
+                                    this.cursorOffsetOption,
+                                    -1,
+                                  );
+                                }}
+                              >
+                                Reset
+                              </Button>
+                              <label>Result: {cursorOffset}</label>
+                            </>
+                          )}
+                        </div>
+                      </SidebarCategory>
                       <SidebarCategory title="Debug">
                         <Checkbox
                           label="show input"
@@ -419,6 +474,12 @@ class Playground extends React.Component {
                             mode={util.getCodemirrorMode(options.parser)}
                             value={formatted}
                             ruler={options.printWidth}
+                            overlayStart={
+                              cursorOffset === -1 ? undefined : cursorOffset
+                            }
+                            overlayEnd={
+                              cursorOffset === -1 ? undefined : cursorOffset + 1
+                            }
                           />
                         )
                       ) : null}

website/playground/panels.js

@@ -97,10 +97,10 @@ class CodeMirrorPanel extends React.Component {
   }
 
   updateOverlay() {
-    if (!this.props.readOnly) {
-      if (this._overlay) {
-        this._codeMirror.removeOverlay(this._overlay);
-      }
+    if (this._overlay) {
+      this._codeMirror.removeOverlay(this._overlay);
+    }
+    if (this.props.overlayStart !== undefined) {
       const [start, end] = getIndexPosition(this.props.value, [
         this.props.overlayStart,
         this.props.overlayEnd,