How to configure editor component to enable source code formatting? - primeng

Im trying to use the primeng editor (which uses quill) for an in-browser editor where users can paste source code snippets. How do I configure the primeng editor (or quill) to format common code formats just as typescript, javascript, c# etc?
I create an editor defined like this:
<p-editor formControlName="editor" [style]="{'height':'320px'}" name="text"></p-editor>
Which then renders like this:
Source code with no formatting.
------------------------
Looking at the Quill website, if I paste in some sample code here
https://quilljs.com/docs/formats/
I then see the content rendered like this:
------------------------

Related

How to use image upload adapters as extra plugins with CKEditor 5 Classic Editor? Or, how to use CKEditor custom builder in React JS?

I was trying to integrate CKEditor5 in my MERN Stack Application. Its a kind of blog site which requires a fully functioned rich text editor. I integrated the editor and all other things are working fine except the file upload button.
I am using the predefined Classic Editor, which has all the basic functions. But when I click on the Image button to upload an image from local storage, it shows the error :
filerepository-no-upload-adapter
I tried to add Base64UploadAdapter plugin but then it shows the error :
Uncaught CKEditorError: ckeditor-duplicated-modules
Because of this error, I had to remove that plugin, but I still do not have the file upload function.
I also need some other buttons on my text editor, but I am always getting some kind of errors.
I also tried the CKEditor Custom build editor, but when I imported it to my page, it again gives me ckeditor-duplicated-modules error. I used the following code for importing:
import { CKEditor } from '#ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build/build/ckeditor';
And yes, I also added the custom builder's folder to my package.json before importing this.
I want all the features that I added in my Custom builder, but that's not working in my case. Can anyone please help me with this? Or else, if that is not possible, please give me a solution for file upload which I need for sure, even if I don't get other buttons except the predefined Classic Editor buttons.
But, if there is any way to fix this ckeditor-duplicated-modules error and use the Custom build only, that would be the best solution for me..!
Thanks in advance.

integrate a jupyter lab editor in React.js

im trying to create an online editor with react.js that looks like jupyter lab: i want to build the cells, the toolbar etc.
I dont need the functionalities (like running a ipynb file), just the UI
how can i use jupterlab editor as a component / how to integrate it?
are there any extentions that could be used / sample apps already made?

Adding a dynamic link to Microsoft Teams message

I'm using Azure logic apps to post a Teams message (using v3) to a channel that we have upon a trigger. When I'm trying to add a dynamic link to the content that I'm posting - it fails.
If I use an example message like below, where the SomeAction is generating a json result and the .link is a URL property:
`Example message looks like this`
< and > characters get encoded and I lose the clickability of the text.
Looks like in Microsoft Flow - they have an html icon button which seemingly turns off the encoding - see here: https://powerusers.microsoft.com/t5/Power-Automate-Ideas/Flow-Bot-unable-to-add-clickable-URL-to-Teams/idi-p/277965
so it looks like this:
but logic apps don't have the same button. If I try to add link using a static URL with the button that's provided, it works. I can't use Microsoft Flow, because it's functionalities compared to logic-apps seems to be somewhat limited.
I'm wondering if there's any way of posting a dynamic link in Microsoft Teams using logic apps?
I've figured this out.
As I've said before if we just added <a href="body('SomeAction').link]"> the tags get encoded.
Turns out this encoding happens only when we add text / code through the online editor / textbox.
The trick is to navigate to Code View and ensure the encoding is removed through the arm template.

Is it possible to show different icons for a react component in Webstorm?

Currently all my react components have an icon that looks like all my other javascript files, namely :
Is it possible to have a different icon if the file is a react component (ie. 'extends Component')
No, the Jetbrains IDEs don't support file icons that way. They just look at the file extension and load the corresponding icon.
However you could name your component files .jsx instead of .js to have a visual difference between them.
OR
You can use the Jetbrains API to write your own extension (naming Icon Provider) which will allow you to select icons based on the content of a file. Here is an example.

EPiServer 4.61 removing script tags from WYSIWYG editor

I know the WYSIWYG editor is not designed for pasting flash video object and script tags into the page but lets say you want to do that... Why does the EPiServer editor strip out the first javascript tag?
It's the Microsoft editor plugin that does it. It messes up almost all HTML elements.

Resources