Rank 1
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?
8 Answers, 1 is accepted
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
Rank 1
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?
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.inshttps://stackblitz.com/edit/react-9nnqkh-qivv5n?file=app/InsertShortcodeTool.jsx
Regards,
Stefan
Progress Telerik
Rank 1
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.
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
Rank 1
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
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
Rank 1