Add interactive code editor for tutorials

[avkos]

Description

Please include a summary of the changes and be sure to follow our Contribution Guidelines.

Fixes #6948

metamask - https://6c780446.web3-js-docs.pages.dev/guides/getting_started/metamask
plugin - https://6c780446.web3-js-docs.pages.dev/guides/web3_plugin_guide/
eth - https://6c780446.web3-js-docs.pages.dev/guides/web3_eth/eth
ens - https://6c780446.web3-js-docs.pages.dev/guides/ens/
utils - https://6c780446.web3-js-docs.pages.dev/guides/web3_utils_module/mastering_web3-utils
subscription - https://6c780446.web3-js-docs.pages.dev/guides/events_subscriptions/

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• I have selected the correct base branch.
• I have performed a self-review of my own code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• My changes generate no new warnings.
• Any dependent changes have been merged and published in downstream modules.
• I ran npm run lint with success and extended the tests and types if necessary.
• I ran npm run test:unit with success.
• I ran npm run test:coverage and my test cases cover all the lines and branches of the added code.
• I ran npm run build and tested dist/web3.min.js in a browser.
• I have tested my code on the live network.
• I have checked the Deploy Preview and it looks correct.
• I have updated the CHANGELOG.md file in the root folder.
• I have linked Issue(s) with this PR in "Linked Issues" menu.

[github-actions]

Bundle Stats

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
10	624.29 kB	0%

Changeset

No files were changed

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset	File Size	% Changed
web3.min.js	604.99 kB	0%
../lib/commonjs/index.d.ts	8.69 kB	0%
../lib/commonjs/accounts.d.ts	3.89 kB	0%
../lib/commonjs/types.d.ts	2.67 kB	0%
../lib/commonjs/web3.d.ts	1.35 kB	0%
../lib/commonjs/web3_eip6963.d.ts	1.2 kB	0%
../lib/commonjs/abi.d.ts	999 B	0%
../lib/commonjs/eth.exports.d.ts	280 B	0%
../lib/commonjs/providers.exports.d.ts	183 B	0%
../lib/commonjs/version.d.ts	60 B	0%

[github-actions]

Benchmark

Benchmark suite	Current: ec04d56	Previous: f216540	Ratio
processingTx	9142 ops/sec (±4.35%)	8831 ops/sec (±4.37%)	0.97
processingContractDeploy	40148 ops/sec (±7.14%)	38915 ops/sec (±7.67%)	0.97
processingContractMethodSend	19505 ops/sec (±4.25%)	18648 ops/sec (±7.13%)	0.96
processingContractMethodCall	38099 ops/sec (±6.24%)	37036 ops/sec (±6.22%)	0.97
abiEncode	43117 ops/sec (±7.21%)	42619 ops/sec (±6.84%)	0.99
abiDecode	29829 ops/sec (±8.10%)	29814 ops/sec (±6.52%)	1.00
sign	1505 ops/sec (±3.91%)	1551 ops/sec (±1.05%)	1.03
verify	371 ops/sec (±1.01%)	366 ops/sec (±0.52%)	0.99

This comment was automatically generated by workflow using github-action-benchmark.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.97%. Comparing base (f216540) to head (ec04d56).

Additional details and impacted files

@@           Coverage Diff           @@
##              4.x    #7036   +/-   ##
=======================================
  Coverage   91.97%   91.97%           
=======================================
  Files         215      215           
  Lines        8287     8287           
  Branches     2277     2277           
=======================================
  Hits         7622     7622           
  Misses        665      665           

Flag	Coverage Δ
UnitTests	91.97% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Components	Coverage Δ
web3	∅ <ø> (∅)
web3-core	∅ <ø> (∅)
web3-errors	∅ <ø> (∅)
web3-eth	∅ <ø> (∅)
web3-eth-abi	∅ <ø> (∅)
web3-eth-accounts	∅ <ø> (∅)
web3-eth-contract	∅ <ø> (∅)
web3-eth-ens	∅ <ø> (∅)
web3-eth-iban	∅ <ø> (∅)
web3-eth-personal	∅ <ø> (∅)
web3-net	∅ <ø> (∅)
web3-providers-http	∅ <ø> (∅)
web3-providers-ipc	∅ <ø> (∅)
web3-providers-ws	∅ <ø> (∅)
web3-rpc-methods	∅ <ø> (∅)
web3-utils	∅ <ø> (∅)
web3-validator	∅ <ø> (∅)

[Muhammad-Altabba]

I am not sure what is the issue, but I could not try this feature. It only shows a black area when opening: https://6c780446.web3-js-docs.pages.dev/guides/getting_started/metamask/

What do you suggest?

[luu-alex]

@Muhammad-Altabba are you using firefox? it doesnt seem to work on firefox but using chrome works fine