@uva-glass/component-library 3.53.3 → 3.53.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{TablePlugin-Culqb83M.js → TablePlugin-BlXaQ0U6.js} +15 -15
- package/dist/TablePlugin-BlXaQ0U6.js.map +1 -0
- package/dist/{chunk-GPBRNGY5-BSRMHXbx.js → chunk-MDLQUVZN-BSRMHXbx.js} +1 -1
- package/dist/{chunk-GPBRNGY5-BSRMHXbx.js.map → chunk-MDLQUVZN-BSRMHXbx.js.map} +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.js +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.stories.js +1 -1
- package/dist/components/FormInput/FormInput.js +1 -1
- package/dist/components/Icon/icons/index.d.ts +6 -0
- package/dist/components/Icon/icons/index.js +222 -217
- package/dist/components/Icon/icons/index.js.map +1 -1
- package/dist/components/InputField/InputField.stories.js +1 -1
- package/dist/components/MultiSelect/MultiSelect.js +1 -1
- package/dist/components/MultiSelect/MultiSelect.stories.js +1 -1
- package/dist/components/MultiSelect/components/MultiSelectHeader.js +1 -1
- package/dist/components/MultiSelect/index.js +1 -1
- package/dist/components/PageOverlay/PageOverlay.stories.js +71 -71
- package/dist/components/PageOverlay/PageOverlay.stories.js.map +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.js +1 -1
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js +1 -1
- package/dist/components/RadioTabSelector/RadioTabSelector.js +1 -1
- package/dist/components/RteEditor/EditorHeader/EditorHeader.js +1 -1
- package/dist/components/RteEditor/Plugins/CourseCataloguePlugin/CourseCataloguePlugin.js +32 -32
- package/dist/components/RteEditor/Plugins/CourseCataloguePlugin/CourseCataloguePlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js +24 -24
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/ListPlugin/ListPlugin.js +7 -7
- package/dist/components/RteEditor/Plugins/ListPlugin/ListPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/AddTableFrom.js +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/TablePlugin.js +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/index.js +1 -1
- package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js +1 -1
- package/dist/components/RteEditor/Plugins/index.js +1 -1
- package/dist/components/RteEditor/RteEditor.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/index.js +1 -1
- package/dist/storybook__react.d.js +1 -1
- package/package.json +22 -22
- package/dist/TablePlugin-Culqb83M.js.map +0 -1
package/dist/components/RteEditor/Plugins/CourseCataloguePlugin/CourseCataloguePlugin.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CourseCataloguePlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/CourseCataloguePlugin/CourseCataloguePlugin.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\r\nimport { clsx } from 'clsx';\r\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\r\nimport {\r\n $createRangeSelection,\r\n $createTextNode,\r\n $getSelection,\r\n $isRangeSelection,\r\n $isTextNode,\r\n $setSelection,\r\n COMMAND_PRIORITY_CRITICAL,\r\n COMMAND_PRIORITY_EDITOR,\r\n COMMAND_PRIORITY_LOW,\r\n COPY_COMMAND,\r\n KEY_DOWN_COMMAND,\r\n} from 'lexical';\r\nimport { $getNearestNodeOfType } from '@lexical/utils';\r\n\r\nimport type { RefObject } from 'react';\r\nimport type { LexicalNode, TextNode } from 'lexical';\r\nimport type { SearchResponse } from './AddCatalogueLinkForm';\r\n\r\nimport { AddCatalogueLinkForm } from './AddCatalogueLinkForm';\r\n\r\nimport styles from 'components/RteEditor/RteEditor.module.css';\r\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\r\nimport {\r\n $getLinkTypeFromNode,\r\n CourseCatalogueNode,\r\n INSERT_COURSE_CATALOGUE_LINK,\r\n REMOVE_COURSE_CATALOGUE_LINK,\r\n} from 'components/RteEditor/nodes/CourseCatalogueNode';\r\nimport { useOnClickOutside } from 'components/hooks/useOnClickOutside';\r\n\r\ninterface CourseCataloguePluginProps {\r\n onSearch: (query: string, linkType: 'course' | 'programme') => void;\r\n searchResponse: SearchResponse;\r\n parentScrollPosition: number;\r\n}\r\n\r\nexport const CourseCataloguePlugin = ({\r\n onSearch,\r\n searchResponse,\r\n parentScrollPosition,\r\n}: CourseCataloguePluginProps) => {\r\n const [editor] = useLexicalComposerContext();\r\n const t = useTranslation();\r\n const [courseIsActive, setCourseIsActive] = useState(false);\r\n const [programmeIsActive, setProgrammeIsActive] = useState(false);\r\n const courseButtonRef = useRef<HTMLButtonElement>(null);\r\n const programmeButtonRef = useRef<HTMLButtonElement>(null);\r\n const flyoutRef = useRef<HTMLDivElement>(null);\r\n const [flyoutPosition, setFlyoutPosition] = useState<{ top: number; left: number } | null>(null);\r\n const [type, setType] = useState<'course' | 'programme'>('course');\r\n\r\n const openFlyout = (type: 'course' | 'programme') => {\r\n setType(type);\r\n const rect =\r\n type === 'course'\r\n ? courseButtonRef.current?.getBoundingClientRect()\r\n : programmeButtonRef.current?.getBoundingClientRect();\r\n if (rect) {\r\n setFlyoutPosition({ top: rect.bottom + window.scrollY, left: rect.left + window.scrollX });\r\n }\r\n };\r\n\r\n const closeFlyout = () => {\r\n onSearch('', type);\r\n setFlyoutPosition(null);\r\n };\r\n\r\n useEffect(() => {\r\n if (flyoutPosition) {\r\n closeFlyout();\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [parentScrollPosition]);\r\n\r\n useEffect(() => {\r\n const removeKeyboardShortcut = editor.registerCommand(\r\n KEY_DOWN_COMMAND,\r\n (event: KeyboardEvent) => {\r\n if (event.ctrlKey && event.shiftKey && event.altKey && event.key === 'C') {\r\n event.preventDefault();\r\n openFlyout('course');\r\n return true;\r\n }\r\n if (event.ctrlKey && event.shiftKey && event.altKey && event.key === 'P') {\r\n event.preventDefault();\r\n openFlyout('programme');\r\n return true;\r\n }\r\n return false;\r\n },\r\n COMMAND_PRIORITY_EDITOR\r\n );\r\n\r\n const removeStatusListener = editor.registerUpdateListener(({ editorState }) => {\r\n editorState.read(() => {\r\n const selection = $getSelection();\r\n if ($isRangeSelection(selection)) {\r\n const anchorNode = selection.anchor.getNode();\r\n const offset = selection.anchor.offset;\r\n\r\n if (\r\n $isTextNode(anchorNode) &&\r\n offset === anchorNode.getTextContentSize() &&\r\n anchorNode.getNextSibling() instanceof CourseCatalogueNode\r\n ) {\r\n // Cursor staat aan het begin van de link!\r\n const courseCatalogueLink = anchorNode.getNextSibling();\r\n if (courseCatalogueLink) {\r\n const linkType = $getLinkTypeFromNode(courseCatalogueLink);\r\n setCourseIsActive(linkType === 'course');\r\n setProgrammeIsActive(linkType === 'programme');\r\n return;\r\n }\r\n }\r\n\r\n const courseCatalogueLink = $getNearestNodeOfType(anchorNode, CourseCatalogueNode);\r\n if (courseCatalogueLink) {\r\n const linkType = $getLinkTypeFromNode(courseCatalogueLink);\r\n setCourseIsActive(linkType === 'course');\r\n setProgrammeIsActive(linkType === 'programme');\r\n return;\r\n }\r\n setCourseIsActive(false);\r\n setProgrammeIsActive(false);\r\n }\r\n });\r\n });\r\n\r\n const moveToEndOfWhiteSpace = (whiteSpace: TextNode) => {\r\n const selection = $createRangeSelection();\r\n const endOffset = whiteSpace.getTextContentSize();\r\n selection.setTextNodeRange(whiteSpace, endOffset, whiteSpace, endOffset);\r\n $setSelection(selection);\r\n };\r\n\r\n const isCursorBeforeLink = (anchorNode: LexicalNode, offset: number) =>\r\n $isTextNode(anchorNode) &&\r\n offset === anchorNode.getTextContentSize() &&\r\n anchorNode.getNextSibling() instanceof CourseCatalogueNode;\r\n\r\n const removeUnEditable = editor.registerCommand(\r\n KEY_DOWN_COMMAND,\r\n (event: KeyboardEvent) => {\r\n const selection = $getSelection();\r\n if ($isRangeSelection(selection)) {\r\n const key = event.key;\r\n const anchorNode = selection.anchor.getNode();\r\n const offset = selection.anchor.offset;\r\n let courseCatalogueLink = $getNearestNodeOfType(anchorNode, CourseCatalogueNode);\r\n\r\n // Detect if cursor is right before the link\r\n if (isCursorBeforeLink(anchorNode, offset)) {\r\n courseCatalogueLink = anchorNode.getNextSibling();\r\n }\r\n\r\n if (!courseCatalogueLink) {\r\n return false;\r\n }\r\n\r\n const nodeLength = courseCatalogueLink?.getTextContentSize();\r\n\r\n // Prevent Enter if in the middle of the link, allow only at start or end\r\n if (courseCatalogueLink && event.key === 'Enter') {\r\n event.preventDefault();\r\n editor.update(() => {\r\n if (isCursorBeforeLink(anchorNode, offset)) {\r\n const brNode = $createTextNode('\\n');\r\n courseCatalogueLink.insertBefore(brNode);\r\n }\r\n if (offset === nodeLength) {\r\n const brNode = $createTextNode('\\n');\r\n courseCatalogueLink.insertAfter(brNode);\r\n moveToEndOfWhiteSpace(brNode);\r\n }\r\n });\r\n return true;\r\n }\r\n\r\n // Allow add space before or after the link\r\n if (courseCatalogueLink && (key === ' ' || event.code === 'Space')) {\r\n event.preventDefault();\r\n editor.update(() => {\r\n const spaceToAdd = $createTextNode(' ');\r\n if (isCursorBeforeLink(anchorNode, offset)) {\r\n courseCatalogueLink.insertBefore(spaceToAdd);\r\n moveToEndOfWhiteSpace(spaceToAdd);\r\n }\r\n if (offset === nodeLength) {\r\n courseCatalogueLink.insertAfter(spaceToAdd);\r\n moveToEndOfWhiteSpace(spaceToAdd);\r\n }\r\n });\r\n return true;\r\n }\r\n\r\n // Delete link if selected and Backspace or Del is pressed\r\n if (courseCatalogueLink && (key === 'Backspace' || key === 'Delete')) {\r\n event.preventDefault();\r\n editor.update(\r\n () => {\r\n editor.dispatchCommand(REMOVE_COURSE_CATALOGUE_LINK, undefined);\r\n },\r\n { discrete: true }\r\n );\r\n return true;\r\n }\r\n\r\n // Allow Home, End and Arrow navigation\r\n if (\r\n courseCatalogueLink &&\r\n key !== 'ArrowLeft' &&\r\n key !== 'ArrowRight' &&\r\n key !== 'ArrowUp' &&\r\n key !== 'ArrowDown' &&\r\n key !== 'Home' &&\r\n key !== 'End' &&\r\n !(event.ctrlKey && (key.toLowerCase() === 'z' || key.toLowerCase() === 'y')) &&\r\n !(event.ctrlKey && key.toLowerCase() === 'c')\r\n ) {\r\n event.preventDefault();\r\n return true;\r\n }\r\n }\r\n return false;\r\n },\r\n COMMAND_PRIORITY_CRITICAL\r\n );\r\n\r\n const removeCopy = editor.registerCommand(\r\n COPY_COMMAND,\r\n (event: ClipboardEvent) => {\r\n const selection = $getSelection();\r\n if ($isRangeSelection(selection)) {\r\n const anchorNode = selection.anchor.getNode();\r\n const courseCatalogueLink = $getNearestNodeOfType(anchorNode, CourseCatalogueNode);\r\n if (courseCatalogueLink) {\r\n event.preventDefault();\r\n const domElement = editor.getElementByKey(courseCatalogueLink.getKey());\r\n if (domElement) {\r\n event.clipboardData?.setData('text/html', domElement.outerHTML);\r\n event.clipboardData?.setData('text/plain', courseCatalogueLink.getTextContent());\r\n }\r\n return true;\r\n }\r\n }\r\n return false;\r\n },\r\n COMMAND_PRIORITY_LOW\r\n );\r\n return () => {\r\n removeKeyboardShortcut();\r\n removeStatusListener();\r\n removeUnEditable();\r\n removeCopy();\r\n };\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [editor]);\r\n\r\n useOnClickOutside(flyoutRef as RefObject<HTMLElement>, () => setFlyoutPosition(null));\r\n\r\n return (\r\n <div className={styles['editor__toolbar-button-group']}>\r\n <div className={styles['editor__toolbar-button-flyoutwrapper']}>\r\n <div className={styles['editor__toolbar-button-group--text']}>\r\n <button\r\n onClick={() => openFlyout('course')}\r\n title={t.cataloguelinks.courseTooltip}\r\n className={clsx(\r\n styles['editor__toolbar-button'],\r\n styles['editor__toolbar-button--text'],\r\n courseIsActive && styles[`editor__toolbar-button--active`]\r\n )}\r\n aria-label={t.aria.labels.courselink}\r\n aria-keyshortcuts={t.aria.keyshortcuts.courselink}\r\n type=\"button\"\r\n ref={courseButtonRef}\r\n >\r\n {t.cataloguelinks.courseButtonLabel}\r\n </button>\r\n <button\r\n onClick={() => openFlyout('programme')}\r\n title={t.cataloguelinks.programmeTooltip}\r\n className={clsx(\r\n styles['editor__toolbar-button'],\r\n styles['editor__toolbar-button--text'],\r\n programmeIsActive && styles[`editor__toolbar-button--active`]\r\n )}\r\n aria-label={t.aria.labels.programmelink}\r\n aria-keyshortcuts={t.aria.keyshortcuts.programmelink}\r\n type=\"button\"\r\n ref={programmeButtonRef}\r\n >\r\n {t.cataloguelinks.programmeButtonLabel}\r\n </button>\r\n </div>\r\n {flyoutPosition && (\r\n <div\r\n className={styles['editor__toolbar-flyout-wrapper']}\r\n style={{ top: flyoutPosition.top, left: flyoutPosition.left }}\r\n ref={flyoutRef}\r\n >\r\n <AddCatalogueLinkForm\r\n linkType={type}\r\n onCloseHandler={closeFlyout}\r\n onSearchHandler={onSearch}\r\n searchResponse={searchResponse}\r\n onSelect={(code, label, linkType) => {\r\n editor.dispatchCommand(INSERT_COURSE_CATALOGUE_LINK, {\r\n linkType,\r\n code,\r\n label,\r\n });\r\n closeFlyout();\r\n }}\r\n />\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n};\r\n"],"names":["CourseCataloguePlugin","onSearch","searchResponse","parentScrollPosition","editor","useLexicalComposerContext","t","useTranslation","courseIsActive","setCourseIsActive","useState","programmeIsActive","setProgrammeIsActive","courseButtonRef","useRef","programmeButtonRef","flyoutRef","flyoutPosition","setFlyoutPosition","type","setType","openFlyout","rect","closeFlyout","useEffect","removeKeyboardShortcut","KEY_DOWN_COMMAND","event","COMMAND_PRIORITY_EDITOR","removeStatusListener","editorState","selection","$getSelection","$isRangeSelection","anchorNode","offset","$isTextNode","CourseCatalogueNode","courseCatalogueLink","linkType","$getLinkTypeFromNode","$getNearestNodeOfType","moveToEndOfWhiteSpace","whiteSpace","$createRangeSelection","endOffset","$setSelection","isCursorBeforeLink","removeUnEditable","key","nodeLength","brNode","$createTextNode","spaceToAdd","REMOVE_COURSE_CATALOGUE_LINK","COMMAND_PRIORITY_CRITICAL","removeCopy","COPY_COMMAND","domElement","COMMAND_PRIORITY_LOW","useOnClickOutside","jsx","styles","jsxs","clsx","AddCatalogueLinkForm","code","label","INSERT_COURSE_CATALOGUE_LINK"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CourseCataloguePlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/CourseCataloguePlugin/CourseCataloguePlugin.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\r\nimport { clsx } from 'clsx';\r\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\r\nimport {\r\n $createRangeSelection,\r\n $createTextNode,\r\n $getSelection,\r\n $isRangeSelection,\r\n $isTextNode,\r\n $setSelection,\r\n COMMAND_PRIORITY_CRITICAL,\r\n COMMAND_PRIORITY_LOW,\r\n COPY_COMMAND,\r\n KEY_DOWN_COMMAND,\r\n} from 'lexical';\r\nimport { $getNearestNodeOfType } from '@lexical/utils';\r\n\r\nimport type { RefObject } from 'react';\r\nimport type { LexicalNode, TextNode } from 'lexical';\r\nimport type { SearchResponse } from './AddCatalogueLinkForm';\r\n\r\nimport { AddCatalogueLinkForm } from './AddCatalogueLinkForm';\r\n\r\nimport styles from 'components/RteEditor/RteEditor.module.css';\r\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\r\nimport {\r\n $getLinkTypeFromNode,\r\n CourseCatalogueNode,\r\n INSERT_COURSE_CATALOGUE_LINK,\r\n REMOVE_COURSE_CATALOGUE_LINK,\r\n} from 'components/RteEditor/nodes/CourseCatalogueNode';\r\nimport { useOnClickOutside } from 'components/hooks/useOnClickOutside';\r\n\r\ninterface CourseCataloguePluginProps {\r\n onSearch: (query: string, linkType: 'course' | 'programme') => void;\r\n searchResponse: SearchResponse;\r\n parentScrollPosition: number;\r\n}\r\n\r\nexport const CourseCataloguePlugin = ({\r\n onSearch,\r\n searchResponse,\r\n parentScrollPosition,\r\n}: CourseCataloguePluginProps) => {\r\n const [editor] = useLexicalComposerContext();\r\n const t = useTranslation();\r\n const [courseIsActive, setCourseIsActive] = useState(false);\r\n const [programmeIsActive, setProgrammeIsActive] = useState(false);\r\n const courseButtonRef = useRef<HTMLButtonElement>(null);\r\n const programmeButtonRef = useRef<HTMLButtonElement>(null);\r\n const flyoutRef = useRef<HTMLDivElement>(null);\r\n const [flyoutPosition, setFlyoutPosition] = useState<{ top: number; left: number } | null>(null);\r\n const [type, setType] = useState<'course' | 'programme'>('course');\r\n\r\n const openFlyout = (type: 'course' | 'programme') => {\r\n setType(type);\r\n const rect =\r\n type === 'course'\r\n ? courseButtonRef.current?.getBoundingClientRect()\r\n : programmeButtonRef.current?.getBoundingClientRect();\r\n if (rect) {\r\n setFlyoutPosition({ top: rect.bottom + window.scrollY, left: rect.left + window.scrollX });\r\n }\r\n };\r\n\r\n const closeFlyout = () => {\r\n onSearch('', type);\r\n setFlyoutPosition(null);\r\n };\r\n\r\n useEffect(() => {\r\n if (flyoutPosition) {\r\n closeFlyout();\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [parentScrollPosition]);\r\n\r\n useEffect(() => {\r\n const removeKeyboardShortcut = editor.registerCommand(\r\n KEY_DOWN_COMMAND,\r\n (event: KeyboardEvent) => {\r\n if (event.ctrlKey && event.shiftKey && event.altKey && event.key === 'C') {\r\n event.preventDefault();\r\n openFlyout('course');\r\n return true;\r\n }\r\n if (event.ctrlKey && event.shiftKey && event.altKey && event.key === 'P') {\r\n event.preventDefault();\r\n openFlyout('programme');\r\n return true;\r\n }\r\n return false;\r\n },\r\n COMMAND_PRIORITY_CRITICAL\r\n );\r\n\r\n const removeStatusListener = editor.registerUpdateListener(({ editorState }) => {\r\n editorState.read(() => {\r\n const selection = $getSelection();\r\n if ($isRangeSelection(selection)) {\r\n const anchorNode = selection.anchor.getNode();\r\n const offset = selection.anchor.offset;\r\n\r\n if (\r\n $isTextNode(anchorNode) &&\r\n offset === anchorNode.getTextContentSize() &&\r\n anchorNode.getNextSibling() instanceof CourseCatalogueNode\r\n ) {\r\n // Cursor staat aan het begin van de link!\r\n const courseCatalogueLink = anchorNode.getNextSibling();\r\n if (courseCatalogueLink) {\r\n const linkType = $getLinkTypeFromNode(courseCatalogueLink);\r\n setCourseIsActive(linkType === 'course');\r\n setProgrammeIsActive(linkType === 'programme');\r\n return;\r\n }\r\n }\r\n\r\n const courseCatalogueLink = $getNearestNodeOfType(anchorNode, CourseCatalogueNode);\r\n if (courseCatalogueLink) {\r\n const linkType = $getLinkTypeFromNode(courseCatalogueLink);\r\n setCourseIsActive(linkType === 'course');\r\n setProgrammeIsActive(linkType === 'programme');\r\n return;\r\n }\r\n setCourseIsActive(false);\r\n setProgrammeIsActive(false);\r\n }\r\n });\r\n });\r\n\r\n const moveToEndOfWhiteSpace = (whiteSpace: TextNode) => {\r\n const selection = $createRangeSelection();\r\n const endOffset = whiteSpace.getTextContentSize();\r\n selection.setTextNodeRange(whiteSpace, endOffset, whiteSpace, endOffset);\r\n $setSelection(selection);\r\n };\r\n\r\n const isCursorBeforeLink = (anchorNode: LexicalNode, offset: number) =>\r\n $isTextNode(anchorNode) &&\r\n offset === anchorNode.getTextContentSize() &&\r\n anchorNode.getNextSibling() instanceof CourseCatalogueNode;\r\n\r\n const removeUnEditable = editor.registerCommand(\r\n KEY_DOWN_COMMAND,\r\n (event: KeyboardEvent) => {\r\n const selection = $getSelection();\r\n if ($isRangeSelection(selection)) {\r\n const key = event.key;\r\n const anchorNode = selection.anchor.getNode();\r\n const offset = selection.anchor.offset;\r\n let courseCatalogueLink = $getNearestNodeOfType(anchorNode, CourseCatalogueNode);\r\n\r\n // Detect if cursor is right before the link\r\n if (isCursorBeforeLink(anchorNode, offset)) {\r\n courseCatalogueLink = anchorNode.getNextSibling();\r\n }\r\n\r\n if (!courseCatalogueLink) {\r\n return false;\r\n }\r\n\r\n const nodeLength = courseCatalogueLink?.getTextContentSize();\r\n\r\n // Prevent Enter if in the middle of the link, allow only at start or end\r\n if (courseCatalogueLink && event.key === 'Enter') {\r\n event.preventDefault();\r\n editor.update(() => {\r\n if (isCursorBeforeLink(anchorNode, offset)) {\r\n const brNode = $createTextNode('\\n');\r\n courseCatalogueLink.insertBefore(brNode);\r\n }\r\n if (offset === nodeLength) {\r\n const brNode = $createTextNode('\\n');\r\n courseCatalogueLink.insertAfter(brNode);\r\n moveToEndOfWhiteSpace(brNode);\r\n }\r\n });\r\n return true;\r\n }\r\n\r\n // Allow add space before or after the link\r\n if (courseCatalogueLink && (key === ' ' || event.code === 'Space')) {\r\n event.preventDefault();\r\n editor.update(() => {\r\n const spaceToAdd = $createTextNode(' ');\r\n if (isCursorBeforeLink(anchorNode, offset)) {\r\n courseCatalogueLink.insertBefore(spaceToAdd);\r\n moveToEndOfWhiteSpace(spaceToAdd);\r\n }\r\n if (offset === nodeLength) {\r\n courseCatalogueLink.insertAfter(spaceToAdd);\r\n moveToEndOfWhiteSpace(spaceToAdd);\r\n }\r\n });\r\n return true;\r\n }\r\n\r\n // Delete link if selected and Backspace or Del is pressed\r\n if (courseCatalogueLink && (key === 'Backspace' || key === 'Delete')) {\r\n event.preventDefault();\r\n editor.update(\r\n () => {\r\n editor.dispatchCommand(REMOVE_COURSE_CATALOGUE_LINK, undefined);\r\n },\r\n { discrete: true }\r\n );\r\n return true;\r\n }\r\n\r\n // Allow Home, End and Arrow navigation\r\n if (\r\n courseCatalogueLink &&\r\n key !== 'ArrowLeft' &&\r\n key !== 'ArrowRight' &&\r\n key !== 'ArrowUp' &&\r\n key !== 'ArrowDown' &&\r\n key !== 'Home' &&\r\n key !== 'End' &&\r\n !(event.ctrlKey && (key.toLowerCase() === 'z' || key.toLowerCase() === 'y')) &&\r\n !(event.ctrlKey && key.toLowerCase() === 'c')\r\n ) {\r\n event.preventDefault();\r\n return true;\r\n }\r\n }\r\n return false;\r\n },\r\n COMMAND_PRIORITY_CRITICAL\r\n );\r\n\r\n const removeCopy = editor.registerCommand(\r\n COPY_COMMAND,\r\n (event: ClipboardEvent) => {\r\n const selection = $getSelection();\r\n if ($isRangeSelection(selection)) {\r\n const anchorNode = selection.anchor.getNode();\r\n const courseCatalogueLink = $getNearestNodeOfType(anchorNode, CourseCatalogueNode);\r\n if (courseCatalogueLink) {\r\n event.preventDefault();\r\n const domElement = editor.getElementByKey(courseCatalogueLink.getKey());\r\n if (domElement) {\r\n event.clipboardData?.setData('text/html', domElement.outerHTML);\r\n event.clipboardData?.setData('text/plain', courseCatalogueLink.getTextContent());\r\n }\r\n return true;\r\n }\r\n }\r\n return false;\r\n },\r\n COMMAND_PRIORITY_LOW\r\n );\r\n return () => {\r\n removeKeyboardShortcut();\r\n removeStatusListener();\r\n removeUnEditable();\r\n removeCopy();\r\n };\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [editor]);\r\n\r\n useOnClickOutside(flyoutRef as RefObject<HTMLElement>, () => setFlyoutPosition(null));\r\n\r\n return (\r\n <div className={styles['editor__toolbar-button-group']}>\r\n <div className={styles['editor__toolbar-button-flyoutwrapper']}>\r\n <div className={styles['editor__toolbar-button-group--text']}>\r\n <button\r\n onClick={() => openFlyout('course')}\r\n title={t.cataloguelinks.courseTooltip}\r\n className={clsx(\r\n styles['editor__toolbar-button'],\r\n styles['editor__toolbar-button--text'],\r\n courseIsActive && styles[`editor__toolbar-button--active`]\r\n )}\r\n aria-label={t.aria.labels.courselink}\r\n aria-keyshortcuts={t.aria.keyshortcuts.courselink}\r\n type=\"button\"\r\n ref={courseButtonRef}\r\n >\r\n {t.cataloguelinks.courseButtonLabel}\r\n </button>\r\n <button\r\n onClick={() => openFlyout('programme')}\r\n title={t.cataloguelinks.programmeTooltip}\r\n className={clsx(\r\n styles['editor__toolbar-button'],\r\n styles['editor__toolbar-button--text'],\r\n programmeIsActive && styles[`editor__toolbar-button--active`]\r\n )}\r\n aria-label={t.aria.labels.programmelink}\r\n aria-keyshortcuts={t.aria.keyshortcuts.programmelink}\r\n type=\"button\"\r\n ref={programmeButtonRef}\r\n >\r\n {t.cataloguelinks.programmeButtonLabel}\r\n </button>\r\n </div>\r\n {flyoutPosition && (\r\n <div\r\n className={styles['editor__toolbar-flyout-wrapper']}\r\n style={{ top: flyoutPosition.top, left: flyoutPosition.left }}\r\n ref={flyoutRef}\r\n >\r\n <AddCatalogueLinkForm\r\n linkType={type}\r\n onCloseHandler={closeFlyout}\r\n onSearchHandler={onSearch}\r\n searchResponse={searchResponse}\r\n onSelect={(code, label, linkType) => {\r\n editor.dispatchCommand(INSERT_COURSE_CATALOGUE_LINK, {\r\n linkType,\r\n code,\r\n label,\r\n });\r\n closeFlyout();\r\n }}\r\n />\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n};\r\n"],"names":["CourseCataloguePlugin","onSearch","searchResponse","parentScrollPosition","editor","useLexicalComposerContext","t","useTranslation","courseIsActive","setCourseIsActive","useState","programmeIsActive","setProgrammeIsActive","courseButtonRef","useRef","programmeButtonRef","flyoutRef","flyoutPosition","setFlyoutPosition","type","setType","openFlyout","rect","closeFlyout","useEffect","removeKeyboardShortcut","KEY_DOWN_COMMAND","event","COMMAND_PRIORITY_CRITICAL","removeStatusListener","editorState","selection","$getSelection","$isRangeSelection","anchorNode","offset","$isTextNode","CourseCatalogueNode","courseCatalogueLink","linkType","$getLinkTypeFromNode","$getNearestNodeOfType","moveToEndOfWhiteSpace","whiteSpace","$createRangeSelection","endOffset","$setSelection","isCursorBeforeLink","removeUnEditable","key","nodeLength","brNode","$createTextNode","spaceToAdd","REMOVE_COURSE_CATALOGUE_LINK","removeCopy","COPY_COMMAND","domElement","COMMAND_PRIORITY_LOW","useOnClickOutside","jsx","styles","jsxs","clsx","AddCatalogueLinkForm","code","label","INSERT_COURSE_CATALOGUE_LINK"],"mappings":"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"}
|
|
@@ -18,7 +18,7 @@ import "../../../IconButton/IconButton.js";
|
|
|
18
18
|
import "../../../Input/Input.js";
|
|
19
19
|
import "../../../InputField/InputField.js";
|
|
20
20
|
import "react-router";
|
|
21
|
-
import "../../../../TablePlugin-
|
|
21
|
+
import "../../../../TablePlugin-BlXaQ0U6.js";
|
|
22
22
|
import { s as r } from "../../../../RteEditor.module-DaBh86FK.js";
|
|
23
23
|
import { useTranslation as g } from "../../hooks/useTranslation.js";
|
|
24
24
|
import "../../Providers/LanguageProvider.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import { A as I } from "../../../../../TablePlugin-
|
|
3
|
+
import { A as I } from "../../../../../TablePlugin-BlXaQ0U6.js";
|
|
4
4
|
import "../helpers.js";
|
|
5
5
|
import "../../../../Accordion/Accordion.js";
|
|
6
6
|
import "../../../../Icon/Icon.js";
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { jsx as f, jsxs as
|
|
2
|
-
import { o as
|
|
3
|
-
import { c as
|
|
4
|
-
import { y as L, P as
|
|
5
|
-
import { useRef as a, useState as
|
|
6
|
-
import { a4 as Q, c as p, u as X, aF as Z, b as w,
|
|
1
|
+
import { jsx as f, jsxs as G } from "react/jsx-runtime";
|
|
2
|
+
import { o as J } from "../../../../LexicalComposerContext.prod-DOyoZx0P.js";
|
|
3
|
+
import { c as W } from "../../../../clsx-OuTLNxxd.js";
|
|
4
|
+
import { y as L, P as Y, J as $ } from "../../../../LexicalLink.prod-EEOzXxej.js";
|
|
5
|
+
import { useRef as a, useState as q, useEffect as u } from "react";
|
|
6
|
+
import { a4 as Q, c as p, u as X, aF as Z, b as w, ah as tt, l as et, _ as ot } from "../../../../Lexical.prod-Dgzi-S1E.js";
|
|
7
7
|
import { x as N } from "../../../../LexicalUtils.prod-D1mwAww-.js";
|
|
8
|
-
import { A as rt } from "../../../../TablePlugin-
|
|
8
|
+
import { A as rt } from "../../../../TablePlugin-BlXaQ0U6.js";
|
|
9
9
|
import { ensureHttps as nt } from "./helpers.js";
|
|
10
10
|
import { LinkContextMenu as it } from "./LinkContextMenu/LinkContextMenu.js";
|
|
11
11
|
import { useFlyout as st } from "../../hooks/useFlyout.js";
|
|
@@ -36,8 +36,8 @@ import "../../../SelectListbox/SelectProvider.js";
|
|
|
36
36
|
import "../../../Sortable/components/SortableItem.js";
|
|
37
37
|
import "../../../../SortableProvider-BbwlEPIr.js";
|
|
38
38
|
import "../../../WeekSelector/components/WeekSelectorOptionContainer.js";
|
|
39
|
-
const ut = 200,
|
|
40
|
-
const x = lt(), [i] =
|
|
39
|
+
const ut = 200, $t = ({ parentScrollPosition: U }) => {
|
|
40
|
+
const x = lt(), [i] = J(), { flyout: z, showFlyout: P, hideFlyout: h, isVisible: l } = st(), m = a(void 0), T = a(!1), C = a(""), d = a(""), [k, O] = q({ active: !1, url: "", linktext: "" }), R = a(l), F = a(null), S = a(null), _ = a(void 0), y = () => {
|
|
41
41
|
i.update(() => {
|
|
42
42
|
const r = p();
|
|
43
43
|
F.current = r;
|
|
@@ -46,7 +46,7 @@ const ut = 200, qt = ({ parentScrollPosition: U }) => {
|
|
|
46
46
|
i.update(() => {
|
|
47
47
|
F.current && et(F.current);
|
|
48
48
|
});
|
|
49
|
-
},
|
|
49
|
+
}, A = (r, t) => {
|
|
50
50
|
P({
|
|
51
51
|
position: t,
|
|
52
52
|
children: /* @__PURE__ */ f(
|
|
@@ -54,7 +54,7 @@ const ut = 200, qt = ({ parentScrollPosition: U }) => {
|
|
|
54
54
|
{
|
|
55
55
|
url: r,
|
|
56
56
|
onSave: (e) => B(e, ""),
|
|
57
|
-
onDelete: () =>
|
|
57
|
+
onDelete: () => H(),
|
|
58
58
|
onClose: K,
|
|
59
59
|
ref: _
|
|
60
60
|
}
|
|
@@ -64,7 +64,7 @@ const ut = 200, qt = ({ parentScrollPosition: U }) => {
|
|
|
64
64
|
_.current?.clearForm(), h(), D();
|
|
65
65
|
}, E = () => {
|
|
66
66
|
const r = S.current?.getBoundingClientRect();
|
|
67
|
-
!T.current && r && (y(), P({ position: { top: r.bottom, left: r.left }, ...
|
|
67
|
+
!T.current && r && (y(), P({ position: { top: r.bottom, left: r.left }, ...M }), setTimeout(() => m.current?.setDefaults("", d.current), 0));
|
|
68
68
|
}, b = () => {
|
|
69
69
|
h(), D();
|
|
70
70
|
}, B = (r, t) => {
|
|
@@ -82,13 +82,13 @@ const ut = 200, qt = ({ parentScrollPosition: U }) => {
|
|
|
82
82
|
e.insertText(t), n.offset -= t.length, c.offset = n.offset + t.length;
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
|
-
|
|
85
|
+
$(nt(r), { target: "_blank" });
|
|
86
86
|
}
|
|
87
87
|
b();
|
|
88
88
|
});
|
|
89
|
-
},
|
|
90
|
-
i.dispatchCommand(
|
|
91
|
-
},
|
|
89
|
+
}, H = () => {
|
|
90
|
+
i.dispatchCommand(Y, null), K();
|
|
91
|
+
}, M = {
|
|
92
92
|
children: /* @__PURE__ */ f(
|
|
93
93
|
rt,
|
|
94
94
|
{
|
|
@@ -107,7 +107,7 @@ const ut = 200, qt = ({ parentScrollPosition: U }) => {
|
|
|
107
107
|
const s = o.anchor.getNode(), n = N(s, L);
|
|
108
108
|
if (n) {
|
|
109
109
|
const c = i.getElementByKey(o.anchor.getNode().getKey()), v = c ? { top: c.getBoundingClientRect().bottom, left: c.getBoundingClientRect().left } : { top: 0, left: 0 };
|
|
110
|
-
return
|
|
110
|
+
return A(n.getURL(), v), !0;
|
|
111
111
|
}
|
|
112
112
|
}
|
|
113
113
|
return !1;
|
|
@@ -137,8 +137,8 @@ const ut = 200, qt = ({ parentScrollPosition: U }) => {
|
|
|
137
137
|
const o = p();
|
|
138
138
|
if (y(), !w(o))
|
|
139
139
|
return !1;
|
|
140
|
-
const s = o.anchor.getNode(), n = N(s, L), c = (
|
|
141
|
-
E(), setTimeout(() => m.current?.setDefaults(
|
|
140
|
+
const s = o.anchor.getNode(), n = N(s, L), c = (V = "", j = "") => {
|
|
141
|
+
E(), setTimeout(() => m.current?.setDefaults(V, j), 0);
|
|
142
142
|
};
|
|
143
143
|
if (n)
|
|
144
144
|
return e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation(), C.current = n.getTextContent(), c(n.getURL(), n.getTextContent()), !0;
|
|
@@ -149,7 +149,7 @@ const ut = 200, qt = ({ parentScrollPosition: U }) => {
|
|
|
149
149
|
},
|
|
150
150
|
tt
|
|
151
151
|
), t = i.registerUpdateListener(({ editorState: e }) => {
|
|
152
|
-
|
|
152
|
+
O(
|
|
153
153
|
e.read(() => {
|
|
154
154
|
const o = p();
|
|
155
155
|
if (y(), w(o)) {
|
|
@@ -187,13 +187,13 @@ const ut = 200, qt = ({ parentScrollPosition: U }) => {
|
|
|
187
187
|
return I(t), window.addEventListener("scroll", t), window.addEventListener("resize", t), () => {
|
|
188
188
|
window.removeEventListener("keydown", r), window.removeEventListener("scroll", t), window.removeEventListener("resize", t), at(t);
|
|
189
189
|
};
|
|
190
|
-
}, []), /* @__PURE__ */ f("div", { className: g["editor__toolbar-button-group"], children: /* @__PURE__ */
|
|
190
|
+
}, []), /* @__PURE__ */ f("div", { className: g["editor__toolbar-button-group"], children: /* @__PURE__ */ G("div", { className: g["editor__toolbar-button-flyoutwrapper"], children: [
|
|
191
191
|
/* @__PURE__ */ f(
|
|
192
192
|
"button",
|
|
193
193
|
{
|
|
194
194
|
onClick: E,
|
|
195
195
|
title: x.links.linkTooltip,
|
|
196
|
-
className:
|
|
196
|
+
className: W(
|
|
197
197
|
g["editor__toolbar-button"],
|
|
198
198
|
g["editor__toolbar-button--link"],
|
|
199
199
|
k.active && g["editor__toolbar-button--active"]
|
|
@@ -205,10 +205,10 @@ const ut = 200, qt = ({ parentScrollPosition: U }) => {
|
|
|
205
205
|
children: /* @__PURE__ */ f(ct, { name: "Link", size: 20 })
|
|
206
206
|
}
|
|
207
207
|
),
|
|
208
|
-
|
|
208
|
+
z
|
|
209
209
|
] }) });
|
|
210
210
|
};
|
|
211
211
|
export {
|
|
212
|
-
|
|
212
|
+
$t as LinkPlugin
|
|
213
213
|
};
|
|
214
214
|
//# sourceMappingURL=LinkPlugin.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { clsx } from 'clsx';\nimport { $toggleLink, TOGGLE_LINK_COMMAND, LinkNode } from '@lexical/link';\nimport { useEffect, useRef, useState } from 'react';\nimport {\n $createTextNode,\n $getSelection,\n $isRangeSelection,\n $setSelection,\n CLICK_COMMAND,\n COMMAND_PRIORITY_EDITOR,\n KEY_DOWN_COMMAND,\n SELECTION_CHANGE_COMMAND,\n} from 'lexical';\nimport { $getNearestNodeOfType } from '@lexical/utils';\n\nimport type { ElementNode, BaseSelection } from 'lexical';\nimport type { addLinkFormMethods } from './AddLinkForm/AddLinkFrom';\nimport type { linkFormMethods } from './LinkContextMenu/LinkContextMenu';\n\nimport { AddLinkForm } from './AddLinkForm/AddLinkFrom';\nimport { ensureHttps } from './helpers';\nimport { LinkContextMenu } from './LinkContextMenu/LinkContextMenu';\n\nimport { useFlyout } from 'components/RteEditor/hooks/useFlyout';\nimport { Icon } from 'components';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\nimport { removeScrollableContainers, setScrollableContainers } from 'components/RteEditor/helpers';\n\nconst PREVENT_OPEN_DELAY = 200;\n\nexport interface LinkType {\n active: boolean;\n url: string;\n linktext: string;\n}\n\ntype Position = {\n top: number;\n left: number;\n};\n\ninterface LinkPluginProps {\n parentScrollPosition: number;\n}\n\nexport const LinkPlugin = ({ parentScrollPosition }: LinkPluginProps) => {\n const t = useTranslation();\n const [editor] = useLexicalComposerContext();\n const { flyout, showFlyout, hideFlyout, isVisible } = useFlyout();\n const addLinkForm = useRef<addLinkFormMethods>(undefined);\n const preventOpen = useRef(false);\n const previousLinkText = useRef('');\n const selectedText = useRef('');\n const [isLink, setIsLink] = useState<LinkType>({ active: false, url: '', linktext: '' });\n const isVisibleRef = useRef(isVisible);\n const storedSelection = useRef<BaseSelection | null>(null);\n const linkButtonRef = useRef<HTMLButtonElement>(null);\n const editLinkForm = useRef<linkFormMethods>(undefined);\n\n const storeCursorPosition = () => {\n editor.update(() => {\n const selection = $getSelection();\n storedSelection.current = selection;\n });\n };\n\n const rePositionCursor = () => {\n editor.update(() => {\n if (storedSelection.current) {\n $setSelection(storedSelection.current);\n }\n });\n };\n\n const openContextMenu = (url: string, position: Position) => {\n showFlyout({\n position,\n children: (\n <LinkContextMenu\n url={url}\n onSave={(url) => insertLink(url, '')}\n onDelete={() => removeLink()}\n onClose={closeContextMenu}\n ref={editLinkForm}\n />\n ),\n });\n };\n\n const closeContextMenu = () => {\n editLinkForm.current?.clearForm();\n hideFlyout();\n rePositionCursor();\n };\n\n const openFlyout = () => {\n const rect = linkButtonRef.current?.getBoundingClientRect();\n if (!preventOpen.current && rect) {\n storeCursorPosition();\n showFlyout({ position: { top: rect.bottom, left: rect.left }, ...flyoutOptions });\n setTimeout(() => addLinkForm.current?.setDefaults('', selectedText.current), 0);\n }\n };\n\n const closeFlyout = () => {\n hideFlyout();\n rePositionCursor();\n };\n\n const insertLink = (url: string, linktext: string) => {\n editor.update(() => {\n const selection = $getSelection();\n\n if ($isRangeSelection(selection)) {\n const anchorNode = selection.anchor.getNode();\n const linkNode = $getNearestNodeOfType(anchorNode, LinkNode);\n\n if (linktext && linktext !== '') {\n if (linkNode) {\n const newTextNode = $createTextNode(linktext);\n linkNode.replace(newTextNode);\n newTextNode.select();\n }\n if (linktext !== previousLinkText.current && previousLinkText.current === '') {\n const { anchor, focus } = selection;\n selection.insertText(linktext);\n anchor.offset -= linktext.length;\n focus.offset = anchor.offset + linktext.length;\n }\n }\n $toggleLink(ensureHttps(url), { target: '_blank' });\n }\n\n closeFlyout();\n });\n };\n\n const removeLink = (): void => {\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n closeContextMenu();\n };\n\n const flyoutOptions = {\n children: (\n <AddLinkForm\n isLink={isLink}\n onCloseHandler={closeFlyout}\n onSaveHandler={(url, linktext) => insertLink(url, linktext)}\n ref={addLinkForm}\n />\n ),\n };\n\n useEffect(() => {\n if (!isVisible) {\n addLinkForm.current?.clearForm();\n previousLinkText.current = selectedText.current = '';\n setTimeout(() => (preventOpen.current = false), PREVENT_OPEN_DELAY);\n } else {\n preventOpen.current = true;\n addLinkForm.current?.focusFirstField();\n }\n }, [addLinkForm, isVisible]);\n\n useEffect(() => {\n const handleSelectionClickOrChange = (selection: BaseSelection | null) => {\n if ($isRangeSelection(selection) && selection.isCollapsed()) {\n const anchorNode = selection.anchor.getNode() as ElementNode;\n const node = $getNearestNodeOfType(anchorNode, LinkNode);\n\n if (node) {\n const domNode = editor.getElementByKey(selection.anchor.getNode().getKey());\n const position = domNode\n ? { top: domNode.getBoundingClientRect().bottom, left: domNode.getBoundingClientRect().left }\n : { top: 0, left: 0 };\n openContextMenu(node.getURL(), position);\n return true;\n }\n }\n return false;\n };\n\n const unregisterSelect = editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n () => {\n const selection = $getSelection();\n selectedText.current = selection?.getTextContent() ?? '';\n handleSelectionClickOrChange(selection);\n return false;\n },\n 0\n );\n\n const unregisterClick = editor.registerCommand(\n CLICK_COMMAND,\n (event) => {\n const selection = $getSelection();\n storeCursorPosition();\n event.preventDefault();\n event.stopPropagation();\n event.stopImmediatePropagation();\n handleSelectionClickOrChange(selection);\n return false;\n },\n 0\n );\n\n return () => {\n unregisterClick();\n unregisterSelect();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [editor]);\n\n useEffect(() => {\n const removeKeyboardShortcut = editor.registerCommand(\n KEY_DOWN_COMMAND,\n (event: KeyboardEvent) => {\n if (event.ctrlKey && event.shiftKey && event.key === 'U') {\n const selection = $getSelection();\n storeCursorPosition();\n\n if (!$isRangeSelection(selection)) {\n return false;\n }\n\n const anchorNode = selection.anchor.getNode() as ElementNode;\n const node = $getNearestNodeOfType(anchorNode, LinkNode);\n\n const openFlyoutWithDefaults = (url = '', linkText = '') => {\n openFlyout();\n setTimeout(() => addLinkForm.current?.setDefaults(url, linkText), 0);\n };\n\n if (node) {\n event.preventDefault();\n event.stopPropagation();\n event.stopImmediatePropagation();\n\n previousLinkText.current = node.getTextContent();\n openFlyoutWithDefaults(node.getURL(), node.getTextContent());\n\n return true;\n }\n\n const selectedTextContent = selection.getTextContent();\n if (selectedTextContent !== '') {\n selectedText.current = selectedTextContent;\n openFlyoutWithDefaults('', selectedText.current);\n\n return true;\n }\n\n openFlyout();\n return true;\n }\n\n return false;\n },\n COMMAND_PRIORITY_EDITOR\n );\n\n const removeStatusListener = editor.registerUpdateListener(({ editorState }) => {\n setIsLink(\n editorState.read(() => {\n const selection = $getSelection();\n storeCursorPosition();\n\n if ($isRangeSelection(selection)) {\n const anchorNode = selection.anchor.getNode() as ElementNode;\n const node = $getNearestNodeOfType(anchorNode, LinkNode);\n\n if (node) {\n return {\n active: true,\n url: node.getURL(),\n linktext: node.getTextContent(),\n };\n }\n }\n\n return {\n active: false,\n url: '',\n linktext: '',\n };\n })\n );\n });\n\n return () => {\n removeKeyboardShortcut();\n removeStatusListener();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [editor]);\n\n useEffect(() => {\n isVisibleRef.current = isVisible;\n if (!isVisible) editLinkForm.current?.clearForm();\n }, [isVisible]);\n\n useEffect(() => {\n if (isVisible) {\n closeFlyout();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [parentScrollPosition]);\n\n useEffect(() => {\n if (!isLink.active) {\n hideFlyout();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isLink]);\n\n useEffect(() => {\n const removeKeydown = (event: KeyboardEvent): boolean => {\n setScrollableContainers(handleResizeScroll);\n\n if (event.key === 'Escape' && isVisibleRef.current) {\n event.preventDefault();\n event.stopPropagation();\n closeFlyout();\n }\n return true;\n };\n\n window.addEventListener('keydown', removeKeydown, { capture: true });\n\n const handleResizeScroll = () => {\n hideFlyout();\n };\n\n setScrollableContainers(handleResizeScroll);\n\n window.addEventListener('scroll', handleResizeScroll);\n window.addEventListener('resize', handleResizeScroll);\n\n return () => {\n window.removeEventListener('keydown', removeKeydown);\n window.removeEventListener('scroll', handleResizeScroll);\n window.removeEventListener('resize', handleResizeScroll);\n removeScrollableContainers(handleResizeScroll);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <div className={styles['editor__toolbar-button-group']}>\n <div className={styles['editor__toolbar-button-flyoutwrapper']}>\n <button\n onClick={openFlyout}\n title={t.links.linkTooltip}\n className={clsx(\n styles['editor__toolbar-button'],\n styles[`editor__toolbar-button--link`],\n isLink.active && styles['editor__toolbar-button--active']\n )}\n aria-label={t.aria.labels.link}\n aria-keyshortcuts={t.aria.keyshortcuts.link}\n type=\"button\"\n ref={linkButtonRef}\n >\n <Icon name=\"Link\" size={20} />\n </button>\n {flyout}\n </div>\n </div>\n );\n};\n"],"names":["PREVENT_OPEN_DELAY","LinkPlugin","parentScrollPosition","t","useTranslation","editor","useLexicalComposerContext","flyout","showFlyout","hideFlyout","isVisible","useFlyout","addLinkForm","useRef","preventOpen","previousLinkText","selectedText","isLink","setIsLink","useState","isVisibleRef","storedSelection","linkButtonRef","editLinkForm","storeCursorPosition","selection","$getSelection","rePositionCursor","$setSelection","openContextMenu","url","position","jsx","LinkContextMenu","insertLink","removeLink","closeContextMenu","openFlyout","rect","flyoutOptions","closeFlyout","linktext","$isRangeSelection","anchorNode","linkNode","$getNearestNodeOfType","LinkNode","newTextNode","$createTextNode","anchor","focus","$toggleLink","ensureHttps","TOGGLE_LINK_COMMAND","AddLinkForm","useEffect","handleSelectionClickOrChange","node","domNode","unregisterSelect","SELECTION_CHANGE_COMMAND","unregisterClick","CLICK_COMMAND","event","removeKeyboardShortcut","KEY_DOWN_COMMAND","openFlyoutWithDefaults","linkText","selectedTextContent","COMMAND_PRIORITY_EDITOR","removeStatusListener","editorState","removeKeydown","setScrollableContainers","handleResizeScroll","removeScrollableContainers","styles","jsxs","clsx","Icon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"LinkPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { clsx } from 'clsx';\nimport { $toggleLink, TOGGLE_LINK_COMMAND, LinkNode } from '@lexical/link';\nimport { useEffect, useRef, useState } from 'react';\nimport {\n $createTextNode,\n $getSelection,\n $isRangeSelection,\n $setSelection,\n CLICK_COMMAND,\n COMMAND_PRIORITY_CRITICAL,\n KEY_DOWN_COMMAND,\n SELECTION_CHANGE_COMMAND,\n} from 'lexical';\nimport { $getNearestNodeOfType } from '@lexical/utils';\n\nimport type { ElementNode, BaseSelection } from 'lexical';\nimport type { addLinkFormMethods } from './AddLinkForm/AddLinkFrom';\nimport type { linkFormMethods } from './LinkContextMenu/LinkContextMenu';\n\nimport { AddLinkForm } from './AddLinkForm/AddLinkFrom';\nimport { ensureHttps } from './helpers';\nimport { LinkContextMenu } from './LinkContextMenu/LinkContextMenu';\n\nimport { useFlyout } from 'components/RteEditor/hooks/useFlyout';\nimport { Icon } from 'components';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\nimport { removeScrollableContainers, setScrollableContainers } from 'components/RteEditor/helpers';\n\nconst PREVENT_OPEN_DELAY = 200;\n\nexport interface LinkType {\n active: boolean;\n url: string;\n linktext: string;\n}\n\ntype Position = {\n top: number;\n left: number;\n};\n\ninterface LinkPluginProps {\n parentScrollPosition: number;\n}\n\nexport const LinkPlugin = ({ parentScrollPosition }: LinkPluginProps) => {\n const t = useTranslation();\n const [editor] = useLexicalComposerContext();\n const { flyout, showFlyout, hideFlyout, isVisible } = useFlyout();\n const addLinkForm = useRef<addLinkFormMethods>(undefined);\n const preventOpen = useRef(false);\n const previousLinkText = useRef('');\n const selectedText = useRef('');\n const [isLink, setIsLink] = useState<LinkType>({ active: false, url: '', linktext: '' });\n const isVisibleRef = useRef(isVisible);\n const storedSelection = useRef<BaseSelection | null>(null);\n const linkButtonRef = useRef<HTMLButtonElement>(null);\n const editLinkForm = useRef<linkFormMethods>(undefined);\n\n const storeCursorPosition = () => {\n editor.update(() => {\n const selection = $getSelection();\n storedSelection.current = selection;\n });\n };\n\n const rePositionCursor = () => {\n editor.update(() => {\n if (storedSelection.current) {\n $setSelection(storedSelection.current);\n }\n });\n };\n\n const openContextMenu = (url: string, position: Position) => {\n showFlyout({\n position,\n children: (\n <LinkContextMenu\n url={url}\n onSave={(url) => insertLink(url, '')}\n onDelete={() => removeLink()}\n onClose={closeContextMenu}\n ref={editLinkForm}\n />\n ),\n });\n };\n\n const closeContextMenu = () => {\n editLinkForm.current?.clearForm();\n hideFlyout();\n rePositionCursor();\n };\n\n const openFlyout = () => {\n const rect = linkButtonRef.current?.getBoundingClientRect();\n if (!preventOpen.current && rect) {\n storeCursorPosition();\n showFlyout({ position: { top: rect.bottom, left: rect.left }, ...flyoutOptions });\n setTimeout(() => addLinkForm.current?.setDefaults('', selectedText.current), 0);\n }\n };\n\n const closeFlyout = () => {\n hideFlyout();\n rePositionCursor();\n };\n\n const insertLink = (url: string, linktext: string) => {\n editor.update(() => {\n const selection = $getSelection();\n\n if ($isRangeSelection(selection)) {\n const anchorNode = selection.anchor.getNode();\n const linkNode = $getNearestNodeOfType(anchorNode, LinkNode);\n\n if (linktext && linktext !== '') {\n if (linkNode) {\n const newTextNode = $createTextNode(linktext);\n linkNode.replace(newTextNode);\n newTextNode.select();\n }\n if (linktext !== previousLinkText.current && previousLinkText.current === '') {\n const { anchor, focus } = selection;\n selection.insertText(linktext);\n anchor.offset -= linktext.length;\n focus.offset = anchor.offset + linktext.length;\n }\n }\n $toggleLink(ensureHttps(url), { target: '_blank' });\n }\n\n closeFlyout();\n });\n };\n\n const removeLink = (): void => {\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n closeContextMenu();\n };\n\n const flyoutOptions = {\n children: (\n <AddLinkForm\n isLink={isLink}\n onCloseHandler={closeFlyout}\n onSaveHandler={(url, linktext) => insertLink(url, linktext)}\n ref={addLinkForm}\n />\n ),\n };\n\n useEffect(() => {\n if (!isVisible) {\n addLinkForm.current?.clearForm();\n previousLinkText.current = selectedText.current = '';\n setTimeout(() => (preventOpen.current = false), PREVENT_OPEN_DELAY);\n } else {\n preventOpen.current = true;\n addLinkForm.current?.focusFirstField();\n }\n }, [addLinkForm, isVisible]);\n\n useEffect(() => {\n const handleSelectionClickOrChange = (selection: BaseSelection | null) => {\n if ($isRangeSelection(selection) && selection.isCollapsed()) {\n const anchorNode = selection.anchor.getNode() as ElementNode;\n const node = $getNearestNodeOfType(anchorNode, LinkNode);\n\n if (node) {\n const domNode = editor.getElementByKey(selection.anchor.getNode().getKey());\n const position = domNode\n ? { top: domNode.getBoundingClientRect().bottom, left: domNode.getBoundingClientRect().left }\n : { top: 0, left: 0 };\n openContextMenu(node.getURL(), position);\n return true;\n }\n }\n return false;\n };\n\n const unregisterSelect = editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n () => {\n const selection = $getSelection();\n selectedText.current = selection?.getTextContent() ?? '';\n handleSelectionClickOrChange(selection);\n return false;\n },\n 0\n );\n\n const unregisterClick = editor.registerCommand(\n CLICK_COMMAND,\n (event) => {\n const selection = $getSelection();\n storeCursorPosition();\n event.preventDefault();\n event.stopPropagation();\n event.stopImmediatePropagation();\n handleSelectionClickOrChange(selection);\n return false;\n },\n 0\n );\n\n return () => {\n unregisterClick();\n unregisterSelect();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [editor]);\n\n useEffect(() => {\n const removeKeyboardShortcut = editor.registerCommand(\n KEY_DOWN_COMMAND,\n (event: KeyboardEvent) => {\n if (event.ctrlKey && event.shiftKey && event.key === 'U') {\n const selection = $getSelection();\n storeCursorPosition();\n\n if (!$isRangeSelection(selection)) {\n return false;\n }\n\n const anchorNode = selection.anchor.getNode() as ElementNode;\n const node = $getNearestNodeOfType(anchorNode, LinkNode);\n\n const openFlyoutWithDefaults = (url = '', linkText = '') => {\n openFlyout();\n setTimeout(() => addLinkForm.current?.setDefaults(url, linkText), 0);\n };\n\n if (node) {\n event.preventDefault();\n event.stopPropagation();\n event.stopImmediatePropagation();\n\n previousLinkText.current = node.getTextContent();\n openFlyoutWithDefaults(node.getURL(), node.getTextContent());\n\n return true;\n }\n\n const selectedTextContent = selection.getTextContent();\n if (selectedTextContent !== '') {\n selectedText.current = selectedTextContent;\n openFlyoutWithDefaults('', selectedText.current);\n\n return true;\n }\n\n openFlyout();\n return true;\n }\n\n return false;\n },\n COMMAND_PRIORITY_CRITICAL\n );\n\n const removeStatusListener = editor.registerUpdateListener(({ editorState }) => {\n setIsLink(\n editorState.read(() => {\n const selection = $getSelection();\n storeCursorPosition();\n\n if ($isRangeSelection(selection)) {\n const anchorNode = selection.anchor.getNode() as ElementNode;\n const node = $getNearestNodeOfType(anchorNode, LinkNode);\n\n if (node) {\n return {\n active: true,\n url: node.getURL(),\n linktext: node.getTextContent(),\n };\n }\n }\n\n return {\n active: false,\n url: '',\n linktext: '',\n };\n })\n );\n });\n\n return () => {\n removeKeyboardShortcut();\n removeStatusListener();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [editor]);\n\n useEffect(() => {\n isVisibleRef.current = isVisible;\n if (!isVisible) editLinkForm.current?.clearForm();\n }, [isVisible]);\n\n useEffect(() => {\n if (isVisible) {\n closeFlyout();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [parentScrollPosition]);\n\n useEffect(() => {\n if (!isLink.active) {\n hideFlyout();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isLink]);\n\n useEffect(() => {\n const removeKeydown = (event: KeyboardEvent): boolean => {\n setScrollableContainers(handleResizeScroll);\n\n if (event.key === 'Escape' && isVisibleRef.current) {\n event.preventDefault();\n event.stopPropagation();\n closeFlyout();\n }\n return true;\n };\n\n window.addEventListener('keydown', removeKeydown, { capture: true });\n\n const handleResizeScroll = () => {\n hideFlyout();\n };\n\n setScrollableContainers(handleResizeScroll);\n\n window.addEventListener('scroll', handleResizeScroll);\n window.addEventListener('resize', handleResizeScroll);\n\n return () => {\n window.removeEventListener('keydown', removeKeydown);\n window.removeEventListener('scroll', handleResizeScroll);\n window.removeEventListener('resize', handleResizeScroll);\n removeScrollableContainers(handleResizeScroll);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <div className={styles['editor__toolbar-button-group']}>\n <div className={styles['editor__toolbar-button-flyoutwrapper']}>\n <button\n onClick={openFlyout}\n title={t.links.linkTooltip}\n className={clsx(\n styles['editor__toolbar-button'],\n styles[`editor__toolbar-button--link`],\n isLink.active && styles['editor__toolbar-button--active']\n )}\n aria-label={t.aria.labels.link}\n aria-keyshortcuts={t.aria.keyshortcuts.link}\n type=\"button\"\n ref={linkButtonRef}\n >\n <Icon name=\"Link\" size={20} />\n </button>\n {flyout}\n </div>\n </div>\n );\n};\n"],"names":["PREVENT_OPEN_DELAY","LinkPlugin","parentScrollPosition","t","useTranslation","editor","useLexicalComposerContext","flyout","showFlyout","hideFlyout","isVisible","useFlyout","addLinkForm","useRef","preventOpen","previousLinkText","selectedText","isLink","setIsLink","useState","isVisibleRef","storedSelection","linkButtonRef","editLinkForm","storeCursorPosition","selection","$getSelection","rePositionCursor","$setSelection","openContextMenu","url","position","jsx","LinkContextMenu","insertLink","removeLink","closeContextMenu","openFlyout","rect","flyoutOptions","closeFlyout","linktext","$isRangeSelection","anchorNode","linkNode","$getNearestNodeOfType","LinkNode","newTextNode","$createTextNode","anchor","focus","$toggleLink","ensureHttps","TOGGLE_LINK_COMMAND","AddLinkForm","useEffect","handleSelectionClickOrChange","node","domNode","unregisterSelect","SELECTION_CHANGE_COMMAND","unregisterClick","CLICK_COMMAND","event","removeKeyboardShortcut","KEY_DOWN_COMMAND","openFlyoutWithDefaults","linkText","selectedTextContent","COMMAND_PRIORITY_CRITICAL","removeStatusListener","editorState","removeKeydown","setScrollableContainers","handleResizeScroll","removeScrollableContainers","styles","jsxs","clsx","Icon"],"mappings":"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"}
|
|
@@ -3,16 +3,16 @@ import { o as I } from "../../../../LexicalComposerContext.prod-DOyoZx0P.js";
|
|
|
3
3
|
import { k as b, x as _, S as v, o as K, d as N, h as P, l as y } from "../../../../LexicalList.prod-DADZlhem.js";
|
|
4
4
|
import { useState as p, useEffect as k } from "react";
|
|
5
5
|
import { c as $ } from "../../../../clsx-OuTLNxxd.js";
|
|
6
|
-
import { aF as O,
|
|
6
|
+
import { aF as O, ah as U, a2 as Y, c as x, b as S, Y as B } from "../../../../Lexical.prod-Dgzi-S1E.js";
|
|
7
7
|
import { x as E } from "../../../../LexicalUtils.prod-D1mwAww-.js";
|
|
8
8
|
import { Icon as F } from "../../../Icon/Icon.js";
|
|
9
9
|
import { s as n } from "../../../../RteEditor.module-DaBh86FK.js";
|
|
10
|
-
import { useTranslation as
|
|
11
|
-
const
|
|
10
|
+
import { useTranslation as j } from "../../hooks/useTranslation.js";
|
|
11
|
+
const w = {
|
|
12
12
|
bullet: "BulletList",
|
|
13
13
|
number: "NumberedList"
|
|
14
|
-
},
|
|
15
|
-
const m =
|
|
14
|
+
}, z = ["bullet", "number"], W = () => {
|
|
15
|
+
const m = j(), [e] = I(), [h, s] = p(null), [u, g] = p(!1), [c, L] = p(!1), D = (t) => {
|
|
16
16
|
t === "number" && h !== "number" ? (e.dispatchCommand(_, void 0), s("number")) : t === "bullet" && h !== "bullet" ? (e.dispatchCommand(v, void 0), s("bullet")) : (e.dispatchCommand(b, void 0), s(null));
|
|
17
17
|
};
|
|
18
18
|
return k(() => {
|
|
@@ -59,7 +59,7 @@ const j = {
|
|
|
59
59
|
return () => {
|
|
60
60
|
o(), t();
|
|
61
61
|
};
|
|
62
|
-
}, [e]), /* @__PURE__ */ f("div", { className: n["editor__toolbar-button-group"], children:
|
|
62
|
+
}, [e]), /* @__PURE__ */ f("div", { className: n["editor__toolbar-button-group"], children: z.map((t) => /* @__PURE__ */ f(
|
|
63
63
|
"button",
|
|
64
64
|
{
|
|
65
65
|
onClick: () => D(t),
|
|
@@ -73,7 +73,7 @@ const j = {
|
|
|
73
73
|
"aria-label": m.aria.labels[t],
|
|
74
74
|
"aria-keyshortcuts": m.aria.keyshortcuts[t],
|
|
75
75
|
type: "button",
|
|
76
|
-
children: /* @__PURE__ */ f(F, { name:
|
|
76
|
+
children: /* @__PURE__ */ f(F, { name: w[t], size: 24 })
|
|
77
77
|
},
|
|
78
78
|
t
|
|
79
79
|
)) });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/ListPlugin/ListPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport {\n $createListNode,\n $isListItemNode,\n $isListNode,\n INSERT_ORDERED_LIST_COMMAND,\n INSERT_UNORDERED_LIST_COMMAND,\n ListNode,\n REMOVE_LIST_COMMAND,\n} from '@lexical/list';\nimport { useEffect, useState } from 'react';\nimport { clsx } from 'clsx';\nimport {\n $getSelection,\n $isRangeSelection,\n
|
|
1
|
+
{"version":3,"file":"ListPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/ListPlugin/ListPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport {\n $createListNode,\n $isListItemNode,\n $isListNode,\n INSERT_ORDERED_LIST_COMMAND,\n INSERT_UNORDERED_LIST_COMMAND,\n ListNode,\n REMOVE_LIST_COMMAND,\n} from '@lexical/list';\nimport { useEffect, useState } from 'react';\nimport { clsx } from 'clsx';\nimport {\n $getSelection,\n $isRangeSelection,\n COMMAND_PRIORITY_CRITICAL,\n COMMAND_PRIORITY_LOW,\n KEY_DOWN_COMMAND,\n KEY_TAB_COMMAND,\n} from 'lexical';\nimport { $getNearestNodeOfType } from '@lexical/utils';\n\nimport type { RangeSelection } from 'lexical';\n\nimport { Icon } from 'components/Icon';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\ntype ListTypesType = 'bullet' | 'number' | null;\nconst LIST_TYPE_ICONS = {\n bullet: 'BulletList',\n number: 'NumberedList',\n};\n\nconst ListTypes = ['bullet', 'number'];\n\nexport const ListPlugin = () => {\n const t = useTranslation();\n const [editor] = useLexicalComposerContext();\n const [blockType, setBlockType] = useState<ListTypesType>(null);\n const [isUList, setIsUList] = useState<boolean>(false);\n const [isOList, setIsOList] = useState<boolean>(false);\n\n const formatList = (listType: ListTypesType): void => {\n if (listType === 'number' && blockType !== 'number') {\n editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);\n setBlockType('number');\n } else if (listType === 'bullet' && blockType !== 'bullet') {\n editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);\n setBlockType('bullet');\n } else {\n editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n setBlockType(null);\n }\n };\n\n useEffect(() => {\n const removeKeyboardShortcut = editor.registerCommand(\n KEY_DOWN_COMMAND,\n (event: KeyboardEvent) => {\n if (event.ctrlKey && event.shiftKey && event.code === 'Digit7') {\n event.preventDefault();\n if (isOList) {\n editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n } else {\n editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);\n }\n return true;\n }\n if (event.ctrlKey && event.shiftKey && event.code === 'Digit8') {\n event.preventDefault();\n if (isUList) {\n editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n } else {\n editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);\n }\n return true;\n }\n return false;\n },\n COMMAND_PRIORITY_CRITICAL\n );\n\n return () => {\n removeKeyboardShortcut();\n };\n }, [editor, isOList, isUList]);\n\n useEffect(() => {\n const removeTabCommand = editor.registerCommand(\n KEY_TAB_COMMAND,\n (event) => {\n event.preventDefault();\n editor.update(() => {\n const selection = $getSelection() as RangeSelection;\n if (!$isRangeSelection(selection)) {\n return;\n }\n\n const currentNode = selection.anchor.getNode();\n const parent = currentNode.getParent();\n if (!$isListItemNode(parent)) {\n return;\n }\n\n const listParent = parent.getParent();\n if ($isListNode(listParent)) {\n const newList = $createListNode($isListNode(listParent) ? listParent.getListType() : 'bullet');\n parent.append(newList);\n newList.append(currentNode);\n }\n });\n return true;\n },\n COMMAND_PRIORITY_LOW\n );\n\n const removeStatusListener = editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n const anchorNode = selection.anchor.getNode();\n const listNode = $getNearestNodeOfType(anchorNode, ListNode);\n if (listNode) {\n const tag = listNode.getTag();\n setIsUList(tag === 'ul');\n setIsOList(tag === 'ol');\n if (tag === 'ul') {\n setBlockType('bullet');\n }\n if (tag === 'ol') {\n setBlockType('number');\n }\n return;\n }\n setIsUList(false);\n setIsOList(false);\n setBlockType(null);\n }\n return false;\n });\n });\n\n return () => {\n removeStatusListener();\n removeTabCommand();\n };\n }, [editor]);\n\n return (\n <div className={styles['editor__toolbar-button-group']}>\n {ListTypes.map((listType) => (\n <button\n onClick={() => formatList(listType as ListTypesType)}\n key={listType}\n title={t.format[`${listType}Tooltip` as keyof typeof t.format]}\n className={clsx(\n styles['editor__toolbar-button'],\n styles[`editor__toolbar-button--${listType}`],\n listType === 'bullet' && isUList && styles['editor__toolbar-button--active'],\n listType === 'number' && isOList && styles['editor__toolbar-button--active']\n )}\n aria-label={t.aria.labels[listType as keyof typeof t.aria.labels]}\n aria-keyshortcuts={t.aria.keyshortcuts[listType as keyof typeof t.aria.keyshortcuts]}\n type=\"button\"\n >\n <Icon name={LIST_TYPE_ICONS[listType as keyof typeof Icon]} size={24} />\n </button>\n ))}\n </div>\n );\n};\n"],"names":["LIST_TYPE_ICONS","ListTypes","ListPlugin","t","useTranslation","editor","useLexicalComposerContext","blockType","setBlockType","useState","isUList","setIsUList","isOList","setIsOList","formatList","listType","INSERT_ORDERED_LIST_COMMAND","INSERT_UNORDERED_LIST_COMMAND","REMOVE_LIST_COMMAND","useEffect","removeKeyboardShortcut","KEY_DOWN_COMMAND","event","COMMAND_PRIORITY_CRITICAL","removeTabCommand","KEY_TAB_COMMAND","selection","$getSelection","$isRangeSelection","currentNode","parent","$isListItemNode","listParent","$isListNode","newList","$createListNode","COMMAND_PRIORITY_LOW","removeStatusListener","editorState","anchorNode","listNode","$getNearestNodeOfType","ListNode","tag","jsx","styles","clsx","Icon"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import { b as G } from "../../../../TablePlugin-
|
|
3
|
+
import { b as G } from "../../../../TablePlugin-BlXaQ0U6.js";
|
|
4
4
|
import "../../../Accordion/Accordion.js";
|
|
5
5
|
import "../../../Buttons/Button.js";
|
|
6
6
|
import "../../../Buttons/LinkButton.js";
|
|
@@ -5,7 +5,7 @@ import "../../../../LexicalTable.prod-QpQxZNNH.js";
|
|
|
5
5
|
import "../../../../Lexical.prod-Dgzi-S1E.js";
|
|
6
6
|
import "../../../../LexicalUtils.prod-D1mwAww-.js";
|
|
7
7
|
import "react";
|
|
8
|
-
import { T as L } from "../../../../TablePlugin-
|
|
8
|
+
import { T as L } from "../../../../TablePlugin-BlXaQ0U6.js";
|
|
9
9
|
import "./helpers.js";
|
|
10
10
|
import "../../nodes/TableWrapperNode/TableWrapperNode.js";
|
|
11
11
|
import "../../hooks/useFlyout.js";
|
|
@@ -8,7 +8,7 @@ import { BlockFormatPlugin as k } from "../BlockFormatPlugin/BlockFormatPlugin.j
|
|
|
8
8
|
import { ListPlugin as S } from "../ListPlugin/ListPlugin.js";
|
|
9
9
|
import { LinkPlugin as z } from "../LinkPlugin/LinkPlugin.js";
|
|
10
10
|
import { HistoryPlugin as A } from "../HistoryPlugin/HistoryPlugin.js";
|
|
11
|
-
import { T as K } from "../../../../TablePlugin-
|
|
11
|
+
import { T as K } from "../../../../TablePlugin-BlXaQ0U6.js";
|
|
12
12
|
import { TableCellContextMenu as R } from "../TablePlugin/TableCellContextMenu/TableCellContextMenu.js";
|
|
13
13
|
import "react-dom";
|
|
14
14
|
import "../../../../index-yEhaxKq-.js";
|
|
@@ -3,7 +3,7 @@ import { BlockFormatPlugin as t } from "./BlockFormatPlugin/BlockFormatPlugin.js
|
|
|
3
3
|
import { ListPlugin as n } from "./ListPlugin/ListPlugin.js";
|
|
4
4
|
import { LinkPlugin as x } from "./LinkPlugin/LinkPlugin.js";
|
|
5
5
|
import { HistoryPlugin as f } from "./HistoryPlugin/HistoryPlugin.js";
|
|
6
|
-
import { T as u } from "../../../TablePlugin-
|
|
6
|
+
import { T as u } from "../../../TablePlugin-BlXaQ0U6.js";
|
|
7
7
|
import { TableCellContextMenu as g } from "./TablePlugin/TableCellContextMenu/TableCellContextMenu.js";
|
|
8
8
|
import { T } from "../../../TableCellResizerPlugin-9kvw_LpH.js";
|
|
9
9
|
import { PasteHandlerPlugin as C } from "./PasteHandlerPlugin/PasteHandlerPlugin.js";
|
|
@@ -18,7 +18,7 @@ import { validateUrl as hr, MATCHERS as vr } from "./Plugins/LinkPlugin/helpers.
|
|
|
18
18
|
import { s as B } from "../../RteEditor.module-DaBh86FK.js";
|
|
19
19
|
import { ToolBarPlugin as yr } from "./Plugins/ToolbarPlugin/ToolbarPlugin.js";
|
|
20
20
|
import { useTranslation as Cr } from "./hooks/useTranslation.js";
|
|
21
|
-
import "../../TablePlugin-
|
|
21
|
+
import "../../TablePlugin-BlXaQ0U6.js";
|
|
22
22
|
import "./Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
23
23
|
import "./hooks/components/Flyout.js";
|
|
24
24
|
import "../Accordion/Accordion.js";
|
package/dist/components/index.js
CHANGED
|
@@ -37,7 +37,7 @@ import { MenuLink as Co } from "./MenuLink/MenuLink.js";
|
|
|
37
37
|
import { MetaDataBar as Fo } from "./MetaDataBar/MetaDataBar.js";
|
|
38
38
|
import { MetaDataList as Mo } from "./MetaDataList/MetaDataList.js";
|
|
39
39
|
import { ModalDialog as Lo } from "./ModalDialog/ModalDialog.js";
|
|
40
|
-
import { M as Ro } from "../TablePlugin-
|
|
40
|
+
import { M as Ro } from "../TablePlugin-BlXaQ0U6.js";
|
|
41
41
|
import { MultiSelectBox as yo } from "./MultiSelectBox/MultiSelectBox.js";
|
|
42
42
|
import { Notification as Do } from "./Notification/Notification.js";
|
|
43
43
|
import { OverlayCloseButton as vo } from "./OverlayCloseButton/OverlayCloseButton.js";
|
package/dist/index.js
CHANGED
|
@@ -37,7 +37,7 @@ import { MenuLink as Co } from "./components/MenuLink/MenuLink.js";
|
|
|
37
37
|
import { MetaDataBar as Fo } from "./components/MetaDataBar/MetaDataBar.js";
|
|
38
38
|
import { MetaDataList as Mo } from "./components/MetaDataList/MetaDataList.js";
|
|
39
39
|
import { ModalDialog as Lo } from "./components/ModalDialog/ModalDialog.js";
|
|
40
|
-
import { M as Ro } from "./TablePlugin-
|
|
40
|
+
import { M as Ro } from "./TablePlugin-BlXaQ0U6.js";
|
|
41
41
|
import { MultiSelectBox as yo } from "./components/MultiSelectBox/MultiSelectBox.js";
|
|
42
42
|
import { Notification as Do } from "./components/Notification/Notification.js";
|
|
43
43
|
import { OverlayCloseButton as vo } from "./components/OverlayCloseButton/OverlayCloseButton.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as lt from "react";
|
|
2
2
|
import Me, { StrictMode as gn, Fragment as Yt, Component as Fn, isValidElement as Ht, createElement as yn } from "react";
|
|
3
|
-
import { d as Bn, e as xn, b as vn, c as fe, h as _n, f as Sn, T as pr, i as Dt, g as bn, u as wn, j as kn, S as fr, k as Tn, l as dr, m as Pn } from "./chunk-
|
|
3
|
+
import { d as Bn, e as xn, b as vn, c as fe, h as _n, f as Sn, T as pr, i as Dt, g as bn, u as wn, j as kn, S as fr, k as Tn, l as dr, m as Pn } from "./chunk-MDLQUVZN-BSRMHXbx.js";
|
|
4
4
|
import { s as Qt, c as In, l as bt } from "./index-Cfzi-sRQ.js";
|
|
5
5
|
var Pr = (t, u) => Bn((n) => Me.createElement(t, n), u), Nn = Object.create, Kt = Object.defineProperty, On = Object.getOwnPropertyDescriptor, Ir = Object.getOwnPropertyNames, Ln = Object.getPrototypeOf, Rn = Object.prototype.hasOwnProperty, ce = (t, u) => function() {
|
|
6
6
|
return u || (0, t[Ir(t)[0]])((u = { exports: {} }).exports, u), u.exports;
|