feat: persist data in preview and editor on astro page #529
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| /** | ||
| * Shared helpers for persisting the demo editor's content in `localStorage` so | ||
| * that edits survive a page refresh and can be handed off to the preview page. | ||
| * | ||
| * Used by the home pages (`index.astro`, `en/index.astro`) to wire up saving, | ||
| * restoring and resetting, and by `preview.astro` to seed its read-only content. | ||
| */ | ||
|
|
||
| /** localStorage key shared by the editor pages and the preview page. */ | ||
| export const EDITOR_STORAGE_KEY = 'clippy-editor-content'; | ||
|
|
||
| /** Minimal surface of the TipTap editor instance exposed on `<clippy-editor>`. */ | ||
| interface EditorLike { | ||
| getHTML(): string; | ||
| commands: { setContent(content: string, options?: { emitUpdate?: boolean }): boolean }; | ||
| on(event: string, callback: () => void): void; | ||
| } | ||
|
|
||
| type EditorHost = HTMLElement & { editor?: EditorLike }; | ||
|
|
||
| /** | ||
| * Wait for `<clippy-editor>` to upgrade and create its TipTap editor instance. | ||
| * Polls across animation frames because the instance is assigned asynchronously | ||
| * in the component's `firstUpdated()`. | ||
| */ | ||
| async function getEditor(el: EditorHost): Promise<EditorLike | undefined> { | ||
| await customElements.whenDefined('clippy-editor'); | ||
| for (let i = 0; i < 300 && !el.editor; i += 1) { | ||
|
Contributor
There was a problem hiding this comment. Is there not a ready() or equivalent available from within the editor? |
||
| await new Promise((resolve) => requestAnimationFrame(resolve)); | ||
| } | ||
| return el.editor; | ||
| } | ||
|
|
||
| interface PersistenceOptions { | ||
| /** Id of the `<clippy-editor>` element. */ | ||
| editorId?: string; | ||
| /** Id of the "reset to example content" button. */ | ||
| resetButtonId?: string; | ||
| /** Id of the preview link/button. */ | ||
| previewLinkId?: string; | ||
| } | ||
|
|
||
| /** | ||
| * Wire an editor page for persistence: | ||
| * - restores previously saved content on load, | ||
| * - saves to localStorage on every change, | ||
| * - resets to the original example content on demand, | ||
| * - flushes the latest content before navigating to the preview. | ||
| */ | ||
| export function setupEditorPersistence({ | ||
| editorId = 'clippy-editor-localhost', | ||
| previewLinkId = 'clippy-preview-link', | ||
| resetButtonId = 'clippy-reset', | ||
| }: PersistenceOptions = {}): void { | ||
| const editorEl = document.getElementById(editorId) as EditorHost | null; | ||
| if (!editorEl) return; | ||
|
|
||
| const resetButton = document.getElementById(resetButtonId); | ||
| const previewLink = document.getElementById(previewLinkId); | ||
| const valueSlot = editorEl.querySelector('div[slot="value"]'); | ||
|
|
||
| // Snapshot the initial slot markup so "reset" can restore the example content. | ||
| // Reset feeds this raw markup back through setContent(), which reproduces the | ||
| // exact same parse path the editor used on first render — so the reset result | ||
| // is byte-identical to the initial content. | ||
| const exampleHtml = valueSlot?.innerHTML ?? ''; | ||
|
|
||
| getEditor(editorEl).then((editor) => { | ||
| if (!editor) return; | ||
|
|
||
| // Restore previously edited content without emitting an update (which would | ||
| // immediately re-save identical content). | ||
| const saved = localStorage.getItem(EDITOR_STORAGE_KEY); | ||
| if (saved) { | ||
| editor.commands.setContent(saved, { emitUpdate: false }); | ||
| } | ||
|
|
||
| // Persist on every content change. | ||
| editor.on('update', () => { | ||
| localStorage.setItem(EDITOR_STORAGE_KEY, editor.getHTML()); | ||
| }); | ||
|
|
||
| resetButton?.addEventListener('click', () => { | ||
| editor.commands.setContent(exampleHtml); | ||
| localStorage.setItem(EDITOR_STORAGE_KEY, editor.getHTML()); | ||
| }); | ||
|
|
||
| // Guarantee the latest content is stored before navigating to the preview. | ||
| previewLink?.addEventListener('click', () => { | ||
| localStorage.setItem(EDITOR_STORAGE_KEY, editor.getHTML()); | ||
| }); | ||
| }); | ||
| } | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we add this script to the editorPersistence util as well? So all demo code is in the same file?