Add right click to clear code pane width
MODIFY
website/src/playground/components/CodePane.tsx
website/src/playground/components/CodePane.tsx
@@ -38,10 +38,10 @@ export default function CodePane({ children }: Props) {
const distance = Math.abs(containerX - mouseX);
if (isResizing) {
+ event.preventDefault();
const width = mouseX - container.offsetLeft;
setWidth(width);
codePaneSizeStore.set(width);
- event.preventDefault();
}
if (distance <= RESIZE_TOLERANCE) {
@@ -51,6 +51,16 @@ export default function CodePane({ children }: Props) {
}
}
+ function onContextMenu(e: MouseEvent) {
+ if (isResizing || canResize) {
+ e.preventDefault();
+ codePaneSizeStore.clear();
+ setWidth(undefined);
+ setCanResize(false);
+ setIsResizing(false);
+ }
+ }
+
function onMouseDown() {
if (canResize) {
setIsResizing(true);
@@ -61,11 +71,13 @@ export default function CodePane({ children }: Props) {
setIsResizing(false);
}
+ window.addEventListener("contextmenu", onContextMenu);
window.addEventListener("mousedown", onMouseDown);
window.addEventListener("mouseup", onMouseUp);
window.addEventListener("mousemove", onMouseMove);
return () => {
+ window.removeEventListener("contextmenu", onContextMenu);
window.removeEventListener("mousedown", onMouseDown);
window.removeEventListener("mouseup", onMouseUp);
window.removeEventListener("mousemove", onMouseMove);

MODIFY
website/src/playground/utils.ts
website/src/playground/utils.ts
@@ -74,6 +74,7 @@ export function createLocalStorage(name: string): {
get: () => undefined | string;
getNumber: () => undefined | number;
getBoolean: () => boolean;
+ clear: () => void;
} {
const key = `playground:${name}`;
return {
@@ -94,6 +95,9 @@ export function createLocalStorage(name: string): {
get: () => {
return localStorage.getItem(key) || undefined;
},
+ clear: () => {
+ localStorage.removeItem(key);
+ },
};
}

Add right click to clear code pane width