@sparrowengg/twigs-editor-react 0.0.4 → 0.0.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/cjs/components/rich-editor/index.js +6 -0
- package/dist/cjs/components/rich-editor/index.js.map +1 -1
- package/dist/cjs/editor.js +7 -1
- package/dist/cjs/editor.js.map +1 -1
- package/dist/cjs/plugins/tab-focus/index.js +1 -9
- package/dist/cjs/plugins/tab-focus/index.js.map +1 -1
- package/dist/es/components/rich-editor/index.js +6 -0
- package/dist/es/components/rich-editor/index.js.map +1 -1
- package/dist/es/editor.js +7 -1
- package/dist/es/editor.js.map +1 -1
- package/dist/es/plugins/tab-focus/index.js +1 -9
- package/dist/es/plugins/tab-focus/index.js.map +1 -1
- package/dist/index.d.ts +0 -7
- package/package.json +1 -1
|
@@ -65,6 +65,9 @@ const RichEditor = ({
|
|
|
65
65
|
listStyle: "disc",
|
|
66
66
|
marginLeft: "$7",
|
|
67
67
|
ul: {
|
|
68
|
+
listStyle: "square"
|
|
69
|
+
},
|
|
70
|
+
"&.level-2": {
|
|
68
71
|
listStyle: "circle"
|
|
69
72
|
}
|
|
70
73
|
},
|
|
@@ -75,6 +78,9 @@ const RichEditor = ({
|
|
|
75
78
|
listStyle: "lower-alpha"
|
|
76
79
|
}
|
|
77
80
|
},
|
|
81
|
+
".block-nested-listitem": {
|
|
82
|
+
listStyle: "none"
|
|
83
|
+
},
|
|
78
84
|
".text-code": {
|
|
79
85
|
color: "#F97316",
|
|
80
86
|
padding: "0 $2",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/rich-editor/index.tsx"],"sourcesContent":["import { ContentEditable } from '@lexical/react/LexicalContentEditable';\nimport { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';\nimport { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';\nimport { ReactNode, RefObject, isValidElement } from 'react';\nimport { Box, BoxProps } from '@sparrowengg/twigs-react';\n\nexport const RichEditor = ({\n containerRef,\n placeholder,\n editorContainerProps\n}: {\n containerRef?:\n | ((instance: HTMLDivElement | null) => void)\n | RefObject<HTMLDivElement>;\n placeholder?: ReactNode | string;\n editorContainerProps?: BoxProps;\n}) => {\n return (\n <Box\n {...editorContainerProps}\n css={{\n position: 'relative',\n ...editorContainerProps?.css\n }}\n >\n <RichTextPlugin\n contentEditable={(\n <Box className=\"editor-container\">\n <Box\n className=\"editor\"\n css={{\n position: 'relative',\n borderRadius: '$md',\n border: '1px solid $neutral200',\n textAlign: 'left',\n\n '& .text-bold': {\n fontWeight: 'bold'\n },\n '& .text-italic': {\n fontStyle: 'italic'\n },\n '& .text-underline': {\n textDecoration: 'underline'\n },\n p: {\n margin: '$1 0'\n },\n ul: {\n listStyle: 'disc',\n marginLeft: '$7',\n\n ul: {\n listStyle: 'circle'\n }\n },\n ol: {\n listStyle: 'decimal',\n marginLeft: '$7',\n\n ol: {\n listStyle: 'lower-alpha'\n }\n },\n '.text-code': {\n color: '#F97316',\n padding: '0 $2',\n backgroundColor: '$neutral100',\n border: '1px solid $neutral200',\n borderRadius: '$sm',\n\n '&, & *': {\n fontFamily: 'monospace'\n }\n },\n '.block-code': {\n padding: '$4',\n display: 'block',\n color: '$neutral900',\n backgroundColor: '$neutral100',\n border: '1px solid $neutral200',\n borderRadius: '$md',\n\n '&, & *': {\n fontFamily: 'monospace'\n }\n },\n '.block-h1': {\n fontSize: '$xl'\n },\n '.block-h2': {\n fontSize: '$lg'\n },\n '.block-h3, .block-h4, .block-h5, .block-h6': {\n fontSize: '$md'\n }\n }}\n ref={containerRef}\n >\n <ContentEditable\n style={{\n minHeight: '120px',\n padding: '12px'\n }}\n />\n </Box>\n </Box>\n )}\n ErrorBoundary={LexicalErrorBoundary}\n placeholder={\n !isValidElement(placeholder) ? (\n <Box\n css={{\n position: 'absolute',\n top: '12px',\n left: '12px',\n color: '$black500',\n pointerEvents: 'none'\n }}\n >\n {placeholder}\n </Box>\n ) : (\n placeholder\n )\n }\n />\n </Box>\n );\n};\n"],"names":["jsx","Box","RichTextPlugin","ContentEditable","LexicalErrorBoundary","isValidElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/rich-editor/index.tsx"],"sourcesContent":["import { ContentEditable } from '@lexical/react/LexicalContentEditable';\nimport { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';\nimport { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';\nimport { ReactNode, RefObject, isValidElement } from 'react';\nimport { Box, BoxProps } from '@sparrowengg/twigs-react';\n\nexport const RichEditor = ({\n containerRef,\n placeholder,\n editorContainerProps\n}: {\n containerRef?:\n | ((instance: HTMLDivElement | null) => void)\n | RefObject<HTMLDivElement>;\n placeholder?: ReactNode | string;\n editorContainerProps?: BoxProps;\n}) => {\n return (\n <Box\n {...editorContainerProps}\n css={{\n position: 'relative',\n ...editorContainerProps?.css\n }}\n >\n <RichTextPlugin\n contentEditable={(\n <Box className=\"editor-container\">\n <Box\n className=\"editor\"\n css={{\n position: 'relative',\n borderRadius: '$md',\n border: '1px solid $neutral200',\n textAlign: 'left',\n\n '& .text-bold': {\n fontWeight: 'bold'\n },\n '& .text-italic': {\n fontStyle: 'italic'\n },\n '& .text-underline': {\n textDecoration: 'underline'\n },\n p: {\n margin: '$1 0'\n },\n ul: {\n listStyle: 'disc',\n marginLeft: '$7',\n\n ul: {\n listStyle: 'square'\n },\n\n '&.level-2': {\n listStyle: 'circle'\n }\n },\n ol: {\n listStyle: 'decimal',\n marginLeft: '$7',\n\n ol: {\n listStyle: 'lower-alpha'\n }\n },\n '.block-nested-listitem': {\n listStyle: 'none'\n },\n '.text-code': {\n color: '#F97316',\n padding: '0 $2',\n backgroundColor: '$neutral100',\n border: '1px solid $neutral200',\n borderRadius: '$sm',\n\n '&, & *': {\n fontFamily: 'monospace'\n }\n },\n '.block-code': {\n padding: '$4',\n display: 'block',\n color: '$neutral900',\n backgroundColor: '$neutral100',\n border: '1px solid $neutral200',\n borderRadius: '$md',\n\n '&, & *': {\n fontFamily: 'monospace'\n }\n },\n '.block-h1': {\n fontSize: '$xl'\n },\n '.block-h2': {\n fontSize: '$lg'\n },\n '.block-h3, .block-h4, .block-h5, .block-h6': {\n fontSize: '$md'\n }\n }}\n ref={containerRef}\n >\n <ContentEditable\n style={{\n minHeight: '120px',\n padding: '12px'\n }}\n />\n </Box>\n </Box>\n )}\n ErrorBoundary={LexicalErrorBoundary}\n placeholder={\n !isValidElement(placeholder) ? (\n <Box\n css={{\n position: 'absolute',\n top: '12px',\n left: '12px',\n color: '$black500',\n pointerEvents: 'none'\n }}\n >\n {placeholder}\n </Box>\n ) : (\n placeholder\n )\n }\n />\n </Box>\n );\n};\n"],"names":["jsx","Box","RichTextPlugin","ContentEditable","LexicalErrorBoundary","isValidElement"],"mappings":"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"}
|
package/dist/cjs/editor.js
CHANGED
|
@@ -78,7 +78,13 @@ const initialConfig = {
|
|
|
78
78
|
list: {
|
|
79
79
|
ol: "block-ol",
|
|
80
80
|
ul: "block-ul",
|
|
81
|
-
listitem: "block-listitem"
|
|
81
|
+
listitem: "block-listitem",
|
|
82
|
+
nested: {
|
|
83
|
+
list: "block-nested-list",
|
|
84
|
+
listitem: "block-nested-listitem"
|
|
85
|
+
},
|
|
86
|
+
olDepth: ["level-1", "level-2", "level-3", "level-4", "level-5", "level-6", "level-7", "level-8", "level-9", "level-10"],
|
|
87
|
+
ulDepth: ["level-1", "level-2", "level-3", "level-4", "level-5", "level-6", "level-7", "level-8", "level-9", "level-10"]
|
|
82
88
|
}
|
|
83
89
|
},
|
|
84
90
|
onError: (err) => {
|
package/dist/cjs/editor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editor.js","sources":["../../src/editor.tsx"],"sourcesContent":["import { AutoLinkNode, LinkNode } from '@lexical/link';\nimport { ListItemNode, ListNode } from '@lexical/list';\nimport { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';\nimport {\n InitialConfigType,\n InitialEditorStateType,\n LexicalComposer\n} from '@lexical/react/LexicalComposer';\nimport { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';\nimport { ListPlugin } from '@lexical/react/LexicalListPlugin';\nimport { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';\nimport { HeadingNode } from '@lexical/rich-text';\n\nimport { CodeNode } from '@lexical/code';\nimport { EditorState, LexicalEditor } from 'lexical';\nimport {\n Fragment, ReactNode, RefObject, useMemo\n} from 'react';\nimport {\n AutoLinkPlugin,\n DataManagementPlugin,\n DataManagementPluginHandle,\n LinkPlugin,\n TabFocusPlugin\n} from './plugins';\n\nimport { ToolbarContextPlugin } from './components';\n\nconst initialConfig: InitialConfigType = {\n namespace: 'TwigsEditor',\n theme: {\n text: {\n bold: 'text-bold',\n italic: 'text-italic',\n underline: 'text-underline',\n code: 'text-code',\n base: 'text-base',\n highlight: 'text-highlight',\n strikethrough: 'text-strikethrough',\n subscript: 'text-subscript',\n superscript: 'text-superscript',\n underlineStrikethrough: 'text-underline-strikethrough'\n },\n code: 'block-code',\n quote: 'block-quote',\n heading: {\n h1: 'block-h1',\n h2: 'block-h2',\n h3: 'block-h3',\n h4: 'block-h4',\n h5: 'block-h5',\n h6: 'block-h6'\n },\n list: {\n ol: 'block-ol',\n ul: 'block-ul',\n listitem: 'block-listitem'\n }\n },\n onError: (err) => {\n // eslint-disable-next-line no-console\n console.error(err);\n }\n};\n\nlet featureId = 0;\n\nconst featuresToNodeMapping = {\n heading: {\n node: HeadingNode,\n component: null\n },\n list: {\n node: [ListNode, ListItemNode],\n component: ListPlugin\n },\n link: {\n node: [LinkNode, AutoLinkNode],\n component: [AutoLinkPlugin, LinkPlugin]\n },\n code: {\n node: [CodeNode],\n component: null\n }\n};\n\nexport interface EditorProps {\n initialEditorState?: InitialEditorStateType;\n onChange?: (\n newEditorState: EditorState,\n editor: LexicalEditor,\n tags: Set<string>\n ) => void;\n editable?: boolean;\n children?: ReactNode;\n nodes?: InitialConfigType['nodes'];\n features?: (keyof typeof featuresToNodeMapping)[];\n dataManagementRef?: RefObject<DataManagementPluginHandle>;\n onChangePluginProps?: {\n ignoreHistoryMergeTagChange?: boolean;\n ignoreSelectionChange?: boolean;\n };\n}\n\nexport const Editor = ({\n nodes,\n onChange,\n editable,\n features,\n children,\n initialEditorState,\n dataManagementRef,\n onChangePluginProps\n}: EditorProps) => {\n const supportedFeatures = useMemo(() => {\n if (features) {\n const selectedNodes = features\n .map((item) => featuresToNodeMapping[item].node)\n .flat();\n\n const selectedPlugins = features\n .map((item) => featuresToNodeMapping[item].component)\n .flat()\n .map((item) => ({ component: item, id: featureId++ }));\n\n return { nodes: selectedNodes, components: selectedPlugins };\n }\n\n const defaultFeatures = {\n nodes: Object.values(featuresToNodeMapping)\n .map((item) => item.node)\n .flat(),\n components: Object.values(featuresToNodeMapping)\n .map((item) => item.component)\n .flat()\n .map((item) => ({ component: item, id: featureId++ }))\n };\n\n return defaultFeatures;\n }, [features]);\n\n return (\n <LexicalComposer\n initialConfig={{\n ...initialConfig,\n editorState: initialEditorState,\n editable,\n nodes: [...supportedFeatures.nodes, ...(nodes ?? [])]\n }}\n >\n <ToolbarContextPlugin>\n <HistoryPlugin />\n <ClearEditorPlugin />\n <DataManagementPlugin ref={dataManagementRef} />\n <TabFocusPlugin />\n <>\n {onChange && (\n <OnChangePlugin onChange={onChange} {...onChangePluginProps} />\n )}\n </>\n <>\n {supportedFeatures.components.map((comp) => {\n const ToolComponent = comp.component;\n if (ToolComponent) {\n return <ToolComponent key={comp.id} />;\n }\n\n return <Fragment key={comp.id} />;\n })}\n </>\n <>{children}</>\n </ToolbarContextPlugin>\n </LexicalComposer>\n );\n};\n"],"names":["HeadingNode","ListNode","ListItemNode","ListPlugin","LinkNode","AutoLinkNode","AutoLinkPlugin","LinkPlugin","CodeNode","useMemo","jsx","LexicalComposer","ToolbarContextPlugin","HistoryPlugin","ClearEditorPlugin","DataManagementPlugin","TabFocusPlugin","OnChangePlugin","Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,aAAmC,GAAA;AAAA,EACvC,SAAW,EAAA,aAAA;AAAA,EACX,KAAO,EAAA;AAAA,IACL,IAAM,EAAA;AAAA,MACJ,IAAM,EAAA,WAAA;AAAA,MACN,MAAQ,EAAA,aAAA;AAAA,MACR,SAAW,EAAA,gBAAA;AAAA,MACX,IAAM,EAAA,WAAA;AAAA,MACN,IAAM,EAAA,WAAA;AAAA,MACN,SAAW,EAAA,gBAAA;AAAA,MACX,aAAe,EAAA,oBAAA;AAAA,MACf,SAAW,EAAA,gBAAA;AAAA,MACX,WAAa,EAAA,kBAAA;AAAA,MACb,sBAAwB,EAAA;AAAA,KAC1B;AAAA,IACA,IAAM,EAAA,YAAA;AAAA,IACN,KAAO,EAAA,aAAA;AAAA,IACP,OAAS,EAAA;AAAA,MACP,EAAI,EAAA,UAAA;AAAA,MACJ,EAAI,EAAA,UAAA;AAAA,MACJ,EAAI,EAAA,UAAA;AAAA,MACJ,EAAI,EAAA,UAAA;AAAA,MACJ,EAAI,EAAA,UAAA;AAAA,MACJ,EAAI,EAAA;AAAA,KACN;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,EAAI,EAAA,UAAA;AAAA,MACJ,EAAI,EAAA,UAAA;AAAA,MACJ,QAAU,EAAA;AAAA;
|
|
1
|
+
{"version":3,"file":"editor.js","sources":["../../src/editor.tsx"],"sourcesContent":["import { AutoLinkNode, LinkNode } from '@lexical/link';\nimport { ListItemNode, ListNode } from '@lexical/list';\nimport { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';\nimport {\n InitialConfigType,\n InitialEditorStateType,\n LexicalComposer\n} from '@lexical/react/LexicalComposer';\nimport { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';\nimport { ListPlugin } from '@lexical/react/LexicalListPlugin';\nimport { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';\nimport { HeadingNode } from '@lexical/rich-text';\n\nimport { CodeNode } from '@lexical/code';\nimport { EditorState, LexicalEditor } from 'lexical';\nimport {\n Fragment, ReactNode, RefObject, useMemo\n} from 'react';\nimport {\n AutoLinkPlugin,\n DataManagementPlugin,\n DataManagementPluginHandle,\n LinkPlugin,\n TabFocusPlugin\n} from './plugins';\n\nimport { ToolbarContextPlugin } from './components';\n\nconst initialConfig: InitialConfigType = {\n namespace: 'TwigsEditor',\n theme: {\n text: {\n bold: 'text-bold',\n italic: 'text-italic',\n underline: 'text-underline',\n code: 'text-code',\n base: 'text-base',\n highlight: 'text-highlight',\n strikethrough: 'text-strikethrough',\n subscript: 'text-subscript',\n superscript: 'text-superscript',\n underlineStrikethrough: 'text-underline-strikethrough'\n },\n code: 'block-code',\n quote: 'block-quote',\n heading: {\n h1: 'block-h1',\n h2: 'block-h2',\n h3: 'block-h3',\n h4: 'block-h4',\n h5: 'block-h5',\n h6: 'block-h6'\n },\n list: {\n ol: 'block-ol',\n ul: 'block-ul',\n listitem: 'block-listitem',\n nested: {\n list: 'block-nested-list',\n listitem: 'block-nested-listitem'\n },\n olDepth: ['level-1', 'level-2', 'level-3', 'level-4', 'level-5', 'level-6', 'level-7', 'level-8', 'level-9', 'level-10'],\n ulDepth: ['level-1', 'level-2', 'level-3', 'level-4', 'level-5', 'level-6', 'level-7', 'level-8', 'level-9', 'level-10']\n }\n },\n onError: (err) => {\n // eslint-disable-next-line no-console\n console.error(err);\n }\n};\n\nlet featureId = 0;\n\nconst featuresToNodeMapping = {\n heading: {\n node: HeadingNode,\n component: null\n },\n list: {\n node: [ListNode, ListItemNode],\n component: ListPlugin\n },\n link: {\n node: [LinkNode, AutoLinkNode],\n component: [AutoLinkPlugin, LinkPlugin]\n },\n code: {\n node: [CodeNode],\n component: null\n }\n};\n\nexport interface EditorProps {\n initialEditorState?: InitialEditorStateType;\n onChange?: (\n newEditorState: EditorState,\n editor: LexicalEditor,\n tags: Set<string>\n ) => void;\n editable?: boolean;\n children?: ReactNode;\n nodes?: InitialConfigType['nodes'];\n features?: (keyof typeof featuresToNodeMapping)[];\n dataManagementRef?: RefObject<DataManagementPluginHandle>;\n onChangePluginProps?: {\n ignoreHistoryMergeTagChange?: boolean;\n ignoreSelectionChange?: boolean;\n };\n}\n\nexport const Editor = ({\n nodes,\n onChange,\n editable,\n features,\n children,\n initialEditorState,\n dataManagementRef,\n onChangePluginProps\n}: EditorProps) => {\n const supportedFeatures = useMemo(() => {\n if (features) {\n const selectedNodes = features\n .map((item) => featuresToNodeMapping[item].node)\n .flat();\n\n const selectedPlugins = features\n .map((item) => featuresToNodeMapping[item].component)\n .flat()\n .map((item) => ({ component: item, id: featureId++ }));\n\n return { nodes: selectedNodes, components: selectedPlugins };\n }\n\n const defaultFeatures = {\n nodes: Object.values(featuresToNodeMapping)\n .map((item) => item.node)\n .flat(),\n components: Object.values(featuresToNodeMapping)\n .map((item) => item.component)\n .flat()\n .map((item) => ({ component: item, id: featureId++ }))\n };\n\n return defaultFeatures;\n }, [features]);\n\n return (\n <LexicalComposer\n initialConfig={{\n ...initialConfig,\n editorState: initialEditorState,\n editable,\n nodes: [...supportedFeatures.nodes, ...(nodes ?? [])]\n }}\n >\n <ToolbarContextPlugin>\n <HistoryPlugin />\n <ClearEditorPlugin />\n <DataManagementPlugin ref={dataManagementRef} />\n <TabFocusPlugin />\n <>\n {onChange && (\n <OnChangePlugin onChange={onChange} {...onChangePluginProps} />\n )}\n </>\n <>\n {supportedFeatures.components.map((comp) => {\n const ToolComponent = comp.component;\n if (ToolComponent) {\n return <ToolComponent key={comp.id} />;\n }\n\n return <Fragment key={comp.id} />;\n })}\n </>\n <>{children}</>\n </ToolbarContextPlugin>\n </LexicalComposer>\n );\n};\n"],"names":["HeadingNode","ListNode","ListItemNode","ListPlugin","LinkNode","AutoLinkNode","AutoLinkPlugin","LinkPlugin","CodeNode","useMemo","jsx","LexicalComposer","ToolbarContextPlugin","HistoryPlugin","ClearEditorPlugin","DataManagementPlugin","TabFocusPlugin","OnChangePlugin","Fragment"],"mappings":"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"}
|
|
@@ -4,7 +4,6 @@ var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
|
|
|
4
4
|
var lexical = require('lexical');
|
|
5
5
|
var react = require('react');
|
|
6
6
|
|
|
7
|
-
const COMMAND_PRIORITY_LOW = 1;
|
|
8
7
|
const TAB_TO_FOCUS_INTERVAL = 100;
|
|
9
8
|
let lastTabKeyDownTimestamp = 0;
|
|
10
9
|
let hasRegisteredKeyDownListener = false;
|
|
@@ -37,14 +36,7 @@ const TabFocusPlugin = () => {
|
|
|
37
36
|
}
|
|
38
37
|
return false;
|
|
39
38
|
},
|
|
40
|
-
COMMAND_PRIORITY_LOW
|
|
41
|
-
);
|
|
42
|
-
}, [editor]);
|
|
43
|
-
react.useEffect(() => {
|
|
44
|
-
return editor.registerCommand(
|
|
45
|
-
lexical.INDENT_CONTENT_COMMAND,
|
|
46
|
-
() => true,
|
|
47
|
-
lexical.COMMAND_PRIORITY_CRITICAL
|
|
39
|
+
lexical.COMMAND_PRIORITY_LOW
|
|
48
40
|
);
|
|
49
41
|
}, [editor]);
|
|
50
42
|
return null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/plugins/tab-focus/index.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/plugins/tab-focus/index.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport {\n $getSelection,\n $isRangeSelection,\n $setSelection,\n COMMAND_PRIORITY_LOW,\n FOCUS_COMMAND\n} from 'lexical';\nimport { useEffect } from 'react';\n\nconst TAB_TO_FOCUS_INTERVAL = 100;\n\nlet lastTabKeyDownTimestamp = 0;\nlet hasRegisteredKeyDownListener = false;\n\nfunction registerKeyTimeStampTracker() {\n window.addEventListener(\n 'keydown',\n (event: KeyboardEvent) => {\n // Tab\n if (event.key === 'Tab') {\n lastTabKeyDownTimestamp = event.timeStamp;\n }\n },\n true\n );\n}\n\nexport const TabFocusPlugin = (): null => {\n const [editor] = useLexicalComposerContext();\n\n useEffect(() => {\n if (!hasRegisteredKeyDownListener) {\n registerKeyTimeStampTracker();\n hasRegisteredKeyDownListener = true;\n }\n\n return editor.registerCommand(\n FOCUS_COMMAND,\n (event: FocusEvent) => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n if (\n lastTabKeyDownTimestamp + TAB_TO_FOCUS_INTERVAL\n > event.timeStamp\n ) {\n $setSelection(selection.clone());\n }\n }\n return false;\n },\n COMMAND_PRIORITY_LOW\n );\n }, [editor]);\n\n return null;\n};\n"],"names":["useLexicalComposerContext","useEffect","FOCUS_COMMAND","$getSelection","$isRangeSelection","$setSelection","COMMAND_PRIORITY_LOW"],"mappings":";;;;;;AAUA,MAAM,qBAAwB,GAAA,GAAA;AAE9B,IAAI,uBAA0B,GAAA,CAAA;AAC9B,IAAI,4BAA+B,GAAA,KAAA;AAEnC,SAAS,2BAA8B,GAAA;AACrC,EAAO,MAAA,CAAA,gBAAA;AAAA,IACL,SAAA;AAAA,IACA,CAAC,KAAyB,KAAA;AAExB,MAAI,IAAA,KAAA,CAAM,QAAQ,KAAO,EAAA;AACvB,QAAA,uBAAA,GAA0B,KAAM,CAAA,SAAA;AAAA;AAClC,KACF;AAAA,IACA;AAAA,GACF;AACF;AAEO,MAAM,iBAAiB,MAAY;AACxC,EAAM,MAAA,CAAC,MAAM,CAAA,GAAIA,gDAA0B,EAAA;AAE3C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,4BAA8B,EAAA;AACjC,MAA4B,2BAAA,EAAA;AAC5B,MAA+B,4BAAA,GAAA,IAAA;AAAA;AAGjC,IAAA,OAAO,MAAO,CAAA,eAAA;AAAA,MACZC,qBAAA;AAAA,MACA,CAAC,KAAsB,KAAA;AACrB,QAAA,MAAM,YAAYC,qBAAc,EAAA;AAChC,QAAI,IAAAC,yBAAA,CAAkB,SAAS,CAAG,EAAA;AAChC,UACE,IAAA,uBAAA,GAA0B,qBACxB,GAAA,KAAA,CAAM,SACR,EAAA;AACA,YAAcC,qBAAA,CAAA,SAAA,CAAU,OAAO,CAAA;AAAA;AACjC;AAEF,QAAO,OAAA,KAAA;AAAA,OACT;AAAA,MACAC;AAAA,KACF;AAAA,GACF,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAO,OAAA,IAAA;AACT;;;;"}
|
|
@@ -63,6 +63,9 @@ const RichEditor = ({
|
|
|
63
63
|
listStyle: "disc",
|
|
64
64
|
marginLeft: "$7",
|
|
65
65
|
ul: {
|
|
66
|
+
listStyle: "square"
|
|
67
|
+
},
|
|
68
|
+
"&.level-2": {
|
|
66
69
|
listStyle: "circle"
|
|
67
70
|
}
|
|
68
71
|
},
|
|
@@ -73,6 +76,9 @@ const RichEditor = ({
|
|
|
73
76
|
listStyle: "lower-alpha"
|
|
74
77
|
}
|
|
75
78
|
},
|
|
79
|
+
".block-nested-listitem": {
|
|
80
|
+
listStyle: "none"
|
|
81
|
+
},
|
|
76
82
|
".text-code": {
|
|
77
83
|
color: "#F97316",
|
|
78
84
|
padding: "0 $2",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/rich-editor/index.tsx"],"sourcesContent":["import { ContentEditable } from '@lexical/react/LexicalContentEditable';\nimport { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';\nimport { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';\nimport { ReactNode, RefObject, isValidElement } from 'react';\nimport { Box, BoxProps } from '@sparrowengg/twigs-react';\n\nexport const RichEditor = ({\n containerRef,\n placeholder,\n editorContainerProps\n}: {\n containerRef?:\n | ((instance: HTMLDivElement | null) => void)\n | RefObject<HTMLDivElement>;\n placeholder?: ReactNode | string;\n editorContainerProps?: BoxProps;\n}) => {\n return (\n <Box\n {...editorContainerProps}\n css={{\n position: 'relative',\n ...editorContainerProps?.css\n }}\n >\n <RichTextPlugin\n contentEditable={(\n <Box className=\"editor-container\">\n <Box\n className=\"editor\"\n css={{\n position: 'relative',\n borderRadius: '$md',\n border: '1px solid $neutral200',\n textAlign: 'left',\n\n '& .text-bold': {\n fontWeight: 'bold'\n },\n '& .text-italic': {\n fontStyle: 'italic'\n },\n '& .text-underline': {\n textDecoration: 'underline'\n },\n p: {\n margin: '$1 0'\n },\n ul: {\n listStyle: 'disc',\n marginLeft: '$7',\n\n ul: {\n listStyle: 'circle'\n }\n },\n ol: {\n listStyle: 'decimal',\n marginLeft: '$7',\n\n ol: {\n listStyle: 'lower-alpha'\n }\n },\n '.text-code': {\n color: '#F97316',\n padding: '0 $2',\n backgroundColor: '$neutral100',\n border: '1px solid $neutral200',\n borderRadius: '$sm',\n\n '&, & *': {\n fontFamily: 'monospace'\n }\n },\n '.block-code': {\n padding: '$4',\n display: 'block',\n color: '$neutral900',\n backgroundColor: '$neutral100',\n border: '1px solid $neutral200',\n borderRadius: '$md',\n\n '&, & *': {\n fontFamily: 'monospace'\n }\n },\n '.block-h1': {\n fontSize: '$xl'\n },\n '.block-h2': {\n fontSize: '$lg'\n },\n '.block-h3, .block-h4, .block-h5, .block-h6': {\n fontSize: '$md'\n }\n }}\n ref={containerRef}\n >\n <ContentEditable\n style={{\n minHeight: '120px',\n padding: '12px'\n }}\n />\n </Box>\n </Box>\n )}\n ErrorBoundary={LexicalErrorBoundary}\n placeholder={\n !isValidElement(placeholder) ? (\n <Box\n css={{\n position: 'absolute',\n top: '12px',\n left: '12px',\n color: '$black500',\n pointerEvents: 'none'\n }}\n >\n {placeholder}\n </Box>\n ) : (\n placeholder\n )\n }\n />\n </Box>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/rich-editor/index.tsx"],"sourcesContent":["import { ContentEditable } from '@lexical/react/LexicalContentEditable';\nimport { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';\nimport { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';\nimport { ReactNode, RefObject, isValidElement } from 'react';\nimport { Box, BoxProps } from '@sparrowengg/twigs-react';\n\nexport const RichEditor = ({\n containerRef,\n placeholder,\n editorContainerProps\n}: {\n containerRef?:\n | ((instance: HTMLDivElement | null) => void)\n | RefObject<HTMLDivElement>;\n placeholder?: ReactNode | string;\n editorContainerProps?: BoxProps;\n}) => {\n return (\n <Box\n {...editorContainerProps}\n css={{\n position: 'relative',\n ...editorContainerProps?.css\n }}\n >\n <RichTextPlugin\n contentEditable={(\n <Box className=\"editor-container\">\n <Box\n className=\"editor\"\n css={{\n position: 'relative',\n borderRadius: '$md',\n border: '1px solid $neutral200',\n textAlign: 'left',\n\n '& .text-bold': {\n fontWeight: 'bold'\n },\n '& .text-italic': {\n fontStyle: 'italic'\n },\n '& .text-underline': {\n textDecoration: 'underline'\n },\n p: {\n margin: '$1 0'\n },\n ul: {\n listStyle: 'disc',\n marginLeft: '$7',\n\n ul: {\n listStyle: 'square'\n },\n\n '&.level-2': {\n listStyle: 'circle'\n }\n },\n ol: {\n listStyle: 'decimal',\n marginLeft: '$7',\n\n ol: {\n listStyle: 'lower-alpha'\n }\n },\n '.block-nested-listitem': {\n listStyle: 'none'\n },\n '.text-code': {\n color: '#F97316',\n padding: '0 $2',\n backgroundColor: '$neutral100',\n border: '1px solid $neutral200',\n borderRadius: '$sm',\n\n '&, & *': {\n fontFamily: 'monospace'\n }\n },\n '.block-code': {\n padding: '$4',\n display: 'block',\n color: '$neutral900',\n backgroundColor: '$neutral100',\n border: '1px solid $neutral200',\n borderRadius: '$md',\n\n '&, & *': {\n fontFamily: 'monospace'\n }\n },\n '.block-h1': {\n fontSize: '$xl'\n },\n '.block-h2': {\n fontSize: '$lg'\n },\n '.block-h3, .block-h4, .block-h5, .block-h6': {\n fontSize: '$md'\n }\n }}\n ref={containerRef}\n >\n <ContentEditable\n style={{\n minHeight: '120px',\n padding: '12px'\n }}\n />\n </Box>\n </Box>\n )}\n ErrorBoundary={LexicalErrorBoundary}\n placeholder={\n !isValidElement(placeholder) ? (\n <Box\n css={{\n position: 'absolute',\n top: '12px',\n left: '12px',\n color: '$black500',\n pointerEvents: 'none'\n }}\n >\n {placeholder}\n </Box>\n ) : (\n placeholder\n )\n }\n />\n </Box>\n );\n};\n"],"names":[],"mappings":"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"}
|
package/dist/es/editor.js
CHANGED
|
@@ -76,7 +76,13 @@ const initialConfig = {
|
|
|
76
76
|
list: {
|
|
77
77
|
ol: "block-ol",
|
|
78
78
|
ul: "block-ul",
|
|
79
|
-
listitem: "block-listitem"
|
|
79
|
+
listitem: "block-listitem",
|
|
80
|
+
nested: {
|
|
81
|
+
list: "block-nested-list",
|
|
82
|
+
listitem: "block-nested-listitem"
|
|
83
|
+
},
|
|
84
|
+
olDepth: ["level-1", "level-2", "level-3", "level-4", "level-5", "level-6", "level-7", "level-8", "level-9", "level-10"],
|
|
85
|
+
ulDepth: ["level-1", "level-2", "level-3", "level-4", "level-5", "level-6", "level-7", "level-8", "level-9", "level-10"]
|
|
80
86
|
}
|
|
81
87
|
},
|
|
82
88
|
onError: (err) => {
|
package/dist/es/editor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editor.js","sources":["../../src/editor.tsx"],"sourcesContent":["import { AutoLinkNode, LinkNode } from '@lexical/link';\nimport { ListItemNode, ListNode } from '@lexical/list';\nimport { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';\nimport {\n InitialConfigType,\n InitialEditorStateType,\n LexicalComposer\n} from '@lexical/react/LexicalComposer';\nimport { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';\nimport { ListPlugin } from '@lexical/react/LexicalListPlugin';\nimport { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';\nimport { HeadingNode } from '@lexical/rich-text';\n\nimport { CodeNode } from '@lexical/code';\nimport { EditorState, LexicalEditor } from 'lexical';\nimport {\n Fragment, ReactNode, RefObject, useMemo\n} from 'react';\nimport {\n AutoLinkPlugin,\n DataManagementPlugin,\n DataManagementPluginHandle,\n LinkPlugin,\n TabFocusPlugin\n} from './plugins';\n\nimport { ToolbarContextPlugin } from './components';\n\nconst initialConfig: InitialConfigType = {\n namespace: 'TwigsEditor',\n theme: {\n text: {\n bold: 'text-bold',\n italic: 'text-italic',\n underline: 'text-underline',\n code: 'text-code',\n base: 'text-base',\n highlight: 'text-highlight',\n strikethrough: 'text-strikethrough',\n subscript: 'text-subscript',\n superscript: 'text-superscript',\n underlineStrikethrough: 'text-underline-strikethrough'\n },\n code: 'block-code',\n quote: 'block-quote',\n heading: {\n h1: 'block-h1',\n h2: 'block-h2',\n h3: 'block-h3',\n h4: 'block-h4',\n h5: 'block-h5',\n h6: 'block-h6'\n },\n list: {\n ol: 'block-ol',\n ul: 'block-ul',\n listitem: 'block-listitem'\n }\n },\n onError: (err) => {\n // eslint-disable-next-line no-console\n console.error(err);\n }\n};\n\nlet featureId = 0;\n\nconst featuresToNodeMapping = {\n heading: {\n node: HeadingNode,\n component: null\n },\n list: {\n node: [ListNode, ListItemNode],\n component: ListPlugin\n },\n link: {\n node: [LinkNode, AutoLinkNode],\n component: [AutoLinkPlugin, LinkPlugin]\n },\n code: {\n node: [CodeNode],\n component: null\n }\n};\n\nexport interface EditorProps {\n initialEditorState?: InitialEditorStateType;\n onChange?: (\n newEditorState: EditorState,\n editor: LexicalEditor,\n tags: Set<string>\n ) => void;\n editable?: boolean;\n children?: ReactNode;\n nodes?: InitialConfigType['nodes'];\n features?: (keyof typeof featuresToNodeMapping)[];\n dataManagementRef?: RefObject<DataManagementPluginHandle>;\n onChangePluginProps?: {\n ignoreHistoryMergeTagChange?: boolean;\n ignoreSelectionChange?: boolean;\n };\n}\n\nexport const Editor = ({\n nodes,\n onChange,\n editable,\n features,\n children,\n initialEditorState,\n dataManagementRef,\n onChangePluginProps\n}: EditorProps) => {\n const supportedFeatures = useMemo(() => {\n if (features) {\n const selectedNodes = features\n .map((item) => featuresToNodeMapping[item].node)\n .flat();\n\n const selectedPlugins = features\n .map((item) => featuresToNodeMapping[item].component)\n .flat()\n .map((item) => ({ component: item, id: featureId++ }));\n\n return { nodes: selectedNodes, components: selectedPlugins };\n }\n\n const defaultFeatures = {\n nodes: Object.values(featuresToNodeMapping)\n .map((item) => item.node)\n .flat(),\n components: Object.values(featuresToNodeMapping)\n .map((item) => item.component)\n .flat()\n .map((item) => ({ component: item, id: featureId++ }))\n };\n\n return defaultFeatures;\n }, [features]);\n\n return (\n <LexicalComposer\n initialConfig={{\n ...initialConfig,\n editorState: initialEditorState,\n editable,\n nodes: [...supportedFeatures.nodes, ...(nodes ?? [])]\n }}\n >\n <ToolbarContextPlugin>\n <HistoryPlugin />\n <ClearEditorPlugin />\n <DataManagementPlugin ref={dataManagementRef} />\n <TabFocusPlugin />\n <>\n {onChange && (\n <OnChangePlugin onChange={onChange} {...onChangePluginProps} />\n )}\n </>\n <>\n {supportedFeatures.components.map((comp) => {\n const ToolComponent = comp.component;\n if (ToolComponent) {\n return <ToolComponent key={comp.id} />;\n }\n\n return <Fragment key={comp.id} />;\n })}\n </>\n <>{children}</>\n </ToolbarContextPlugin>\n </LexicalComposer>\n );\n};\n"],"names":["Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,aAAmC,GAAA;AAAA,EACvC,SAAW,EAAA,aAAA;AAAA,EACX,KAAO,EAAA;AAAA,IACL,IAAM,EAAA;AAAA,MACJ,IAAM,EAAA,WAAA;AAAA,MACN,MAAQ,EAAA,aAAA;AAAA,MACR,SAAW,EAAA,gBAAA;AAAA,MACX,IAAM,EAAA,WAAA;AAAA,MACN,IAAM,EAAA,WAAA;AAAA,MACN,SAAW,EAAA,gBAAA;AAAA,MACX,aAAe,EAAA,oBAAA;AAAA,MACf,SAAW,EAAA,gBAAA;AAAA,MACX,WAAa,EAAA,kBAAA;AAAA,MACb,sBAAwB,EAAA;AAAA,KAC1B;AAAA,IACA,IAAM,EAAA,YAAA;AAAA,IACN,KAAO,EAAA,aAAA;AAAA,IACP,OAAS,EAAA;AAAA,MACP,EAAI,EAAA,UAAA;AAAA,MACJ,EAAI,EAAA,UAAA;AAAA,MACJ,EAAI,EAAA,UAAA;AAAA,MACJ,EAAI,EAAA,UAAA;AAAA,MACJ,EAAI,EAAA,UAAA;AAAA,MACJ,EAAI,EAAA;AAAA,KACN;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,EAAI,EAAA,UAAA;AAAA,MACJ,EAAI,EAAA,UAAA;AAAA,MACJ,QAAU,EAAA;AAAA;
|
|
1
|
+
{"version":3,"file":"editor.js","sources":["../../src/editor.tsx"],"sourcesContent":["import { AutoLinkNode, LinkNode } from '@lexical/link';\nimport { ListItemNode, ListNode } from '@lexical/list';\nimport { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';\nimport {\n InitialConfigType,\n InitialEditorStateType,\n LexicalComposer\n} from '@lexical/react/LexicalComposer';\nimport { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';\nimport { ListPlugin } from '@lexical/react/LexicalListPlugin';\nimport { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';\nimport { HeadingNode } from '@lexical/rich-text';\n\nimport { CodeNode } from '@lexical/code';\nimport { EditorState, LexicalEditor } from 'lexical';\nimport {\n Fragment, ReactNode, RefObject, useMemo\n} from 'react';\nimport {\n AutoLinkPlugin,\n DataManagementPlugin,\n DataManagementPluginHandle,\n LinkPlugin,\n TabFocusPlugin\n} from './plugins';\n\nimport { ToolbarContextPlugin } from './components';\n\nconst initialConfig: InitialConfigType = {\n namespace: 'TwigsEditor',\n theme: {\n text: {\n bold: 'text-bold',\n italic: 'text-italic',\n underline: 'text-underline',\n code: 'text-code',\n base: 'text-base',\n highlight: 'text-highlight',\n strikethrough: 'text-strikethrough',\n subscript: 'text-subscript',\n superscript: 'text-superscript',\n underlineStrikethrough: 'text-underline-strikethrough'\n },\n code: 'block-code',\n quote: 'block-quote',\n heading: {\n h1: 'block-h1',\n h2: 'block-h2',\n h3: 'block-h3',\n h4: 'block-h4',\n h5: 'block-h5',\n h6: 'block-h6'\n },\n list: {\n ol: 'block-ol',\n ul: 'block-ul',\n listitem: 'block-listitem',\n nested: {\n list: 'block-nested-list',\n listitem: 'block-nested-listitem'\n },\n olDepth: ['level-1', 'level-2', 'level-3', 'level-4', 'level-5', 'level-6', 'level-7', 'level-8', 'level-9', 'level-10'],\n ulDepth: ['level-1', 'level-2', 'level-3', 'level-4', 'level-5', 'level-6', 'level-7', 'level-8', 'level-9', 'level-10']\n }\n },\n onError: (err) => {\n // eslint-disable-next-line no-console\n console.error(err);\n }\n};\n\nlet featureId = 0;\n\nconst featuresToNodeMapping = {\n heading: {\n node: HeadingNode,\n component: null\n },\n list: {\n node: [ListNode, ListItemNode],\n component: ListPlugin\n },\n link: {\n node: [LinkNode, AutoLinkNode],\n component: [AutoLinkPlugin, LinkPlugin]\n },\n code: {\n node: [CodeNode],\n component: null\n }\n};\n\nexport interface EditorProps {\n initialEditorState?: InitialEditorStateType;\n onChange?: (\n newEditorState: EditorState,\n editor: LexicalEditor,\n tags: Set<string>\n ) => void;\n editable?: boolean;\n children?: ReactNode;\n nodes?: InitialConfigType['nodes'];\n features?: (keyof typeof featuresToNodeMapping)[];\n dataManagementRef?: RefObject<DataManagementPluginHandle>;\n onChangePluginProps?: {\n ignoreHistoryMergeTagChange?: boolean;\n ignoreSelectionChange?: boolean;\n };\n}\n\nexport const Editor = ({\n nodes,\n onChange,\n editable,\n features,\n children,\n initialEditorState,\n dataManagementRef,\n onChangePluginProps\n}: EditorProps) => {\n const supportedFeatures = useMemo(() => {\n if (features) {\n const selectedNodes = features\n .map((item) => featuresToNodeMapping[item].node)\n .flat();\n\n const selectedPlugins = features\n .map((item) => featuresToNodeMapping[item].component)\n .flat()\n .map((item) => ({ component: item, id: featureId++ }));\n\n return { nodes: selectedNodes, components: selectedPlugins };\n }\n\n const defaultFeatures = {\n nodes: Object.values(featuresToNodeMapping)\n .map((item) => item.node)\n .flat(),\n components: Object.values(featuresToNodeMapping)\n .map((item) => item.component)\n .flat()\n .map((item) => ({ component: item, id: featureId++ }))\n };\n\n return defaultFeatures;\n }, [features]);\n\n return (\n <LexicalComposer\n initialConfig={{\n ...initialConfig,\n editorState: initialEditorState,\n editable,\n nodes: [...supportedFeatures.nodes, ...(nodes ?? [])]\n }}\n >\n <ToolbarContextPlugin>\n <HistoryPlugin />\n <ClearEditorPlugin />\n <DataManagementPlugin ref={dataManagementRef} />\n <TabFocusPlugin />\n <>\n {onChange && (\n <OnChangePlugin onChange={onChange} {...onChangePluginProps} />\n )}\n </>\n <>\n {supportedFeatures.components.map((comp) => {\n const ToolComponent = comp.component;\n if (ToolComponent) {\n return <ToolComponent key={comp.id} />;\n }\n\n return <Fragment key={comp.id} />;\n })}\n </>\n <>{children}</>\n </ToolbarContextPlugin>\n </LexicalComposer>\n );\n};\n"],"names":["Fragment"],"mappings":"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"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
2
|
-
import { FOCUS_COMMAND, $getSelection, $isRangeSelection, $setSelection,
|
|
2
|
+
import { FOCUS_COMMAND, $getSelection, $isRangeSelection, $setSelection, COMMAND_PRIORITY_LOW } from 'lexical';
|
|
3
3
|
import { useEffect } from 'react';
|
|
4
4
|
|
|
5
|
-
const COMMAND_PRIORITY_LOW = 1;
|
|
6
5
|
const TAB_TO_FOCUS_INTERVAL = 100;
|
|
7
6
|
let lastTabKeyDownTimestamp = 0;
|
|
8
7
|
let hasRegisteredKeyDownListener = false;
|
|
@@ -38,13 +37,6 @@ const TabFocusPlugin = () => {
|
|
|
38
37
|
COMMAND_PRIORITY_LOW
|
|
39
38
|
);
|
|
40
39
|
}, [editor]);
|
|
41
|
-
useEffect(() => {
|
|
42
|
-
return editor.registerCommand(
|
|
43
|
-
INDENT_CONTENT_COMMAND,
|
|
44
|
-
() => true,
|
|
45
|
-
COMMAND_PRIORITY_CRITICAL
|
|
46
|
-
);
|
|
47
|
-
}, [editor]);
|
|
48
40
|
return null;
|
|
49
41
|
};
|
|
50
42
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/plugins/tab-focus/index.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/plugins/tab-focus/index.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport {\n $getSelection,\n $isRangeSelection,\n $setSelection,\n COMMAND_PRIORITY_LOW,\n FOCUS_COMMAND\n} from 'lexical';\nimport { useEffect } from 'react';\n\nconst TAB_TO_FOCUS_INTERVAL = 100;\n\nlet lastTabKeyDownTimestamp = 0;\nlet hasRegisteredKeyDownListener = false;\n\nfunction registerKeyTimeStampTracker() {\n window.addEventListener(\n 'keydown',\n (event: KeyboardEvent) => {\n // Tab\n if (event.key === 'Tab') {\n lastTabKeyDownTimestamp = event.timeStamp;\n }\n },\n true\n );\n}\n\nexport const TabFocusPlugin = (): null => {\n const [editor] = useLexicalComposerContext();\n\n useEffect(() => {\n if (!hasRegisteredKeyDownListener) {\n registerKeyTimeStampTracker();\n hasRegisteredKeyDownListener = true;\n }\n\n return editor.registerCommand(\n FOCUS_COMMAND,\n (event: FocusEvent) => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n if (\n lastTabKeyDownTimestamp + TAB_TO_FOCUS_INTERVAL\n > event.timeStamp\n ) {\n $setSelection(selection.clone());\n }\n }\n return false;\n },\n COMMAND_PRIORITY_LOW\n );\n }, [editor]);\n\n return null;\n};\n"],"names":[],"mappings":";;;;AAUA,MAAM,qBAAwB,GAAA,GAAA;AAE9B,IAAI,uBAA0B,GAAA,CAAA;AAC9B,IAAI,4BAA+B,GAAA,KAAA;AAEnC,SAAS,2BAA8B,GAAA;AACrC,EAAO,MAAA,CAAA,gBAAA;AAAA,IACL,SAAA;AAAA,IACA,CAAC,KAAyB,KAAA;AAExB,MAAI,IAAA,KAAA,CAAM,QAAQ,KAAO,EAAA;AACvB,QAAA,uBAAA,GAA0B,KAAM,CAAA,SAAA;AAAA;AAClC,KACF;AAAA,IACA;AAAA,GACF;AACF;AAEO,MAAM,iBAAiB,MAAY;AACxC,EAAM,MAAA,CAAC,MAAM,CAAA,GAAI,yBAA0B,EAAA;AAE3C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,4BAA8B,EAAA;AACjC,MAA4B,2BAAA,EAAA;AAC5B,MAA+B,4BAAA,GAAA,IAAA;AAAA;AAGjC,IAAA,OAAO,MAAO,CAAA,eAAA;AAAA,MACZ,aAAA;AAAA,MACA,CAAC,KAAsB,KAAA;AACrB,QAAA,MAAM,YAAY,aAAc,EAAA;AAChC,QAAI,IAAA,iBAAA,CAAkB,SAAS,CAAG,EAAA;AAChC,UACE,IAAA,uBAAA,GAA0B,qBACxB,GAAA,KAAA,CAAM,SACR,EAAA;AACA,YAAc,aAAA,CAAA,SAAA,CAAU,OAAO,CAAA;AAAA;AACjC;AAEF,QAAO,OAAA,KAAA;AAAA,OACT;AAAA,MACA;AAAA,KACF;AAAA,GACF,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAO,OAAA,IAAA;AACT;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -291,13 +291,6 @@ declare const MentionsPlugin: ({ getResults, triggerStringLength, ...props }: Pa
|
|
|
291
291
|
triggerStringLength?: number;
|
|
292
292
|
}) => react_jsx_runtime.JSX.Element;
|
|
293
293
|
|
|
294
|
-
/**
|
|
295
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
296
|
-
*
|
|
297
|
-
* This source code is licensed under the MIT license found in the
|
|
298
|
-
* LICENSE file in the root directory of this source tree.
|
|
299
|
-
*
|
|
300
|
-
*/
|
|
301
294
|
declare const TabFocusPlugin: () => null;
|
|
302
295
|
|
|
303
296
|
type Emoji = {
|