This is raw html
+
+
hi
hi
before
', + }, + ], + }); + + expect(root.querySelector('script')).toBeNull(); + expect(root.querySelector('p')?.textContent).toBe('before'); + }); + + it('does not let components.html bypass sanitisation', () => { + TinaMarkdown.components = { + html: (node: { value: string }) => { + const el = document.createElement('div'); + el.innerHTML = node.value; + return el; + }, + }; + + const root = render({ + type: 'root', + children: [{ type: 'html', value: 'raw' }], + }); + + const b = root.querySelector('b'); + expect(b?.textContent).toBe('raw'); + expect(b?.getAttribute('onclick')).toBeNull(); + }); + + it('does not route node types through the components map', () => { + TinaMarkdown.components = { + h1: (node: { children: { text: string }[] }) => { + const el = document.createElement('h1'); + el.className = 'fancy'; + el.textContent = node.children[0].text; + return el; + }, + }; + + const root = render({ + type: 'root', + children: [{ type: 'h1', children: [{ type: 'text', text: 'Title' }] }], + }); + + const h1 = root.querySelector('h1'); + expect(h1?.textContent).toBe('Title'); + expect(h1?.className).toBe(''); + }); + + it('routes mdx custom elements through components by name', () => { + TinaMarkdown.components = { + PostPreview: (node: { props: { title: string } }) => { + const el = document.createElement('div'); + el.className = 'preview'; + el.textContent = node.props.title; + return el; + }, + }; + + const root = render({ + type: 'root', + children: [ + { + type: 'mdxJsxFlowElement', + name: 'PostPreview', + props: { title: 'Hello' }, + }, + ], + }); + + const preview = root.querySelector('.preview'); + expect(preview?.textContent).toBe('Hello'); + }); +}); diff --git a/packages/@tinacms/web-components/src/visual-editing.js b/packages/@tinacms/web-components/src/visual-editing.js new file mode 100644 index 0000000000..bb453f990c --- /dev/null +++ b/packages/@tinacms/web-components/src/visual-editing.js @@ -0,0 +1,136 @@ +import { tinaField } from '@tinacms/bridge'; +export { tinaField }; + +import { + QUICK_EDIT_BODY_CLASS, + QUICK_EDIT_CSS, +} from '@tinacms/bridge/quick-edit-css'; + +import { addMetadata, hashFromQuery } from '@tinacms/bridge/metadata'; + +/** + * @typedef {'open' | 'quick-edit' | 'quickEditEnabled' | 'field:selected' | 'close'} type + */ + +/** + * @typedef {Object} CreateTinaOptions + * @property {() => Promise<{data: object, query: string, variables: object}>} query + * A generated-client query (e.g. `() => client.queries.postConnection()`). + * @property {(data: object) => void} render + * Rebuilds the page DOM from metadata-stamped data. Called with the + * initial fetch result and again with every admin `updateData` payload. + */ + +/** + * Create a visual-editing session for one page. + * @param {CreateTinaOptions} options + */ +export function createTina({ query, render }) { + let id = null; + let quickEditEnabled = false; + + async function init() { + const result = await query(); + id = hashFromQuery( + JSON.stringify({ query: result.query, variables: result.variables }) + ); + + // Stamp every object in the result with `_content_source` so `tinaField()` + // can derive `data-tina-field` values from it. The stamp mutates the data + // shape, so only the render path sees it - the `open` message carries the + // raw result instead. + render(addMetadata(id, structuredClone(result.data), [])); + + post({ type: 'open', id, ...result }); + + window.addEventListener('message', onMessage); + window.addEventListener('beforeunload', onBeforeUnload); + } + + function onMessage(event) { + if (!isFromAdmin(event)) return; + + if (event.data.type === 'quickEditEnabled') { + setQuickEditEnabled(event.data.value); + } + + if (event.data.id === id && event.data.type === 'updateData') { + render(addMetadata(id, structuredClone(event.data.data), [])); + reportQuickEdit(); + } + } + + function setQuickEditEnabled(enabled) { + if (enabled === quickEditEnabled) return; + quickEditEnabled = enabled; + + if (enabled) { + injectQuickEditCss(); + document.addEventListener('click', onQuickEditClick, true); + } else { + removeQuickEditCss(); + document.removeEventListener('click', onQuickEditClick, true); + } + } + + // Capture-phase listener so the click never reaches the page's own handlers. + // Walks the composed path rather than `closest()`: `tina-markdown` renders + // into an open shadow root, and only the composed path (which includes the + // shadow host) can be searched for the `data-tina-field` marker. + function onQuickEditClick(event) { + const fieldName = resolveFieldName(event.composedPath()); + if (!fieldName) return; + + event.preventDefault(); + event.stopPropagation(); + post({ type: 'field:selected', fieldName }); + } + + function onBeforeUnload() { + if (id) post({ type: 'close', id }); + } + + function reportQuickEdit() { + const hasMarkers = !!document.querySelector('[data-tina-field]'); + post({ type: 'quick-edit', value: hasMarkers }); + } + + function post(message) { + window.parent.postMessage(message, window.location.origin); + } + + function isFromAdmin(event) { + if (event.source !== window.parent) return false; + if (event.origin !== window.location.origin) return false; + return true; + } + + return { init }; +} + +function resolveFieldName(path) { + for (const node of path) { + if (!(node instanceof Element)) continue; + const attributeName = node + .getAttributeNames() + .find((name) => name.startsWith('data-tina-field')); + if (attributeName) { + const value = node.getAttribute(attributeName); + if (value) return value; + } + } + return null; +} + +function injectQuickEditCss() { + const style = document.createElement('style'); + style.textContent = QUICK_EDIT_CSS; + style.id = 'tina-quick-edit-style'; + document.head.appendChild(style); + document.body.classList.add(QUICK_EDIT_BODY_CLASS); +} + +function removeQuickEditCss() { + document.getElementById('tina-quick-edit-style')?.remove(); + document.body.classList.remove(QUICK_EDIT_BODY_CLASS); +} diff --git a/packages/@tinacms/web-components/tsconfig.json b/packages/@tinacms/web-components/tsconfig.json new file mode 100644 index 0000000000..faa59192da --- /dev/null +++ b/packages/@tinacms/web-components/tsconfig.json @@ -0,0 +1,18 @@ +{ + "extends": "../../../base.tsconfig.json", + "compilerOptions": { + "outDir": "dist", + "rootDir": "src", + "strict": true, + "skipLibCheck": true, + "noImplicitAny": true, + "noUncheckedIndexedAccess": true, + "noFallthroughCasesInSwitch": true, + "moduleResolution": "bundler", + "module": "esnext", + "target": "esnext", + "lib": ["ESNext", "DOM", "DOM.Iterable"] + }, + "exclude": ["dist", "src/**/*.test.ts", "src/__tests__"], + "include": ["src"] +} diff --git a/packages/@tinacms/web-components/vitest.config.ts b/packages/@tinacms/web-components/vitest.config.ts new file mode 100644 index 0000000000..c86cb255ac --- /dev/null +++ b/packages/@tinacms/web-components/vitest.config.ts @@ -0,0 +1,10 @@ +///hi