TLDR Using the PASTE (not powerpaste) plugin from TinyMCE, I want to keep the "style" attribute from the clipboard when pasting; it appears to be in the clipboard; however, TinyMCE appears to be stripping it
I have content from a PDF (PDF can be downloaded here: https://www.docdroid.net/BtHGhjb/test-pdf) that, when copied from Preview (MacOS), inside the clipboard, the style attribute on the span wrapping the word Test copied, I can verify this by downloading the document linked from docdroid.net, and opening it in preview, selecting all and clicking copy. Then going to http://static.ephox.com/clipboard/clipboardtest.html and pasting, see below for a screenshot:
You can see that the span has a bunch of styles added including font-family, font-weight and font-size,
When I paste into TinyMCE, with which I have created a sample # https://codesandbox.io/s/charming-brook-khp1v?file=/src/App.js what's actually getting pasted is the span WITHOUT the style property. I want to retain that style property.
My configuration can be seen # https://codesandbox.io/s/charming-brook-khp1v?file=/src/App.js otherwise it is:
menubar: false,
valid_classes: "column",
paste_retain_style_properties: "all",
spellchecker_language: "en",
paste_preprocess: (plugin, args) => {
console.log(args);
},
selector: "textarea",
advlist_bullet_styles: "square",
valid_elements: "span[style],b"
Any help on how I can retain the style property would be appreciated.
paste_webkit_styles: "font-weight"
fixes it for me
Related
While making VSCode Extension I have a requirement to show decorations on a file. Then while you hover over that decoration you can see the default hover with some information you want to show. I am using the following code to create the hover using MarkDownString for VSCode. Even after using "float:right;" in the span the view comment section won't move to the extreme right of the hover. It would just stay in the left. Can someone help me with the way to make it right aligned? Screenshot added below for reference.
const myContent = new MarkdownString(`<span style='float:right;'><a href='#'>View Comment</a></span>`);
myContent.isTrusted = true;
myContent.supportHtml = true;
const decoration = { range, hoverMessage:myContent };
Screenshot
I want the highlighted red box area to be in extreme right of the hover. [The image used is just for reference].
After trying the same thing, I found this question still unanswered.
The MarkdownString documentation states that:
When supportHtml is true, the markdown render will also allow a safe subset of html tags and attributes to be rendered. See https://github.com/microsoft/vscode/blob/6d2920473c6f13759c978dd89104c4270a83422d/src/vs/base/browser/markdownRenderer.ts#L296 for a list of all supported tags and attributes.
Looking at the code linked, we can see that while "span" is allowed the "style" and "class" attributes, they are very strictly filtered and only allow some of the vscode built-ins to be used.
So, while styling elements with inline CSS or even a custom class might be possible, there is another approach to this - using Markdown tables, which get translated into HTML tables and allow custom alignment.
For example, what I ended up using was something like:
new MarkdownString(`
| |
| ---: |
| the very long line we want the below link to right-align to |
| [Link text](https://linktarget "Link hover message") |
`)
The idea came from the github issue linked in the the source file mentioned above.
A couple of notes:
codicons are still supported inside Markdown tables;
the HTML table generated does not expand to 100% of the hover message box, so if you want to right-align the link text with a longer line, they have to be in the same Markdown table;
Markdown table detection is very picky about spaces and newlines, you might have to play a bit with the formatting of your string for vscode to correctly transform it into a HTML table;
the Markdown table header cannot be omitted, at least that was the conclusion of my testing; it can however be empty;
the resulting HTML table might add some small invisible borders, I haven't investigated, but my alignment with other rows in the hover seemed 1px off;
trying to bypass the Markdown table creation and writing my own HTML table broke codicons support, although I haven't investigated that too much either;
I have a problem with intellisense
I have disabled all extensions, but I still get:
sorry, but there is no formatter for html-files installed
any idea?
VS Code version 1.19.1
// Enable/disable autoclosing of HTML tags.
"html.autoClosingTags": true,
// List of tags, comma separated, where the content shouldn't be reformatted. 'null' defaults to the 'pre' tag.
"html.format.contentUnformatted": "pre,code,textarea",
// Enable/disable default HTML formatter
"html.format.enable": true,
// End with a newline.
"html.format.endWithNewline": false,
// List of tags, comma separated, that should have an extra newline before them. 'null' defaults to "head, body, /html".
"html.format.extraLiners": "head, body, /html",
// Format and indent {{#foo}} and {{/foo}}.
"html.format.indentHandlebars": false,
// Indent <head> and <body> sections.
"html.format.indentInnerHtml": false,
// Maximum number of line breaks to be preserved in one chunk. Use 'null' for unlimited.
"html.format.maxPreserveNewLines": null,
// Whether existing line breaks before elements should be preserved. Only works before elements, not inside tags or for text.
"html.format.preserveNewLines": true,
// List of tags, comma separated, that shouldn't be reformatted. 'null' defaults to all tags listed at https://www.w3.org/TR/html5/dom.html#phrasing-content.
"html.format.unformatted": "wbr",
// Wrap attributes.
"html.format.wrapAttributes": "auto",
// Maximum amount of characters per line (0 = disable).
"html.format.wrapLineLength": 120,
// Configures if the built-in HTML language support suggests Angular V1 tags and properties.
"html.suggest.angular1": true,
// Configures if the built-in HTML language support suggests HTML5 tags, properties and values.
"html.suggest.html5": true,
// Configures if the built-in HTML language support suggests Ionic tags, properties and values.
"html.suggest.ionic": true,
// Traces the communication between VS Code and the HTML language server.
"html.trace.server": "off",
// Configures if the built-in HTML language support validates embedded scripts.
"html.validate.scripts": true,
// Configures if the built-in HTML language support validates embedded styles.
"html.validate.styles": true,
Thanks
I had the same problem with VSC version 1.30. These steps solved my problem:
Press Ctrl+K Ctrl+O to select the folder in which the html file lies.
Open the File Explorer Ctrl+Shift+E and open the html file
Press Ctrl+Shift+I.
Viola! I got the formatted code
When I encountered this I was working with a single html file that was not in an opened folder nor VSC workspace. When I setup a workspace that included the file, the html formatter worked.
This happened to me because I had multiple formatters installed and I needed to configure which formatter to use. I ended up just uninstalling the one I didn't want anymore and it went back to working.
I cannot figure out the option to turn off the new "feature" where the VS Code HTML mode editor types stuff for you in the following scenario:
I type <b> and when I hit that last > it then types </b> which I then have to delete and move to where I want it.
How do I keep VS Code from typing stuff for me in this case? I have these two options set like this:
"editor.quickSuggestions": false,
"editor.autoClosingBrackets": false,
Sort of the opposite of this question: VSCode not auto completing HTML
I found it:
// Enable/disable autoclosing of HTML tags.
"html.autoClosingTags": true,
This new feature shipped with autoClosingTags set to true by default, which was, unfortunately, a disruptive change if you were used to being able to type without random stuff being inserted into your document as a side effect.
Setting autoClosingTags to false restores the original behavior.
"html.autoClosingTags": true,
"html.autoClosingTags": true,
Does not work for me .. maybe misleading or bug
I do a workaround to change the type of the file down the editor to handlebars or another language because it was very frustrating for me that the editor insists to add something I understand I do not need like closing tag while the closing tag should be at footer file.
I am using TinyMCE 4.x version, BBCode as a source in my project. Below is the TinyMCE init code for it,
tinymce.init({
mode: "textareas",
editor_selector: "mceEditor",
resize: "both",
forced_root_block: false,
remove_redundant_brs : false,
verify_html : false,
force_br_newlines: true,
force_p_newlines: false,
remove_redundant_brs : false,
remove_linebreaks : false,
valid_elements: 'br',
plugins: ["autolink link image anchor bbcode code noneditable"],
toolbar: "bold italic link | code | bbcode",
});
If I add newline or extra line/space at the end of content and trying to get content from javascript(tinyMCE.activeEditor.getElement().val()), the content got is in trimmed form. Is there anyway to stop trimming the right trim of the content while we get content from TinyMCE?
I have tried different options from this: Linebreaks in TinyMCE editor show extra line on preview, not in code, tinymce remove text spaces and line breaks link but options does not worked for me.
Does anyone has an idea what changes that I need to make to overcome from this issue?
I had similar issue.
solved it with hakish solution ( no tinyMCE documentation for it anywhere) adding below settings inside tinymce.init({... solve the issues for me
indent_before: 'h1,h2,h3,h4,h5,h6,blockquote,div,title,style,pre,script,td,th,ul,ol,li,dl,dt,dd,area,table,thead,' +
'tfoot,tbody,tr,section,article,hgroup,aside,figure,figcaption,option,optgroup,datalist',
indent_after: 'h1,h2,h3,h4,h5,h6,blockquote,div,title,style,pre,script,td,th,ul,ol,li,dl,dt,dd,area,table,thead,' +
'tfoot,tbody,tr,section,article,hgroup,aside,figure,figcaption,option,optgroup,datalist',
whitespace_elements: 'p pre script noscript style textarea video audio iframe object code',
indent_before, indent_after - I removed the p element from that list and left all the default I have found in tinymce.js source file.
this stopped putting space before and after each p.
whitespace_elements - I added the p element to that list and left all the default I have found in tinymce.js source file. this stopped removing trainling spaces in the begining of P element
jsDoc seems to support most of the MD syntax, but when it comes to highlighting a single reserved word or text, I cannot find a usable tag for that.
In the MD syntax I can use `word`, which would set a grey background and a different font, so you can see it clearly, same as on StackOverflow - word.
In jsDoc, whether I use `word` or <code>word</code>, the effect is just setting italic style to the word, which cannot be clearly seen as a reserved word.
Is there any syntax in jsDoc to clearly highlight a word or a text string, like `some text` in MD, to look like some text?
Alternatively, is there a way to customize it - provide my own CSS for a standard MD tag?
JSDoc documentation seems to be using <code> tag, and it highlights the text using a grey background like you want by setting it on the code tag properties defined on the usejavadoc.css file:
From http://usejsdoc.org/tags-name.html:
There is a guide on how to edit or create your own JSDoc template, with a section on how to override the default template layout file:
http://usejsdoc.org/about-configuring-default-template.html#overriding-the-default-template-s-layout-file
But for something as simple as this, you don't even have to go that far. Just edit the css fragment, before or after generation, and set the background-color you want for the code tag. You may do it before generation by editing this line and setting the background color you want:
https://github.com/jsdoc3/jsdoc/blob/5a58bdf5a551844f12b46be6436aefd3c41e0393/templates/default/static/styles/jsdoc-default.css#L257
Or, if that doesn't work, overriding the property by adding
code {
background-color: #DEDEDE !important;
}
to the file.
As an alternative you can use a framework like qooxdoo to generate your documentation using JSDoc-like comments. According to their API reference you may use <pre class="javascript"> for inline javascript syntax code highlighting, and it looks pretty nice: http://manual.qooxdoo.org/3.0/pages/development/api_jsdoc_ref.html#html