diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index aa94af5b5..a91a14941 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,30 +1,30 @@ - + \ No newline at end of file diff --git a/lib/experimental/Information/Communities/Post/CommunityPost/index.stories.tsx b/lib/experimental/Information/Communities/Post/CommunityPost/index.stories.tsx index f7b77501b..fafd08731 100644 --- a/lib/experimental/Information/Communities/Post/CommunityPost/index.stories.tsx +++ b/lib/experimental/Information/Communities/Post/CommunityPost/index.stories.tsx @@ -34,8 +34,7 @@ export const Default: Story = { }, createdAt: subMonths(new Date(), 1), title: "Title", - description: - "Description with a maximum of two lines visible.
Like this one :)
This shouldn't be visible", + description: `

Super Kudos for First Employee and Second Employee , who always are available to help in any way they can and as quickly as possible. You guys are great! ⭐

Including some link here too: randomemail@factorial.co

`, onClick: () => {}, imageUrl: "https://multimedia.andalucia.org/media/0BC700DB844F4EDFBE00C1FA9B493D71/img/1112772E6D5945A1B89C26E539DD0D99/SE_Catedral_01.jpg?responsive", diff --git a/lib/experimental/Information/Communities/Post/CommunityPost/index.tsx b/lib/experimental/Information/Communities/Post/CommunityPost/index.tsx index 8c304c411..f6440100f 100644 --- a/lib/experimental/Information/Communities/Post/CommunityPost/index.tsx +++ b/lib/experimental/Information/Communities/Post/CommunityPost/index.tsx @@ -7,6 +7,7 @@ import { EllipsisHorizontal } from "@/icons/app" import { getAgo } from "@/lib/date" import { withSkeleton } from "@/lib/skeleton" import { Skeleton } from "@/ui/skeleton" +import { PostDescription } from "../PostDescription" import { PostEvent, PostEventProps } from "../PostEvent" type CommunityPostProps = { @@ -138,12 +139,7 @@ export const BaseCommunityPost = ({

{title}

- {description && ( -

- )} + {description && }

{imageUrl && !event && ( diff --git a/lib/experimental/Information/Communities/Post/PostDescription/TextEditorTheme.css b/lib/experimental/Information/Communities/Post/PostDescription/TextEditorTheme.css new file mode 100644 index 000000000..0946c530b --- /dev/null +++ b/lib/experimental/Information/Communities/Post/PostDescription/TextEditorTheme.css @@ -0,0 +1,220 @@ +.TextEditor { + @apply leading-6; +} + +.TextEditorTheme__ltr { + @apply text-left; +} + +.TextEditorTheme__rtl { + @apply text-right; +} + +.TextEditorTheme__paragraph { + @apply relative m-0 mb-2; +} + +.TextEditorTheme__paragraph:last-child { + @apply mb-0; +} + +.TextEditorTheme__quote { + @apply m-0 mb-2.5 ml-5 border-b-4 pl-4; + color: rgb(101, 103, 107); + border-left-color: rgb(206, 208, 212); +} + +.TextEditorTheme__h1 { + @apply m-0 mb-3 p-0 text-xl font-semibold; +} + +.TextEditorTheme__h2 { + @apply m-0 mt-2.5 p-0 text-lg; +} + +.TextEditorTheme__h3 { + @apply m-0 mt-2.5 p-0; +} + +.TextEditorTheme__textBold { + @apply font-semibold; +} + +.TextEditorTheme__textItalic { + @apply italic; +} + +.TextEditorTheme__textUnderline { + @apply underline; +} + +.TextEditorTheme__textStrikethrough { + @apply line-through; +} + +.TextEditorTheme__textUnderlineStrikethrough { + text-decoration: underline line-through; +} + +.TextEditorTheme__textSubscript { + vertical-align: sub !important; +} + +.TextEditorTheme__textSuperscript { + vertical-align: super; +} + +.TextEditorTheme__textCode { + background-color: rgb(240, 242, 245); + padding: 1px 0.25rem; + font-family: Menlo, Consolas, Monaco, monospace; +} + +.TextEditorTheme__hashtag { + @apply rounded-xs bg-f1-background-info px-0.5 py-0.5 font-medium text-f1-foreground-info no-underline; +} + +.TextEditorTheme__link { + @apply font-medium text-f1-link; +} + +.TextEditorTheme__link:hover { + @apply underline; +} + +.TextEditorTheme__code { + @apply mx-0 my-2 p-2 pl-10; + background-color: rgb(240, 242, 245); + font-family: Menlo, Consolas, Monaco, monospace; + display: block; + line-height: 1.53; + tab-size: 2; + /* white-space: pre; */ + overflow-x: auto; + position: relative; +} + +.TextEditorTheme__code:before { + content: attr(data-gutter); + position: absolute; + background-color: #eee; + left: 0; + top: 0; + border-right: 1px solid #ccc; + padding: 8px; + color: #777; + white-space: pre-wrap; + text-align: right; + min-width: 25px; +} + +.TextEditorTheme__code:after { + content: attr(data-highlight-language); + top: 0; + right: 3px; + padding: 3px; + text-transform: uppercase; + position: absolute; + color: rgba(0, 0, 0, 0.5); +} + +.TextEditorTheme__characterLimit { + display: inline; + background-color: #ffbbbb !important; +} + +.TextEditorTheme__ol1 { + @apply m-0 ml-4 p-0; +} + +.TextEditorTheme__ol2 { + @apply m-0 ml-4 p-0; + list-style-type: upper-alpha; +} + +.TextEditorTheme__ol3 { + @apply m-0 ml-4 p-0; + list-style-type: lower-alpha; +} + +.TextEditorTheme__ol4 { + @apply m-0 ml-4 p-0; + list-style-type: upper-roman; +} + +.TextEditorTheme__ol5 { + @apply m-0 ml-4 p-0; + list-style-type: lower-roman; +} + +.TextEditorTheme__ul { + @apply m-0 ml-4 p-0; + list-style: disc; +} + +.TextEditorTheme__tokenComment { + color: slategray; +} + +.TextEditorTheme__tokenPunctuation { + color: #999; +} + +.TextEditorTheme__tokenProperty { + color: #905; +} + +.TextEditorTheme__tokenSelector { + color: #690; +} + +.TextEditorTheme__tokenOperator { + color: #9a6e3a; +} + +.TextEditorTheme__tokenAttr { + color: #07a; +} + +.TextEditorTheme__tokenVariable { + color: #e90; +} + +.TextEditorTheme__tokenFunction { + color: #dd4a68; +} + +.TextEditorTheme__mark { + background: rgba(255, 212, 0, 0.14); + border-bottom: 2px solid rgba(255, 212, 0, 0.3); + padding-bottom: 2px; +} + +.TextEditorTheme__markOverlap { + background: rgba(255, 212, 0, 0.3); + border-bottom: 2px solid rgba(255, 212, 0, 0.7); +} + +.TextEditorTheme__mark.selected { + background: rgba(255, 212, 0, 0.5); + border-bottom: 2px solid rgba(255, 212, 0, 1); +} + +.TextEditorTheme__markOverlap.selected { + background: rgba(255, 212, 0, 0.7); + border-bottom: 2px solid rgba(255, 212, 0, 0.7); +} + +.mention a, +.mentioned a { + @apply rounded-xs bg-f1-background-accent px-1.5 py-0.5 font-medium text-f1-foreground-accent no-underline; +} + +.mention:focus a, +.mentioned:focus a { + @apply outline outline-1 outline-offset-1 outline-f1-border-selected-bold; +} + +.link_mentioned { + text-decoration: none; +} diff --git a/lib/experimental/Information/Communities/Post/PostDescription/index.stories.tsx b/lib/experimental/Information/Communities/Post/PostDescription/index.stories.tsx new file mode 100644 index 000000000..26b870fee --- /dev/null +++ b/lib/experimental/Information/Communities/Post/PostDescription/index.stories.tsx @@ -0,0 +1,107 @@ +import type { Meta, StoryObj } from "@storybook/react" +import { PostDescription } from "." + +const meta: Meta = { + component: PostDescription, +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + decorators: [ + (Story) => ( +
+ +
+ ), + ], + args: { + content: ` +

Welcome to Our Text Editor!

+

Overview

+

+ This editor is packed with features to style your text effortlessly. Explore the amazing formatting options, from bold, italic, and underline to more advanced text styles like strikethrough or combined underline and strikethrough. +

+
+ "Text editing made simpler and more beautiful." - A Happy User +
+

Features

+

+ You can include: +

    +
  1. Ordered lists with regular numbering.
    2. +
  2. Sub-lists with upper-alphabet.
    3. +
  3. Sub-lists with lower-alphabet.
    4. +
+ +

+

Code Snippets

+
+ + <div> + <p>Example Code</p> + </div> + +
+

+ Use inline code formatting for specific keywords. +

+

Special Mentions

+

+ Kudos to our outstanding employees: + + First Employee + + and + + Second Employee + + for their consistent excellence. +

+

+ Highlighted text: + Important! + Overlapping highlights: + Critical! +

+

Links and Hashtags

+

+ Reach out via email: + randomemail@factorial.co + or use + #FactorialHelp. +

+

+ Thanks for using our editor. Happy editing! +

+ `, + }, +} + +export const Collapsed: Story = { + args: { + ...Default.args, + collapsed: true, + }, +} + +// type SkeletonStory = StoryObj + +// export const Skeleton: SkeletonStory = { +// decorators: [ +// (Story) => ( +//
+// +//
+// ), +// ], +// args: { +// withEvent: true, +// }, +// render: (args) => , +// } diff --git a/lib/experimental/Information/Communities/Post/PostDescription/index.tsx b/lib/experimental/Information/Communities/Post/PostDescription/index.tsx new file mode 100644 index 000000000..601cfc60c --- /dev/null +++ b/lib/experimental/Information/Communities/Post/PostDescription/index.tsx @@ -0,0 +1,35 @@ +import { withSkeleton } from "@/lib/skeleton" +import { cn } from "@/lib/utils" +import { Skeleton } from "@/ui/skeleton" +import "./TextEditorTheme.css" + +export default {} + +type PostDescriptionProps = { + content: string + collapsed?: boolean +} + +export const BasePostDescription = ({ + content, + collapsed, +}: PostDescriptionProps) => { + return ( +
+ ) +} + +export const PostDescriptionSkeleton = () => ( +
+ + +
+) + +export const PostDescription = withSkeleton( + BasePostDescription, + PostDescriptionSkeleton +)