chore: fix markdown styles (#36959)
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Updated Markdown rendering components to streamline available elements. - **Bug Fixes** - Adjusted CSS styles for lists and anchor tags to improve layout and appearance. - **Chores** - Removed unused components related to paragraphs and lists to enhance code maintainability. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
parent
faed301e32
commit
5e4b026452
|
|
@ -2,8 +2,6 @@ import type { Components } from "react-markdown";
|
||||||
|
|
||||||
import { a } from "./mdComponents/Link";
|
import { a } from "./mdComponents/Link";
|
||||||
import { code } from "./mdComponents/Code";
|
import { code } from "./mdComponents/Code";
|
||||||
import { p } from "./mdComponents/Paragraph";
|
|
||||||
import { ul, ol, li } from "./mdComponents/List";
|
|
||||||
import { h1, h2, h3, h4, h5, h6 } from "./mdComponents/Heading";
|
import { h1, h2, h3, h4, h5, h6 } from "./mdComponents/Heading";
|
||||||
|
|
||||||
export const components: Components = {
|
export const components: Components = {
|
||||||
|
|
@ -14,9 +12,5 @@ export const components: Components = {
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6,
|
h6,
|
||||||
p,
|
|
||||||
ul,
|
|
||||||
ol,
|
|
||||||
li,
|
|
||||||
code,
|
code,
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import type { ExtraProps } from "react-markdown";
|
|
||||||
|
|
||||||
type ULProps = React.ClassAttributes<HTMLUListElement> &
|
|
||||||
React.HTMLAttributes<HTMLUListElement> &
|
|
||||||
ExtraProps;
|
|
||||||
|
|
||||||
export const ul = (props: ULProps) => {
|
|
||||||
const { children } = props;
|
|
||||||
|
|
||||||
return <ul data-component="ul">{children}</ul>;
|
|
||||||
};
|
|
||||||
|
|
||||||
type LIProps = React.ClassAttributes<HTMLLIElement> &
|
|
||||||
React.HTMLAttributes<HTMLLIElement> &
|
|
||||||
ExtraProps;
|
|
||||||
|
|
||||||
export const li = (props: LIProps) => {
|
|
||||||
const { children } = props;
|
|
||||||
|
|
||||||
return <li>{children}</li>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ol = (props: ULProps) => {
|
|
||||||
const { children } = props;
|
|
||||||
|
|
||||||
return <ol data-component="ol">{children}</ol>;
|
|
||||||
};
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
import React, { type Ref } from "react";
|
|
||||||
import { Text } from "@appsmith/wds";
|
|
||||||
import type { ExtraProps } from "react-markdown";
|
|
||||||
|
|
||||||
type ParagraphProps = React.ClassAttributes<HTMLDivElement> &
|
|
||||||
React.HTMLAttributes<HTMLDivElement> &
|
|
||||||
ExtraProps;
|
|
||||||
|
|
||||||
export const p = (props: ParagraphProps) => {
|
|
||||||
const { children, ref } = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Text
|
|
||||||
color="neutral"
|
|
||||||
data-component="p"
|
|
||||||
ref={ref as Ref<HTMLDivElement>}
|
|
||||||
size="body"
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</Text>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -74,26 +74,23 @@
|
||||||
margin-bottom: var(--inner-spacing-1);
|
margin-bottom: var(--inner-spacing-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-component="p"] {
|
|
||||||
margin-bottom: var(--inner-spacing-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Lists */
|
/* Lists */
|
||||||
:is(ul, ol) {
|
:is(ul, ol) {
|
||||||
margin-top: var(--inner-spacing-2);
|
margin-top: var(--inner-spacing-2);
|
||||||
margin-bottom: var(--inner-spacing-4);
|
margin-bottom: var(--inner-spacing-3);
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
list-style: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
margin-bottom: var(--inner-spacing-2);
|
margin-bottom: var(--inner-spacing-2);
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
list-style-type: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-component="a"]:before,
|
a {
|
||||||
[data-component="a"]:after {
|
display: inline-block;
|
||||||
content: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-component="code"] {
|
[data-component="code"] {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user