From 3a467e54b79192aff8f8e91bf6b4ef3f558ee545 Mon Sep 17 00:00:00 2001 From: Misode Date: Tue, 26 Nov 2024 01:15:36 +0100 Subject: [PATCH] Improve doc comment rendering in markdown --- .../components/generator/McdocRenderer.tsx | 41 ++++++++----------- src/app/services/Spyglass.ts | 2 +- src/styles/nodes.css | 39 ++++++++++++++++-- 3 files changed, 54 insertions(+), 28 deletions(-) diff --git a/src/app/components/generator/McdocRenderer.tsx b/src/app/components/generator/McdocRenderer.tsx index ed5ec250..78c7dd58 100644 --- a/src/app/components/generator/McdocRenderer.tsx +++ b/src/app/components/generator/McdocRenderer.tsx @@ -8,6 +8,7 @@ import { handleAttributes } from '@spyglassmc/mcdoc/lib/runtime/attribute/index. import type { SimplifiedEnum, SimplifiedMcdocType, SimplifiedMcdocTypeNoUnion, SimplifiedStructType, SimplifiedStructTypePairField } from '@spyglassmc/mcdoc/lib/runtime/checker/index.js' import { getValues } from '@spyglassmc/mcdoc/lib/runtime/completer/index.js' import { Identifier, ItemStack } from 'deepslate' +import { marked } from 'marked' import { useCallback, useMemo, useState } from 'preact/hooks' import config from '../../Config.js' import { useLocale } from '../../contexts/Locale.jsx' @@ -490,7 +491,6 @@ function StructBody({ type: outerType, node, ctx }: Props) const keyType = simplifyType(field.key, ctx) return
-
@@ -578,12 +578,11 @@ function StaticField({ pair, index, field, fieldKey, isToggled, expand, collapse
{!field.optional && child === undefined && } - {canToggle && (isCollapsed ? : )} - + {!isCollapsed && }
{!isCollapsed && } @@ -598,9 +597,10 @@ interface DynamicKeyProps { } function DynamicKey({ keyType, valueType, parent, ctx }: DynamicKeyProps) { const { locale } = useLocale() - const [key, setKey] = useState('') + const [key, setKey] = useState() const keyNode = useMemo(() => { + if (key === undefined) return undefined const node = JsonStringNode.mock(core.Range.create(0)) node.value = key return node @@ -618,7 +618,10 @@ function DynamicKey({ keyType, valueType, parent, ctx }: DynamicKeyProps) { }, [ctx, makeKeyEdit]) const addKey = useCallback(() => { - setKey('') + if (!keyNode) { + return + } + setKey(undefined) ctx.makeEdit((range) => { const valueNode = getDefault(simplifyType(valueType, ctx, { key: keyNode, parent }), range, ctx) const newPair: core.PairNode = { @@ -636,7 +639,7 @@ function DynamicKey({ keyType, valueType, parent, ctx }: DynamicKeyProps) { return <> - + } @@ -1124,10 +1127,16 @@ function selectAnyType(node: JsonNode | undefined) { interface KeyProps { label: string | number | boolean + doc?: string raw?: boolean } -function Key({ label, raw }: KeyProps) { - return +function Key({ label, doc, raw }: KeyProps) { + const [shown, setShown] = useFocus() + + return } interface ErrorsProps { @@ -1170,22 +1179,6 @@ function ErrorIndicator({ error }: ErrorIndicatorProps) { } -interface DocsProps { - desc: string | undefined -} -function Docs({ desc }: DocsProps) { - if (!desc || desc.length === 0) { - return <> - } - - const [active, setActive] = useFocus() - - return
setActive()}> - {Octicon.info} - {desc} -
-} - function useToggles() { const [toggleState, setToggleState] = useState(new Map()) const [toggleAll, setToggleAll] = useState(undefined) diff --git a/src/app/services/Spyglass.ts b/src/app/services/Spyglass.ts index 4eb8f11d..ee041ef9 100644 --- a/src/app/services/Spyglass.ts +++ b/src/app/services/Spyglass.ts @@ -304,7 +304,7 @@ export class SpyglassService { idOmitDefaultNamespace: false, undeclaredSymbol: [ { - if: { category: ['bossbar', 'objective', 'team'] }, + if: { category: ['bossbar', 'objective', 'team', 'shader'] }, then: { declare: 'block' }, }, ...core.VanillaConfig.lint.undeclaredSymbol as any[], diff --git a/src/styles/nodes.css b/src/styles/nodes.css index 2957bebd..5336c764 100644 --- a/src/styles/nodes.css +++ b/src/styles/nodes.css @@ -74,11 +74,15 @@ .node-header > label { align-self: flex-start; - padding: 0 9px; line-height: 1.94rem; + background-color: var(--node-background-label); +} + +.node-header > label > span { + padding: 0 9px; white-space: nowrap; user-select: none; - background-color: var(--node-background-label); + text-decoration-color: var(--node-text-dimmed); } .node-header > label > .item-display { @@ -86,6 +90,35 @@ height: 32px; } +.node-doc { + position: absolute; + font-size: 16px; + line-height: 1.3; + z-index: 10; + margin-top: -1px; + margin-left: 3px; + padding: 4px 9px; + border-radius: 4px; + border: 1px solid; + color: var(--node-text-dimmed); + border-color: var(--node-border); + background-color: var(--node-background-label); + box-shadow: 0 1px 7px -2px #000; +} + +.node-header > label > span:hover + .node-doc { + display: block; +} + +.node-doc code { + color: var(--accent-primary); +} + +.node-doc ul { + padding-left: 16px; + list-style-type: disc; +} + .node-header > input { font-size: 18px; padding-left: 9px; @@ -126,7 +159,7 @@ background-color: var(--node-background-hover); } -.node-header a { +.node-header > a { display: flex; align-items: center; font-size: 18px;