Modeling keyboard shortcuts as inline objects in Sanity
16 replies
Last updated: Jul 7, 2020
B
Relatively new to Sanity land, and moving our changelog over but came across potentially exotic issue; We write quite a lot of combination keyboard shortcuts (eg ). I managed to write scripts to import data from markdown content, but as I modeled
<kdb>Cmd</kdb><kdb>i</kdb
kbdtags as mark decorations, any two tags that are next to each others will automatically get combined as they are marks unless I add a whitespace in between... So question is, what would be the correct way to model them? Annotations?
Jul 6, 2020, 10:45 PM
U
Oh, this is an interesting and clever use of marks 😄
Jul 7, 2020, 5:38 AM
B
Not really ideal as you can see because marks do get connected.
user M
anyone at Sanity who might be more in tuned with schema and editor (I noticed you're on Slate)Jul 7, 2020, 1:06 PM
U
what about creating an object that you can add to the document, which is never rendered visually? I something like that an option? 🤔
Jul 7, 2020, 1:17 PM
B
not sure I follow? I'm trying to do something that gets rendered to the user 🙂
Jul 7, 2020, 1:25 PM
U
oh - I get it now 🤦 I wasn't understanding what you're doing
Jul 7, 2020, 1:27 PM
U
hmm, I'd be interested in how you solve this
Jul 7, 2020, 1:27 PM
B
I think annotations would work but I just need to have a field which is not great. Best would be if there would be inline nodes that aren't marks
Jul 7, 2020, 1:27 PM
M
Hi Jori, great question - and thanks Bryan for helping out 🙌 Would be nice if
kbditself would recognise a space and turn it into a new key 😉 But this is a clear use case that we should probably support somehow. For now you’ll probably have to fall back to using annotations but let me check with the person on the team who’s particularly well-versed in the PT editor and get back to you.
Jul 7, 2020, 1:40 PM
B
user M
thanks. I'm now exploring decorators more, so that maybe one writes it as one go and the renderer splits it up as you mentioned. Annotations are annoying because you need to annotate something, and it needs to have content so you have to write stuff twice for it. Inline nodes feels quite a big missing thing from the editor as one might want to use them for example emojisJul 7, 2020, 1:43 PM
A
Hi
I'm thinking an object with a type like:
user B
- I think inline objects are the correct way to model this. It's more an object on it's own than something that has to do with text formatting (decorators) or to annotate a certain text (annotations).I'm thinking an object with a type like:
{
type: 'object',
name: 'keyboardShortcut',
preview: {
select: {
keys: 'keys'
},
prepare(selection) {
return {
title: `${selection.keys.join(' + ')}`
}
}
},
fields: [
{
type: 'string',
name: 'shortcutName'
},
{
type: 'array',
name: 'keys',
of: [
{
type: 'string',
name: 'key'
}
]
}
]
}
]
}Jul 7, 2020, 3:29 PM
A
Example of how it would look in the editor:
Jul 7, 2020, 3:30 PM
A
You could even make them on beforehand and then use references to them as inline objects in Portable Text, so you don't have to define them all the time.
Jul 7, 2020, 3:31 PM
A
Bonus is also that you'd have an index of all your shortcuts 🙂
Jul 7, 2020, 3:33 PM
U
oh, this is what I was trying to say - but then got myself confused 😂
Jul 7, 2020, 6:08 PM
U
thanks
user A
Jul 7, 2020, 6:08 PM
B
ah interesting, thanks
user A
Jul 7, 2020, 6:09 PM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.