Primeiro, não manipule o DOM ProseMirror conforme mostrado no exemplo JQuery. Na verdade, você provavelmente encontrará problemas de DOM ou de conteúdo. O ProseMirror usa seu próprio nó DOM e esquema de marcação. Se você deseja manipular o DOM do ProseMirror ou adicionar plug-in, consulte as Apis de marcação, plug-in e nó. Anexei um exemplo simples de código de marcação de alinhamento de texto. Nota lateral, a razão pela qual a Grammarly e outras pessoas não têm plug-ins ProseMirror é por causa da abordagem / modelos do DOM. Devo acrescentar que o ProseMirror é muito bom, mas, para ser sincero, é mais uma solução de desenvolvedor avançado.
Além disso, as boas notícias são os problemas que você possui em CSS. O ProseMirror retira todas as classes e redefine o DOM / CSS, portanto, se você importar um documento ou recortar e colar todas / quase todas as suas classes desaparecerão.
A abordagem mais simples para resolver isso é agrupar o editor em uma div e atribuir uma classe à div e, em seguida, adicionar estilos e estilos filhos a essa classe. O motivo para empacotá-lo é que os seletores de css, como img, p, h, etc, serão aplicados apenas às tags dentro da classe do editor. Sem isso, você acaba com conflitos óbvios de CSS.
CSS
- Não use o flexbox para imagens embutidas, pois o flexbox não é um sistema de grade. De fato, se bem me lembro, você não pode incorporar filhos diretos do contêiner flex.
- inline nas tags p e img não quebrará o texto e você terá os problemas listados acima.
- se você deseja realmente envolver e remover o problema do cursor, precisará usar flutuadores, por exemplo
float: left;(abordagem recomendada)
- adicione preenchimento pequeno ou grande e boxe de borda para ajudar a diminuir as bordas e também ajuda na separação de imagem e texto
- o problema do cursor que você está enfrentando é porque, quando você dentro do bloco da imagem está alinhado verticalmente ao topo, com o qual você pode corrigir,
vertical-align: baseline;mas sem flutuadores, você ainda terá um cursor que corresponde à altura da imagem e não ao texto. Além disso, se você não usar flutuadores, o cursor será alongado, pois a altura da linha é efetivamente a mesma da imagem. A cor azul é apenas seletor, que você altera usando CSS também.
<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>
Exemplo de extensão de nó
Exemplo de extensão de nó para alinhamento de texto que pode ser adicionado como uma barra de ferramentas. Postagem muito mais longa, mas mesmo que você tenha criado um Nó / plug-in para imagens, terá que lidar com a maneira pela qual ele renderiza, por exemplo, base64 versus url etc., etc. complexidade para desenvolvedores que procuram 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)
}
}
<div contenteditable>Test text<img src="https://upload.wikimedia.org/wikipedia/en/9/9b/Yoda_Empire_Strikes_Back.png">Testing</div>. Agora, é assim que eles fazem isso, atualmente não há especificações sobre isso, então eles são livres para fazer o que acham melhor. Você absolutamente precisa dessas bibliotecas, ou uma solução bruta é suficiente para você?