sykpcomposer 0.0.107 → 0.0.108
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/{ContentEditable-54fde1c0.js → ContentEditable-f6866749.js} +2 -2
- package/dist/{ContentEditable-54fde1c0.js.map → ContentEditable-f6866749.js.map} +1 -1
- package/dist/{ImageComponent-61b023b9.js → ImageComponent-80db8e2d.js} +3 -3
- package/dist/{ImageComponent-61b023b9.js.map → ImageComponent-80db8e2d.js.map} +1 -1
- package/dist/{InlineImageComponent-53ea46f9.js → InlineImageComponent-ad7a48c1.js} +3 -3
- package/dist/{InlineImageComponent-53ea46f9.js.map → InlineImageComponent-ad7a48c1.js.map} +1 -1
- package/dist/{index-5f0a6c94.js → index-cb692028.js} +10 -5
- package/dist/{index-5f0a6c94.js.map → index-cb692028.js.map} +1 -1
- package/dist/index.es.js +1 -1
- package/dist/index.umd.js +7 -2
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { j as _, o as x, p as S, q as L, u as O, w as v, d as h, s as P, a as D, x as K, v as $ } from "./index-
|
|
1
|
+
import { j as _, o as x, p as S, q as L, u as O, w as v, d as h, s as P, a as D, x as K, v as $ } from "./index-cb692028.js";
|
|
2
2
|
import { useRef as T, useContext as N, useMemo as R, useEffect as m, useState as W, useCallback as w } from "react";
|
|
3
3
|
function B({
|
|
4
4
|
children: e,
|
|
@@ -94,4 +94,4 @@ export {
|
|
|
94
94
|
F as d,
|
|
95
95
|
G as u
|
|
96
96
|
};
|
|
97
|
-
//# sourceMappingURL=ContentEditable-
|
|
97
|
+
//# sourceMappingURL=ContentEditable-f6866749.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContentEditable-
|
|
1
|
+
{"version":3,"file":"ContentEditable-f6866749.js","sources":["../src/components/ui/Placeholder.tsx","../node_modules/@lexical/react/LexicalNestedComposer.prod.mjs","../node_modules/@lexical/react/useLexicalNodeSelection.prod.mjs","../src/components/ui/ContentEditable.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport './Placeholder.css';\n\nimport * as React from 'react';\nimport {ReactNode} from 'react';\n\nexport default function Placeholder({\n children,\n className,\n}: {\n children: ReactNode;\n className?: string;\n}): JSX.Element {\n return <div className={className || 'Placeholder__root'}>{children}</div>;\n}\n","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport{useCollaborationContext as e}from\"@lexical/react/LexicalCollaborationContext\";import{LexicalComposerContext as t,createLexicalComposerContext as r}from\"@lexical/react/LexicalComposerContext\";import{useRef as o,useContext as n,useMemo as l,useEffect as i}from\"react\";import{jsx as a}from\"react/jsx-runtime\";function s(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,\"default\")?e.default:e}var c=s((function(e){const t=new URLSearchParams;t.append(\"code\",e);for(let e=1;e<arguments.length;e++)t.append(\"v\",arguments[e]);throw Error(`Minified Lexical error #${e}; visit https://lexical.dev/docs/error?${t} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)}));function p(e){const t=e.transform();return null!==t?new Set([t]):new Set}function d({initialEditor:s,children:d,initialNodes:f,initialTheme:u,skipCollabChecks:m}){const h=o(!1),x=n(t);null==x&&c(9);const[_,{getTheme:g}]=x,v=l((()=>{const e=u||g()||void 0,t=r(x,e);if(void 0!==e&&(s._config.theme=e),s._parentEditor=_,f)for(let e of f){let t=null,r=null;if(\"function\"!=typeof e){const o=e;e=o.replace,t=o.with,r=o.withKlass||null}const o=s._nodes.get(e.getType());s._nodes.set(e.getType(),{exportDOM:o?o.exportDOM:void 0,klass:e,replace:t,replaceWithKlass:r,transforms:p(e)})}else{const e=s._nodes=new Map(_._nodes);for(const[t,r]of e)s._nodes.set(t,{exportDOM:r.exportDOM,klass:r.klass,replace:r.replace,replaceWithKlass:r.replaceWithKlass,transforms:p(r.klass)})}return s._config.namespace=_._config.namespace,s._editable=_._editable,[s,t]}),[]),{isCollabActive:w,yjsDocMap:b}=e(),M=m||h.current||b.has(s.getKey());return i((()=>{M&&(h.current=!0)}),[M]),i((()=>_.registerEditableListener((e=>{s.setEditable(e)}))),[s,_]),a(t.Provider,{value:v,children:!w||M?d:null})}export{d as LexicalNestedComposer};\n","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport{useLexicalComposerContext as e}from\"@lexical/react/LexicalComposerContext\";import{$getSelection as t,$isNodeSelection as r,$createNodeSelection as o,$setSelection as n,$getNodeByKey as c}from\"lexical\";import{useState as a,useEffect as i,useCallback as l}from\"react\";function d(e,t){return e.getEditorState().read((()=>{const e=c(t);return null!==e&&e.isSelected()}))}function u(c){const[u]=e(),[p,s]=a((()=>d(u,c)));i((()=>{let e=!0;const t=u.registerUpdateListener((()=>{e&&s(d(u,c))}));return()=>{e=!1,t()}}),[u,c]);return[p,l((e=>{u.update((()=>{let a=t();r(a)||(a=o(),n(a)),r(a)&&(e?a.add(c):a.delete(c))}))}),[u,c]),l((()=>{u.update((()=>{const e=t();r(e)&&e.clear()}))}),[u])]}export{u as useLexicalNodeSelection};\n","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport './ContentEditable.css';\n\nimport {ContentEditable} from '@lexical/react/LexicalContentEditable';\nimport * as React from 'react';\n\nexport default function LexicalContentEditable({\n className,\n style,\n}: {\n className?: string;\n style?: React.CSSProperties;\n}): JSX.Element {\n return (\n <ContentEditable\n className={className || 'ContentEditable__root'}\n style={style}\n />\n );\n}\n"],"names":["Placeholder","children","className","jsx","s","c","e","p","d","f","u","m","h","o","x","n","t","_","g","v","l","r","w","b","M","i","a","LexicalContentEditable","style","ContentEditable"],"mappings":"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","x_google_ignoreList":[1,2]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { j as i, u as J, d as M, w as Y, x as A, $ as B, a as T, b as Q, c as Z, e as K, C as b, f as ee, k as te, g as ne, I as re, r as se, h as ie, i as oe, l as ae, t as ce } from "./index-
|
|
2
|
-
import { u as le, d as ue, L as de, P as me } from "./ContentEditable-
|
|
1
|
+
import { j as i, u as J, d as M, w as Y, x as A, $ as B, a as T, b as Q, c as Z, e as K, C as b, f as ee, k as te, g as ne, I as re, r as se, h as ie, i as oe, l as ae, t as ce } from "./index-cb692028.js";
|
|
2
|
+
import { u as le, d as ue, L as de, P as me } from "./ContentEditable-f6866749.js";
|
|
3
3
|
import { useRef as S, useState as U, useCallback as k, useEffect as ge, Suspense as he } from "react";
|
|
4
4
|
import "react-dom";
|
|
5
5
|
function G(f, w, d) {
|
|
@@ -399,4 +399,4 @@ export {
|
|
|
399
399
|
O as RIGHT_CLICK_IMAGE_COMMAND,
|
|
400
400
|
be as default
|
|
401
401
|
};
|
|
402
|
-
//# sourceMappingURL=ImageComponent-
|
|
402
|
+
//# sourceMappingURL=ImageComponent-80db8e2d.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageComponent-61b023b9.js","sources":["../src/components/ui/ImageResizer.tsx","../src/components/nodes/ImageComponent.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type {LexicalEditor} from 'lexical';\n\nimport * as React from 'react';\nimport {useRef} from 'react';\n\nfunction clamp(value: number, min: number, max: number) {\n return Math.min(Math.max(value, min), max);\n}\n\nconst Direction = {\n east: 1 << 0,\n north: 1 << 3,\n south: 1 << 1,\n west: 1 << 2,\n};\n\nexport default function ImageResizer({\n onResizeStart,\n onResizeEnd,\n buttonRef,\n imageRef,\n maxWidth,\n editor,\n showCaption,\n setShowCaption,\n captionsEnabled,\n}: {\n editor: LexicalEditor;\n buttonRef: {current: null | HTMLButtonElement};\n imageRef: {current: null | HTMLElement};\n maxWidth?: number;\n onResizeEnd: (width: 'inherit' | number, height: 'inherit' | number) => void;\n onResizeStart: () => void;\n setShowCaption: (show: boolean) => void;\n showCaption: boolean;\n captionsEnabled: boolean;\n}): JSX.Element {\n const controlWrapperRef = useRef<HTMLDivElement>(null);\n const userSelect = useRef({\n priority: '',\n value: 'default',\n });\n const positioningRef = useRef<{\n currentHeight: 'inherit' | number;\n currentWidth: 'inherit' | number;\n direction: number;\n isResizing: boolean;\n ratio: number;\n startHeight: number;\n startWidth: number;\n startX: number;\n startY: number;\n }>({\n currentHeight: 0,\n currentWidth: 0,\n direction: 0,\n isResizing: false,\n ratio: 0,\n startHeight: 0,\n startWidth: 0,\n startX: 0,\n startY: 0,\n });\n const editorRootElement = editor.getRootElement();\n // Find max width, accounting for editor padding.\n const maxWidthContainer = maxWidth\n ? maxWidth\n : editorRootElement !== null\n ? editorRootElement.getBoundingClientRect().width - 20\n : 100;\n const maxHeightContainer =\n editorRootElement !== null\n ? editorRootElement.getBoundingClientRect().height - 20\n : 100;\n\n const minWidth = 100;\n const minHeight = 100;\n\n const setStartCursor = (direction: number) => {\n const ew = direction === Direction.east || direction === Direction.west;\n const ns = direction === Direction.north || direction === Direction.south;\n const nwse =\n (direction & Direction.north && direction & Direction.west) ||\n (direction & Direction.south && direction & Direction.east);\n\n const cursorDir = ew ? 'ew' : ns ? 'ns' : nwse ? 'nwse' : 'nesw';\n\n if (editorRootElement !== null) {\n editorRootElement.style.setProperty(\n 'cursor',\n `${cursorDir}-resize`,\n 'important',\n );\n }\n if (document.body !== null) {\n document.body.style.setProperty(\n 'cursor',\n `${cursorDir}-resize`,\n 'important',\n );\n userSelect.current.value = document.body.style.getPropertyValue(\n '-webkit-user-select',\n );\n userSelect.current.priority = document.body.style.getPropertyPriority(\n '-webkit-user-select',\n );\n document.body.style.setProperty(\n '-webkit-user-select',\n `none`,\n 'important',\n );\n }\n };\n\n const setEndCursor = () => {\n if (editorRootElement !== null) {\n editorRootElement.style.setProperty('cursor', 'text');\n }\n if (document.body !== null) {\n document.body.style.setProperty('cursor', 'default');\n document.body.style.setProperty(\n '-webkit-user-select',\n userSelect.current.value,\n userSelect.current.priority,\n );\n }\n };\n\n const handlePointerDown = (\n event: React.PointerEvent<HTMLDivElement>,\n direction: number,\n ) => {\n if (!editor.isEditable()) {\n return;\n }\n\n const image = imageRef.current;\n const controlWrapper = controlWrapperRef.current;\n\n if (image !== null && controlWrapper !== null) {\n event.preventDefault();\n const {width, height} = image.getBoundingClientRect();\n const positioning = positioningRef.current;\n positioning.startWidth = width;\n positioning.startHeight = height;\n positioning.ratio = width / height;\n positioning.currentWidth = width;\n positioning.currentHeight = height;\n positioning.startX = event.clientX;\n positioning.startY = event.clientY;\n positioning.isResizing = true;\n positioning.direction = direction;\n\n setStartCursor(direction);\n onResizeStart();\n\n controlWrapper.classList.add('image-control-wrapper--resizing');\n image.style.height = `${height}px`;\n image.style.width = `${width}px`;\n\n document.addEventListener('pointermove', handlePointerMove);\n document.addEventListener('pointerup', handlePointerUp);\n }\n };\n const handlePointerMove = (event: PointerEvent) => {\n const image = imageRef.current;\n const positioning = positioningRef.current;\n\n const isHorizontal =\n positioning.direction & (Direction.east | Direction.west);\n const isVertical =\n positioning.direction & (Direction.south | Direction.north);\n\n if (image !== null && positioning.isResizing) {\n // Corner cursor\n if (isHorizontal && isVertical) {\n let diff = Math.floor(positioning.startX - event.clientX);\n diff = positioning.direction & Direction.east ? -diff : diff;\n\n const width = clamp(\n positioning.startWidth + diff,\n minWidth,\n maxWidthContainer,\n );\n\n const height = width / positioning.ratio;\n image.style.width = `${width}px`;\n image.style.height = `${height}px`;\n positioning.currentHeight = height;\n positioning.currentWidth = width;\n } else if (isVertical) {\n let diff = Math.floor(positioning.startY - event.clientY);\n diff = positioning.direction & Direction.south ? -diff : diff;\n\n const height = clamp(\n positioning.startHeight + diff,\n minHeight,\n maxHeightContainer,\n );\n\n image.style.height = `${height}px`;\n positioning.currentHeight = height;\n } else {\n let diff = Math.floor(positioning.startX - event.clientX);\n diff = positioning.direction & Direction.east ? -diff : diff;\n\n const width = clamp(\n positioning.startWidth + diff,\n minWidth,\n maxWidthContainer,\n );\n\n image.style.width = `${width}px`;\n positioning.currentWidth = width;\n }\n }\n };\n const handlePointerUp = () => {\n const image = imageRef.current;\n const positioning = positioningRef.current;\n const controlWrapper = controlWrapperRef.current;\n if (image !== null && controlWrapper !== null && positioning.isResizing) {\n const width = positioning.currentWidth;\n const height = positioning.currentHeight;\n positioning.startWidth = 0;\n positioning.startHeight = 0;\n positioning.ratio = 0;\n positioning.startX = 0;\n positioning.startY = 0;\n positioning.currentWidth = 0;\n positioning.currentHeight = 0;\n positioning.isResizing = false;\n\n controlWrapper.classList.remove('image-control-wrapper--resizing');\n\n setEndCursor();\n onResizeEnd(width, height);\n\n document.removeEventListener('pointermove', handlePointerMove);\n document.removeEventListener('pointerup', handlePointerUp);\n }\n };\n return (\n <div ref={controlWrapperRef}>\n {!showCaption && captionsEnabled && (\n <button\n className=\"image-caption-button\"\n ref={buttonRef}\n onClick={() => {\n setShowCaption(!showCaption);\n }}>\n Add Caption\n </button>\n )}\n <div\n className=\"image-resizer image-resizer-n\"\n onPointerDown={(event) => {\n handlePointerDown(event, Direction.north);\n }}\n />\n <div\n className=\"image-resizer image-resizer-ne\"\n onPointerDown={(event) => {\n handlePointerDown(event, Direction.north | Direction.east);\n }}\n />\n <div\n className=\"image-resizer image-resizer-e\"\n onPointerDown={(event) => {\n handlePointerDown(event, Direction.east);\n }}\n />\n <div\n className=\"image-resizer image-resizer-se\"\n onPointerDown={(event) => {\n handlePointerDown(event, Direction.south | Direction.east);\n }}\n />\n <div\n className=\"image-resizer image-resizer-s\"\n onPointerDown={(event) => {\n handlePointerDown(event, Direction.south);\n }}\n />\n <div\n className=\"image-resizer image-resizer-sw\"\n onPointerDown={(event) => {\n handlePointerDown(event, Direction.south | Direction.west);\n }}\n />\n <div\n className=\"image-resizer image-resizer-w\"\n onPointerDown={(event) => {\n handlePointerDown(event, Direction.west);\n }}\n />\n <div\n className=\"image-resizer image-resizer-nw\"\n onPointerDown={(event) => {\n handlePointerDown(event, Direction.north | Direction.west);\n }}\n />\n </div>\n );\n}\n","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type {\n BaseSelection,\n LexicalCommand,\n LexicalEditor,\n NodeKey,\n } from \"lexical\";\n \n import \"./ImageNode.css\";\n \n import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\n import LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\n import { LexicalNestedComposer } from \"@lexical/react/LexicalNestedComposer\";\n import { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\n import { useLexicalNodeSelection } from \"@lexical/react/useLexicalNodeSelection\";\n import { mergeRegister } from \"@lexical/utils\";\n import {\n $getNodeByKey,\n $getSelection,\n $isNodeSelection,\n $isRangeSelection,\n $setSelection,\n CLICK_COMMAND,\n COMMAND_PRIORITY_LOW,\n createCommand,\n DRAGSTART_COMMAND,\n KEY_BACKSPACE_COMMAND,\n KEY_DELETE_COMMAND,\n KEY_ENTER_COMMAND,\n KEY_ESCAPE_COMMAND,\n SELECTION_CHANGE_COMMAND,\n } from \"lexical\";\n import { Suspense, useCallback, useEffect, useRef, useState } from \"react\";\n import ContentEditable from \"../ui/ContentEditable\";\n import ImageResizer from \"../ui/ImageResizer\";\n import Placeholder from \"../ui/Placeholder\";\n import { $isImageNode } from \"./ImageNode\";\n \n const imageCache = new Set();\n \n export const RIGHT_CLICK_IMAGE_COMMAND: LexicalCommand<MouseEvent> =\n createCommand(\"RIGHT_CLICK_IMAGE_COMMAND\");\n \n function useSuspenseImage(src: string) {\n if (!imageCache.has(src)) {\n throw new Promise((resolve) => {\n const img = new Image();\n img.src = src;\n img.onload = () => {\n imageCache.add(src);\n resolve(null);\n };\n });\n }\n }\n \n function LazyImage({\n altText,\n className,\n imageRef,\n src,\n width,\n height,\n maxWidth,\n }: {\n altText: string;\n className: string | null;\n height: \"inherit\" | number;\n imageRef: { current: null | HTMLImageElement };\n maxWidth: number;\n src: string;\n width: \"inherit\" | number;\n }): JSX.Element {\n useSuspenseImage(src);\n return (\n <img\n className={className || undefined}\n src={src}\n alt={altText}\n ref={imageRef}\n style={{\n height,\n maxWidth,\n width,\n }}\n draggable=\"false\"\n />\n );\n }\n \n export default function ImageComponent({\n src,\n altText,\n nodeKey,\n width,\n height,\n maxWidth,\n resizable,\n showCaption,\n caption,\n captionsEnabled,\n }: {\n altText: string;\n caption: LexicalEditor;\n height: \"inherit\" | number;\n maxWidth: number;\n nodeKey: NodeKey;\n resizable: boolean;\n showCaption: boolean;\n src: string;\n width: \"inherit\" | number;\n captionsEnabled: boolean;\n }): JSX.Element {\n const imageRef = useRef<null | HTMLImageElement>(null);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n const [isSelected, setSelected, clearSelection] =\n useLexicalNodeSelection(nodeKey);\n const [isResizing, setIsResizing] = useState<boolean>(false);\n const [editor] = useLexicalComposerContext();\n const [selection, setSelection] = useState<BaseSelection | null>(null);\n const activeEditorRef = useRef<LexicalEditor | null>(null);\n \n const onDelete = useCallback(\n (payload: KeyboardEvent) => {\n if (isSelected && $isNodeSelection($getSelection())) {\n const event: KeyboardEvent = payload;\n event.preventDefault();\n const node = $getNodeByKey(nodeKey);\n if ($isImageNode(node)) {\n node.remove();\n return true;\n }\n }\n return false;\n },\n [isSelected, nodeKey]\n );\n \n const onEnter = useCallback(\n (event: KeyboardEvent) => {\n const latestSelection = $getSelection();\n const buttonElem = buttonRef.current;\n if (\n isSelected &&\n $isNodeSelection(latestSelection) &&\n latestSelection.getNodes().length === 1\n ) {\n if (showCaption) {\n // Move focus into nested editor\n $setSelection(null);\n event.preventDefault();\n caption.focus();\n return true;\n } else if (\n buttonElem !== null &&\n buttonElem !== document.activeElement\n ) {\n event.preventDefault();\n buttonElem.focus();\n return true;\n }\n }\n return false;\n },\n [caption, isSelected, showCaption]\n );\n \n const onEscape = useCallback(\n (event: KeyboardEvent) => {\n if (\n activeEditorRef.current === caption ||\n buttonRef.current === event.target\n ) {\n $setSelection(null);\n editor.update(() => {\n setSelected(true);\n const parentRootElement = editor.getRootElement();\n if (parentRootElement !== null) {\n parentRootElement.focus();\n }\n });\n return true;\n }\n return false;\n },\n [caption, editor, setSelected]\n );\n \n const onClick = useCallback(\n (payload: MouseEvent) => {\n const event = payload;\n \n if (isResizing) {\n return true;\n }\n if (event.target === imageRef.current) {\n if (event.shiftKey) {\n setSelected(!isSelected);\n } else {\n clearSelection();\n setSelected(true);\n }\n return true;\n }\n \n return false;\n },\n [isResizing, isSelected, setSelected, clearSelection]\n );\n \n const onRightClick = useCallback(\n (event: MouseEvent): void => {\n editor.getEditorState().read(() => {\n const latestSelection = $getSelection();\n const domElement = event.target as HTMLElement;\n if (\n domElement.tagName === \"IMG\" &&\n $isRangeSelection(latestSelection) &&\n latestSelection.getNodes().length === 1\n ) {\n editor.dispatchCommand(\n RIGHT_CLICK_IMAGE_COMMAND,\n event as MouseEvent\n );\n }\n });\n },\n [editor]\n );\n \n useEffect(() => {\n let isMounted = true;\n const rootElement = editor.getRootElement();\n const unregister = mergeRegister(\n editor.registerUpdateListener(({ editorState }) => {\n if (isMounted) {\n setSelection(editorState.read(() => $getSelection()));\n }\n }),\n editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n (_, activeEditor) => {\n activeEditorRef.current = activeEditor;\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand<MouseEvent>(\n CLICK_COMMAND,\n onClick,\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand<MouseEvent>(\n RIGHT_CLICK_IMAGE_COMMAND,\n onClick,\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(\n DRAGSTART_COMMAND,\n (event) => {\n if (event.target === imageRef.current) {\n // TODO This is just a temporary workaround for FF to behave like other browsers.\n // Ideally, this handles drag & drop too (and all browsers).\n event.preventDefault();\n return true;\n }\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(\n KEY_DELETE_COMMAND,\n onDelete,\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(\n KEY_BACKSPACE_COMMAND,\n onDelete,\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_LOW),\n editor.registerCommand(KEY_ESCAPE_COMMAND, onEscape, COMMAND_PRIORITY_LOW)\n );\n \n rootElement?.addEventListener(\"contextmenu\", onRightClick);\n \n return () => {\n isMounted = false;\n unregister();\n rootElement?.removeEventListener(\"contextmenu\", onRightClick);\n };\n }, [\n clearSelection,\n editor,\n isResizing,\n isSelected,\n nodeKey,\n onDelete,\n onEnter,\n onEscape,\n onClick,\n onRightClick,\n setSelected,\n ]);\n \n const setShowCaption = () => {\n editor.update(() => {\n const node = $getNodeByKey(nodeKey);\n if ($isImageNode(node)) {\n node.setShowCaption(true);\n }\n });\n };\n \n const onResizeEnd = (\n nextWidth: \"inherit\" | number,\n nextHeight: \"inherit\" | number\n ) => {\n // Delay hiding the resize bars for click case\n setTimeout(() => {\n setIsResizing(false);\n }, 200);\n \n editor.update(() => {\n const node = $getNodeByKey(nodeKey);\n if ($isImageNode(node)) {\n node.setWidthAndHeight(nextWidth, nextHeight);\n }\n });\n };\n \n const onResizeStart = () => {\n setIsResizing(true);\n };\n \n const draggable = isSelected && $isNodeSelection(selection) && !isResizing;\n const isFocused = isSelected || isResizing;\n \n return (\n <Suspense fallback={null}>\n <>\n <div draggable={draggable}>\n <LazyImage\n className={\n isFocused\n ? `focused ${$isNodeSelection(selection) ? \"draggable\" : \"\"}`\n : null\n }\n src={src}\n altText={altText}\n imageRef={imageRef}\n width={width}\n height={height}\n maxWidth={maxWidth}\n />\n </div>\n \n {showCaption && (\n <div className=\"image-caption-container\">\n <LexicalNestedComposer initialEditor={caption}>\n <RichTextPlugin\n contentEditable={\n <ContentEditable className=\"ImageNode__contentEditable\" />\n }\n placeholder={\n <Placeholder className=\"ImageNode__placeholder\">\n Enter a caption...\n </Placeholder>\n }\n ErrorBoundary={LexicalErrorBoundary}\n />\n </LexicalNestedComposer>\n </div>\n )}\n \n {resizable && $isNodeSelection(selection) && isFocused && (\n <ImageResizer\n showCaption={showCaption}\n setShowCaption={setShowCaption}\n editor={editor}\n buttonRef={buttonRef}\n imageRef={imageRef}\n maxWidth={maxWidth}\n onResizeStart={onResizeStart}\n onResizeEnd={onResizeEnd}\n captionsEnabled={captionsEnabled}\n />\n )}\n </>\n </Suspense>\n );\n }\n "],"names":["clamp","value","min","max","Direction","ImageResizer","onResizeStart","onResizeEnd","buttonRef","imageRef","maxWidth","editor","showCaption","setShowCaption","captionsEnabled","controlWrapperRef","useRef","userSelect","positioningRef","editorRootElement","maxWidthContainer","maxHeightContainer","minWidth","minHeight","setStartCursor","direction","ew","ns","nwse","cursorDir","setEndCursor","handlePointerDown","event","image","controlWrapper","width","height","positioning","handlePointerMove","handlePointerUp","isHorizontal","isVertical","diff","jsxs","jsx","imageCache","RIGHT_CLICK_IMAGE_COMMAND","createCommand","useSuspenseImage","src","resolve","img","LazyImage","altText","className","ImageComponent","nodeKey","resizable","caption","isSelected","setSelected","clearSelection","useLexicalNodeSelection","isResizing","setIsResizing","useState","useLexicalComposerContext","selection","setSelection","activeEditorRef","onDelete","useCallback","payload","$isNodeSelection","$getSelection","node","$getNodeByKey","$isImageNode","onEnter","latestSelection","buttonElem","$setSelection","onEscape","parentRootElement","onClick","onRightClick","$isRangeSelection","useEffect","isMounted","rootElement","unregister","mergeRegister","editorState","SELECTION_CHANGE_COMMAND","_","activeEditor","COMMAND_PRIORITY_LOW","CLICK_COMMAND","DRAGSTART_COMMAND","KEY_DELETE_COMMAND","KEY_BACKSPACE_COMMAND","KEY_ENTER_COMMAND","KEY_ESCAPE_COMMAND","nextWidth","nextHeight","draggable","isFocused","Suspense","Fragment","LexicalNestedComposer","RichTextPlugin","ContentEditable","Placeholder","LexicalErrorBoundary"],"mappings":";;;;AAaA,SAASA,EAAMC,GAAeC,GAAaC,GAAa;AACtD,SAAO,KAAK,IAAI,KAAK,IAAIF,GAAOC,CAAG,GAAGC,CAAG;AAC3C;AAEA,MAAMC,IAAY;AAAA,EAChB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AACR;AAEA,SAAwBC,GAAa;AAAA,EACnC,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,iBAAAC;AACF,GAUgB;AACR,QAAAC,IAAoBC,EAAuB,IAAI,GAC/CC,IAAaD,EAAO;AAAA,IACxB,UAAU;AAAA,IACV,OAAO;AAAA,EAAA,CACR,GACKE,IAAiBF,EAUpB;AAAA,IACD,eAAe;AAAA,IACf,cAAc;AAAA,IACd,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,QAAQ;AAAA,EAAA,CACT,GACKG,IAAoBR,EAAO,kBAE3BS,IAAoBV,MAEtBS,MAAsB,OACtBA,EAAkB,sBAAwB,EAAA,QAAQ,KAClD,MACEE,IACJF,MAAsB,OAClBA,EAAkB,wBAAwB,SAAS,KACnD,KAEAG,IAAW,KACXC,IAAY,KAEZC,IAAiB,CAACC,MAAsB;AAC5C,UAAMC,IAAKD,MAAcrB,EAAU,QAAQqB,MAAcrB,EAAU,MAC7DuB,IAAKF,MAAcrB,EAAU,SAASqB,MAAcrB,EAAU,OAC9DwB,IACHH,IAAYrB,EAAU,SAASqB,IAAYrB,EAAU,QACrDqB,IAAYrB,EAAU,SAASqB,IAAYrB,EAAU,MAElDyB,IAAYH,IAAK,OAAOC,IAAK,OAAOC,IAAO,SAAS;AAE1D,IAAIT,MAAsB,QACxBA,EAAkB,MAAM;AAAA,MACtB;AAAA,MACA,GAAGU,CAAS;AAAA,MACZ;AAAA,IAAA,GAGA,SAAS,SAAS,SACpB,SAAS,KAAK,MAAM;AAAA,MAClB;AAAA,MACA,GAAGA,CAAS;AAAA,MACZ;AAAA,IAAA,GAEFZ,EAAW,QAAQ,QAAQ,SAAS,KAAK,MAAM;AAAA,MAC7C;AAAA,IAAA,GAEFA,EAAW,QAAQ,WAAW,SAAS,KAAK,MAAM;AAAA,MAChD;AAAA,IAAA,GAEF,SAAS,KAAK,MAAM;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ,GAGIa,IAAe,MAAM;AACzB,IAAIX,MAAsB,QACNA,EAAA,MAAM,YAAY,UAAU,MAAM,GAElD,SAAS,SAAS,SACpB,SAAS,KAAK,MAAM,YAAY,UAAU,SAAS,GACnD,SAAS,KAAK,MAAM;AAAA,MAClB;AAAA,MACAF,EAAW,QAAQ;AAAA,MACnBA,EAAW,QAAQ;AAAA,IAAA;AAAA,EAEvB,GAGIc,IAAoB,CACxBC,GACAP,MACG;AACC,QAAA,CAACd,EAAO;AACV;AAGF,UAAMsB,IAAQxB,EAAS,SACjByB,IAAiBnB,EAAkB;AAErC,QAAAkB,MAAU,QAAQC,MAAmB,MAAM;AAC7C,MAAAF,EAAM,eAAe;AACrB,YAAM,EAAC,OAAAG,GAAO,QAAAC,EAAM,IAAIH,EAAM,sBAAsB,GAC9CI,IAAcnB,EAAe;AACnC,MAAAmB,EAAY,aAAaF,GACzBE,EAAY,cAAcD,GAC1BC,EAAY,QAAQF,IAAQC,GAC5BC,EAAY,eAAeF,GAC3BE,EAAY,gBAAgBD,GAC5BC,EAAY,SAASL,EAAM,SAC3BK,EAAY,SAASL,EAAM,SAC3BK,EAAY,aAAa,IACzBA,EAAY,YAAYZ,GAExBD,EAAeC,CAAS,GACVnB,KAEC4B,EAAA,UAAU,IAAI,iCAAiC,GACxDD,EAAA,MAAM,SAAS,GAAGG,CAAM,MACxBH,EAAA,MAAM,QAAQ,GAAGE,CAAK,MAEnB,SAAA,iBAAiB,eAAeG,CAAiB,GACjD,SAAA,iBAAiB,aAAaC,CAAe;AAAA,IACxD;AAAA,EAAA,GAEID,IAAoB,CAACN,MAAwB;AACjD,UAAMC,IAAQxB,EAAS,SACjB4B,IAAcnB,EAAe,SAE7BsB,IACJH,EAAY,aAAajC,EAAU,OAAOA,EAAU,OAChDqC,IACJJ,EAAY,aAAajC,EAAU,QAAQA,EAAU;AAEnD,QAAA6B,MAAU,QAAQI,EAAY;AAEhC,UAAIG,KAAgBC,GAAY;AAC9B,YAAIC,IAAO,KAAK,MAAML,EAAY,SAASL,EAAM,OAAO;AACxD,QAAAU,IAAOL,EAAY,YAAYjC,EAAU,OAAO,CAACsC,IAAOA;AAExD,cAAMP,IAAQnC;AAAA,UACZqC,EAAY,aAAaK;AAAA,UACzBpB;AAAA,UACAF;AAAA,QAAA,GAGIgB,IAASD,IAAQE,EAAY;AAC7B,QAAAJ,EAAA,MAAM,QAAQ,GAAGE,CAAK,MACtBF,EAAA,MAAM,SAAS,GAAGG,CAAM,MAC9BC,EAAY,gBAAgBD,GAC5BC,EAAY,eAAeF;AAAA,iBAClBM,GAAY;AACrB,YAAIC,IAAO,KAAK,MAAML,EAAY,SAASL,EAAM,OAAO;AACxD,QAAAU,IAAOL,EAAY,YAAYjC,EAAU,QAAQ,CAACsC,IAAOA;AAEzD,cAAMN,IAASpC;AAAA,UACbqC,EAAY,cAAcK;AAAA,UAC1BnB;AAAA,UACAF;AAAA,QAAA;AAGI,QAAAY,EAAA,MAAM,SAAS,GAAGG,CAAM,MAC9BC,EAAY,gBAAgBD;AAAA,MAAA,OACvB;AACL,YAAIM,IAAO,KAAK,MAAML,EAAY,SAASL,EAAM,OAAO;AACxD,QAAAU,IAAOL,EAAY,YAAYjC,EAAU,OAAO,CAACsC,IAAOA;AAExD,cAAMP,IAAQnC;AAAA,UACZqC,EAAY,aAAaK;AAAA,UACzBpB;AAAA,UACAF;AAAA,QAAA;AAGI,QAAAa,EAAA,MAAM,QAAQ,GAAGE,CAAK,MAC5BE,EAAY,eAAeF;AAAA,MAC7B;AAAA,EACF,GAEII,IAAkB,MAAM;AAC5B,UAAMN,IAAQxB,EAAS,SACjB4B,IAAcnB,EAAe,SAC7BgB,IAAiBnB,EAAkB;AACzC,QAAIkB,MAAU,QAAQC,MAAmB,QAAQG,EAAY,YAAY;AACvE,YAAMF,IAAQE,EAAY,cACpBD,IAASC,EAAY;AAC3B,MAAAA,EAAY,aAAa,GACzBA,EAAY,cAAc,GAC1BA,EAAY,QAAQ,GACpBA,EAAY,SAAS,GACrBA,EAAY,SAAS,GACrBA,EAAY,eAAe,GAC3BA,EAAY,gBAAgB,GAC5BA,EAAY,aAAa,IAEVH,EAAA,UAAU,OAAO,iCAAiC,GAEpDJ,KACbvB,EAAY4B,GAAOC,CAAM,GAEhB,SAAA,oBAAoB,eAAeE,CAAiB,GACpD,SAAA,oBAAoB,aAAaC,CAAe;AAAA,IAC3D;AAAA,EAAA;AAGA,SAAAI,gBAAAA,EAAA,KAAC,OAAI,EAAA,KAAK5B,GACP,UAAA;AAAA,IAAA,CAACH,KAAeE,KACf8B,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,KAAKpC;AAAA,QACL,SAAS,MAAM;AACb,UAAAK,EAAe,CAACD,CAAW;AAAA,QAC7B;AAAA,QAAG,UAAA;AAAA,MAAA;AAAA,IAEL;AAAA,IAEFgC,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAe,CAACZ,MAAU;AACN,UAAAD,EAAAC,GAAO5B,EAAU,KAAK;AAAA,QAC1C;AAAA,MAAA;AAAA,IACF;AAAA,IACAwC,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAe,CAACZ,MAAU;AACxB,UAAAD,EAAkBC,GAAO5B,EAAU,QAAQA,EAAU,IAAI;AAAA,QAC3D;AAAA,MAAA;AAAA,IACF;AAAA,IACAwC,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAe,CAACZ,MAAU;AACN,UAAAD,EAAAC,GAAO5B,EAAU,IAAI;AAAA,QACzC;AAAA,MAAA;AAAA,IACF;AAAA,IACAwC,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAe,CAACZ,MAAU;AACxB,UAAAD,EAAkBC,GAAO5B,EAAU,QAAQA,EAAU,IAAI;AAAA,QAC3D;AAAA,MAAA;AAAA,IACF;AAAA,IACAwC,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAe,CAACZ,MAAU;AACN,UAAAD,EAAAC,GAAO5B,EAAU,KAAK;AAAA,QAC1C;AAAA,MAAA;AAAA,IACF;AAAA,IACAwC,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAe,CAACZ,MAAU;AACxB,UAAAD,EAAkBC,GAAO5B,EAAU,QAAQA,EAAU,IAAI;AAAA,QAC3D;AAAA,MAAA;AAAA,IACF;AAAA,IACAwC,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAe,CAACZ,MAAU;AACN,UAAAD,EAAAC,GAAO5B,EAAU,IAAI;AAAA,QACzC;AAAA,MAAA;AAAA,IACF;AAAA,IACAwC,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAe,CAACZ,MAAU;AACxB,UAAAD,EAAkBC,GAAO5B,EAAU,QAAQA,EAAU,IAAI;AAAA,QAC3D;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;AC3QE,MAAMyC,wBAAiB,OAEVC,IACXC,GAAyC;AAE3C,SAASC,GAAiBC,GAAa;AACrC,MAAI,CAACJ,EAAW,IAAII,CAAG;AACf,UAAA,IAAI,QAAQ,CAACC,MAAY;AACvB,YAAAC,IAAM,IAAI;AAChB,MAAAA,EAAI,MAAMF,GACVE,EAAI,SAAS,MAAM;AACjB,QAAAN,EAAW,IAAII,CAAG,GAClBC,EAAQ,IAAI;AAAA,MAAA;AAAA,IACd,CACD;AAEL;AAEA,SAASE,GAAU;AAAA,EACjB,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAA7C;AAAA,EACA,KAAAwC;AAAA,EACA,OAAAd;AAAA,EACA,QAAAC;AAAA,EACA,UAAA1B;AACF,GAQgB;AACd,SAAAsC,GAAiBC,CAAG,GAElBL,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWU,KAAa;AAAA,MACxB,KAAAL;AAAA,MACA,KAAKI;AAAA,MACL,KAAK5C;AAAA,MACL,OAAO;AAAA,QACL,QAAA2B;AAAA,QACA,UAAA1B;AAAA,QACA,OAAAyB;AAAA,MACF;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;AAEA,SAAwBoB,GAAe;AAAA,EACrC,KAAAN;AAAA,EACA,SAAAI;AAAA,EACA,SAAAG;AAAA,EACA,OAAArB;AAAA,EACA,QAAAC;AAAA,EACA,UAAA1B;AAAA,EACA,WAAA+C;AAAA,EACA,aAAA7C;AAAA,EACA,SAAA8C;AAAA,EACA,iBAAA5C;AACF,GAWgB;AACR,QAAAL,IAAWO,EAAgC,IAAI,GAC/CR,IAAYQ,EAAiC,IAAI,GACjD,CAAC2C,GAAYC,GAAaC,CAAc,IAC5CC,GAAwBN,CAAO,GAC3B,CAACO,GAAYC,CAAa,IAAIC,EAAkB,EAAK,GACrD,CAACtD,CAAM,IAAIuD,KACX,CAACC,GAAWC,CAAY,IAAIH,EAA+B,IAAI,GAC/DI,IAAkBrD,EAA6B,IAAI,GAEnDsD,IAAWC;AAAA,IACf,CAACC,MAA2B;AAC1B,UAAIb,KAAcc,EAAiBC,EAAc,CAAC,GAAG;AAEnD,QAD6BF,EACvB,eAAe;AACf,cAAAG,IAAOC,EAAcpB,CAAO;AAC9B,YAAAqB,EAAaF,CAAI;AACnB,iBAAAA,EAAK,OAAO,GACL;AAAA,MAEX;AACO,aAAA;AAAA,IACT;AAAA,IACA,CAAChB,GAAYH,CAAO;AAAA,EAAA,GAGhBsB,IAAUP;AAAA,IACd,CAACvC,MAAyB;AACxB,YAAM+C,IAAkBL,KAClBM,IAAaxE,EAAU;AAE3B,UAAAmD,KACAc,EAAiBM,CAAe,KAChCA,EAAgB,SAAS,EAAE,WAAW,GACtC;AACA,YAAInE;AAEFqE,iBAAAA,EAAc,IAAI,GAClBjD,EAAM,eAAe,GACrB0B,EAAQ,MAAM,GACP;AAEP,YAAAsB,MAAe,QACfA,MAAe,SAAS;AAExB,iBAAAhD,EAAM,eAAe,GACrBgD,EAAW,MAAM,GACV;AAAA,MAEX;AACO,aAAA;AAAA,IACT;AAAA,IACA,CAACtB,GAASC,GAAY/C,CAAW;AAAA,EAAA,GAG7BsE,IAAWX;AAAA,IACf,CAACvC,MAEGqC,EAAgB,YAAYX,KAC5BlD,EAAU,YAAYwB,EAAM,UAE5BiD,EAAc,IAAI,GAClBtE,EAAO,OAAO,MAAM;AAClB,MAAAiD,EAAY,EAAI;AACV,YAAAuB,IAAoBxE,EAAO;AACjC,MAAIwE,MAAsB,QACxBA,EAAkB,MAAM;AAAA,IAC1B,CACD,GACM,MAEF;AAAA,IAET,CAACzB,GAAS/C,GAAQiD,CAAW;AAAA,EAAA,GAGzBwB,IAAUb;AAAA,IACd,CAACC,MAAwB;AACvB,YAAMxC,IAAQwC;AAEd,aAAIT,IACK,KAEL/B,EAAM,WAAWvB,EAAS,WACxBuB,EAAM,WACR4B,EAAY,CAACD,CAAU,KAERE,KACfD,EAAY,EAAI,IAEX,MAGF;AAAA,IACT;AAAA,IACA,CAACG,GAAYJ,GAAYC,GAAaC,CAAc;AAAA,EAAA,GAGhDwB,IAAed;AAAA,IACnB,CAACvC,MAA4B;AACpB,MAAArB,EAAA,iBAAiB,KAAK,MAAM;AACjC,cAAMoE,IAAkBL;AAGtB,QAFiB1C,EAAM,OAEZ,YAAY,SACvBsD,EAAkBP,CAAe,KACjCA,EAAgB,SAAA,EAAW,WAAW,KAE/BpE,EAAA;AAAA,UACLmC;AAAA,UACAd;AAAA,QAAA;AAAA,MAEJ,CACD;AAAA,IACH;AAAA,IACA,CAACrB,CAAM;AAAA,EAAA;AAGT,EAAA4E,GAAU,MAAM;AACd,QAAIC,IAAY;AACV,UAAAC,IAAc9E,EAAO,kBACrB+E,IAAaC;AAAAA,MACjBhF,EAAO,uBAAuB,CAAC,EAAE,aAAAiF,QAAkB;AACjD,QAAIJ,KACFpB,EAAawB,EAAY,KAAK,MAAMlB,EAAA,CAAe,CAAC;AAAA,MACtD,CACD;AAAA,MACD/D,EAAO;AAAA,QACLkF;AAAAA,QACA,CAACC,GAAGC,OACF1B,EAAgB,UAAU0B,GACnB;AAAA,QAETC;AAAAA,MACF;AAAA,MACArF,EAAO;AAAA,QACLsF;AAAAA,QACAb;AAAA,QACAY;AAAAA,MACF;AAAA,MACArF,EAAO;AAAA,QACLmC;AAAA,QACAsC;AAAA,QACAY;AAAAA,MACF;AAAA,MACArF,EAAO;AAAA,QACLuF;AAAAA,QACA,CAAClE,MACKA,EAAM,WAAWvB,EAAS,WAG5BuB,EAAM,eAAe,GACd,MAEF;AAAA,QAETgE;AAAAA,MACF;AAAA,MACArF,EAAO;AAAA,QACLwF;AAAAA,QACA7B;AAAA,QACA0B;AAAAA,MACF;AAAA,MACArF,EAAO;AAAA,QACLyF;AAAAA,QACA9B;AAAA,QACA0B;AAAAA,MACF;AAAA,MACArF,EAAO,gBAAgB0F,IAAmBvB,GAASkB,CAAoB;AAAA,MACvErF,EAAO,gBAAgB2F,GAAoBpB,GAAUc,CAAoB;AAAA,IAAA;AAG9D,WAAAP,KAAA,QAAAA,EAAA,iBAAiB,eAAeJ,IAEtC,MAAM;AACC,MAAAG,IAAA,IACDE,KACED,KAAA,QAAAA,EAAA,oBAAoB,eAAeJ;AAAA,IAAY;AAAA,EAC9D,GACC;AAAA,IACDxB;AAAA,IACAlD;AAAA,IACAoD;AAAA,IACAJ;AAAA,IACAH;AAAA,IACAc;AAAA,IACAQ;AAAA,IACAI;AAAA,IACAE;AAAA,IACAC;AAAA,IACAzB;AAAA,EAAA,CACD;AAED,QAAM/C,IAAiB,MAAM;AAC3B,IAAAF,EAAO,OAAO,MAAM;AACZ,YAAAgE,IAAOC,EAAcpB,CAAO;AAC9B,MAAAqB,EAAaF,CAAI,KACnBA,EAAK,eAAe,EAAI;AAAA,IAC1B,CACD;AAAA,EAAA,GAGGpE,IAAc,CAClBgG,GACAC,MACG;AAEH,eAAW,MAAM;AACf,MAAAxC,EAAc,EAAK;AAAA,OAClB,GAAG,GAENrD,EAAO,OAAO,MAAM;AACZ,YAAAgE,IAAOC,EAAcpB,CAAO;AAC9B,MAAAqB,EAAaF,CAAI,KACdA,EAAA,kBAAkB4B,GAAWC,CAAU;AAAA,IAC9C,CACD;AAAA,EAAA,GAGGlG,IAAgB,MAAM;AAC1B,IAAA0D,EAAc,EAAI;AAAA,EAAA,GAGdyC,IAAY9C,KAAcc,EAAiBN,CAAS,KAAK,CAACJ,GAC1D2C,IAAY/C,KAAcI;AAEhC,SACGnB,gBAAAA,EAAA,IAAA+D,IAAA,EAAS,UAAU,MAClB,UACEhE,gBAAAA,EAAA,KAAAiE,YAAA,EAAA,UAAA;AAAA,IAAAhE,gBAAAA,EAAAA,IAAC,SAAI,WAAA6D,GACH,UAAA7D,gBAAAA,EAAA;AAAA,MAACQ;AAAA,MAAA;AAAA,QACC,WACEsD,IACI,WAAWjC,EAAiBN,CAAS,IAAI,cAAc,EAAE,KACzD;AAAA,QAEN,KAAAlB;AAAA,QACA,SAAAI;AAAA,QACA,UAAA5C;AAAA,QACA,OAAA0B;AAAA,QACA,QAAAC;AAAA,QACA,UAAA1B;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,IAECE,2BACE,OAAI,EAAA,WAAU,2BACb,UAACgC,gBAAAA,EAAA,IAAAiE,IAAA,EAAsB,eAAenD,GACpC,UAAAd,gBAAAA,EAAA;AAAA,MAACkE;AAAAA,MAAA;AAAA,QACC,iBACElE,gBAAAA,EAAAA,IAACmE,IAAgB,EAAA,WAAU,6BAA6B,CAAA;AAAA,QAE1D,aACEnE,gBAAAA,EAAA,IAACoE,IAAY,EAAA,WAAU,0BAAyB,UAEhD,sBAAA;AAAA,QAEF,eAAeC;AAAAA,MAAA;AAAA,OAEnB,EACF,CAAA;AAAA,IAGDxD,KAAagB,EAAiBN,CAAS,KAAKuC,KAC3C9D,gBAAAA,EAAA;AAAA,MAACvC;AAAA,MAAA;AAAA,QACC,aAAAO;AAAA,QACA,gBAAAC;AAAA,QACA,QAAAF;AAAA,QACA,WAAAH;AAAA,QACA,UAAAC;AAAA,QACA,UAAAC;AAAA,QACA,eAAAJ;AAAA,QACA,aAAAC;AAAA,QACA,iBAAAO;AAAA,MAAA;AAAA,IACF;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA;AAEJ;"}
|
|
1
|
+
{"version":3,"file":"ImageComponent-80db8e2d.js","sources":["../src/components/ui/ImageResizer.tsx","../src/components/nodes/ImageComponent.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type {LexicalEditor} from 'lexical';\n\nimport * as React from 'react';\nimport {useRef} from 'react';\n\nfunction clamp(value: number, min: number, max: number) {\n return Math.min(Math.max(value, min), max);\n}\n\nconst Direction = {\n east: 1 << 0,\n north: 1 << 3,\n south: 1 << 1,\n west: 1 << 2,\n};\n\nexport default function ImageResizer({\n onResizeStart,\n onResizeEnd,\n buttonRef,\n imageRef,\n maxWidth,\n editor,\n showCaption,\n setShowCaption,\n captionsEnabled,\n}: {\n editor: LexicalEditor;\n buttonRef: {current: null | HTMLButtonElement};\n imageRef: {current: null | HTMLElement};\n maxWidth?: number;\n onResizeEnd: (width: 'inherit' | number, height: 'inherit' | number) => void;\n onResizeStart: () => void;\n setShowCaption: (show: boolean) => void;\n showCaption: boolean;\n captionsEnabled: boolean;\n}): JSX.Element {\n const controlWrapperRef = useRef<HTMLDivElement>(null);\n const userSelect = useRef({\n priority: '',\n value: 'default',\n });\n const positioningRef = useRef<{\n currentHeight: 'inherit' | number;\n currentWidth: 'inherit' | number;\n direction: number;\n isResizing: boolean;\n ratio: number;\n startHeight: number;\n startWidth: number;\n startX: number;\n startY: number;\n }>({\n currentHeight: 0,\n currentWidth: 0,\n direction: 0,\n isResizing: false,\n ratio: 0,\n startHeight: 0,\n startWidth: 0,\n startX: 0,\n startY: 0,\n });\n const editorRootElement = editor.getRootElement();\n // Find max width, accounting for editor padding.\n const maxWidthContainer = maxWidth\n ? maxWidth\n : editorRootElement !== null\n ? editorRootElement.getBoundingClientRect().width - 20\n : 100;\n const maxHeightContainer =\n editorRootElement !== null\n ? editorRootElement.getBoundingClientRect().height - 20\n : 100;\n\n const minWidth = 100;\n const minHeight = 100;\n\n const setStartCursor = (direction: number) => {\n const ew = direction === Direction.east || direction === Direction.west;\n const ns = direction === Direction.north || direction === Direction.south;\n const nwse =\n (direction & Direction.north && direction & Direction.west) ||\n (direction & Direction.south && direction & Direction.east);\n\n const cursorDir = ew ? 'ew' : ns ? 'ns' : nwse ? 'nwse' : 'nesw';\n\n if (editorRootElement !== null) {\n editorRootElement.style.setProperty(\n 'cursor',\n `${cursorDir}-resize`,\n 'important',\n );\n }\n if (document.body !== null) {\n document.body.style.setProperty(\n 'cursor',\n `${cursorDir}-resize`,\n 'important',\n );\n userSelect.current.value = document.body.style.getPropertyValue(\n '-webkit-user-select',\n );\n userSelect.current.priority = document.body.style.getPropertyPriority(\n '-webkit-user-select',\n );\n document.body.style.setProperty(\n '-webkit-user-select',\n `none`,\n 'important',\n );\n }\n };\n\n const setEndCursor = () => {\n if (editorRootElement !== null) {\n editorRootElement.style.setProperty('cursor', 'text');\n }\n if (document.body !== null) {\n document.body.style.setProperty('cursor', 'default');\n document.body.style.setProperty(\n '-webkit-user-select',\n userSelect.current.value,\n userSelect.current.priority,\n );\n }\n };\n\n const handlePointerDown = (\n event: React.PointerEvent<HTMLDivElement>,\n direction: number,\n ) => {\n if (!editor.isEditable()) {\n return;\n }\n\n const image = imageRef.current;\n const controlWrapper = controlWrapperRef.current;\n\n if (image !== null && controlWrapper !== null) {\n event.preventDefault();\n const {width, height} = image.getBoundingClientRect();\n const positioning = positioningRef.current;\n positioning.startWidth = width;\n positioning.startHeight = height;\n positioning.ratio = width / height;\n positioning.currentWidth = width;\n positioning.currentHeight = height;\n positioning.startX = event.clientX;\n positioning.startY = event.clientY;\n positioning.isResizing = true;\n positioning.direction = direction;\n\n setStartCursor(direction);\n onResizeStart();\n\n controlWrapper.classList.add('image-control-wrapper--resizing');\n image.style.height = `${height}px`;\n image.style.width = `${width}px`;\n\n document.addEventListener('pointermove', handlePointerMove);\n document.addEventListener('pointerup', handlePointerUp);\n }\n };\n const handlePointerMove = (event: PointerEvent) => {\n const image = imageRef.current;\n const positioning = positioningRef.current;\n\n const isHorizontal =\n positioning.direction & (Direction.east | Direction.west);\n const isVertical =\n positioning.direction & (Direction.south | Direction.north);\n\n if (image !== null && positioning.isResizing) {\n // Corner cursor\n if (isHorizontal && isVertical) {\n let diff = Math.floor(positioning.startX - event.clientX);\n diff = positioning.direction & Direction.east ? -diff : diff;\n\n const width = clamp(\n positioning.startWidth + diff,\n minWidth,\n maxWidthContainer,\n );\n\n const height = width / positioning.ratio;\n image.style.width = `${width}px`;\n image.style.height = `${height}px`;\n positioning.currentHeight = height;\n positioning.currentWidth = width;\n } else if (isVertical) {\n let diff = Math.floor(positioning.startY - event.clientY);\n diff = positioning.direction & Direction.south ? -diff : diff;\n\n const height = clamp(\n positioning.startHeight + diff,\n minHeight,\n maxHeightContainer,\n );\n\n image.style.height = `${height}px`;\n positioning.currentHeight = height;\n } else {\n let diff = Math.floor(positioning.startX - event.clientX);\n diff = positioning.direction & Direction.east ? -diff : diff;\n\n const width = clamp(\n positioning.startWidth + diff,\n minWidth,\n maxWidthContainer,\n );\n\n image.style.width = `${width}px`;\n positioning.currentWidth = width;\n }\n }\n };\n const handlePointerUp = () => {\n const image = imageRef.current;\n const positioning = positioningRef.current;\n const controlWrapper = controlWrapperRef.current;\n if (image !== null && controlWrapper !== null && positioning.isResizing) {\n const width = positioning.currentWidth;\n const height = positioning.currentHeight;\n positioning.startWidth = 0;\n positioning.startHeight = 0;\n positioning.ratio = 0;\n positioning.startX = 0;\n positioning.startY = 0;\n positioning.currentWidth = 0;\n positioning.currentHeight = 0;\n positioning.isResizing = false;\n\n controlWrapper.classList.remove('image-control-wrapper--resizing');\n\n setEndCursor();\n onResizeEnd(width, height);\n\n document.removeEventListener('pointermove', handlePointerMove);\n document.removeEventListener('pointerup', handlePointerUp);\n }\n };\n return (\n <div ref={controlWrapperRef}>\n {!showCaption && captionsEnabled && (\n <button\n className=\"image-caption-button\"\n ref={buttonRef}\n onClick={() => {\n setShowCaption(!showCaption);\n }}>\n Add Caption\n </button>\n )}\n <div\n className=\"image-resizer image-resizer-n\"\n onPointerDown={(event) => {\n handlePointerDown(event, Direction.north);\n }}\n />\n <div\n className=\"image-resizer image-resizer-ne\"\n onPointerDown={(event) => {\n handlePointerDown(event, Direction.north | Direction.east);\n }}\n />\n <div\n className=\"image-resizer image-resizer-e\"\n onPointerDown={(event) => {\n handlePointerDown(event, Direction.east);\n }}\n />\n <div\n className=\"image-resizer image-resizer-se\"\n onPointerDown={(event) => {\n handlePointerDown(event, Direction.south | Direction.east);\n }}\n />\n <div\n className=\"image-resizer image-resizer-s\"\n onPointerDown={(event) => {\n handlePointerDown(event, Direction.south);\n }}\n />\n <div\n className=\"image-resizer image-resizer-sw\"\n onPointerDown={(event) => {\n handlePointerDown(event, Direction.south | Direction.west);\n }}\n />\n <div\n className=\"image-resizer image-resizer-w\"\n onPointerDown={(event) => {\n handlePointerDown(event, Direction.west);\n }}\n />\n <div\n className=\"image-resizer image-resizer-nw\"\n onPointerDown={(event) => {\n handlePointerDown(event, Direction.north | Direction.west);\n }}\n />\n </div>\n );\n}\n","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type {\n BaseSelection,\n LexicalCommand,\n LexicalEditor,\n NodeKey,\n } from \"lexical\";\n \n import \"./ImageNode.css\";\n \n import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\n import LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\n import { LexicalNestedComposer } from \"@lexical/react/LexicalNestedComposer\";\n import { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\n import { useLexicalNodeSelection } from \"@lexical/react/useLexicalNodeSelection\";\n import { mergeRegister } from \"@lexical/utils\";\n import {\n $getNodeByKey,\n $getSelection,\n $isNodeSelection,\n $isRangeSelection,\n $setSelection,\n CLICK_COMMAND,\n COMMAND_PRIORITY_LOW,\n createCommand,\n DRAGSTART_COMMAND,\n KEY_BACKSPACE_COMMAND,\n KEY_DELETE_COMMAND,\n KEY_ENTER_COMMAND,\n KEY_ESCAPE_COMMAND,\n SELECTION_CHANGE_COMMAND,\n } from \"lexical\";\n import { Suspense, useCallback, useEffect, useRef, useState } from \"react\";\n import ContentEditable from \"../ui/ContentEditable\";\n import ImageResizer from \"../ui/ImageResizer\";\n import Placeholder from \"../ui/Placeholder\";\n import { $isImageNode } from \"./ImageNode\";\n \n const imageCache = new Set();\n \n export const RIGHT_CLICK_IMAGE_COMMAND: LexicalCommand<MouseEvent> =\n createCommand(\"RIGHT_CLICK_IMAGE_COMMAND\");\n \n function useSuspenseImage(src: string) {\n if (!imageCache.has(src)) {\n throw new Promise((resolve) => {\n const img = new Image();\n img.src = src;\n img.onload = () => {\n imageCache.add(src);\n resolve(null);\n };\n });\n }\n }\n \n function LazyImage({\n altText,\n className,\n imageRef,\n src,\n width,\n height,\n maxWidth,\n }: {\n altText: string;\n className: string | null;\n height: \"inherit\" | number;\n imageRef: { current: null | HTMLImageElement };\n maxWidth: number;\n src: string;\n width: \"inherit\" | number;\n }): JSX.Element {\n useSuspenseImage(src);\n return (\n <img\n className={className || undefined}\n src={src}\n alt={altText}\n ref={imageRef}\n style={{\n height,\n maxWidth,\n width,\n }}\n draggable=\"false\"\n />\n );\n }\n \n export default function ImageComponent({\n src,\n altText,\n nodeKey,\n width,\n height,\n maxWidth,\n resizable,\n showCaption,\n caption,\n captionsEnabled,\n }: {\n altText: string;\n caption: LexicalEditor;\n height: \"inherit\" | number;\n maxWidth: number;\n nodeKey: NodeKey;\n resizable: boolean;\n showCaption: boolean;\n src: string;\n width: \"inherit\" | number;\n captionsEnabled: boolean;\n }): JSX.Element {\n const imageRef = useRef<null | HTMLImageElement>(null);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n const [isSelected, setSelected, clearSelection] =\n useLexicalNodeSelection(nodeKey);\n const [isResizing, setIsResizing] = useState<boolean>(false);\n const [editor] = useLexicalComposerContext();\n const [selection, setSelection] = useState<BaseSelection | null>(null);\n const activeEditorRef = useRef<LexicalEditor | null>(null);\n \n const onDelete = useCallback(\n (payload: KeyboardEvent) => {\n if (isSelected && $isNodeSelection($getSelection())) {\n const event: KeyboardEvent = payload;\n event.preventDefault();\n const node = $getNodeByKey(nodeKey);\n if ($isImageNode(node)) {\n node.remove();\n return true;\n }\n }\n return false;\n },\n [isSelected, nodeKey]\n );\n \n const onEnter = useCallback(\n (event: KeyboardEvent) => {\n const latestSelection = $getSelection();\n const buttonElem = buttonRef.current;\n if (\n isSelected &&\n $isNodeSelection(latestSelection) &&\n latestSelection.getNodes().length === 1\n ) {\n if (showCaption) {\n // Move focus into nested editor\n $setSelection(null);\n event.preventDefault();\n caption.focus();\n return true;\n } else if (\n buttonElem !== null &&\n buttonElem !== document.activeElement\n ) {\n event.preventDefault();\n buttonElem.focus();\n return true;\n }\n }\n return false;\n },\n [caption, isSelected, showCaption]\n );\n \n const onEscape = useCallback(\n (event: KeyboardEvent) => {\n if (\n activeEditorRef.current === caption ||\n buttonRef.current === event.target\n ) {\n $setSelection(null);\n editor.update(() => {\n setSelected(true);\n const parentRootElement = editor.getRootElement();\n if (parentRootElement !== null) {\n parentRootElement.focus();\n }\n });\n return true;\n }\n return false;\n },\n [caption, editor, setSelected]\n );\n \n const onClick = useCallback(\n (payload: MouseEvent) => {\n const event = payload;\n \n if (isResizing) {\n return true;\n }\n if (event.target === imageRef.current) {\n if (event.shiftKey) {\n setSelected(!isSelected);\n } else {\n clearSelection();\n setSelected(true);\n }\n return true;\n }\n \n return false;\n },\n [isResizing, isSelected, setSelected, clearSelection]\n );\n \n const onRightClick = useCallback(\n (event: MouseEvent): void => {\n editor.getEditorState().read(() => {\n const latestSelection = $getSelection();\n const domElement = event.target as HTMLElement;\n if (\n domElement.tagName === \"IMG\" &&\n $isRangeSelection(latestSelection) &&\n latestSelection.getNodes().length === 1\n ) {\n editor.dispatchCommand(\n RIGHT_CLICK_IMAGE_COMMAND,\n event as MouseEvent\n );\n }\n });\n },\n [editor]\n );\n \n useEffect(() => {\n let isMounted = true;\n const rootElement = editor.getRootElement();\n const unregister = mergeRegister(\n editor.registerUpdateListener(({ editorState }) => {\n if (isMounted) {\n setSelection(editorState.read(() => $getSelection()));\n }\n }),\n editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n (_, activeEditor) => {\n activeEditorRef.current = activeEditor;\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand<MouseEvent>(\n CLICK_COMMAND,\n onClick,\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand<MouseEvent>(\n RIGHT_CLICK_IMAGE_COMMAND,\n onClick,\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(\n DRAGSTART_COMMAND,\n (event) => {\n if (event.target === imageRef.current) {\n // TODO This is just a temporary workaround for FF to behave like other browsers.\n // Ideally, this handles drag & drop too (and all browsers).\n event.preventDefault();\n return true;\n }\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(\n KEY_DELETE_COMMAND,\n onDelete,\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(\n KEY_BACKSPACE_COMMAND,\n onDelete,\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_LOW),\n editor.registerCommand(KEY_ESCAPE_COMMAND, onEscape, COMMAND_PRIORITY_LOW)\n );\n \n rootElement?.addEventListener(\"contextmenu\", onRightClick);\n \n return () => {\n isMounted = false;\n unregister();\n rootElement?.removeEventListener(\"contextmenu\", onRightClick);\n };\n }, [\n clearSelection,\n editor,\n isResizing,\n isSelected,\n nodeKey,\n onDelete,\n onEnter,\n onEscape,\n onClick,\n onRightClick,\n setSelected,\n ]);\n \n const setShowCaption = () => {\n editor.update(() => {\n const node = $getNodeByKey(nodeKey);\n if ($isImageNode(node)) {\n node.setShowCaption(true);\n }\n });\n };\n \n const onResizeEnd = (\n nextWidth: \"inherit\" | number,\n nextHeight: \"inherit\" | number\n ) => {\n // Delay hiding the resize bars for click case\n setTimeout(() => {\n setIsResizing(false);\n }, 200);\n \n editor.update(() => {\n const node = $getNodeByKey(nodeKey);\n if ($isImageNode(node)) {\n node.setWidthAndHeight(nextWidth, nextHeight);\n }\n });\n };\n \n const onResizeStart = () => {\n setIsResizing(true);\n };\n \n const draggable = isSelected && $isNodeSelection(selection) && !isResizing;\n const isFocused = isSelected || isResizing;\n \n return (\n <Suspense fallback={null}>\n <>\n <div draggable={draggable}>\n <LazyImage\n className={\n isFocused\n ? `focused ${$isNodeSelection(selection) ? \"draggable\" : \"\"}`\n : null\n }\n src={src}\n altText={altText}\n imageRef={imageRef}\n width={width}\n height={height}\n maxWidth={maxWidth}\n />\n </div>\n \n {showCaption && (\n <div className=\"image-caption-container\">\n <LexicalNestedComposer initialEditor={caption}>\n <RichTextPlugin\n contentEditable={\n <ContentEditable className=\"ImageNode__contentEditable\" />\n }\n placeholder={\n <Placeholder className=\"ImageNode__placeholder\">\n Enter a caption...\n </Placeholder>\n }\n ErrorBoundary={LexicalErrorBoundary}\n />\n </LexicalNestedComposer>\n </div>\n )}\n \n {resizable && $isNodeSelection(selection) && isFocused && (\n <ImageResizer\n showCaption={showCaption}\n setShowCaption={setShowCaption}\n editor={editor}\n buttonRef={buttonRef}\n imageRef={imageRef}\n maxWidth={maxWidth}\n onResizeStart={onResizeStart}\n onResizeEnd={onResizeEnd}\n captionsEnabled={captionsEnabled}\n />\n )}\n </>\n </Suspense>\n );\n }\n "],"names":["clamp","value","min","max","Direction","ImageResizer","onResizeStart","onResizeEnd","buttonRef","imageRef","maxWidth","editor","showCaption","setShowCaption","captionsEnabled","controlWrapperRef","useRef","userSelect","positioningRef","editorRootElement","maxWidthContainer","maxHeightContainer","minWidth","minHeight","setStartCursor","direction","ew","ns","nwse","cursorDir","setEndCursor","handlePointerDown","event","image","controlWrapper","width","height","positioning","handlePointerMove","handlePointerUp","isHorizontal","isVertical","diff","jsxs","jsx","imageCache","RIGHT_CLICK_IMAGE_COMMAND","createCommand","useSuspenseImage","src","resolve","img","LazyImage","altText","className","ImageComponent","nodeKey","resizable","caption","isSelected","setSelected","clearSelection","useLexicalNodeSelection","isResizing","setIsResizing","useState","useLexicalComposerContext","selection","setSelection","activeEditorRef","onDelete","useCallback","payload","$isNodeSelection","$getSelection","node","$getNodeByKey","$isImageNode","onEnter","latestSelection","buttonElem","$setSelection","onEscape","parentRootElement","onClick","onRightClick","$isRangeSelection","useEffect","isMounted","rootElement","unregister","mergeRegister","editorState","SELECTION_CHANGE_COMMAND","_","activeEditor","COMMAND_PRIORITY_LOW","CLICK_COMMAND","DRAGSTART_COMMAND","KEY_DELETE_COMMAND","KEY_BACKSPACE_COMMAND","KEY_ENTER_COMMAND","KEY_ESCAPE_COMMAND","nextWidth","nextHeight","draggable","isFocused","Suspense","Fragment","LexicalNestedComposer","RichTextPlugin","ContentEditable","Placeholder","LexicalErrorBoundary"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { m as $, u as M, d as b, w, x as B, n as U, a as T, c as z, e as O, C as f, f as W, k as q, g as G, I as H, r as J, h as Q, j as e, i as V, l as X, T as Y, S as Z, D as K, B as ee } from "./index-
|
|
2
|
-
import { u as te, d as ne, L as ae, P as se } from "./ContentEditable-
|
|
1
|
+
import { m as $, u as M, d as b, w, x as B, n as U, a as T, c as z, e as O, C as f, f as W, k as q, g as G, I as H, r as J, h as Q, j as e, i as V, l as X, T as Y, S as Z, D as K, B as ee } from "./index-cb692028.js";
|
|
2
|
+
import { u as te, d as ne, L as ae, P as se } from "./ContentEditable-f6866749.js";
|
|
3
3
|
import { useRef as N, useState as I, useCallback as k, useEffect as oe, Suspense as le } from "react";
|
|
4
4
|
import "react-dom";
|
|
5
5
|
const y = /* @__PURE__ */ new Set();
|
|
@@ -246,4 +246,4 @@ export {
|
|
|
246
246
|
ce as UpdateInlineImageDialog,
|
|
247
247
|
fe as default
|
|
248
248
|
};
|
|
249
|
-
//# sourceMappingURL=InlineImageComponent-
|
|
249
|
+
//# sourceMappingURL=InlineImageComponent-ad7a48c1.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlineImageComponent-53ea46f9.js","sources":["../src/components/nodes/InlineImageComponent.tsx"],"sourcesContent":["import type { Position } from \"./InlineImageNode\";\nimport type { BaseSelection, LexicalEditor, NodeKey } from \"lexical\";\n\nimport \"./InlineImageNode.css\";\n\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { LexicalNestedComposer } from \"@lexical/react/LexicalNestedComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { useLexicalNodeSelection } from \"@lexical/react/useLexicalNodeSelection\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n $getNodeByKey,\n $getSelection,\n $isNodeSelection,\n $setSelection,\n CLICK_COMMAND,\n COMMAND_PRIORITY_LOW,\n DRAGSTART_COMMAND,\n KEY_BACKSPACE_COMMAND,\n KEY_DELETE_COMMAND,\n KEY_ENTER_COMMAND,\n KEY_ESCAPE_COMMAND,\n SELECTION_CHANGE_COMMAND,\n} from \"lexical\";\nimport * as React from \"react\";\nimport { Suspense, useCallback, useEffect, useRef, useState } from \"react\";\n\nimport useModal from \"../hooks/useModal\";\nimport Button from \"../ui/Button\";\nimport ContentEditable from \"../ui/ContentEditable\";\nimport { DialogActions } from \"../ui/Dialog\";\nimport Placeholder from \"../ui/Placeholder\";\nimport Select from \"../ui/Select\";\nimport TextInput from \"../ui/TextInput\";\nimport { $isInlineImageNode, InlineImageNode } from \"./InlineImageNode\";\n\nconst imageCache = new Set();\n\nfunction useSuspenseImage(src: string) {\n if (!imageCache.has(src)) {\n throw new Promise((resolve) => {\n const img = new Image();\n img.src = src;\n img.onload = () => {\n imageCache.add(src);\n resolve(null);\n };\n });\n }\n}\n\nfunction LazyImage({\n altText,\n className,\n imageRef,\n src,\n width,\n height,\n position,\n}: {\n altText: string;\n className: string | null;\n height: \"inherit\" | number;\n imageRef: { current: null | HTMLImageElement };\n src: string;\n width: \"inherit\" | number;\n position: Position;\n}): JSX.Element {\n useSuspenseImage(src);\n return (\n <img\n className={className || undefined}\n src={src}\n alt={altText}\n ref={imageRef}\n data-position={position}\n style={{\n display: \"block\",\n height,\n width,\n }}\n draggable=\"false\"\n />\n );\n}\n\nexport function UpdateInlineImageDialog({\n activeEditor,\n nodeKey,\n onClose,\n}: {\n activeEditor: LexicalEditor;\n nodeKey: NodeKey;\n onClose: () => void;\n}): JSX.Element {\n const editorState = activeEditor.getEditorState();\n const node = editorState.read(\n () => $getNodeByKey(nodeKey) as InlineImageNode\n );\n const [altText, setAltText] = useState(node.getAltText());\n const [showCaption, setShowCaption] = useState(node.getShowCaption());\n const [position, setPosition] = useState<Position>(node.getPosition());\n\n const handleShowCaptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n setShowCaption(e.target.checked);\n };\n\n const handlePositionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {\n setPosition(e.target.value as Position);\n };\n\n const handleOnConfirm = () => {\n const payload = { altText, position, showCaption };\n if (node) {\n activeEditor.update(() => {\n node.update(payload);\n });\n }\n onClose();\n };\n\n return (\n <>\n <div style={{ marginBottom: \"1em\" }}>\n <TextInput\n label=\"Alt Text\"\n placeholder=\"Descriptive alternative text\"\n onChange={setAltText}\n value={altText}\n data-test-id=\"image-modal-alt-text-input\"\n />\n </div>\n\n <Select\n style={{ marginBottom: \"1em\", width: \"208px\" }}\n value={position}\n label=\"Position\"\n name=\"position\"\n id=\"position-select\"\n onChange={handlePositionChange}\n >\n <option value=\"left\">Left</option>\n <option value=\"right\">Right</option>\n <option value=\"full\">Full Width</option>\n </Select>\n\n <div className=\"Input__wrapper\">\n <input\n id=\"caption\"\n type=\"checkbox\"\n checked={showCaption}\n onChange={handleShowCaptionChange}\n />\n <label htmlFor=\"caption\">Show Caption</label>\n </div>\n\n <DialogActions>\n <Button\n data-test-id=\"image-modal-file-upload-btn\"\n onClick={() => handleOnConfirm()}\n >\n Confirm\n </Button>\n </DialogActions>\n </>\n );\n}\n\nexport default function InlineImageComponent({\n src,\n altText,\n nodeKey,\n width,\n height,\n showCaption,\n caption,\n position,\n}: {\n altText: string;\n caption: LexicalEditor;\n height: \"inherit\" | number;\n nodeKey: NodeKey;\n showCaption: boolean;\n src: string;\n width: \"inherit\" | number;\n position: Position;\n}): JSX.Element {\n const [modal, showModal] = useModal();\n const imageRef = useRef<null | HTMLImageElement>(null);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n const [isSelected, setSelected, clearSelection] =\n useLexicalNodeSelection(nodeKey);\n const [editor] = useLexicalComposerContext();\n const [selection, setSelection] = useState<BaseSelection | null>(null);\n const activeEditorRef = useRef<LexicalEditor | null>(null);\n\n const onDelete = useCallback(\n (payload: KeyboardEvent) => {\n if (isSelected && $isNodeSelection($getSelection())) {\n const event: KeyboardEvent = payload;\n event.preventDefault();\n const node = $getNodeByKey(nodeKey);\n if ($isInlineImageNode(node)) {\n node.remove();\n return true;\n }\n }\n return false;\n },\n [isSelected, nodeKey]\n );\n\n const onEnter = useCallback(\n (event: KeyboardEvent) => {\n const latestSelection = $getSelection();\n const buttonElem = buttonRef.current;\n if (\n isSelected &&\n $isNodeSelection(latestSelection) &&\n latestSelection.getNodes().length === 1\n ) {\n if (showCaption) {\n // Move focus into nested editor\n $setSelection(null);\n event.preventDefault();\n caption.focus();\n return true;\n } else if (\n buttonElem !== null &&\n buttonElem !== document.activeElement\n ) {\n event.preventDefault();\n buttonElem.focus();\n return true;\n }\n }\n return false;\n },\n [caption, isSelected, showCaption]\n );\n\n const onEscape = useCallback(\n (event: KeyboardEvent) => {\n if (\n activeEditorRef.current === caption ||\n buttonRef.current === event.target\n ) {\n $setSelection(null);\n editor.update(() => {\n setSelected(true);\n const parentRootElement = editor.getRootElement();\n if (parentRootElement !== null) {\n parentRootElement.focus();\n }\n });\n return true;\n }\n return false;\n },\n [caption, editor, setSelected]\n );\n\n useEffect(() => {\n let isMounted = true;\n const unregister = mergeRegister(\n editor.registerUpdateListener(({ editorState }) => {\n if (isMounted) {\n setSelection(editorState.read(() => $getSelection()));\n }\n }),\n editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n (_, activeEditor) => {\n activeEditorRef.current = activeEditor;\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand<MouseEvent>(\n CLICK_COMMAND,\n (payload) => {\n const event = payload;\n if (event.target === imageRef.current) {\n if (event.shiftKey) {\n setSelected(!isSelected);\n } else {\n clearSelection();\n setSelected(true);\n }\n return true;\n }\n\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(\n DRAGSTART_COMMAND,\n (event) => {\n if (event.target === imageRef.current) {\n // TODO This is just a temporary workaround for FF to behave like other browsers.\n // Ideally, this handles drag & drop too (and all browsers).\n event.preventDefault();\n return true;\n }\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(\n KEY_DELETE_COMMAND,\n onDelete,\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(\n KEY_BACKSPACE_COMMAND,\n onDelete,\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_LOW),\n editor.registerCommand(KEY_ESCAPE_COMMAND, onEscape, COMMAND_PRIORITY_LOW)\n );\n return () => {\n isMounted = false;\n unregister();\n };\n }, [\n clearSelection,\n editor,\n isSelected,\n nodeKey,\n onDelete,\n onEnter,\n onEscape,\n setSelected,\n ]);\n\n const draggable = isSelected && $isNodeSelection(selection);\n const isFocused = isSelected;\n return (\n <Suspense fallback={null}>\n <>\n <div draggable={draggable}>\n <button\n className=\"image-edit-button\"\n ref={buttonRef}\n onClick={() => {\n showModal(\"Update Inline Image\", (onClose) => (\n <UpdateInlineImageDialog\n activeEditor={editor}\n nodeKey={nodeKey}\n onClose={onClose}\n />\n ));\n }}\n >\n Edit\n </button>\n <LazyImage\n className={\n isFocused\n ? `focused ${$isNodeSelection(selection) ? \"draggable\" : \"\"}`\n : null\n }\n src={src}\n altText={altText}\n imageRef={imageRef}\n width={width}\n height={height}\n position={position}\n />\n </div>\n {showCaption && (\n <div className=\"image-caption-container\">\n <LexicalNestedComposer initialEditor={caption}>\n <RichTextPlugin\n contentEditable={\n <ContentEditable className=\"InlineImageNode__contentEditable\" />\n }\n placeholder={\n <Placeholder className=\"InlineImageNode__placeholder\">\n Enter a caption...\n </Placeholder>\n }\n ErrorBoundary={LexicalErrorBoundary}\n />\n </LexicalNestedComposer>\n </div>\n )}\n </>\n {modal}\n </Suspense>\n );\n}\n"],"names":["imageCache","useSuspenseImage","src","resolve","img","LazyImage","altText","className","imageRef","width","height","position","jsx","UpdateInlineImageDialog","activeEditor","nodeKey","onClose","node","$getNodeByKey","setAltText","useState","showCaption","setShowCaption","setPosition","handleShowCaptionChange","e","handlePositionChange","handleOnConfirm","payload","jsxs","Fragment","TextInput","Select","DialogActions","Button","InlineImageComponent","caption","modal","showModal","useModal","useRef","buttonRef","isSelected","setSelected","clearSelection","useLexicalNodeSelection","editor","useLexicalComposerContext","selection","setSelection","activeEditorRef","onDelete","useCallback","$isNodeSelection","$getSelection","$isInlineImageNode","onEnter","event","latestSelection","buttonElem","$setSelection","onEscape","parentRootElement","useEffect","isMounted","unregister","mergeRegister","editorState","SELECTION_CHANGE_COMMAND","_","COMMAND_PRIORITY_LOW","CLICK_COMMAND","DRAGSTART_COMMAND","KEY_DELETE_COMMAND","KEY_BACKSPACE_COMMAND","KEY_ENTER_COMMAND","KEY_ESCAPE_COMMAND","draggable","isFocused","Suspense","LexicalNestedComposer","RichTextPlugin","ContentEditable","Placeholder","LexicalErrorBoundary"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"InlineImageComponent-ad7a48c1.js","sources":["../src/components/nodes/InlineImageComponent.tsx"],"sourcesContent":["import type { Position } from \"./InlineImageNode\";\nimport type { BaseSelection, LexicalEditor, NodeKey } from \"lexical\";\n\nimport \"./InlineImageNode.css\";\n\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { LexicalNestedComposer } from \"@lexical/react/LexicalNestedComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { useLexicalNodeSelection } from \"@lexical/react/useLexicalNodeSelection\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n $getNodeByKey,\n $getSelection,\n $isNodeSelection,\n $setSelection,\n CLICK_COMMAND,\n COMMAND_PRIORITY_LOW,\n DRAGSTART_COMMAND,\n KEY_BACKSPACE_COMMAND,\n KEY_DELETE_COMMAND,\n KEY_ENTER_COMMAND,\n KEY_ESCAPE_COMMAND,\n SELECTION_CHANGE_COMMAND,\n} from \"lexical\";\nimport * as React from \"react\";\nimport { Suspense, useCallback, useEffect, useRef, useState } from \"react\";\n\nimport useModal from \"../hooks/useModal\";\nimport Button from \"../ui/Button\";\nimport ContentEditable from \"../ui/ContentEditable\";\nimport { DialogActions } from \"../ui/Dialog\";\nimport Placeholder from \"../ui/Placeholder\";\nimport Select from \"../ui/Select\";\nimport TextInput from \"../ui/TextInput\";\nimport { $isInlineImageNode, InlineImageNode } from \"./InlineImageNode\";\n\nconst imageCache = new Set();\n\nfunction useSuspenseImage(src: string) {\n if (!imageCache.has(src)) {\n throw new Promise((resolve) => {\n const img = new Image();\n img.src = src;\n img.onload = () => {\n imageCache.add(src);\n resolve(null);\n };\n });\n }\n}\n\nfunction LazyImage({\n altText,\n className,\n imageRef,\n src,\n width,\n height,\n position,\n}: {\n altText: string;\n className: string | null;\n height: \"inherit\" | number;\n imageRef: { current: null | HTMLImageElement };\n src: string;\n width: \"inherit\" | number;\n position: Position;\n}): JSX.Element {\n useSuspenseImage(src);\n return (\n <img\n className={className || undefined}\n src={src}\n alt={altText}\n ref={imageRef}\n data-position={position}\n style={{\n display: \"block\",\n height,\n width,\n }}\n draggable=\"false\"\n />\n );\n}\n\nexport function UpdateInlineImageDialog({\n activeEditor,\n nodeKey,\n onClose,\n}: {\n activeEditor: LexicalEditor;\n nodeKey: NodeKey;\n onClose: () => void;\n}): JSX.Element {\n const editorState = activeEditor.getEditorState();\n const node = editorState.read(\n () => $getNodeByKey(nodeKey) as InlineImageNode\n );\n const [altText, setAltText] = useState(node.getAltText());\n const [showCaption, setShowCaption] = useState(node.getShowCaption());\n const [position, setPosition] = useState<Position>(node.getPosition());\n\n const handleShowCaptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n setShowCaption(e.target.checked);\n };\n\n const handlePositionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {\n setPosition(e.target.value as Position);\n };\n\n const handleOnConfirm = () => {\n const payload = { altText, position, showCaption };\n if (node) {\n activeEditor.update(() => {\n node.update(payload);\n });\n }\n onClose();\n };\n\n return (\n <>\n <div style={{ marginBottom: \"1em\" }}>\n <TextInput\n label=\"Alt Text\"\n placeholder=\"Descriptive alternative text\"\n onChange={setAltText}\n value={altText}\n data-test-id=\"image-modal-alt-text-input\"\n />\n </div>\n\n <Select\n style={{ marginBottom: \"1em\", width: \"208px\" }}\n value={position}\n label=\"Position\"\n name=\"position\"\n id=\"position-select\"\n onChange={handlePositionChange}\n >\n <option value=\"left\">Left</option>\n <option value=\"right\">Right</option>\n <option value=\"full\">Full Width</option>\n </Select>\n\n <div className=\"Input__wrapper\">\n <input\n id=\"caption\"\n type=\"checkbox\"\n checked={showCaption}\n onChange={handleShowCaptionChange}\n />\n <label htmlFor=\"caption\">Show Caption</label>\n </div>\n\n <DialogActions>\n <Button\n data-test-id=\"image-modal-file-upload-btn\"\n onClick={() => handleOnConfirm()}\n >\n Confirm\n </Button>\n </DialogActions>\n </>\n );\n}\n\nexport default function InlineImageComponent({\n src,\n altText,\n nodeKey,\n width,\n height,\n showCaption,\n caption,\n position,\n}: {\n altText: string;\n caption: LexicalEditor;\n height: \"inherit\" | number;\n nodeKey: NodeKey;\n showCaption: boolean;\n src: string;\n width: \"inherit\" | number;\n position: Position;\n}): JSX.Element {\n const [modal, showModal] = useModal();\n const imageRef = useRef<null | HTMLImageElement>(null);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n const [isSelected, setSelected, clearSelection] =\n useLexicalNodeSelection(nodeKey);\n const [editor] = useLexicalComposerContext();\n const [selection, setSelection] = useState<BaseSelection | null>(null);\n const activeEditorRef = useRef<LexicalEditor | null>(null);\n\n const onDelete = useCallback(\n (payload: KeyboardEvent) => {\n if (isSelected && $isNodeSelection($getSelection())) {\n const event: KeyboardEvent = payload;\n event.preventDefault();\n const node = $getNodeByKey(nodeKey);\n if ($isInlineImageNode(node)) {\n node.remove();\n return true;\n }\n }\n return false;\n },\n [isSelected, nodeKey]\n );\n\n const onEnter = useCallback(\n (event: KeyboardEvent) => {\n const latestSelection = $getSelection();\n const buttonElem = buttonRef.current;\n if (\n isSelected &&\n $isNodeSelection(latestSelection) &&\n latestSelection.getNodes().length === 1\n ) {\n if (showCaption) {\n // Move focus into nested editor\n $setSelection(null);\n event.preventDefault();\n caption.focus();\n return true;\n } else if (\n buttonElem !== null &&\n buttonElem !== document.activeElement\n ) {\n event.preventDefault();\n buttonElem.focus();\n return true;\n }\n }\n return false;\n },\n [caption, isSelected, showCaption]\n );\n\n const onEscape = useCallback(\n (event: KeyboardEvent) => {\n if (\n activeEditorRef.current === caption ||\n buttonRef.current === event.target\n ) {\n $setSelection(null);\n editor.update(() => {\n setSelected(true);\n const parentRootElement = editor.getRootElement();\n if (parentRootElement !== null) {\n parentRootElement.focus();\n }\n });\n return true;\n }\n return false;\n },\n [caption, editor, setSelected]\n );\n\n useEffect(() => {\n let isMounted = true;\n const unregister = mergeRegister(\n editor.registerUpdateListener(({ editorState }) => {\n if (isMounted) {\n setSelection(editorState.read(() => $getSelection()));\n }\n }),\n editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n (_, activeEditor) => {\n activeEditorRef.current = activeEditor;\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand<MouseEvent>(\n CLICK_COMMAND,\n (payload) => {\n const event = payload;\n if (event.target === imageRef.current) {\n if (event.shiftKey) {\n setSelected(!isSelected);\n } else {\n clearSelection();\n setSelected(true);\n }\n return true;\n }\n\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(\n DRAGSTART_COMMAND,\n (event) => {\n if (event.target === imageRef.current) {\n // TODO This is just a temporary workaround for FF to behave like other browsers.\n // Ideally, this handles drag & drop too (and all browsers).\n event.preventDefault();\n return true;\n }\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(\n KEY_DELETE_COMMAND,\n onDelete,\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(\n KEY_BACKSPACE_COMMAND,\n onDelete,\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_LOW),\n editor.registerCommand(KEY_ESCAPE_COMMAND, onEscape, COMMAND_PRIORITY_LOW)\n );\n return () => {\n isMounted = false;\n unregister();\n };\n }, [\n clearSelection,\n editor,\n isSelected,\n nodeKey,\n onDelete,\n onEnter,\n onEscape,\n setSelected,\n ]);\n\n const draggable = isSelected && $isNodeSelection(selection);\n const isFocused = isSelected;\n return (\n <Suspense fallback={null}>\n <>\n <div draggable={draggable}>\n <button\n className=\"image-edit-button\"\n ref={buttonRef}\n onClick={() => {\n showModal(\"Update Inline Image\", (onClose) => (\n <UpdateInlineImageDialog\n activeEditor={editor}\n nodeKey={nodeKey}\n onClose={onClose}\n />\n ));\n }}\n >\n Edit\n </button>\n <LazyImage\n className={\n isFocused\n ? `focused ${$isNodeSelection(selection) ? \"draggable\" : \"\"}`\n : null\n }\n src={src}\n altText={altText}\n imageRef={imageRef}\n width={width}\n height={height}\n position={position}\n />\n </div>\n {showCaption && (\n <div className=\"image-caption-container\">\n <LexicalNestedComposer initialEditor={caption}>\n <RichTextPlugin\n contentEditable={\n <ContentEditable className=\"InlineImageNode__contentEditable\" />\n }\n placeholder={\n <Placeholder className=\"InlineImageNode__placeholder\">\n Enter a caption...\n </Placeholder>\n }\n ErrorBoundary={LexicalErrorBoundary}\n />\n </LexicalNestedComposer>\n </div>\n )}\n </>\n {modal}\n </Suspense>\n );\n}\n"],"names":["imageCache","useSuspenseImage","src","resolve","img","LazyImage","altText","className","imageRef","width","height","position","jsx","UpdateInlineImageDialog","activeEditor","nodeKey","onClose","node","$getNodeByKey","setAltText","useState","showCaption","setShowCaption","setPosition","handleShowCaptionChange","e","handlePositionChange","handleOnConfirm","payload","jsxs","Fragment","TextInput","Select","DialogActions","Button","InlineImageComponent","caption","modal","showModal","useModal","useRef","buttonRef","isSelected","setSelected","clearSelection","useLexicalNodeSelection","editor","useLexicalComposerContext","selection","setSelection","activeEditorRef","onDelete","useCallback","$isNodeSelection","$getSelection","$isInlineImageNode","onEnter","event","latestSelection","buttonElem","$setSelection","onEscape","parentRootElement","useEffect","isMounted","unregister","mergeRegister","editorState","SELECTION_CHANGE_COMMAND","_","COMMAND_PRIORITY_LOW","CLICK_COMMAND","DRAGSTART_COMMAND","KEY_DELETE_COMMAND","KEY_BACKSPACE_COMMAND","KEY_ENTER_COMMAND","KEY_ESCAPE_COMMAND","draggable","isFocused","Suspense","LexicalNestedComposer","RichTextPlugin","ContentEditable","Placeholder","LexicalErrorBoundary"],"mappings":"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"}
|