Edit Permission Matrix

Name

Also known as (comma separated)

Brief definition Grid mapping roles to permissions.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "highlightRole", "type": "select", "label": "Highlight role", "default": "editor", "options": [ "viewer", "editor", "admin" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showLegend", "type": "toggle", "label": "Show legend", "default": true }, { "id": "matrixName", "type": "text", "label": "Matrix name", "default": "Document permissions" } ]

Templates (JSON object keyed by format) { "html": "<div class=\"pmx pmx--{{highlightRole}}\">\n <p class=\"pmx__title\">{{matrixName}}</p>\n <table class=\"pmx__table\" style=\"--a:{{accent}};\">\n <tr><th></th><th class=\"pmx__col pmx__col--viewer\">Viewer</th><th class=\"pmx__col pmx__col--editor\">Editor</th><th class=\"pmx__col pmx__col--admin\">Admin</th></tr>\n <tr><td>View</td><td class=\"pmx__col pmx__col--viewer\">&#10003;</td><td class=\"pmx__col pmx__col--editor\">&#10003;</td><td class=\"pmx__col pmx__col--admin\">&#10003;</td></tr>\n <tr><td>Edit</td><td class=\"pmx__col pmx__col--viewer\">&mdash;</td><td class=\"pmx__col pmx__col--editor\">&#10003;</td><td class=\"pmx__col pmx__col--admin\">&#10003;</td></tr>\n <tr><td>Delete</td><td class=\"pmx__col pmx__col--viewer\">&mdash;</td><td class=\"pmx__col pmx__col--editor\">&mdash;</td><td class=\"pmx__col pmx__col--admin\">&#10003;</td></tr>\n </table>\n {{#if showLegend}}<p class=\"pmx__legend\">&#10003; allowed &nbsp; &mdash; not allowed</p>{{/if}}\n</div>\n<style>\n.pmx { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.pmx__title { margin: 0 0 10px; font-weight: 700; }\n.pmx__table { width: 100%; border-collapse: collapse; text-align: center; }\n.pmx__table th, .pmx__table td { padding: 6px 4px; border-bottom: 1px solid #24143014; font-size: 11px; }\n.pmx__table td:first-child, .pmx__table th:first-child { text-align: left; }\n.pmx--viewer .pmx__col--viewer, .pmx--editor .pmx__col--editor, .pmx--admin .pmx__col--admin { background: var(--a); border-radius: 4px; }\n.pmx__legend { margin: 10px 0 0; font-size: 10px; color: #24143099; }\n</style>", "tailwind": "<div class=\"pmxtw pmxtw--{{highlightRole}} font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border\">\n <p class=\"m-0 mb-2.5 font-bold\">{{matrixName}}</p>\n <table class=\"w-full border-collapse text-center\" style=\"--a:{{accent}};\">\n <tr><th></th><th class=\"pmxtw__col pmxtw__col--viewer py-1.5 px-1 border-b border-[#24143014] text-[11px]\">Viewer</th><th class=\"pmxtw__col pmxtw__col--editor py-1.5 px-1 border-b border-[#24143014] text-[11px]\">Editor</th><th class=\"pmxtw__col pmxtw__col--admin py-1.5 px-1 border-b border-[#24143014] text-[11px]\">Admin</th></tr>\n <tr><td class=\"text-left py-1.5 px-1 border-b border-[#24143014] text-[11px]\">View</td><td class=\"pmxtw__col pmxtw__col--viewer py-1.5 px-1 border-b border-[#24143014] text-[11px]\">&#10003;</td><td class=\"pmxtw__col pmxtw__col--editor py-1.5 px-1 border-b border-[#24143014] text-[11px]\">&#10003;</td><td class=\"pmxtw__col pmxtw__col--admin py-1.5 px-1 border-b border-[#24143014] text-[11px]\">&#10003;</td></tr>\n <tr><td class=\"text-left py-1.5 px-1 border-b border-[#24143014] text-[11px]\">Edit</td><td class=\"pmxtw__col pmxtw__col--viewer py-1.5 px-1 border-b border-[#24143014] text-[11px]\">&mdash;</td><td class=\"pmxtw__col pmxtw__col--editor py-1.5 px-1 border-b border-[#24143014] text-[11px]\">&#10003;</td><td class=\"pmxtw__col pmxtw__col--admin py-1.5 px-1 border-b border-[#24143014] text-[11px]\">&#10003;</td></tr>\n <tr><td class=\"text-left py-1.5 px-1 text-[11px]\">Delete</td><td class=\"pmxtw__col pmxtw__col--viewer py-1.5 px-1 text-[11px]\">&mdash;</td><td class=\"pmxtw__col pmxtw__col--editor py-1.5 px-1 text-[11px]\">&mdash;</td><td class=\"pmxtw__col pmxtw__col--admin py-1.5 px-1 text-[11px]\">&#10003;</td></tr>\n </table>\n {{#if showLegend}}<p class=\"mt-2.5 text-[10px] text-[#24143099]\">&#10003; allowed &nbsp; &mdash; not allowed</p>{{/if}}\n</div>\n<style>\n.pmxtw--viewer .pmxtw__col--viewer, .pmxtw--editor .pmxtw__col--editor, .pmxtw--admin .pmxtw__col--admin { background: var(--a); border-radius: 4px; }\n</style>", "react": "export function PermissionMatrix({\n highlightRole = \"{{highlightRole}}\",\n accent = \"{{accent}}\",\n showLegend = {{showLegend}},\n matrixName = \"{{matrixName}}\",\n}) {\n const roles = [\"viewer\", \"editor\", \"admin\"];\n const rows = [\n { label: \"View\", grants: { viewer: true, editor: true, admin: true } },\n { label: \"Edit\", grants: { viewer: false, editor: true, admin: true } },\n { label: \"Delete\", grants: { viewer: false, editor: false, admin: true } },\n ];\n const cell = (role) => ({ padding: \"6px 4px\", borderBottom: \"1px solid #24143014\", fontSize: 11, background: role === highlightRole ? accent : \"transparent\", borderRadius: role === highlightRole ? 4 : 0 });\n return (\n <div style={{ font: \"12px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 16, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 10px\", fontWeight: 700 }}>{matrixName}</p>\n <table style={{ width: \"100%\", borderCollapse: \"collapse\", textAlign: \"center\" }}>\n <tbody>\n <tr><th></th>{roles.map((r) => <th key={r} style={cell(r)}>{r[0].toUpperCase() + r.slice(1)}</th>)}</tr>\n {rows.map((row) => (\n <tr key={row.label}>\n <td style={{ textAlign: \"left\", padding: \"6px 4px\", borderBottom: \"1px solid #24143014\", fontSize: 11 }}>{row.label}</td>\n {roles.map((r) => <td key={r} style={cell(r)}>{row.grants[r] ? \"\\u2713\" : \"\\u2014\"}</td>)}\n </tr>\n ))}\n </tbody>\n </table>\n {showLegend && <p style={{ margin: \"10px 0 0\", fontSize: 10, color: \"#24143099\" }}>&#10003; allowed &nbsp; &mdash; not allowed</p>}\n </div>\n );\n}" }