panel.plugin("custom/marks", {
    icons: {
        pixel: '<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g><g><path d="M1.327,19.046l-0,-12.098l1.994,0l0,-1.994l6.181,-0l-0,1.994l2.016,0l-0,6.137l-2.016,-0l-0,1.994l-5.962,0l0,3.967l-2.213,0Zm2.213,-6.18l5.742,-0l0,-5.699l-5.742,0l0,5.699Z" style="fill-rule:nonzero;"/><path d="M12.482,19.046l0,-2.191l1.995,-0l-0,-1.995l1.972,0l0,-1.775l-1.972,-0l-0,-1.973l-1.995,0l0,-2.191l2.214,-0l-0,1.994l1.972,0l0,1.951l1.797,-0l0,-1.951l1.973,0l-0,-1.994l2.235,-0l0,2.191l-2.016,0l0,1.973l-1.972,-0l-0,1.775l1.972,0l0,1.995l2.016,-0l0,2.191l-2.235,0l-0,-1.972l-1.973,-0l0,-1.995l-1.797,0l0,1.995l-1.972,-0l-0,1.972l-2.214,0Z" style="fill-rule:nonzero;"/></g></g></svg>'
    },
    writerMarks: {
        green: {
            button: {
                icon: "brush",
                label: "Vert"
            },
            commands() {
                return () => this.toggle();
            },
            name: "green",
            schema: {
                parseDOM: [{ tag: "span.green" }],
                toDOM: () => ["span", { class: "green" }, 0]
            }
        },
        pixel: {
            button: {
                icon: "pixel",
                label: "Pixel"
            },
            commands() {
                return () => this.toggle();
            },
            name: "pixel",
            schema: {
                parseDOM: [{ tag: "span.pixel" }],
                toDOM: () => ["span", { class: "pixel" }, 0]
            }
        }
    }
});