Custom dropdownlist in toolbar of Kendo React Editor

[crimsondeal]

I'd love exactly this functionality, but using KendoReact:

Working Dojo Example in response to this post

Am a bit confused as to what properties translate over to where-- how would you implement this using the Kendo React editor? Is this possible?

[Stefan]

Hello,

We made an example on how to create a custom tool that inserts and span element with specific class and content. The tool adds it on button click, but the same logic can be done with a DropDown:

The idea is that we add a text to the content and this text has a mark added to it:

https://stackblitz.com/edit/react-uq75bd-tnfws1?file=app/main.jsx

https://prosemirror.net/docs/ref/#model.Mark

The following article can also prove helpful, as it is showcasing how to make custom tools:

https://www.telerik.com/kendo-react-ui/components/editor/tools/#toc-using-custom-tools

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[crimsondeal]

Thank you, Stefan! That definitely sent me in the right direction. If anyone is looking for a similar deal, I was able to create a dropdown list of insertable shortcodes with the Kendo React Editor using this:

import React, { Component } from 'react'
import { EditorUtils } from '@progress/kendo-react-editor'
import { DropDownList } from '@progress/kendo-react-dropdowns'

class InsertShortcodeTool extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: { text: 'Insert Shortcode', code: '', id: 0 }
    }

    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(event) {
    const { view } = this.props
    const state = view.state
    const tr = state.tr
    const markType = state.schema.marks.style
    const mark = markType.create({ class: 'shortcode' })
    const text = event.target.value.code
    const content = state.schema.text(text)
    tr.addStoredMark(mark)

    // https://prosemirror.net/docs/ref/#state.Transaction.replaceSelectionWith
    tr.replaceSelectionWith(content, true)

    view.dispatch(tr)
  }

  render() {
    const { view } = this.props
    const nodeType = view && view.state.schema.nodes.text
    const canInsert = view && EditorUtils.canInsert(view.state, nodeType)

    const shortcodes = [
      { text: 'Name', code: '{{name}}', id: 1 },
      { text: 'Initials', code: '{{initials}}', id: 2 },
      { text: 'Address (Street)', code: '{{address_street}}', id: 3 },
      { text: 'Address (City)', code: '{{address_city}}', id: 4 },
      { text: 'Address (State)', code: '{{address_state}}', id: 5 },
      { text: 'Address (Zip)', code: '{{address_zip}}', id: 6 },
      { text: 'Email', code: '{{email}}', id: 7 },
      { text: 'Phone', code: '{{phone}}', id: 8 }
    ]

    return (
      <DropDownList
        data={shortcodes}
        textField="text"
        dataItemKey="id"
        value={this.state.value}
        onChange={this.handleChange}
        />
    )
  }
}

export { InsertShortcodeTool }

 

One thing I'm noticing is that the span.shortcode created isn't really closing just around the inserted text (as in, other text can be added within that span if you continue to type after inserting a shortcode). Is there any way to force the cursor for continued typing to be set after the closing </span> element?

[Stefan]

Hello,

Thank you for sharing the complete code, it is highly appreciated.

As for the additional question.

This is possible, but it will require making a new mark, which should have the property inclusive set to false:

https://prosemirror.net/docs/ref/#model.MarkSpec.inclusive

Then we have to add this new mark to the marks collection on the onMount event:

https://www.telerik.com/kendo-react-ui/components/editor/api/EditorProps/#toc-onmount

Then inside the onChange handle of the new tool, we have to use the newly created mark:

const markType = state.schema.marks.ins

This is a complete example showcasing this:

https://stackblitz.com/edit/react-9nnqkh-qivv5n?file=app/InsertShortcodeTool.jsx

Regards,
Stefan
Progress Telerik

[crimsondeal]

Hi Stefan,

This is absolutely perfect-- thank you so much! I so appreciate the thorough support.

Do you know if there is a way to delete the entire inserted shortcode with one keystroke? Somehow treating that <ins> as one character? Not completely necessary, but might be a nice way to fool-proof the UI so that users cannot just delete one bracket and potentially break the shortcode.

[Stefan]

Hello,

I`m glad we were able to help.

As for the last question, in order to provide more to the point suggestions, could you please share if these shortcodes will be editable or not?

The approach of how this can be done, will very if the shortcodes are editable or not.

Regards,
Stefan
Progress Telerik

[crimsondeal]

Hi Stefan,

 

Thank you! It would be preferable if they weren't editable so users don't mess something up accidentally. If that ends up majorly complicating matters, they can be editable!

 

Thanks,

Alexa

[Stefan]

Hello, Alexa,

Thank you for the clarification.

This can be done, by adding a custom node instead of a custom mark.

https://www.telerik.com/kendo-react-ui-develop/components/editor/schema/#toc-modifying-the-default-schema

I have customized the previous example to add a custom node:

https://stackblitz.com/edit/react-9nnqkh-k78ry2?file=app/main.jsx

Regards,
Stefan
Progress Telerik

[crimsondeal]

That functionality works perfectly! Thank you for your help-- much appreciated!