First, don't manipulate the ProseMirror DOM as shown in the JQuery example. In fact you most likely will run into DOM or content issues. ProseMirror uses its own DOM node and markup schema. If you want to manipulate the ProseMirror DOM or add plugin then take a look at the Markup, Plugin & Node Apis. Ive attached a simple example of text align Markup code. Side note, the reason Grammarly and others don't have ProseMirror plugins is because of the DOM approach / models. I should add the ProseMirror is very good, but to be honest it is more of an advanced developer solution.
That aside, the good news the problems you have a purely CSS. ProseMirror strips out all classes and resets the DOM / CSS so if you import a document or cut and paste all / most your classes will be gone.
Simplest approach to solve that is to wrap the editor in a div and assign a class to the div then add styles and child styles to that class. The reason to wrap it is that the css selectors such as img, p, h, etc will only apply to the tags inside of the editor class. Without that you end up with obvious CSS clashes.
CSS
- Don't use flexbox for inline images as flexbox is not a grid system. In fact, if I recall you cannot inline direct children of the flex container.
- inline on p tags and img will not wrap text and you will end up with the problems listed above.
- if you want to truly wrap and remove the cursor issue your have then you need to use floats e.g.
float: left; (recommended approach)
- add small or large padding and border boxing to help with collapsing edges and also helps with separation of image and text
- the cursor problem you are experiencing is because when you inside the image block it vertically aligned to top, which you can fix with
vertical-align: baseline; but without floats you will still have a cursor that matches the height of the image and not the text. Also, if you don't use floats the cursor will be elongated as the line height is effectively the same height as the image. The blue color is just selector, which you change using CSS as well.
<html>
<div class="editor">
<!-- <editor></editor>-->
</div>
</html>
<style>
.editor {
position: relative;
display: block;
padding: 10px;
}
.editor p {
font-weight: 400;
font-size: 1rem;
font-family: Roboto, Arial, serif;
color: #777777;
display: inline;
vertical-align: baseline;
}
.editor img {
width: 50px;
float: left;
padding: 20px;
}
</style>
Node extension example
Example of Node extension for text align that can be added as a toolbar. Much longer post, but even if you did create a Node / plugin for images you have to deal with the manner in which it render i.e. base64 versus url, etc. which btw, makes perfect sense as to why they did that, but just add complexity to developers looking for SEO, etc.
export default class Paragraph extends Node {
get name() {
return 'paragraph';
}
get defaultOptions() {
return {
textAlign: ['left', 'center', 'right'],
}
}
inputRules({ type }) {
return [
markInputRule(/(?:\*\*|__)([^*_]+)(?:\*\*|__)$/, type),
]
}
get schema() {
return {
attrs: {
textAlign: {
default: 'left'
}
},
content: 'inline*',
group: 'block',
draggable: false,
inclusive: false,
defining : true,
parseDOM: [
{
tag: 'p',
style: 'text-align',
getAttrs: value => value
}
],
toDOM: (node) => [ 'p', {
style: 'text-align:' + node.attrs.textAlign,
class: `type--base type--std text-` + node.attrs.textAlign
}, 0 ]
};
}
commands ({ type }) {
return (attrs) => updateMark(type, attrs)
}
}
Testing
