payload-better-editor 1.2.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/admin/LiveEditorOverlay.js +1 -3
- package/dist/admin/LiveEditorOverlay.js.map +1 -1
- package/dist/hooks/useOverlayKeyboard.d.ts +1 -2
- package/dist/hooks/useOverlayKeyboard.js +1 -15
- package/dist/hooks/useOverlayKeyboard.js.map +1 -1
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/dist/version.js.map +1 -1
- package/package.json +1 -1
|
@@ -31,14 +31,13 @@ export const LiveEditorOverlay = ({ onClose, blocksField, storageNamespace, admi
|
|
|
31
31
|
storageNamespace: storageNamespace,
|
|
32
32
|
adminPortalSelector: adminPortalSelector,
|
|
33
33
|
children: /*#__PURE__*/ _jsx(LiveEditorOverlayInner, {
|
|
34
|
-
onClose: onClose,
|
|
35
34
|
blocksField: blocksField,
|
|
36
35
|
selectedBlockPath: selectedBlockPath,
|
|
37
36
|
setSelectedBlockPath: setSelectedBlockPath
|
|
38
37
|
})
|
|
39
38
|
});
|
|
40
39
|
};
|
|
41
|
-
const LiveEditorOverlayInner = ({
|
|
40
|
+
const LiveEditorOverlayInner = ({ blocksField, selectedBlockPath, setSelectedBlockPath })=>{
|
|
42
41
|
const settings = useBetterEditorSettings();
|
|
43
42
|
const history = useEditorHistory();
|
|
44
43
|
const { previewURL } = useLivePreviewContext();
|
|
@@ -59,7 +58,6 @@ const LiveEditorOverlayInner = ({ onClose, blocksField, selectedBlockPath, setSe
|
|
|
59
58
|
setSelectedBlockPath
|
|
60
59
|
});
|
|
61
60
|
useOverlayKeyboard({
|
|
62
|
-
onClose,
|
|
63
61
|
history
|
|
64
62
|
});
|
|
65
63
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/admin/LiveEditorOverlay.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useRef, useState } from 'react'\nimport { useLivePreviewContext } from '@payloadcms/ui'\nimport { PreviewFrame } from './PreviewFrame'\nimport { PreviewToolbar } from './PreviewToolbar'\nimport { Sidebar } from './sidebar/Sidebar'\nimport { useBetterEditorSettings } from '../state/useBetterEditorSettings'\nimport { useEditorHistory } from '../state/useEditorHistory'\nimport { useSidebarResize } from '../hooks/useSidebarResize'\nimport { useViewportState } from '../hooks/useViewportState'\nimport { useFullscreenOverlay } from '../hooks/useFullscreenOverlay'\nimport { useBlockActionMessages } from '../hooks/useBlockActionMessages'\nimport { useOverlayKeyboard } from '../hooks/useOverlayKeyboard'\nimport { useFocusTrap } from '../hooks/useFocusTrap'\nimport { OverlayProviders } from '../providers/OverlayProviders'\nimport '../styles/overlay.css'\nimport '../styles/preview.css'\nimport '../styles/sidebar.css'\nimport '../styles/blocks-tab.css'\n\nexport type LiveEditorOverlayProps = {\n onClose: () => void\n blocksField: string\n storageNamespace?: string\n adminPortalSelector?: string\n}\n\nconst RESIZE_HANDLE_PX = 6\n\nconst classes = (...parts: Array<string | false | null | undefined>): string =>\n parts.filter(Boolean).join(' ')\n\nexport const LiveEditorOverlay: React.FC<LiveEditorOverlayProps> = ({\n onClose,\n blocksField,\n storageNamespace,\n adminPortalSelector,\n}) => {\n // Selection state lives outside OverlayProviders so the error boundary's\n // onReset can clear it without remounting providers.\n const [selectedBlockPath, setSelectedBlockPath] = useState<string | null>(null)\n const clearSelection = useCallback(() => setSelectedBlockPath(null), [])\n\n return (\n <OverlayProviders\n onClose={onClose}\n onReset={clearSelection}\n storageNamespace={storageNamespace}\n adminPortalSelector={adminPortalSelector}\n >\n <LiveEditorOverlayInner\n onClose={onClose}\n blocksField={blocksField}\n selectedBlockPath={selectedBlockPath}\n setSelectedBlockPath={setSelectedBlockPath}\n />\n </OverlayProviders>\n )\n}\n\ntype InnerProps = LiveEditorOverlayProps & {\n selectedBlockPath: string | null\n setSelectedBlockPath: React.Dispatch<React.SetStateAction<string | null>>\n}\n\nconst LiveEditorOverlayInner: React.FC<InnerProps> = ({\n onClose,\n blocksField,\n selectedBlockPath,\n setSelectedBlockPath,\n}) => {\n const settings = useBetterEditorSettings()\n const history = useEditorHistory()\n const { previewURL } = useLivePreviewContext()\n\n const { sidebarWidth, isResizing, onResizeStart, onResizeKeyDown } = useSidebarResize(\n settings.sidebarPosition,\n )\n const {\n viewport,\n setViewport,\n setResponsiveWidth,\n viewportWidth,\n } = useViewportState(settings)\n // Shared with the toolbar's width chip, which measures the iframe directly.\n const iframeRef = useRef<HTMLIFrameElement | null>(null)\n\n const [isFullscreen, setIsFullscreen] = useState(false)\n const toggleFullscreen = useCallback(() => setIsFullscreen((v) => !v), [])\n const exitFullscreen = useCallback(() => setIsFullscreen(false), [])\n const overlayRef = useFullscreenOverlay(isFullscreen, exitFullscreen)\n useFocusTrap(overlayRef)\n\n const clearSelection = useCallback(\n () => setSelectedBlockPath(null),\n [setSelectedBlockPath],\n )\n\n const { addBelowRequestId } = useBlockActionMessages({\n selectedBlockPath,\n setSelectedBlockPath,\n })\n\n useOverlayKeyboard({ onClose, history })\n\n const [sidebarCollapsed, setSidebarCollapsed] = useState(false)\n const toggleSidebar = useCallback(() => setSidebarCollapsed((v) => !v), [])\n\n const [interactMode, setInteractMode] = useState(false)\n const toggleInteractMode = useCallback(() => setInteractMode((v) => !v), [])\n\n const isLeft = settings.sidebarPosition === 'left'\n const showSidebar = !sidebarCollapsed\n const gridTemplateColumns = !showSidebar\n ? '1fr'\n : isLeft\n ? `${sidebarWidth}px ${RESIZE_HANDLE_PX}px 1fr`\n : `1fr ${RESIZE_HANDLE_PX}px ${sidebarWidth}px`\n\n return (\n <div\n ref={overlayRef}\n className={classes(\n 'better-editor',\n isResizing && 'better-editor--resizing',\n isFullscreen && 'better-editor--fullscreen',\n )}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Better Editor\"\n tabIndex={-1}\n >\n <div className=\"better-editor__body\" style={{ gridTemplateColumns }}>\n <div className=\"better-editor__preview\" style={{ order: isLeft ? 2 : 0 }}>\n <PreviewToolbar\n history={history}\n viewport={viewport}\n onViewportChange={setViewport}\n iframeRef={iframeRef}\n isFullscreen={isFullscreen}\n onFullscreenToggle={toggleFullscreen}\n interactMode={interactMode}\n onInteractToggle={toggleInteractMode}\n sidebarCollapsed={sidebarCollapsed}\n onSidebarToggle={toggleSidebar}\n />\n <div className=\"better-editor__preview-stage\">\n <PreviewFrame\n iframeRef={iframeRef}\n previewURL={previewURL}\n hoverColorTopLevel={settings.hoverColorTopLevel}\n hoverColorNested={settings.hoverColorNested}\n hoverOutlineWidth={settings.hoverOutlineWidth}\n showHoverToolbar={settings.showHoverToolbar}\n hoverToolbarPosition={settings.hoverToolbarPosition}\n selectedBlockPath={selectedBlockPath}\n interactMode={interactMode}\n viewport={viewport}\n viewportWidth={viewportWidth}\n resizable={viewport === 'responsive'}\n onResize={setResponsiveWidth}\n />\n </div>\n </div>\n {showSidebar ? (\n <>\n <div\n className=\"better-editor__resize-handle\"\n style={{ order: 1 }}\n role=\"separator\"\n aria-orientation=\"vertical\"\n aria-label=\"Resize sidebar (use ← / → arrow keys)\"\n aria-valuenow={sidebarWidth}\n tabIndex={0}\n onMouseDown={onResizeStart}\n onKeyDown={onResizeKeyDown}\n />\n <aside\n className=\"better-editor__sidebar\"\n style={{ order: isLeft ? 0 : 2 }}\n >\n <Sidebar\n selectedBlockPath={selectedBlockPath}\n onClearSelection={clearSelection}\n onSelectPath={setSelectedBlockPath}\n forceFullWidthFields={settings.forceFullWidthFields}\n blocksField={blocksField}\n addBelowRequestId={addBelowRequestId}\n />\n </aside>\n </>\n ) : null}\n </div>\n </div>\n )\n}\n\n"],"names":["React","useCallback","useRef","useState","useLivePreviewContext","PreviewFrame","PreviewToolbar","Sidebar","useBetterEditorSettings","useEditorHistory","useSidebarResize","useViewportState","useFullscreenOverlay","useBlockActionMessages","useOverlayKeyboard","useFocusTrap","OverlayProviders","RESIZE_HANDLE_PX","classes","parts","filter","Boolean","join","LiveEditorOverlay","onClose","blocksField","storageNamespace","adminPortalSelector","selectedBlockPath","setSelectedBlockPath","clearSelection","onReset","LiveEditorOverlayInner","settings","history","previewURL","sidebarWidth","isResizing","onResizeStart","onResizeKeyDown","sidebarPosition","viewport","setViewport","setResponsiveWidth","viewportWidth","iframeRef","isFullscreen","setIsFullscreen","toggleFullscreen","v","exitFullscreen","overlayRef","addBelowRequestId","sidebarCollapsed","setSidebarCollapsed","toggleSidebar","interactMode","setInteractMode","toggleInteractMode","isLeft","showSidebar","gridTemplateColumns","div","ref","className","role","aria-modal","aria-label","tabIndex","style","order","onViewportChange","onFullscreenToggle","onInteractToggle","onSidebarToggle","hoverColorTopLevel","hoverColorNested","hoverOutlineWidth","showHoverToolbar","hoverToolbarPosition","resizable","onResize","aria-orientation","aria-valuenow","onMouseDown","onKeyDown","aside","onClearSelection","onSelectPath","forceFullWidthFields"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/admin/LiveEditorOverlay.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useRef, useState } from 'react'\nimport { useLivePreviewContext } from '@payloadcms/ui'\nimport { PreviewFrame } from './PreviewFrame'\nimport { PreviewToolbar } from './PreviewToolbar'\nimport { Sidebar } from './sidebar/Sidebar'\nimport { useBetterEditorSettings } from '../state/useBetterEditorSettings'\nimport { useEditorHistory } from '../state/useEditorHistory'\nimport { useSidebarResize } from '../hooks/useSidebarResize'\nimport { useViewportState } from '../hooks/useViewportState'\nimport { useFullscreenOverlay } from '../hooks/useFullscreenOverlay'\nimport { useBlockActionMessages } from '../hooks/useBlockActionMessages'\nimport { useOverlayKeyboard } from '../hooks/useOverlayKeyboard'\nimport { useFocusTrap } from '../hooks/useFocusTrap'\nimport { OverlayProviders } from '../providers/OverlayProviders'\nimport '../styles/overlay.css'\nimport '../styles/preview.css'\nimport '../styles/sidebar.css'\nimport '../styles/blocks-tab.css'\n\nexport type LiveEditorOverlayProps = {\n onClose: () => void\n blocksField: string\n storageNamespace?: string\n adminPortalSelector?: string\n}\n\nconst RESIZE_HANDLE_PX = 6\n\nconst classes = (...parts: Array<string | false | null | undefined>): string =>\n parts.filter(Boolean).join(' ')\n\nexport const LiveEditorOverlay: React.FC<LiveEditorOverlayProps> = ({\n onClose,\n blocksField,\n storageNamespace,\n adminPortalSelector,\n}) => {\n // Selection state lives outside OverlayProviders so the error boundary's\n // onReset can clear it without remounting providers.\n const [selectedBlockPath, setSelectedBlockPath] = useState<string | null>(null)\n const clearSelection = useCallback(() => setSelectedBlockPath(null), [])\n\n return (\n <OverlayProviders\n onClose={onClose}\n onReset={clearSelection}\n storageNamespace={storageNamespace}\n adminPortalSelector={adminPortalSelector}\n >\n <LiveEditorOverlayInner\n blocksField={blocksField}\n selectedBlockPath={selectedBlockPath}\n setSelectedBlockPath={setSelectedBlockPath}\n />\n </OverlayProviders>\n )\n}\n\ntype InnerProps = Omit<LiveEditorOverlayProps, 'onClose'> & {\n selectedBlockPath: string | null\n setSelectedBlockPath: React.Dispatch<React.SetStateAction<string | null>>\n}\n\nconst LiveEditorOverlayInner: React.FC<InnerProps> = ({\n blocksField,\n selectedBlockPath,\n setSelectedBlockPath,\n}) => {\n const settings = useBetterEditorSettings()\n const history = useEditorHistory()\n const { previewURL } = useLivePreviewContext()\n\n const { sidebarWidth, isResizing, onResizeStart, onResizeKeyDown } = useSidebarResize(\n settings.sidebarPosition,\n )\n const {\n viewport,\n setViewport,\n setResponsiveWidth,\n viewportWidth,\n } = useViewportState(settings)\n // Shared with the toolbar's width chip, which measures the iframe directly.\n const iframeRef = useRef<HTMLIFrameElement | null>(null)\n\n const [isFullscreen, setIsFullscreen] = useState(false)\n const toggleFullscreen = useCallback(() => setIsFullscreen((v) => !v), [])\n const exitFullscreen = useCallback(() => setIsFullscreen(false), [])\n const overlayRef = useFullscreenOverlay(isFullscreen, exitFullscreen)\n useFocusTrap(overlayRef)\n\n const clearSelection = useCallback(\n () => setSelectedBlockPath(null),\n [setSelectedBlockPath],\n )\n\n const { addBelowRequestId } = useBlockActionMessages({\n selectedBlockPath,\n setSelectedBlockPath,\n })\n\n useOverlayKeyboard({ history })\n\n const [sidebarCollapsed, setSidebarCollapsed] = useState(false)\n const toggleSidebar = useCallback(() => setSidebarCollapsed((v) => !v), [])\n\n const [interactMode, setInteractMode] = useState(false)\n const toggleInteractMode = useCallback(() => setInteractMode((v) => !v), [])\n\n const isLeft = settings.sidebarPosition === 'left'\n const showSidebar = !sidebarCollapsed\n const gridTemplateColumns = !showSidebar\n ? '1fr'\n : isLeft\n ? `${sidebarWidth}px ${RESIZE_HANDLE_PX}px 1fr`\n : `1fr ${RESIZE_HANDLE_PX}px ${sidebarWidth}px`\n\n return (\n <div\n ref={overlayRef}\n className={classes(\n 'better-editor',\n isResizing && 'better-editor--resizing',\n isFullscreen && 'better-editor--fullscreen',\n )}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Better Editor\"\n tabIndex={-1}\n >\n <div className=\"better-editor__body\" style={{ gridTemplateColumns }}>\n <div className=\"better-editor__preview\" style={{ order: isLeft ? 2 : 0 }}>\n <PreviewToolbar\n history={history}\n viewport={viewport}\n onViewportChange={setViewport}\n iframeRef={iframeRef}\n isFullscreen={isFullscreen}\n onFullscreenToggle={toggleFullscreen}\n interactMode={interactMode}\n onInteractToggle={toggleInteractMode}\n sidebarCollapsed={sidebarCollapsed}\n onSidebarToggle={toggleSidebar}\n />\n <div className=\"better-editor__preview-stage\">\n <PreviewFrame\n iframeRef={iframeRef}\n previewURL={previewURL}\n hoverColorTopLevel={settings.hoverColorTopLevel}\n hoverColorNested={settings.hoverColorNested}\n hoverOutlineWidth={settings.hoverOutlineWidth}\n showHoverToolbar={settings.showHoverToolbar}\n hoverToolbarPosition={settings.hoverToolbarPosition}\n selectedBlockPath={selectedBlockPath}\n interactMode={interactMode}\n viewport={viewport}\n viewportWidth={viewportWidth}\n resizable={viewport === 'responsive'}\n onResize={setResponsiveWidth}\n />\n </div>\n </div>\n {showSidebar ? (\n <>\n <div\n className=\"better-editor__resize-handle\"\n style={{ order: 1 }}\n role=\"separator\"\n aria-orientation=\"vertical\"\n aria-label=\"Resize sidebar (use ← / → arrow keys)\"\n aria-valuenow={sidebarWidth}\n tabIndex={0}\n onMouseDown={onResizeStart}\n onKeyDown={onResizeKeyDown}\n />\n <aside\n className=\"better-editor__sidebar\"\n style={{ order: isLeft ? 0 : 2 }}\n >\n <Sidebar\n selectedBlockPath={selectedBlockPath}\n onClearSelection={clearSelection}\n onSelectPath={setSelectedBlockPath}\n forceFullWidthFields={settings.forceFullWidthFields}\n blocksField={blocksField}\n addBelowRequestId={addBelowRequestId}\n />\n </aside>\n </>\n ) : null}\n </div>\n </div>\n )\n}\n\n"],"names":["React","useCallback","useRef","useState","useLivePreviewContext","PreviewFrame","PreviewToolbar","Sidebar","useBetterEditorSettings","useEditorHistory","useSidebarResize","useViewportState","useFullscreenOverlay","useBlockActionMessages","useOverlayKeyboard","useFocusTrap","OverlayProviders","RESIZE_HANDLE_PX","classes","parts","filter","Boolean","join","LiveEditorOverlay","onClose","blocksField","storageNamespace","adminPortalSelector","selectedBlockPath","setSelectedBlockPath","clearSelection","onReset","LiveEditorOverlayInner","settings","history","previewURL","sidebarWidth","isResizing","onResizeStart","onResizeKeyDown","sidebarPosition","viewport","setViewport","setResponsiveWidth","viewportWidth","iframeRef","isFullscreen","setIsFullscreen","toggleFullscreen","v","exitFullscreen","overlayRef","addBelowRequestId","sidebarCollapsed","setSidebarCollapsed","toggleSidebar","interactMode","setInteractMode","toggleInteractMode","isLeft","showSidebar","gridTemplateColumns","div","ref","className","role","aria-modal","aria-label","tabIndex","style","order","onViewportChange","onFullscreenToggle","onInteractToggle","onSidebarToggle","hoverColorTopLevel","hoverColorNested","hoverOutlineWidth","showHoverToolbar","hoverToolbarPosition","resizable","onResize","aria-orientation","aria-valuenow","onMouseDown","onKeyDown","aside","onClearSelection","onSelectPath","forceFullWidthFields"],"mappings":"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"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { useEditorHistory } from '../state/useEditorHistory';
|
|
2
2
|
export type UseOverlayKeyboardArgs = {
|
|
3
|
-
onClose: () => void;
|
|
4
3
|
history: ReturnType<typeof useEditorHistory>;
|
|
5
4
|
};
|
|
6
|
-
export declare const useOverlayKeyboard: ({
|
|
5
|
+
export declare const useOverlayKeyboard: ({ history }: UseOverlayKeyboardArgs) => void;
|
|
@@ -1,26 +1,12 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { useEffect } from 'react';
|
|
3
3
|
import { useLatestRef } from './useLatestRef';
|
|
4
|
-
const
|
|
5
|
-
'INPUT',
|
|
6
|
-
'TEXTAREA',
|
|
7
|
-
'SELECT'
|
|
8
|
-
]);
|
|
9
|
-
// Don't hijack Escape away from text inputs / native dropdowns / rich text
|
|
10
|
-
// editors — users expect it to clear/blur the field first.
|
|
11
|
-
const isEditableTarget = (el)=>!!el && (EDITABLE_TAGS.has(el.tagName) || el.isContentEditable === true);
|
|
12
|
-
export const useOverlayKeyboard = ({ onClose, history })=>{
|
|
4
|
+
export const useOverlayKeyboard = ({ history })=>{
|
|
13
5
|
const handlersRef = useLatestRef({
|
|
14
|
-
onClose,
|
|
15
6
|
history
|
|
16
7
|
});
|
|
17
8
|
useEffect(()=>{
|
|
18
9
|
const onKey = (e)=>{
|
|
19
|
-
if (e.key === 'Escape') {
|
|
20
|
-
if (isEditableTarget(document.activeElement)) return;
|
|
21
|
-
handlersRef.current.onClose();
|
|
22
|
-
return;
|
|
23
|
-
}
|
|
24
10
|
if (!(e.metaKey || e.ctrlKey)) return;
|
|
25
11
|
const k = e.key.toLowerCase();
|
|
26
12
|
if (k === 'z') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/useOverlayKeyboard.ts"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\nimport { useEditorHistory } from '../state/useEditorHistory'\nimport { useLatestRef } from './useLatestRef'\n\nexport type UseOverlayKeyboardArgs = {\n
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/useOverlayKeyboard.ts"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\nimport { useEditorHistory } from '../state/useEditorHistory'\nimport { useLatestRef } from './useLatestRef'\n\nexport type UseOverlayKeyboardArgs = {\n history: ReturnType<typeof useEditorHistory>\n}\n\nexport const useOverlayKeyboard = ({ history }: UseOverlayKeyboardArgs): void => {\n const handlersRef = useLatestRef({ history })\n\n useEffect(() => {\n const onKey = (e: KeyboardEvent) => {\n if (!(e.metaKey || e.ctrlKey)) return\n const k = e.key.toLowerCase()\n if (k === 'z') {\n e.preventDefault()\n const { history: h } = handlersRef.current\n if (e.shiftKey) h.redo()\n else h.undo()\n } else if (k === 'y') {\n e.preventDefault()\n handlersRef.current.history.redo()\n }\n }\n window.addEventListener('keydown', onKey)\n return () => window.removeEventListener('keydown', onKey)\n }, [handlersRef])\n}\n"],"names":["useEffect","useLatestRef","useOverlayKeyboard","history","handlersRef","onKey","e","metaKey","ctrlKey","k","key","toLowerCase","preventDefault","h","current","shiftKey","redo","undo","window","addEventListener","removeEventListener"],"mappings":"AAAA;AAEA,SAASA,SAAS,QAAQ,QAAO;AAEjC,SAASC,YAAY,QAAQ,iBAAgB;AAM7C,OAAO,MAAMC,qBAAqB,CAAC,EAAEC,OAAO,EAA0B;IACpE,MAAMC,cAAcH,aAAa;QAAEE;IAAQ;IAE3CH,UAAU;QACR,MAAMK,QAAQ,CAACC;YACb,IAAI,CAAEA,CAAAA,EAAEC,OAAO,IAAID,EAAEE,OAAO,AAAD,GAAI;YAC/B,MAAMC,IAAIH,EAAEI,GAAG,CAACC,WAAW;YAC3B,IAAIF,MAAM,KAAK;gBACbH,EAAEM,cAAc;gBAChB,MAAM,EAAET,SAASU,CAAC,EAAE,GAAGT,YAAYU,OAAO;gBAC1C,IAAIR,EAAES,QAAQ,EAAEF,EAAEG,IAAI;qBACjBH,EAAEI,IAAI;YACb,OAAO,IAAIR,MAAM,KAAK;gBACpBH,EAAEM,cAAc;gBAChBR,YAAYU,OAAO,CAACX,OAAO,CAACa,IAAI;YAClC;QACF;QACAE,OAAOC,gBAAgB,CAAC,WAAWd;QACnC,OAAO,IAAMa,OAAOE,mBAAmB,CAAC,WAAWf;IACrD,GAAG;QAACD;KAAY;AAClB,EAAC"}
|
package/dist/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const VERSION = "1.2.
|
|
1
|
+
export declare const VERSION = "1.2.1";
|
package/dist/version.js
CHANGED
package/dist/version.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/version.ts"],"sourcesContent":["// Package version, re-exported as VERSION; read by the settings banner without\n// pulling the server entry into the client bundle.\nexport const VERSION = '1.2.
|
|
1
|
+
{"version":3,"sources":["../src/version.ts"],"sourcesContent":["// Package version, re-exported as VERSION; read by the settings banner without\n// pulling the server entry into the client bundle.\nexport const VERSION = '1.2.1'\n"],"names":["VERSION"],"mappings":"AAAA,+EAA+E;AAC/E,mDAAmD;AACnD,OAAO,MAAMA,UAAU,QAAO"}
|
package/package.json
CHANGED