diff --git a/examples/nextjs-linear-like-issue-tracker/src/components/InboxContext.tsx b/examples/nextjs-linear-like-issue-tracker/src/components/InboxContext.tsx
index b3720d01399..a863f931ec9 100644
--- a/examples/nextjs-linear-like-issue-tracker/src/components/InboxContext.tsx
+++ b/examples/nextjs-linear-like-issue-tracker/src/components/InboxContext.tsx
@@ -6,6 +6,7 @@ import {
useState,
ReactNode,
useLayoutEffect,
+ Suspense,
} from "react";
import { usePathname } from "next/navigation";
@@ -27,14 +28,6 @@ export function useInbox() {
export function InboxProvider({ children }: { children: ReactNode }) {
const [isOpen, setIsOpen] = useState(false);
- const pathname = usePathname();
-
- useLayoutEffect(() => {
- // Reset when changing to dashboard
- if (pathname === "/") {
- localStorage.setItem("inboxOpen", "false");
- }
- }, [pathname]);
useLayoutEffect(() => {
setIsOpen(localStorage.getItem("inboxOpen") === "true");
@@ -55,11 +48,27 @@ export function InboxProvider({ children }: { children: ReactNode }) {
setIsOpen(true) }}
>
+
+
+
{children}
);
}
+// Reset when changing to dashboard
+function ResetInboxOnDashboard() {
+ const pathname = usePathname();
+
+ useLayoutEffect(() => {
+ if (pathname === "/") {
+ localStorage.setItem("inboxOpen", "false");
+ }
+ }, [pathname]);
+
+ return null;
+}
+
export function DisplayWhenInboxOpen({ children }: { children: ReactNode }) {
const { isOpen } = useInbox();
diff --git a/examples/nextjs-linear-like-issue-tracker/src/components/Issue.tsx b/examples/nextjs-linear-like-issue-tracker/src/components/Issue.tsx
index 2b7093e53e6..ed9a04998a4 100644
--- a/examples/nextjs-linear-like-issue-tracker/src/components/Issue.tsx
+++ b/examples/nextjs-linear-like-issue-tracker/src/components/Issue.tsx
@@ -20,42 +20,73 @@ export async function Issue({ issueId }: { issueId: string }) {
const roomId = getRoomId(issueId);
// Get storage contents of room (e.g. issue properties) to render placeholder on load
- const storagePromise = liveblocks.getStorageDocument(roomId, "json");
+ async function fetchStorage() {
+ "use cache";
+ const storagePromise = liveblocks.getStorageDocument(roomId, "json");
+ return storagePromise;
+ }
// Get content and convert it to markdown for displaying a placeholder
- const contentHtmlPromise = withLexicalDocument(
- {
- roomId,
- client: liveblocks,
- nodes: [...ISSUE_LEXICAL_NODES],
- },
- async (doc) => {
- let markdown = "";
+ async function fetchContentHtml() {
+ "use cache";
+ const contentHtmlPromise = withLexicalDocument(
+ {
+ roomId,
+ client: liveblocks,
+ nodes: [...ISSUE_LEXICAL_NODES],
+ },
+ async (doc) => {
+ let markdown = "";
- doc.getEditorState().read(() => {
- // Get markdown version of Lexical state
- markdown = $convertToMarkdownString(TRANSFORMERS, undefined, true)
- // Make new lines display correctly
- .replace(/\n{2,}/g, (match) => "
".repeat(match.length - 1))
- .replace(/\n(?!$)/g, "\n\n")
- .replace(/(\n+)$/g, (match) => "
".repeat(match.length));
- });
+ doc.getEditorState().read(() => {
+ // Get markdown version of Lexical state
+ markdown = $convertToMarkdownString(TRANSFORMERS, undefined, true)
+ // Make new lines display correctly
+ .replace(/\n{2,}/g, (match) =>
+ "
".repeat(match.length - 1)
+ )
+ .replace(/\n(?!$)/g, "\n\n")
+ .replace(/(\n+)$/g, (match) => "
".repeat(match.length));
+ });
- // Remove all HTML tags but "p" and "br"
- markdown = sanitizeHtml(markdown, {
- allowedTags: ["p", "br"],
- disallowedTagsMode: "escape",
- });
+ const rawHtml = await marked(markdown);
- return marked(markdown);
- }
- );
+ return sanitizeHtml(rawHtml, {
+ allowedTags: [
+ "p",
+ "br",
+ "strong",
+ "em",
+ "s",
+ "code",
+ "pre",
+ "blockquote",
+ "ul",
+ "ol",
+ "li",
+ "h1",
+ "h2",
+ "h3",
+ "h4",
+ "h5",
+ "h6",
+ "a",
+ ],
+ allowedAttributes: {
+ a: ["href", "name", "target", "rel"],
+ },
+ allowedSchemes: ["http", "https", "mailto"],
+ });
+ }
+ );
+ return contentHtmlPromise;
+ }
let error;
let results;
try {
- results = await Promise.all([storagePromise, contentHtmlPromise]);
+ results = await Promise.all([fetchStorage(), fetchContentHtml()]);
} catch (err) {
console.log(err);
error = err;
diff --git a/examples/nextjs-linear-like-issue-tracker/src/components/IssueLabels.tsx b/examples/nextjs-linear-like-issue-tracker/src/components/IssueLabels.tsx
index f1dddbbc33e..67f73a583f2 100644
--- a/examples/nextjs-linear-like-issue-tracker/src/components/IssueLabels.tsx
+++ b/examples/nextjs-linear-like-issue-tracker/src/components/IssueLabels.tsx
@@ -19,30 +19,38 @@ export function IssueLabels({
}) {
return (
- {LABELS.filter((label) =>
- storageFallback.labels.includes(label.id)
- ).map(({ id, text }) => (
-
-
- {text}{" "}
-
- ×
-
-
);
}
+export function IssueLabelsFallback({
+ storageFallback,
+}: {
+ storageFallback: ImmutableStorage;
+}) {
+ return (
+
+ );
+}
+
function Labels() {
const labels = useStorage((root) => root.labels);
@@ -65,39 +73,39 @@ function Labels() {
);
}
diff --git a/examples/nextjs-linear-like-issue-tracker/src/components/IssueProperties.tsx b/examples/nextjs-linear-like-issue-tracker/src/components/IssueProperties.tsx
index 207ed1b1da9..5bb28f4ba09 100644
--- a/examples/nextjs-linear-like-issue-tracker/src/components/IssueProperties.tsx
+++ b/examples/nextjs-linear-like-issue-tracker/src/components/IssueProperties.tsx
@@ -25,43 +25,53 @@ export function IssueProperties({
return (