Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Draft] Prevent link anchor when selecting text #41994

Open
wants to merge 4 commits into
base: next
Choose a base branch
from
Open

[Draft] Prevent link anchor when selecting text #41994

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a7d57bb
prevent linking when range is selected
alexfauquette May 16, 2024
70e463b
proptype fix
alexfauquette May 16, 2024
7c8de6b
Use draggable attribute instead of poorly supported CSS
alexfauquette May 16, 2024
3ff6ab3
fix lint
alexfauquette May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/src/modules/components/DemoToolbar.js
View file
Open in desktop
Expand Up @@ -717,7 +717,7 @@ export default function DemoToolbar(props) {
DemoToolbar.propTypes = {
codeOpen: PropTypes.bool.isRequired,
codeVariant: PropTypes.string.isRequired,
copyButtonOnClick: PropTypes.object.isRequired,
copyButtonOnClick: PropTypes.func.isRequired,
copyIcon: PropTypes.object.isRequired,
demo: PropTypes.object.isRequired,
demoData: PropTypes.object.isRequired,
Expand Down
30 changes: 30 additions & 0 deletions packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx
View file
Open in desktop
Expand Up @@ -136,6 +136,8 @@ const Root = styled('div')(
position: 'relative',
display: 'flex',
alignItems: 'center',
userSelect: 'text',
// WebkitUserDrag: 'none',
},
'& .anchor-icon': {
// To prevent the link to get the focus.
Expand Down Expand Up @@ -802,6 +804,18 @@ const Root = styled('div')(
}),
);

function handleClick(event: Event) {
const selection = document.getSelection();

if (selection === null) {
return;
}
const isRangeSelection = selection.type === 'Range';

if (isRangeSelection) {
event.preventDefault();
}
}
export interface MarkdownElementProps {
className?: string;
renderedMarkdown?: string;
Expand All @@ -810,6 +824,22 @@ export interface MarkdownElementProps {
export const MarkdownElement = React.forwardRef<HTMLDivElement, MarkdownElementProps>(
function MarkdownElement(props, ref) {
const { className, renderedMarkdown, ...other } = props;

React.useEffect(() => {
const elements = document.getElementsByClassName('title-link-to-anchor');

for (let i = 0; i < elements.length; i += 1) {
elements[i].setAttribute('draggable', 'false');
elements[i].addEventListener('click', handleClick, false);
}

return () => {
for (let i = 0; i < elements.length; i += 1) {
elements[i].removeEventListener('click', handleClick);
}
};
}, []);

const more: React.ComponentProps<typeof Root> = {};

if (typeof renderedMarkdown === 'string') {
Expand Down