How do we post block-type content in topics these days? - Chess Forums - Page 2

Jul 2, 2025

0

#21

So I am testing my new extension. It available on tinymce-clipboard-injector

# TinyMCE Clipboard Injector for Chess.com Forums

## What It Does
This Firefox extension allows you to:
- Click a toolbar icon
- Paste code from your clipboard
- Automatically convert indentation to ` ` to preserve formatting
- Inject it into the Chess.com TinyMCE forum editor

And Bob is your uncle.

AlAlper

Jul 2, 2025

0

#22

Good night everyone.

stephen_33

Jul 3, 2025

0

#23

Since accuracy is essential where do we find this...

1. Go to the Forum and Click “Reply”

Open any Chess.com forum thread. Click the “Reply” button to open the TinyMCE editor.

Do you mean "Quote" because I've searched and there's no “Reply” button that I can see.

AlAlper

Jul 3, 2025

0

#24

stephen_33 wrote:

Since accuracy is essential where do we find this...

1. Go to the Forum and Click “Reply”

Open any Chess.com forum thread. Click the “Reply” button to open the TinyMCE editor.

Do you mean "Quote" because I've searched and there's no “Reply” button that I can see.

You are reading the wrong post. I do not MEAN anything I did not write this it is crap. See the post above(you are reading the test result. that starts with

WARNING ChatGPT Generated instructions Has ERRORS BUT kick it and you can get it to work. In my instructions I do not use the word Quote or Reply.

Since I am focused on speed and have great debug skills I can use GPT and still get a performance boost even-though accuracy has left the building.

These are my instructions.

Steps:

Get crap from Chat 💩
Tell Chat: “Format this as HTML using non-breaking spaces ( ) to preserve indentation.”
Watch it reply with:

Absolutely! Here's your entire post turned into a single HTML snippet, with all code segments converted to use   (non-breaking spaces) for indentation preservation — ready to inject into a TinyMCE forum reply using Option 3:
Copy the snippet
Open Firefox or Chrome → Right-click inside the forum reply box → Inspect
Find the TinyMCE <iframe>
Edit the inner <body>
Paste HTML
Click the editor again to register the change
Post
Boom 💥
What the post you are reading means to show the improvement. I can take any crap copy it format the with nonbreaking spaces and use the normal TinyMCE editor without a source button and inject it using Fire fox. Also read on I created a Firefox Web Extension where with one click It it will take source code from the clipboard format it. Inject it into the TinyMCE editor for you. You do not search for any thing. It is up on GitHub . It available on tinymce-clipboard-injectorDownload read the code kick the tires.

AlAlper

Jul 3, 2025

0

#25

I am posting this this stuff at 4:00AM the goal is to be responsive not perfect. And If i Am too tried to edit it and slap a WARNING on...

stephen_33

Jul 3, 2025

0

#26

My bad - I misunderstood but I think I'm finally there:

the essential HTML I've put together...

gives the following display...

def my_func():
    """ test """
    (some code)
    (more code)

.That took a load of editing before I got it right!

For me it's probably going to be much simpler and quicker to save the content I want to post in an input file and use a short Python routine to wrap the whole lot in the HTML needed to display correctly with all appropriate indentation.

I already create much of my output for this site in a test HTML file which I open in Chrome and then copy&paste whatever content I want.

stephen_33

Jul 3, 2025

0

#27

Thanks for the hint to replace 4 ordinary spaces with     

That cracked it. 😊

stephen_33

Jul 3, 2025

0

#28

Here's some cheap and cheerful Python that reformats indented code (in file 'input.txt') into a form that can be displayed in forums here, retaining correct indentation:-

lines = []

for line in open(f'{path}input.txt', 'r', encoding='utf-8-sig'):
    line = line.rstrip('\n')
    print(line)
    indent = 0
    for character in line:
        if character == ' ':
            indent += 1
        else:
            break
    line = f'{"&nbsp;" * indent}{line[indent:]}'
    lines.append(line)

create_html(['<pre style="font-family: monospace;">'] + lines + ['</pre>'], 'output')

.That output was created via the same code. Including any lines with '<' or '>' tags in them isn't straightforward because a browser treats them as tags - I think they have to be doubled-up to display literally? Found it - use < and >

Same with ' ' because it displays as a space of course. I'm trying to remember the proper escape to display those literally?

AlAlper

Jul 3, 2025

0

#29

Thanks! That looks great. I realized I gave you the wrong GitHub link earlier — here’s the correct one:

👉 https://github.com/Alalper2/tinymce-clipboard-injector


I’d love for you to contribute! 💻 Here are the two main files to get started:


---


📄 manifest.json


{

  "manifest_version": 3,

  "name": "TinyMCE Clipboard Injector",

  "version": "2.0",

  "description": "Inject clipboard HTML (converted with &nbsp; indentation) into Chess.com forum replies.",

  "permissions": ["scripting", "activeTab", "clipboardRead"],

  "host_permissions": ["https://www.chess.com/*"],

  "action": {

    "default_title": "Paste & Inject Clipboard HTML"

  },

  "background": {

    "service_worker": "background.js"

  }

}
---
🧠 background.js

chrome.action.onClicked.addListener((tab) => {

  chrome.scripting.executeScript({

    target: { tabId: tab.id, allFrames: true },

    func: injectFromClipboard

  });

});


async function injectFromClipboard() {

  try {

    const text = await navigator.clipboard.readText();

    const htmlSafe = escapeHTML(text);

    const withNbsp = htmlSafe.replace(/^\s+/gm, (spaces) => '&nbsp;'.repeat(spaces.length)).replace(/\n/g, '<br>');

    const htmlToInject = `<pre>${withNbsp}</pre>`;


    const interval = setInterval(() => {

      const iframe = document.querySelector("iframe.tox-edit-area__iframe");

      if (!iframe) return;


      const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

      const body = iframeDoc.getElementById("tinymce");

      if (body) {

        body.innerHTML = htmlToInject;

        clearInterval(interval);

      }

    }, 500);

  } catch (err) {

    alert("Failed to read from clipboard: " + err);

  }

}


function escapeHTML(str) {

  return str

    .replace(/&/g, '&amp;')

    .replace(/</g, '&lt;')

    .replace(/>/g, '&gt;')

    .replace(/"/g, '&quot;')

    .replace(/'/g, ''');

}
Let me know what you think or if you'd like me to add a README or issue list to guide contributions! 🚀

stephen_33

Jul 3, 2025

0

#30

I thought it would be fairly easy to find a method of displaying " " literally in a browser but the problem is quite tricky.

The workable solution for this site that I've found (many involve solutions using CSS or JS which the post-editor usually strips out) is to fool the browser by splitting the string into the following:-

"&nbsp;" which displays as " "

AlAlper

Jul 4, 2025

0

#31

I kind of fixed up my original post — take a look:
Direct link to comment

I’ll be integrating this into my code for a ChessDev Hub - Paste Tool on GitHub.
This Firefox extension will let you copy code from any editor, or formatted code source and paste it with one click into any forum topic or comment page. 💡

stephen_33

Jul 4, 2025

0

#32

I've tried using Firefox in the past but these days it's Chrome only, so I'm guessing your extension wouldn't work for me?

AlAlper

Jul 4, 2025

0

#33

Right but that is next I just change the manifest.

I will let you know...

stephen_33

Jul 5, 2025

0

#34

Cheers Allen but I've just been looking through this guide...

https://daily.dev/blog/writing-extensions-for-chrome-a-developers-guide

That's really well written and very helpful so I might have a go myself. Only trouble is I'll need to dust-off my javascript skills first. It's years since I completed the basic course on Codecademy!

AlAlper

Jul 6, 2025

0

#35

looks like it should work with chrome. Here is the zip