@pie-lib/editable-html-tip-tap 2.1.2-next.48 → 2.1.2-next.51
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.
|
@@ -90,22 +90,44 @@ function CharacterPicker(_ref2) {
|
|
|
90
90
|
// ref so click-outside always calls the latest close handler.
|
|
91
91
|
(0, _react.useEffect)(function () {
|
|
92
92
|
if (!editor) return;
|
|
93
|
-
|
|
94
|
-
// Calculate position relative to selection
|
|
95
93
|
var editorDOM = editor.options.element;
|
|
96
|
-
var editorRect = editorDOM.getBoundingClientRect();
|
|
97
|
-
var bodyRect = document.body.getBoundingClientRect();
|
|
98
|
-
var from = editor.state.selection.from;
|
|
99
|
-
var start = editor.view.coordsAtPos(from);
|
|
100
|
-
var top = editorRect.top + Math.abs(bodyRect.top) + editorRect.height + 60;
|
|
101
|
-
if (editorRect.y > containerRef.current.offsetHeight) {
|
|
102
|
-
top = top - (containerRef.current.offsetHeight + editorRect.height) - 80;
|
|
103
|
-
}
|
|
104
|
-
setPosition({
|
|
105
|
-
top: top,
|
|
106
|
-
left: start.left
|
|
107
|
-
});
|
|
108
94
|
var editorViewDom = editor.view.dom;
|
|
95
|
+
|
|
96
|
+
// Position is computed in viewport coordinates (the dialog uses position: fixed),
|
|
97
|
+
// so coordsAtPos / getBoundingClientRect values can be used directly without
|
|
98
|
+
// adding scroll offsets. The dialog is then clamped to the viewport so it does
|
|
99
|
+
// not get cut off by fixed page headers/footers.
|
|
100
|
+
var updatePosition = function updatePosition() {
|
|
101
|
+
if (!containerRef.current) return;
|
|
102
|
+
var editorRect = editorDOM.getBoundingClientRect();
|
|
103
|
+
var from = editor.state.selection.from;
|
|
104
|
+
var start = editor.view.coordsAtPos(from);
|
|
105
|
+
var dialogHeight = containerRef.current.offsetHeight;
|
|
106
|
+
var dialogWidth = containerRef.current.offsetWidth;
|
|
107
|
+
|
|
108
|
+
// prefer below the editor; flip above when there isn't room below.
|
|
109
|
+
var spaceBelow = window.innerHeight - (editorRect.bottom + 60);
|
|
110
|
+
var top = spaceBelow >= dialogHeight || editorRect.top < dialogHeight + 80 ? editorRect.bottom + 60 : editorRect.top - dialogHeight - 20;
|
|
111
|
+
var left = start.left;
|
|
112
|
+
var margin = 8;
|
|
113
|
+
top = Math.max(margin, Math.min(top, window.innerHeight - dialogHeight - margin));
|
|
114
|
+
left = Math.max(margin, Math.min(left, window.innerWidth - dialogWidth - margin));
|
|
115
|
+
setPosition({
|
|
116
|
+
top: top,
|
|
117
|
+
left: left
|
|
118
|
+
});
|
|
119
|
+
};
|
|
120
|
+
updatePosition();
|
|
121
|
+
var frame = null;
|
|
122
|
+
var scheduleUpdate = function scheduleUpdate() {
|
|
123
|
+
if (frame !== null) return;
|
|
124
|
+
frame = requestAnimationFrame(function () {
|
|
125
|
+
frame = null;
|
|
126
|
+
updatePosition();
|
|
127
|
+
});
|
|
128
|
+
};
|
|
129
|
+
window.addEventListener('scroll', scheduleUpdate, true);
|
|
130
|
+
window.addEventListener('resize', scheduleUpdate);
|
|
109
131
|
var handleClickOutside = function handleClickOutside(e) {
|
|
110
132
|
if (containerRef.current && !containerRef.current.contains(e.target) && !editorViewDom.contains(e.target)) {
|
|
111
133
|
onCloseRef.current();
|
|
@@ -116,6 +138,9 @@ function CharacterPicker(_ref2) {
|
|
|
116
138
|
});
|
|
117
139
|
return function () {
|
|
118
140
|
clearTimeout(timeoutId);
|
|
141
|
+
if (frame !== null) cancelAnimationFrame(frame);
|
|
142
|
+
window.removeEventListener('scroll', scheduleUpdate, true);
|
|
143
|
+
window.removeEventListener('resize', scheduleUpdate);
|
|
119
144
|
document.removeEventListener('click', handleClickOutside);
|
|
120
145
|
};
|
|
121
146
|
}, [editor]);
|
|
@@ -136,7 +161,7 @@ function CharacterPicker(_ref2) {
|
|
|
136
161
|
"data-toolbar-for": editor.instanceId,
|
|
137
162
|
style: {
|
|
138
163
|
visibility: position.top === 0 && position.left === 0 ? 'hidden' : 'initial',
|
|
139
|
-
position: '
|
|
164
|
+
position: 'fixed',
|
|
140
165
|
top: "".concat(position.top, "px"),
|
|
141
166
|
left: "".concat(position.left, "px"),
|
|
142
167
|
maxWidth: '500px',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CharacterPicker.js","names":["_react","_interopRequireWildcard","require","_reactDom","_interopRequireDefault","_propTypes","_get","_mathToolbar","_customPopper","_characterUtils","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","CharacterIcon","exports","_ref","letter","createElement","style","fontSize","lineHeight","propTypes","PropTypes","string","CharacterPicker","_ref2","_opts$characters","editor","opts","onClose","characters","containerRef","useRef","onCloseRef","_useState","useState","top","left","_useState2","_slicedToArray2","position","setPosition","_useState3","_useState4","popover","setPopover","current","configToUse","useMemo","spanishConfig","language","specialConfig","layoutForCharacters","reduce","obj","arr","columns","rows","closePopOver","useEffect","editorDOM","options","element","editorRect","getBoundingClientRect","bodyRect","document","body","from","state","selection","start","view","coordsAtPos","Math","abs","height","y","offsetHeight","editorViewDom","dom","handleClickOutside","contains","target","timeoutId","setTimeout","addEventListener","clearTimeout","removeEventListener","renderPopOver","event","el","anchorEl","currentTarget","handleChange","val","chain","focus","insertContent","run","Fragment","ReactDOM","createPortal","ref","className","instanceId","visibility","concat","maxWidth","zIndex","PureToolbar","keyPadCharacterRef","setKeypadInteraction","autoFocus","noDecimal","hideInput","noLatexHandling","hideDoneButtonBackground","layoutForKeyPad","additionalKeys","_toConsumableArray2","map","k","name","write","label","category","extraClass","extraProps","border","hasPreview","actions","onMouseEnter","ev","onMouseLeave","keypadMode","onChange","onDone","description","unicode","object","func","isRequired"],"sources":["../../src/components/CharacterPicker.jsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport get from 'lodash-es/get';\n\nimport { PureToolbar } from '@pie-lib/math-toolbar';\n\nimport CustomPopper from './characters/custom-popper';\nimport { spanishConfig, specialConfig } from './characters/characterUtils';\n\nconst CharacterIcon = ({ letter }) => (\n <div\n style={{\n fontSize: '24px',\n lineHeight: '24px',\n }}\n >\n {letter}\n </div>\n);\n\nCharacterIcon.propTypes = {\n letter: PropTypes.string,\n};\n\nexport function CharacterPicker({ editor, opts, onClose }) {\n if (!opts?.characters?.length) {\n return null;\n }\n\n const containerRef = useRef(null);\n const onCloseRef = useRef(onClose);\n const [position, setPosition] = useState({ top: 0, left: 0 });\n const [popover, setPopover] = useState(null);\n\n onCloseRef.current = onClose;\n\n const configToUse = useMemo(() => {\n if (!opts) return spanishConfig;\n\n switch (true) {\n case opts.language === 'spanish':\n return spanishConfig;\n case opts.language === 'special':\n return specialConfig;\n default:\n return opts;\n }\n }, [opts]);\n\n const layoutForCharacters = useMemo(\n () =>\n configToUse.characters.reduce(\n (obj, arr) => {\n if (arr.length >= obj.columns) {\n obj.columns = arr.length;\n }\n\n return obj;\n },\n { rows: configToUse.characters.length, columns: 0 },\n ),\n [configToUse],\n );\n\n const closePopOver = () => setPopover(null);\n\n useEffect(\n () => () => {\n closePopOver();\n },\n [],\n );\n\n // Keep `onClose` out of the dependency array — parents often pass a new callback each\n // render (e.g. after each keystroke), which would re-run this effect constantly. Use a\n // ref so click-outside always calls the latest close handler.\n useEffect(() => {\n if (!editor) return;\n\n // Calculate position relative to selection\n const editorDOM = editor.options.element;\n const editorRect = editorDOM.getBoundingClientRect();\n const bodyRect = document.body.getBoundingClientRect();\n const { from } = editor.state.selection;\n const start = editor.view.coordsAtPos(from);\n\n let top = editorRect.top + Math.abs(bodyRect.top) + editorRect.height + 60;\n\n if (editorRect.y > containerRef.current.offsetHeight) {\n top = top - (containerRef.current.offsetHeight + editorRect.height) - 80;\n }\n\n setPosition({\n top: top,\n left: start.left,\n });\n\n const editorViewDom = editor.view.dom;\n\n const handleClickOutside = (e) => {\n if (containerRef.current && !containerRef.current.contains(e.target) && !editorViewDom.contains(e.target)) {\n onCloseRef.current();\n }\n };\n\n const timeoutId = setTimeout(() => {\n document.addEventListener('click', handleClickOutside);\n });\n\n return () => {\n clearTimeout(timeoutId);\n document.removeEventListener('click', handleClickOutside);\n };\n }, [editor]);\n\n const renderPopOver = (event, el) => setPopover({ anchorEl: event.currentTarget, el });\n\n const handleChange = (val) => {\n if (typeof val === 'string') {\n editor.chain().focus().insertContent(val).run();\n }\n };\n\n return (\n <>\n {ReactDOM.createPortal(\n <div\n ref={containerRef}\n className=\"insert-character-dialog\"\n data-toolbar-for={editor.instanceId}\n style={{\n visibility: position.top === 0 && position.left === 0 ? 'hidden' : 'initial',\n position: 'absolute',\n top: `${position.top}px`,\n left: `${position.left}px`,\n maxWidth: '500px',\n zIndex: 1000,\n }}\n >\n <div>\n <PureToolbar\n keyPadCharacterRef={opts.keyPadCharacterRef}\n setKeypadInteraction={opts.setKeypadInteraction}\n autoFocus\n noDecimal\n hideInput\n noLatexHandling\n hideDoneButtonBackground\n layoutForKeyPad={layoutForCharacters}\n additionalKeys={configToUse.characters.reduce((arr, n) => {\n arr = [\n ...arr,\n ...n.map((k) => ({\n name: get(k, 'name') || k,\n write: get(k, 'write') || k,\n label: get(k, 'label') || k,\n category: 'character',\n extraClass: 'character',\n extraProps: {\n ...(k.extraProps || {}),\n style: {\n ...(k.extraProps || {}).style,\n border: '1px solid #000',\n },\n },\n ...(configToUse.hasPreview\n ? {\n actions: {\n onMouseEnter: (ev) => renderPopOver(ev, k),\n onMouseLeave: closePopOver,\n },\n }\n : {}),\n })),\n ];\n\n return arr;\n }, [])}\n keypadMode=\"language\"\n onChange={handleChange}\n onDone={onClose}\n />\n </div>\n </div>,\n document.body,\n )}\n {popover &&\n ReactDOM.createPortal(\n <CustomPopper onClose={closePopOver} anchorEl={popover.anchorEl}>\n <div>{popover.el.label}</div>\n <div style={{ fontSize: 20, lineHeight: '20px' }}>{popover.el.description}</div>\n <div style={{ fontSize: 20, lineHeight: '20px' }}>{popover.el.unicode}</div>\n </CustomPopper>,\n document.body,\n )}\n </>\n );\n}\n\nCharacterPicker.propTypes = {\n editor: PropTypes.object,\n opts: PropTypes.object,\n onClose: PropTypes.func.isRequired,\n};\n\nexport { CharacterIcon };\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"CharacterPicker.js","names":["_react","_interopRequireWildcard","require","_reactDom","_interopRequireDefault","_propTypes","_get","_mathToolbar","_customPopper","_characterUtils","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","CharacterIcon","exports","_ref","letter","createElement","style","fontSize","lineHeight","propTypes","PropTypes","string","CharacterPicker","_ref2","_opts$characters","editor","opts","onClose","characters","containerRef","useRef","onCloseRef","_useState","useState","top","left","_useState2","_slicedToArray2","position","setPosition","_useState3","_useState4","popover","setPopover","current","configToUse","useMemo","spanishConfig","language","specialConfig","layoutForCharacters","reduce","obj","arr","columns","rows","closePopOver","useEffect","editorDOM","options","element","editorViewDom","view","dom","updatePosition","editorRect","getBoundingClientRect","from","state","selection","start","coordsAtPos","dialogHeight","offsetHeight","dialogWidth","offsetWidth","spaceBelow","window","innerHeight","bottom","margin","Math","max","min","innerWidth","frame","scheduleUpdate","requestAnimationFrame","addEventListener","handleClickOutside","contains","target","timeoutId","setTimeout","document","clearTimeout","cancelAnimationFrame","removeEventListener","renderPopOver","event","el","anchorEl","currentTarget","handleChange","val","chain","focus","insertContent","run","Fragment","ReactDOM","createPortal","ref","className","instanceId","visibility","concat","maxWidth","zIndex","PureToolbar","keyPadCharacterRef","setKeypadInteraction","autoFocus","noDecimal","hideInput","noLatexHandling","hideDoneButtonBackground","layoutForKeyPad","additionalKeys","_toConsumableArray2","map","k","name","write","label","category","extraClass","extraProps","border","hasPreview","actions","onMouseEnter","ev","onMouseLeave","keypadMode","onChange","onDone","body","description","unicode","object","func","isRequired"],"sources":["../../src/components/CharacterPicker.jsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport get from 'lodash-es/get';\n\nimport { PureToolbar } from '@pie-lib/math-toolbar';\n\nimport CustomPopper from './characters/custom-popper';\nimport { spanishConfig, specialConfig } from './characters/characterUtils';\n\nconst CharacterIcon = ({ letter }) => (\n <div\n style={{\n fontSize: '24px',\n lineHeight: '24px',\n }}\n >\n {letter}\n </div>\n);\n\nCharacterIcon.propTypes = {\n letter: PropTypes.string,\n};\n\nexport function CharacterPicker({ editor, opts, onClose }) {\n if (!opts?.characters?.length) {\n return null;\n }\n\n const containerRef = useRef(null);\n const onCloseRef = useRef(onClose);\n const [position, setPosition] = useState({ top: 0, left: 0 });\n const [popover, setPopover] = useState(null);\n\n onCloseRef.current = onClose;\n\n const configToUse = useMemo(() => {\n if (!opts) return spanishConfig;\n\n switch (true) {\n case opts.language === 'spanish':\n return spanishConfig;\n case opts.language === 'special':\n return specialConfig;\n default:\n return opts;\n }\n }, [opts]);\n\n const layoutForCharacters = useMemo(\n () =>\n configToUse.characters.reduce(\n (obj, arr) => {\n if (arr.length >= obj.columns) {\n obj.columns = arr.length;\n }\n\n return obj;\n },\n { rows: configToUse.characters.length, columns: 0 },\n ),\n [configToUse],\n );\n\n const closePopOver = () => setPopover(null);\n\n useEffect(\n () => () => {\n closePopOver();\n },\n [],\n );\n\n // Keep `onClose` out of the dependency array — parents often pass a new callback each\n // render (e.g. after each keystroke), which would re-run this effect constantly. Use a\n // ref so click-outside always calls the latest close handler.\n useEffect(() => {\n if (!editor) return;\n\n const editorDOM = editor.options.element;\n const editorViewDom = editor.view.dom;\n\n // Position is computed in viewport coordinates (the dialog uses position: fixed),\n // so coordsAtPos / getBoundingClientRect values can be used directly without\n // adding scroll offsets. The dialog is then clamped to the viewport so it does\n // not get cut off by fixed page headers/footers.\n const updatePosition = () => {\n if (!containerRef.current) return;\n\n const editorRect = editorDOM.getBoundingClientRect();\n const { from } = editor.state.selection;\n const start = editor.view.coordsAtPos(from);\n\n const dialogHeight = containerRef.current.offsetHeight;\n const dialogWidth = containerRef.current.offsetWidth;\n\n // prefer below the editor; flip above when there isn't room below.\n const spaceBelow = window.innerHeight - (editorRect.bottom + 60);\n let top =\n spaceBelow >= dialogHeight || editorRect.top < dialogHeight + 80\n ? editorRect.bottom + 60\n : editorRect.top - dialogHeight - 20;\n\n let left = start.left;\n\n const margin = 8;\n top = Math.max(margin, Math.min(top, window.innerHeight - dialogHeight - margin));\n left = Math.max(margin, Math.min(left, window.innerWidth - dialogWidth - margin));\n\n setPosition({ top, left });\n };\n\n updatePosition();\n\n let frame = null;\n const scheduleUpdate = () => {\n if (frame !== null) return;\n frame = requestAnimationFrame(() => {\n frame = null;\n updatePosition();\n });\n };\n\n window.addEventListener('scroll', scheduleUpdate, true);\n window.addEventListener('resize', scheduleUpdate);\n\n const handleClickOutside = (e) => {\n if (containerRef.current && !containerRef.current.contains(e.target) && !editorViewDom.contains(e.target)) {\n onCloseRef.current();\n }\n };\n\n const timeoutId = setTimeout(() => {\n document.addEventListener('click', handleClickOutside);\n });\n\n return () => {\n clearTimeout(timeoutId);\n if (frame !== null) cancelAnimationFrame(frame);\n window.removeEventListener('scroll', scheduleUpdate, true);\n window.removeEventListener('resize', scheduleUpdate);\n document.removeEventListener('click', handleClickOutside);\n };\n }, [editor]);\n\n const renderPopOver = (event, el) => setPopover({ anchorEl: event.currentTarget, el });\n\n const handleChange = (val) => {\n if (typeof val === 'string') {\n editor.chain().focus().insertContent(val).run();\n }\n };\n\n return (\n <>\n {ReactDOM.createPortal(\n <div\n ref={containerRef}\n className=\"insert-character-dialog\"\n data-toolbar-for={editor.instanceId}\n style={{\n visibility: position.top === 0 && position.left === 0 ? 'hidden' : 'initial',\n position: 'fixed',\n top: `${position.top}px`,\n left: `${position.left}px`,\n maxWidth: '500px',\n zIndex: 1000,\n }}\n >\n <div>\n <PureToolbar\n keyPadCharacterRef={opts.keyPadCharacterRef}\n setKeypadInteraction={opts.setKeypadInteraction}\n autoFocus\n noDecimal\n hideInput\n noLatexHandling\n hideDoneButtonBackground\n layoutForKeyPad={layoutForCharacters}\n additionalKeys={configToUse.characters.reduce((arr, n) => {\n arr = [\n ...arr,\n ...n.map((k) => ({\n name: get(k, 'name') || k,\n write: get(k, 'write') || k,\n label: get(k, 'label') || k,\n category: 'character',\n extraClass: 'character',\n extraProps: {\n ...(k.extraProps || {}),\n style: {\n ...(k.extraProps || {}).style,\n border: '1px solid #000',\n },\n },\n ...(configToUse.hasPreview\n ? {\n actions: {\n onMouseEnter: (ev) => renderPopOver(ev, k),\n onMouseLeave: closePopOver,\n },\n }\n : {}),\n })),\n ];\n\n return arr;\n }, [])}\n keypadMode=\"language\"\n onChange={handleChange}\n onDone={onClose}\n />\n </div>\n </div>,\n document.body,\n )}\n {popover &&\n ReactDOM.createPortal(\n <CustomPopper onClose={closePopOver} anchorEl={popover.anchorEl}>\n <div>{popover.el.label}</div>\n <div style={{ fontSize: 20, lineHeight: '20px' }}>{popover.el.description}</div>\n <div style={{ fontSize: 20, lineHeight: '20px' }}>{popover.el.unicode}</div>\n </CustomPopper>,\n document.body,\n )}\n </>\n );\n}\n\nCharacterPicker.propTypes = {\n editor: PropTypes.object,\n opts: PropTypes.object,\n onClose: PropTypes.func.isRequired,\n};\n\nexport { CharacterIcon };\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "2.1.2-next.
|
|
6
|
+
"version": "2.1.2-next.51+2e746851d",
|
|
7
7
|
"description": "",
|
|
8
8
|
"license": "ISC",
|
|
9
9
|
"main": "lib/index.js",
|
|
@@ -59,6 +59,6 @@
|
|
|
59
59
|
"peerDependencies": {
|
|
60
60
|
"react": "^18.2.0"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "2e746851d8b7966a72f67fac35db7334664fb383",
|
|
63
63
|
"scripts": {}
|
|
64
64
|
}
|
|
@@ -78,25 +78,52 @@ export function CharacterPicker({ editor, opts, onClose }) {
|
|
|
78
78
|
useEffect(() => {
|
|
79
79
|
if (!editor) return;
|
|
80
80
|
|
|
81
|
-
// Calculate position relative to selection
|
|
82
81
|
const editorDOM = editor.options.element;
|
|
83
|
-
const
|
|
84
|
-
const bodyRect = document.body.getBoundingClientRect();
|
|
85
|
-
const { from } = editor.state.selection;
|
|
86
|
-
const start = editor.view.coordsAtPos(from);
|
|
82
|
+
const editorViewDom = editor.view.dom;
|
|
87
83
|
|
|
88
|
-
|
|
84
|
+
// Position is computed in viewport coordinates (the dialog uses position: fixed),
|
|
85
|
+
// so coordsAtPos / getBoundingClientRect values can be used directly without
|
|
86
|
+
// adding scroll offsets. The dialog is then clamped to the viewport so it does
|
|
87
|
+
// not get cut off by fixed page headers/footers.
|
|
88
|
+
const updatePosition = () => {
|
|
89
|
+
if (!containerRef.current) return;
|
|
89
90
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
91
|
+
const editorRect = editorDOM.getBoundingClientRect();
|
|
92
|
+
const { from } = editor.state.selection;
|
|
93
|
+
const start = editor.view.coordsAtPos(from);
|
|
93
94
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
left: start.left,
|
|
97
|
-
});
|
|
95
|
+
const dialogHeight = containerRef.current.offsetHeight;
|
|
96
|
+
const dialogWidth = containerRef.current.offsetWidth;
|
|
98
97
|
|
|
99
|
-
|
|
98
|
+
// prefer below the editor; flip above when there isn't room below.
|
|
99
|
+
const spaceBelow = window.innerHeight - (editorRect.bottom + 60);
|
|
100
|
+
let top =
|
|
101
|
+
spaceBelow >= dialogHeight || editorRect.top < dialogHeight + 80
|
|
102
|
+
? editorRect.bottom + 60
|
|
103
|
+
: editorRect.top - dialogHeight - 20;
|
|
104
|
+
|
|
105
|
+
let left = start.left;
|
|
106
|
+
|
|
107
|
+
const margin = 8;
|
|
108
|
+
top = Math.max(margin, Math.min(top, window.innerHeight - dialogHeight - margin));
|
|
109
|
+
left = Math.max(margin, Math.min(left, window.innerWidth - dialogWidth - margin));
|
|
110
|
+
|
|
111
|
+
setPosition({ top, left });
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
updatePosition();
|
|
115
|
+
|
|
116
|
+
let frame = null;
|
|
117
|
+
const scheduleUpdate = () => {
|
|
118
|
+
if (frame !== null) return;
|
|
119
|
+
frame = requestAnimationFrame(() => {
|
|
120
|
+
frame = null;
|
|
121
|
+
updatePosition();
|
|
122
|
+
});
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
window.addEventListener('scroll', scheduleUpdate, true);
|
|
126
|
+
window.addEventListener('resize', scheduleUpdate);
|
|
100
127
|
|
|
101
128
|
const handleClickOutside = (e) => {
|
|
102
129
|
if (containerRef.current && !containerRef.current.contains(e.target) && !editorViewDom.contains(e.target)) {
|
|
@@ -110,6 +137,9 @@ export function CharacterPicker({ editor, opts, onClose }) {
|
|
|
110
137
|
|
|
111
138
|
return () => {
|
|
112
139
|
clearTimeout(timeoutId);
|
|
140
|
+
if (frame !== null) cancelAnimationFrame(frame);
|
|
141
|
+
window.removeEventListener('scroll', scheduleUpdate, true);
|
|
142
|
+
window.removeEventListener('resize', scheduleUpdate);
|
|
113
143
|
document.removeEventListener('click', handleClickOutside);
|
|
114
144
|
};
|
|
115
145
|
}, [editor]);
|
|
@@ -131,7 +161,7 @@ export function CharacterPicker({ editor, opts, onClose }) {
|
|
|
131
161
|
data-toolbar-for={editor.instanceId}
|
|
132
162
|
style={{
|
|
133
163
|
visibility: position.top === 0 && position.left === 0 ? 'hidden' : 'initial',
|
|
134
|
-
position: '
|
|
164
|
+
position: 'fixed',
|
|
135
165
|
top: `${position.top}px`,
|
|
136
166
|
left: `${position.left}px`,
|
|
137
167
|
maxWidth: '500px',
|
|
@@ -234,7 +234,7 @@ describe('CharacterPicker', () => {
|
|
|
234
234
|
};
|
|
235
235
|
const { container } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
|
|
236
236
|
const dialog = container.querySelector('.insert-character-dialog');
|
|
237
|
-
expect(dialog).toHaveStyle({ position: '
|
|
237
|
+
expect(dialog).toHaveStyle({ position: 'fixed' });
|
|
238
238
|
});
|
|
239
239
|
|
|
240
240
|
it('renders above other editor overlays with a high z-index', () => {
|