HTML Documents Extension

[ScrTwPm]

Create HTML webpages and display them on the stage

I'll make a documentation when I know what you think of this

[sakurabuilder]

❌ Preview build failed

added 61 packages, and audited 62 packages in 5s

6 packages are looking for funding
  run `npm fund` for details

11 vulnerabilities (1 low, 2 moderate, 8 high)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

> penguinmod-extensionsgallery@0.0.1 build
> vite build

vite v6.3.5 building SSR bundle for production...
transforming...
✓ 54 modules transformed.

npm notice
npm notice New major version of npm available! 10.8.2 -> 12.0.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v12.0.2
npm notice To update run: npm install -g npm@12.0.2
npm notice
8:53:49 PM [vite-plugin-svelte] src/routes/+page.svelte:503:4 Unused CSS selector ".extension-list-filters-label"
https://svelte.dev/e/css_unused_selector
501:         display: initial;
502:     }
503:     .extension-list-filters-label {
                                      ^
504:         display: block;
505:         margin-top: 8px;
✗ Build failed in 742ms
error during build:
src/lib/Documentation/pages.js (92:4): Expected ',', got 'string literal (HTMLDocuments, "HTMLDocuments")'
file: /app/src/lib/Documentation/pages.js:92:4

90: 
91:     // HTML Documents
92:     "HTMLDocuments": HTMLDocuments,
        ^
93:     "DateFormatV2": DateFormatV2,

    at getRollupError (file:///app/node_modules/rollup/dist/es/shared/parseAst.js:401:41)
    at ParseError.initialise (file:///app/node_modules/rollup/dist/es/shared/node-entry.js:14433:28)
    at convertNode (file:///app/node_modules/rollup/dist/es/shared/node-entry.js:16313:10)
    at convertProgram (file:///app/node_modules/rollup/dist/es/shared/node-entry.js:15553:12)
    at Module.setSource (file:///app/node_modules/rollup/dist/es/shared/node-entry.js:17308:24)
    at async ModuleLoader.addModuleSource (file:///app/node_modules/rollup/dist/es/shared/node-entry.js:21321:13)

Failed on dbbd9ff

[ScrTwPm]

But you were right about the Python extension it didnt really add anything new. I think this does add more features that that does. I'm checking right now to see if something like this already exists but i'm pretty sure it isn't

[Steve0Greatness]

Doesn't appear to scale appropriately for full screened usage

Additionally, although the extension still believes the currently displayed page is still the page when changing view modes (ie. into/out of full screen), it does actually get removed.

[Steve0Greatness]

Doesn't appear to scale appropriately for full screened usage
image removed

I see you had added a block that helps to scale appropriately (id spw). Second one still applies, though.

[Steve0Greatness]

Could you make it so that multiple pages can be displayed at once?

[Steve0Greatness]

A bit more of a general concern, but you should put this through Prettier, because this is formatted, in my opinion, a bit badly.

[ScrTwPm]

thanks for the feedback! i'll get to it.

[Steve0Greatness]

But you were right about the Python extension it didnt really add anything new. I think this does add more features that that does. I'm checking right now to see if something like this already exists but i'm pretty sure it isn't

Well, there's Project Interfaces, which is a similar idea, but it doesn't allow for the creation of documents made up of HTML.

[ScrTwPm]

i was thinking about that exact thing while i was making this. I wanted to give users more control and the ability to display and build their own webpage documents.

[ScrTwPm]

can i use 'https://unpkg.com/html-dom-parser@latest/dist/html-dom-parser.min.js' for prettier

[ScrTwPm]

or i can use this function

function prettierInText(html) {
  // Clean up existing whitespace and collapse it
  let clean = html.replace(/\s*([<>])\s*/g, '$1').replace(/\s+/g, ' ');
  let reg = /(<[^>]+>)/g;
  let matches = clean.split(reg).filter(Boolean);
  
  let formatted = '';
  let pad = 0;

  matches.forEach((token) => {
    // Check if the token is a closing tag
    if (token.match( /<\/\w+/ )) {
      pad--;
    }
    
    // Add current line indentation
    formatted += '  '.repeat(Math.max(0, pad)) + token + '\n';
    
    // Check if the token is an opening tag (and not self-closing)
    if (token.match( /<[^\/][^>]*[^>\/]>/ ) && !token.match(/<(input|img|br|hr|meta|link)/)) {
      pad++;
    }
  });

  return formatted.trim();
}

// Example Usage
const raw = '<div><h1>Title</h1><p>Text</p><img src="img.jpg"/></div>';
console.log(prettierInText(raw));

[Gen1xLol]

or i can use this function

function prettierInText(html) {
  // Clean up existing whitespace and collapse it
  let clean = html.replace(/\s*([<>])\s*/g, '$1').replace(/\s+/g, ' ');
  let reg = /(<[^>]+>)/g;
  let matches = clean.split(reg).filter(Boolean);
  
  let formatted = '';
  let pad = 0;

  matches.forEach((token) => {
    // Check if the token is a closing tag
    if (token.match( /<\/\w+/ )) {
      pad--;
    }
    
    // Add current line indentation
    formatted += '  '.repeat(Math.max(0, pad)) + token + '\n';
    
    // Check if the token is an opening tag (and not self-closing)
    if (token.match( /<[^\/][^>]*[^>\/]>/ ) && !token.match(/<(input|img|br|hr|meta|link)/)) {
      pad++;
    }
  });

  return formatted.trim();
}

// Example Usage
const raw = '<div><h1>Title</h1><p>Text</p><img src="img.jpg"/></div>';
console.log(prettierInText(raw));

This seems to be very clearly AI generated. I don't know if you vibecoded this extension but if you did that's a biiiig no-no

[ScrTwPm]

I typed this myself. But the function i just pasted was AI generated because I wanted to see if you would or would not want me to import the prettier.
I typed the full extension by hand. I've been working on it since May.

[ScrTwPm]

I don't paln on using the script I sent you but I want to verify if i'm ok to import perttier from https://unpkg.com/html-dom-parser@latest/dist/html-dom-parser.min.js'

[ScrTwPm]

This seems to be very clearly AI generated. I don't know if you vibecoded this extension but if you did that's a biiiig no-no

I built this off of my previous html to canvas extension that I made last year.
It is very unsafe and uses cst1229's extendable blocks (i never made a pr for it)

htmltocanvasold.js

[Steve0Greatness]

I don't paln on using the script I sent you but I want to verify if i'm ok to import perttier from https://unpkg.com/html-dom-parser@latest/dist/html-dom-parser.min.js'

Uh, I don't think that's Prettier, that's a DOM parser. Prettier is a code formatter, I was requesting that you reformat your code.

[ScrTwPm]

OH. ok. it does have a html parser. You wnated me to format my code

[Steve0Greatness]

OH. ok. it does have a html parser. You wnated me to format my code

Yes. The JavaScript of the extension, that's what I want you to format.

[ScrTwPm]

I'll do that when i post my new revided version that replies to your suggestions

(I'm a good coder but a horrible formatter. I'm downloading prettier on vscode right now)

[Steve0Greatness]

I'll do that when i post my new revided version that replies to your suggestions

(I'm a good coder but a horrible formatter. I'm downloading prettier on vscode right now)

Alright, you actually don't need to open a new PR, just push to the same branch that this PR is pulling from (main).

[Steve0Greatness]

Additionally, you can just use the builtin DOMParser provided by the browser, rather than needing an external package..

[ScrTwPm]

I got you.

[ScrTwPm]

should i use that to insert elements into my iframe or change the entire

this.pages[page].code

to a HTML DOM

[ScrTwPm]

all changes made

[RedMan13]

if you could please fix the merge conflicts github lists that would be perfect

[jwklong]

your custom types need serialization/deserialization support or projects may not be able to safe if for example a custom type is stored inside a variable

[ScrTwPm]

if you could please fix the merge conflicts github lists that would be perfect

Can i make a new PR? this one has too many commits anyway.

[ScrTwPm]

your custom types need serialization/deserialization support or projects may not be able to safe if for example a custom type is stored inside a variable

I'll get on it

[ScrTwPm]

ill finish the serilizzaton by the end of the week

[ScrTwPm]

added

[ScrTwPm]

hello?

[RedMan13]

hello?

sorry about that

[ScrTwPm]

done