Skip to content

Instantly share code, notes, and snippets.

export const COMM = /^\/\/([^\n]*)(?:\n|$)/s
export const HEAD = /^(#{1,6}) ([^\n]*)(?:\n|$)/s
export const CODE = /^```([^\n]*?)(|\n|\n.*?\n)```(?:\n|$)/s
export const BLOC = /^((?:>(?: [^\n]*)?(?:\n|$))+)/s
export const UNNU = /^((?:\t*[*+\-•] [^\n]*(?:\n|$))+)/s
export const NUMB = /^((?:\t*\d+[.)] [^\n]*(?:\n|$))+)/s
export const BREA = /^(\*\*\*|---)(?:\n|$)/s
// Branch A:
//
// :::::::::::::: <- window.scrollY
// +------------+
// |+----------+| <- topBuffer
// || node || <- y
// |+----------+|
// || |
// +------------+
//
import React from "react"
function NoteSidebar({ state, setEditorState, ...props }) {
const isActiveID = id => ({
color: id === state.activeID ? "hsl(var(--blue-a200))" : null,
fontWeight: id === state.activeID ? "600" : null
})
return (
<aside className="m-b:-1">
<div className="m-b:1" style={{ marginTop: -1 * (16 + 18 * 1.5) }}>
::placeholder {
color: hsl(var(--blue-a200));
opacity: 1;
}
:focus::placeholder{
color: transparent;
opacity: 0;
}
// DELETEME
const activeID = "lorem-ipsum-dolor-sit-amet"
// DELETEME
const tableOfContents = [
{
h1: "Introduction",
id: "introduction",
h2: [
{ h2: "Lorem ipsum dolor sit amet", id: "lorem-ipsum-dolor-sit-amet" },
@zaydek-old
zaydek-old / Unicode.js
Last active October 5, 2019 21:21
`isAlphanum` exports is `isAlphanum` which is a polyfill for the regex pattern `\p{Alphabetic}`, which Firefox doesn’t support
const ASCII_RANGE = [0x00000, 0x00007F]
const U_BMP_RANGE = [0x00080, 0x00FFFF] // Unicode Basic Multilingual Plane.
const U_AST_RANGE = [0x10000, 0x10FFFF] // Unicode Astral Plane.
// Based on xregexp.com/v/3.2.0/xregexp-all.js.
const UnicodeBMPRe = new RegExp("^[A-Za-z\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0345\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0561-\u0587\u05B0-\u05BD\u05BF\u05C1\u05C2\u05C4\u05C5\u05C7\u05D0-\u05EA\u05F0-\u05F2\u0610-\u061A\u0620-\u0657\u0659-\u065F\u066E-\u06D3\u06D5-\u06DC\u06E1-\u06E8\u06ED-\u06EF\u06FA-\u06FC\u06FF\u0710-\u073F\u074D-\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0817\u081A-\u082C\u0840-\u0858\u08A0-\u08B4\u08B6-\u08BD\u08D4-\u08DF\u08E3-\u08E9\u08F0-\u093B\u093D-\u094C\u094E-\u0950\u0955-\u0963\u0971-\u0983\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD-\u09C4\u09C7\u09C8\u09CB\u09CC\u09CE
// Based on xregexp.com/v/3.2.0/xregexp-all.js.
const UNICODE_BMP_RE = "A-Za-z\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0345\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0560-\u0588\u05B0-\u05BD\u05BF\u05C1\u05C2\u05C4\u05C5\u05C7\u05D0-\u05EA\u05EF-\u05F2\u0610-\u061A\u0620-\u0657\u0659-\u065F\u066E-\u06D3\u06D5-\u06DC\u06E1-\u06E8\u06ED-\u06EF\u06FA-\u06FC\u06FF\u0710-\u073F\u074D-\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0817\u081A-\u082C\u0840-\u0858\u0860-\u086A\u08A0-\u08B4\u08B6-\u08BD\u08D4-\u08DF\u08E3-\u08E9\u08F0-\u093B\u093D-\u094C\u094E-\u0950\u0955-\u0963\u0971-\u0983\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD-\u09C4\u09C7\u09C8\u09CB\u09CC\u09CE\u09D7\u09DC\u09DD\u09DF-\u09E3\u09F0\u09F1\u09FC\u0A01-\u0A03\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A3E-\u0A42\u0A47\u0A48\u0A4B\
// Minimums and maximums for the BMP (basic multilingual
// plane) and astral plane Unicode ranges.
const ASCII_MIN = 0x000000
const ASCII_MAX = 0x00007F
const UNICODE_BMP_MIN = 0x000000
const UNICODE_BMP_MAX = 0x00FFFF
const UNICODE_AST_MIN = 0x010000
const UNICODE_AST_MAX = 0x10FFFF
// Based on xregexp.com/v/3.2.0/xregexp-all.js.
// // See reactjs.org/docs/error-boundaries for reference.
// class ErrorBoundary extends React.Component {
// static getDerivedStateFromError(error) {
// // No op.
// return {}
// }
// componentDidCatch(error, errorInfo) {
// // No op.
// }
// // "linear-gradient(transparent 0.65em, hsl(var(--blue-a200)) 0.65em, hsl(var(--blue-a200)) 0.72em, transparent 0.72em)"
// function Strikethrough(props) {
// return (
// <strike style={boundsBackground}>
// <Markdown syntax="~" />
// <span style={{ textDecoration: "line-through" }}>
// {props.children}
// </span>
// <Markdown syntax="~" />