Thinkmill / Thinkmill/keystatic

Block add/edit dialog too small for markdoc/mdx editor toolbar

Open
#1,422 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.4k
Forks
159
Avg merge
21h 41m
Merged PRs (30d)
2

Description

I was attempting to use a fields.markdoc.inline within a block like so:

        blocks: fields.blocks(
          {
            richText: {
              label: 'Rich Text',
              itemLabel: (props) =>
                props.fields?.adminLabel.value || 'Rich Text',
              schema: fields.object({
                adminLabel: fields.text({
                  label: 'Admin Label',
                  description: 'How this block will be labeled in the editor',
                }),
                content: fields.markdoc.inline({
                  label: 'Content',
                }),
              }),
            },
          },
          {
            label: 'Block Builder',
          },
        ),

This results in a dialog that is too small to host the editor (at least on a large enough screen). Which I suppose there are two issues here: the editor toolbar doesn't scroll and the dialog is too small.

Image

I believe size="large" should be passed to the Dialog here and here.

This at least makes the editor functional on a large enough screen.

Image

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/keystatic/src/form/fields/blocks/ui.tsx at the Dialog usages around lines 137 and 162, then reproduce the nested markdoc/mdx editor case from the issue. Check both the dialog dimensions and toolbar scrolling, and verify that block add/edit dialogs provide enough usable space for the editor on a large screen.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.