[PoC] Tiptap editor no page builder

[leomp12]

https://tiptap.dev/

Como conversamos hoje, no melhor cenário conseguiríamos implementar o Tiptap no list widget variable types (configuração das sections).

Para isso teríamos que:

1. Parsear o output do Tiptap para o formato padrão do list widget variable types (array de objetos, conforme configuração do CMS) e vice-versa;
2. No editor deveria ser possível adicionar sections a partir de botões e editar HTML customizado entre as sections usando o inline editor do Tiptap.

[leomp12]

Deve ser uma implementação complexa 😬 Se de todo parecer inviável podemos pensar apenas em criar widgets específicos do Netlify CMS para cada section https://www.netlifycms.org/docs/custom-widgets/ (também trabalhoso, mas tende a ser menos complexo)

Dessa forma também conseguiríamos melhorar bastante (progressivamente, a cada widget) a UX do page builder, a principal desvantagem dessa segunda opção é que não teria inline editor e também não conseguiríamos utilizar algumas extensões legais que o Tiptap já tem...

[oscargross]

PR https://github.com/ecomplus/storefront-cms/pull/26 PoC fail 😓 A PR está bem incompleta, mas acho melhor já passar o feedback antes de testar mais e dar na mesma.

Tiptap tem muita utilidade, mas fica complexa a integração quando vemos os modelos de dados do netlify.

Tds os values são salvos apenas como texto, assim, quando é img, é salvo o path, e quando há modificações de style, elas não aparecem no widget. Essa questão complicou bastante. É formada a tag style de todo preview apenas nas abas relacionadas ao preview, sendo a tag style para todo o preview, não apenas para o field. Assim, dificultou para colocar a estilização que já estava no texto no novo field tiptap.

O ListControl, componente que trata as sections, é construído com o widget object. Este chama o modelo de Editor https://github.com/ecomplus/storefront-cms/blob/main/netlify-cms%402/packages/netlify-cms-core/src/components/Editor/Editor.js

Todos os fields das sections são repassados juntos até o Editor, e nele é realizado o map para renderizar um por um.

O Editor monta o widget conforme o seu type e cria o componente com as infos usando React.createElement https://github.com/ecomplus/storefront-cms/blob/main/netlify-cms%402/packages/netlify-cms-core/src/components/Editor/EditorControlPane/Widget.js

Assim, o controlComponent que bater com o widget em questão que será renderizado. (Pois todos os fields possuem o mesmo padrãode wigdet até seu controlComponent possuir funções a mais ou a menos, diferenciando um do outro).

Até chegar ao arquivo Widget, foram realizadas tentativas de inserir os atributos do Editor do tiptap para o widget na sua criação, após a criação ou realizada uma cópia dos parâmetros e renderizar do componente do tiptap.

Funcionou de certa forma, porém o tiptap precisa do content inicializado em formado html. Foi parseado o formato React para html, porém as funções não funcionavam corretamente. (utilizado: react-html-parser, html-react-parser e dangerouslySetInnerHTML)

Para as imagens, a estilização do lado da edição ficou ok, porém houve muito filtro para chamar o widget de img e tentar encaixá-lo no tiptap, possibilitando drag, delete diretamente na section e colocar as props de alt e time.

Outro problema foram os styles aplicados no Editor do tiptap, não era espelhados no preview, pois as sections precisam de fields para poder inserir algo, e fields do tipo text, title, number, string só possuem o que está no seu widget, o qual não tem essas props de edição de style, é bem engessado.

O único widget que possui interação é o markdown e nele já é possível adicionar html inline e imagens com mais facilidade.

💡 Minha ideia seria deixar os fields de texto mais próximos do markdown, sem a barra superior e adicionar Floating's Menu com opções de edição em html. Assim, a chamada dos widget e todo o caminho formado pelas listas (sections) para chamar seus fields não seria alterada. Caso podermos testar assim, precisaremos ver como os files ficarão (header, menu, home *.json) pois o markdown não salva td seu conteudo como html, ele coloca prefixos nos textos e apenas seu widget faz o filtro definindo o que esse prefixo significa. Ex: # // ! na frente do texto para estilizá-lo.

[leomp12]

Minha ideia seria deixar os fields de texto mais próximos do markdown, sem a barra superior e adicionar Floating's Menu com opções de edição em html.

Mas o rich text editor padrão do Netlify CMS tem isso? Já sabe qual é?

De qualquer forma nesse caso acho que o caminho é começar criando um widget do Netlify CMS para edição de cada section, o primeiro deve ser um widget pro slider de banners por exemplo.