I am working on an online coding platform which developing with React.js and Monaco editor.
I've two coding questions. I've created a function for the first question.
After that, I've moved to another question. I was able to get autocomplete suggestions for the previously created function, which does not exist in the current content.
I used the editor's default model instead of creating a new Monaco model for a language change. I observe that the model's path and associated resources change when I change the language.
Related
I'm a bit diving into a rabbit hole when it comes to implementing a rich text editor. Currently using react-quill, but want to implement a concept of template variables and/or allowing users to choose templates.
I know there is TinyMCE out there, but the self-hosted setup is very unstable and the cloud provided setup is not stable in the country I am residing. :(
I am pretty much looking into implementing something similar to this:
https://ambassify.github.io/tinymce-variable/
That would replace {{ mustache }} syntaxes with a bit more visual appealing element, that cant be edited but can be deleted.
So the thing I tried so far was using this as an example to insert Embed/blots in the QuillJS text editor. But this doesnt really insert things using mustache syntax, and also when a user chooses a whole template, then the variables are not being highlighted.
Example of a template a user could choose:
Hey {{ receiver.fullname }},
Some message here
Thanks!
{{user.first_name}}
{{user.company.name}}
How it shoud look like:
The user has the option to edit the template they chose, and after clicking on send. Taking the same template they edited (with the variables) to the next email window.
So my question here is, does anyone have a recommendation on how to accomplish this and which wysiwyg-editor might offer the right solution for this (besides TinyMCE)?
I recommend you to use tiptap framework.
This is an headless wysiwyg that gives you full control on the editor.
They provide a simple extension system which could perfectly match your need.
React Mentions does this very nicely IMO. You can use markup and displayTransform attributes to transform the entry into a tag like structure. Also the data attribute will let you define the available selections.
I'm working on a couple of features for a project that I created a few months back when I was first learning React. I wanted to add a wysiwyg editor to one of my forms so that a user could have more control with the "about" section of an event page (i.e. embed media and images, html source code editing, font formatting, etc.)
The editor that I'm using is TinyMCE 5.0.
This project is a Rails backend and React frontend. (I'm not using Redux - this project was a way to practice React when I first learning it.)
You can find my last commit here if you would like to see my code
The Problem
I'm able to get the wysiwyg editor rendered. I can also type and format text inside the editor's body. When I click on the code icon or image embed icon (like in the gif below), a new modal appears but when I click into it to type, the text cursor appears and then disappears. So I can't type and it seems that the text area and fields become inactive (for lack of a better term - I'm still somewhat in the beginning of my coding journey.)
I just signed up and TinyMCE gives access to premium plugins as well, so I don't think it's an issue with my account permissions/subscription.
I'm also not receiving anything in the console but if there's any help you can provide, it would be appreciated!
Thanks!
TinyMCE 5 editor - text cursor issue - text areas become inactice
It is highly likely that the library you are using for your modal (that contains TinyMCE) is not allowing focus to go elsewhere. As you have not stated the library you use for your modal I can't tell you anything about how to address this but we know this is an issue with common libraries like Bootstrap:
https://www.tiny.cloud/docs/integrations/bootstrap/#usingtinymceinabootstrapdialog
Whatever you are using should have a similar ability.
Is there an official way to get the x-... (eg x-grid-row-summary) types of components, I am currently using the debugger in chrome and looking at the html in there.
But it feels wrong and that there must be a published list somewhere...
If only things would be as simple as that. CSS classes are used extensively by ExtJS for correct display of components, and are a hybrid between the component type itself and its state (focues would also get a css class).
The example you gave demonstrates it: x-grid-row-summary is injected within AbstractSummary.js, which is really a feature rather than a component. x-grid-row-summary does not have any corresponding css class and isn't included in the default theme's scss (under /resources/themes/stylesheets/ext4/default/).
So I'm afraid the way you do it is the best way of doing it.
I'm new to AvalonDock, but I see it's relatively easy to use. I'm planning to use it in a custom app for my company. We have a certain look'n'feel so I want to get the control to use the same colors.
I am using the ExpressionDark theme as a base, so basically what I did was to copy the AvalonDock.Themes and rename it, and change the name of the ExpressionDark theme to mine but when I compile and try to use it in my app, it says there is a missing resource key (PaneHeaderCommandStyle). If I remove my theme ResDict, it works again.
I don't understand what's wrong, since I haven't changed anything but the project and theme name. Is there anything I could be missing?
Please help...
I'm making custom Gtk+ widgets (in C) for work and one of the requirements is that those widgets have to be editable in Glade.
So far it works nicely, I have for example a widget made of a table with buttons in it and with a custom specific behaviour and some custom specific properties that can be edited in Glade correctly.
So this work but I need now to allow the user to change the properties of buttons (that are inside my custom widget) - and only those buttons - from Glade.
It seems to be possible as a lot of basic Gtk widgets (a lot of containers) are exposing some of their sub-widgets in glade, allowing for example to edit the label of a GtkFrame.
But I can't find any documentation on that. Can anyone please explain how to achieve this?
Ok I think I've found the answer (after several day of searching and asking on the Gtk forum).
The main idea is that the code that make sub-widgets visible in glade, and in fact all the specific visual behaviour specific in glade, is written in a C pluggin loaded by glade.
First, you can see in the catalog file provided by Glade for Gtk+ that there are names of functions with glade_gtk_ prefixes. Those functions are provided in the C plugin where you can see that functions uses the glade API to add widget adaptors to Glade.
Those adaptors then allow the targetted widgets to be visible in glade.
In fact I've found some documentation that I didnt finished to read yet : http://library.gnome.org/devel/gladeui/stable/catalog.html
Someone confirmed : http://www.gtkforums.com/viewtopic.php?p=18030#18030