Adding Custom Styles

[T-Reimer]

Hello!

Trying to add a style property for lists. ul and ol.
Is there a proper way to add some of the css styles not found in the editor?

The following is my current code.

// add the bullet styles for lists (ol, ul)
function addCustomStyles(editor: Editor) {
  editor.onReady(() => {
    editor.StyleManager.addProperty("gs-typography", {
      label: "List Style",
      property: "list-style",
      type: "select",
      default: "",
      options: [
        { id: "", label: "Default" },
        { id: "none", label: "None" },
        { id: "disc", label: "Disc" },
        { id: "circle", label: "Circle" },
        { id: "square", label: "Square" },
      ],
    });

    // Create a custom sector for lists
    editor.StyleManager.addSector("custom-lists", {
      name: "Lists",
    });

    editor.StyleManager.addProperty("custom-lists", {
      label: "List Style",
      property: "list-style",
      type: "select",
      default: "",
      options: [
        { id: "", label: "Default" },
        { id: "none", label: "None" },
        { id: "disc", label: "Disc" },
        { id: "circle", label: "Circle" },
        { id: "square", label: "Square" },
      ],
    });
  });
}

The custom lists shows up in the list as expected and I see the property. But the first one, does not add a property to the Typography section. The blue modified indicator shows, but the select form input does not.