Change indentation from spaces to tabs for codeblocks

[Repiteo]

Your Godot version: 4.0-rc1

Issue description: The GDScript style guide specifies use of "Tabs instead of spaces for indentation". However, the entirety of the documentation's code examples format with spaces instead of tabs. Handling the codeblocks with tabs instead like the main site appears capable of would remedy this inconsistency (though it'd need css adjustments to indent 4 blocks instead of 8)

URL to the documentation page (if already existing): https://docs.godotengine.org/en/stable/tutorials/scripting/gdscript/gdscript_styleguide.html (Applicable to entirety of documentation where codeblocks are present)

[YuriSizov]

I think we looked into this a few years ago, and there were issues with how RTD generates HTML. But worth checking again.

[Calinou]

We could convert sets of 4 spaces to tabs at load-time using JavaScript, but this may be slow on large pages.

[ronyeh]

What about changing the Godot editor? If we paste a large block of code, perhaps we can ask the developer if they would like the indentation converted from spaces => tabs?

[ronyeh]

Or when someone clicks the floating COPY button, we run some JS to convert spaces to tabs! It's not a perfect solution, but it'll handle a common case, where someone clicks the copy button on the docs.

[ronyeh]

Here's a hack I threw together:

function copyTextToClipboard(text) {
  var textArea = document.createElement('textarea');
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.select();
  document.execCommand('copy');
  document.body.removeChild(textArea);
}

function convertSpacesToTabs(inputString) {

  const fourSpaces = '    ';
  const lines = inputString.split('\n');
  const convertedLines = [];

  for (let line of lines) {
    let numTabs = 0;

    while (line.startsWith(fourSpaces)) {
      line = line.substring(4);
      numTabs++;
    }

    const tabs = '\t'.repeat(numTabs);

    const convertedLine = tabs + line;
    convertedLines.push(convertedLine);
  }

  const output = convertedLines.join('\n');
  copyTextToClipboard(output);
  return output;
}

document.querySelectorAll(".copybtn").forEach((button) => {
  button.addEventListener('click', (event) => {
    setTimeout(()=>{
      convertSpacesToTabs(event.target.parentNode.innerText);
    }, 200);
  });
});

For example, load: https://docs.godotengine.org/en/stable/getting_started/first_2d_game/05.the_main_game_scene.html

Open up the browser's dev tools and paste the code above.

It will change all the copy buttons to translate spaces to tabs before copying the code to your clipboard.

It's not a perfect solution, because I didn't bother figuring out how to remove the existing copy click handlers. I just run my converter 0.2s after the regular copy event happens. :-)

I'm sure there are better / alternative solutions. Lots of webpages trap the copy event, and append the source URL of the page you just copied from. We might be able to do something similar here. Whenever a copy event happens, convert spaces to tabs.

[ronyeh]

As a bookmarklet:

javascript:(function(){function copyTextToClipboard(e){var t=document.createElement("textarea");t.value=e,document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t)}function convertSpacesToTabs(e){let t=e.split("\n"),o=[];for(let r of t){let a=0;for(;r.startsWith("    ");)r=r.substring(4),a++;let n="\t".repeat(a),c=n+r;o.push(c)}let l=o.join("\n");return copyTextToClipboard(l),l}document.querySelectorAll(".copybtn").forEach(e=>{e.addEventListener("click",e=>{setTimeout(()=>{convertSpacesToTabs(e.target.parentNode.innerText)},200)})}),console.log("Spaces => Tabs Converter Activated!");})();

[mhilbrunner]

Headsup: we just merged https://github.com/godotengine/godot-docs/pull/8153 to fix this for the master branch. Please test there. If nothing comes up regarding that behaviour, we'll cherry-pick that soon to other docs branches.