Skip to content

Upgrade TinaCMS to add highlight support in the rich text editor #2553

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Freego1783 merged 9 commits into from
Mar 27, 2026
Merged

Upgrade TinaCMS to add highlight support in the rich text editor #2553

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
805ef41
Updates TinaCMS dependencies and adds highlight toolbar option
Aibono1225 Mar 20, 2026
b73befd
delete useMarkHighlight
Aibono1225 Mar 20, 2026
eec3e08
update packages to use latest beta version
Ben0189 Mar 23, 2026
c3fa411
Merge remote-tracking branch 'origin/main' into 2467-add-tinacms-high…
Aibono1225 Mar 25, 2026
e85a9fd
upgrade tinacms to the latest version for the highlighting feature
Aibono1225 Mar 25, 2026
d0f423a
Adds styling for MDX-rendered `<mark>` elements
Aibono1225 Mar 25, 2026
2f0bd04
Updates toolbarFields type to use satisfies for stricter validation
Aibono1225 Mar 27, 2026
d362b8a
Merge branch 'main' into 2467-add-tinacms-highlight
Aibono1225 Mar 27, 2026
e624834
Merge branch 'main' into 2467-add-tinacms-highlight
Aibono1225 Mar 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions app/[filename]/TinaCategoryWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@

import { useTina } from "tinacms/dist/react";
import ServerCategoryPage from "./ServerCategoryPage";
import { useMarkHighlight } from "@/lib/useMarkHighlight";
import { useRef, RefObject } from "react";

export type TinaCategoryProps = {
serverCategoryPageProps: {
Expand All @@ -23,9 +21,6 @@ export function TinaCategoryWrapper({ serverCategoryPageProps, tinaQueryProps }:
data: tinaQueryProps.data,
});

const contentRef = useRef<HTMLDivElement>(null);
useMarkHighlight(contentRef as RefObject<HTMLElement>);

return (
<ServerCategoryPage
category={data.category}
Expand Down
7 changes: 1 addition & 6 deletions app/[filename]/TinaRuleWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
"use client";

import { RefObject, useRef } from "react";
import { useTina } from "tinacms/dist/react";
import { useMarkHighlight } from "@/lib/useMarkHighlight";
import ServerRulePage, { ServerRulePageProps } from "./ServerRulePage";

export type TinaRuleProps = {
Expand All @@ -17,11 +15,8 @@ export function TinaRuleWrapper({ serverRulePageProps, tinaQueryProps }: TinaRul
data: tinaQueryProps.data,
});

const contentRef = useRef<HTMLDivElement>(null);
useMarkHighlight(contentRef as RefObject<HTMLElement>);

return (
<div ref={contentRef}>
<div>
<ServerRulePage tinaProps={{ data }} serverRulePageProps={serverRulePageProps} />
</div>
);
Expand Down
2 changes: 0 additions & 2 deletions components/embeds/emailEmbed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
import React, { RefObject, useRef } from "react";
import { Template } from "tinacms";
import { TinaMarkdown } from "tinacms/dist/rich-text";
import { useMarkHighlight } from "@/lib/useMarkHighlight";
import MarkdownComponentMapping from "../tina-markdown/markdown-component-mapping";
import { Figure, inlineFigureDefaultItem, inlineFigureFields } from "./figure";

Expand All @@ -17,7 +16,6 @@ export function EmailEmbed({ data }: { data: any }) {
].filter((field) => field.value?.trim());

const contentRef = useRef<HTMLDivElement>(null);
useMarkHighlight(contentRef as RefObject<HTMLElement>);

const figure: string = data?.figure || "";
const figurePrefix: any = data?.figurePrefix || "default";
Expand Down
2 changes: 0 additions & 2 deletions components/rule-list/rule-list-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
import React, { RefObject, useRef } from "react";
import { tinaField } from "tinacms/dist/react";
import { TinaMarkdown } from "tinacms/dist/rich-text";
import { useMarkHighlight } from "@/lib/useMarkHighlight";
import { RuleListFilter } from "@/types/ruleListFilter";
import MarkdownComponentMapping from "../tina-markdown/markdown-component-mapping";
import RuleListItemHeader from "./rule-list-item-header";
Expand Down Expand Up @@ -37,7 +36,6 @@ const RuleListItem: React.FC<RuleListItemProps> = ({ rule, index, filter, onBook
}

const contentRef = useRef<HTMLDivElement>(null);
useMarkHighlight(contentRef as RefObject<HTMLElement>);

return (
<li key={index} className="p-4 border rounded shadow">
Expand Down
45 changes: 0 additions & 45 deletions lib/useMarkHighlight.tsx
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.2",
"@testing-library/user-event": "^14.6.1",
"@tinacms/cli": "2.1.8",
"@tinacms/cli": "2.2.0",
"@types/jest": "^30.0.0",
"@types/js-cookie": "^3.0.6",
"@types/node": "^22.19.3",
Expand Down Expand Up @@ -91,7 +91,7 @@
"svg-react-loader": "^0.4.6",
"tailwind-merge": "^3.4.0",
"tailwindcss": "^4.1.18",
"tinacms": "3.5.0",
"tinacms": "3.7.0",
"tw-animate-css": "^1.2.4",
"unplugin-info": "^1.2.4",
"usehooks-ts": "^3.1.1"
Expand Down
Loading
Loading