zaydek

// CodexRenderer can render classes (default), attributes,
// or components.
<CodexRenderer
	render={{
		h1: "font-semibold text-3xl leading-tight text-black antialiased",
		h2: "font-semibold text-2xl leading-tight text-black antialiased",
		h3: "font-semibold text-xl  leading-tight text-black antialiased",
		h4: "font-semibold text-xl  leading-tight text-black antialiased",
		h5: "font-semibold text-xl  leading-tight text-black antialiased",
		h6: "font-semibold text-xl  leading-tight text-black antialiased",

zaydek

Optimizations 😀

Lightly parse state.data; should end up with:

• <Any>
  • <Blockquote>
  • <Preformatted>
  • <AnyList>
  • parseAny
    • <Header>
    • <Paragraph>

zaydek

What if Tailwind classes were parsed?

This spec explores what a structured Tailwind CSS resolver could work based on informed experience.

Preface

A couple months ago, I authored something I called stylex.js — the idea was to provide React a parser/resolver for inline styles using a declarative API. Eventually, I stopped working on this project for favor of Tailwind CSS. Despite enjoying Tailwind CSS, I have incredibly fond memories of working in stylex.js because it afforded me the ability to be declarative and conditional with design.

Here is in essence how stylex.js worked. Given the following code:

zaydek

---

---

.

1. Implementing a custom spell checker. That's done by companies like Grammarly and WebSpellChecker. They use spellcheck=false to disable the native spell checker globally for the entire editing host and then render some squiggles by adding s do the DOM. The problem here is that you cannot easily integrate your spell checking engine with all (or most) rich text editor at once. Most modern rich text editors have an architecture which does not allow any other JS app to modify that editor's DOM. Modifying their DOM directly either have no effect (the editor reverts that) or crashes that editor. This is a case with Grammarly which had to be disabled in Medium, CKEditor 5, Draft, etc. A solution to that would be if we were able to render squiggles or any other text decoration without actually touching the DOM. I call it "range decoration". I'm not sure how (and if) this can be implemented by browsers – i.e. how to make ranges controlled via CSS. Theoretically, this could work similarly to ::sel

zaydek

import React from "react"
import ReactDOM from "react-dom"

// https://stackoverflow.com/a/33292942
function timeout(timeoutMs) {
	return new Promise(resolve => setTimeout(resolve, timeoutMs))
}

;(async () => {
	const root = document.getElementById("root")

zaydek

// import App from "EditorApp/EditorApp"
// import React from "react"
// import ReactDOM from "react-dom"
//
// import "debug.css"
// import "stylesheets/prism/custom.css"
// import "stylesheets/tailwind/color-vars.css"
// import "stylesheets/tailwind/em-context.css"
// import "stylesheets/tailwind/tailwind.generated.css"
//

zaydek

import areEqualJSON from "lib/areEqualJSON"
import omitKey from "lib/omitKey"
import React from "react"
import toArray from "lib/toArray"
import { typeMap } from "./typeMaps"

// Converts intermediary elements to React elements.
function toReactElements(elements) {
	const reactElements = []
	for (const each of toArray(elements)) {

zaydek

import useMethods from "use-methods"

// NOTE: The following imports are intentionally unsorted.
import {
  lock,
  unlock,
} from "./lock"

import {
  focus,

zaydek

.prose {
  color: #4a5568;
  max-width: 65ch;
}
.prose [class~=lead] {
  color: #4a5568;
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;

zaydek

Hello, world!