如何根据文本选择更新下拉列表中的值

Question

I am working on a React-based Google Docs clone as a side project. I'm using TipTap as the base.

I wanted to try to mimic the functionality in Google Docs where the select field would update with the appropriate value based on whatever text the user selects (ex., "heading 1" would show up on the select field if a user highlights text with <h1></h1> styling).

Here's a small video of the functionality I want to mimic: https://i.gyazo.com/18cc57f0285c8c5cd80d5dd6051f0ee7.mp4

This is the code I have so far with the React Hook used for the select fields:

const [font, setFont] = useState('sans-serif')
const handleFontChange = (e) => {
   setFont(e.target.value)
   editor.chain().focus().setFontFamily(e.target.value).run()
}

return (
   <select value={font} onChange={handleFontChange}>
    {fontFamilies.map((item) => <option key={item.value} value={item.value}>{item.label}</option>)}
   </select>
) 

I've tried to wrap my head around React Hooks and the Selection API, but I'm stuck. Is this at all possible in Javascript/React?

EDIT:

I found a function from Tiptap's API that does exactly what I'm looking for. I guess now the problem is how do I update that value into the select? Here's my new code:

const font = [
     { value: 'sans-serif', label: 'Sans-serif' }, ...
   ]

const [selectedFont, setSelectedFont] = useState([])

const handleFontChange = (obj) => {
    setSelectedFont(obj)
    editor.chain().focus().setFontFamily(obj.value).run()
    console.log(editor.isActive('textStyle', {fontFamily: selectedFont.value})) // prints true if the user clicked on text with the property active, otherwise prints false
}

return (
    <Select
       name="fontFamily"
       options={font}
       isClearable="true"
       isSearchable="true"
       value={selectedFont}
       onChange={(option) => handleFontChange(option)}
    />
)

It feels like the solution is really simple but I'm just overthinking it.

Answer 1

So I finally figured out what to do. I needed to pass a function in value that iterated over the array:

const fontList = [
    { label: 'Sans-serif', value: 'sans-serif' },
    ...
]

<Select
    name="fontFamily"
    placeholder="Select font..."
    value={
      editor.isActive('textStyle', {fontFamily: font}) ? (
        selectedFont.find(index => fontList[index])
      ) : ''
    }
    options={fontList}
    onChange={({value: fontSel}) => {
      setFont(fontSel)
      editor.chain().focus().setFontFamily(fontSel).run()
    }}
  />

It only took me a whole week of tearing my hair out... Glad to finally get this done.

Answer 2

Just to add to this, I was able to do the following in Vue to select headings with a dropdown.

<select
    :value="editor.isActive('heading') ? editor.getAttributes('heading').level : 0"
    @input="setSelectedHeading"
  >
    <option
      v-for="heading in headings"
      :key="heading.value"
      :label="heading.label"
      :value="heading.value"
    />
</select>

headings: [
    { value: 0, label: 'Normal text' },
    { value: 1, label: 'Heading 1' },
    { value: 2, label: 'Heading 2' },
    { value: 3, label: 'Heading 3' },
    { value: 4, label: 'Heading 4' },
    { value: 5, label: 'Heading 5' },
    { value: 6, label: 'Heading 6' }
  ]

setSelectedHeading (selected) {
  if (selected === 0) {
    const selectedLevel = this.editor.getAttributes('heading').level
    return this.editor.chain().focus().toggleHeading({ level: selectedLevel }).run()
  }
  return this.editor.chain().focus().setHeading({ level: selected }).run()
}

Answer 3

In case someone wants to create a simple dropdown menu with vue and tiptap , since this doesn't seem to work:

<select class="font-type">
  <option @click="editor.chain().focus().setParagraph().run()" selected>Paragraph</option>
  <option @click="editor.chain().focus().toggleHeading({level: 1}).run()">Heading 1</option>
  <option @click="editor.chain().focus().toggleHeading({level: 2}).run()">Heading 2</option>
  <option @click="editor.chain().focus().toggleHeading({level: 3}).run()">Heading 3</option>
</select>

you can do this:

<select class="font-type" @change="toggleType(editor, $event)">
  <option value="p" selected>Paragraph</option>
  <option value="1">Heading 1</option>
  <option value="2">Heading 2</option>
  <option value="3">Heading 3</option>
</select>

and add this to your <script> :

const toggleType = (editor, event) => {
    if (event.target.value == 'p') {
        editor.chain().focus().setParagraph().run()
    } else {
        editor.chain().focus().toggleHeading({level: Number(event.target.value)}).run()
    }
}