diff --git a/ui/components/ContextItem.tsx b/ui/components/ContextItem.tsx index 7ce93b9..87dfed4 100644 --- a/ui/components/ContextItem.tsx +++ b/ui/components/ContextItem.tsx @@ -2,7 +2,7 @@ import React from "react"; import Image from "next/image"; import { ReactMarkdown } from "@/components/Markdown"; -interface ContextItemProps { +interface ContextItemProperties { item: { name: string; url: string; @@ -16,7 +16,7 @@ interface ContextItemProps { }; } -const ContextItem: React.FC = ({ item }) => { +const ContextItem: React.FC = ({ item }) => { return (

{item.name}

diff --git a/ui/components/Markdown/NodesRenderer.tsx b/ui/components/Markdown/NodesRenderer.tsx index d06ea78..f3789b2 100644 --- a/ui/components/Markdown/NodesRenderer.tsx +++ b/ui/components/Markdown/NodesRenderer.tsx @@ -5,30 +5,30 @@ import React from "react"; import type { INodeRenderer, INodeRendererMap } from "./context"; import { useNodeRendererContext } from "./context"; -export interface INodesRendererProps { +export interface INodesRendererProperties { /** * Ast nodes. */ nodes?: Node[]; } -export const NodesRenderer: React.FC = props => { - const { nodes } = props; +export const NodesRenderer: React.FC = properties => { + const { nodes } = properties; const { viewmodel } = useNodeRendererContext(); const rendererMap: Readonly = useStateValue(viewmodel.rendererMap$); if (!Array.isArray(nodes) || nodes.length <= 0) return ; return ; }; -interface IProps { +interface IProperties { nodes: Node[]; rendererMap: Readonly; } -class NodesRendererInner extends React.Component { - public override shouldComponentUpdate(nextProps: Readonly): boolean { - const props = this.props; - return !isEqual(props.nodes, nextProps.nodes) || props.rendererMap !== nextProps.rendererMap; +class NodesRendererInner extends React.Component { + public override shouldComponentUpdate(nextProperties: Readonly): boolean { + const properties = this.props; + return !isEqual(properties.nodes, nextProperties.nodes) || properties.rendererMap !== nextProperties.rendererMap; } public override render(): React.ReactElement { diff --git a/ui/components/Markdown/ReactMarkdown.tsx b/ui/components/Markdown/ReactMarkdown.tsx index 0704481..4487958 100644 --- a/ui/components/Markdown/ReactMarkdown.tsx +++ b/ui/components/Markdown/ReactMarkdown.tsx @@ -14,7 +14,7 @@ import { NodesRenderer } from "./NodesRenderer"; import { parser } from "./parser"; import { buildNodeRendererMap } from "./renderer"; -export interface IMarkdownProps { +export interface IMarkdownProperties { /** * Text content of markdown. */ @@ -52,7 +52,7 @@ export interface IMarkdownProps { style?: React.CSSProperties; } -export const ReactMarkdown: React.FC = props => { +export const ReactMarkdown: React.FC = properties => { const { presetDefinitionMap, customizedRendererMap, @@ -62,15 +62,15 @@ export const ReactMarkdown: React.FC = props => { themeScheme = "lighten", className, style, - } = props; + } = properties; const ast: Root = React.useMemo(() => { const asts: Root[] = Array.isArray(text) ? text.map(t => parser.parse(t)) : [parser.parse(text)]; if (asts.length === 0) { return parser.parse(""); } const root: Root = asts[0]; - for (let i = 1; i < asts.length; ++i) { - root.children.push(...asts[i].children); + for (let index = 1; index < asts.length; ++index) { + root.children.push(...asts[index].children); } return root; }, [text]); diff --git a/ui/components/Markdown/context/viewmodel.ts b/ui/components/Markdown/context/viewmodel.ts index c76fb6c..26bb477 100644 --- a/ui/components/Markdown/context/viewmodel.ts +++ b/ui/components/Markdown/context/viewmodel.ts @@ -4,7 +4,7 @@ import type { INodeRendererMap } from "./types"; export type IReactMarkdownThemeScheme = "lighten" | "darken" | string; -export interface IReactMarkdownViewModelProps { +export interface IReactMarkdownViewModelProperties { /** * Link / Image reference definitions. */ @@ -37,10 +37,10 @@ export class ReactMarkdownViewModel extends ViewModel { public readonly showCodeLineno$: State; public readonly themeScheme$: State; - constructor(props: IReactMarkdownViewModelProps) { + constructor(properties: IReactMarkdownViewModelProperties) { super(); - const { definitionMap, rendererMap, showCodeLineno, themeScheme } = props; + const { definitionMap, rendererMap, showCodeLineno, themeScheme } = properties; this.definitionMap$ = new State(definitionMap); this.rendererMap$ = new State(rendererMap); this.showCodeLineno$ = new State(showCodeLineno); diff --git a/ui/components/Markdown/renderer/blockquote.tsx b/ui/components/Markdown/renderer/blockquote.tsx index edf253e..7e0fe1b 100644 --- a/ui/components/Markdown/renderer/blockquote.tsx +++ b/ui/components/Markdown/renderer/blockquote.tsx @@ -11,9 +11,9 @@ import { NodesRenderer } from "../NodesRenderer"; * @see https://www.npmjs.com/package/@yozora/tokenizer-blockquote */ export class BlockquoteRenderer extends React.Component
{ - public override shouldComponentUpdate(nextProps: Readonly
): boolean { - const props = this.props; - return props.children !== nextProps.children; + public override shouldComponentUpdate(nextProperties: Readonly
): boolean { + const properties = this.props; + return properties.children !== nextProperties.children; } public override render(): React.ReactElement { diff --git a/ui/components/Markdown/renderer/code.tsx b/ui/components/Markdown/renderer/code.tsx index 1c27e9d..e222ada 100644 --- a/ui/components/Markdown/renderer/code.tsx +++ b/ui/components/Markdown/renderer/code.tsx @@ -10,9 +10,9 @@ import { CodeRendererInner } from "./inner/CodeRendererInner"; * @see https://www.npmjs.com/package/@yozora/tokenizer-indented-code * @see https://www.npmjs.com/package/@yozora/tokenizer-fenced-code */ -export const CodeRenderer: INodeRenderer = props => { - const { lang } = props; - const value: string = props.value.replace(/[\n\r]+$/, ""); // Remove trailing line endings. +export const CodeRenderer: INodeRenderer = properties => { + const { lang } = properties; + const value: string = properties.value.replace(/[\n\r]+$/, ""); // Remove trailing line endings. const { viewmodel } = useNodeRendererContext(); const preferCodeWrap: boolean = useStateValue(viewmodel.preferCodeWrap$); diff --git a/ui/components/Markdown/renderer/delete.tsx b/ui/components/Markdown/renderer/delete.tsx index 3bae1a7..5663293 100644 --- a/ui/components/Markdown/renderer/delete.tsx +++ b/ui/components/Markdown/renderer/delete.tsx @@ -11,9 +11,9 @@ import { NodesRenderer } from "../NodesRenderer"; * @see https://www.npmjs.com/package/@yozora/tokenizer-delete */ export class DeleteRenderer extends React.Component { - public override shouldComponentUpdate(nextProps: Readonly): boolean { - const props = this.props; - return props.children !== nextProps.children; + public override shouldComponentUpdate(nextProperties: Readonly): boolean { + const properties = this.props; + return properties.children !== nextProperties.children; } public override render(): React.ReactElement { diff --git a/ui/components/Markdown/renderer/emphasis.tsx b/ui/components/Markdown/renderer/emphasis.tsx index a8f1832..ec8506e 100644 --- a/ui/components/Markdown/renderer/emphasis.tsx +++ b/ui/components/Markdown/renderer/emphasis.tsx @@ -11,9 +11,9 @@ import { NodesRenderer } from "../NodesRenderer"; * @see https://www.npmjs.com/package/@yozora/tokenizer-emphasis */ export class EmphasisRenderer extends React.Component { - public override shouldComponentUpdate(nextProps: Readonly): boolean { - const props = this.props; - return props.children !== nextProps.children; + public override shouldComponentUpdate(nextProperties: Readonly): boolean { + const properties = this.props; + return properties.children !== nextProperties.children; } public override render(): React.ReactElement { diff --git a/ui/components/Markdown/renderer/heading.tsx b/ui/components/Markdown/renderer/heading.tsx index 02a5f83..aff96a4 100644 --- a/ui/components/Markdown/renderer/heading.tsx +++ b/ui/components/Markdown/renderer/heading.tsx @@ -6,7 +6,7 @@ import { NodesRenderer } from "../NodesRenderer"; type IHeading = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; -interface IProps extends Heading { +interface IProperties extends Heading { linkIcon?: React.ReactNode; } @@ -16,14 +16,14 @@ interface IProps extends Heading { * @see https://www.npmjs.com/package/@yozora/ast#heading * @see https://www.npmjs.com/package/@yozora/tokenizer-heading */ -export class HeadingRenderer extends React.Component { - public override shouldComponentUpdate(nextProps: Readonly): boolean { - const props = this.props; +export class HeadingRenderer extends React.Component { + public override shouldComponentUpdate(nextProperties: Readonly): boolean { + const properties = this.props; return ( - props.depth !== nextProps.depth || - props.identifier !== nextProps.identifier || - props.children !== nextProps.children || - props.linkIcon !== nextProps.linkIcon + properties.depth !== nextProperties.depth || + properties.identifier !== nextProperties.identifier || + properties.children !== nextProperties.children || + properties.linkIcon !== nextProperties.linkIcon ); } diff --git a/ui/components/Markdown/renderer/image.tsx b/ui/components/Markdown/renderer/image.tsx index a39bbd9..260c29a 100644 --- a/ui/components/Markdown/renderer/image.tsx +++ b/ui/components/Markdown/renderer/image.tsx @@ -10,13 +10,20 @@ import { ImageRendererInner } from "./inner/ImageRendererInner"; * @see https://www.npmjs.com/package/@yozora/ast#image * @see https://www.npmjs.com/package/@yozora/tokenizer-image */ -export const ImageRenderer: INodeRenderer = props => { - const { url: src, alt, title, srcSet, sizes, loading } = props as Image & React.ImgHTMLAttributes; +export const ImageRenderer: INodeRenderer = properties => { + const { + url: source, + alt, + title, + srcSet, + sizes, + loading, + } = properties as Image & React.ImgHTMLAttributes; return ( = props => { +export const ImageReferenceRenderer: INodeRenderer = properties => { const { viewmodel } = useNodeRendererContext(); const definitionMap: Readonly> = useStateValue(viewmodel.definitionMap$); - const { alt, srcSet, sizes, loading } = props as ImageReference & React.ImgHTMLAttributes; + const { alt, srcSet, sizes, loading } = properties as ImageReference & React.ImgHTMLAttributes; - const definition = definitionMap[props.identifier]; - const src: string = definition?.url ?? ""; + const definition = definitionMap[properties.identifier]; + const source: string = definition?.url ?? ""; const title: string | undefined = definition?.title; return ( { - public override shouldComponentUpdate(nextProps: Readonly): boolean { - const props = this.props; - return props.value !== nextProps.value; + public override shouldComponentUpdate(nextProperties: Readonly): boolean { + const properties = this.props; + return properties.value !== nextProperties.value; } public override render(): React.ReactElement { diff --git a/ui/components/Markdown/renderer/inner/CodeRendererInner.tsx b/ui/components/Markdown/renderer/inner/CodeRendererInner.tsx index 126fc0b..4cf6285 100644 --- a/ui/components/Markdown/renderer/inner/CodeRendererInner.tsx +++ b/ui/components/Markdown/renderer/inner/CodeRendererInner.tsx @@ -4,7 +4,7 @@ import React from "react"; import { astClasses } from "../../context"; import { CopyButton } from "./CopyButton"; -interface IProps { +interface IProperties { darken: boolean; lang: string; value: string; @@ -16,7 +16,7 @@ interface IProps { failedText?: string; } -export class CodeRendererInner extends React.PureComponent { +export class CodeRendererInner extends React.PureComponent { public override render(): React.ReactElement { const { calcContentForCopy } = this; const { darken, lang, value, preferCodeWrap, showCodeLineno } = this.props; @@ -30,7 +30,7 @@ export class CodeRendererInner extends React.PureComponent { showLineNo={showCodeLineno && !preferCodeWrap} darken={darken} /> -
+
@@ -42,7 +42,7 @@ export class CodeRendererInner extends React.PureComponent { }; } -const copyBtnCls = css({ +const copyButtonCls = css({ position: "absolute", right: "4px", top: "4px", @@ -58,7 +58,7 @@ const codeCls = cx( borderRadius: "4px", margin: "0px 0px 1.25em 0px", backgroundColor: "var(--colorBgCode)", - [`&:hover > .${copyBtnCls}`]: { + [`&:hover > .${copyButtonCls}`]: { display: "inline-block", }, [`&&[data-wrap="true"] > div`]: { diff --git a/ui/components/Markdown/renderer/inner/ImageRendererInner.tsx b/ui/components/Markdown/renderer/inner/ImageRendererInner.tsx index 60495e3..0b48a96 100644 --- a/ui/components/Markdown/renderer/inner/ImageRendererInner.tsx +++ b/ui/components/Markdown/renderer/inner/ImageRendererInner.tsx @@ -1,7 +1,7 @@ import { css } from "@emotion/css"; import React from "react"; -interface IProps { +interface IProperties { src: string; alt: string; title: string | undefined; @@ -11,17 +11,17 @@ interface IProps { className: string; } -export class ImageRendererInner extends React.Component { - public override shouldComponentUpdate(nextProps: IProps): boolean { - const props = this.props; +export class ImageRendererInner extends React.Component { + public override shouldComponentUpdate(nextProperties: IProperties): boolean { + const properties = this.props; return ( - props.src !== nextProps.src || - props.alt !== nextProps.alt || - props.title !== nextProps.title || - props.srcSet !== nextProps.srcSet || - props.sizes !== nextProps.sizes || - props.loading !== nextProps.loading || - props.className !== nextProps.className + properties.src !== nextProperties.src || + properties.alt !== nextProperties.alt || + properties.title !== nextProperties.title || + properties.srcSet !== nextProperties.srcSet || + properties.sizes !== nextProperties.sizes || + properties.loading !== nextProperties.loading || + properties.className !== nextProperties.className ); } diff --git a/ui/components/Markdown/renderer/inner/LinkRendererInner.tsx b/ui/components/Markdown/renderer/inner/LinkRendererInner.tsx index 0fc6df9..e8f1d7f 100644 --- a/ui/components/Markdown/renderer/inner/LinkRendererInner.tsx +++ b/ui/components/Markdown/renderer/inner/LinkRendererInner.tsx @@ -3,21 +3,21 @@ import type { Node } from "@yozora/ast"; import React from "react"; import { NodesRenderer } from "../../NodesRenderer"; -interface IProps { +interface IProperties { url: string; title: string | undefined; childNodes: Node[] | undefined; className: string; } -export class LinkRendererInner extends React.Component { - public override shouldComponentUpdate(nextProps: Readonly): boolean { - const props = this.props; +export class LinkRendererInner extends React.Component { + public override shouldComponentUpdate(nextProperties: Readonly): boolean { + const properties = this.props; return ( - props.url !== nextProps.url || - props.title !== nextProps.title || - props.childNodes !== nextProps.childNodes || - props.className !== nextProps.className + properties.url !== nextProperties.url || + properties.title !== nextProperties.title || + properties.childNodes !== nextProperties.childNodes || + properties.className !== nextProperties.className ); } diff --git a/ui/components/Markdown/renderer/link.tsx b/ui/components/Markdown/renderer/link.tsx index cae857e..a4f4eb7 100644 --- a/ui/components/Markdown/renderer/link.tsx +++ b/ui/components/Markdown/renderer/link.tsx @@ -10,7 +10,7 @@ import { LinkRendererInner } from "./inner/LinkRendererInner"; * @see https://www.npmjs.com/package/@yozora/tokenizer-autolink * @see https://www.npmjs.com/package/@yozora/tokenizer-autolink-extension */ -export const LinkRenderer: INodeRenderer = props => { - const { url, title, children: childNodes } = props; +export const LinkRenderer: INodeRenderer = properties => { + const { url, title, children: childNodes } = properties; return ; }; diff --git a/ui/components/Markdown/renderer/linkReference.tsx b/ui/components/Markdown/renderer/linkReference.tsx index c5711b4..4ee5ba7 100644 --- a/ui/components/Markdown/renderer/linkReference.tsx +++ b/ui/components/Markdown/renderer/linkReference.tsx @@ -9,11 +9,13 @@ import { LinkRendererInner } from "./inner/LinkRendererInner"; * @see https://www.npmjs.com/package/@yozora/ast#linkReference * @see https://www.npmjs.com/package/@yozora/tokenizer-link-reference */ -export const LinkReferenceRenderer: INodeRenderer = props => { +export const LinkReferenceRenderer: INodeRenderer = properties => { const { viewmodel } = useNodeRendererContext(); const definitionMap: Readonly> = useStateValue(viewmodel.definitionMap$); - const definition = definitionMap[props.identifier]; + const definition = definitionMap[properties.identifier]; const url: string = definition?.url ?? ""; const title: string | undefined = definition?.title; - return ; + return ( + + ); }; diff --git a/ui/components/Markdown/renderer/list.tsx b/ui/components/Markdown/renderer/list.tsx index d4e39af..7d48c46 100644 --- a/ui/components/Markdown/renderer/list.tsx +++ b/ui/components/Markdown/renderer/list.tsx @@ -11,13 +11,13 @@ import { NodesRenderer } from "../NodesRenderer"; * @see https://www.npmjs.com/package/@yozora/tokenizer-list */ export class ListRenderer extends React.Component { - public override shouldComponentUpdate(nextProps: Readonly): boolean { - const props = this.props; + public override shouldComponentUpdate(nextProperties: Readonly): boolean { + const properties = this.props; return ( - props.ordered !== nextProps.ordered || - props.orderType !== nextProps.orderType || - props.start !== nextProps.start || - props.children !== nextProps.children + properties.ordered !== nextProperties.ordered || + properties.orderType !== nextProperties.orderType || + properties.start !== nextProperties.start || + properties.children !== nextProperties.children ); } diff --git a/ui/components/Markdown/renderer/listItem.tsx b/ui/components/Markdown/renderer/listItem.tsx index 7e87c59..1341bd2 100644 --- a/ui/components/Markdown/renderer/listItem.tsx +++ b/ui/components/Markdown/renderer/listItem.tsx @@ -11,9 +11,9 @@ import { NodesRenderer } from "../NodesRenderer"; * @see https://www.npmjs.com/package/@yozora/tokenizer-list-item */ export class ListItemRenderer extends React.Component { - public override shouldComponentUpdate(nextProps: Readonly): boolean { - const props = this.props; - return props.children !== nextProps.children; + public override shouldComponentUpdate(nextProperties: Readonly): boolean { + const properties = this.props; + return properties.children !== nextProperties.children; } public override render(): React.ReactElement { diff --git a/ui/components/Markdown/renderer/paragraph.tsx b/ui/components/Markdown/renderer/paragraph.tsx index 89f9079..6b36728 100644 --- a/ui/components/Markdown/renderer/paragraph.tsx +++ b/ui/components/Markdown/renderer/paragraph.tsx @@ -12,9 +12,9 @@ import { NodesRenderer } from "../NodesRenderer"; * @see https://www.npmjs.com/package/@yozora/tokenizer-paragraph */ export class ParagraphRenderer extends React.Component { - public override shouldComponentUpdate(nextProps: Readonly): boolean { - const props = this.props; - return props.children !== nextProps.children; + public override shouldComponentUpdate(nextProperties: Readonly): boolean { + const properties = this.props; + return properties.children !== nextProperties.children; } public override render(): React.ReactElement { diff --git a/ui/components/Markdown/renderer/strong.tsx b/ui/components/Markdown/renderer/strong.tsx index c033330..805457f 100644 --- a/ui/components/Markdown/renderer/strong.tsx +++ b/ui/components/Markdown/renderer/strong.tsx @@ -11,9 +11,9 @@ import { NodesRenderer } from "../NodesRenderer"; * @see https://www.npmjs.com/package/@yozora/tokenizer-emphasis */ export class StrongRenderer extends React.Component { - public override shouldComponentUpdate(nextProps: Readonly): boolean { - const props = this.props; - return props.children !== nextProps.children; + public override shouldComponentUpdate(nextProperties: Readonly): boolean { + const properties = this.props; + return properties.children !== nextProperties.children; } public override render(): React.ReactElement { diff --git a/ui/components/Markdown/renderer/table.tsx b/ui/components/Markdown/renderer/table.tsx index fb2ca54..af6883f 100644 --- a/ui/components/Markdown/renderer/table.tsx +++ b/ui/components/Markdown/renderer/table.tsx @@ -16,23 +16,25 @@ import { NodesRenderer } from "../NodesRenderer"; * @see https://www.npmjs.com/package/@yozora/tokenizer-table-cell */ export class TableRenderer extends React.Component { - public override shouldComponentUpdate(nextProps: Readonly
): boolean { - const props = this.props; - return !isEqual(props.columns, nextProps.columns) || !isEqual(props.children, nextProps.children); + public override shouldComponentUpdate(nextProperties: Readonly
): boolean { + const properties = this.props; + return ( + !isEqual(properties.columns, nextProperties.columns) || !isEqual(properties.children, nextProperties.children) + ); } public override render(): React.ReactElement { const { columns, children: rows } = this.props; const aligns = columns.map(col => col.align ?? undefined); const [ths, ...tds] = rows.map(row => - row.children.map((cell, idx) => ), + row.children.map((cell, index) => ), ); return (
- {ths.map((children, idx) => ( - ))} @@ -41,8 +43,8 @@ export class TableRenderer extends React.Component
+ {ths.map((children, index) => ( + {children}
{ {tds.map((row, rowIndex) => ( - {row.map((children, idx) => ( - ))} @@ -54,22 +56,22 @@ export class TableRenderer extends React.Component
+ {row.map((children, index) => ( + {children}
{ } } -interface IThProps { +interface IThProperties { align: "left" | "center" | "right" | undefined; children: React.ReactNode; } -class Th extends React.Component { +class Th extends React.Component { protected readonly ref: React.RefObject; - constructor(props: IThProps) { - super(props); + constructor(properties: IThProperties) { + super(properties); this.ref = { current: null }; } - public override shouldComponentUpdate(nextProps: Readonly): boolean { - const props = this.props; - return props.align !== nextProps.align || props.children !== nextProps.children; + public override shouldComponentUpdate(nextProperties: Readonly): boolean { + const properties = this.props; + return properties.align !== nextProperties.align || properties.children !== nextProperties.children; } public override render(): React.ReactElement { @@ -84,6 +86,7 @@ class Th extends React.Component { public override componentDidMount(): void { const th = this.ref.current; if (th) { + // eslint-disable-next-line unicorn/prefer-dom-node-text-content th.setAttribute("title", th.innerText); } } @@ -91,6 +94,7 @@ class Th extends React.Component { public override componentDidUpdate(): void { const th = this.ref.current; if (th) { + // eslint-disable-next-line unicorn/prefer-dom-node-text-content th.setAttribute("title", th.innerText); } } diff --git a/ui/components/Markdown/renderer/text.tsx b/ui/components/Markdown/renderer/text.tsx index 5f7bfae..c319210 100644 --- a/ui/components/Markdown/renderer/text.tsx +++ b/ui/components/Markdown/renderer/text.tsx @@ -8,9 +8,9 @@ import React from "react"; * @see https://www.npmjs.com/package/@yozora/tokenizer-text */ export class TextRenderer extends React.Component { - public override shouldComponentUpdate(nextProps: Readonly): boolean { - const props = this.props; - return props.value !== nextProps.value; + public override shouldComponentUpdate(nextProperties: Readonly): boolean { + const properties = this.props; + return properties.value !== nextProperties.value; } public override render(): React.ReactElement { diff --git a/ui/components/NewsDetail.tsx b/ui/components/NewsDetail.tsx index 96c425d..ffa482d 100644 --- a/ui/components/NewsDetail.tsx +++ b/ui/components/NewsDetail.tsx @@ -26,7 +26,7 @@ interface ContextItemType { score?: number; } -interface NewsDetailProps { +interface NewsDetailProperties { news: { title: string; sections: { @@ -37,7 +37,7 @@ interface NewsDetailProps { }; } -const NewsDetail: React.FC = ({ news }) => { +const NewsDetail: React.FC = ({ news }) => { return (

{news.title}

@@ -47,8 +47,8 @@ const NewsDetail: React.FC = ({ news }) => {

{section.content}

Related Context:

- {section.context.map((item, i) => ( - + {section.context.map((item, index_) => ( + ))}