feat(article): Add MD support #1451

WaDadidou · 2024-12-09T17:53:09Z

Needs, todos, etc => https://hackmd.io/@9Oh5kimjS1SP8xUWU_-Ovg/HkcuBoN4yx

We use this library to generate HTML from Markdown syntax: https://github.com/markdown-it/markdown-it
We use this library to render the HTML into JSX: https://github.com/meliorence/react-native-render-html

MarkdownIt

Here, we initialize MarkdownIt with some parameters, and use the Article message to render HTML: https://github.com/TERITORI/teritori-dapp/blob/feat-feed-article-markdown/packages/screens/FeedNewArticle/components/ArticleContentEditor/ArticleContentEditor.tsx#L53
We use the same MarkdownIt parameters at Article creation and Article consultation (WYSIWYG).

RenderHtml

We pass custom styles to RenderHtml. Each style item correspond to an html tag. So, there are a lot of customisable styles. We could customise the most used only: https://github.com/TERITORI/teritori-dapp/blob/feat-feed-article-markdown/packages/screens/FeedNewArticle/components/ArticleContentEditor/ArticleContentEditor.tsx#L169
Here are the currently customized styles: https://github.com/TERITORI/teritori-dapp/blob/feat-feed-article-markdown/packages/screens/FeedNewArticle/components/ArticleContentEditor/utils.ts#L14-L112

netlify · 2024-12-09T17:53:28Z

✅ Deploy Preview for gno-dapp ready!

Name	Link
🔨 Latest commit	`c2b53ba`
🔍 Latest deploy log	https://app.netlify.com/sites/gno-dapp/deploys/676f14304770bb0008098fed
😎 Deploy Preview	https://deploy-preview-1451--gno-dapp.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-12-09T17:53:29Z

✅ Deploy Preview for teritori-dapp ready!

Name	Link
🔨 Latest commit	`c2b53ba`
🔍 Latest deploy log	https://app.netlify.com/sites/teritori-dapp/deploys/676f1430e72e3e00084c63ba
😎 Deploy Preview	https://deploy-preview-1451--teritori-dapp.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

packages/components/socialFeed/SocialCard/cards/SocialArticleCard.tsx

packages/components/socialFeed/NewsFeed/NewsFeedInput.tsx

…cle tools

…t title numberOfLines

packages/screens/FeedNewArticle/components/ArticleContentEditor/utils.ts

clegirar · 2024-12-16T20:09:54Z

In term of UI what do you think about show borders for the editor and the preview ?

clegirar · 2024-12-16T20:13:13Z

packages/screens/FeedNewArticle/FeedNewArticleScreen.tsx

  return (
    <ScreenContainer
      forceNetworkFeatures={[forceNetworkFeature]}
      responsive
      mobileTitle="NEW ARTICLE"
      fullWidth
-      headerChildren={<ScreenTitle>New Article</ScreenTitle>}


Please keep ScreenTitle to be consistent with the new title UI

9c4bf23
Thx for this new component btw ^^

clegirar · 2024-12-16T20:15:30Z

packages/screens/FeedNewArticle/FeedNewArticleScreen.tsx

-            control={control}
-            rules={{
-              required: true,
+          <TextInputCustom<NewArticleFormValues>


We should avoid at maximum custom components, if it's not possible nevermind but we should trying to be consistent imo

I don't agree. I think it's better to have our custom versions of RN components, to centralize styles and logics.
(Especially with forms)
Just for this example, it's heavy to re-handle <Label/>, onHover, form control, all the feedbacks, in many components, it's better to factorize.
Maybe the term "custom" is not good ? How to name our Teritori components ?
But TextInputCustom needs some refacto, it's a mess...

clegirar · 2024-12-16T20:18:46Z

In term of behvior found that enough for a first version and we can iterate on add styles just after.
Cool to see this first version 🙂

MikaelVallenet · 2024-12-16T20:37:10Z

Would be nice to highlight the selected mode

MikaelVallenet · 2024-12-16T20:39:52Z

it would also be nice (in another PR since it's not the scope) but to use the start of the article to make a preview subtitle and let it optional to write a custom preview, if you agree i will open a new issue

WaDadidou · 2024-12-16T22:42:42Z

@clegirar

In term of UI what do you think about show borders for the editor and the preview ?

If you talk about the white borders, it's the same behavior than on other inputs.

I try to put this behavior on each input, I love this UI that highlights interactive elements on hover such as inputs or buttons.. In mobile format, I removed the white borders padding, because there is no hover.

If to talk about a separation between preview and edition, why not adding one, yes :) Personnaly I prefer pure without separation, it's enough excplicit

WaDadidou · 2024-12-16T22:57:47Z

Would be nice to highlight the selected mode

@MikaelVallenet @clegirar

These are draft buttons, I'm looking for better buttons, an other style for these buttons, maybe with icons, something cute.
I'll restyle these buttons

packages/utils/feed/markdown.ts

MikaelVallenet · 2024-12-17T10:38:35Z

@clegirar

In term of UI what do you think about show borders for the editor and the preview ?

If you talk about the white borders, it's the same behavior than on other inputs.

I try to put this behavior on each input, I love this UI that highlights interactive elements on hover such as inputs or buttons.. In mobile format, I removed the white borders padding, because there is no hover.

If to talk about a separation between preview and edition, why not adding one, yes :) Personnaly I prefer pure without separation, it's enough excplicit

i think we mean don't just show the border on hover and only when hover but always show a border, the border could become fully white on hover and be gray when not hover but for now when you don't hover the input, the input is mix with background making it impossible to know what is the border of the input

clegirar · 2024-12-17T10:44:43Z

I don't have final opinion on border, in fact you can do as you want, i think it can be discuss later because it could be nice to merge it asap 👍

n0izn0iz · 2024-12-17T10:57:24Z

packages/components/socialFeed/SocialCard/cards/SocialArticleMarkdownCard.tsx

+      windowWidth < RESPONSIVE_BREAKPOINT_S ? 0 : SOCIAl_CARD_BORDER_RADIUS;
+
+    const metadata = zodTryParseJSON(
+      ZodSocialFeedArticleMetadata,


we shouldn't reuse the old type for the new article kind IMO
so create a new schema ZodSocialFeedArticleMarkdownMetadata

I agree, but we didn't discuss about the new shape. I don't want to commit, then fix the review, then commit, then fix the review, etc. We need to status on that once

okay, can you duplicate the schema for now please?

packages/components/socialFeed/SocialCard/cards/SocialArticleMarkdownCard.tsx

WaDadidou · 2024-12-18T15:07:30Z

it would also be nice (in another PR since it's not the scope) but to use the start of the article to make a preview subtitle and let it optional to write a custom preview, if you agree i will open a new issue

@MikaelVallenet , it was an idea at start: Using the first image as "cover image", the first h1 as title and first text under h1 as subtitle. We don't have "cover image" anymore since the user can just add an image before the h1 with markdown.

The "automatic title and subtitle" was not good with the old Article version.

We should put the preview after the content writting. It needs another PR maybe

WaDadidou · 2024-12-18T15:37:14Z

@clegirar @MikaelVallenet

i think we mean don't just show the border on hover and only when hover but always show a border, the border could become fully white on hover and be gray when not hover but for now when you don't hover the input, the input is mix with background making it impossible to know what is the border of the input

Ok I see, letting the input borders always visible as other inputs. I would like to let it epurated, I have some arguments, but it's better to debate in vocal IMO.
I show the border to have the same style than other inputs
1eff178#diff-a5f2107cc7dca5518dcf10f5760a01297a4f825a471c8d11a0102e6c944c39f0R118

WaDadidou · 2024-12-18T16:59:45Z

@MikaelVallenet
I made that. With hovered style and selected style

I reused these boxes to harmoinze visually, we could change, etc

9c42f45#diff-33ab4e16a7693f5368d5ec3b64f8b8b182598fc5b91135abcc0c228bbeac6f69R1-R74

…kdown

…using domVisitors prop

hthieu1110 · 2024-12-28T13:07:10Z

packages/components/gradientText/GradientText.tsx

@@ -123,6 +123,8 @@ const gradient = (type: GradientType): LinearGradientProps => {
      return getMapPostTextGradient(PostCategory.Normal);
    case getMapPostTextGradientType(PostCategory.Article):
      return getMapPostTextGradient(PostCategory.Article);
+    case getMapPostTextGradientType(PostCategory.ArticleMarkdown):
+      return getMapPostTextGradient(PostCategory.Article);


Is this on purpose ?

n0izn0iz requested changes Dec 10, 2024

View reviewed changes

packages/components/socialFeed/SocialCard/cards/SocialArticleCard.tsx Show resolved Hide resolved

packages/components/socialFeed/NewsFeed/NewsFeedInput.tsx Outdated Show resolved Hide resolved

WaDadidou added 6 commits December 11, 2024 19:53

wip(article): Add MD support

b96c8a6

wip(article): Shrink content input

54af815

wip(article): Handle local images

fd54612

wip(article): Change lib for markdown render

78fb7e1

wip(article): Fix styles, looks good, remove unused libs, remove Arti…

3ea76d0

…cle tools

feat(article): Integrate Article MD creation and consultation

271f701

WaDadidou force-pushed the feat-feed-article-markdown branch from 12ef521 to 271f701 Compare December 12, 2024 00:53

WaDadidou changed the title ~~wip(article): Add MD support~~ feat(article): Add MD support Dec 12, 2024

WaDadidou marked this pull request as ready for review December 12, 2024 00:54

chore: yarn install

b6ec92f

WaDadidou force-pushed the feat-feed-article-markdown branch from 2bb197f to a8cab39 Compare December 12, 2024 01:34

fix(article): fix CI

6408c7a

WaDadidou force-pushed the feat-feed-article-markdown branch from a8cab39 to 6408c7a Compare December 12, 2024 01:50

WaDadidou and others added 3 commits December 12, 2024 13:19

fix(article): ArticleMarkdown md consultation, fix also ArticleMapPos…

91187c6

…t title numberOfLines

Merge branch 'main' into feat-feed-article-markdown

d82e7a7

Merge branch 'main' into feat-feed-article-markdown

28d91d1

n0izn0iz reviewed Dec 13, 2024

View reviewed changes

packages/screens/FeedNewArticle/components/ArticleContentEditor/utils.ts Outdated Show resolved Hide resolved

clegirar requested changes Dec 16, 2024

View reviewed changes

fix(article-md): Instantiate once markdownit

015b7de

fix(article-md): Use new cpt ScreenTitle

9c4bf23

n0izn0iz requested changes Dec 17, 2024

View reviewed changes

packages/utils/feed/markdown.ts Outdated Show resolved Hide resolved

n0izn0iz requested changes Dec 17, 2024

View reviewed changes

WaDadidou added 9 commits December 18, 2024 12:08

fix(articles): Style ul, style mode buttons, remove ipfs url hack

9c42f45

fix(articles): Show border on article content input

1eff178

chore(articles): Remove useless variable

abae215

fix(articles): Few design modifs

af89a05

Merge remote-tracking branch 'origin/main' into feat-feed-article-mar…

74ad2d9

…kdown

chore: yarn lint-fix

1978419

chore(lauchpad): Use ArticleMarkdown types

0aae569

fix(article-md): customize styles

d85401b

fix(article-md): fix import

e19e7a8

WaDadidou requested review from n0izn0iz and clegirar December 23, 2024 20:23

WaDadidou added enhancement New feature or request UX/UI Social Feed Everything related to the Social Feed labels Dec 23, 2024

fix(article-md): remove marginBottom from blockquote > p:first-child …

c2b53ba

…using domVisitors prop

hthieu1110 reviewed Dec 28, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(article): Add MD support #1451

feat(article): Add MD support #1451

WaDadidou commented Dec 9, 2024 •

edited

Loading

netlify bot commented Dec 9, 2024 •

edited

Loading

netlify bot commented Dec 9, 2024 •

edited

Loading

clegirar commented Dec 16, 2024

clegirar Dec 16, 2024

WaDadidou Dec 16, 2024

clegirar Dec 16, 2024

WaDadidou Dec 16, 2024 •

edited

Loading

clegirar commented Dec 16, 2024

MikaelVallenet commented Dec 16, 2024

MikaelVallenet commented Dec 16, 2024

WaDadidou commented Dec 16, 2024 •

edited

Loading

WaDadidou commented Dec 16, 2024 •

edited

Loading

MikaelVallenet commented Dec 17, 2024 •

edited

Loading

clegirar commented Dec 17, 2024

n0izn0iz Dec 17, 2024 •

edited

Loading

WaDadidou Dec 18, 2024

n0izn0iz Dec 18, 2024

WaDadidou Dec 20, 2024

WaDadidou commented Dec 18, 2024

WaDadidou commented Dec 18, 2024 •

edited

Loading

WaDadidou commented Dec 18, 2024 •

edited

Loading

hthieu1110 Dec 28, 2024

feat(article): Add MD support #1451

Are you sure you want to change the base?

feat(article): Add MD support #1451

Conversation

WaDadidou commented Dec 9, 2024 • edited Loading

MarkdownIt

RenderHtml

netlify bot commented Dec 9, 2024 • edited Loading

✅ Deploy Preview for gno-dapp ready!

netlify bot commented Dec 9, 2024 • edited Loading

✅ Deploy Preview for teritori-dapp ready!

clegirar commented Dec 16, 2024

clegirar Dec 16, 2024

Choose a reason for hiding this comment

WaDadidou Dec 16, 2024

Choose a reason for hiding this comment

clegirar Dec 16, 2024

Choose a reason for hiding this comment

WaDadidou Dec 16, 2024 • edited Loading

Choose a reason for hiding this comment

clegirar commented Dec 16, 2024

MikaelVallenet commented Dec 16, 2024

MikaelVallenet commented Dec 16, 2024

WaDadidou commented Dec 16, 2024 • edited Loading

WaDadidou commented Dec 16, 2024 • edited Loading

MikaelVallenet commented Dec 17, 2024 • edited Loading

clegirar commented Dec 17, 2024

n0izn0iz Dec 17, 2024 • edited Loading

Choose a reason for hiding this comment

WaDadidou Dec 18, 2024

Choose a reason for hiding this comment

n0izn0iz Dec 18, 2024

Choose a reason for hiding this comment

WaDadidou Dec 20, 2024

Choose a reason for hiding this comment

WaDadidou commented Dec 18, 2024

WaDadidou commented Dec 18, 2024 • edited Loading

WaDadidou commented Dec 18, 2024 • edited Loading

hthieu1110 Dec 28, 2024

Choose a reason for hiding this comment

WaDadidou commented Dec 9, 2024 •

edited

Loading

netlify bot commented Dec 9, 2024 •

edited

Loading

netlify bot commented Dec 9, 2024 •

edited

Loading

WaDadidou Dec 16, 2024 •

edited

Loading

WaDadidou commented Dec 16, 2024 •

edited

Loading

WaDadidou commented Dec 16, 2024 •

edited

Loading

MikaelVallenet commented Dec 17, 2024 •

edited

Loading

n0izn0iz Dec 17, 2024 •

edited

Loading

WaDadidou commented Dec 18, 2024 •

edited

Loading

WaDadidou commented Dec 18, 2024 •

edited

Loading