QuillJs strips span ids - quill

Question

I am relatively new to coding and have been running into an issue with Quilljs that I don't know how to solve.
Use Case: I want to make a text editor that allows a user to write their notes but then be able to go back and annotate the text. Similar to google docs in the sense that people can add comments and remove comments if necessary. Annotation in my case is highlighting parts of their text and creating an insight from that. Everything works as designed. I am creating spans around the highlighted text and adding an id to each insight so that the user can remove them later if they don't think that was actually an insight from the text.
Problem: On reloading my text into quill value I notice that the first initial load has all of my id's correct but then quill runs an onChange event which updates the state and strips the ids from my text.
Question: How can I prevent Quilljs from stripping the span ids from my text? I looked in the docs and old questions but didn't think they were applicable to my question.
Tech: I am using react-quill fwiw
EDIT:
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators, subscribe } from 'redux'
import ReactQuill, {Quill, Mixin, Toolbar } from 'react-quill';
import * as actionCreators from './quillTestActions'
class QuillTestContainer extends Component {
constructor(props) {
super(props)
this.handleChange = this.handleChange.bind(this)
this.state = {
query: '',
text: '',
};
}
componentDidMount() {
this.setState({
text: this.props.Notes.selectedNote.props.text
})
}
handleChange(value){
this.setState({text: value})
}
_modules(){
return {
modules: {
toolbar: [
[{ 'header': [1,2,3,4,false]}],
['bold', 'italic', 'underline', 'strike', 'blockquote', 'code-block'],
[{'color': []}, {'background': []}],
[{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
['link', 'image'],
['clean']
],
}
}
}
render() {
return (
<ReactQuill
value = {this.state.text}
modules = {this._modules().modules}
onChange = {this.handleChange}
/>
)
}
}
function mapStateToProps (state) {
return {
Notes: state.Notes,
}
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(actionCreators, dispatch)
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(QuillTestContainer)
Someone asked for code. This is a strip down essentials of the code that I am having a problem with. when I console out my value in the constructor or componentDidMount everything looks good but after the componentDidMount the onChange is initiated which strips the id's from my span class. For example, I might have something like <span id='test-id> that id is stripped out.

Answer 1

As part of optimization quill may remove the span tag. Did you try adding Span blot into your code (extend BlockEmbed)? Adding this will give you control on what node is created (inside create function of Spanblot). Please note that you will need to whitelist "span" so that this node is rendered inside the editor.