@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
8 lines (7 loc) • 7.4 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/post-revisions-preview/revisions-canvas.js"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Spinner } from '@wordpress/components';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useEffect } from '@wordpress/element';\nimport { addFilter } from '@wordpress/hooks';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as editorStore } from '../../store';\nimport VisualEditor from '../visual-editor';\nimport {\n\tregisterDiffFormatTypes,\n\tunregisterDiffFormatTypes,\n} from './diff-format-types';\nimport { useDiffMarkers } from './diff-markers';\n\nconst { usePrivateStyleOverride } = unlock( blockEditorPrivateApis );\n\n// SVG filter for removed blocks: grayscale + red tint\nconst REVISION_REMOVED_FILTER_SVG = `\n<svg\n\txmlns=\"http://www.w3.org/2000/svg\"\n\tviewBox=\"0 0 0 0\"\n\twidth=\"0\"\n\theight=\"0\"\n\tfocusable=\"false\"\n\trole=\"none\"\n\taria-hidden=\"true\"\n\tstyle=\"visibility: hidden; position: absolute; left: -9999px; overflow: hidden;\"\n>\n\t<defs>\n\t\t<filter id=\"revision-removed-filter\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n\t\t\t<!-- Desaturate and add red tint -->\n\t\t\t<feColorMatrix type=\"matrix\"\n\t\t\t\tvalues=\"0.5 0.3 0.2 0 0.15\n\t\t\t\t 0.2 0.2 0.1 0 0\n\t\t\t\t 0.2 0.2 0.1 0 0\n\t\t\t\t 0 0 0 0.8 0\"/>\n\t\t</filter>\n\t</defs>\n</svg>\n`;\n\n/**\n * CSS for revision diff indicators, injected into the iframe.\n * Uses color-mix() to blend diff colors with currentColor for better integration.\n */\nconst REVISION_DIFF_STYLES = `\n\t.is-revision-added {\n\t\tbox-shadow: inset 0 0 0 9999px color-mix(in srgb, currentColor 5%, #00a32a 15%), 0 0 0 4px color-mix(in srgb, currentColor 5%, #00a32a 15%);\n\t}\n\t.is-revision-removed,\n\t.revision-diff-removed {\n\t\ttext-decoration: line-through;\n\t\tfilter: url(#revision-removed-filter);\n\t}\n\t.is-revision-modified {\n\t\toutline: 2px solid color-mix(in srgb, currentColor 30%, #dba617 70%) !important;\n\t\toutline-offset: 2px;\n\t}\n\t.revision-diff-added {\n\t\tbackground-color: color-mix(in srgb, currentColor 5%, #00a32a 15%);\n\t\ttext-decoration: none;\n\t}\n\t.revision-diff-format-added {\n\t\ttext-decoration: underline wavy color-mix(in srgb, currentColor 30%, #00a32a 70%);\n\t\ttext-decoration-thickness: 2px;\n\t}\n\t.revision-diff-format-removed {\n\t\ttext-decoration: underline wavy color-mix(in srgb, currentColor 20%, #d63638 80%);\n\t\ttext-decoration-thickness: 2px;\n\t}\n\t.revision-diff-format-changed {\n\t\ttext-decoration: underline wavy color-mix(in srgb, currentColor 30%, #dba617 70%);\n\t\ttext-decoration-thickness: 2px;\n\t}\n`;\n\n/**\n * Filter to add diff status CSS classes to blocks.\n *\n * @param {Object} BlockListBlock The original block list block component.\n * @return {Function} Enhanced component with diff status classes.\n */\nfunction withRevisionDiffClasses( BlockListBlock ) {\n\treturn ( props ) => {\n\t\tconst { block, className } = props;\n\t\tconst diffStatus = block?.__revisionDiffStatus?.status;\n\n\t\tconst enhancedClassName = clsx( className, {\n\t\t\t'is-revision-added': diffStatus === 'added',\n\t\t\t'is-revision-removed': diffStatus === 'removed',\n\t\t\t'is-revision-modified': diffStatus === 'modified',\n\t\t} );\n\n\t\treturn <BlockListBlock { ...props } className={ enhancedClassName } />;\n\t};\n}\n\nconst FILTER_NAME = 'editor/revisions-canvas/withRevisionDiffClasses';\n\n// Register the filter at module level to ensure it's available before first render.\naddFilter( 'editor.BlockListBlock', FILTER_NAME, withRevisionDiffClasses );\n\n/**\n * Component to inject diff styles via style overrides.\n * Must be rendered inside ExperimentalBlockEditorProvider.\n *\n * @param {Object} props Component props.\n * @param {boolean} props.showDiff Whether to show diff highlighting.\n */\nfunction DiffStyleOverrides( { showDiff } ) {\n\tusePrivateStyleOverride( {\n\t\tcss: showDiff ? REVISION_DIFF_STYLES : '',\n\t} );\n\tusePrivateStyleOverride( {\n\t\tassets: showDiff ? REVISION_REMOVED_FILTER_SVG : '',\n\t\t__unstableType: 'svgs',\n\t} );\n\treturn null;\n}\n\nfunction CanvasContent( { showDiff } ) {\n\tconst [ contentRef, diffMarkers ] = useDiffMarkers();\n\treturn (\n\t\t<>\n\t\t\t<VisualEditor contentRef={ contentRef } />\n\t\t\t{ showDiff && diffMarkers }\n\t\t</>\n\t);\n}\n\n/**\n * Canvas component that renders a post revision in read-only mode.\n * Block preparation and settings are handled by the parent EditorProvider.\n *\n * @return {React.JSX.Element} The revisions canvas component.\n */\nexport default function RevisionsCanvas() {\n\tuseEffect( () => {\n\t\tregisterDiffFormatTypes();\n\t\treturn () => {\n\t\t\tunregisterDiffFormatTypes();\n\t\t};\n\t}, [] );\n\n\tconst { revision, showDiff } = useSelect( ( select ) => {\n\t\tconst { getCurrentRevision, isShowingRevisionDiff } = unlock(\n\t\t\tselect( editorStore )\n\t\t);\n\t\treturn {\n\t\t\trevision: getCurrentRevision(),\n\t\t\tshowDiff: isShowingRevisionDiff(),\n\t\t};\n\t}, [] );\n\n\treturn revision ? (\n\t\t<>\n\t\t\t<DiffStyleOverrides showDiff={ showDiff } />\n\t\t\t<div className=\"editor-revisions-canvas__content\">\n\t\t\t\t<CanvasContent showDiff={ showDiff } />\n\t\t\t</div>\n\t\t</>\n\t) : (\n\t\t<div className=\"editor-revisions-canvas__loading\">\n\t\t\t<Spinner />\n\t\t</div>\n\t);\n}\n"],
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,wBAAwB;AACxB,0BAAsD;AACtD,kBAA0B;AAC1B,qBAA0B;AAC1B,mBAA0B;AAK1B,yBAAuB;AACvB,mBAAqC;AACrC,2BAAyB;AACzB,+BAGO;AACP,0BAA+B;AAiFtB;AA/ET,IAAM,EAAE,wBAAwB,QAAI,2BAAQ,oBAAAA,WAAuB;AAGnE,IAAM,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BpC,IAAM,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqC7B,SAAS,wBAAyB,gBAAiB;AAClD,SAAO,CAAE,UAAW;AACnB,UAAM,EAAE,OAAO,UAAU,IAAI;AAC7B,UAAM,aAAa,OAAO,sBAAsB;AAEhD,UAAM,wBAAoB,YAAAC,SAAM,WAAW;AAAA,MAC1C,qBAAqB,eAAe;AAAA,MACpC,uBAAuB,eAAe;AAAA,MACtC,wBAAwB,eAAe;AAAA,IACxC,CAAE;AAEF,WAAO,4CAAC,kBAAiB,GAAG,OAAQ,WAAY,mBAAoB;AAAA,EACrE;AACD;AAEA,IAAM,cAAc;AAAA,IAGpB,wBAAW,yBAAyB,aAAa,uBAAwB;AASzE,SAAS,mBAAoB,EAAE,SAAS,GAAI;AAC3C,0BAAyB;AAAA,IACxB,KAAK,WAAW,uBAAuB;AAAA,EACxC,CAAE;AACF,0BAAyB;AAAA,IACxB,QAAQ,WAAW,8BAA8B;AAAA,IACjD,gBAAgB;AAAA,EACjB,CAAE;AACF,SAAO;AACR;AAEA,SAAS,cAAe,EAAE,SAAS,GAAI;AACtC,QAAM,CAAE,YAAY,WAAY,QAAI,oCAAe;AACnD,SACC,4EACC;AAAA,gDAAC,qBAAAC,SAAA,EAAa,YAA0B;AAAA,IACtC,YAAY;AAAA,KACf;AAEF;AAQe,SAAR,kBAAmC;AACzC,gCAAW,MAAM;AAChB,0DAAwB;AACxB,WAAO,MAAM;AACZ,8DAA0B;AAAA,IAC3B;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,EAAE,UAAU,SAAS,QAAI,uBAAW,CAAE,WAAY;AACvD,UAAM,EAAE,oBAAoB,sBAAsB,QAAI;AAAA,MACrD,OAAQ,aAAAC,KAAY;AAAA,IACrB;AACA,WAAO;AAAA,MACN,UAAU,mBAAmB;AAAA,MAC7B,UAAU,sBAAsB;AAAA,IACjC;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SAAO,WACN,4EACC;AAAA,gDAAC,sBAAmB,UAAsB;AAAA,IAC1C,4CAAC,SAAI,WAAU,oCACd,sDAAC,iBAAc,UAAsB,GACtC;AAAA,KACD,IAEA,4CAAC,SAAI,WAAU,oCACd,sDAAC,6BAAQ,GACV;AAEF;",
"names": ["blockEditorPrivateApis", "clsx", "VisualEditor", "editorStore"]
}