tsondb 0.5.15 → 0.5.16

package/dist/src/node/index.js

@@ -9,7 +9,7 @@ import { getEntities } from "./schema/Schema.js";
 import { createServer } from "./server/index.js";
 import { countErrors, getErrorMessageForDisplay, wrapErrorsIfAny } from "./utils/error.js";
 import { formatInstance, getInstancesByEntityName } from "./utils/instances.js";
-const debug = Debug("tsondb:schema");
+const debug = Debug("tsondb:jsapi");
 const prepareFolders = async (dataRootPath, entities) => {
     await mkdir(dataRootPath, { recursive: true });
     for (const entity of entities) {
@@ -58,7 +58,9 @@ export const generateAndValidate = async (schema, outputs, dataRootPath, validat
 export const serve = async (schema, dataRootPath, serverOptions) => {
     const entities = getEntities(schema);
     await prepareFolders(dataRootPath, entities);
+    debug("prepared folders");
     const instancesByEntityName = await getInstancesByEntityName(dataRootPath, entities);
+    debug("loaded instances");
     await createServer(schema, dataRootPath, instancesByEntityName, serverOptions);
 };
 export const generateValidateAndServe = async (schema, outputs, dataRootPath, serverOptions, validationOptions) => {

package/dist/src/node/server/init.js

@@ -1,8 +1,10 @@
+import Debug from "debug";
 import { simpleGit } from "simple-git";
 import { isEntityDecl } from "../schema/declarations/EntityDecl.js";
 import { resolveTypeArgumentsInDecls } from "../schema/index.js";
 import { attachGitStatusToInstancesByEntityName, getInstancesByEntityName, } from "../utils/instances.js";
 import { getReferencesToInstances } from "../utils/references.js";
+const debug = Debug("tsondb:server:init");
 const getGit = async (dataRootPath) => {
     const git = simpleGit({ baseDir: dataRootPath });
     if (await git.checkIsRepo()) {
@@ -22,12 +24,16 @@ const getGit = async (dataRootPath) => {
 export const init = async (schema, dataRootPath, instancesByEntityName) => {
     const { git, root: gitRoot, status: gitStatus } = await getGit(dataRootPath);
     const declarations = resolveTypeArgumentsInDecls(schema.declarations);
+    debug("resolved type arguments in declarations");
     const entities = declarations.filter(isEntityDecl);
+    debug("found %d entities in declarations", entities.length);
     const entitiesByName = Object.fromEntries(entities.map(entity => [entity.name, entity]));
     const instancesByEntityNameInMemory = Object.assign({}, instancesByEntityName);
     const referencesToInstances = getReferencesToInstances(instancesByEntityName, entitiesByName);
+    debug("created references cache");
     if (gitStatus) {
         attachGitStatusToInstancesByEntityName(instancesByEntityName, dataRootPath, gitRoot, gitStatus);
+        debug("retrieved git status to instances");
     }
     const getInstanceById = id => {
         for (const entityName in instancesByEntityNameInMemory) {

package/dist/src/node/utils/instances.js

@@ -2,7 +2,7 @@ import { readdir, readFile } from "node:fs/promises";
 import { basename, extname, join } from "node:path";
 import { formatValue } from "../schema/index.js";
 import { getGitFileStatusFromStatusResult } from "./git.js";
-export const getInstancesByEntityName = async (dataRoot, entities) => Object.fromEntries(await Promise.all(entities.map(async (entity) => {
+export const getInstancesByEntityName = async (dataRoot, entities) => Object.fromEntries((await Promise.all(entities.map(async (entity) => {
     const entityDir = join(dataRoot, entity.name);
     const instanceFileNames = await readdir(entityDir);
     const instances = await Promise.all(instanceFileNames.map(async (instanceFileName) => ({
@@ -11,7 +11,7 @@ export const getInstancesByEntityName = async (dataRoot, entities) => Object.fro
         content: JSON.parse(await readFile(join(entityDir, instanceFileName), "utf-8")),
     })));
     return [entity.name, instances];
-})));
+}))).toSorted(([a], [b]) => a.localeCompare(b)));
 export const attachGitStatusToInstancesByEntityName = (instancesByEntityName, dataRoot, gitRoot, gitStatus) => {
     Object.entries(instancesByEntityName).forEach(([entityName, instances]) => {
         instancesByEntityName[entityName] = instances.map(instanceContainer => ({

package/dist/src/node/utils/references.d.ts

@@ -1,5 +1,8 @@
 import type { InstanceContainer } from "../../shared/utils/instances.ts";
 import type { EntityDecl } from "../schema/declarations/EntityDecl.ts";
+/**
+ * A mapping from instance IDs to the list of instance IDs that reference them.
+ */
 export type ReferencesToInstances = {
     [instanceId: string]: string[];
 };

package/dist/src/node/utils/references.js

@@ -1,5 +1,7 @@
+import Debug from "debug";
 import { difference, removeAt } from "../../shared/utils/array.js";
 import { getReferencesForEntityDecl } from "../schema/declarations/EntityDecl.js";
+const debug = Debug("tsondb:utils:references");
 const addReference = (acc, reference, instanceId) => ({
     ...acc,
     [reference]: [...(acc[reference] ?? []), instanceId],
@@ -12,16 +14,21 @@ const removeReference = (acc, reference, instanceId) => acc[reference]
     }
     : acc;
 const removeReferences = (acc, references, instanceId) => references.reduce((acc1, reference) => removeReference(acc1, reference, instanceId), acc);
-export const getReferencesToInstances = (instancesByEntityName, entitiesByName) => Object.entries(instancesByEntityName).reduce((acc, [entityName, instances]) => {
-    const entity = entitiesByName[entityName];
-    if (entity) {
-        return instances.reduce((acc1, instance) => {
-            const references = getReferencesForEntityDecl(entity, instance.content);
-            return addReferences(acc1, references, instance.id);
-        }, acc);
-    }
-    return acc;
-}, {});
+export const getReferencesToInstances = (instancesByEntityName, entitiesByName) => {
+    debug("collecting references ...");
+    return Object.entries(instancesByEntityName).reduce((acc, [entityName, instances]) => {
+        const entity = entitiesByName[entityName];
+        if (entity) {
+            const refs = instances.reduce((acc1, instance) => {
+                const references = getReferencesForEntityDecl(entity, instance.content);
+                return addReferences(acc1, references, instance.id);
+            }, acc);
+            debug("collected references for entity %s in %d instances", entityName, instances.length);
+            return refs;
+        }
+        return acc;
+    }, {});
+};
 export const updateReferencesToInstances = (entitiesByName, referencesToInstances, entityName, instanceId, oldInstance, newInstance) => {
     const entity = entitiesByName[entityName];
     if (entity) {

package/dist/src/shared/utils/markdown.d.ts

@@ -19,6 +19,11 @@ export type BlockMarkdownNode = {
         kind: "listitem";
         content: InlineMarkdownNode[];
     }[];
-} | TextNode;
+};
+export type BlockSyntaxMarkdownNode = InlineMarkdownNode | {
+    kind: "listitemmarker";
+    content: string;
+};
 export declare const parseBlockMarkdown: (text: string) => BlockMarkdownNode[];
+export declare const parseBlockMarkdownForSyntaxHighlighting: (text: string) => BlockSyntaxMarkdownNode[];
 export {};

package/dist/src/shared/utils/markdown.js

@@ -1,22 +1,61 @@
 const codeRule = {
     pattern: /`(.*?)`/,
-    map: result => ({ kind: "code", content: result[1] ?? "" }),
+    map: (result, _parseInside, forSyntaxHighlighting) => ({
+        kind: "code",
+        content: forSyntaxHighlighting ? `\`${result[1] ?? ""}\`` : (result[1] ?? ""),
+    }),
 };
 const boldWithItalicRule = {
     pattern: /\*\*(.*?\*.+?\*.*?)\*\*/,
-    map: (result, parseInside) => ({ kind: "bold", content: parseInside(result[1] ?? "") }),
+    map: (result, parseInside, forSyntaxHighlighting) => ({
+        kind: "bold",
+        content: forSyntaxHighlighting
+            ? [
+                { kind: "text", content: "**" },
+                ...parseInside(result[1] ?? ""),
+                { kind: "text", content: "**" },
+            ]
+            : parseInside(result[1] ?? ""),
+    }),
 };
 const italicWithBoldRule = {
     pattern: /\*(.*?\*\*.+?\*\*.*?)\*/,
-    map: (result, parseInside) => ({ kind: "italic", content: parseInside(result[1] ?? "") }),
+    map: (result, parseInside, forSyntaxHighlighting) => ({
+        kind: "italic",
+        content: forSyntaxHighlighting
+            ? [
+                { kind: "text", content: "*" },
+                ...parseInside(result[1] ?? ""),
+                { kind: "text", content: "*" },
+            ]
+            : parseInside(result[1] ?? ""),
+    }),
 };
 const boldRule = {
     pattern: /\*\*(.+?)\*\*/,
-    map: (result, parseInside) => ({ kind: "bold", content: parseInside(result[1] ?? "") }),
+    map: (result, parseInside, forSyntaxHighlighting) => ({
+        kind: "bold",
+        content: forSyntaxHighlighting
+            ? [
+                { kind: "text", content: "**" },
+                ...parseInside(result[1] ?? ""),
+                { kind: "text", content: "**" },
+            ]
+            : parseInside(result[1] ?? ""),
+    }),
 };
 const italicRule = {
     pattern: /\*(.+?)\*/,
-    map: (result, parseInside) => ({ kind: "italic", content: parseInside(result[1] ?? "") }),
+    map: (result, parseInside, forSyntaxHighlighting) => ({
+        kind: "italic",
+        content: forSyntaxHighlighting
+            ? [
+                { kind: "text", content: "*" },
+                ...parseInside(result[1] ?? ""),
+                { kind: "text", content: "*" },
+            ]
+            : parseInside(result[1] ?? ""),
+    }),
 };
 const inlineRules = [
     codeRule,
@@ -25,7 +64,7 @@ const inlineRules = [
     boldRule,
     italicRule,
 ];
-const parseForInlineRules = (rules, text) => {
+const parseForInlineRules = (rules, text, forSyntaxHighlighting) => {
     if (text.length === 0) {
         return [];
     }
@@ -39,30 +78,50 @@ const parseForInlineRules = (rules, text) => {
         const before = text.slice(0, index);
         const after = text.slice(index + res[0].length);
         return [
-            ...(before.length > 0 ? parseForInlineRules(rules.slice(1), before) : []),
-            activeRule.map(res, text => parseForInlineRules(rules.slice(1), text)),
-            ...(after.length > 0 ? parseForInlineRules(rules, after) : []),
+            ...(before.length > 0
+                ? parseForInlineRules(rules.slice(1), before, forSyntaxHighlighting)
+                : []),
+            activeRule.map(res, text => parseForInlineRules(rules.slice(1), text, forSyntaxHighlighting), forSyntaxHighlighting),
+            ...(after.length > 0 ? parseForInlineRules(rules, after, forSyntaxHighlighting) : []),
         ];
     }
     else {
-        return parseForInlineRules(rules.slice(1), text);
+        return parseForInlineRules(rules.slice(1), text, forSyntaxHighlighting);
     }
 };
-const parseInlineMarkdown = (text) => parseForInlineRules(inlineRules, text);
+const parseInlineMarkdown = (text, forSyntaxHighlighting) => parseForInlineRules(inlineRules, text, forSyntaxHighlighting);
 const listRule = {
-    pattern: /^((?:(?:\d+\.|[-*]) [^\n]+?)(?:\n(?:\d+\.|[-*]) [^\n]+?)*)(?:\n{2,}|$)/,
+    pattern: /^((?:(?:\d+\.|[-*]) [^\n]+?)(?:\n(?:\d+\.|[-*]) [^\n]+?)*)(\n{2,}|$)/,
     map: result => ({
         kind: "list",
         ordered: /^\d+\. /.test(result[0]),
         content: (result[1] ?? "").split("\n").map(item => ({
             kind: "listitem",
-            content: parseInlineMarkdown(item.replace(/^\d+\. |[-*] /, "")),
+            content: parseInlineMarkdown(item.replace(/^\d+\. |[-*] /, ""), false),
         })),
     }),
+    mapHighlighting: result => [
+        ...(result[1] ?? "").split("\n").flatMap((item, index, array) => [
+            {
+                kind: "listitemmarker",
+                content: /^(\d+\. |[-*] )/.exec(item)?.[1] ?? "",
+            },
+            ...parseInlineMarkdown(item.replace(/^\d+\. |[-*] /, ""), true),
+            ...(index < array.length - 1 ? [{ kind: "text", content: "\n" }] : []),
+        ]),
+        { kind: "text", content: result[2] ?? "" },
+    ],
 };
 const paragraphRule = {
-    pattern: /^((?:[^\n]+?)(?:\n[^\n]+?)*)(?:\n{2,}|\s*$)/,
-    map: result => ({ kind: "paragraph", content: parseInlineMarkdown(result[1] ?? "") }),
+    pattern: /^((?:[^\n]+?)(?:\n[^\n]+?)*)(\n{2,}|\s*$)/,
+    map: result => ({
+        kind: "paragraph",
+        content: parseInlineMarkdown(result[1] ?? "", false),
+    }),
+    mapHighlighting: result => [
+        ...parseInlineMarkdown(result[1] ?? "", true),
+        { kind: "text", content: result[2] ?? "" },
+    ],
 };
 const blockRules = [listRule, paragraphRule];
 const parseForBlockRules = (rules, text, remainingRules = rules) => {
@@ -83,4 +142,26 @@ const parseForBlockRules = (rules, text, remainingRules = rules) => {
         return parseForBlockRules(rules, text, remainingRules.slice(1));
     }
 };
+const parseForBlockRulesSyntaxHighlighting = (rules, text, remainingRules = rules) => {
+    if (text.length === 0) {
+        return [];
+    }
+    const activeRule = remainingRules[0];
+    if (activeRule === undefined) {
+        return [{ kind: "text", content: text }];
+    }
+    const res = activeRule.pattern.exec(text);
+    if (res && (activeRule.predicate?.(res) ?? true)) {
+        const { index } = res;
+        const after = text.slice(index + res[0].length);
+        return [
+            ...activeRule.mapHighlighting(res),
+            ...(after.length > 0 ? parseForBlockRulesSyntaxHighlighting(rules, after) : []),
+        ];
+    }
+    else {
+        return parseForBlockRulesSyntaxHighlighting(rules, text, remainingRules.slice(1));
+    }
+};
 export const parseBlockMarkdown = (text) => parseForBlockRules(blockRules, text);
+export const parseBlockMarkdownForSyntaxHighlighting = (text) => parseForBlockRulesSyntaxHighlighting(blockRules, text);

package/dist/src/web/components/Git.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useLocation } from "preact-iso";
 import { useEffect, useState } from "preact/hooks";
 import { getGitStatusForDisplay, getLabelForGitStatus, isChangedInIndex, isChangedInWorkingDir, } from "../../shared/utils/git.js";
 import { commitStagedFiles, createBranch, getAllEntities, getBranches, getGitStatus, pullCommits, pushCommits, stageAllFiles, stageFileOfEntity, switchBranch, unstageAllFiles, unstageFileOfEntity, } from "../api.js";
@@ -36,6 +37,7 @@ export const Git = () => {
         setAllBranches(branchesData.allBranches);
         setCurrentBranch(branchesData.currentBranch);
     });
+    const location = useLocation();
     useEffect(() => {
         getAllEntities()
             .then(async (data) => {
@@ -48,7 +50,7 @@ export const Git = () => {
                 console.error("Error fetching entities:", error.toString());
             }
         });
-    }, []);
+    }, [location.path]);
     const stage = (entityName, instance) => {
         stageFileOfEntity(entityName, instance.id)
             .then(() => updateGitStatus(entities))

package/dist/src/web/components/Layout.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
-import { Git } from "./Git.js";
 export const Layout = ({ breadcrumbs, children }) => {
-    return (_jsxs(_Fragment, { children: [_jsx("header", { children: _jsx("nav", { children: _jsx("ol", { children: breadcrumbs.map(({ url, label }) => (_jsx("li", { children: _jsx("a", { href: url, children: label }) }, url))) }) }) }), _jsx(Git, {}), _jsx("main", { children: children })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("header", { children: _jsx("nav", { children: _jsx("ol", { children: breadcrumbs.map(({ url, label }) => (_jsx("li", { children: _jsx("a", { href: url, children: label }) }, url))) }) }) }), _jsx("main", { children: children })] }));
 };

package/dist/src/web/components/typeInputs/StringTypeInput.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
 import { validateStringConstraints } from "../../../shared/validation/string.js";
 import { Markdown } from "../../utils/Markdown.js";
+import { MarkdownHighlighting } from "../../utils/MarkdownHighlighting.js";
 import { MismatchingTypeError } from "./utils/MismatchingTypeError.js";
 import { ValidationErrors } from "./utils/ValidationErrors.js";
 export const StringTypeInput = ({ type, value, onChange }) => {
@@ -9,9 +10,9 @@ export const StringTypeInput = ({ type, value, onChange }) => {
     }
     const { minLength, maxLength, pattern, isMarkdown } = type;
     const errors = validateStringConstraints(type, value);
-    return (_jsx("div", { class: "field field--string", children: isMarkdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "editor", children: [_jsx("div", { class: "textarea-grow-wrap", "data-value": value, children: _jsx("textarea", { value: value, minLength: minLength, maxLength: maxLength, onInput: event => {
-                                    onChange(event.currentTarget.value);
-                                }, "aria-invalid": errors.length > 0 }) }), _jsx(ValidationErrors, { errors: errors })] }), _jsx("div", { className: "preview", children: _jsx(Markdown, { string: value }) })] })) : (_jsxs("div", { className: "editor", children: [_jsx("input", { type: "text", value: value, minLength: minLength, maxLength: maxLength, pattern: pattern === undefined
+    return (_jsx("div", { class: "field field--string", children: isMarkdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { class: "editor editor--markdown", children: [_jsxs("div", { class: "textarea-grow-wrap", children: [_jsx("textarea", { value: value, minLength: minLength, maxLength: maxLength, onInput: event => {
+                                        onChange(event.currentTarget.value);
+                                    }, "aria-invalid": errors.length > 0 }), _jsxs("p", { class: "help", children: ["This textarea supports", " ", _jsx("a", { href: "https://www.markdownguide.org/getting-started/", target: "_blank", rel: "noreferrer", children: "Markdown" }), "."] }), _jsx(MarkdownHighlighting, { class: "textarea-grow-wrap__mirror editor-highlighting", string: value })] }), _jsx(ValidationErrors, { errors: errors })] }), _jsx("div", { class: "preview", children: _jsx(Markdown, { string: value }) })] })) : (_jsxs("div", { class: "editor", children: [_jsx("input", { type: "text", value: value, minLength: minLength, maxLength: maxLength, pattern: pattern === undefined
                         ? undefined
                         : pattern.startsWith("^(?:") && pattern.endsWith(")$")
                             ? pattern.slice(4, -2)

package/dist/src/web/context/entities.d.ts

@@ -0,0 +1,6 @@
+import type { SerializedEntityDecl } from "../../node/schema/index.ts";
+export declare const EntitiesContext: import("preact").Context<{
+    declaration: SerializedEntityDecl;
+    instanceCount: number;
+    isLocaleEntity: boolean;
+}[]>;

package/dist/src/web/context/entities.js

@@ -0,0 +1,2 @@
+import { createContext } from "preact";
+export const EntitiesContext = createContext([]);

package/dist/src/web/hooks/useEntityFromRoute.d.ts

@@ -1,5 +1,5 @@
 import type { SerializedEntityDecl } from "../../node/schema/declarations/EntityDecl.ts";
 export declare const useEntityFromRoute: () => {
-    entity: SerializedEntityDecl;
+    declaration: SerializedEntityDecl;
     isLocaleEntity: boolean;
 } | undefined;

package/dist/src/web/hooks/useEntityFromRoute.js

@@ -1,20 +1,9 @@
 import { useRoute } from "preact-iso";
-import { useEffect, useMemo, useState } from "preact/hooks";
-import { getEntityByName } from "../api.js";
+import { useContext, useMemo } from "preact/hooks";
+import { EntitiesContext } from "../context/entities.js";
 export const useEntityFromRoute = () => {
     const { params: { name }, } = useRoute();
-    const [entityData, setEntityData] = useState();
-    useEffect(() => {
-        if (name) {
-            getEntityByName(name)
-                .then(data => {
-                setEntityData(data);
-            })
-                .catch((error) => {
-                console.error("Error fetching data:", error);
-            });
-        }
-    }, [name]);
-    const entityObj = useMemo(() => entityData && { entity: entityData.declaration, isLocaleEntity: entityData.isLocaleEntity }, [entityData]);
+    const entities = useContext(EntitiesContext);
+    const entityObj = useMemo(() => entities.find(e => e.declaration.name === name), [entities, name]);
     return entityObj;
 };

package/dist/src/web/index.js

@@ -1,11 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { render } from "preact";
-import { LocationProvider, Route, Router } from "preact-iso";
+import { LocationProvider, Route, Router, useLocation } from "preact-iso";
+import { useEffect } from "preact/hooks";
+import { getAllEntities } from "./api.js";
+import { Git } from "./components/Git.js";
+import { EntitiesContext } from "./context/entities.js";
+import { useMappedAPIResource } from "./hooks/useMappedAPIResource.js";
 import { CreateInstance } from "./routes/CreateInstance.js";
 import { Entity } from "./routes/Entity.js";
 import { Home } from "./routes/Home.js";
 import { Instance } from "./routes/Instance.js";
 import { NotFound } from "./routes/NotFound.js";
-const App = () => (_jsx(LocationProvider, { children: _jsxs(Router, { children: [_jsx(Route, { path: "/", component: Home }), _jsx(Route, { path: "/entities/:name", component: Entity }), _jsx(Route, { path: "/entities/:name/instances/create", component: CreateInstance }), _jsx(Route, { path: "/entities/:name/instances/:id", component: Instance }), _jsx(Route, { default: true, component: NotFound })] }) }));
+const mapEntities = (data) => data.declarations
+    .map(decl => ({ ...decl, isLocaleEntity: decl.declaration.name === data.localeEntity }))
+    .sort((a, b) => a.declaration.name.localeCompare(b.declaration.name));
+const App = () => {
+    const [entities, reloadEntities] = useMappedAPIResource(getAllEntities, mapEntities);
+    const location = useLocation();
+    useEffect(() => {
+        reloadEntities().catch((error) => {
+            alert("Error reloading entities: " + String(error));
+        });
+    }, [location.path, reloadEntities]);
+    return (_jsx(LocationProvider, { children: _jsxs(EntitiesContext.Provider, { value: entities ?? [], children: [_jsxs(Router, { children: [_jsx(Route, { path: "/", component: Home }), _jsx(Route, { path: "/entities/:name", component: Entity }), _jsx(Route, { path: "/entities/:name/instances/create", component: CreateInstance }), _jsx(Route, { path: "/entities/:name/instances/:id", component: Instance }), _jsx(Route, { default: true, component: NotFound })] }), _jsx(Git, {})] }) }));
+};
 const root = document.getElementById("app");
 render(_jsx(App, {}), root);

package/dist/src/web/routes/CreateInstance.js

@@ -23,22 +23,22 @@ export const CreateInstance = () => {
     const [customId, setCustomId] = useState("");
     useEffect(() => {
         if (entityFromRoute) {
-            setInstance(createTypeSkeleton(getDeclFromDeclName, entityFromRoute.entity.type));
+            setInstance(createTypeSkeleton(getDeclFromDeclName, entityFromRoute.declaration.type));
         }
     }, [getDeclFromDeclName, entityFromRoute]);
     const { route } = useLocation();
     useEffect(() => {
-        const entityName = entityFromRoute?.entity.name ?? name;
+        const entityName = entityFromRoute?.declaration.name ?? name;
         document.title =
             entityName === undefined ? "Not found" : "New " + toTitleCase(entityName) + " — TSONDB";
-    }, [entityFromRoute?.entity.name, name]);
+    }, [entityFromRoute?.declaration.name, name]);
     if (!name) {
         return _jsx(NotFound, {});
     }
     if (!entityFromRoute || !instanceNamesByEntity || !declsLoaded) {
         return (_jsxs("div", { children: [_jsx("h1", { children: name }), _jsx("p", { className: "loading", children: "Loading \u2026" })] }));
     }
-    const { entity, isLocaleEntity } = entityFromRoute;
+    const { declaration: entity, isLocaleEntity } = entityFromRoute;
     const handleSubmit = (event) => {
         event.preventDefault();
         const name = event.submitter?.getAttribute("name");
@@ -75,7 +75,7 @@ export const CreateInstance = () => {
     const idErrors = isLocaleEntity ? validateLocaleIdentifier(customId) : [];
     return (_jsxs(Layout, { breadcrumbs: [
             { url: "/", label: homeTitle },
-            { url: `/entities/${entity.name}`, label: entity.name },
+            { url: `/entities/${entity.name}`, label: toTitleCase(entity.namePlural) },
         ], children: [_jsx("div", { class: "header-with-btns", children: _jsx("h1", { class: instanceName.length === 0 ? "empty-name" : undefined, children: instanceName || defaultName }) }), isLocaleEntity && (_jsxs("div", { class: "field field--id", children: [_jsx("label", { htmlFor: "id", children: "ID" }), _jsx("p", { className: "comment", children: "The instance\u2019s identifier. An IETF language tag (BCP47)." }), _jsx("input", { type: "text", id: "id", value: customId, required: true, pattern: "[a-z]{2,3}(-[A-Z]{2,3})?", placeholder: "en-US, de-DE, \u2026", onInput: event => {
                             setCustomId(event.currentTarget.value);
                         }, "aria-invalid": idErrors.length > 0 }), _jsx(ValidationErrors, { errors: idErrors })] })), _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TypeInput, { type: entity.type, path: undefined, value: instance, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: value => {

package/dist/src/web/routes/Entity.js

@@ -3,9 +3,9 @@ import { useRoute } from "preact-iso";
 import { useEffect, useState } from "preact/hooks";
 import { getGitStatusForDisplay, getLabelForGitStatus } from "../../shared/utils/git.js";
 import { toTitleCase } from "../../shared/utils/string.js";
-import { deleteInstanceByEntityNameAndId, getEntityByName, getInstancesByEntityName, } from "../api.js";
+import { deleteInstanceByEntityNameAndId, getInstancesByEntityName } from "../api.js";
 import { Layout } from "../components/Layout.js";
-import { useAPIResource } from "../hooks/useAPIResource.js";
+import { useEntityFromRoute } from "../hooks/useEntityFromRoute.js";
 import { useMappedAPIResource } from "../hooks/useMappedAPIResource.js";
 import { Markdown } from "../utils/Markdown.js";
 import { homeTitle } from "./Home.js";
@@ -14,11 +14,12 @@ const mapInstances = (data) => data.instances;
 export const Entity = () => {
     const { params: { name }, query: { created }, } = useRoute();
     const [searchText, setSearchText] = useState("");
-    const [entity] = useAPIResource(getEntityByName, name ?? "");
+    const entityFromRoute = useEntityFromRoute();
+    const { declaration: entity } = entityFromRoute ?? {};
     const [instances, reloadInstances] = useMappedAPIResource(getInstancesByEntityName, mapInstances, name ?? "");
     useEffect(() => {
-        document.title = toTitleCase(entity?.declaration.namePlural ?? name ?? "") + " — TSONDB";
-    }, [entity?.declaration.namePlural, name]);
+        document.title = toTitleCase(entity?.namePlural ?? name ?? "") + " — TSONDB";
+    }, [entity?.namePlural, name]);
     useEffect(() => {
         if (created) {
             const instanceElement = document.getElementById(`instance-${created}`);
@@ -31,22 +32,22 @@ export const Entity = () => {
         return _jsx(NotFound, {});
     }
     if (!entity || !instances) {
-        return (_jsxs("div", { children: [_jsx("h1", { children: toTitleCase(entity?.declaration.namePlural ?? name) }), _jsx("p", { className: "loading", children: "Loading \u2026" })] }));
+        return (_jsxs("div", { children: [_jsx("h1", { children: toTitleCase(entity?.namePlural ?? name) }), _jsx("p", { className: "loading", children: "Loading \u2026" })] }));
     }
     const lowerSearchText = searchText.toLowerCase();
     const filteredInstances = searchText.length === 0
         ? instances
         : instances.filter(instance => instance.id.includes(searchText) ||
             instance.displayName.toLowerCase().includes(lowerSearchText));
-    return (_jsxs(Layout, { breadcrumbs: [{ url: "/", label: homeTitle }], children: [_jsxs("div", { class: "header-with-btns", children: [_jsx("h1", { children: toTitleCase(entity.declaration.namePlural) }), _jsx("a", { class: "btn btn--primary", href: `/entities/${entity.declaration.name}/instances/create`, children: "Add" })] }), entity.declaration.comment && (_jsx(Markdown, { class: "description", string: entity.declaration.comment })), _jsxs("div", { className: "list-header", children: [_jsxs("p", { class: "instance-count", children: [searchText === "" ? "" : `${filteredInstances.length.toString()} of `, instances.length, " instance", instances.length === 1 ? "" : "s"] }), _jsxs("form", { action: "", rel: "search", onSubmit: e => {
+    return (_jsxs(Layout, { breadcrumbs: [{ url: "/", label: homeTitle }], children: [_jsxs("div", { class: "header-with-btns", children: [_jsx("h1", { children: toTitleCase(entity.namePlural) }), _jsx("a", { class: "btn btn--primary", href: `/entities/${entity.name}/instances/create`, children: "Add" })] }), entity.comment && _jsx(Markdown, { class: "description", string: entity.comment }), _jsxs("div", { className: "list-header", children: [_jsxs("p", { class: "instance-count", children: [searchText === "" ? "" : `${filteredInstances.length.toString()} of `, instances.length, " instance", instances.length === 1 ? "" : "s"] }), _jsxs("form", { action: "", rel: "search", onSubmit: e => {
                             e.preventDefault();
                         }, children: [_jsx("label", { htmlFor: "instance-search", class: "visually-hidden", children: "Search" }), _jsx("input", { type: "text", id: "instance-search", value: searchText, onInput: event => {
                                     setSearchText(event.currentTarget.value);
                                 } })] })] }), _jsx("ul", { class: "entries entries--instances", children: filteredInstances.map(instance => {
                     const gitStatusForDisplay = getGitStatusForDisplay(instance.gitStatus);
-                    return (_jsxs("li", { id: `instance-${instance.id}`, class: `entries-item ${created === instance.id ? "entries-item--created" : ""} ${gitStatusForDisplay === undefined ? "" : `git-status--${gitStatusForDisplay}`}`, children: [_jsx("h2", { class: "entries-item__title", children: instance.displayName }), _jsx("p", { "aria-hidden": true, class: "entries-item__subtitle entries-item__subtitle--id", children: instance.id }), _jsxs("div", { class: "entries-item__side", children: [gitStatusForDisplay !== undefined && (_jsx("p", { class: `git-status git-status--${gitStatusForDisplay}`, title: getLabelForGitStatus(gitStatusForDisplay), children: gitStatusForDisplay })), _jsxs("div", { class: "btns", children: [_jsx("a", { href: `/entities/${entity.declaration.name}/instances/${instance.id}`, class: "btn", children: "Edit" }), _jsx("button", { class: "destructive", onClick: () => {
+                    return (_jsxs("li", { id: `instance-${instance.id}`, class: `entries-item ${created === instance.id ? "entries-item--created" : ""} ${gitStatusForDisplay === undefined ? "" : `git-status--${gitStatusForDisplay}`}`, children: [_jsx("h2", { class: "entries-item__title", children: instance.displayName }), _jsx("p", { "aria-hidden": true, class: "entries-item__subtitle entries-item__subtitle--id", children: instance.id }), _jsxs("div", { class: "entries-item__side", children: [gitStatusForDisplay !== undefined && (_jsx("p", { class: `git-status git-status--${gitStatusForDisplay}`, title: getLabelForGitStatus(gitStatusForDisplay), children: gitStatusForDisplay })), _jsxs("div", { class: "btns", children: [_jsx("a", { href: `/entities/${entity.name}/instances/${instance.id}`, class: "btn", children: "Edit" }), _jsx("button", { class: "destructive", onClick: () => {
                                                     if (confirm("Are you sure you want to delete this instance?")) {
-                                                        deleteInstanceByEntityNameAndId(entity.declaration.name, instance.id)
+                                                        deleteInstanceByEntityNameAndId(entity.name, instance.id)
                                                             .then(() => reloadInstances())
                                                             .catch((error) => {
                                                             if (error instanceof Error) {

package/dist/src/web/routes/Home.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useEffect, useState } from "preact/hooks";
+import { useContext, useEffect, useState } from "preact/hooks";
 import { toTitleCase } from "../../shared/utils/string.js";
-import { getAllEntities } from "../api.js";
 import { Layout } from "../components/Layout.js";
-import { useMappedAPIResource } from "../hooks/useMappedAPIResource.js";
+import { EntitiesContext } from "../context/entities.js";
 import { Markdown } from "../utils/Markdown.js";
-const mapEntities = (data) => data.declarations.sort((a, b) => a.declaration.name.localeCompare(b.declaration.name));
 export const homeTitle = "Entities";
 export const Home = () => {
-    const [entities] = useMappedAPIResource(getAllEntities, mapEntities);
+    const entities = useContext(EntitiesContext);
     useEffect(() => {
         document.title = homeTitle + " — TSONDB";
     }, []);
@@ -16,11 +14,11 @@ export const Home = () => {
     const lowerSearchText = searchText.toLowerCase().replaceAll(" ", "");
     const filteredEntities = searchText.length === 0
         ? entities
-        : entities?.filter(entity => entity.declaration.name.toLowerCase().includes(lowerSearchText) ||
+        : entities.filter(entity => entity.declaration.name.toLowerCase().includes(lowerSearchText) ||
             entity.declaration.namePlural.toLowerCase().includes(lowerSearchText));
-    return (_jsxs(Layout, { breadcrumbs: [], children: [_jsx("h1", { children: homeTitle }), _jsxs("div", { className: "list-header", children: [_jsxs("p", { class: "instance-count", children: [searchText === "" ? "" : `${(filteredEntities?.length ?? 0).toString()} of `, entities?.length ?? 0, " entit", entities?.length === 1 ? "y" : "ies"] }), _jsxs("form", { action: "", rel: "search", onSubmit: e => {
+    return (_jsxs(Layout, { breadcrumbs: [], children: [_jsx("h1", { children: homeTitle }), _jsxs("div", { className: "list-header", children: [_jsxs("p", { class: "instance-count", children: [searchText === "" ? "" : `${filteredEntities.length.toString()} of `, entities.length, " entit", entities.length === 1 ? "y" : "ies"] }), _jsxs("form", { action: "", rel: "search", onSubmit: e => {
                             e.preventDefault();
                         }, children: [_jsx("label", { htmlFor: "entity-search", class: "visually-hidden", children: "Search" }), _jsx("input", { type: "text", id: "entity-search", value: searchText, onInput: event => {
                                     setSearchText(event.currentTarget.value);
-                                } })] })] }), _jsx("ul", { class: "entries entries--entities", children: (filteredEntities ?? []).map(entity => (_jsxs("li", { class: "entries-item", children: [_jsxs("div", { class: "entries-item__title", children: [_jsx("h2", { children: toTitleCase(entity.declaration.namePlural) }), entity.declaration.comment && (_jsx(Markdown, { class: "description", string: entity.declaration.comment }))] }), _jsxs("p", { class: "entries-item__subtitle", children: [entity.instanceCount, " instance", entity.instanceCount === 1 ? "" : "s"] }), _jsx("div", { class: "entries-item__side", children: _jsx("div", { class: "btns", children: _jsx("a", { href: `/entities/${entity.declaration.name}`, class: "btn", children: "View" }) }) })] }, entity.declaration.name))) })] }));
+                                } })] })] }), _jsx("ul", { class: "entries entries--entities", children: filteredEntities.map(entity => (_jsxs("li", { class: "entries-item", children: [_jsxs("div", { class: "entries-item__title", children: [_jsx("h2", { children: toTitleCase(entity.declaration.namePlural) }), entity.declaration.comment && (_jsx(Markdown, { class: "description", string: entity.declaration.comment }))] }), _jsxs("p", { class: "entries-item__subtitle", children: [entity.instanceCount, " instance", entity.instanceCount === 1 ? "" : "s"] }), _jsx("div", { class: "entries-item__side", children: _jsx("div", { class: "btns", children: _jsx("a", { href: `/entities/${entity.declaration.name}`, class: "btn", children: "View" }) }) })] }, entity.declaration.name))) })] }));
 };

package/dist/src/web/routes/Instance.js

@@ -15,21 +15,22 @@ export const Instance = () => {
     const { params: { name, id }, } = useRoute();
     const [getDeclFromDeclName, declsLoaded] = useGetDeclFromDeclName();
     const entityFromRoute = useEntityFromRoute();
+    const { declaration: entity } = entityFromRoute ?? {};
     const [instanceNamesByEntity] = useInstanceNamesByEntity();
     const [instance, setInstance] = useState();
     const [originalInstance, setOriginalInstance] = useState();
     const { route } = useLocation();
     useEffect(() => {
-        if (entityFromRoute?.entity && instance?.content && id) {
+        if (entity && instance?.content && id) {
             const defaultName = id;
-            const instanceName = getSerializedDisplayNameFromEntityInstance(entityFromRoute.entity, instance.content, defaultName);
-            const entityName = entityFromRoute.entity.name;
+            const instanceName = getSerializedDisplayNameFromEntityInstance(entity, instance.content, defaultName);
+            const entityName = entity.name;
             document.title = instanceName + " — " + toTitleCase(entityName) + " — TSONDB";
         }
         else {
             document.title = "Not found — TSONDB";
         }
-    }, [entityFromRoute?.entity, id, instance?.content]);
+    }, [entity, id, instance?.content]);
     useEffect(() => {
         if (name && id) {
             getInstanceByEntityNameAndId(name, id)
@@ -63,24 +64,23 @@ export const Instance = () => {
     if (!name || !id) {
         return _jsx(NotFound, {});
     }
-    if (!entityFromRoute ||
-        !instance ||
-        !originalInstance ||
-        !instanceNamesByEntity ||
-        !declsLoaded) {
+    if (!entity || !instance || !originalInstance || !instanceNamesByEntity || !declsLoaded) {
         return (_jsxs(Layout, { breadcrumbs: [
                 { url: "/", label: homeTitle },
-                { url: `/entities/${name}`, label: name },
+                {
+                    url: `/entities/${name}`,
+                    label: entity ? toTitleCase(entity.namePlural) : name,
+                },
             ], children: [_jsx("h1", { children: id }), _jsx("p", { className: "loading", children: "Loading \u2026" })] }));
     }
     const defaultName = id;
-    const instanceName = getSerializedDisplayNameFromEntityInstance(entityFromRoute.entity, instance.content, defaultName);
+    const instanceName = getSerializedDisplayNameFromEntityInstance(entity, instance.content, defaultName);
     return (_jsxs(Layout, { breadcrumbs: [
             { url: "/", label: homeTitle },
-            { url: `/entities/${name}`, label: entityFromRoute.entity.name },
+            { url: `/entities/${name}`, label: toTitleCase(entity.namePlural) },
         ], children: [_jsxs("div", { class: "header-with-btns", children: [_jsxs("h1", { class: instanceName.length === 0 ? "empty-name" : undefined, children: [_jsx("span", { children: instanceName || defaultName }), " ", _jsx("span", { className: "id", "aria-hidden": true, children: instance.id })] }), _jsx("button", { class: "destructive", onClick: () => {
                             if (confirm("Are you sure you want to delete this instance?")) {
-                                deleteInstanceByEntityNameAndId(entityFromRoute.entity.name, instance.id)
+                                deleteInstanceByEntityNameAndId(entity.name, instance.id)
                                     .then(() => {
                                     route(`/entities/${name}`);
                                 })
@@ -90,5 +90,5 @@ export const Instance = () => {
                                     }
                                 });
                             }
-                        }, children: "Delete" })] }), _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TypeInput, { type: entityFromRoute.entity.type, value: instance.content, path: undefined, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: handleOnChange }), _jsx("div", { class: "form-footer btns", children: _jsx("button", { type: "submit", name: "save", class: "primary", children: "Save" }) })] })] }));
+                        }, children: "Delete" })] }), _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TypeInput, { type: entity.type, value: instance.content, path: undefined, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: handleOnChange }), _jsx("div", { class: "form-footer btns", children: _jsx("button", { type: "submit", name: "save", class: "primary", children: "Save" }) })] })] }));
 };

package/dist/src/web/utils/BlockMarkdown.d.ts

@@ -0,0 +1,7 @@
+import type { FunctionalComponent } from "preact";
+import type { BlockMarkdownNode } from "../../shared/utils/markdown.ts";
+type Props = {
+    node: BlockMarkdownNode;
+};
+export declare const BlockMarkdown: FunctionalComponent<Props>;
+export {};

package/dist/src/web/utils/BlockMarkdown.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { InlineMarkdown } from "./InlineMarkdown.js";
+export const BlockMarkdown = ({ node }) => {
+    switch (node.kind) {
+        case "paragraph":
+            return (_jsx("p", { children: node.content.map((inline, ii) => (_jsx(InlineMarkdown, { node: inline }, ii))) }));
+        case "list":
+            if (node.ordered) {
+                return (_jsx("ol", { children: node.content.map((item, ii) => (_jsx("li", { children: item.content.map((inline, iii) => (_jsx(InlineMarkdown, { node: inline }, iii))) }, ii))) }));
+            }
+            else {
+                return (_jsx("ul", { children: node.content.map((item, ii) => (_jsx("li", { children: item.content.map((inline, iii) => (_jsx(InlineMarkdown, { node: inline }, iii))) }, ii))) }));
+            }
+        default:
+            return null;
+    }
+};

package/dist/src/web/utils/BlockMarkdownHighlighting.d.ts

@@ -0,0 +1,7 @@
+import type { FunctionalComponent } from "preact";
+import type { BlockSyntaxMarkdownNode } from "../../shared/utils/markdown.ts";
+type Props = {
+    node: BlockSyntaxMarkdownNode;
+};
+export declare const BlockMarkdownHighlighting: FunctionalComponent<Props>;
+export {};

package/dist/src/web/utils/BlockMarkdownHighlighting.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { InlineMarkdown } from "./InlineMarkdown.js";
+export const BlockMarkdownHighlighting = ({ node }) => {
+    switch (node.kind) {
+        case "listitemmarker":
+            return _jsx("span", { class: "list-item-marker", children: node.content });
+        default:
+            return _jsx(InlineMarkdown, { node: node });
+    }
+};

package/dist/src/web/utils/InlineMarkdown.d.ts

@@ -0,0 +1,7 @@
+import type { FunctionalComponent } from "preact";
+import type { InlineMarkdownNode } from "../../shared/utils/markdown.ts";
+type Props = {
+    node: InlineMarkdownNode;
+};
+export declare const InlineMarkdown: FunctionalComponent<Props>;
+export {};

package/dist/src/web/utils/InlineMarkdown.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+export const InlineMarkdown = ({ node }) => {
+    switch (node.kind) {
+        case "code":
+            return _jsx("code", { children: node.content });
+        case "bold":
+            return (_jsx("strong", { children: node.content.map((inline, i) => (_jsx(InlineMarkdown, { node: inline }, i))) }));
+        case "italic":
+            return (_jsx("em", { children: node.content.map((inline, i) => (_jsx(InlineMarkdown, { node: inline }, i))) }));
+        case "text":
+            return node.content;
+    }
+};

package/dist/src/web/utils/Markdown.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "preact/jsx-runtime";
 import { parseBlockMarkdown } from "../../shared/utils/markdown.js";
+import { BlockMarkdown } from "./BlockMarkdown.js";
 export const Markdown = ({ class: className, string }) => {
     const blocks = parseBlockMarkdown(string);
     const blockElements = blocks.map((block, i) => (_jsx(BlockMarkdown, { node: block }, `md-block-${i.toString()}`)));
@@ -8,32 +9,3 @@ export const Markdown = ({ class: className, string }) => {
     }
     return _jsx(_Fragment, { children: blockElements });
 };
-const BlockMarkdown = ({ node }) => {
-    switch (node.kind) {
-        case "paragraph":
-            return (_jsx("p", { children: node.content.map((inline, ii) => (_jsx(InlineMarkdown, { node: inline }, ii))) }));
-        case "list":
-            if (node.ordered) {
-                return (_jsx("ol", { children: node.content.map((item, ii) => (_jsx("li", { children: item.content.map((inline, iii) => (_jsx(InlineMarkdown, { node: inline }, iii))) }, ii))) }));
-            }
-            else {
-                return (_jsx("ul", { children: node.content.map((item, ii) => (_jsx("li", { children: item.content.map((inline, iii) => (_jsx(InlineMarkdown, { node: inline }, iii))) }, ii))) }));
-            }
-        case "text":
-            return node.content;
-        default:
-            return null;
-    }
-};
-const InlineMarkdown = ({ node }) => {
-    switch (node.kind) {
-        case "code":
-            return _jsx("code", { children: node.content });
-        case "bold":
-            return (_jsx("strong", { children: node.content.map((inline, i) => (_jsx(InlineMarkdown, { node: inline }, i))) }));
-        case "italic":
-            return (_jsx("em", { children: node.content.map((inline, i) => (_jsx(InlineMarkdown, { node: inline }, i))) }));
-        case "text":
-            return node.content;
-    }
-};

package/dist/src/web/utils/MarkdownHighlighting.d.ts

@@ -0,0 +1,7 @@
+import type { FunctionalComponent } from "preact";
+type Props = {
+    class?: string;
+    string: string;
+};
+export declare const MarkdownHighlighting: FunctionalComponent<Props>;
+export {};

package/dist/src/web/utils/MarkdownHighlighting.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment } from "preact/jsx-runtime";
+import { parseBlockMarkdownForSyntaxHighlighting } from "../../shared/utils/markdown.js";
+import { BlockMarkdownHighlighting } from "./BlockMarkdownHighlighting.js";
+export const MarkdownHighlighting = ({ class: className, string }) => {
+    const blocks = parseBlockMarkdownForSyntaxHighlighting(string);
+    const blockElements = blocks.map((block, i) => (_jsx(BlockMarkdownHighlighting, { node: block }, `md-block-${i.toString()}`)));
+    if (className) {
+        return _jsx("div", { class: className, children: blockElements });
+    }
+    return _jsx(_Fragment, { children: blockElements });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsondb",
-  "version": "0.5.15",
+  "version": "0.5.16",
   "description": "",
   "license": "ISC",
   "author": "Lukas Obermann",

package/public/css/styles.css

@@ -48,6 +48,9 @@
   --git-status-renamed-color: rgb(20, 97, 148);
   --git-status-renamed-background: rgba(20, 97, 148, 0.15);
   --shadow-color: rgba(160, 163, 165, 0.5);
+  --highlight-color-bold: rgb(205, 123, 43);
+  --highlight-color-italic: rgb(41, 155, 96);
+  --highlight-color-list-item-marker: rgb(195, 58, 237);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -76,6 +79,9 @@
     --button-color-disabled: hsl(260, 6%, 54%);
     --highlight-color: #f2d600;
     --highlight-background: #333300;
+    --highlight-color-bold: rgb(236, 170, 105);
+    --highlight-color-italic: rgb(130, 230, 178);
+    --highlight-color-list-item-marker: rgb(220, 133, 245);
   }
 }
 
@@ -236,7 +242,7 @@ button.destructive:disabled {
 input,
 textarea,
 select,
-.textarea-grow-wrap::after {
+.textarea-grow-wrap__mirror {
   background: var(--background);
   color: var(--color);
   font-family: var(--font-sans);
@@ -262,10 +268,9 @@ select[aria-invalid="true"] {
   display: grid;
 }
 
-.textarea-grow-wrap::after {
-  content: attr(data-value) " ";
+.textarea-grow-wrap .textarea-grow-wrap__mirror {
   white-space: pre-wrap;
-  visibility: hidden;
+  z-index: -1;
 }
 
 .textarea-grow-wrap > textarea {
@@ -274,7 +279,7 @@ select[aria-invalid="true"] {
 }
 
 .textarea-grow-wrap > textarea,
-.textarea-grow-wrap::after {
+.textarea-grow-wrap__mirror {
   grid-area: 1 / 1 / 2 / 2;
 }
 
@@ -555,6 +560,36 @@ form > .field--container {
   flex: 1 1 0;
 }
 
+.editor--markdown textarea,
+.editor--markdown input,
+.editor--markdown .textarea-grow-wrap__mirror {
+  font-family: var(--font-mono);
+}
+
+.editor--markdown textarea {
+  color: transparent;
+  background: transparent;
+  caret-color: var(--color);
+}
+
+.editor-highlighting strong {
+  color: var(--highlight-color-bold);
+}
+
+.editor-highlighting em {
+  color: var(--highlight-color-italic);
+}
+
+.editor-highlighting .list-item-marker {
+  color: var(--highlight-color-list-item-marker);
+}
+
+.help {
+  font-size: 0.8rem;
+  color: var(--secondary-color);
+  margin: 0.25rem 0 0;
+}
+
 .field--string .preview {
   padding: 1rem;
   background: var(--markdown-background);