bun.lock

@@ -17,10 +17,19 @@
         "dexie": "^4.0.11",
         "flag-icons": "^7.3.2",
         "iterator-helpers-polyfill": "^3.0.1",
+        "rehype-dom-parse": "^5.0.2",
+        "rehype-dom-stringify": "^4.0.2",
+        "rehype-remark": "^10.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.1.1",
+        "remark-stringify": "^11.0.0",
         "sitemap": "^8.0.0",
         "solid-icons": "^1.1.0",
         "solid-js": "^1.9.4",
         "ts-pattern": "^5.6.2",
+        "unified": "^11.0.5",
+        "unist-util-find": "^3.0.0",
+        "unist-util-visit": "^5.0.0",
         "vinxi": "^0.5.3",
       },
       "devDependencies": {
@@ -348,6 +357,8 @@
 
     "@types/braces": ["@types/braces@3.0.5", "", {}, "sha512-SQFof9H+LXeWNz8wDe7oN5zu7ket0qwMu5vZubW4GCJ8Kkeh6nBWUz87+KTz/G3Kqsrp0j/W253XJb3KMEeg3w=="],
 
+    "@types/debug": ["@types/debug@4.1.12", "", { "dependencies": { "@types/ms": "*" } }, "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ=="],
+
     "@types/estree": ["@types/estree@1.0.6", "", {}, "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="],
 
     "@types/gensync": ["@types/gensync@1.0.4", "", {}, "sha512-C3YYeRQWp2fmq9OryX+FoDy8nXS6scQ7dPptD8LnFDAUNcKWJjXQKDNJD3HVm+kOUsXhTOkpi69vI4EuAr95bA=="],
@@ -360,6 +371,8 @@
 
     "@types/micromatch": ["@types/micromatch@4.0.9", "", { "dependencies": { "@types/braces": "*" } }, "sha512-7V+8ncr22h4UoYRLnLXSpTxjQrNUXtWHGeMPRJt1nULXI57G9bIcpyrHlmrQ7QK24EyyuXvYcSSWAM8GA9nqCg=="],
 
+    "@types/ms": ["@types/ms@2.1.0", "", {}, "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA=="],
+
     "@types/node": ["@types/node@22.13.1", "", { "dependencies": { "undici-types": "~6.20.0" } }, "sha512-jK8uzQlrvXqEU91UxiK5J7pKHyzgnI1Qnl0QDHIgVGuolJhRb9EEl28Cj9b3rGR8B2lhFCtvIm5os8lFnO/1Ew=="],
 
     "@types/resolve": ["@types/resolve@1.20.2", "", {}, "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="],
@@ -440,6 +453,8 @@
 
     "babel-preset-solid": ["babel-preset-solid@1.9.3", "", { "dependencies": { "babel-plugin-jsx-dom-expressions": "^0.39.3" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-jvlx5wDp8s+bEF9sGFw/84SInXOA51ttkUEroQziKMbxplXThVKt83qB6bDTa1HuLNatdU9FHpFOiQWs1tLQIg=="],
 
+    "bail": ["bail@2.0.2", "", {}, "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw=="],
+
     "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
 
     "bare-events": ["bare-events@2.5.4", "", {}, "sha512-+gFfDkR8pj4/TrWCGUGWmJIkBwuxPS5F+a5yWjOHQt2hHvNZd5YLzadjmDUtFmMM4y429bnKLa8bYBMHcYdnQA=="],
@@ -480,6 +495,8 @@
 
     "change-case": ["change-case@5.4.4", "", {}, "sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w=="],
 
+    "character-entities": ["character-entities@2.0.2", "", {}, "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ=="],
+
     "character-entities-html4": ["character-entities-html4@2.1.0", "", {}, "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA=="],
 
     "character-entities-legacy": ["character-entities-legacy@3.0.0", "", {}, "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ=="],
@@ -562,6 +579,8 @@
 
     "decimal.js": ["decimal.js@10.5.0", "", {}, "sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw=="],
 
+    "decode-named-character-reference": ["decode-named-character-reference@1.0.2", "", { "dependencies": { "character-entities": "^2.0.0" } }, "sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg=="],
+
     "dedent": ["dedent@1.5.3", "", { "peerDependencies": { "babel-plugin-macros": "^3.1.0" }, "optionalPeers": ["babel-plugin-macros"] }, "sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ=="],
 
     "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],
@@ -646,6 +665,8 @@
 
     "execa": ["execa@8.0.1", "", { "dependencies": { "cross-spawn": "^7.0.3", "get-stream": "^8.0.1", "human-signals": "^5.0.0", "is-stream": "^3.0.0", "merge-stream": "^2.0.0", "npm-run-path": "^5.1.0", "onetime": "^6.0.0", "signal-exit": "^4.1.0", "strip-final-newline": "^3.0.0" } }, "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg=="],
 
+    "extend": ["extend@3.0.2", "", {}, "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="],
+
     "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
 
     "fast-fifo": ["fast-fifo@1.3.2", "", {}, "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ=="],
@@ -710,10 +731,34 @@
 
     "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
 
+    "hast-util-embedded": ["hast-util-embedded@3.0.0", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-is-element": "^3.0.0" } }, "sha512-naH8sld4Pe2ep03qqULEtvYr7EjrLK2QHY8KJR6RJkTUjPGObe1vnx585uzem2hGra+s1q08DZZpfgDVYRbaXA=="],
+
+    "hast-util-from-dom": ["hast-util-from-dom@5.0.1", "", { "dependencies": { "@types/hast": "^3.0.0", "hastscript": "^9.0.0", "web-namespaces": "^2.0.0" } }, "sha512-N+LqofjR2zuzTjCPzyDUdSshy4Ma6li7p/c3pA78uTwzFgENbgbUrm2ugwsOdcjI1muO+o6Dgzp9p8WHtn/39Q=="],
+
+    "hast-util-has-property": ["hast-util-has-property@3.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-MNilsvEKLFpV604hwfhVStK0usFY/QmM5zX16bo7EjnAEGofr5YyI37kzopBlZJkHD4t887i+q/C8/tr5Q94cA=="],
+
+    "hast-util-is-body-ok-link": ["hast-util-is-body-ok-link@3.0.1", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-0qpnzOBLztXHbHQenVB8uNuxTnm/QBFUOmdOSsEn7GnBtyY07+ENTWVFBAnXd/zEgd9/SUG3lRY7hSIBWRgGpQ=="],
+
+    "hast-util-is-element": ["hast-util-is-element@3.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g=="],
+
+    "hast-util-minify-whitespace": ["hast-util-minify-whitespace@1.0.1", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-embedded": "^3.0.0", "hast-util-is-element": "^3.0.0", "hast-util-whitespace": "^3.0.0", "unist-util-is": "^6.0.0" } }, "sha512-L96fPOVpnclQE0xzdWb/D12VT5FabA7SnZOUMtL1DbXmYiHJMXZvFkIZfiMmTCNJHUeO2K9UYNXoVyfz+QHuOw=="],
+
+    "hast-util-parse-selector": ["hast-util-parse-selector@4.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A=="],
+
+    "hast-util-phrasing": ["hast-util-phrasing@3.0.1", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-embedded": "^3.0.0", "hast-util-has-property": "^3.0.0", "hast-util-is-body-ok-link": "^3.0.0", "hast-util-is-element": "^3.0.0" } }, "sha512-6h60VfI3uBQUxHqTyMymMZnEbNl1XmEGtOxxKYL7stY2o601COo62AWAYBQR9lZbYXYSBoxag8UpPRXK+9fqSQ=="],
+
+    "hast-util-to-dom": ["hast-util-to-dom@4.0.0", "", { "dependencies": { "@types/hast": "^3.0.0", "property-information": "^6.0.0", "web-namespaces": "^2.0.0" } }, "sha512-oW7RScutPE58LfjuVUNvvH0+6rB89mAm/pkDqD3bdj9g6xKQlMcuW6yBmovbpDKkvYI2apPKmHZMtc9KiZTywA=="],
+
     "hast-util-to-html": ["hast-util-to-html@9.0.4", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "ccount": "^2.0.0", "comma-separated-tokens": "^2.0.0", "hast-util-whitespace": "^3.0.0", "html-void-elements": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "property-information": "^6.0.0", "space-separated-tokens": "^2.0.0", "stringify-entities": "^4.0.0", "zwitch": "^2.0.4" } }, "sha512-wxQzXtdbhiwGAUKrnQJXlOPmHnEehzphwkK7aluUPQ+lEc1xefC8pblMgpp2w5ldBTEfveRIrADcrhGIWrlTDA=="],
 
+    "hast-util-to-mdast": ["hast-util-to-mdast@10.1.2", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "@ungap/structured-clone": "^1.0.0", "hast-util-phrasing": "^3.0.0", "hast-util-to-html": "^9.0.0", "hast-util-to-text": "^4.0.0", "hast-util-whitespace": "^3.0.0", "mdast-util-phrasing": "^4.0.0", "mdast-util-to-hast": "^13.0.0", "mdast-util-to-string": "^4.0.0", "rehype-minify-whitespace": "^6.0.0", "trim-trailing-lines": "^2.0.0", "unist-util-position": "^5.0.0", "unist-util-visit": "^5.0.0" } }, "sha512-FiCRI7NmOvM4y+f5w32jPRzcxDIz+PUqDwEqn1A+1q2cdp3B8Gx7aVrXORdOKjMNDQsD1ogOr896+0jJHW1EFQ=="],
+
+    "hast-util-to-text": ["hast-util-to-text@4.0.2", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "hast-util-is-element": "^3.0.0", "unist-util-find-after": "^5.0.0" } }, "sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A=="],
+
     "hast-util-whitespace": ["hast-util-whitespace@3.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw=="],
 
+    "hastscript": ["hastscript@9.0.0", "", { "dependencies": { "@types/hast": "^3.0.0", "comma-separated-tokens": "^2.0.0", "hast-util-parse-selector": "^4.0.0", "property-information": "^6.0.0", "space-separated-tokens": "^2.0.0" } }, "sha512-jzaLBGavEDKHrc5EfFImKN7nZKKBdSLIdGvCwDZ9TfzbF2ffXiov8CKE445L2Z1Ek2t/m4SKQ2j6Ipv7NyUolw=="],
+
     "hookable": ["hookable@5.5.3", "", {}, "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="],
 
     "html-encoding-sniffer": ["html-encoding-sniffer@4.0.0", "", { "dependencies": { "whatwg-encoding": "^3.1.1" } }, "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ=="],
@@ -774,6 +819,8 @@
 
     "is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="],
 
+    "is-plain-obj": ["is-plain-obj@4.1.0", "", {}, "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg=="],
+
     "is-potential-custom-element-name": ["is-potential-custom-element-name@1.0.1", "", {}, "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="],
 
     "is-reference": ["is-reference@1.2.1", "", { "dependencies": { "@types/estree": "*" } }, "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ=="],
@@ -828,6 +875,10 @@
 
     "lodash.isarguments": ["lodash.isarguments@3.1.0", "", {}, "sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg=="],
 
+    "lodash.iteratee": ["lodash.iteratee@4.7.0", "", {}, "sha512-yv3cSQZmfpbIKo4Yo45B1taEvxjNvcpF1CEOc0Y6dEyvhPIfEJE3twDwPgWTPQubcSgXyBwBKG6wpQvWMDOf6Q=="],
+
+    "longest-streak": ["longest-streak@3.1.0", "", {}, "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g=="],
+
     "lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
 
     "lz-string": ["lz-string@1.5.0", "", { "bin": { "lz-string": "bin/bin.js" } }, "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ=="],
@@ -836,8 +887,16 @@
 
     "magicast": ["magicast@0.2.11", "", { "dependencies": { "@babel/parser": "^7.22.16", "@babel/types": "^7.22.17", "recast": "^0.23.4" } }, "sha512-6saXbRDA1HMkqbsvHOU6HBjCVgZT460qheRkLhJQHWAbhXoWESI3Kn/dGGXyKs15FFKR85jsUqFx2sMK0wy/5g=="],
 
+    "mdast-util-from-markdown": ["mdast-util-from-markdown@2.0.2", "", { "dependencies": { "@types/mdast": "^4.0.0", "@types/unist": "^3.0.0", "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "mdast-util-to-string": "^4.0.0", "micromark": "^4.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-decode-string": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA=="],
+
+    "mdast-util-phrasing": ["mdast-util-phrasing@4.1.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "unist-util-is": "^6.0.0" } }, "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w=="],
+
     "mdast-util-to-hast": ["mdast-util-to-hast@13.2.0", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "@ungap/structured-clone": "^1.0.0", "devlop": "^1.0.0", "micromark-util-sanitize-uri": "^2.0.0", "trim-lines": "^3.0.0", "unist-util-position": "^5.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" } }, "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA=="],
 
+    "mdast-util-to-markdown": ["mdast-util-to-markdown@2.1.2", "", { "dependencies": { "@types/mdast": "^4.0.0", "@types/unist": "^3.0.0", "longest-streak": "^3.0.0", "mdast-util-phrasing": "^4.0.0", "mdast-util-to-string": "^4.0.0", "micromark-util-classify-character": "^2.0.0", "micromark-util-decode-string": "^2.0.0", "unist-util-visit": "^5.0.0", "zwitch": "^2.0.0" } }, "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA=="],
+
+    "mdast-util-to-string": ["mdast-util-to-string@4.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0" } }, "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg=="],
+
     "mdn-data": ["mdn-data@2.0.30", "", {}, "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="],
 
     "merge-anything": ["merge-anything@5.1.7", "", { "dependencies": { "is-what": "^4.1.8" } }, "sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ=="],
@@ -846,12 +905,44 @@
 
     "merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],
 
+    "micromark": ["micromark@4.0.1", "", { "dependencies": { "@types/debug": "^4.0.0", "debug": "^4.0.0", "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-core-commonmark": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-combine-extensions": "^2.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-encode": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-sanitize-uri": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-eBPdkcoCNvYcxQOAKAlceo5SNdzZWfF+FcSupREAzdAh9rRmE239CEQAiTwIgblwnoM8zzj35sZ5ZwvSEOF6Kw=="],
+
+    "micromark-core-commonmark": ["micromark-core-commonmark@2.0.2", "", { "dependencies": { "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-factory-destination": "^2.0.0", "micromark-factory-label": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-factory-title": "^2.0.0", "micromark-factory-whitespace": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-classify-character": "^2.0.0", "micromark-util-html-tag-name": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-FKjQKbxd1cibWMM1P9N+H8TwlgGgSkWZMmfuVucLCHaYqeSvJ0hFeHsIa65pA2nYbes0f8LDHPMrd9X7Ujxg9w=="],
+
+    "micromark-factory-destination": ["micromark-factory-destination@2.0.1", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA=="],
+
+    "micromark-factory-label": ["micromark-factory-label@2.0.1", "", { "dependencies": { "devlop": "^1.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg=="],
+
+    "micromark-factory-space": ["micromark-factory-space@2.0.1", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg=="],
+
+    "micromark-factory-title": ["micromark-factory-title@2.0.1", "", { "dependencies": { "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw=="],
+
+    "micromark-factory-whitespace": ["micromark-factory-whitespace@2.0.1", "", { "dependencies": { "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ=="],
+
     "micromark-util-character": ["micromark-util-character@2.1.1", "", { "dependencies": { "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q=="],
 
+    "micromark-util-chunked": ["micromark-util-chunked@2.0.1", "", { "dependencies": { "micromark-util-symbol": "^2.0.0" } }, "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA=="],
+
+    "micromark-util-classify-character": ["micromark-util-classify-character@2.0.1", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q=="],
+
+    "micromark-util-combine-extensions": ["micromark-util-combine-extensions@2.0.1", "", { "dependencies": { "micromark-util-chunked": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg=="],
+
+    "micromark-util-decode-numeric-character-reference": ["micromark-util-decode-numeric-character-reference@2.0.2", "", { "dependencies": { "micromark-util-symbol": "^2.0.0" } }, "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw=="],
+
+    "micromark-util-decode-string": ["micromark-util-decode-string@2.0.1", "", { "dependencies": { "decode-named-character-reference": "^1.0.0", "micromark-util-character": "^2.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-symbol": "^2.0.0" } }, "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ=="],
+
     "micromark-util-encode": ["micromark-util-encode@2.0.1", "", {}, "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw=="],
 
+    "micromark-util-html-tag-name": ["micromark-util-html-tag-name@2.0.1", "", {}, "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA=="],
+
+    "micromark-util-normalize-identifier": ["micromark-util-normalize-identifier@2.0.1", "", { "dependencies": { "micromark-util-symbol": "^2.0.0" } }, "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q=="],
+
+    "micromark-util-resolve-all": ["micromark-util-resolve-all@2.0.1", "", { "dependencies": { "micromark-util-types": "^2.0.0" } }, "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg=="],
+
     "micromark-util-sanitize-uri": ["micromark-util-sanitize-uri@2.0.1", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-encode": "^2.0.0", "micromark-util-symbol": "^2.0.0" } }, "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ=="],
 
+    "micromark-util-subtokenize": ["micromark-util-subtokenize@2.0.4", "", { "dependencies": { "devlop": "^1.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-N6hXjrin2GTJDe3MVjf5FuXpm12PGm80BrUAeub9XFXca8JZbP+oIwY4LJSVwFUCL1IPm/WwSVUN7goFHmSGGQ=="],
+
     "micromark-util-symbol": ["micromark-util-symbol@2.0.1", "", {}, "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q=="],
 
     "micromark-util-types": ["micromark-util-types@2.0.1", "", {}, "sha512-534m2WhVTddrcKVepwmVEVnUAmtrx9bfIjNoQHRqfnvdaHQiFytEhJoTgpWJvDEXCO5gLTQh3wYC1PgOJA4NSQ=="],
@@ -1004,6 +1095,20 @@
 
     "regex-utilities": ["regex-utilities@2.3.0", "", {}, "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng=="],
 
+    "rehype-dom-parse": ["rehype-dom-parse@5.0.2", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-from-dom": "^5.0.0", "unified": "^11.0.0" } }, "sha512-8CqP11KaqvtWsMqVEC2yM3cZWZsDNqqpr8nPvogjraLuh45stabgcpXadCAxu1n6JaUNJ/Xr3GIqXP7okbNqLg=="],
+
+    "rehype-dom-stringify": ["rehype-dom-stringify@4.0.2", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-to-dom": "^4.0.0", "unified": "^11.0.0" } }, "sha512-2HVFYbtmm5W3C2j8QsV9lcHdIMc2Yn/ytlPKcSC85/tRx2haZbU8V67Wxyh8STT38ZClvKlZ993Me/Hw8g88Aw=="],
+
+    "rehype-minify-whitespace": ["rehype-minify-whitespace@6.0.2", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-minify-whitespace": "^1.0.0" } }, "sha512-Zk0pyQ06A3Lyxhe9vGtOtzz3Z0+qZ5+7icZ/PL/2x1SHPbKao5oB/g/rlc6BCTajqBb33JcOe71Ye1oFsuYbnw=="],
+
+    "rehype-remark": ["rehype-remark@10.0.0", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "hast-util-to-mdast": "^10.0.0", "unified": "^11.0.0", "vfile": "^6.0.0" } }, "sha512-+aDXY/icqMFOafJQomVjxe3BAP7aR3lIsQ3GV6VIwpbCD2nvNFOXjGvotMe5p0Ny+Gt6L13DhEf/FjOOpTuUbQ=="],
+
+    "remark-parse": ["remark-parse@11.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-from-markdown": "^2.0.0", "micromark-util-types": "^2.0.0", "unified": "^11.0.0" } }, "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA=="],
+
+    "remark-rehype": ["remark-rehype@11.1.1", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "mdast-util-to-hast": "^13.0.0", "unified": "^11.0.0", "vfile": "^6.0.0" } }, "sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ=="],
+
+    "remark-stringify": ["remark-stringify@11.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-to-markdown": "^2.0.0", "unified": "^11.0.0" } }, "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw=="],
+
     "require-directory": ["require-directory@2.1.1", "", {}, "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="],
 
     "require-from-string": ["require-from-string@2.0.2", "", {}, "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="],
@@ -1150,6 +1255,10 @@
 
     "trim-lines": ["trim-lines@3.0.1", "", {}, "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg=="],
 
+    "trim-trailing-lines": ["trim-trailing-lines@2.1.0", "", {}, "sha512-5UR5Biq4VlVOtzqkm2AZlgvSlDJtME46uV0br0gENbwN4l5+mMKT4b9gJKqWtuL2zAIqajGJGuvbCbcAJUZqBg=="],
+
+    "trough": ["trough@2.2.0", "", {}, "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw=="],
+
     "ts-pattern": ["ts-pattern@5.6.2", "", {}, "sha512-d4IxJUXROL5NCa3amvMg6VQW2HVtZYmUTPfvVtO7zJWGYLJ+mry9v2OmYm+z67aniQoQ8/yFNadiEwtNS9qQiw=="],
 
     "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
@@ -1172,8 +1281,14 @@
 
     "unicorn-magic": ["unicorn-magic@0.3.0", "", {}, "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA=="],
 
+    "unified": ["unified@11.0.5", "", { "dependencies": { "@types/unist": "^3.0.0", "bail": "^2.0.0", "devlop": "^1.0.0", "extend": "^3.0.0", "is-plain-obj": "^4.0.0", "trough": "^2.0.0", "vfile": "^6.0.0" } }, "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA=="],
+
     "unimport": ["unimport@3.14.6", "", { "dependencies": { "@rollup/pluginutils": "^5.1.4", "acorn": "^8.14.0", "escape-string-regexp": "^5.0.0", "estree-walker": "^3.0.3", "fast-glob": "^3.3.3", "local-pkg": "^1.0.0", "magic-string": "^0.30.17", "mlly": "^1.7.4", "pathe": "^2.0.1", "picomatch": "^4.0.2", "pkg-types": "^1.3.0", "scule": "^1.3.0", "strip-literal": "^2.1.1", "unplugin": "^1.16.1" } }, "sha512-CYvbDaTT04Rh8bmD8jz3WPmHYZRG/NnvYVzwD6V1YAlvvKROlAeNDUBhkBGzNav2RKaeuXvlWYaa1V4Lfi/O0g=="],
 
+    "unist-util-find": ["unist-util-find@3.0.0", "", { "dependencies": { "@types/unist": "^3.0.0", "lodash.iteratee": "^4.0.0", "unist-util-visit": "^5.0.0" } }, "sha512-T7ZqS7immLjYyC4FCp2hDo3ksZ1v+qcbb+e5+iWxc2jONgHOLXPCpms1L8VV4hVxCXgWTxmBHDztuEZFVwC+Gg=="],
+
+    "unist-util-find-after": ["unist-util-find-after@5.0.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0" } }, "sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ=="],
+
     "unist-util-is": ["unist-util-is@6.0.0", "", { "dependencies": { "@types/unist": "^3.0.0" } }, "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw=="],
 
     "unist-util-position": ["unist-util-position@5.0.0", "", { "dependencies": { "@types/unist": "^3.0.0" } }, "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA=="],
@@ -1224,6 +1339,8 @@
 
     "w3c-xmlserializer": ["w3c-xmlserializer@5.0.0", "", { "dependencies": { "xml-name-validator": "^5.0.0" } }, "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA=="],
 
+    "web-namespaces": ["web-namespaces@2.0.1", "", {}, "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ=="],
+
     "webidl-conversions": ["webidl-conversions@7.0.0", "", {}, "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g=="],
 
     "webpack-virtual-modules": ["webpack-virtual-modules@0.6.2", "", {}, "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="],

package.json

@@ -19,10 +19,19 @@
     "dexie": "^4.0.11",
     "flag-icons": "^7.3.2",
     "iterator-helpers-polyfill": "^3.0.1",
+    "rehype-dom-parse": "^5.0.2",
+    "rehype-dom-stringify": "^4.0.2",
+    "rehype-remark": "^10.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.1",
+    "remark-stringify": "^11.0.0",
     "sitemap": "^8.0.0",
     "solid-icons": "^1.1.0",
     "solid-js": "^1.9.4",
     "ts-pattern": "^5.6.2",
+    "unified": "^11.0.5",
+    "unist-util-find": "^3.0.0",
+    "unist-util-visit": "^5.0.0",
     "vinxi": "^0.5.3"
   },
   "devDependencies": {

src/app.css

@@ -2,19 +2,19 @@
   --hue: 182.77deg;
   --accent-ofset: 180;
 
-  --primary-100: oklch(from var(--primary-500) .95 c h);
+  --primary-100: oklch(from var(--primary-500) .35 c h);
-  --primary-300: oklch(from var(--primary-500) .9 c h);
+  --primary-300: oklch(from var(--primary-500) .6 c h);
-  --primary-500: light-dark(oklch(.7503 0.117 var(--hue)), oklch(.8549 0.1149 var(--hue)));
+  --primary-500: light-dark(oklch(.7 0.117 var(--hue)), oklch(.7 0.1149 var(--hue)));
-  --primary-600: oklch(from var(--primary-500) .7 c h);
+  --primary-600: oklch(from var(--primary-500) .85 c h);
-  --primary-700: oklch(from var(--primary-500) .6 c h);
+  --primary-700: oklch(from var(--primary-500) .9 c h);
-  --primary-900: oklch(from var(--primary-500) .35 calc(c + .15) h);
+  --primary-900: oklch(from var(--primary-500) .95 calc(c + .15) h);
 
-  --secondary-100: oklch(from var(--primary-500) .95 c calc(h + var(--accent-ofset)));
+  --secondary-100: oklch(from var(--primary-500) .35 c calc(h + var(--accent-ofset)));
-  --secondary-300: oklch(from var(--primary-500) .9 c calc(h + var(--accent-ofset)));
+  --secondary-300: oklch(from var(--primary-500) .6 c calc(h + var(--accent-ofset)));
-  --secondary-500: oklch(from var(--primary-500) .85 c calc(h + var(--accent-ofset)));
+  --secondary-500: oklch(from var(--primary-500) .7 c calc(h + var(--accent-ofset)));
-  --secondary-600: oklch(from var(--primary-500) .7 c calc(h + var(--accent-ofset)));
+  --secondary-600: oklch(from var(--primary-500) .85 c calc(h + var(--accent-ofset)));
-  --secondary-700: oklch(from var(--primary-500) .6 c calc(h + var(--accent-ofset)));
+  --secondary-700: oklch(from var(--primary-500) .9 c calc(h + var(--accent-ofset)));
-  --secondary-900: oklch(from var(--primary-500) .35 calc(c + .15) calc(h + var(--accent-ofset)));
+  --secondary-900: oklch(from var(--primary-500) .95 calc(c + .15) calc(h + var(--accent-ofset)));
 
   --surface-300: light-dark(oklch(from var(--primary-500) .9 .02 h), oklch(from var(--primary-500) .2 .02 h));
   --surface-400: oklch(from var(--surface-300) calc(l + .025) c h);
@@ -162,6 +162,24 @@ del {
   color: oklch(from var(--fail) .1 .2 h);
 }
 
+blockquote {
+  position: relative;
+  padding: var(--padding-m);
+  padding-inline-start: calc(.5em + var(--padding-m));
+
+  &::before {
+    content: '';
+    display: block;
+
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    inline-size: .5em;
+    block-size: 100%;
+    background-color: var(--primary-600);
+  }
+}
+
 kbd {
   display: inline-block;
   background-color: var(--surface-600);
@@ -181,6 +199,11 @@ samp {
   display: inline-block;
 }
 
+[contenteditable][data-placeholder]:not(:focus):empty::before {
+  content: attr(data-placeholder);
+  color: oklch(from var(--text-2) l c h / .6)
+}
+
 @supports ((scrollbar-width: auto) and (scrollbar-width: auto)) {
   :root {
     scrollbar-color: var(--surface-300) transparent;

src/components/textarea/grammarChecker.ts

@@ -2,6 +2,8 @@
 
 const regex = /\w+\s+\w+/gi;
 export function defaultChecker(subject: string, lang: string): [number, number][] {
+    return [];
+
     return Array.from<RegExpExecArray>(subject.matchAll(regex)).filter(() => Math.random() >= .5).map(({ 0: match, index }) => {
         return [index, index + match.length - 1];
     });

src/components/textarea/spellChecker.ts

@@ -2,6 +2,8 @@
 
 const regex = /\w+/gi;
 export function defaultChecker(subject: string, lang: string): [number, number][] {
+    return [];
+
     return Array.from<RegExpExecArray>(subject.matchAll(regex)).filter(() => Math.random() >= .5).map(({ 0: match, index }) => {
         return [index, index + match.length - 1];
     });

src/components/textarea/textarea.module.css

@@ -1,5 +1,4 @@
 .textarea {
-    /* Make sure resizing works as intended */
     display: block;
     overflow: clip auto;
     resize: block;
@@ -9,16 +8,13 @@
     max-block-size: 50em;
 
     unicode-bidi: plaintext;
-    white-space-collapse: preserve;
-    text-wrap-mode: wrap;
-    overflow-wrap: break-word;
     cursor: text;
-}
 
-.spellingError {
+    & [data-marker="spelling"] {
         text-decoration-line: spelling-error;
-}
+    }
 
-.grammarError {
+    & [data-marker="grammar"] {
         text-decoration-line: grammar-error;
+    }
 }

src/components/textarea/textarea.tsx

@@ -1,109 +1,71 @@
-import { createEffect, createMemo, createSignal, untrack } from 'solid-js';
+import { createEffect, createMemo, untrack } from 'solid-js';
-import { decode } from '~/utilities';
 import { debounce } from '@solid-primitives/scheduled';
 import { createSelection } from '@solid-primitives/selection';
 import { defaultChecker as spellChecker } from './spellChecker';
 import { defaultChecker as grammarChecker } from './grammarChecker';
+import { createSource } from '~/features/source';
 import css from './textarea.module.css';
 
 interface TextareaProps {
     class?: string;
     value: string;
     lang: string;
-    oninput?: (event: InputEvent) => any;
+    placeholder?: string;
+    oninput?: (next: string) => any;
     spellChecker?: any;
     grammarChecker?: any;
 }
 
 export function Textarea(props: TextareaProps) {
     const [selection, setSelection] = createSelection();
-    const [value, setValue] = createSignal<string>(decode(props.value));
+
-    const [element, setElement] = createSignal<HTMLTextAreaElement>();
+    const source = createSource(props.value);
 
     createEffect(() => {
-        setValue(decode(props.value));
+        props.oninput?.(source.in);
     });
 
     createEffect(() => {
-        // For tracking
+        source.in = props.value;
-        value();
+    });
 
-        const root = untrack(() => element());
+    const onInput = debounce(() => {
         const [el, start, end] = untrack(() => selection());
 
-        if (el !== root) {
+        if (el) {
-            return;
+            source.out = el.innerHTML;
-        }
-
-        // TODO :: this needs to be calculated based on the modification done
-        const offset = 1;
-
-        setSelection([el, start + offset, end + offset]);
-    });
-
-    const resize = () => {
-        const el = element();
-
-        if (!el) {
-            return;
-        }
 
             el.style.height = `1px`;
-        el.style.height = `${2 + element()!.scrollHeight}px`;
+            el.style.height = `${2 + el.scrollHeight}px`;
-    };
 
-    const mutate = debounce(() => {
+            setSelection([el, start, end]);
-        props.oninput?.(new InputEvent('input', {
+        }
-            data: value(),
-        }))
     }, 300);
 
-    const onInput = (e: InputEvent) => {
+    const spellingErrors = createMemo(() => spellChecker(source.out, props.lang));
-        const target = e.target as HTMLElement;
+    const grammarErrors = createMemo(() => grammarChecker(source.out, props.lang));
 
-        console.log(e);
+    // const html = createMemo(() => {
-        console.log(target.innerText, target.textContent, target.innerHTML);
+    //     return source.out.split('').map((letter, index) => {
-    };
+    //         const spellingOpen = spellingErrors().some(([start]) => start === index) ? `<span class="${css.spellingError}">` : '';
+    //         const spellingClose = spellingErrors().some(([, end]) => end === index) ? `</span>` : '';
 
-    const onKeyUp = (e: KeyboardEvent) => {
+    //         const grammarOpen = grammarErrors().some(([start]) => start === index) ? `<span class="${css.grammarError}">` : '';
-        e.stopPropagation();
+    //         const grammarClose = grammarErrors().some(([, end]) => end === index) ? `</span>` : '';
-        e.preventDefault();
 
-        setValue(element()!.textContent!);
+    //         return `${grammarOpen}${spellingOpen}${letter}${spellingClose}${grammarClose}`;
-
+    //     }).join('');
-        resize();
+    // });
-        mutate();
-
-        return false;
-    };
-
-    // const spellingErrors = createMemo(() => spellChecker(value(), props.lang));
-    // const grammarErrors = createMemo(() => grammarChecker(value(), props.lang));
-    const spellingErrors = createMemo(() => []);
-    const grammarErrors = createMemo(() => []);
-
-    const html = createMemo(() => {
-        return value().split('').map((letter, index) => {
-            const spellingOpen = spellingErrors().some(([start]) => start === index) ? `<span class="${css.spellingError}">` : '';
-            const spellingClose = spellingErrors().some(([, end]) => end === index) ? `</span>` : '';
-
-            const grammarOpen = grammarErrors().some(([start]) => start === index) ? `<span class="${css.grammarError}">` : '';
-            const grammarClose = grammarErrors().some(([, end]) => end === index) ? `</span>` : '';
-
-            return `${grammarOpen}${spellingOpen}${letter}${spellingClose}${grammarClose}`;
-        }).join('');
-    });
 
     return <div
-        ref={setElement}
         class={`${css.textarea} ${props.class}`}
-        lang={props.lang}
+        contentEditable
         dir="auto"
+        lang={props.lang}
         oninput={onInput}
-        onkeyup={onKeyUp}
+        innerHTML={source.out}
+        data-placeholder={props.placeholder ?? ''}
         on:keydown={e => e.stopPropagation()}
         on:pointerdown={e => e.stopPropagation()}
-        contentEditable
-        innerHTML={html()}
     />;
 }

src/features/file/grid.tsx

@@ -48,9 +48,16 @@ export function Grid(props: { class?: string, rows: Entry[], locales: string[],
             id: lang,
             label: lang,
             renderer: ({ row, column, value, mutate }) => {
-                const entry = rows.value[row]!;
+                const lang = String(column);
+                const { key } = rows.value[row]!;
 
-                return <TextArea row={row} key={entry.key} lang={String(column)} value={value ?? ''} oninput={e => mutate(e.data ?? '')} />;
+                return <Textarea
+                    class={css.textarea}
+                    value={value ?? ''}
+                    lang={lang}
+                    oninput={next => mutate(next)}
+                    placeholder={`${key} in ${lang}`}
+                />
             },
         }))
     ]);
@@ -95,7 +102,7 @@ export function Grid(props: { class?: string, rows: Entry[], locales: string[],
     return <GridComp data={rows} columns={columns()} api={setApi} />;
 };
 
-const TextArea: Component<{ row: number, key: string, lang: string, value: string, oninput?: (event: InputEvent) => any }> = (props) => {
+const TextArea: Component<{ row: number, key: string, lang: string, value: string, oninput?: (next: string) => any }> = (props) => {
     return <Textarea
         class={css.textarea}
         value={props.value}

src/features/file/helpers.ts

@@ -7,7 +7,7 @@ interface Contents extends Map<string, Map<string, string>> { }
 
 export const read = (file: File): Promise<Map<string, string> | undefined> => {
     switch (file.type) {
-        case 'application/json': return json.load(file.stream())
+        case 'application/json': return json.load(file.stream());
 
         default: return Promise.resolve(undefined);
     }

src/features/file/parser/json.ts

@@ -1,3 +1,4 @@
+import { decode } from "~/utilities";
 
 export async function load(stream: ReadableStream<Uint8Array>): Promise<Map<string, string>> {
     return new Map(await Array.fromAsync(parse(stream), ({ key, value }) => [key, value]));
@@ -67,7 +68,7 @@ const states = {
                             expect: 'key',
                         });
 
-                        next.entry = { key: path.join('.'), value: token.value };
+                        next.entry = { key: path.join('.'), value: decode(token.value) };
 
                         return next
                     }

src/features/source/index.ts

@@ -1,6 +1,4 @@
 
 export type { Source } from './source';
 
-export { createParser as createHtmlParser } from './parser/html';
-export { createParser as createMarkdownParser } from './parser/markdown';
 export { createSource } from './source';

src/features/source/parser.ts

@@ -1,28 +0,0 @@
-enum Decoration {
-    None = 0,
-    Bold = 1,
-    Italic = 2,
-    Underline = 4,
-    StrikeThrough = 8,
-}
-
-interface TextNode {
-    type: 'text';
-    decoration: Decoration;
-    nodes: (string | Node)[];
-}
-
-interface HeaderNode {
-    type: 'header';
-    nodes: Node[];
-}
-
-type Node = TextNode | HeaderNode;
-
-export interface RichTextAST {
-    nodes: Node[];
-}
-
-export interface Parser {
-    parse(source: string): RichTextAST;
-}

src/features/source/parser/html.ts

@@ -1,9 +0,0 @@
-import { Parser } from "../parser";
-
-export function createParser(): Parser {
-    return {
-        parse(value) {
-            return {};
-        },
-    };
-}

src/features/source/parser/markdown.ts

@@ -1,80 +0,0 @@
-import { Parser } from "../parser";
-
-export function createParser(): Parser {
-    return {
-        parse(source) {
-            // console.log(source);
-
-            for (const token of tokenize(source)) {
-                console.log(token);
-            }
-
-            return {
-                nodes: [],
-            };
-        },
-    };
-}
-
-// const states = {
-//     none(): State {
-
-//     },
-// } as const;
-
-
-type Token = { start: number, length: number } & (
-    | { kind: 'bold' }
-    | { kind: 'italic' }
-    | { kind: 'underline' }
-    | { kind: 'strikethrough' }
-    | { kind: 'header', level: number }
-    | { kind: 'text', value: string }
-);
-function* tokenize(characters: string): Generator<Token, void, unknown> {
-    let buffer: string = '';
-    let clearBuffer = false;
-    let start = 0;
-    let i = 0;
-
-    for (const character of characters) {
-        if (buffer.length === 0) {
-            start = i;
-        }
-
-        buffer += character;
-        const length = buffer.length;
-
-        if (buffer === '**') {
-            yield { kind: 'bold', start, length };
-            clearBuffer = true;
-        }
-        else if (buffer === '') {
-            yield { kind: 'italic', start, length };
-            clearBuffer = true;
-        }
-        else if (buffer === ':') {
-            yield { kind: 'underline', start, length };
-            clearBuffer = true;
-        }
-        else if (buffer === ':') {
-            yield { kind: 'strikethrough', start, length };
-            clearBuffer = true;
-        }
-        else if (buffer.length > 1 && buffer.startsWith('#') && buffer.endsWith(' ')) {
-            yield { kind: 'header', start, length, level: buffer.length - 1 };
-            clearBuffer = true;
-        }
-        else if (buffer.length > 1 && buffer.startsWith('"') && buffer.endsWith('"')) {
-            yield { kind: 'text', start, length, value: buffer.slice(1, buffer.length - 1) };
-            clearBuffer = true;
-        }
-
-        if (clearBuffer) {
-            buffer = '';
-            clearBuffer = false;
-        }
-
-        i++;
-    }
-}

src/features/source/source.ts

@@ -1,31 +1,136 @@
-import { createEffect, createSignal, Signal } from "solid-js";
+import { onMount } from "solid-js";
-import { Parser, RichTextAST } from "./parser";
+import { createStore } from "solid-js/store";
+import { unified, Transformer } from 'unified'
+import { Node, Text, Element } from 'hast'
+import { visit } from "unist-util-visit";
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import remarkStringify from 'remark-stringify'
+import rehypeParse from 'rehype-dom-parse'
+import rehypeRemark from 'rehype-remark'
+import rehypeStringify from 'rehype-dom-stringify'
 
-export interface Source<TIn extends Parser, TOut extends Parser> {
+export interface Source {
-    readonly in: Signal<string>;
+    in: string;
-    readonly out: Signal<string>;
+    out: string;
 }
 
-export function createSource<TIn extends Parser, TOut extends Parser>(inParser: TIn, outParser: TOut, initalValue: string): Source<TIn, TOut> {
+// TODO :: make this configurable, right now we can only do markdown <--> html.
-    const [inValue, setIn] = createSignal<string>(initalValue);
+const inToOutProcessor = unified().use(remarkParse).use(remarkRehype).use(addErrors).use(rehypeStringify);
-    const [outValue, setOut] = createSignal<string>('');
+const outToInProcessor = unified().use(rehypeParse).use(clearErrors).use(rehypeRemark).use(remarkStringify, { bullet: '-' });
 
-    const [ast, setAst] = createSignal<RichTextAST>();
+export function createSource(initalValue: string): Source {
+    const [store, setStore] = createStore({ in: initalValue, out: '' });
 
-    createEffect(() => {
+    onMount(() => {
-        setAst(inParser.parse(inValue()));
+        setStore('out', String(inToOutProcessor.processSync(initalValue)));
-    });
-
-    createEffect(() => {
-        setAst(outParser.parse(outValue()));
     });
 
     return {
         get in() {
-            return [inValue, setIn] as Signal<string>;
+            return store.in;
         },
+        set in(next) {
+            setStore({
+                in: next,
+                out: String(inToOutProcessor.processSync(next)),
+            });
+        },
+
         get out() {
-            return [outValue, setOut] as Signal<string>;
+            return store.out;
+        },
+        set out(next) {
+            setStore({
+                in: String(outToInProcessor.processSync(next)).trim(),
+                out: next,
+            });
         },
     };
 }
+
+function addErrors(): Transformer {
+    const wrapInMarker = (text: Text, type: string): Element => ({
+        type: 'element',
+        tagName: 'span',
+        properties: {
+            dataMarker: type,
+        },
+        children: [
+            text
+        ]
+    });
+
+    return function (tree) {
+        visit(tree, n => n.type === 'text', (n, i, p: Element) => {
+            if (typeof i !== 'number' || p === undefined) {
+                return;
+            }
+
+            const errors = grammarChecker(n.value, 'en-GB');
+
+            if (errors.length === 0) {
+                return;
+            }
+
+            p.children.splice(i, 1, ...errors.map(([isHit, value]) => {
+                const textNode: Text = { type: 'text', value };
+
+                return isHit ? wrapInMarker(textNode, 'grammar') : textNode;
+            }))
+        });
+
+        visit(tree, n => n.type === 'text', (n, i, p: Element) => {
+            if (typeof i !== 'number' || p === undefined) {
+                return;
+            }
+
+            const errors = spellChecker(n.value, 'en-GB');
+
+            if (errors.length === 0) {
+                return;
+            }
+
+            p.children.splice(i, 1, ...errors.map(([isHit, value]) => {
+                const textNode: Text = { type: 'text', value };
+
+                return isHit ? wrapInMarker(textNode, 'spelling') : textNode;
+            }))
+        });
+    }
+}
+
+function clearErrors(): Transformer {
+    const test = (n: Node) => n.type === 'element' && Object.hasOwn(n.properties, 'dataMarker');
+
+    return function (tree) {
+        visit(tree, test, (n, i, p: Element) => {
+            if (typeof i !== 'number' || p === undefined) {
+                return;
+            }
+
+            p.children.splice(i, 1, ...n.children);
+        })
+    }
+}
+
+const spellChecker = checker(/\w+/gi);
+const grammarChecker = checker(/\w+\s+\w+/gi);
+
+function checker(regex: RegExp) {
+    return (subject: string, lang: string): (readonly [boolean, string])[] => {
+        let lastIndex = 0;
+
+        return Array.from<RegExpExecArray>(subject.matchAll(regex)).filter(() => Math.random() >= .5).flatMap<readonly [boolean, string]>(({ 0: match, index }) => {
+            const end = index + match.length;
+            const result = [
+                [false, subject.slice(lastIndex, index)],
+                [true, subject.slice(index, end)],
+            ] as const;
+
+            lastIndex = end;
+
+            return result;
+        }).concat([[false, subject.slice(lastIndex, subject.length)]]);
+    }
+}

src/routes/(editor)/edit.tsx

@@ -390,41 +390,7 @@ const Content: Component<{ directory: FileSystemDirectoryHandle, api?: Setter<Gr
 
     const copyKey = createCommand('page.edit.command.copyKey', (key: string) => writeClipboard(key));
 
-    const tempVal = `
+    return <Grid rows={rows()} locales={locales()} api={setApi}>{
-# Header
-
-this is **a string** that contains bolded text
-
-this is *a string* that contains italicized text
-
-> Dorothy followed her through many of the beautiful rooms in her castle.
-
-> Dorothy followed her through many of the beautiful rooms in her castle.
->
->> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
-
-> #### The quarterly results look great!
->
-> - Revenue was off the chart.
-> - Profits were higher than ever.
->
->  *Everything* is going according to **plan**.
-
-- First item
-- Second item
-- Third item
-- Fourth item
-    `;
-    const { out: [html, update] } = createSource(createMarkdownParser(), createHtmlParser(), tempVal);
-
-    createEffect(() => {
-        console.log(html());
-    });
-
-    return <>
-        <div contentEditable innerHTML={html()} />
-
-        <Grid rows={rows()} locales={locales()} api={setApi}>{
         key => {
             return <Context.Root commands={[copyKey.with(key)]}>
                 <Context.Menu>{
@@ -434,8 +400,7 @@ this is *a string* that contains italicized text
                 <Context.Handle>{key.split('.').at(-1)!}</Context.Handle>
             </Context.Root>;
         }
-        }</Grid>
+    }</Grid>;
-    </>;
 };
 
 const Blank: Component<{ open: CommandType }> = (props) => {

src/routes/(editor)/experimental.tsx

@@ -16,6 +16,7 @@ export default function Experimental(props: ParentProps) {
       <Menu.Item command={goTo.withLabel('table').with('table')} />
       <Menu.Item command={goTo.withLabel('grid').with('grid')} />
       <Menu.Item command={goTo.withLabel('context-menu').with('context-menu')} />
+      <Menu.Item command={goTo.withLabel('formatter').with('formatter')} />
     </Menu.Root>
 
     {props.children}

src/routes/(editor)/experimental/formatter.module.css

@@ -0,0 +1,21 @@
+.root {
+    margin: 1em;
+    padding: .5em;
+    gap: 1em;
+    display: grid;
+
+    grid: 100% / repeat(2, minmax(0, 1fr));
+
+    inline-size: calc(100% - 2em);
+    block-size: calc(100% - 2em);
+
+    place-content: start;
+    background-color: var(--surface-500);
+    border-radius: var(--radii-xl);
+
+    & > * {
+        overflow: auto;
+        padding: .5em;
+        background-color: transparent;
+    }
+}

src/routes/(editor)/experimental/formatter.tsx

@@ -0,0 +1,43 @@
+import { createSignal } from "solid-js";
+import { debounce } from "@solid-primitives/scheduled";
+import { Textarea } from "~/components/textarea";
+import css from './formatter.module.css';
+
+const tempVal = `
+# Header
+
+this is **a string** that contains bolded text
+
+this is *a string* that contains italicized text
+
+> Dorothy followed her through many of the beautiful rooms in her castle.
+
+> Dorothy followed her through many of the beautiful rooms in her castle.
+>
+> > The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
+
+> #### The quarterly results look great!
+>
+> - Revenue was off the chart.
+> - Profits were higher than ever.
+>
+> *Everything* is going according to **plan**.
+
+- First item
+- Second item
+- Third item
+- Fourth item
+`;
+
+export default function Formatter(props: {}) {
+    const [value, setValue] = createSignal(tempVal);
+
+    const onInput = debounce((e: InputEvent) => {
+        setValue((e.target! as HTMLTextAreaElement).value);
+    }, 300);
+
+    return <div class={css.root}>
+        <textarea oninput={onInput}>{value()}</textarea>
+        <Textarea value={value()} oninput={setValue} lang="en-GB" />
+    </div>;
+}

src/utilities.ts

@@ -12,7 +12,7 @@ export const splitAt = (subject: string, index: number): readonly [string, strin
 export function* gen__split_by_filter(subject: string, filter: string): Generator<readonly [boolean, string], void, unknown> {
     let lastIndex = 0;
 
-    for (const { 0: match, index, ...rest } of subject.matchAll(new RegExp(filter, 'gmi'))) {
+    for (const { 0: match, index } of subject.matchAll(new RegExp(filter, 'gmi'))) {
         const end = index + match.length;
 
         yield [false, subject.slice(lastIndex, index)];