Brian Hung BrianHung
💻
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const [scrollPos, onScroll] = useScrollPos('top'); | |
| return ( | |
| <GridList | |
| items={list.items} | |
| className={cn( | |
| 'grow overflow-y-auto flex flex-col gap-px my-2', | |
| 'border-y border-border data-[scroll-pos="top"]:border-t-transparent data-[scroll-pos="bottom"]:border-b-transparent transition duration-100' | |
| )} | |
| aria-label="FileList sidebar" |
BrianHung
/ DurableObjectStorageAdapter.ts
Created
July 26, 2024 08:46
automerge durable object storage
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * This module provides a storage adapter for Durable Objects. | |
| * | |
| * https://github.com/partykit/partykit/blame/main/packages/y-partykit/src/storage.ts | |
| * @packageDocumentation | |
| */ | |
| import { | |
| Chunk, | |
| StorageAdapterInterface, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export function debounceAutocompletion( | |
| language: Language, | |
| source: CompletionSource, | |
| wait: number = 500, | |
| ) { | |
| let currContext: CompletionContext; | |
| let cancel = () => {}; // no-op | |
| return [ | |
| language.data.of({ | |
| autocomplete: (context: CompletionContext) => { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Copy of https://github.com/craftzdog/react-codemirror-runmode | |
| // with support for custom languages | |
| import React from "react"; | |
| import { Parser } from "@lezer/common"; | |
| import { Highlighter } from "@lezer/highlight"; | |
| import { StyleModule } from "style-mod"; | |
| import highlight from "./highlight"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ::-webkit-scrollbar { | |
| height: 1rem; | |
| width: 0.5rem; | |
| } | |
| ::-webkit-scrollbar:horizontal { | |
| height: 0.5rem; | |
| width: 1rem; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| const ResizableDiv = function ResizableDiv(props: { onChange: (dx: number) => void }) { | |
| const { onChange = () => null, ...otherProps } = props; | |
| const resizeRef = React.useRef<HTMLElement | null>(null); | |
| const [resizing, setResizing] = React.useState(false); | |
| const handlePointerDown = React.useCallback( | |
| (event: React.PointerEvent) => { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export function setGlobalRootColor() { | |
| try { | |
| const rootElement = document.documentElement; | |
| const classList = rootElement.classList; | |
| classList.remove('light', 'dark'); | |
| const themePreference = localStorage.getItem('theme'); | |
| if (themePreference === 'system' || (!themePreference && true)) { | |
| const prefersDark = '(prefers-color-scheme: dark)'; | |
| const darkModeMediaQuery = window.matchMedia(prefersDark); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete'; | |
| import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands'; | |
| import { | |
| bracketMatching, | |
| defaultHighlightStyle, | |
| foldGutter, | |
| foldKeymap, | |
| indentOnInput, | |
| LanguageDescription, | |
| syntaxHighlighting, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 0); | |
| background-size: 16px 16px; | |
| } |
BrianHung
/ prosemirror-history-combine-commands.ts
Last active
February 6, 2024 08:08
— forked from anarchang/prosemirror-history-combine-commands.ts
Combine commands on the ProseMirror undo stack
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Given two commands (commandA and commandB), returns a new command that when applied | |
| * to a ProseMirror state that uses the prosemirror-history plugin applies commandA and | |
| * then commandB so that both commands are undone with a single undo action. | |
| **/ | |
| const combineCommands = | |
| (commandA: Command, commandB: Command) => | |
| (state: EditorState, dispatch?: (tr: Transaction) => void): boolean => { | |
| return commandA(state, (transactionA: Transaction) => { | |
| const { state: stateA } = state.applyTransaction(transactionA) |
NewerOlder