CodeViewer - how to auto-format JSON code when pasting or setting content

[benryanwilliams]

If I paste code that is already formatted correctly into the codeViewer then it is displayed properly. However, if I paste an unformatted block of code into the codeViewer (or set the content of the codeViewer using a stringified JSON object), it just appears as one block of text:

Screen.Recording.2022-09-16.at.16.42.49-1.mov

My code:

export default (editor, config) => {

  var setData = function() {console.log("setData function hasn't been replaced")}

  const stylePrefix = editor.getConfig("stylePrefix")
  const modal = editor.Modal
  const codeViewer = editor.CodeManager.getViewer("CodeMirror").clone()
  const container = document.createElement("div")
  const importLabel = config.modalImportLabel
  let viewerEditor = codeViewer.editor

  // Init import button
  const btnSet = document.createElement("button")
  btnSet.innerHTML = config.modalBtnImport || "Set Data"
  btnSet.className = stylePrefix + "btn-prim " + stylePrefix + "btn-import"
  btnSet.onclick = () => {
    if (confirm("Are you sure you want to set the sample data? Existing for-each containers and conditional text blocks may no longer function properly")) {
      let code = codeViewer.editor.getValue()
      code ? setData(JSON.parse(code)) : setData(null)
      editor.Modal.close()
    }
  }

  // Init code viewer
  codeViewer.set({
    codeName: 'htmlmixed',
    readOnly: 0,
    theme: 'hopscotch',
    autoBeautify: true,
    autoCloseTags: true,
    autoCloseBrackets: true,
    lineWrapping: true,
    styleActiveLine: true,
    smartIndent: true,
    indentWithTabs: true
  })

  return {
    run(setThisData, thisData) {
      setData = setThisData

      if (!viewerEditor) {
        const txtarea = document.createElement("textarea")

        if (importLabel) {
          const labelEl = document.createElement("div")
          labelEl.className = `${stylePrefix}import-label`
          labelEl.innerHTML = importLabel
          container.appendChild(labelEl)
        }

        container.appendChild(txtarea)
        container.appendChild(btnSet)
        codeViewer.init(txtarea)
        viewerEditor = codeViewer.editor
      }

      modal.setTitle("Set Sample Data (paste JSON below)")
      modal.setContent(container)
      const content = thisData ? JSON.stringify(thisData) : "Replace this with your sample data"
      codeViewer.setContent(content)
      modal
        .open()
        .getModel()
      viewerEditor.refresh()
    },

    stop() {
      modal.close()
    },
  }
}

Even if I use the third parameter of JSON.stringify e.g. codeViewer.setContent(JSON.stringify(thisData, null, '\t')), there is no indentation:

Is there any built-in (or other) way of implementing this? I can't see much information regarding the codeViewer in the docs.

[artf]

By using the CodeMirror in the core you should be able to auto-format html/css/js by using something like this:

viewerEditor.autoFormatRange({ line:0, ch:0 }, { line: viewerEditor.lineCount() });

but for the JSON is generally enough JSON.stringify, did you try using simple spaces JSON.stringify(thisData, null, 2)?

[benryanwilliams]

@artf I've tried adding this line viewerEditor.autoFormatRange({ line:0, ch:0 }, { line: viewerEditor.lineCount() }); but it doesn't seem to have any effect. Also, if I log content then paste it into the codeViewer from the console it appears properly. But then if I set the data then open the dialog again it appears without indentation:

Screen.Recording.2022-10-03.at.14.55.31-1.mov

Also, changing it to JSON.stringify(thisData, null, 2) produces the same results. I'm thinking there could be a hacky copy and paste simulation solution but feel like it should be easier to do this - any more ideas?