prime icon indicating copy to clipboard operation
prime copied to clipboard

feat(field): add prime-field-richtext

Open intellix opened this issue 5 years ago • 2 comments

Still a work in progress but wanted to push what I have so far. I basically copy/pasted prime-field-string and started deleting and adding stuff to get it to work.

Thoughts:

  • I had to create a resolution for @types/react because of an error after installing new stuff
  • Needed to use https://github.com/sstur/draft-js-utils for exporting/importing because markdown-draft-js doesn't hydrate fully and you're unable to extract HTML from that ContentState. It's probably possible to replace markdown-draft-js completely but there were different options and didn't wanna change too much yet
  • When extracting to HTML I'm noticing \n in the HTML and I think it's because storing Markdown as opposed to Raw Draft ContentState is lossy. We should probably store that instead and use it for switching between the various exports: html, markdown, text
  • I think ts-node-dev would be nice to reload Core upon updating on changes

Let me know what you think or if you have any ideas. I'm coming from Angular and it's my first time in the React ecosystem so go easy on me :)

Currently works somewhat: Screenshot 2019-05-17 18 02 43

Closes #197

intellix avatar May 17 '19 09:05 intellix

@birkir I've had a play with swapping out markdown-draft-js for both:

  • draft-js-import-markdown
  • draft-js-export-markdown

It looks like the two above convert into DraftJS ContentState but markdown-draft-js doesn't quite export into the same format. More into a near-format

When trying to investigate further into BraftEditor about why it doesn't take standard ContentState it seems like it's basically a forked DraftJS that's written by a Chinese guy with the entire repository being written in Chinese (content, issues etc). Is there any reason to favour it over DraftJS? When needed there won't be anyone able to communicate or read documentation for Braft as opposed to Draft. I'm new to this scene and it's ecosystem so I've no experience between the various react editors and their limitations.

I saw that Braft supports exporting to HTML so tried to use it for exporting HTML in Core but then faced errors about missing window when trying something like:

const contentState = BraftEditor.createEditorState(markdownToDraft(source, markdownConfig));
return contentState.toHTML();

I'd say that Braft only works in the browser and isn't meant to be used within Node.

Thoughts?

intellix avatar May 20 '19 12:05 intellix

Nice work Dominic, I'll have a go with this and see how it looks

birkir avatar May 20 '19 18:05 birkir