Палитра цветов QuillJS меняет встроенный стиль на классы

Question

Я использую QuillJS и библиотеку для Angular ngx-quill. Я хочу создать пользовательскую палитру цветов только с четырьмя цветами, и на выходе получим следующее

<span class="midnight-blue">Some text<span>

Но стандартная палитра цветов добавляет в тег встроенные стили, что мне не подходит, потому что Angular sanitizer удаляет эти стили. Вот что у меня сейчас:

<quill-editor
id="quill"
theme="snow"
placeholder="Your text here"
format="json"
[modules]="editorConfig"
[(ngModel)]="content"
(ngModelChange)="onModelChange()">
<div quill-editor-toolbar>
   <div class="ql-formats">
      <select class="ql-color">
         <option value="rgb(0, 0, 0)"></option>
         <option value="rgb(230, 0, 0)"></option>
         <option value="rgb(255, 153, 0)"></option>
         <option value="rgb(255, 255, 0)"></option>
      </select>
   </div>
</div>

Можно ли создать мою собственную палитру цветов с добавлением стилей с помощью классов?

Answer 1

Я решил это следующим образом

<div quill-editor-toolbar>
      <div class="ql-formats">
        <select class="ql-color">
          <option value="darkestYellow"></option>
          <option value="darkMintColor"></option>
        </select>
      </div>
</div>

//styles on Editor side
.ql-active[data-value='darkestYellow'] {
    .bubble-icon {
      background-color: transparent;
      fill: @darkestYellow
    }
}

.ql-picker-item[data-value='darkestYellow'] {
    background-color: @darkestYellow;
}

//styles on client side
.ql-color-darkestYellow {
    color: @darkestYellow
}