frontend-shopify/react-editor-shopify
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use headerActions override for custom Save button

Browse Source 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Rami Bitar
2026-05-05 13:51:10 -04:00
parent 62fbdead87
commit fce386c518
1 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/App.tsx
View File

@@ -1,5 +1,5 @@
import { useCallback, useMemo, useRef, useState } from "react"; import { useCallback, useMemo, useRef, useState } from "react";
import { App as ReactEditorApp } from "@reacteditor/core"; import { App as ReactEditorApp, createUseEditor } from "@reacteditor/core";
import "@reacteditor/core/react-editor.css"; import "@reacteditor/core/react-editor.css";
import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn"; import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
import { mediaPlugin } from "@reacteditor/plugin-media"; import { mediaPlugin } from "@reacteditor/plugin-media";
@@ -16,6 +16,8 @@ const AI_API_KEY = (import.meta.env.VITE_API_KEY as string | undefined) ?? "";
type Pages = Record<string, { root: any; content: any[] }>; type Pages = Record<string, { root: any; content: any[] }>;
const useEditor = createUseEditor();
const SHOPIFY_DOMAIN = const SHOPIFY_DOMAIN =
(import.meta.env.VITE_SHOPIFY_DOMAIN as string | undefined) ?? "mock.shop"; (import.meta.env.VITE_SHOPIFY_DOMAIN as string | undefined) ?? "mock.shop";
const STOREFRONT_TOKEN = const STOREFRONT_TOKEN =
@@ -78,21 +80,22 @@ export default function App() {
onPublish={handlePublish} onPublish={handlePublish}
onChange={handleChange} onChange={handleChange}
overrides={{ overrides={{
header: ({ children }: any) => ( headerActions: () => {
<div className="flex items-center justify-between gap-2 border-b border-gray-200 bg-white px-4 py-2"> const appState = useEditor((s: any) => s.appState);
<div className="flex flex-1 items-center gap-2">{children}</div> return (
<button <button
type="button" type="button"
disabled={isPublishing} disabled={isPublishing}
onClick={() => { onClick={() => {
handlePublish(latestDataRef.current, currentPath); handlePublish(appState.data, currentPath);
}} }}
className="inline-flex items-center justify-center rounded-md bg-black px-4 py-1.5 text-sm font-medium text-white hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-60" className="inline-flex items-center justify-center gap-2 rounded-md bg-black px-4 py-1.5 text-sm font-medium text-white hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-60"
> >
{isPublishing && <Loader size={14} />}
{isPublishing ? "Saving..." : "Save"} {isPublishing ? "Saving..." : "Save"}
</button> </button>
</div> );
), },
}} }}
/> />
</ShopifyProvider> </ShopifyProvider>