Needs to work in "inline" mode

[robcarey]

Any chance to get this to work in inline mode? I found this project on the https://github.com/melquibrito/source-code-editor-tinymce-plugin/issues page. That plugin does work inline so there must be a way.

[prathamVaidya]

@robcarey To be able to open the code editor without a popup this plugin utilizes 'Custom Views' offered by tinymce v5+ versions. These custom views are only supported in classic mode and not in inline mode.

One solution might be to open the code editor in a popup view in inline mode. (As a fallback)

[robcarey]

Yes definitely a popup view is needed. I believe that's what the aforementioned plugin does by default, so I'm not sure how to implement that with yours

[prathamVaidya]

@robcarey I'll try to add the feature within 24 hours. It'll be helpful if you'll also be able to test it from your side and then I can merge into master.

[robcarey]

@prathamVaidya Definitely - happy to test fully and greatly appreciate your efforts on this useful tool!

[prathamVaidya]

@robcarey I have added the modal fallback. However, there is a bug affecting keyboard event listeners. So, keyboard shortcuts are remaining before I add it into the next version. You can test it out if you want, I am working on the remaining tasks.

[robcarey]

Getting a few issues and non-functioning:

1. Uncaught TypeError: Cannot read properties of undefined (reading 'registry') on line 207 - commenting this block out moves the same error to 481
2. This file is setting off Microsoft Defender on download big time - threat detected: Severe - name: Trojan:Script/Wacatac.B!ml Not sure what's going on here - reviewing your code I don't see anything malicious, but it's flagged every time

[prathamVaidya]

are you directly using the plugin by importing in your editor or have you tested it through storybook?

[robcarey]

Sorry - my bad - I had mistakenly not updated my TinyMCE in my staging environment from Tiny 5. Working now on Tiny6.

I am seeing a small issue in my particular web setup that the popup is drawing behind my website's sticky footer on lower resolutions. Z-index issue

[prathamVaidya]

can your provide me a screenshot?

[robcarey]

[robcarey]

the bottom left controls footer of my CMS - the circles - it's good they are in front as they are what dictate page editability/saving. The sticky footer at the bottom is a minor issue. Perhaps setting a custom x-index value in the config?

[robcarey]

All things considered though - it's looking and working great - thanks for your efforts on this! A very very useful tool!

[robcarey]

I was able to address this minor issue tweaking the modal CSS in the plugin file - working great.

[robcarey]

One additional comment/suggestion. Rather than only having the window close button top right, there should be button bar with "Save" AND "Cancel" buttons. As it is now, you have no choice but to commit any changes you make when the window is closed

[robcarey]

Something like this would be ideal (theme selector would be a luxury ;) )

[prathamVaidya]

Something like this would be ideal (theme selector would be a luxury ;) )

Yes, I didn't add the buttons because it aligned more with the existing classic UI but I think it's better to add them as user's naturally expect action buttons in a dialog box.

Theme Selector is not in plans right now but you are free to create a PR for that feature.

[robcarey]

Again - I want to thank you for your efforts on this. In my particular use case, this is solving a long time major annoyance for me with my existing TinyMCE inline editing tools. This is a very appreciated and useful upgrade to my workflow!

[prathamVaidya]

Thanks for your support! It will help others to discover this plugin easily if you can star or fork this repo.

Also, If you are using dark theme, you can customize it to make it completely dark according to your theme.

Here is an example configuration:

supercode: {
        modalPrimaryColor: '#222f3e',
        modalSecondaryColor: '#ededed',
        theme: 'dracula',
        dark: true
    }

[robcarey]

Fantastic! Working beautifully!

[robcarey]

Not sure how to add, but I added support for context menu:

const setupMenuItem = editor => { editor.ui.registry.addMenuItem('supercode', { icon: Config.iconName, text: 'Source Code', onAction: startPlugin }); };

    const setupContextMenu = editor => {
        editor.ui.registry.addContextMenu('supercode', {
            update: element => {
                return 'supercode';
            }
        });
    };

    setupMenuItem(editor);
    setupContextMenu(editor);

[prathamVaidya]

Not sure how to add, but I added support for context menu:

const setupMenuItem = editor => { editor.ui.registry.addMenuItem('supercode', { icon: Config.iconName, text: 'Source Code', onAction: startPlugin }); };

    const setupContextMenu = editor => {
        editor.ui.registry.addContextMenu('supercode', {
            update: element => {
                return 'supercode';
            }
        });
    };

    setupMenuItem(editor);
    setupContextMenu(editor);

That's a good improvement. You may create a PR for this if you want.