@webiny/lexical-editor 5.41.4 → 5.42.0-beta.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/components/Editor/RichTextEditor.js.map +1 -1
- package/components/LexicalHtmlRenderer.js.map +1 -1
- package/components/Toolbar/Toolbar.js +1 -1
- package/components/Toolbar/Toolbar.js.map +1 -1
- package/components/ToolbarActions/BulletListAction.js.map +1 -1
- package/components/ToolbarActions/FontColorAction.js.map +1 -1
- package/components/ToolbarActions/FontSizeAction.js.map +1 -1
- package/components/ToolbarActions/ImageAction.js.map +1 -1
- package/components/ToolbarActions/NumberedListAction.js.map +1 -1
- package/components/ToolbarActions/TextAlignmentAction.js.map +1 -1
- package/components/ToolbarActions/TypographyAction.js.map +1 -1
- package/package.json +8 -8
- package/plugins/BlurEventPlugin/BlurEventPlugin.js +2 -2
- package/plugins/BlurEventPlugin/BlurEventPlugin.js.map +1 -1
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.js.map +1 -1
- package/plugins/FloatingLinkEditorPlugin/LinkEditForm.js.map +1 -1
- package/plugins/FloatingLinkEditorPlugin/LinkPreviewForm.js.map +1 -1
- package/plugins/FloatingLinkEditorPlugin/isChildOfLinkEditor.js +2 -2
- package/plugins/FloatingLinkEditorPlugin/isChildOfLinkEditor.js.map +1 -1
- package/plugins/FloatingLinkEditorPlugin/useFloatingLinkEditor.js +1 -1
- package/plugins/FloatingLinkEditorPlugin/useFloatingLinkEditor.js.map +1 -1
- package/plugins/LinkPlugin/LinkPlugin.js +2 -2
- package/plugins/LinkPlugin/LinkPlugin.js.map +1 -1
- package/ui/DropDown.js.map +1 -1
- package/ui/ImageResizer.js +27 -27
- package/ui/ImageResizer.js.map +1 -1
- package/ui/TextInput.js.map +1 -1
- package/ui/ToolbarActionDialog.js.map +1 -1
- package/utils/isChildOfFloatingToolbar.js +2 -2
- package/utils/isChildOfFloatingToolbar.js.map +1 -1
- package/utils/point.js.map +1 -1
- package/utils/rect.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_emotion","_LexicalComposer","_text","_LexicalOnChangePlugin","_LexicalAutoFocusPlugin","_LexicalClearEditorPlugin","_LexicalRichTextPlugin","_LexicalErrorBoundary","_reactComposition","_LexicalHistoryPlugin","_LexicalContentEditable","_lexicalTheme","_lexicalNodes","_RichTextEditorContext","_isValidLexicalData","_LexicalUpdateStatePlugin","_BlurEventPlugin","_Placeholder","_generateInitialLexicalValue","_SharedHistoryContext","_LexicalEditorConfig","_normalizeInputValue","_excluded","BaseRichTextEditor","_ref","toolbar","staticToolbar","onChange","nodes","placeholder","children","onBlur","focus","styles","width","height","contentEditableStyles","placeholderStyles","_ref$generateInitialV","generateInitialValue","generateInitialLexicalValue","props","_objectWithoutProperties2","default","themeEmotionMap","toTypographyEmotionMap","css","theme","themeStylesTransformer","editorTheme","useRef","createTheme","config","useLexicalEditorConfig","_useSharedHistoryCont","useSharedHistoryContext","historyState","placeholderElem","createElement","Placeholder","scrollRef","_useState","useState","undefined","_useState2","_slicedToArray2","floatingAnchorElem","setFloatingAnchorElem","onRef","_floatingAnchorElem","sizeStyle","configNodes","map","node","configPlugins","plugins","plugin","Fragment","key","name","element","value","normalizeInputValue","editorValue","isValidLexicalData","initialConfig","editorState","namespace","onError","concat","_toConsumableArray2","allNodes","_objectSpread2","current","emotionMap","handleOnChange","editor","read","getEditorState","isEditorEmpty","$isRootTextContentEmpty","isComposing","newValue","JSON","stringify","toJSON","SharedHistoryContext","LexicalComposer","length","RichTextEditorProvider","toolbarActionPlugins","className","ref","style","overflow","position","OnChangePlugin","UpdateStatePlugin","ClearEditorPlugin","HistoryPlugin","externalHistoryState","BlurEventPlugin","AutoFocusPlugin","RichTextPlugin","contentEditable","ContentEditable","outline","ErrorBoundary","LexicalErrorBoundary","RichTextEditor","exports","makeDecoratable","LexicalEditorWithConfig"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { Fragment, useRef, useState } from \"react\";\nimport { css } from \"emotion\";\nimport { CSSObject } from \"@emotion/react\";\nimport { Klass, LexicalEditor, LexicalNode } from \"lexical\";\nimport { EditorState } from \"lexical/LexicalEditorState\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { $isRootTextContentEmpty } from \"@lexical/text\";\nimport { OnChangePlugin } from \"@lexical/react/LexicalOnChangePlugin\";\nimport { AutoFocusPlugin } from \"@lexical/react/LexicalAutoFocusPlugin\";\nimport { ClearEditorPlugin } from \"@lexical/react/LexicalClearEditorPlugin\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport {\n createTheme,\n EditorTheme,\n ThemeEmotionMap,\n toTypographyEmotionMap\n} from \"@webiny/lexical-theme\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { UpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin\";\nimport { LexicalValue, ToolbarActionPlugin } from \"~/types\";\nimport { Placeholder } from \"~/ui/Placeholder\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { SharedHistoryContext, useSharedHistoryContext } from \"~/context/SharedHistoryContext\";\nimport {\n LexicalEditorWithConfig,\n useLexicalEditorConfig\n} from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { normalizeInputValue } from \"./normalizeInputValue\";\n\nexport interface RichTextEditorProps {\n children?: React.ReactNode | React.ReactNode[];\n classes?: string;\n contentEditableStyles?: React.CSSProperties;\n focus?: boolean;\n height?: number | string;\n nodes?: Klass<LexicalNode>[];\n onBlur?: (editorState: LexicalValue) => void;\n onChange?: (json: LexicalValue) => void;\n placeholder?: string;\n placeholderStyles?: React.CSSProperties;\n staticToolbar?: React.ReactNode;\n styles?: React.CSSProperties;\n tag?: string;\n theme: EditorTheme;\n themeEmotionMap?: ThemeEmotionMap;\n toolbarActionPlugins?: ToolbarActionPlugin[];\n themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;\n toolbar?: React.ReactNode;\n value: LexicalValue | null | undefined;\n width?: number | string;\n generateInitialValue?: () => LexicalValue;\n}\n\nconst BaseRichTextEditor = ({\n toolbar,\n staticToolbar,\n onChange,\n nodes,\n placeholder,\n children,\n onBlur,\n focus,\n styles,\n width,\n height,\n contentEditableStyles,\n placeholderStyles,\n generateInitialValue = generateInitialLexicalValue,\n ...props\n}: RichTextEditorProps) => {\n const themeEmotionMap =\n props.themeEmotionMap ??\n toTypographyEmotionMap(css, props.theme, props.themeStylesTransformer);\n\n const editorTheme = useRef(createTheme(props.theme));\n const config = useLexicalEditorConfig();\n const { historyState } = useSharedHistoryContext();\n const placeholderElem = (\n <Placeholder styles={placeholderStyles}>{placeholder || \"Enter text...\"}</Placeholder>\n );\n const scrollRef = useRef(null);\n const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n undefined\n );\n const onRef = (_floatingAnchorElem: HTMLDivElement) => {\n if (_floatingAnchorElem !== null) {\n setFloatingAnchorElem(_floatingAnchorElem);\n }\n };\n\n const sizeStyle = {\n height: height || \"\",\n width: width || \"\"\n };\n\n const configNodes = config.nodes.map(node => node.node);\n const configPlugins = config.plugins.map(plugin => (\n <Fragment key={plugin.name}>{plugin.element}</Fragment>\n ));\n\n const value = normalizeInputValue(props.value);\n const editorValue = isValidLexicalData(value) ? value : generateInitialValue();\n\n const initialConfig = {\n editorState: null,\n namespace: \"webiny\",\n onError: () => {\n // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n // These are usually resolved in the next component render cycle.\n },\n nodes: [...allNodes, ...configNodes, ...(nodes || [])],\n theme: { ...editorTheme.current, emotionMap: themeEmotionMap }\n };\n\n function handleOnChange(editorState: EditorState, editor: LexicalEditor) {\n editorState.read(() => {\n if (typeof onChange === \"function\") {\n const editorState = editor.getEditorState();\n const isEditorEmpty = $isRootTextContentEmpty(editor.isComposing(), true);\n\n const newValue = JSON.stringify(editorState.toJSON());\n\n // We don't want to call \"onChange\" if editor text is empty, and original `value` is empty.\n if (!value && isEditorEmpty) {\n return;\n }\n\n if (value !== newValue) {\n onChange(newValue);\n }\n }\n });\n }\n\n return (\n /**\n * Once the LexicalComposer is mounted, it caches the `initialConfig` internally, and all future\n * updates to the config will be ignored. This is a problem because we pull in Nodes from our config,\n * and initially, there can be multiple re-renders, while the config object is settled.\n *\n * To bypass this issue, we generate a naive `key` based on the number of Nodes.\n */\n <SharedHistoryContext>\n <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n <RichTextEditorProvider\n theme={props.theme}\n themeEmotionMap={themeEmotionMap}\n toolbarActionPlugins={props.toolbarActionPlugins}\n >\n {staticToolbar ? staticToolbar : null}\n <div\n /* This className is necessary for targeting of editor container from CSS files. */\n className={\"editor-shell\"}\n ref={scrollRef}\n style={{ ...styles, ...sizeStyle, overflow: \"auto\", position: \"relative\" }}\n >\n {/* State plugins. */}\n <OnChangePlugin onChange={handleOnChange} />\n <UpdateStatePlugin value={editorValue} />\n <ClearEditorPlugin />\n <HistoryPlugin externalHistoryState={historyState} />\n {/* Event plugins. */}\n {onBlur && <BlurEventPlugin onBlur={onBlur} />}\n {focus && <AutoFocusPlugin />}\n {/* External plugins and components. */}\n {configPlugins}\n {children}\n <RichTextPlugin\n contentEditable={\n <div className=\"editor-scroller\" style={{ ...sizeStyle }}>\n <div className=\"editor\" ref={onRef}>\n <ContentEditable\n style={{ outline: 0, ...contentEditableStyles }}\n />\n </div>\n </div>\n }\n placeholder={placeholderElem}\n ErrorBoundary={LexicalErrorBoundary}\n />\n {/* Toolbar. */}\n {floatingAnchorElem && toolbar}\n </div>\n </RichTextEditorProvider>\n </LexicalComposer>\n </SharedHistoryContext>\n );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeDecoratable(\"RichTextEditor\", (props: RichTextEditorProps) => {\n return (\n <LexicalEditorWithConfig>\n <BaseRichTextEditor {...props} />\n </LexicalEditorWithConfig>\n );\n});\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_emotion","_LexicalComposer","_text","_LexicalOnChangePlugin","_LexicalAutoFocusPlugin","_LexicalClearEditorPlugin","_LexicalRichTextPlugin","_LexicalErrorBoundary","_reactComposition","_LexicalHistoryPlugin","_LexicalContentEditable","_lexicalTheme","_lexicalNodes","_RichTextEditorContext","_isValidLexicalData","_LexicalUpdateStatePlugin","_BlurEventPlugin","_Placeholder","_generateInitialLexicalValue","_SharedHistoryContext","_LexicalEditorConfig","_normalizeInputValue","_excluded","BaseRichTextEditor","_ref","toolbar","staticToolbar","onChange","nodes","placeholder","children","onBlur","focus","styles","width","height","contentEditableStyles","placeholderStyles","_ref$generateInitialV","generateInitialValue","generateInitialLexicalValue","props","_objectWithoutProperties2","default","themeEmotionMap","toTypographyEmotionMap","css","theme","themeStylesTransformer","editorTheme","useRef","createTheme","config","useLexicalEditorConfig","_useSharedHistoryCont","useSharedHistoryContext","historyState","placeholderElem","createElement","Placeholder","scrollRef","_useState","useState","undefined","_useState2","_slicedToArray2","floatingAnchorElem","setFloatingAnchorElem","onRef","_floatingAnchorElem","sizeStyle","configNodes","map","node","configPlugins","plugins","plugin","Fragment","key","name","element","value","normalizeInputValue","editorValue","isValidLexicalData","initialConfig","editorState","namespace","onError","concat","_toConsumableArray2","allNodes","_objectSpread2","current","emotionMap","handleOnChange","editor","read","getEditorState","isEditorEmpty","$isRootTextContentEmpty","isComposing","newValue","JSON","stringify","toJSON","SharedHistoryContext","LexicalComposer","length","RichTextEditorProvider","toolbarActionPlugins","className","ref","style","overflow","position","OnChangePlugin","UpdateStatePlugin","ClearEditorPlugin","HistoryPlugin","externalHistoryState","BlurEventPlugin","AutoFocusPlugin","RichTextPlugin","contentEditable","ContentEditable","outline","ErrorBoundary","LexicalErrorBoundary","RichTextEditor","exports","makeDecoratable","LexicalEditorWithConfig"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { Fragment, useRef, useState } from \"react\";\nimport { css } from \"emotion\";\nimport { CSSObject } from \"@emotion/react\";\nimport { Klass, LexicalEditor, LexicalNode } from \"lexical\";\nimport { EditorState } from \"lexical/LexicalEditorState\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { $isRootTextContentEmpty } from \"@lexical/text\";\nimport { OnChangePlugin } from \"@lexical/react/LexicalOnChangePlugin\";\nimport { AutoFocusPlugin } from \"@lexical/react/LexicalAutoFocusPlugin\";\nimport { ClearEditorPlugin } from \"@lexical/react/LexicalClearEditorPlugin\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport {\n createTheme,\n EditorTheme,\n ThemeEmotionMap,\n toTypographyEmotionMap\n} from \"@webiny/lexical-theme\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { UpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin\";\nimport { LexicalValue, ToolbarActionPlugin } from \"~/types\";\nimport { Placeholder } from \"~/ui/Placeholder\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { SharedHistoryContext, useSharedHistoryContext } from \"~/context/SharedHistoryContext\";\nimport {\n LexicalEditorWithConfig,\n useLexicalEditorConfig\n} from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { normalizeInputValue } from \"./normalizeInputValue\";\n\nexport interface RichTextEditorProps {\n children?: React.ReactNode | React.ReactNode[];\n classes?: string;\n contentEditableStyles?: React.CSSProperties;\n focus?: boolean;\n height?: number | string;\n nodes?: Klass<LexicalNode>[];\n onBlur?: (editorState: LexicalValue) => void;\n onChange?: (json: LexicalValue) => void;\n placeholder?: string;\n placeholderStyles?: React.CSSProperties;\n staticToolbar?: React.ReactNode;\n styles?: React.CSSProperties;\n tag?: string;\n theme: EditorTheme;\n themeEmotionMap?: ThemeEmotionMap;\n toolbarActionPlugins?: ToolbarActionPlugin[];\n themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;\n toolbar?: React.ReactNode;\n value: LexicalValue | null | undefined;\n width?: number | string;\n generateInitialValue?: () => LexicalValue;\n}\n\nconst BaseRichTextEditor = ({\n toolbar,\n staticToolbar,\n onChange,\n nodes,\n placeholder,\n children,\n onBlur,\n focus,\n styles,\n width,\n height,\n contentEditableStyles,\n placeholderStyles,\n generateInitialValue = generateInitialLexicalValue,\n ...props\n}: RichTextEditorProps) => {\n const themeEmotionMap =\n props.themeEmotionMap ??\n toTypographyEmotionMap(css, props.theme, props.themeStylesTransformer);\n\n const editorTheme = useRef(createTheme(props.theme));\n const config = useLexicalEditorConfig();\n const { historyState } = useSharedHistoryContext();\n const placeholderElem = (\n <Placeholder styles={placeholderStyles}>{placeholder || \"Enter text...\"}</Placeholder>\n );\n const scrollRef = useRef(null);\n const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n undefined\n );\n const onRef = (_floatingAnchorElem: HTMLDivElement) => {\n if (_floatingAnchorElem !== null) {\n setFloatingAnchorElem(_floatingAnchorElem);\n }\n };\n\n const sizeStyle = {\n height: height || \"\",\n width: width || \"\"\n };\n\n const configNodes = config.nodes.map(node => node.node);\n const configPlugins = config.plugins.map(plugin => (\n <Fragment key={plugin.name}>{plugin.element}</Fragment>\n ));\n\n const value = normalizeInputValue(props.value);\n const editorValue = isValidLexicalData(value) ? value : generateInitialValue();\n\n const initialConfig = {\n editorState: null,\n namespace: \"webiny\",\n onError: () => {\n // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n // These are usually resolved in the next component render cycle.\n },\n nodes: [...allNodes, ...configNodes, ...(nodes || [])],\n theme: { ...editorTheme.current, emotionMap: themeEmotionMap }\n };\n\n function handleOnChange(editorState: EditorState, editor: LexicalEditor) {\n editorState.read(() => {\n if (typeof onChange === \"function\") {\n const editorState = editor.getEditorState();\n const isEditorEmpty = $isRootTextContentEmpty(editor.isComposing(), true);\n\n const newValue = JSON.stringify(editorState.toJSON());\n\n // We don't want to call \"onChange\" if editor text is empty, and original `value` is empty.\n if (!value && isEditorEmpty) {\n return;\n }\n\n if (value !== newValue) {\n onChange(newValue);\n }\n }\n });\n }\n\n return (\n /**\n * Once the LexicalComposer is mounted, it caches the `initialConfig` internally, and all future\n * updates to the config will be ignored. This is a problem because we pull in Nodes from our config,\n * and initially, there can be multiple re-renders, while the config object is settled.\n *\n * To bypass this issue, we generate a naive `key` based on the number of Nodes.\n */\n <SharedHistoryContext>\n <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n <RichTextEditorProvider\n theme={props.theme}\n themeEmotionMap={themeEmotionMap}\n toolbarActionPlugins={props.toolbarActionPlugins}\n >\n {staticToolbar ? staticToolbar : null}\n <div\n /* This className is necessary for targeting of editor container from CSS files. */\n className={\"editor-shell\"}\n ref={scrollRef}\n style={{ ...styles, ...sizeStyle, overflow: \"auto\", position: \"relative\" }}\n >\n {/* State plugins. */}\n <OnChangePlugin onChange={handleOnChange} />\n <UpdateStatePlugin value={editorValue} />\n <ClearEditorPlugin />\n <HistoryPlugin externalHistoryState={historyState} />\n {/* Event plugins. */}\n {onBlur && <BlurEventPlugin onBlur={onBlur} />}\n {focus && <AutoFocusPlugin />}\n {/* External plugins and components. */}\n {configPlugins}\n {children}\n <RichTextPlugin\n contentEditable={\n <div className=\"editor-scroller\" style={{ ...sizeStyle }}>\n <div className=\"editor\" ref={onRef}>\n <ContentEditable\n style={{ outline: 0, ...contentEditableStyles }}\n />\n </div>\n </div>\n }\n placeholder={placeholderElem}\n ErrorBoundary={LexicalErrorBoundary}\n />\n {/* Toolbar. */}\n {floatingAnchorElem && toolbar}\n </div>\n </RichTextEditorProvider>\n </LexicalComposer>\n </SharedHistoryContext>\n );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeDecoratable(\"RichTextEditor\", (props: RichTextEditorProps) => {\n return (\n <LexicalEditorWithConfig>\n <BaseRichTextEditor {...props} />\n </LexicalEditorWithConfig>\n );\n});\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_emotion","_LexicalComposer","_LexicalRichTextPlugin","_LexicalContentEditable","_LexicalErrorBoundary","_interopRequireDefault","_lexicalNodes","_lexicalTheme","_isValidLexicalData","_generateInitialLexicalValue","_LexicalUpdateStatePlugin","_RichTextEditorContext","_excluded","LexicalHtmlRenderer","exports","_ref","nodes","value","props","_objectWithoutProperties2","default","theme","_objectSpread2","styles","emotionMap","themeEmotionMap","toTypographyEmotionMap","css","themeStylesTransformer","editorTheme","useRef","createTheme","editorValue","isValidLexicalData","generateInitialLexicalValue","initialConfig","editorState","namespace","onError","editable","concat","_toConsumableArray2","allNodes","current","createElement","LexicalComposer","key","length","RichTextEditorProvider","RichTextPlugin","contentEditable","className","ContentEditable","ErrorBoundary","LexicalErrorBoundary","placeholder","UpdateStatePlugin"],"sources":["LexicalHtmlRenderer.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport { Klass, LexicalNode } from \"lexical\";\nimport { css } from \"emotion\";\nimport { CSSObject } from \"@emotion/react\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport {\n createTheme,\n EditorTheme,\n ThemeEmotionMap,\n toTypographyEmotionMap\n} from \"@webiny/lexical-theme\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { LexicalValue } from \"~/types\";\nimport { UpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\n\ninterface LexicalHtmlRendererProps {\n nodes?: Klass<LexicalNode>[];\n value: LexicalValue | null;\n theme: Partial<EditorTheme>;\n themeEmotionMap?: ThemeEmotionMap;\n themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;\n}\n\nexport const LexicalHtmlRenderer = ({ nodes, value, ...props }: LexicalHtmlRendererProps) => {\n const theme: EditorTheme = { styles: {}, emotionMap: {}, ...props.theme };\n const themeEmotionMap =\n props?.themeEmotionMap ?? toTypographyEmotionMap(css, theme, props.themeStylesTransformer);\n const editorTheme = useRef(createTheme(theme));\n const editorValue = isValidLexicalData(value) ? value : generateInitialLexicalValue();\n\n const initialConfig = {\n // We update the state via the `<LexicalUpdateStatePlugin/>`.\n editorState: null,\n namespace: \"webiny\",\n onError: () => {\n // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n // These are usually resolved in the next component render cycle.\n },\n editable: false,\n nodes: [...allNodes, ...(nodes || [])],\n theme: { ...editorTheme.current, emotionMap: themeEmotionMap, styles: theme.styles }\n };\n\n return (\n <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n <RichTextEditorProvider theme={theme} themeEmotionMap={themeEmotionMap}>\n <RichTextPlugin\n contentEditable={\n <div className=\"editor\">\n <ContentEditable />\n </div>\n }\n ErrorBoundary={LexicalErrorBoundary}\n placeholder={null}\n />\n <UpdateStatePlugin value={editorValue} />\n </RichTextEditorProvider>\n </LexicalComposer>\n );\n};\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,QAAA,GAAAD,OAAA;AAEA,IAAAE,gBAAA,GAAAF,OAAA;AACA,IAAAG,sBAAA,GAAAH,OAAA;AACA,IAAAI,uBAAA,GAAAJ,OAAA;AACA,IAAAK,qBAAA,GAAAC,sBAAA,CAAAN,OAAA;AACA,IAAAO,aAAA,GAAAP,OAAA;AACA,IAAAQ,aAAA,GAAAR,OAAA;AAMA,IAAAS,mBAAA,GAAAT,OAAA;AACA,IAAAU,4BAAA,GAAAV,OAAA;AAEA,IAAAW,yBAAA,GAAAX,OAAA;AACA,IAAAY,sBAAA,GAAAZ,OAAA;AAAyE,IAAAa,SAAA;AAUlE,IAAMC,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAAE,IAAA,EAA6D;EAAA,IAAvDC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAKC,KAAK,OAAAC,yBAAA,CAAAC,OAAA,EAAAL,IAAA,EAAAH,SAAA;EACxD,IAAMS,KAAkB,OAAAC,cAAA,CAAAF,OAAA;IAAKG,MAAM,EAAE,CAAC,CAAC;IAAEC,UAAU,EAAE,CAAC;EAAC,GAAKN,KAAK,CAACG,KAAK,CAAE;EACzE,IAAMI,eAAe,GACjBP,KAAK,EAAEO,eAAe,IAAI,IAAAC,oCAAsB,EAACC,YAAG,EAAEN,KAAK,EAAEH,KAAK,CAACU,sBAAsB,CAAC;EAC9F,IAAMC,WAAW,GAAG,IAAAC,aAAM,EAAC,IAAAC,yBAAW,EAACV,KAAK,CAAC,CAAC;EAC9C,IAAMW,WAAW,GAAG,IAAAC,sCAAkB,EAAChB,KAAK,CAAC,GAAGA,KAAK,GAAG,IAAAiB,wDAA2B,EAAC,CAAC;EAErF,IAAMC,aAAa,GAAG;IAClB;IACAC,WAAW,EAAE,IAAI;IACjBC,SAAS,EAAE,QAAQ;IACnBC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_emotion","_LexicalComposer","_LexicalRichTextPlugin","_LexicalContentEditable","_LexicalErrorBoundary","_interopRequireDefault","_lexicalNodes","_lexicalTheme","_isValidLexicalData","_generateInitialLexicalValue","_LexicalUpdateStatePlugin","_RichTextEditorContext","_excluded","LexicalHtmlRenderer","exports","_ref","nodes","value","props","_objectWithoutProperties2","default","theme","_objectSpread2","styles","emotionMap","themeEmotionMap","toTypographyEmotionMap","css","themeStylesTransformer","editorTheme","useRef","createTheme","editorValue","isValidLexicalData","generateInitialLexicalValue","initialConfig","editorState","namespace","onError","editable","concat","_toConsumableArray2","allNodes","current","createElement","LexicalComposer","key","length","RichTextEditorProvider","RichTextPlugin","contentEditable","className","ContentEditable","ErrorBoundary","LexicalErrorBoundary","placeholder","UpdateStatePlugin"],"sources":["LexicalHtmlRenderer.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport { Klass, LexicalNode } from \"lexical\";\nimport { css } from \"emotion\";\nimport { CSSObject } from \"@emotion/react\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport {\n createTheme,\n EditorTheme,\n ThemeEmotionMap,\n toTypographyEmotionMap\n} from \"@webiny/lexical-theme\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { LexicalValue } from \"~/types\";\nimport { UpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\n\ninterface LexicalHtmlRendererProps {\n nodes?: Klass<LexicalNode>[];\n value: LexicalValue | null;\n theme: Partial<EditorTheme>;\n themeEmotionMap?: ThemeEmotionMap;\n themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;\n}\n\nexport const LexicalHtmlRenderer = ({ nodes, value, ...props }: LexicalHtmlRendererProps) => {\n const theme: EditorTheme = { styles: {}, emotionMap: {}, ...props.theme };\n const themeEmotionMap =\n props?.themeEmotionMap ?? toTypographyEmotionMap(css, theme, props.themeStylesTransformer);\n const editorTheme = useRef(createTheme(theme));\n const editorValue = isValidLexicalData(value) ? value : generateInitialLexicalValue();\n\n const initialConfig = {\n // We update the state via the `<LexicalUpdateStatePlugin/>`.\n editorState: null,\n namespace: \"webiny\",\n onError: () => {\n // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n // These are usually resolved in the next component render cycle.\n },\n editable: false,\n nodes: [...allNodes, ...(nodes || [])],\n theme: { ...editorTheme.current, emotionMap: themeEmotionMap, styles: theme.styles }\n };\n\n return (\n <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n <RichTextEditorProvider theme={theme} themeEmotionMap={themeEmotionMap}>\n <RichTextPlugin\n contentEditable={\n <div className=\"editor\">\n <ContentEditable />\n </div>\n }\n ErrorBoundary={LexicalErrorBoundary}\n placeholder={null}\n />\n <UpdateStatePlugin value={editorValue} />\n </RichTextEditorProvider>\n </LexicalComposer>\n );\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -142,7 +142,7 @@ var Toolbar = exports.Toolbar = function Toolbar(_ref3) {
|
|
|
142
142
|
if (!showToolbar) {
|
|
143
143
|
return null;
|
|
144
144
|
}
|
|
145
|
-
return /*#__PURE__*/(0, _reactDom.createPortal)(
|
|
145
|
+
return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(FloatingToolbar, {
|
|
146
146
|
anchorElem: anchorElem,
|
|
147
147
|
editor: editor
|
|
148
148
|
}), anchorElem);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_reactDom","_utils","_getDOMRangeRect","_setFloatingElemPosition","_LexicalEditorConfig","_useCurrentSelection","_hooks","_isChildOfFloatingToolbar","FloatingToolbar","_ref","anchorElem","editor","_useState","useState","_useState2","_slicedToArray2","default","isVisible","setIsVisible","popupCharStylesEditorRef","useRef","_useLexicalEditorConf","useLexicalEditorConfig","toolbarElements","mouseMoveListener","useCallback","e","current","buttons","style","pointerEvents","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","useEffect","addEventListener","removeEventListener","updateTextFormatFloatingToolbar","selection","$getSelection","popupCharStylesEditorElem","nativeSelection","window","getSelection","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","getDOMRangeRect","setFloatingElemPosition","scrollerElem","parentElement","update","getEditorState","read","mergeRegister","registerUpdateListener","_ref2","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","BLUR_COMMAND","payload","isChildOfFloatingToolbar","relatedTarget","createElement","ref","className","isEditable","Fragment","map","action","key","name","element","Toolbar","exports","_ref3","_ref3$anchorElem","body","_useRichTextEditor","useRichTextEditor","showToolbar","useDeriveValueFromSelection","_ref4","rangeSelection","createPortal"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, Fragment, useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n $getSelection,\n BLUR_COMMAND,\n COMMAND_PRIORITY_LOW,\n LexicalEditor,\n SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport \"./Toolbar.css\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\nimport { isChildOfFloatingToolbar } from \"~/utils/isChildOfFloatingToolbar\";\n\ninterface FloatingToolbarProps {\n anchorElem: HTMLElement;\n editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ anchorElem, editor }) => {\n const [isVisible, setIsVisible] = useState(true);\n const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n const { toolbarElements } = useLexicalEditorConfig();\n\n const mouseMoveListener = useCallback(\n (e: MouseEvent) => {\n /* Indicates which mouse button(s) was pressed.\n / 1 = mouse left button\n / 3 = mouse left and right button in the same time\n / More info: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons\n */\n if (popupCharStylesEditorRef?.current && (e.buttons === 1 || e.buttons === 3)) {\n if (popupCharStylesEditorRef.current.style.pointerEvents !== \"none\") {\n const x = e.clientX;\n const y = e.clientY;\n const elementUnderMouse = document.elementFromPoint(x, y);\n\n if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {\n // Mouse is not over the target element => not a normal click, but probably a drag\n popupCharStylesEditorRef.current.style.pointerEvents = \"none\";\n }\n }\n }\n },\n [popupCharStylesEditorRef]\n );\n\n const mouseUpListener = useCallback(() => {\n if (popupCharStylesEditorRef?.current) {\n if (popupCharStylesEditorRef.current.style.pointerEvents !== \"auto\") {\n popupCharStylesEditorRef.current.style.pointerEvents = \"auto\";\n }\n }\n }, [popupCharStylesEditorRef]);\n\n useEffect(() => {\n if (popupCharStylesEditorRef?.current) {\n document.addEventListener(\"mousemove\", mouseMoveListener);\n document.addEventListener(\"mouseup\", mouseUpListener);\n\n return () => {\n document.removeEventListener(\"mousemove\", mouseMoveListener);\n document.removeEventListener(\"mouseup\", mouseUpListener);\n };\n }\n return;\n }, [popupCharStylesEditorRef]);\n\n const updateTextFormatFloatingToolbar = useCallback(() => {\n const selection = $getSelection();\n\n const popupCharStylesEditorElem = popupCharStylesEditorRef.current;\n const nativeSelection = window.getSelection();\n\n if (popupCharStylesEditorElem === null) {\n return;\n }\n\n const rootElement = editor.getRootElement();\n if (\n selection !== null &&\n nativeSelection !== null &&\n !nativeSelection.isCollapsed &&\n rootElement !== null &&\n rootElement.contains(nativeSelection.anchorNode)\n ) {\n const rangeRect = getDOMRangeRect(nativeSelection, rootElement);\n\n setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);\n }\n }, [editor, anchorElem]);\n\n useEffect(() => {\n const scrollerElem = anchorElem.parentElement;\n\n const update = () => {\n editor.getEditorState().read(() => {\n updateTextFormatFloatingToolbar();\n });\n };\n\n window.addEventListener(\"resize\", update);\n if (scrollerElem) {\n scrollerElem.addEventListener(\"scroll\", update);\n }\n\n return () => {\n window.removeEventListener(\"resize\", update);\n if (scrollerElem) {\n scrollerElem.removeEventListener(\"scroll\", update);\n }\n };\n }, [editor, updateTextFormatFloatingToolbar, anchorElem]);\n\n useEffect(() => {\n editor.getEditorState().read(() => {\n updateTextFormatFloatingToolbar();\n });\n return mergeRegister(\n editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n updateTextFormatFloatingToolbar();\n });\n }),\n\n editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n () => {\n setIsVisible(true);\n updateTextFormatFloatingToolbar();\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n\n editor.registerCommand(\n BLUR_COMMAND,\n payload => {\n if (!isChildOfFloatingToolbar(payload.relatedTarget as HTMLElement)) {\n setIsVisible(false);\n }\n\n return false;\n },\n COMMAND_PRIORITY_LOW\n )\n );\n }, [editor, updateTextFormatFloatingToolbar]);\n\n if (!isVisible) {\n return null;\n }\n\n return (\n <div ref={popupCharStylesEditorRef} className=\"floating-toolbar\">\n {editor.isEditable() && (\n <>\n {toolbarElements.map(action => (\n <Fragment key={action.name}>{action.element}</Fragment>\n ))}\n </>\n )}\n </div>\n );\n};\n\nexport interface ToolbarProps {\n anchorElem?: HTMLElement;\n}\n\nexport const Toolbar = ({ anchorElem = document.body }: ToolbarProps) => {\n const { editor } = useRichTextEditor();\n const showToolbar = useDeriveValueFromSelection(({ rangeSelection }) => {\n if (!rangeSelection) {\n return false;\n }\n\n return !rangeSelection.isCollapsed();\n });\n\n if (!showToolbar) {\n return null;\n }\n\n return createPortal(<FloatingToolbar anchorElem={anchorElem} editor={editor} />, anchorElem);\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_reactDom","_utils","_getDOMRangeRect","_setFloatingElemPosition","_LexicalEditorConfig","_useCurrentSelection","_hooks","_isChildOfFloatingToolbar","FloatingToolbar","_ref","anchorElem","editor","_useState","useState","_useState2","_slicedToArray2","default","isVisible","setIsVisible","popupCharStylesEditorRef","useRef","_useLexicalEditorConf","useLexicalEditorConfig","toolbarElements","mouseMoveListener","useCallback","e","current","buttons","style","pointerEvents","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","useEffect","addEventListener","removeEventListener","updateTextFormatFloatingToolbar","selection","$getSelection","popupCharStylesEditorElem","nativeSelection","window","getSelection","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","getDOMRangeRect","setFloatingElemPosition","scrollerElem","parentElement","update","getEditorState","read","mergeRegister","registerUpdateListener","_ref2","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","BLUR_COMMAND","payload","isChildOfFloatingToolbar","relatedTarget","createElement","ref","className","isEditable","Fragment","map","action","key","name","element","Toolbar","exports","_ref3","_ref3$anchorElem","body","_useRichTextEditor","useRichTextEditor","showToolbar","useDeriveValueFromSelection","_ref4","rangeSelection","createPortal"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, Fragment, useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n $getSelection,\n BLUR_COMMAND,\n COMMAND_PRIORITY_LOW,\n LexicalEditor,\n SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport \"./Toolbar.css\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\nimport { isChildOfFloatingToolbar } from \"~/utils/isChildOfFloatingToolbar\";\n\ninterface FloatingToolbarProps {\n anchorElem: HTMLElement;\n editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ anchorElem, editor }) => {\n const [isVisible, setIsVisible] = useState(true);\n const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n const { toolbarElements } = useLexicalEditorConfig();\n\n const mouseMoveListener = useCallback(\n (e: MouseEvent) => {\n /* Indicates which mouse button(s) was pressed.\n / 1 = mouse left button\n / 3 = mouse left and right button in the same time\n / More info: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons\n */\n if (popupCharStylesEditorRef?.current && (e.buttons === 1 || e.buttons === 3)) {\n if (popupCharStylesEditorRef.current.style.pointerEvents !== \"none\") {\n const x = e.clientX;\n const y = e.clientY;\n const elementUnderMouse = document.elementFromPoint(x, y);\n\n if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {\n // Mouse is not over the target element => not a normal click, but probably a drag\n popupCharStylesEditorRef.current.style.pointerEvents = \"none\";\n }\n }\n }\n },\n [popupCharStylesEditorRef]\n );\n\n const mouseUpListener = useCallback(() => {\n if (popupCharStylesEditorRef?.current) {\n if (popupCharStylesEditorRef.current.style.pointerEvents !== \"auto\") {\n popupCharStylesEditorRef.current.style.pointerEvents = \"auto\";\n }\n }\n }, [popupCharStylesEditorRef]);\n\n useEffect(() => {\n if (popupCharStylesEditorRef?.current) {\n document.addEventListener(\"mousemove\", mouseMoveListener);\n document.addEventListener(\"mouseup\", mouseUpListener);\n\n return () => {\n document.removeEventListener(\"mousemove\", mouseMoveListener);\n document.removeEventListener(\"mouseup\", mouseUpListener);\n };\n }\n return;\n }, [popupCharStylesEditorRef]);\n\n const updateTextFormatFloatingToolbar = useCallback(() => {\n const selection = $getSelection();\n\n const popupCharStylesEditorElem = popupCharStylesEditorRef.current;\n const nativeSelection = window.getSelection();\n\n if (popupCharStylesEditorElem === null) {\n return;\n }\n\n const rootElement = editor.getRootElement();\n if (\n selection !== null &&\n nativeSelection !== null &&\n !nativeSelection.isCollapsed &&\n rootElement !== null &&\n rootElement.contains(nativeSelection.anchorNode)\n ) {\n const rangeRect = getDOMRangeRect(nativeSelection, rootElement);\n\n setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);\n }\n }, [editor, anchorElem]);\n\n useEffect(() => {\n const scrollerElem = anchorElem.parentElement;\n\n const update = () => {\n editor.getEditorState().read(() => {\n updateTextFormatFloatingToolbar();\n });\n };\n\n window.addEventListener(\"resize\", update);\n if (scrollerElem) {\n scrollerElem.addEventListener(\"scroll\", update);\n }\n\n return () => {\n window.removeEventListener(\"resize\", update);\n if (scrollerElem) {\n scrollerElem.removeEventListener(\"scroll\", update);\n }\n };\n }, [editor, updateTextFormatFloatingToolbar, anchorElem]);\n\n useEffect(() => {\n editor.getEditorState().read(() => {\n updateTextFormatFloatingToolbar();\n });\n return mergeRegister(\n editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n updateTextFormatFloatingToolbar();\n });\n }),\n\n editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n () => {\n setIsVisible(true);\n updateTextFormatFloatingToolbar();\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n\n editor.registerCommand(\n BLUR_COMMAND,\n payload => {\n if (!isChildOfFloatingToolbar(payload.relatedTarget as HTMLElement)) {\n setIsVisible(false);\n }\n\n return false;\n },\n COMMAND_PRIORITY_LOW\n )\n );\n }, [editor, updateTextFormatFloatingToolbar]);\n\n if (!isVisible) {\n return null;\n }\n\n return (\n <div ref={popupCharStylesEditorRef} className=\"floating-toolbar\">\n {editor.isEditable() && (\n <>\n {toolbarElements.map(action => (\n <Fragment key={action.name}>{action.element}</Fragment>\n ))}\n </>\n )}\n </div>\n );\n};\n\nexport interface ToolbarProps {\n anchorElem?: HTMLElement;\n}\n\nexport const Toolbar = ({ anchorElem = document.body }: ToolbarProps) => {\n const { editor } = useRichTextEditor();\n const showToolbar = useDeriveValueFromSelection(({ rangeSelection }) => {\n if (!rangeSelection) {\n return false;\n }\n\n return !rangeSelection.isCollapsed();\n });\n\n if (!showToolbar) {\n return null;\n }\n\n return createPortal(<FloatingToolbar anchorElem={anchorElem} editor={editor} />, anchorElem);\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_commands","_useRichTextEditor3","_lexicalTheme","_lexicalNodes","_useCurrentElement2","BulletListAction","exports","_useRichTextEditor","useRichTextEditor","editor","_useCurrentElement","useCurrentElement","element","_useRichTextEditor2","themeEmotionMap","isList","$isListNode","isBullet","getListType","formatBulletList","styleId","findTypographyStyleByHtmlTag","id","undefined","dispatchCommand","INSERT_UNORDERED_LIST_COMMAND","themeStyleId","REMOVE_LIST_COMMAND","default","createElement","onClick","className"],"sources":["BulletListAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from \"~/commands\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport { $isListNode, ListNode } from \"@webiny/lexical-nodes\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\nexport const BulletListAction = () => {\n const { editor } = useRichTextEditor();\n const { element } = useCurrentElement();\n const { themeEmotionMap } = useRichTextEditor();\n const isList = $isListNode(element);\n\n const isBullet = isList && (element as ListNode).getListType() === \"bullet\";\n\n const formatBulletList = () => {\n if (!isBullet) {\n const styleId = themeEmotionMap\n ? findTypographyStyleByHtmlTag(\"ul\", themeEmotionMap)?.id\n : undefined;\n // will update the active state in the useEffect\n editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, { themeStyleId: styleId });\n } else {\n editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n }\n };\n\n return (\n <button\n onClick={() => formatBulletList()}\n className={\"popup-item spaced \" + (isBullet ? \"active\" : \"\")}\n aria-label=\"Format text as bullet list\"\n >\n <i className=\"icon bullet-list\" />\n </button>\n );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAL,OAAA;AAEO,IAAMM,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,SAAnBA,gBAAgBA,CAAA,EAAS;EAClC,IAAAE,kBAAA,GAAmB,IAAAC,qCAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAAC,kBAAA,GAAoB,IAAAC,qCAAiB,EAAC,CAAC;IAA/BC,OAAO,GAAAF,kBAAA,CAAPE,OAAO;EACf,IAAAC,mBAAA,GAA4B,IAAAL,qCAAiB,EAAC,CAAC;IAAvCM,eAAe,GAAAD,mBAAA,CAAfC,eAAe;EACvB,IAAMC,MAAM,GAAG,IAAAC,yBAAW,EAACJ,OAAO,CAAC;EAEnC,IAAMK,QAAQ,GAAGF,MAAM,IAAKH,OAAO,CAAcM,WAAW,CAAC,CAAC,KAAK,QAAQ;EAE3E,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAA,EAAS;IAC3B,IAAI,CAACF,QAAQ,EAAE;MACX,IAAMG,OAAO,GAAGN,eAAe,GACzB,IAAAO,0CAA4B,EAAC,IAAI,EAAEP,eAAe,CAAC,EAAEQ,EAAE,GACvDC,SAAS;MACf;MACAd,MAAM,CAACe,eAAe,CAACC,uCAA6B,EAAE;QAAEC,YAAY,EAAEN;MAAQ,CAAC,CAAC;IACpF,CAAC,MAAM;MACHX,MAAM,CAACe,eAAe,CAACG,6BAAmB,EAAEJ,SAAS,CAAC;IAC1D;EACJ,CAAC;EAED,oBACI1B,MAAA,CAAA+B,OAAA,CAAAC,aAAA;IACIC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_commands","_useRichTextEditor3","_lexicalTheme","_lexicalNodes","_useCurrentElement2","BulletListAction","exports","_useRichTextEditor","useRichTextEditor","editor","_useCurrentElement","useCurrentElement","element","_useRichTextEditor2","themeEmotionMap","isList","$isListNode","isBullet","getListType","formatBulletList","styleId","findTypographyStyleByHtmlTag","id","undefined","dispatchCommand","INSERT_UNORDERED_LIST_COMMAND","themeStyleId","REMOVE_LIST_COMMAND","default","createElement","onClick","className"],"sources":["BulletListAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from \"~/commands\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport { $isListNode, ListNode } from \"@webiny/lexical-nodes\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\nexport const BulletListAction = () => {\n const { editor } = useRichTextEditor();\n const { element } = useCurrentElement();\n const { themeEmotionMap } = useRichTextEditor();\n const isList = $isListNode(element);\n\n const isBullet = isList && (element as ListNode).getListType() === \"bullet\";\n\n const formatBulletList = () => {\n if (!isBullet) {\n const styleId = themeEmotionMap\n ? findTypographyStyleByHtmlTag(\"ul\", themeEmotionMap)?.id\n : undefined;\n // will update the active state in the useEffect\n editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, { themeStyleId: styleId });\n } else {\n editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n }\n };\n\n return (\n <button\n onClick={() => formatBulletList()}\n className={\"popup-item spaced \" + (isBullet ? \"active\" : \"\")}\n aria-label=\"Format text as bullet list\"\n >\n <i className=\"icon bullet-list\" />\n </button>\n );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAL,OAAA;AAEO,IAAMM,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,SAAnBA,gBAAgBA,CAAA,EAAS;EAClC,IAAAE,kBAAA,GAAmB,IAAAC,qCAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAAC,kBAAA,GAAoB,IAAAC,qCAAiB,EAAC,CAAC;IAA/BC,OAAO,GAAAF,kBAAA,CAAPE,OAAO;EACf,IAAAC,mBAAA,GAA4B,IAAAL,qCAAiB,EAAC,CAAC;IAAvCM,eAAe,GAAAD,mBAAA,CAAfC,eAAe;EACvB,IAAMC,MAAM,GAAG,IAAAC,yBAAW,EAACJ,OAAO,CAAC;EAEnC,IAAMK,QAAQ,GAAGF,MAAM,IAAKH,OAAO,CAAcM,WAAW,CAAC,CAAC,KAAK,QAAQ;EAE3E,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAA,EAAS;IAC3B,IAAI,CAACF,QAAQ,EAAE;MACX,IAAMG,OAAO,GAAGN,eAAe,GACzB,IAAAO,0CAA4B,EAAC,IAAI,EAAEP,eAAe,CAAC,EAAEQ,EAAE,GACvDC,SAAS;MACf;MACAd,MAAM,CAACe,eAAe,CAACC,uCAA6B,EAAE;QAAEC,YAAY,EAAEN;MAAQ,CAAC,CAAC;IACpF,CAAC,MAAM;MACHX,MAAM,CAACe,eAAe,CAACG,6BAAmB,EAAEJ,SAAS,CAAC;IAC1D;EACJ,CAAC;EAED,oBACI1B,MAAA,CAAA+B,OAAA,CAAAC,aAAA;IACIC,OAAO,EAAE,SAATA,OAAOA,CAAA;MAAA,OAAQX,gBAAgB,CAAC,CAAC;IAAA,CAAC;IAClCY,SAAS,EAAE,oBAAoB,IAAId,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC7D,cAAW;EAA4B,gBAEvCpB,MAAA,CAAA+B,OAAA,CAAAC,aAAA;IAAGE,SAAS,EAAC;EAAkB,CAAE,CAC7B,CAAC;AAEjB,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactComposition","_FontColorActionContext","_lexicalNodes","_getSelectedNode","_useCurrentSelection","_hooks","FontColorPicker","exports","makeDecoratable","useEffect","console","log","FontActionColorPicker","_ref","element","default","createElement","Compose","component","with","_with","FontColorAction","_useRichTextEditor","useRichTextEditor","editor","fontColor","useDeriveValueFromSelection","_ref2","rangeSelection","node","getSelectedNode","$isFontColorNode","getColorStyle","color","onFontColorSelect","useCallback","colorValue","themeColorName","dispatchCommand","ADD_FONT_COLOR_COMMAND","ThemeColorValue","context","useMemo","value","applyColor","FontColorActionContext","Provider","ColorPicker"],"sources":["FontColorAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { FontColorActionContext } from \"~/context/FontColorActionContext\";\nimport {\n $isFontColorNode,\n ADD_FONT_COLOR_COMMAND,\n FontColorPayload,\n ThemeColorValue\n} from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const FontColorPicker = makeDecoratable(\"FontColorPicker\", (): JSX.Element | null => {\n useEffect(() => {\n console.log(\"Default FontColorPicker, please add your own component\");\n }, []);\n return null;\n});\n\ninterface FontActionColorPicker {\n element: JSX.Element;\n}\n\nconst FontActionColorPicker = ({ element }: FontActionColorPicker): JSX.Element => {\n return <Compose component={FontColorPicker} with={() => () => element} />;\n};\n\nexport type FontColorAction = React.ComponentType<unknown> & {\n ColorPicker: typeof FontActionColorPicker;\n};\n\nexport const FontColorAction: FontColorAction = () => {\n const { editor } = useRichTextEditor();\n const fontColor = useDeriveValueFromSelection(({ rangeSelection }) => {\n if (!rangeSelection) {\n return \"#000\";\n }\n\n const node = getSelectedNode(rangeSelection);\n return $isFontColorNode(node) ? node.getColorStyle().color : \"#000\";\n });\n\n const onFontColorSelect = useCallback(\n (colorValue: string, themeColorName: string | undefined) => {\n editor.dispatchCommand<LexicalCommand<FontColorPayload>>(ADD_FONT_COLOR_COMMAND, {\n color: new ThemeColorValue(colorValue, themeColorName)\n });\n },\n []\n );\n\n const context = useMemo(\n () => ({\n value: fontColor,\n applyColor: onFontColorSelect\n }),\n [onFontColorSelect, fontColor]\n );\n\n return (\n <FontColorActionContext.Provider value={context}>\n <FontColorPicker />\n </FontColorActionContext.Provider>\n );\n};\n\nFontColorAction.ColorPicker = FontActionColorPicker;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAMA,IAAAI,gBAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAEO,IAAMO,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,IAAAE,iCAAe,EAAC,iBAAiB,EAAE,YAA0B;EACxF,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,wDAAwD,CAAC;EACzE,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CAAC,CAAC;AAMF,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAAC,IAAA,EAAwD;EAAA,IAAlDC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EACpC,oBAAOjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAAChB,iBAAA,CAAAiB,OAAO;IAACC,SAAS,EAAEZ,eAAgB;IAACa,IAAI,EAAE,
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactComposition","_FontColorActionContext","_lexicalNodes","_getSelectedNode","_useCurrentSelection","_hooks","FontColorPicker","exports","makeDecoratable","useEffect","console","log","FontActionColorPicker","_ref","element","default","createElement","Compose","component","with","_with","FontColorAction","_useRichTextEditor","useRichTextEditor","editor","fontColor","useDeriveValueFromSelection","_ref2","rangeSelection","node","getSelectedNode","$isFontColorNode","getColorStyle","color","onFontColorSelect","useCallback","colorValue","themeColorName","dispatchCommand","ADD_FONT_COLOR_COMMAND","ThemeColorValue","context","useMemo","value","applyColor","FontColorActionContext","Provider","ColorPicker"],"sources":["FontColorAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { FontColorActionContext } from \"~/context/FontColorActionContext\";\nimport {\n $isFontColorNode,\n ADD_FONT_COLOR_COMMAND,\n FontColorPayload,\n ThemeColorValue\n} from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const FontColorPicker = makeDecoratable(\"FontColorPicker\", (): JSX.Element | null => {\n useEffect(() => {\n console.log(\"Default FontColorPicker, please add your own component\");\n }, []);\n return null;\n});\n\ninterface FontActionColorPicker {\n element: JSX.Element;\n}\n\nconst FontActionColorPicker = ({ element }: FontActionColorPicker): JSX.Element => {\n return <Compose component={FontColorPicker} with={() => () => element} />;\n};\n\nexport type FontColorAction = React.ComponentType<unknown> & {\n ColorPicker: typeof FontActionColorPicker;\n};\n\nexport const FontColorAction: FontColorAction = () => {\n const { editor } = useRichTextEditor();\n const fontColor = useDeriveValueFromSelection(({ rangeSelection }) => {\n if (!rangeSelection) {\n return \"#000\";\n }\n\n const node = getSelectedNode(rangeSelection);\n return $isFontColorNode(node) ? node.getColorStyle().color : \"#000\";\n });\n\n const onFontColorSelect = useCallback(\n (colorValue: string, themeColorName: string | undefined) => {\n editor.dispatchCommand<LexicalCommand<FontColorPayload>>(ADD_FONT_COLOR_COMMAND, {\n color: new ThemeColorValue(colorValue, themeColorName)\n });\n },\n []\n );\n\n const context = useMemo(\n () => ({\n value: fontColor,\n applyColor: onFontColorSelect\n }),\n [onFontColorSelect, fontColor]\n );\n\n return (\n <FontColorActionContext.Provider value={context}>\n <FontColorPicker />\n </FontColorActionContext.Provider>\n );\n};\n\nFontColorAction.ColorPicker = FontActionColorPicker;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAMA,IAAAI,gBAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAEO,IAAMO,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,IAAAE,iCAAe,EAAC,iBAAiB,EAAE,YAA0B;EACxF,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,wDAAwD,CAAC;EACzE,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CAAC,CAAC;AAMF,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAAC,IAAA,EAAwD;EAAA,IAAlDC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EACpC,oBAAOjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAAChB,iBAAA,CAAAiB,OAAO;IAACC,SAAS,EAAEZ,eAAgB;IAACa,IAAI,EAAE,SAANC,KAAIA,CAAA;MAAA,OAAQ;QAAA,OAAMN,OAAO;MAAA;IAAA;EAAC,CAAE,CAAC;AAC7E,CAAC;AAMM,IAAMO,eAAgC,GAAAd,OAAA,CAAAc,eAAA,GAAG,SAAnCA,eAAgCA,CAAA,EAAS;EAClD,IAAAC,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAMC,SAAS,GAAG,IAAAC,gDAA2B,EAAC,UAAAC,KAAA,EAAwB;IAAA,IAArBC,cAAc,GAAAD,KAAA,CAAdC,cAAc;IAC3D,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,MAAM;IACjB;IAEA,IAAMC,IAAI,GAAG,IAAAC,gCAAe,EAACF,cAAc,CAAC;IAC5C,OAAO,IAAAG,8BAAgB,EAACF,IAAI,CAAC,GAAGA,IAAI,CAACG,aAAa,CAAC,CAAC,CAACC,KAAK,GAAG,MAAM;EACvE,CAAC,CAAC;EAEF,IAAMC,iBAAiB,GAAG,IAAAC,kBAAW,EACjC,UAACC,UAAkB,EAAEC,cAAkC,EAAK;IACxDb,MAAM,CAACc,eAAe,CAAmCC,oCAAsB,EAAE;MAC7EN,KAAK,EAAE,IAAIO,6BAAe,CAACJ,UAAU,EAAEC,cAAc;IACzD,CAAC,CAAC;EACN,CAAC,EACD,EACJ,CAAC;EAED,IAAMI,OAAO,GAAG,IAAAC,cAAO,EACnB;IAAA,OAAO;MACHC,KAAK,EAAElB,SAAS;MAChBmB,UAAU,EAAEV;IAChB,CAAC;EAAA,CAAC,EACF,CAACA,iBAAiB,EAAET,SAAS,CACjC,CAAC;EAED,oBACI5B,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACf,uBAAA,CAAA4C,sBAAsB,CAACC,QAAQ;IAACH,KAAK,EAAEF;EAAQ,gBAC5C5C,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACV,eAAe,MAAE,CACW,CAAC;AAE1C,CAAC;AAEDe,eAAe,CAAC0B,WAAW,GAAGnC,qBAAqB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_selection","_utils","_lexical","_DropDown","_useCurrentSelection","_hooks","FONT_SIZES_FALLBACK","exports","map","size","id","name","value","default","emptyOption","dropDownActiveClass","active","FontSizeDropDown","props","editor","fontSizes","_props$disabled","disabled","handleClick","useCallback","option","update","selection","$getSelection","$isRangeSelection","$patchStyleText","_defineProperty2","selectedOption","find","opt","createElement","DropDown","buttonClassName","buttonLabel","buttonAriaLabel","DropDownItem","className","concat","onClick","key","FontSize","_ref","_ref$fontSizes","_useRichTextEditor","useRichTextEditor","_useState","useState","isEditable","_useState2","_slicedToArray2","setIsEditable","fontSize","useDeriveValueFromSelection","_ref2","rangeSelection","undefined","$getSelectionStyleValueForProperty","_unused","useEffect","mergeRegister","registerEditableListener","editable","Fragment","FontSizeAction","Object","assign"],"sources":["FontSizeAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { $getSelectionStyleValueForProperty, $patchStyleText } from \"@lexical/selection\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { $getSelection, $isRangeSelection, LexicalEditor } from \"lexical\";\nimport { DropDown, DropDownItem } from \"~/ui/DropDown\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport interface FontSize {\n id: string;\n name: string;\n value: string;\n}\n\nexport const FONT_SIZES_FALLBACK: FontSize[] = [\n \"8px\",\n \"9px\",\n \"10px\",\n \"11px\",\n \"12px\",\n \"14px\",\n \"15px\",\n \"16px\",\n \"18px\",\n \"21px\",\n \"24px\",\n \"30px\",\n \"36px\",\n \"48px\",\n \"60px\",\n \"72px\",\n \"96px\"\n].map(size => ({\n id: size,\n name: size,\n value: size,\n default: size === \"15px\"\n}));\n\nconst emptyOption: FontSize = {\n value: \"\",\n name: \"Font Size\",\n id: \"empty\"\n};\n\nfunction dropDownActiveClass(active: boolean) {\n if (active) {\n return \"active dropdown-item-active\";\n }\n return \"\";\n}\n\ninterface FontSizeDropDownProps {\n fontSizes: FontSize[];\n editor: LexicalEditor;\n value: string | undefined;\n disabled?: boolean;\n}\n\nfunction FontSizeDropDown(props: FontSizeDropDownProps): JSX.Element {\n const { editor, value, fontSizes, disabled = false } = props;\n\n const handleClick = useCallback(\n (option: FontSize) => {\n editor.update(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n $patchStyleText(selection, {\n [\"font-size\"]: option.value\n });\n }\n });\n },\n [editor]\n );\n\n const selectedOption = fontSizes.find(opt => opt.value === value) ?? emptyOption;\n\n return (\n <DropDown\n disabled={disabled}\n buttonClassName=\"toolbar-item font-size\"\n buttonLabel={selectedOption.name}\n buttonAriaLabel={\"Formatting options for font size\"}\n >\n {fontSizes.map(option => (\n <DropDownItem\n className={`item fontsize-item ${dropDownActiveClass(value === option.id)}`}\n onClick={() => handleClick(option)}\n key={option.id}\n >\n <span className=\"text\">{option.name}</span>\n </DropDownItem>\n ))}\n </DropDown>\n );\n}\n\ninterface FontSizeActionProps {\n fontSizes?: FontSize[];\n}\n\nconst FontSize = ({ fontSizes = FONT_SIZES_FALLBACK }: FontSizeActionProps) => {\n const { editor } = useRichTextEditor();\n const [isEditable, setIsEditable] = useState(() => editor.isEditable());\n const fontSize = useDeriveValueFromSelection(({ rangeSelection }) => {\n if (!rangeSelection) {\n return undefined;\n }\n try {\n return $getSelectionStyleValueForProperty(rangeSelection, \"font-size\");\n } catch {\n return undefined;\n }\n });\n\n useEffect(() => {\n return mergeRegister(\n editor.registerEditableListener(editable => {\n setIsEditable(editable);\n })\n );\n }, [editor]);\n\n return (\n <>\n <FontSizeDropDown\n disabled={!isEditable}\n value={fontSize}\n editor={editor}\n fontSizes={fontSizes}\n />\n </>\n );\n};\n\nexport const FontSizeAction = Object.assign(FontSize, { FONT_SIZES_FALLBACK });\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAQO,IAAMO,mBAA+B,GAAAC,OAAA,CAAAD,mBAAA,GAAG,CAC3C,KAAK,EACL,KAAK,EACL,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,CACT,CAACE,GAAG,CAAC,UAAAC,IAAI;EAAA,OAAK;IACXC,EAAE,EAAED,IAAI;IACRE,IAAI,EAAEF,IAAI;IACVG,KAAK,EAAEH,IAAI;IACXI,OAAO,EAAEJ,IAAI,KAAK;EACtB,CAAC;AAAA,CAAC,CAAC;AAEH,IAAMK,WAAqB,GAAG;EAC1BF,KAAK,EAAE,EAAE;EACTD,IAAI,EAAE,WAAW;EACjBD,EAAE,EAAE;AACR,CAAC;AAED,SAASK,mBAAmBA,CAACC,MAAe,EAAE;EAC1C,IAAIA,MAAM,EAAE;IACR,OAAO,6BAA6B;EACxC;EACA,OAAO,EAAE;AACb;AASA,SAASC,gBAAgBA,CAACC,KAA4B,EAAe;EACjE,IAAQC,MAAM,GAAyCD,KAAK,CAApDC,MAAM;IAAEP,KAAK,GAAkCM,KAAK,CAA5CN,KAAK;IAAEQ,SAAS,GAAuBF,KAAK,CAArCE,SAAS;IAAAC,eAAA,GAAuBH,KAAK,CAA1BI,QAAQ;IAARA,QAAQ,GAAAD,eAAA,cAAG,KAAK,GAAAA,eAAA;EAElD,IAAME,WAAW,GAAG,IAAAC,kBAAW,EAC3B,UAACC,MAAgB,EAAK;IAClBN,MAAM,CAACO,MAAM,CAAC,YAAM;MAChB,IAAMC,SAAS,GAAG,IAAAC,sBAAa,EAAC,CAAC;MACjC,IAAI,IAAAC,0BAAiB,EAACF,SAAS,CAAC,EAAE;QAC9B,IAAAG,0BAAe,EAACH,SAAS,MAAAI,gBAAA,CAAAlB,OAAA,MACpB,WAAW,EAAGY,MAAM,CAACb,KAAK,CAC9B,CAAC;MACN;IACJ,CAAC,CAAC;EACN,CAAC,EACD,CAACO,MAAM,CACX,CAAC;EAED,IAAMa,cAAc,GAAGZ,SAAS,CAACa,IAAI,CAAC,UAAAC,GAAG;IAAA,OAAIA,GAAG,CAACtB,KAAK,KAAKA,KAAK;EAAA,EAAC,IAAIE,WAAW;EAEhF,oBACIjB,MAAA,CAAAgB,OAAA,CAAAsB,aAAA,CAAChC,SAAA,CAAAiC,QAAQ;IACLd,QAAQ,EAAEA,QAAS;IACnBe,eAAe,EAAC,wBAAwB;IACxCC,WAAW,EAAEN,cAAc,CAACrB,IAAK;IACjC4B,eAAe,EAAE;EAAmC,GAEnDnB,SAAS,CAACZ,GAAG,CAAC,UAAAiB,MAAM;IAAA,oBACjB5B,MAAA,CAAAgB,OAAA,CAAAsB,aAAA,CAAChC,SAAA,CAAAqC,YAAY;MACTC,SAAS,wBAAAC,MAAA,CAAwB3B,mBAAmB,CAACH,KAAK,KAAKa,MAAM,CAACf,EAAE,CAAC,CAAG;MAC5EiC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_selection","_utils","_lexical","_DropDown","_useCurrentSelection","_hooks","FONT_SIZES_FALLBACK","exports","map","size","id","name","value","default","emptyOption","dropDownActiveClass","active","FontSizeDropDown","props","editor","fontSizes","_props$disabled","disabled","handleClick","useCallback","option","update","selection","$getSelection","$isRangeSelection","$patchStyleText","_defineProperty2","selectedOption","find","opt","createElement","DropDown","buttonClassName","buttonLabel","buttonAriaLabel","DropDownItem","className","concat","onClick","key","FontSize","_ref","_ref$fontSizes","_useRichTextEditor","useRichTextEditor","_useState","useState","isEditable","_useState2","_slicedToArray2","setIsEditable","fontSize","useDeriveValueFromSelection","_ref2","rangeSelection","undefined","$getSelectionStyleValueForProperty","_unused","useEffect","mergeRegister","registerEditableListener","editable","Fragment","FontSizeAction","Object","assign"],"sources":["FontSizeAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { $getSelectionStyleValueForProperty, $patchStyleText } from \"@lexical/selection\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { $getSelection, $isRangeSelection, LexicalEditor } from \"lexical\";\nimport { DropDown, DropDownItem } from \"~/ui/DropDown\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport interface FontSize {\n id: string;\n name: string;\n value: string;\n}\n\nexport const FONT_SIZES_FALLBACK: FontSize[] = [\n \"8px\",\n \"9px\",\n \"10px\",\n \"11px\",\n \"12px\",\n \"14px\",\n \"15px\",\n \"16px\",\n \"18px\",\n \"21px\",\n \"24px\",\n \"30px\",\n \"36px\",\n \"48px\",\n \"60px\",\n \"72px\",\n \"96px\"\n].map(size => ({\n id: size,\n name: size,\n value: size,\n default: size === \"15px\"\n}));\n\nconst emptyOption: FontSize = {\n value: \"\",\n name: \"Font Size\",\n id: \"empty\"\n};\n\nfunction dropDownActiveClass(active: boolean) {\n if (active) {\n return \"active dropdown-item-active\";\n }\n return \"\";\n}\n\ninterface FontSizeDropDownProps {\n fontSizes: FontSize[];\n editor: LexicalEditor;\n value: string | undefined;\n disabled?: boolean;\n}\n\nfunction FontSizeDropDown(props: FontSizeDropDownProps): JSX.Element {\n const { editor, value, fontSizes, disabled = false } = props;\n\n const handleClick = useCallback(\n (option: FontSize) => {\n editor.update(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n $patchStyleText(selection, {\n [\"font-size\"]: option.value\n });\n }\n });\n },\n [editor]\n );\n\n const selectedOption = fontSizes.find(opt => opt.value === value) ?? emptyOption;\n\n return (\n <DropDown\n disabled={disabled}\n buttonClassName=\"toolbar-item font-size\"\n buttonLabel={selectedOption.name}\n buttonAriaLabel={\"Formatting options for font size\"}\n >\n {fontSizes.map(option => (\n <DropDownItem\n className={`item fontsize-item ${dropDownActiveClass(value === option.id)}`}\n onClick={() => handleClick(option)}\n key={option.id}\n >\n <span className=\"text\">{option.name}</span>\n </DropDownItem>\n ))}\n </DropDown>\n );\n}\n\ninterface FontSizeActionProps {\n fontSizes?: FontSize[];\n}\n\nconst FontSize = ({ fontSizes = FONT_SIZES_FALLBACK }: FontSizeActionProps) => {\n const { editor } = useRichTextEditor();\n const [isEditable, setIsEditable] = useState(() => editor.isEditable());\n const fontSize = useDeriveValueFromSelection(({ rangeSelection }) => {\n if (!rangeSelection) {\n return undefined;\n }\n try {\n return $getSelectionStyleValueForProperty(rangeSelection, \"font-size\");\n } catch {\n return undefined;\n }\n });\n\n useEffect(() => {\n return mergeRegister(\n editor.registerEditableListener(editable => {\n setIsEditable(editable);\n })\n );\n }, [editor]);\n\n return (\n <>\n <FontSizeDropDown\n disabled={!isEditable}\n value={fontSize}\n editor={editor}\n fontSizes={fontSizes}\n />\n </>\n );\n};\n\nexport const FontSizeAction = Object.assign(FontSize, { FONT_SIZES_FALLBACK });\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_useRichTextEditor2","_files","_commands","ImageAction","exports","_useRichTextEditor","useRichTextEditor","editor","toolbarActionPlugins","_useState","useState","_useState2","_slicedToArray2","default","imageActionPlugin","setImageActionPlugin","useEffect","length","actionPlugin","find","action","targetAction","handleClick","plugin","cb","data","imagePayload","fileToImagePayload","dispatchCommand","INSERT_IMAGE_COMMAND","createElement","onClick","className"],"sources":["ImageAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { FileManagerFileItem, fileToImagePayload } from \"~/utils/files\";\nimport { ImagePayload, INSERT_IMAGE_COMMAND } from \"~/commands\";\nimport { ToolbarActionPlugin } from \"~/types\";\n\nexport const ImageAction = () => {\n const { editor, toolbarActionPlugins } = useRichTextEditor();\n const [imageActionPlugin, setImageActionPlugin] = useState<ToolbarActionPlugin | undefined>();\n\n useEffect(() => {\n if (!!toolbarActionPlugins?.length) {\n const actionPlugin = toolbarActionPlugins.find(\n action => action.targetAction === \"image-action\"\n );\n setImageActionPlugin(actionPlugin);\n }\n }, [toolbarActionPlugins]);\n\n const handleClick = () => {\n if (typeof imageActionPlugin?.plugin === \"function\") {\n const cb = (data: FileManagerFileItem) => {\n const imagePayload = fileToImagePayload(data);\n if (imagePayload) {\n editor.dispatchCommand<LexicalCommand<ImagePayload>>(\n INSERT_IMAGE_COMMAND,\n imagePayload\n );\n }\n };\n imageActionPlugin.plugin(cb);\n }\n };\n\n return (\n <button onClick={() => handleClick()} className={\"popup-item\"} aria-label=\"Insert image\">\n <i className=\"icon insert-image\" />\n </button>\n );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,mBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AAGO,IAAMI,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,SAAdA,WAAWA,CAAA,EAAS;EAC7B,IAAAE,kBAAA,GAAyC,IAAAC,qCAAiB,EAAC,CAAC;IAApDC,MAAM,GAAAF,kBAAA,CAANE,MAAM;IAAEC,oBAAoB,GAAAH,kBAAA,CAApBG,oBAAoB;EACpC,IAAAC,SAAA,GAAkD,IAAAC,eAAQ,EAAkC,CAAC;IAAAC,UAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,SAAA;IAAtFK,iBAAiB,GAAAH,UAAA;IAAEI,oBAAoB,GAAAJ,UAAA;EAE9C,IAAAK,gBAAS,EAAC,YAAM;IACZ,IAAI,CAAC,CAACR,oBAAoB,EAAES,MAAM,EAAE;MAChC,IAAMC,YAAY,GAAGV,oBAAoB,CAACW,IAAI,CAC1C,UAAAC,MAAM;QAAA,OAAIA,MAAM,CAACC,YAAY,KAAK,cAAc;MAAA,CACpD,CAAC;MACDN,oBAAoB,CAACG,YAAY,CAAC;IACtC;EACJ,CAAC,EAAE,CAACV,oBAAoB,CAAC,CAAC;EAE1B,IAAMc,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtB,IAAI,OAAOR,iBAAiB,EAAES,MAAM,KAAK,UAAU,EAAE;MACjD,IAAMC,EAAE,GAAG,SAALA,EAAEA,CAAIC,IAAyB,EAAK;QACtC,IAAMC,YAAY,GAAG,IAAAC,yBAAkB,EAACF,IAAI,CAAC;QAC7C,IAAIC,YAAY,EAAE;UACdnB,MAAM,CAACqB,eAAe,CAClBC,8BAAoB,EACpBH,YACJ,CAAC;QACL;MACJ,CAAC;MACDZ,iBAAiB,CAACS,MAAM,CAACC,EAAE,CAAC;IAChC;EACJ,CAAC;EAED,oBACI3B,MAAA,CAAAgB,OAAA,CAAAiB,aAAA;IAAQC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_useRichTextEditor2","_files","_commands","ImageAction","exports","_useRichTextEditor","useRichTextEditor","editor","toolbarActionPlugins","_useState","useState","_useState2","_slicedToArray2","default","imageActionPlugin","setImageActionPlugin","useEffect","length","actionPlugin","find","action","targetAction","handleClick","plugin","cb","data","imagePayload","fileToImagePayload","dispatchCommand","INSERT_IMAGE_COMMAND","createElement","onClick","className"],"sources":["ImageAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { FileManagerFileItem, fileToImagePayload } from \"~/utils/files\";\nimport { ImagePayload, INSERT_IMAGE_COMMAND } from \"~/commands\";\nimport { ToolbarActionPlugin } from \"~/types\";\n\nexport const ImageAction = () => {\n const { editor, toolbarActionPlugins } = useRichTextEditor();\n const [imageActionPlugin, setImageActionPlugin] = useState<ToolbarActionPlugin | undefined>();\n\n useEffect(() => {\n if (!!toolbarActionPlugins?.length) {\n const actionPlugin = toolbarActionPlugins.find(\n action => action.targetAction === \"image-action\"\n );\n setImageActionPlugin(actionPlugin);\n }\n }, [toolbarActionPlugins]);\n\n const handleClick = () => {\n if (typeof imageActionPlugin?.plugin === \"function\") {\n const cb = (data: FileManagerFileItem) => {\n const imagePayload = fileToImagePayload(data);\n if (imagePayload) {\n editor.dispatchCommand<LexicalCommand<ImagePayload>>(\n INSERT_IMAGE_COMMAND,\n imagePayload\n );\n }\n };\n imageActionPlugin.plugin(cb);\n }\n };\n\n return (\n <button onClick={() => handleClick()} className={\"popup-item\"} aria-label=\"Insert image\">\n <i className=\"icon insert-image\" />\n </button>\n );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,mBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AAGO,IAAMI,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,SAAdA,WAAWA,CAAA,EAAS;EAC7B,IAAAE,kBAAA,GAAyC,IAAAC,qCAAiB,EAAC,CAAC;IAApDC,MAAM,GAAAF,kBAAA,CAANE,MAAM;IAAEC,oBAAoB,GAAAH,kBAAA,CAApBG,oBAAoB;EACpC,IAAAC,SAAA,GAAkD,IAAAC,eAAQ,EAAkC,CAAC;IAAAC,UAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,SAAA;IAAtFK,iBAAiB,GAAAH,UAAA;IAAEI,oBAAoB,GAAAJ,UAAA;EAE9C,IAAAK,gBAAS,EAAC,YAAM;IACZ,IAAI,CAAC,CAACR,oBAAoB,EAAES,MAAM,EAAE;MAChC,IAAMC,YAAY,GAAGV,oBAAoB,CAACW,IAAI,CAC1C,UAAAC,MAAM;QAAA,OAAIA,MAAM,CAACC,YAAY,KAAK,cAAc;MAAA,CACpD,CAAC;MACDN,oBAAoB,CAACG,YAAY,CAAC;IACtC;EACJ,CAAC,EAAE,CAACV,oBAAoB,CAAC,CAAC;EAE1B,IAAMc,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtB,IAAI,OAAOR,iBAAiB,EAAES,MAAM,KAAK,UAAU,EAAE;MACjD,IAAMC,EAAE,GAAG,SAALA,EAAEA,CAAIC,IAAyB,EAAK;QACtC,IAAMC,YAAY,GAAG,IAAAC,yBAAkB,EAACF,IAAI,CAAC;QAC7C,IAAIC,YAAY,EAAE;UACdnB,MAAM,CAACqB,eAAe,CAClBC,8BAAoB,EACpBH,YACJ,CAAC;QACL;MACJ,CAAC;MACDZ,iBAAiB,CAACS,MAAM,CAACC,EAAE,CAAC;IAChC;EACJ,CAAC;EAED,oBACI3B,MAAA,CAAAgB,OAAA,CAAAiB,aAAA;IAAQC,OAAO,EAAE,SAATA,OAAOA,CAAA;MAAA,OAAQT,WAAW,CAAC,CAAC;IAAA,CAAC;IAACU,SAAS,EAAE,YAAa;IAAC,cAAW;EAAc,gBACpFnC,MAAA,CAAAgB,OAAA,CAAAiB,aAAA;IAAGE,SAAS,EAAC;EAAmB,CAAE,CAC9B,CAAC;AAEjB,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_lexicalNodes","_lexicalTheme","_commands","_useRichTextEditor2","_useCurrentElement2","NumberedListAction","exports","_useCurrentElement","useCurrentElement","element","_useRichTextEditor","useRichTextEditor","editor","themeEmotionMap","isList","$isListNode","isNumbered","getListType","getStyleId","undefined","id","findTypographyStyleByHtmlTag","formatNumberedList","styleId","dispatchCommand","INSERT_ORDERED_LIST_COMMAND","themeStyleId","REMOVE_LIST_COMMAND","default","createElement","onClick","className"],"sources":["NumberedListAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { $isListNode, ListNode } from \"@webiny/lexical-nodes\";\nimport { findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport { INSERT_ORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from \"~/commands\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\nexport const NumberedListAction = () => {\n const { element } = useCurrentElement();\n const { editor, themeEmotionMap } = useRichTextEditor();\n const isList = $isListNode(element);\n const isNumbered = isList && (element as ListNode).getListType() === \"number\";\n\n const getStyleId = (): string | undefined => {\n if (!themeEmotionMap) {\n return undefined;\n }\n // check default style for numbered list\n const id = findTypographyStyleByHtmlTag(\"ol\", themeEmotionMap)?.id;\n if (id) {\n return id;\n }\n // fallback to ul list styles\n return findTypographyStyleByHtmlTag(\"ul\", themeEmotionMap)?.id;\n };\n\n const formatNumberedList = () => {\n if (!isNumbered) {\n const styleId = themeEmotionMap ? getStyleId() : undefined;\n editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, { themeStyleId: styleId });\n } else {\n editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n }\n };\n\n return (\n <button\n onClick={() => formatNumberedList()}\n className={\"popup-item spaced \" + (isNumbered ? \"active\" : \"\")}\n aria-label=\"Format text as numbered list\"\n >\n <i className=\"icon numbered-list\" />\n </button>\n );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAL,OAAA;AAEO,IAAMM,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG,SAArBA,kBAAkBA,CAAA,EAAS;EACpC,IAAAE,kBAAA,GAAoB,IAAAC,qCAAiB,EAAC,CAAC;IAA/BC,OAAO,GAAAF,kBAAA,CAAPE,OAAO;EACf,IAAAC,kBAAA,GAAoC,IAAAC,qCAAiB,EAAC,CAAC;IAA/CC,MAAM,GAAAF,kBAAA,CAANE,MAAM;IAAEC,eAAe,GAAAH,kBAAA,CAAfG,eAAe;EAC/B,IAAMC,MAAM,GAAG,IAAAC,yBAAW,EAACN,OAAO,CAAC;EACnC,IAAMO,UAAU,GAAGF,MAAM,IAAKL,OAAO,CAAcQ,WAAW,CAAC,CAAC,KAAK,QAAQ;EAE7E,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAA6B;IACzC,IAAI,CAACL,eAAe,EAAE;MAClB,OAAOM,SAAS;IACpB;IACA;IACA,IAAMC,EAAE,GAAG,IAAAC,0CAA4B,EAAC,IAAI,EAAER,eAAe,CAAC,EAAEO,EAAE;IAClE,IAAIA,EAAE,EAAE;MACJ,OAAOA,EAAE;IACb;IACA;IACA,OAAO,IAAAC,0CAA4B,EAAC,IAAI,EAAER,eAAe,CAAC,EAAEO,EAAE;EAClE,CAAC;EAED,IAAME,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAA,EAAS;IAC7B,IAAI,CAACN,UAAU,EAAE;MACb,IAAMO,OAAO,GAAGV,eAAe,GAAGK,UAAU,CAAC,CAAC,GAAGC,SAAS;MAC1DP,MAAM,CAACY,eAAe,CAACC,qCAA2B,EAAE;QAAEC,YAAY,EAAEH;MAAQ,CAAC,CAAC;IAClF,CAAC,MAAM;MACHX,MAAM,CAACY,eAAe,CAACG,6BAAmB,EAAER,SAAS,CAAC;IAC1D;EACJ,CAAC;EAED,oBACItB,MAAA,CAAA+B,OAAA,CAAAC,aAAA;IACIC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_lexicalNodes","_lexicalTheme","_commands","_useRichTextEditor2","_useCurrentElement2","NumberedListAction","exports","_useCurrentElement","useCurrentElement","element","_useRichTextEditor","useRichTextEditor","editor","themeEmotionMap","isList","$isListNode","isNumbered","getListType","getStyleId","undefined","id","findTypographyStyleByHtmlTag","formatNumberedList","styleId","dispatchCommand","INSERT_ORDERED_LIST_COMMAND","themeStyleId","REMOVE_LIST_COMMAND","default","createElement","onClick","className"],"sources":["NumberedListAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { $isListNode, ListNode } from \"@webiny/lexical-nodes\";\nimport { findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport { INSERT_ORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from \"~/commands\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\nexport const NumberedListAction = () => {\n const { element } = useCurrentElement();\n const { editor, themeEmotionMap } = useRichTextEditor();\n const isList = $isListNode(element);\n const isNumbered = isList && (element as ListNode).getListType() === \"number\";\n\n const getStyleId = (): string | undefined => {\n if (!themeEmotionMap) {\n return undefined;\n }\n // check default style for numbered list\n const id = findTypographyStyleByHtmlTag(\"ol\", themeEmotionMap)?.id;\n if (id) {\n return id;\n }\n // fallback to ul list styles\n return findTypographyStyleByHtmlTag(\"ul\", themeEmotionMap)?.id;\n };\n\n const formatNumberedList = () => {\n if (!isNumbered) {\n const styleId = themeEmotionMap ? getStyleId() : undefined;\n editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, { themeStyleId: styleId });\n } else {\n editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n }\n };\n\n return (\n <button\n onClick={() => formatNumberedList()}\n className={\"popup-item spaced \" + (isNumbered ? \"active\" : \"\")}\n aria-label=\"Format text as numbered list\"\n >\n <i className=\"icon numbered-list\" />\n </button>\n );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAL,OAAA;AAEO,IAAMM,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG,SAArBA,kBAAkBA,CAAA,EAAS;EACpC,IAAAE,kBAAA,GAAoB,IAAAC,qCAAiB,EAAC,CAAC;IAA/BC,OAAO,GAAAF,kBAAA,CAAPE,OAAO;EACf,IAAAC,kBAAA,GAAoC,IAAAC,qCAAiB,EAAC,CAAC;IAA/CC,MAAM,GAAAF,kBAAA,CAANE,MAAM;IAAEC,eAAe,GAAAH,kBAAA,CAAfG,eAAe;EAC/B,IAAMC,MAAM,GAAG,IAAAC,yBAAW,EAACN,OAAO,CAAC;EACnC,IAAMO,UAAU,GAAGF,MAAM,IAAKL,OAAO,CAAcQ,WAAW,CAAC,CAAC,KAAK,QAAQ;EAE7E,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAA6B;IACzC,IAAI,CAACL,eAAe,EAAE;MAClB,OAAOM,SAAS;IACpB;IACA;IACA,IAAMC,EAAE,GAAG,IAAAC,0CAA4B,EAAC,IAAI,EAAER,eAAe,CAAC,EAAEO,EAAE;IAClE,IAAIA,EAAE,EAAE;MACJ,OAAOA,EAAE;IACb;IACA;IACA,OAAO,IAAAC,0CAA4B,EAAC,IAAI,EAAER,eAAe,CAAC,EAAEO,EAAE;EAClE,CAAC;EAED,IAAME,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAA,EAAS;IAC7B,IAAI,CAACN,UAAU,EAAE;MACb,IAAMO,OAAO,GAAGV,eAAe,GAAGK,UAAU,CAAC,CAAC,GAAGC,SAAS;MAC1DP,MAAM,CAACY,eAAe,CAACC,qCAA2B,EAAE;QAAEC,YAAY,EAAEH;MAAQ,CAAC,CAAC;IAClF,CAAC,MAAM;MACHX,MAAM,CAACY,eAAe,CAACG,6BAAmB,EAAER,SAAS,CAAC;IAC1D;EACJ,CAAC;EAED,oBACItB,MAAA,CAAA+B,OAAA,CAAAC,aAAA;IACIC,OAAO,EAAE,SAATA,OAAOA,CAAA;MAAA,OAAQR,kBAAkB,CAAC,CAAC;IAAA,CAAC;IACpCS,SAAS,EAAE,oBAAoB,IAAIf,UAAU,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC/D,cAAW;EAA8B,gBAEzCnB,MAAA,CAAA+B,OAAA,CAAAC,aAAA;IAAGE,SAAS,EAAC;EAAoB,CAAE,CAC/B,CAAC;AAEjB,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_reactComposition","_TextAlignmentActionContextProps","_useCurrentSelection","_getSelectedNode","_hooks","BaseTextAlignmentDropDown","exports","makeDecoratable","useEffect","console","log","TextAlignmentActionDropDown","_ref","element","default","createElement","Compose","component","with","_with","TextAlignmentAction","_useRichTextEditor","useRichTextEditor","editor","alignmentValue","useDeriveValueFromSelection","_ref2","rangeSelection","node","getSelectedNode","getParent","getFormatType","applyTextAlignment","value","dispatchCommand","FORMAT_ELEMENT_COMMAND","outdentText","OUTDENT_CONTENT_COMMAND","undefined","indentText","INDENT_CONTENT_COMMAND","context","useMemo","TextAlignmentActionContext","Provider","TextAlignmentDropDown"],"sources":["TextAlignmentAction.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport {\n ElementFormatType,\n FORMAT_ELEMENT_COMMAND,\n INDENT_CONTENT_COMMAND,\n OUTDENT_CONTENT_COMMAND\n} from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { TextAlignmentActionContext } from \"~/context/TextAlignmentActionContextProps\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useRichTextEditor } from \"~/hooks\";\n\n/*\n * Base text alignment dropdown composable component.\n * Note: To add a custom dropdown component use @see LexicalEditorConfig API.\n */\nexport const BaseTextAlignmentDropDown = makeDecoratable(\n \"BaseTextAlignmentDropDown\",\n (): JSX.Element | null => {\n useEffect(() => {\n console.log(\"Default BaseTextAlignmentDropDown, please add your own component\");\n }, []);\n return null;\n }\n);\n\ninterface TextAlignmentActionDropdownProps {\n element: JSX.Element;\n}\n\nconst TextAlignmentActionDropDown = ({\n element\n}: TextAlignmentActionDropdownProps): JSX.Element => {\n return <Compose component={BaseTextAlignmentDropDown} with={() => () => element} />;\n};\n\nexport type TextAlignmentAction = React.ComponentType<unknown> & {\n TextAlignmentDropDown: typeof TextAlignmentActionDropDown;\n};\n\nexport const TextAlignmentAction: TextAlignmentAction = () => {\n const { editor } = useRichTextEditor();\n const alignmentValue: ElementFormatType = useDeriveValueFromSelection(({ rangeSelection }) => {\n const node = rangeSelection ? getSelectedNode(rangeSelection) : null;\n if (node) {\n return node.getParent()?.getFormatType() || \"\";\n }\n return \"\";\n });\n\n const applyTextAlignment = (value: ElementFormatType) => {\n editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, value);\n };\n\n const outdentText = () => {\n editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);\n };\n\n const indentText = () => {\n editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);\n };\n\n const context = useMemo(\n () => ({\n value: alignmentValue,\n applyTextAlignment,\n outdentText,\n indentText\n }),\n [alignmentValue]\n );\n\n return (\n <TextAlignmentActionContext.Provider value={context}>\n <BaseTextAlignmentDropDown />\n </TextAlignmentActionContext.Provider>\n );\n};\n\nTextAlignmentAction.TextAlignmentDropDown = TextAlignmentActionDropDown;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAMA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,gCAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAEA;AACA;AACA;AACA;AACO,IAAMO,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,IAAAE,iCAAe,EACpD,2BAA2B,EAC3B,YAA0B;EACtB,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,kEAAkE,CAAC;EACnF,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CACJ,CAAC;AAMD,IAAMC,2BAA2B,GAAG,SAA9BA,2BAA2BA,CAAAC,IAAA,EAEoB;EAAA,IADjDC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EAEP,oBAAOjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACf,iBAAA,CAAAgB,OAAO;IAACC,SAAS,EAAEZ,yBAA0B;IAACa,IAAI,EAAE,
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_reactComposition","_TextAlignmentActionContextProps","_useCurrentSelection","_getSelectedNode","_hooks","BaseTextAlignmentDropDown","exports","makeDecoratable","useEffect","console","log","TextAlignmentActionDropDown","_ref","element","default","createElement","Compose","component","with","_with","TextAlignmentAction","_useRichTextEditor","useRichTextEditor","editor","alignmentValue","useDeriveValueFromSelection","_ref2","rangeSelection","node","getSelectedNode","getParent","getFormatType","applyTextAlignment","value","dispatchCommand","FORMAT_ELEMENT_COMMAND","outdentText","OUTDENT_CONTENT_COMMAND","undefined","indentText","INDENT_CONTENT_COMMAND","context","useMemo","TextAlignmentActionContext","Provider","TextAlignmentDropDown"],"sources":["TextAlignmentAction.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport {\n ElementFormatType,\n FORMAT_ELEMENT_COMMAND,\n INDENT_CONTENT_COMMAND,\n OUTDENT_CONTENT_COMMAND\n} from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { TextAlignmentActionContext } from \"~/context/TextAlignmentActionContextProps\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useRichTextEditor } from \"~/hooks\";\n\n/*\n * Base text alignment dropdown composable component.\n * Note: To add a custom dropdown component use @see LexicalEditorConfig API.\n */\nexport const BaseTextAlignmentDropDown = makeDecoratable(\n \"BaseTextAlignmentDropDown\",\n (): JSX.Element | null => {\n useEffect(() => {\n console.log(\"Default BaseTextAlignmentDropDown, please add your own component\");\n }, []);\n return null;\n }\n);\n\ninterface TextAlignmentActionDropdownProps {\n element: JSX.Element;\n}\n\nconst TextAlignmentActionDropDown = ({\n element\n}: TextAlignmentActionDropdownProps): JSX.Element => {\n return <Compose component={BaseTextAlignmentDropDown} with={() => () => element} />;\n};\n\nexport type TextAlignmentAction = React.ComponentType<unknown> & {\n TextAlignmentDropDown: typeof TextAlignmentActionDropDown;\n};\n\nexport const TextAlignmentAction: TextAlignmentAction = () => {\n const { editor } = useRichTextEditor();\n const alignmentValue: ElementFormatType = useDeriveValueFromSelection(({ rangeSelection }) => {\n const node = rangeSelection ? getSelectedNode(rangeSelection) : null;\n if (node) {\n return node.getParent()?.getFormatType() || \"\";\n }\n return \"\";\n });\n\n const applyTextAlignment = (value: ElementFormatType) => {\n editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, value);\n };\n\n const outdentText = () => {\n editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);\n };\n\n const indentText = () => {\n editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);\n };\n\n const context = useMemo(\n () => ({\n value: alignmentValue,\n applyTextAlignment,\n outdentText,\n indentText\n }),\n [alignmentValue]\n );\n\n return (\n <TextAlignmentActionContext.Provider value={context}>\n <BaseTextAlignmentDropDown />\n </TextAlignmentActionContext.Provider>\n );\n};\n\nTextAlignmentAction.TextAlignmentDropDown = TextAlignmentActionDropDown;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAMA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,gCAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAEA;AACA;AACA;AACA;AACO,IAAMO,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,IAAAE,iCAAe,EACpD,2BAA2B,EAC3B,YAA0B;EACtB,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,kEAAkE,CAAC;EACnF,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CACJ,CAAC;AAMD,IAAMC,2BAA2B,GAAG,SAA9BA,2BAA2BA,CAAAC,IAAA,EAEoB;EAAA,IADjDC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EAEP,oBAAOjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACf,iBAAA,CAAAgB,OAAO;IAACC,SAAS,EAAEZ,yBAA0B;IAACa,IAAI,EAAE,SAANC,KAAIA,CAAA;MAAA,OAAQ;QAAA,OAAMN,OAAO;MAAA;IAAA;EAAC,CAAE,CAAC;AACvF,CAAC;AAMM,IAAMO,mBAAwC,GAAAd,OAAA,CAAAc,mBAAA,GAAG,SAA3CA,mBAAwCA,CAAA,EAAS;EAC1D,IAAAC,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAMC,cAAiC,GAAG,IAAAC,gDAA2B,EAAC,UAAAC,KAAA,EAAwB;IAAA,IAArBC,cAAc,GAAAD,KAAA,CAAdC,cAAc;IACnF,IAAMC,IAAI,GAAGD,cAAc,GAAG,IAAAE,gCAAe,EAACF,cAAc,CAAC,GAAG,IAAI;IACpE,IAAIC,IAAI,EAAE;MACN,OAAOA,IAAI,CAACE,SAAS,CAAC,CAAC,EAAEC,aAAa,CAAC,CAAC,IAAI,EAAE;IAClD;IACA,OAAO,EAAE;EACb,CAAC,CAAC;EAEF,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,KAAwB,EAAK;IACrDV,MAAM,CAACW,eAAe,CAACC,+BAAsB,EAAEF,KAAK,CAAC;EACzD,CAAC;EAED,IAAMG,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBb,MAAM,CAACW,eAAe,CAACG,gCAAuB,EAAEC,SAAS,CAAC;EAC9D,CAAC;EAED,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;IACrBhB,MAAM,CAACW,eAAe,CAACM,+BAAsB,EAAEF,SAAS,CAAC;EAC7D,CAAC;EAED,IAAMG,OAAO,GAAG,IAAAC,cAAO,EACnB;IAAA,OAAO;MACHT,KAAK,EAAET,cAAc;MACrBQ,kBAAkB,EAAlBA,kBAAkB;MAClBI,WAAW,EAAXA,WAAW;MACXG,UAAU,EAAVA;IACJ,CAAC;EAAA,CAAC,EACF,CAACf,cAAc,CACnB,CAAC;EAED,oBACI5B,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACd,gCAAA,CAAA0C,0BAA0B,CAACC,QAAQ;IAACX,KAAK,EAAEQ;EAAQ,gBAChD7C,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACV,yBAAyB,MAAE,CACK,CAAC;AAE9C,CAAC;AAEDe,mBAAmB,CAACyB,qBAAqB,GAAGlC,2BAA2B","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactComposition","_TypographyActionContext","_lexicalNodes","_useRichTextEditor2","_commands","_useCurrentElement2","BaseTypographyActionDropDown","exports","makeDecoratable","useEffect","console","log","TypographyActionDropDown","_ref","element","default","createElement","Compose","component","with","_with","TypographyAction","_useState","useState","_useState2","_slicedToArray2","typography","setTypography","_useRichTextEditor","useRichTextEditor","editor","themeEmotionMap","_useCurrentElement","useCurrentElement","isTypographySelected","$isTypographyNode","isParagraphSelected","$isParagraphNode","isHeadingSelected","$isHeadingNode","isQuoteSelected","$isQuoteNode","setTypographySelect","useCallback","value","onTypographySelect","tag","includes","dispatchCommand","ADD_TYPOGRAPHY_COMMAND","INSERT_ORDERED_LIST_COMMAND","themeStyleId","id","INSERT_UNORDERED_LIST_COMMAND","INSERT_QUOTE_COMMAND","el","getTypographyValue","styleId","getTypographyStyleId","style","name","css","styles","$isListNode","getStyleId","undefined","elementStyle","TypographyActionContext","Provider","applyTypography","TypographyDropDown"],"sources":["TypographyAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { TypographyValue } from \"@webiny/lexical-theme\";\nimport { TypographyActionContext } from \"~/context/TypographyActionContext\";\nimport {\n $isHeadingNode,\n $isListNode,\n $isParagraphNode,\n $isQuoteNode,\n $isTypographyNode,\n ADD_TYPOGRAPHY_COMMAND,\n TypographyNode,\n TypographyPayload\n} from \"@webiny/lexical-nodes\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport {\n INSERT_ORDERED_LIST_COMMAND,\n INSERT_UNORDERED_LIST_COMMAND,\n INSERT_QUOTE_COMMAND,\n ListCommandPayload,\n QuoteCommandPayload\n} from \"~/commands\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\n/*\n * Base composable action component that is mounted on toolbar action as a placeholder for the custom toolbar action.\n * Note: Toa add custom component access trough @see LexicalEditorConfig API\n * */\nexport const BaseTypographyActionDropDown = makeDecoratable(\n \"BaseTypographyActionDropDown\",\n (): JSX.Element | null => {\n useEffect(() => {\n console.log(\"Default BaseTypographyActionDropDown, please add your own component\");\n }, []);\n return null;\n }\n);\n\ninterface TypographyActionDropdownProps {\n element: JSX.Element;\n}\n\nconst TypographyActionDropDown = ({ element }: TypographyActionDropdownProps): JSX.Element => {\n return <Compose component={BaseTypographyActionDropDown} with={() => () => element} />;\n};\n\nexport type TypographyAction = React.ComponentType<unknown> & {\n TypographyDropDown: typeof TypographyActionDropDown;\n};\n\nexport const TypographyAction: TypographyAction = () => {\n const [typography, setTypography] = useState<TypographyValue>();\n const { editor, themeEmotionMap } = useRichTextEditor();\n const { element } = useCurrentElement();\n const isTypographySelected = $isTypographyNode(element);\n const isParagraphSelected = $isParagraphNode(element);\n const isHeadingSelected = $isHeadingNode(element);\n const isQuoteSelected = $isQuoteNode(element);\n\n const setTypographySelect = useCallback(\n (value: TypographyValue) => {\n setTypography(value);\n },\n [typography]\n );\n\n const onTypographySelect = useCallback((value: TypographyValue) => {\n setTypographySelect(value);\n if (value.tag.includes(\"h\") || value.tag.includes(\"p\")) {\n editor.dispatchCommand<LexicalCommand<TypographyPayload>>(ADD_TYPOGRAPHY_COMMAND, {\n value\n });\n }\n\n if (value.tag === \"ol\") {\n editor.dispatchCommand<LexicalCommand<ListCommandPayload>>(\n INSERT_ORDERED_LIST_COMMAND,\n {\n themeStyleId: value.id\n }\n );\n }\n\n if (value.tag === \"ul\") {\n editor.dispatchCommand<LexicalCommand<ListCommandPayload>>(\n INSERT_UNORDERED_LIST_COMMAND,\n {\n themeStyleId: value.id\n }\n );\n }\n\n if (value.tag === \"quoteblock\") {\n editor.dispatchCommand<LexicalCommand<QuoteCommandPayload>>(INSERT_QUOTE_COMMAND, {\n themeStyleId: value.id\n });\n }\n }, []);\n\n useEffect(() => {\n if (!element) {\n return;\n }\n // header and paragraph elements inserted with typography node\n if (isTypographySelected) {\n const el = element as TypographyNode;\n setTypography(el.getTypographyValue());\n return;\n }\n\n if (isParagraphSelected || isHeadingSelected || isQuoteSelected) {\n const styleId = element.getTypographyStyleId();\n if (!styleId) {\n return;\n }\n\n if (!themeEmotionMap) {\n return;\n }\n\n const style = themeEmotionMap[styleId];\n if (style) {\n setTypography({\n name: style?.name,\n id: style.id,\n css: style.styles,\n tag: style.tag\n });\n }\n return;\n }\n\n // list and quote element\n if (themeEmotionMap && ($isListNode(element) || $isQuoteNode(element))) {\n const themeStyleId = element?.getStyleId() || undefined;\n if (themeStyleId) {\n const elementStyle = themeEmotionMap[themeStyleId];\n if (elementStyle) {\n setTypography({\n id: elementStyle.id,\n css: elementStyle.styles,\n name: elementStyle.name,\n tag: elementStyle.tag\n });\n }\n }\n }\n }, [element, isTypographySelected, isQuoteSelected, isParagraphSelected, isHeadingSelected]);\n\n return (\n <TypographyActionContext.Provider\n value={{\n value: typography,\n applyTypography: onTypographySelect\n }}\n >\n <BaseTypographyActionDropDown />\n </TypographyActionContext.Provider>\n );\n};\n\nTypographyAction.TypographyDropDown = TypographyActionDropDown;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactComposition","_TypographyActionContext","_lexicalNodes","_useRichTextEditor2","_commands","_useCurrentElement2","BaseTypographyActionDropDown","exports","makeDecoratable","useEffect","console","log","TypographyActionDropDown","_ref","element","default","createElement","Compose","component","with","_with","TypographyAction","_useState","useState","_useState2","_slicedToArray2","typography","setTypography","_useRichTextEditor","useRichTextEditor","editor","themeEmotionMap","_useCurrentElement","useCurrentElement","isTypographySelected","$isTypographyNode","isParagraphSelected","$isParagraphNode","isHeadingSelected","$isHeadingNode","isQuoteSelected","$isQuoteNode","setTypographySelect","useCallback","value","onTypographySelect","tag","includes","dispatchCommand","ADD_TYPOGRAPHY_COMMAND","INSERT_ORDERED_LIST_COMMAND","themeStyleId","id","INSERT_UNORDERED_LIST_COMMAND","INSERT_QUOTE_COMMAND","el","getTypographyValue","styleId","getTypographyStyleId","style","name","css","styles","$isListNode","getStyleId","undefined","elementStyle","TypographyActionContext","Provider","applyTypography","TypographyDropDown"],"sources":["TypographyAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { TypographyValue } from \"@webiny/lexical-theme\";\nimport { TypographyActionContext } from \"~/context/TypographyActionContext\";\nimport {\n $isHeadingNode,\n $isListNode,\n $isParagraphNode,\n $isQuoteNode,\n $isTypographyNode,\n ADD_TYPOGRAPHY_COMMAND,\n TypographyNode,\n TypographyPayload\n} from \"@webiny/lexical-nodes\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport {\n INSERT_ORDERED_LIST_COMMAND,\n INSERT_UNORDERED_LIST_COMMAND,\n INSERT_QUOTE_COMMAND,\n ListCommandPayload,\n QuoteCommandPayload\n} from \"~/commands\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\n/*\n * Base composable action component that is mounted on toolbar action as a placeholder for the custom toolbar action.\n * Note: Toa add custom component access trough @see LexicalEditorConfig API\n * */\nexport const BaseTypographyActionDropDown = makeDecoratable(\n \"BaseTypographyActionDropDown\",\n (): JSX.Element | null => {\n useEffect(() => {\n console.log(\"Default BaseTypographyActionDropDown, please add your own component\");\n }, []);\n return null;\n }\n);\n\ninterface TypographyActionDropdownProps {\n element: JSX.Element;\n}\n\nconst TypographyActionDropDown = ({ element }: TypographyActionDropdownProps): JSX.Element => {\n return <Compose component={BaseTypographyActionDropDown} with={() => () => element} />;\n};\n\nexport type TypographyAction = React.ComponentType<unknown> & {\n TypographyDropDown: typeof TypographyActionDropDown;\n};\n\nexport const TypographyAction: TypographyAction = () => {\n const [typography, setTypography] = useState<TypographyValue>();\n const { editor, themeEmotionMap } = useRichTextEditor();\n const { element } = useCurrentElement();\n const isTypographySelected = $isTypographyNode(element);\n const isParagraphSelected = $isParagraphNode(element);\n const isHeadingSelected = $isHeadingNode(element);\n const isQuoteSelected = $isQuoteNode(element);\n\n const setTypographySelect = useCallback(\n (value: TypographyValue) => {\n setTypography(value);\n },\n [typography]\n );\n\n const onTypographySelect = useCallback((value: TypographyValue) => {\n setTypographySelect(value);\n if (value.tag.includes(\"h\") || value.tag.includes(\"p\")) {\n editor.dispatchCommand<LexicalCommand<TypographyPayload>>(ADD_TYPOGRAPHY_COMMAND, {\n value\n });\n }\n\n if (value.tag === \"ol\") {\n editor.dispatchCommand<LexicalCommand<ListCommandPayload>>(\n INSERT_ORDERED_LIST_COMMAND,\n {\n themeStyleId: value.id\n }\n );\n }\n\n if (value.tag === \"ul\") {\n editor.dispatchCommand<LexicalCommand<ListCommandPayload>>(\n INSERT_UNORDERED_LIST_COMMAND,\n {\n themeStyleId: value.id\n }\n );\n }\n\n if (value.tag === \"quoteblock\") {\n editor.dispatchCommand<LexicalCommand<QuoteCommandPayload>>(INSERT_QUOTE_COMMAND, {\n themeStyleId: value.id\n });\n }\n }, []);\n\n useEffect(() => {\n if (!element) {\n return;\n }\n // header and paragraph elements inserted with typography node\n if (isTypographySelected) {\n const el = element as TypographyNode;\n setTypography(el.getTypographyValue());\n return;\n }\n\n if (isParagraphSelected || isHeadingSelected || isQuoteSelected) {\n const styleId = element.getTypographyStyleId();\n if (!styleId) {\n return;\n }\n\n if (!themeEmotionMap) {\n return;\n }\n\n const style = themeEmotionMap[styleId];\n if (style) {\n setTypography({\n name: style?.name,\n id: style.id,\n css: style.styles,\n tag: style.tag\n });\n }\n return;\n }\n\n // list and quote element\n if (themeEmotionMap && ($isListNode(element) || $isQuoteNode(element))) {\n const themeStyleId = element?.getStyleId() || undefined;\n if (themeStyleId) {\n const elementStyle = themeEmotionMap[themeStyleId];\n if (elementStyle) {\n setTypography({\n id: elementStyle.id,\n css: elementStyle.styles,\n name: elementStyle.name,\n tag: elementStyle.tag\n });\n }\n }\n }\n }, [element, isTypographySelected, isQuoteSelected, isParagraphSelected, isHeadingSelected]);\n\n return (\n <TypographyActionContext.Provider\n value={{\n value: typography,\n applyTypography: onTypographySelect\n }}\n >\n <BaseTypographyActionDropDown />\n </TypographyActionContext.Provider>\n );\n};\n\nTypographyAction.TypographyDropDown = TypographyActionDropDown;\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/lexical-editor",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.42.0-beta.1",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/webiny/webiny-js.git"
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
"@lexical/selection": "0.16.1",
|
|
16
16
|
"@lexical/text": "0.16.1",
|
|
17
17
|
"@lexical/utils": "0.16.1",
|
|
18
|
-
"@webiny/lexical-nodes": "5.
|
|
19
|
-
"@webiny/lexical-theme": "5.
|
|
20
|
-
"@webiny/react-composition": "5.
|
|
21
|
-
"@webiny/react-properties": "5.
|
|
18
|
+
"@webiny/lexical-nodes": "5.42.0-beta.1",
|
|
19
|
+
"@webiny/lexical-theme": "5.42.0-beta.1",
|
|
20
|
+
"@webiny/react-composition": "5.42.0-beta.1",
|
|
21
|
+
"@webiny/react-properties": "5.42.0-beta.1",
|
|
22
22
|
"emotion": "10.0.27",
|
|
23
23
|
"lexical": "0.16.1",
|
|
24
24
|
"lodash": "4.17.21",
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"react-dom": "18.2.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@webiny/cli": "5.
|
|
30
|
-
"@webiny/project-utils": "5.
|
|
29
|
+
"@webiny/cli": "5.42.0-beta.1",
|
|
30
|
+
"@webiny/project-utils": "5.42.0-beta.1"
|
|
31
31
|
},
|
|
32
32
|
"publishConfig": {
|
|
33
33
|
"access": "public",
|
|
@@ -37,5 +37,5 @@
|
|
|
37
37
|
"build": "yarn webiny run build",
|
|
38
38
|
"watch": "yarn webiny run watch"
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "5e69da579efa4f2c8268e0c97ac6407ddc3f5f07"
|
|
41
41
|
}
|
|
@@ -14,8 +14,8 @@ var BlurEventPlugin = exports.BlurEventPlugin = function BlurEventPlugin(_ref) {
|
|
|
14
14
|
(0, _react.useEffect)(function () {
|
|
15
15
|
return editor.registerCommand(_lexical.BLUR_COMMAND, function () {
|
|
16
16
|
if (typeof onBlur === "function") {
|
|
17
|
-
var
|
|
18
|
-
onBlur(JSON.stringify(
|
|
17
|
+
var editorState = editor.getEditorState();
|
|
18
|
+
onBlur(JSON.stringify(editorState.toJSON()));
|
|
19
19
|
}
|
|
20
20
|
return false;
|
|
21
21
|
}, _lexical.COMMAND_PRIORITY_LOW);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_lexical","_hooks","BlurEventPlugin","exports","_ref","onBlur","_useRichTextEditor","useRichTextEditor","editor","useEffect","registerCommand","BLUR_COMMAND","editorState","getEditorState","JSON","stringify","toJSON","COMMAND_PRIORITY_LOW"],"sources":["BlurEventPlugin.tsx"],"sourcesContent":["import { FC, useEffect } from \"react\";\nimport { BLUR_COMMAND, COMMAND_PRIORITY_LOW } from \"lexical\";\nimport { LexicalValue } from \"~/types\";\nimport { useRichTextEditor } from \"~/hooks\";\n\ninterface BlurEventPlugin {\n onBlur?: (editorState: LexicalValue) => void;\n}\n\nexport const BlurEventPlugin: FC<BlurEventPlugin> = ({ onBlur }) => {\n const { editor } = useRichTextEditor();\n\n useEffect(\n () =>\n editor.registerCommand(\n BLUR_COMMAND,\n () => {\n if (typeof onBlur === \"function\") {\n const editorState = editor.getEditorState();\n onBlur(JSON.stringify(editorState.toJSON()));\n }\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n []\n );\n return null;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AAMO,IAAMG,eAAoC,GAAAC,OAAA,CAAAD,eAAA,GAAG,SAAvCA,eAAoCA,CAAAE,IAAA,EAAmB;EAAA,IAAbC,MAAM,GAAAD,IAAA,CAANC,MAAM;EACzD,IAAAC,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EAEd,IAAAC,gBAAS,EACL;IAAA,OACID,MAAM,CAACE,eAAe,CAClBC,qBAAY,EACZ,YAAM;MACF,IAAI,OAAON,MAAM,KAAK,UAAU,EAAE;QAC9B,IAAMO,
|
|
1
|
+
{"version":3,"names":["_react","require","_lexical","_hooks","BlurEventPlugin","exports","_ref","onBlur","_useRichTextEditor","useRichTextEditor","editor","useEffect","registerCommand","BLUR_COMMAND","editorState","getEditorState","JSON","stringify","toJSON","COMMAND_PRIORITY_LOW"],"sources":["BlurEventPlugin.tsx"],"sourcesContent":["import { FC, useEffect } from \"react\";\nimport { BLUR_COMMAND, COMMAND_PRIORITY_LOW } from \"lexical\";\nimport { LexicalValue } from \"~/types\";\nimport { useRichTextEditor } from \"~/hooks\";\n\ninterface BlurEventPlugin {\n onBlur?: (editorState: LexicalValue) => void;\n}\n\nexport const BlurEventPlugin: FC<BlurEventPlugin> = ({ onBlur }) => {\n const { editor } = useRichTextEditor();\n\n useEffect(\n () =>\n editor.registerCommand(\n BLUR_COMMAND,\n () => {\n if (typeof onBlur === \"function\") {\n const editorState = editor.getEditorState();\n onBlur(JSON.stringify(editorState.toJSON()));\n }\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n []\n );\n return null;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AAMO,IAAMG,eAAoC,GAAAC,OAAA,CAAAD,eAAA,GAAG,SAAvCA,eAAoCA,CAAAE,IAAA,EAAmB;EAAA,IAAbC,MAAM,GAAAD,IAAA,CAANC,MAAM;EACzD,IAAAC,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EAEd,IAAAC,gBAAS,EACL;IAAA,OACID,MAAM,CAACE,eAAe,CAClBC,qBAAY,EACZ,YAAM;MACF,IAAI,OAAON,MAAM,KAAK,UAAU,EAAE;QAC9B,IAAMO,WAAW,GAAGJ,MAAM,CAACK,cAAc,CAAC,CAAC;QAC3CR,MAAM,CAACS,IAAI,CAACC,SAAS,CAACH,WAAW,CAACI,MAAM,CAAC,CAAC,CAAC,CAAC;MAChD;MACA,OAAO,KAAK;IAChB,CAAC,EACDC,6BACJ,CAAC;EAAA,GACL,EACJ,CAAC;EACD,OAAO,IAAI;AACf,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_utils","_lexical","_lexicalNodes","_getSelectedNode","_setFloatingElemPosition","_useFloatingLinkEditor","_LinkEditForm","_LinkPreviewForm","_sanitizeUrl","_isChildOfLinkEditor","FloatingLinkEditor","_ref","editor","isVisible","anchorElem","editorRef","useRef","_useState","useState","url","target","alt","_useState2","_slicedToArray2","default","linkData","setLinkData","_useState3","_useState4","isEditMode","setEditMode","_useState5","_useState6","lastSelection","setLastSelection","updateLinkEditor","useCallback","selection","$getSelection","emptyLinkData","$isRangeSelection","node","getSelectedNode","parent","getParent","$isLinkNode","getURL","getTarget","getAlt","editorElem","current","nativeSelection","window","getSelection","activeElement","document","rootElement","getRootElement","contains","anchorNode","domRange","getRangeAt","rect","inner","firstElementChild","getBoundingClientRect","setFloatingElemPosition","className","removeLink","dispatchCommand","TOGGLE_LINK_COMMAND","applyChanges","confirmedLinkData","sanitizeUrl","useEffect","scrollerElem","parentElement","update","getEditorState","read","addEventListener","removeEventListener","mergeRegister","registerUpdateListener","_ref2","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","BLUR_COMMAND","payload","isChildOfLinkEditor","relatedTarget","createElement","ref","style","display","LinkEditForm","onSave","onCancel","LinkPreviewForm","onEdit","FloatingLinkEditorPlugin","_ref3","_ref3$anchorElem","body","useFloatingLinkEditor"],"sources":["FloatingLinkEditorPlugin.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n $getSelection,\n $isRangeSelection,\n BaseSelection,\n BLUR_COMMAND,\n COMMAND_PRIORITY_LOW,\n LexicalEditor,\n SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useFloatingLinkEditor } from \"./useFloatingLinkEditor\";\nimport { LinkEditForm } from \"./LinkEditForm\";\nimport { LinkPreviewForm } from \"./LinkPreviewForm\";\nimport \"./FloatingLinkEditorPlugin.css\";\nimport { sanitizeUrl } from \"~/utils/sanitizeUrl\";\nimport { isChildOfLinkEditor } from \"~/plugins/FloatingLinkEditorPlugin/isChildOfLinkEditor\";\n\nexport interface LinkData {\n url: string;\n target: string | null;\n alt: string | null;\n}\n\ninterface FloatingLinkEditorProps {\n editor: LexicalEditor;\n isVisible: boolean;\n anchorElem: HTMLElement;\n}\n\nexport function FloatingLinkEditor({ editor, isVisible, anchorElem }: FloatingLinkEditorProps) {\n const editorRef = useRef<HTMLDivElement | null>(null);\n const [linkData, setLinkData] = useState<LinkData>({\n url: \"\",\n target: null,\n alt: null\n });\n\n const [isEditMode, setEditMode] = useState(false);\n const [lastSelection, setLastSelection] = useState<BaseSelection | null>(null);\n\n const updateLinkEditor = useCallback(() => {\n const selection = $getSelection();\n const emptyLinkData = { url: \"\", target: null, alt: null };\n if ($isRangeSelection(selection)) {\n const node = getSelectedNode(selection);\n const parent = node.getParent();\n\n if ($isLinkNode(parent)) {\n const linkData = {\n url: parent.getURL(),\n target: parent.getTarget(),\n alt: $isLinkNode(parent) ? parent.getAlt() : null\n };\n setLinkData(linkData);\n } else if ($isLinkNode(node)) {\n const linkData = {\n url: node.getURL(),\n target: node.getTarget(),\n alt: $isLinkNode(node) ? node.getAlt() : null\n };\n setLinkData(linkData);\n } else {\n setLinkData(emptyLinkData);\n }\n }\n const editorElem = editorRef.current;\n const nativeSelection = window.getSelection();\n const activeElement = document.activeElement;\n\n if (editorElem === null) {\n return;\n }\n\n const rootElement = editor.getRootElement();\n\n if (\n selection !== null &&\n nativeSelection !== null &&\n rootElement !== null &&\n rootElement.contains(nativeSelection.anchorNode)\n ) {\n const domRange = nativeSelection.getRangeAt(0);\n let rect;\n if (nativeSelection.anchorNode === rootElement) {\n let inner = rootElement;\n while (inner.firstElementChild != null) {\n inner = inner.firstElementChild as HTMLElement;\n }\n rect = inner.getBoundingClientRect();\n } else {\n rect = domRange.getBoundingClientRect();\n }\n\n setFloatingElemPosition(rect, editorElem, anchorElem);\n setLastSelection(selection);\n } else if (!activeElement || activeElement.className !== \"link-input\") {\n if (rootElement !== null) {\n setFloatingElemPosition(null, editorElem, anchorElem);\n }\n setLastSelection(null);\n setEditMode(false);\n setLinkData(emptyLinkData);\n }\n\n return true;\n }, [anchorElem, editor]);\n\n const removeLink = () => {\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n setEditMode(false);\n };\n\n const applyChanges = (linkData: LinkData) => {\n const confirmedLinkData = {\n url: sanitizeUrl(linkData.url),\n target: linkData.target,\n alt: linkData.alt\n };\n\n if (lastSelection !== null) {\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, confirmedLinkData);\n setEditMode(false);\n }\n };\n\n useEffect(() => {\n const scrollerElem = anchorElem.parentElement;\n\n const update = () => {\n editor.getEditorState().read(() => {\n updateLinkEditor();\n });\n };\n\n window.addEventListener(\"resize\", update);\n\n if (scrollerElem) {\n scrollerElem.addEventListener(\"scroll\", update);\n }\n\n return () => {\n window.removeEventListener(\"resize\", update);\n\n if (scrollerElem) {\n scrollerElem.removeEventListener(\"scroll\", update);\n }\n };\n }, [anchorElem.parentElement, editor, updateLinkEditor]);\n\n useEffect(() => {\n return mergeRegister(\n editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n updateLinkEditor();\n });\n }),\n\n editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n () => {\n updateLinkEditor();\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n\n editor.registerCommand(\n BLUR_COMMAND,\n payload => {\n if (!isChildOfLinkEditor(payload.relatedTarget as HTMLElement)) {\n setEditMode(false);\n }\n return false;\n },\n COMMAND_PRIORITY_LOW\n )\n );\n }, [editor, updateLinkEditor]);\n\n useEffect(() => {\n editor.getEditorState().read(() => {\n updateLinkEditor();\n });\n }, [editor, updateLinkEditor]);\n\n return (\n <div\n ref={editorRef}\n className=\"link-editor\"\n style={{ display: isVisible ? \"block\" : \"none\" }}\n >\n {isEditMode ? (\n <LinkEditForm\n linkData={linkData}\n onSave={applyChanges}\n onCancel={() => setEditMode(false)}\n />\n ) : (\n <LinkPreviewForm\n linkData={linkData}\n removeLink={removeLink}\n onEdit={() => {\n setEditMode(true);\n }}\n />\n )}\n </div>\n );\n}\n\nexport function FloatingLinkEditorPlugin({\n anchorElem = document.body\n}: {\n anchorElem?: HTMLElement;\n}): JSX.Element | null {\n return useFloatingLinkEditor(anchorElem);\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_utils","_lexical","_lexicalNodes","_getSelectedNode","_setFloatingElemPosition","_useFloatingLinkEditor","_LinkEditForm","_LinkPreviewForm","_sanitizeUrl","_isChildOfLinkEditor","FloatingLinkEditor","_ref","editor","isVisible","anchorElem","editorRef","useRef","_useState","useState","url","target","alt","_useState2","_slicedToArray2","default","linkData","setLinkData","_useState3","_useState4","isEditMode","setEditMode","_useState5","_useState6","lastSelection","setLastSelection","updateLinkEditor","useCallback","selection","$getSelection","emptyLinkData","$isRangeSelection","node","getSelectedNode","parent","getParent","$isLinkNode","getURL","getTarget","getAlt","editorElem","current","nativeSelection","window","getSelection","activeElement","document","rootElement","getRootElement","contains","anchorNode","domRange","getRangeAt","rect","inner","firstElementChild","getBoundingClientRect","setFloatingElemPosition","className","removeLink","dispatchCommand","TOGGLE_LINK_COMMAND","applyChanges","confirmedLinkData","sanitizeUrl","useEffect","scrollerElem","parentElement","update","getEditorState","read","addEventListener","removeEventListener","mergeRegister","registerUpdateListener","_ref2","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","BLUR_COMMAND","payload","isChildOfLinkEditor","relatedTarget","createElement","ref","style","display","LinkEditForm","onSave","onCancel","LinkPreviewForm","onEdit","FloatingLinkEditorPlugin","_ref3","_ref3$anchorElem","body","useFloatingLinkEditor"],"sources":["FloatingLinkEditorPlugin.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n $getSelection,\n $isRangeSelection,\n BaseSelection,\n BLUR_COMMAND,\n COMMAND_PRIORITY_LOW,\n LexicalEditor,\n SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useFloatingLinkEditor } from \"./useFloatingLinkEditor\";\nimport { LinkEditForm } from \"./LinkEditForm\";\nimport { LinkPreviewForm } from \"./LinkPreviewForm\";\nimport \"./FloatingLinkEditorPlugin.css\";\nimport { sanitizeUrl } from \"~/utils/sanitizeUrl\";\nimport { isChildOfLinkEditor } from \"~/plugins/FloatingLinkEditorPlugin/isChildOfLinkEditor\";\n\nexport interface LinkData {\n url: string;\n target: string | null;\n alt: string | null;\n}\n\ninterface FloatingLinkEditorProps {\n editor: LexicalEditor;\n isVisible: boolean;\n anchorElem: HTMLElement;\n}\n\nexport function FloatingLinkEditor({ editor, isVisible, anchorElem }: FloatingLinkEditorProps) {\n const editorRef = useRef<HTMLDivElement | null>(null);\n const [linkData, setLinkData] = useState<LinkData>({\n url: \"\",\n target: null,\n alt: null\n });\n\n const [isEditMode, setEditMode] = useState(false);\n const [lastSelection, setLastSelection] = useState<BaseSelection | null>(null);\n\n const updateLinkEditor = useCallback(() => {\n const selection = $getSelection();\n const emptyLinkData = { url: \"\", target: null, alt: null };\n if ($isRangeSelection(selection)) {\n const node = getSelectedNode(selection);\n const parent = node.getParent();\n\n if ($isLinkNode(parent)) {\n const linkData = {\n url: parent.getURL(),\n target: parent.getTarget(),\n alt: $isLinkNode(parent) ? parent.getAlt() : null\n };\n setLinkData(linkData);\n } else if ($isLinkNode(node)) {\n const linkData = {\n url: node.getURL(),\n target: node.getTarget(),\n alt: $isLinkNode(node) ? node.getAlt() : null\n };\n setLinkData(linkData);\n } else {\n setLinkData(emptyLinkData);\n }\n }\n const editorElem = editorRef.current;\n const nativeSelection = window.getSelection();\n const activeElement = document.activeElement;\n\n if (editorElem === null) {\n return;\n }\n\n const rootElement = editor.getRootElement();\n\n if (\n selection !== null &&\n nativeSelection !== null &&\n rootElement !== null &&\n rootElement.contains(nativeSelection.anchorNode)\n ) {\n const domRange = nativeSelection.getRangeAt(0);\n let rect;\n if (nativeSelection.anchorNode === rootElement) {\n let inner = rootElement;\n while (inner.firstElementChild != null) {\n inner = inner.firstElementChild as HTMLElement;\n }\n rect = inner.getBoundingClientRect();\n } else {\n rect = domRange.getBoundingClientRect();\n }\n\n setFloatingElemPosition(rect, editorElem, anchorElem);\n setLastSelection(selection);\n } else if (!activeElement || activeElement.className !== \"link-input\") {\n if (rootElement !== null) {\n setFloatingElemPosition(null, editorElem, anchorElem);\n }\n setLastSelection(null);\n setEditMode(false);\n setLinkData(emptyLinkData);\n }\n\n return true;\n }, [anchorElem, editor]);\n\n const removeLink = () => {\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n setEditMode(false);\n };\n\n const applyChanges = (linkData: LinkData) => {\n const confirmedLinkData = {\n url: sanitizeUrl(linkData.url),\n target: linkData.target,\n alt: linkData.alt\n };\n\n if (lastSelection !== null) {\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, confirmedLinkData);\n setEditMode(false);\n }\n };\n\n useEffect(() => {\n const scrollerElem = anchorElem.parentElement;\n\n const update = () => {\n editor.getEditorState().read(() => {\n updateLinkEditor();\n });\n };\n\n window.addEventListener(\"resize\", update);\n\n if (scrollerElem) {\n scrollerElem.addEventListener(\"scroll\", update);\n }\n\n return () => {\n window.removeEventListener(\"resize\", update);\n\n if (scrollerElem) {\n scrollerElem.removeEventListener(\"scroll\", update);\n }\n };\n }, [anchorElem.parentElement, editor, updateLinkEditor]);\n\n useEffect(() => {\n return mergeRegister(\n editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n updateLinkEditor();\n });\n }),\n\n editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n () => {\n updateLinkEditor();\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n\n editor.registerCommand(\n BLUR_COMMAND,\n payload => {\n if (!isChildOfLinkEditor(payload.relatedTarget as HTMLElement)) {\n setEditMode(false);\n }\n return false;\n },\n COMMAND_PRIORITY_LOW\n )\n );\n }, [editor, updateLinkEditor]);\n\n useEffect(() => {\n editor.getEditorState().read(() => {\n updateLinkEditor();\n });\n }, [editor, updateLinkEditor]);\n\n return (\n <div\n ref={editorRef}\n className=\"link-editor\"\n style={{ display: isVisible ? \"block\" : \"none\" }}\n >\n {isEditMode ? (\n <LinkEditForm\n linkData={linkData}\n onSave={applyChanges}\n onCancel={() => setEditMode(false)}\n />\n ) : (\n <LinkPreviewForm\n linkData={linkData}\n removeLink={removeLink}\n onEdit={() => {\n setEditMode(true);\n }}\n />\n )}\n </div>\n );\n}\n\nexport function FloatingLinkEditorPlugin({\n anchorElem = document.body\n}: {\n anchorElem?: HTMLElement;\n}): JSX.Element | null {\n return useFloatingLinkEditor(anchorElem);\n}\n"],"mappings":"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","ignoreList":[]}
|