Reorganised & aligned editor icons
This commit is contained in:
Dan Brown
parent
56d7864bdf
commit
dc1c9807ef
3 changed files with 111 additions and 72 deletions
|
|
@ -5,6 +5,100 @@
|
|||
* @copyright Marijn Haverbeke and others
|
||||
*/
|
||||
|
||||
// :: Object
|
||||
// A set of basic editor-related icons. Contains the properties
|
||||
// `join`, `lift`, `selectParentNode`, `undo`, `redo`, `strong`, `em`,
|
||||
// `code`, `link`, `bulletList`, `orderedList`, and `blockquote`, each
|
||||
// holding an object that can be used as the `icon` option to
|
||||
// `MenuItem`.
|
||||
export const icons = {
|
||||
join: {
|
||||
width: 800, height: 900,
|
||||
path: "M0 75h800v125h-800z M0 825h800v-125h-800z M250 400h100v-100h100v100h100v100h-100v100h-100v-100h-100z"
|
||||
},
|
||||
lift: {
|
||||
width: 1024, height: 1024,
|
||||
path: "M219 310v329q0 7-5 12t-12 5q-8 0-13-5l-164-164q-5-5-5-13t5-13l164-164q5-5 13-5 7 0 12 5t5 12zM1024 749v109q0 7-5 12t-12 5h-987q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h987q7 0 12 5t5 12zM1024 530v109q0 7-5 12t-12 5h-621q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h621q7 0 12 5t5 12zM1024 310v109q0 7-5 12t-12 5h-621q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h621q7 0 12 5t5 12zM1024 91v109q0 7-5 12t-12 5h-987q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h987q7 0 12 5t5 12z"
|
||||
},
|
||||
selectParentNode: {text: "\u2b1a", css: "font-weight: bold"},
|
||||
undo: {
|
||||
width: 24, height: 24,
|
||||
path: "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
|
||||
},
|
||||
redo: {
|
||||
width: 24, height: 24,
|
||||
path: "M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"
|
||||
},
|
||||
strong: {
|
||||
width: 24, height: 24,
|
||||
path: "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"
|
||||
},
|
||||
em: {
|
||||
width: 24, height: 24,
|
||||
path: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"
|
||||
},
|
||||
code: {
|
||||
width: 896, height: 1024,
|
||||
path: "M608 192l-96 96 224 224-224 224 96 96 288-320-288-320zM288 192l-288 320 288 320 96-96-224-224 224-224-96-96z"
|
||||
},
|
||||
link: {
|
||||
width: 951, height: 1024,
|
||||
path: "M832 694q0-22-16-38l-118-118q-16-16-38-16-24 0-41 18 1 1 10 10t12 12 8 10 7 14 2 15q0 22-16 38t-38 16q-8 0-15-2t-14-7-10-8-12-12-10-10q-18 17-18 41 0 22 16 38l117 118q15 15 38 15 22 0 38-14l84-83q16-16 16-38zM430 292q0-22-16-38l-117-118q-16-16-38-16-22 0-38 15l-84 83q-16 16-16 38 0 22 16 38l118 118q15 15 38 15 24 0 41-17-1-1-10-10t-12-12-8-10-7-14-2-15q0-22 16-38t38-16q8 0 15 2t14 7 10 8 12 12 10 10q18-17 18-41zM941 694q0 68-48 116l-84 83q-47 47-116 47-69 0-116-48l-117-118q-47-47-47-116 0-70 50-119l-50-50q-49 50-118 50-68 0-116-48l-118-118q-48-48-48-116t48-116l84-83q47-47 116-47 69 0 116 48l117 118q47 47 47 116 0 70-50 119l50 50q49-50 118-50 68 0 116 48l118 118q48 48 48 116z"
|
||||
},
|
||||
bulletList: {
|
||||
width: 768, height: 896,
|
||||
path: "M0 512h128v-128h-128v128zM0 256h128v-128h-128v128zM0 768h128v-128h-128v128zM256 512h512v-128h-512v128zM256 256h512v-128h-512v128zM256 768h512v-128h-512v128z"
|
||||
},
|
||||
orderedList: {
|
||||
width: 768, height: 896,
|
||||
path: "M320 512h448v-128h-448v128zM320 768h448v-128h-448v128zM320 128v128h448v-128h-448zM79 384h78v-256h-36l-85 23v50l43-2v185zM189 590c0-36-12-78-96-78-33 0-64 6-83 16l1 66c21-10 42-15 67-15s32 11 32 28c0 26-30 58-110 112v50h192v-67l-91 2c49-30 87-66 87-113l1-1z"
|
||||
},
|
||||
blockquote: {
|
||||
width: 640, height: 896,
|
||||
path: "M0 448v256h256v-256h-128c0 0 0-128 128-128v-128c0 0-256 0-256 256zM640 320v-128c0 0-256 0-256 256v256h256v-256h-128c0 0 0-128 128-128z"
|
||||
},
|
||||
underline: {
|
||||
width: 24, height: 24,
|
||||
path: "M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"
|
||||
},
|
||||
strike: {
|
||||
width: 24, height: 24,
|
||||
path: "M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z"
|
||||
},
|
||||
superscript: {
|
||||
width: 24, height: 24,
|
||||
path: "M22,7h-2v1h3v1h-4V7c0-0.55,0.45-1,1-1h2V5h-3V4h3c0.55,0,1,0.45,1,1v1C23,6.55,22.55,7,22,7z M5.88,20h2.66l3.4-5.42h0.12 l3.4,5.42h2.66l-4.65-7.27L17.81,6h-2.68l-3.07,4.99h-0.12L8.85,6H6.19l4.32,6.73L5.88,20z"
|
||||
},
|
||||
subscript: {
|
||||
width: 24, height: 24,
|
||||
path: "M22,18h-2v1h3v1h-4v-2c0-0.55,0.45-1,1-1h2v-1h-3v-1h3c0.55,0,1,0.45,1,1v1C23,17.55,22.55,18,22,18z M5.88,18h2.66 l3.4-5.42h0.12l3.4,5.42h2.66l-4.65-7.27L17.81,4h-2.68l-3.07,4.99h-0.12L8.85,4H6.19l4.32,6.73L5.88,18z"
|
||||
},
|
||||
text_color: {
|
||||
width: 24, height: 24,
|
||||
path: "M2,20h20v4H2V20z M5.49,17h2.42l1.27-3.58h5.65L16.09,17h2.42L13.25,3h-2.5L5.49,17z M9.91,11.39l2.03-5.79h0.12l2.03,5.79 H9.91z"
|
||||
},
|
||||
background_color: {
|
||||
width: 24, height: 24,
|
||||
path: "M16.56,8.94L7.62,0L6.21,1.41l2.38,2.38L3.44,8.94c-0.59,0.59-0.59,1.54,0,2.12l5.5,5.5C9.23,16.85,9.62,17,10,17 s0.77-0.15,1.06-0.44l5.5-5.5C17.15,10.48,17.15,9.53,16.56,8.94z M5.21,10L10,5.21L14.79,10H5.21z M19,11.5c0,0-2,2.17-2,3.5 c0,1.1,0.9,2,2,2s2-0.9,2-2C21,13.67,19,11.5,19,11.5z M2,20h20v4H2V20z"
|
||||
},
|
||||
align_left: {
|
||||
width: 24, height: 24,
|
||||
path: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z"
|
||||
},
|
||||
align_right: {
|
||||
width: 24, height: 24,
|
||||
path: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z"
|
||||
},
|
||||
align_center: {
|
||||
width: 24, height: 24,
|
||||
path: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z"
|
||||
},
|
||||
align_justify: {
|
||||
width: 24, height: 24,
|
||||
path: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z"
|
||||
},
|
||||
};
|
||||
|
||||
const SVG = "http://www.w3.org/2000/svg"
|
||||
const XLINK = "http://www.w3.org/1999/xlink"
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import {
|
||||
MenuItem, Dropdown, DropdownSubmenu, renderGrouped, icons, joinUpItem, liftItem, selectParentNodeItem,
|
||||
MenuItem, Dropdown, DropdownSubmenu, renderGrouped, joinUpItem, liftItem, selectParentNodeItem,
|
||||
undoItem, redoItem, wrapItem, blockTypeItem, setAttrItem,
|
||||
} from "./menu"
|
||||
import {icons} from "./icons";
|
||||
import ColorPickerGrid from "./ColorPickerGrid";
|
||||
|
||||
import {toggleMark} from "prosemirror-commands";
|
||||
import {menuBar} from "./menubar"
|
||||
import schema from "../schema";
|
||||
|
|
@ -56,10 +56,10 @@ function markItem(markType, options) {
|
|||
const inlineStyles = [
|
||||
markItem(schema.marks.strong, {title: "Bold", icon: icons.strong}),
|
||||
markItem(schema.marks.em, {title: "Italic", icon: icons.em}),
|
||||
markItem(schema.marks.underline, {title: "Underline", label: 'U'}),
|
||||
markItem(schema.marks.strike, {title: "Strikethrough", label: '-S-'}),
|
||||
markItem(schema.marks.superscript, {title: "Superscript", label: 'sup'}),
|
||||
markItem(schema.marks.subscript, {title: "Subscript", label: 'sub'}),
|
||||
markItem(schema.marks.underline, {title: "Underline", icon: icons.underline}),
|
||||
markItem(schema.marks.strike, {title: "Strikethrough", icon: icons.strike}),
|
||||
markItem(schema.marks.superscript, {title: "Superscript", icon: icons.superscript}),
|
||||
markItem(schema.marks.subscript, {title: "Subscript", icon: icons.subscript}),
|
||||
];
|
||||
|
||||
const formats = [
|
||||
|
|
@ -105,16 +105,16 @@ const formats = [
|
|||
|
||||
const alignments = [
|
||||
setAttrItem('align', 'left', {
|
||||
label: 'Align Left'
|
||||
icon: icons.align_left
|
||||
}),
|
||||
setAttrItem('align', 'right', {
|
||||
label: 'Align Right'
|
||||
icon: icons.align_right
|
||||
}),
|
||||
setAttrItem('align', 'center', {
|
||||
label: 'Align Center'
|
||||
icon: icons.align_center
|
||||
}),
|
||||
setAttrItem('align', 'justify', {
|
||||
label: 'Align Justify'
|
||||
icon: icons.align_justify
|
||||
}),
|
||||
];
|
||||
|
||||
|
|
@ -123,10 +123,10 @@ const colorOptions = ["#000000","#993300","#333300","#003300","#003366","#000080
|
|||
const colors = [
|
||||
new DropdownSubmenu([
|
||||
new ColorPickerGrid(schema.marks.text_color, 'color', colorOptions),
|
||||
], {label: 'Text Color'}),
|
||||
], {icon: icons.text_color}),
|
||||
new DropdownSubmenu([
|
||||
new ColorPickerGrid(schema.marks.background_color, 'color', colorOptions),
|
||||
], {label: 'Background Color'}),
|
||||
], {icon: icons.background_color}),
|
||||
];
|
||||
|
||||
const menu = menuBar({
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import {lift, joinUp, selectParentNode, wrapIn, setBlockType, toggleMark} from "
|
|||
import {undo, redo} from "prosemirror-history"
|
||||
import {setBlockAttr} from "../commands";
|
||||
|
||||
import {getIcon} from "./icons"
|
||||
import {getIcon, icons} from "./icons"
|
||||
|
||||
const prefix = "ProseMirror-menu"
|
||||
|
||||
|
|
@ -251,13 +251,13 @@ export class DropdownSubmenu {
|
|||
// :: (EditorView) → {dom: dom.Node, update: (EditorState) → bool}
|
||||
// Renders the submenu.
|
||||
render(view) {
|
||||
let items = renderDropdownItems(this.content, view)
|
||||
const items = renderDropdownItems(this.content, view)
|
||||
|
||||
let label = crel("div", {class: prefix + "-submenu-label"}, translate(view, this.options.label))
|
||||
let wrap = crel("div", {class: prefix + "-submenu-wrap"}, label,
|
||||
const handleContent = this.options.icon ? getIcon(this.options.icon) : crel("div", {class: prefix + "-submenu-label"}, translate(view, this.options.label));
|
||||
const wrap = crel("div", {class: prefix + "-submenu-wrap"}, handleContent,
|
||||
crel("div", {class: prefix + "-submenu"}, items.dom))
|
||||
let listeningOnClose = null
|
||||
label.addEventListener("mousedown", e => {
|
||||
handleContent.addEventListener("mousedown", e => {
|
||||
e.preventDefault()
|
||||
markMenuEvent(e)
|
||||
setClass(wrap, prefix + "-submenu-wrap-active")
|
||||
|
|
@ -322,61 +322,6 @@ function separator() {
|
|||
}
|
||||
|
||||
|
||||
|
||||
// :: Object
|
||||
// A set of basic editor-related icons. Contains the properties
|
||||
// `join`, `lift`, `selectParentNode`, `undo`, `redo`, `strong`, `em`,
|
||||
// `code`, `link`, `bulletList`, `orderedList`, and `blockquote`, each
|
||||
// holding an object that can be used as the `icon` option to
|
||||
// `MenuItem`.
|
||||
export const icons = {
|
||||
join: {
|
||||
width: 800, height: 900,
|
||||
path: "M0 75h800v125h-800z M0 825h800v-125h-800z M250 400h100v-100h100v100h100v100h-100v100h-100v-100h-100z"
|
||||
},
|
||||
lift: {
|
||||
width: 1024, height: 1024,
|
||||
path: "M219 310v329q0 7-5 12t-12 5q-8 0-13-5l-164-164q-5-5-5-13t5-13l164-164q5-5 13-5 7 0 12 5t5 12zM1024 749v109q0 7-5 12t-12 5h-987q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h987q7 0 12 5t5 12zM1024 530v109q0 7-5 12t-12 5h-621q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h621q7 0 12 5t5 12zM1024 310v109q0 7-5 12t-12 5h-621q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h621q7 0 12 5t5 12zM1024 91v109q0 7-5 12t-12 5h-987q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h987q7 0 12 5t5 12z"
|
||||
},
|
||||
selectParentNode: {text: "\u2b1a", css: "font-weight: bold"},
|
||||
undo: {
|
||||
width: 1024, height: 1024,
|
||||
path: "M761 1024c113-206 132-520-313-509v253l-384-384 384-384v248c534-13 594 472 313 775z"
|
||||
},
|
||||
redo: {
|
||||
width: 1024, height: 1024,
|
||||
path: "M576 248v-248l384 384-384 384v-253c-446-10-427 303-313 509-280-303-221-789 313-775z"
|
||||
},
|
||||
strong: {
|
||||
width: 805, height: 1024,
|
||||
path: "M317 869q42 18 80 18 214 0 214-191 0-65-23-102-15-25-35-42t-38-26-46-14-48-6-54-1q-41 0-57 5 0 30-0 90t-0 90q0 4-0 38t-0 55 2 47 6 38zM309 442q24 4 62 4 46 0 81-7t62-25 42-51 14-81q0-40-16-70t-45-46-61-24-70-8q-28 0-74 7 0 28 2 86t2 86q0 15-0 45t-0 45q0 26 0 39zM0 950l1-53q8-2 48-9t60-15q4-6 7-15t4-19 3-18 1-21 0-19v-37q0-561-12-585-2-4-12-8t-25-6-28-4-27-2-17-1l-2-47q56-1 194-6t213-5q13 0 39 0t38 0q40 0 78 7t73 24 61 40 42 59 16 78q0 29-9 54t-22 41-36 32-41 25-48 22q88 20 146 76t58 141q0 57-20 102t-53 74-78 48-93 27-100 8q-25 0-75-1t-75-1q-60 0-175 6t-132 6z"
|
||||
},
|
||||
em: {
|
||||
width: 585, height: 1024,
|
||||
path: "M0 949l9-48q3-1 46-12t63-21q16-20 23-57 0-4 35-165t65-310 29-169v-14q-13-7-31-10t-39-4-33-3l10-58q18 1 68 3t85 4 68 1q27 0 56-1t69-4 56-3q-2 22-10 50-17 5-58 16t-62 19q-4 10-8 24t-5 22-4 26-3 24q-15 84-50 239t-44 203q-1 5-7 33t-11 51-9 47-3 32l0 10q9 2 105 17-1 25-9 56-6 0-18 0t-18 0q-16 0-49-5t-49-5q-78-1-117-1-29 0-81 5t-69 6z"
|
||||
},
|
||||
code: {
|
||||
width: 896, height: 1024,
|
||||
path: "M608 192l-96 96 224 224-224 224 96 96 288-320-288-320zM288 192l-288 320 288 320 96-96-224-224 224-224-96-96z"
|
||||
},
|
||||
link: {
|
||||
width: 951, height: 1024,
|
||||
path: "M832 694q0-22-16-38l-118-118q-16-16-38-16-24 0-41 18 1 1 10 10t12 12 8 10 7 14 2 15q0 22-16 38t-38 16q-8 0-15-2t-14-7-10-8-12-12-10-10q-18 17-18 41 0 22 16 38l117 118q15 15 38 15 22 0 38-14l84-83q16-16 16-38zM430 292q0-22-16-38l-117-118q-16-16-38-16-22 0-38 15l-84 83q-16 16-16 38 0 22 16 38l118 118q15 15 38 15 24 0 41-17-1-1-10-10t-12-12-8-10-7-14-2-15q0-22 16-38t38-16q8 0 15 2t14 7 10 8 12 12 10 10q18-17 18-41zM941 694q0 68-48 116l-84 83q-47 47-116 47-69 0-116-48l-117-118q-47-47-47-116 0-70 50-119l-50-50q-49 50-118 50-68 0-116-48l-118-118q-48-48-48-116t48-116l84-83q47-47 116-47 69 0 116 48l117 118q47 47 47 116 0 70-50 119l50 50q49-50 118-50 68 0 116 48l118 118q48 48 48 116z"
|
||||
},
|
||||
bulletList: {
|
||||
width: 768, height: 896,
|
||||
path: "M0 512h128v-128h-128v128zM0 256h128v-128h-128v128zM0 768h128v-128h-128v128zM256 512h512v-128h-512v128zM256 256h512v-128h-512v128zM256 768h512v-128h-512v128z"
|
||||
},
|
||||
orderedList: {
|
||||
width: 768, height: 896,
|
||||
path: "M320 512h448v-128h-448v128zM320 768h448v-128h-448v128zM320 128v128h448v-128h-448zM79 384h78v-256h-36l-85 23v50l43-2v185zM189 590c0-36-12-78-96-78-33 0-64 6-83 16l1 66c21-10 42-15 67-15s32 11 32 28c0 26-30 58-110 112v50h192v-67l-91 2c49-30 87-66 87-113l1-1z"
|
||||
},
|
||||
blockquote: {
|
||||
width: 640, height: 896,
|
||||
path: "M0 448v256h256v-256h-128c0 0 0-128 128-128v-128c0 0-256 0-256 256zM640 320v-128c0 0-256 0-256 256v256h256v-256h-128c0 0 0-128 128-128z"
|
||||
}
|
||||
}
|
||||
|
||||
// :: MenuItem
|
||||
// Menu item for the `joinUp` command.
|
||||
export const joinUpItem = new MenuItem({
|
||||
|
|
|
|||
Loading…
Reference in a new issue