hint.css | A CSS only tooltip library for your lovely websites | User Interface library

I have created a react-codemirror 2 component in my react app but the linting feature of the package is not working. I tried browsing other stack overflow questions but since the questions are at least 2 years old it looks like the file structure for the original library i.e. codemirror has been changed and none of the solution seem to work. I also opened an issue in their Github repo but no response on that. Hope you can help, here's the code for my component.

This plugin is very mixed. I developed a little this plugin. But I don't know how to add arrowColor and textColor properties. I couldn't share all of codes. Because exceeded maximum character length.

Also, you can see on github for original plugin: https://github.com/xbsoftware/enjoyhint

I am trying to make a HTML code player in which you enter html and get result in iframe. it works good if i only use textarea and output in iframe. but if i use code mirror and try putting coremirror value into iframe it shows me code in iframe instead of showing me result.

I'm using tinymce in inline mode on a contenteditable div.

I have used the CodeMirror tinymce plugin before (not inline mode) with no issues, but it doesn't seem to work correctly in inline mode. I've tried changing the config to inline: false and it works.

Clicking the Source button opens the HTML with CodeMirror and seems ok. But when I click Ok to save it, it seems to work fine in Chrome and Firefox but in Safari it adds an and I can't close the modal (however, I can see that it has changed the content of the editable div), clicking the Ok button again, it adds another and console error. Clicking the cancel or X button just adds console error.

In the console I get IndexSizeError: DOM Exception 1: Index or size was negative, or greater than the allowed value tinymce.min.js:5724

In Chrome, it seems to work but I still get a console error The given range isn't in document.

My tinymce config is below:

I am using codeMirror inside UI Layout Plug-in

Problems:

1. when inside layout, CodeMirror: Full Screen Editing does not work. F-11 to zoom, esc to quit
2. I tried full screen using jquery-fullscreen-plugin , seems to work fine but then autocomplete hint does not show up
3. with jquery-fullscreen-plugin , i tried giving hint container (see code below), works fine in full screen, does not work when not in full screen. Menu appear offset from cursor position.

I would prefer to use jquery-fullscreen-plugin but I dont know how to handle offset in hint menu because of container option

Complete Code (save as .html)

I am using CodeMirror as editor with show-hint.js and anyword-hint.js as example. By default, hints appear after pressing Ctrl-Space.

Problem:

I want CodeMirror to show hints after I type @@ along with Ctrl-Space.

What I have tried already:

I tried adding extraKeys like "'@'": "autocomplete" and "'@'-'@'": "autocomplete", but it does not work. It works with a single @, but not with @@.

HTML: (save as .html)