From 34db138a64631a2bfe73d175ced947309deb25a7 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Tue, 11 Jan 2022 16:26:12 +0000 Subject: [PATCH] Split marks and nodes into their own files --- resources/js/editor/menu/index.js | 32 ++++++------- resources/js/editor/schema-marks.js | 40 ++++++++++++++++ resources/js/editor/schema-nodes.js | 30 ++++++++++++ resources/js/editor/schema.js | 73 +++-------------------------- 4 files changed, 92 insertions(+), 83 deletions(-) create mode 100644 resources/js/editor/schema-marks.js create mode 100644 resources/js/editor/schema-nodes.js diff --git a/resources/js/editor/menu/index.js b/resources/js/editor/menu/index.js index 9fad417ba..34e2c7e56 100644 --- a/resources/js/editor/menu/index.js +++ b/resources/js/editor/menu/index.js @@ -5,7 +5,7 @@ import { import {toggleMark} from "prosemirror-commands"; import {menuBar} from "./menubar" -import schema from "../schema"; +import index from "../schema/schema"; function cmdItem(cmd, options) { @@ -53,49 +53,49 @@ 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(index.marks.strong, {title: "Bold", icon: icons.strong}), + markItem(index.marks.em, {title: "Italic", icon: icons.em}), + markItem(index.marks.underline, {title: "Underline", label: 'U'}), + markItem(index.marks.strike, {title: "Strikethrough", label: '-S-'}), + markItem(index.marks.superscript, {title: "Superscript", label: 'sup'}), + markItem(index.marks.subscript, {title: "Subscript", label: 'sub'}), ]; const formats = [ - blockTypeItem(schema.nodes.heading, { + blockTypeItem(index.nodes.heading, { label: "Header Large", attrs: {level: 2} }), - blockTypeItem(schema.nodes.heading, { + blockTypeItem(index.nodes.heading, { label: "Header Medium", attrs: {level: 3} }), - blockTypeItem(schema.nodes.heading, { + blockTypeItem(index.nodes.heading, { label: "Header Small", attrs: {level: 4} }), - blockTypeItem(schema.nodes.heading, { + blockTypeItem(index.nodes.heading, { label: "Header Tiny", attrs: {level: 5} }), - blockTypeItem(schema.nodes.paragraph, { + blockTypeItem(index.nodes.paragraph, { label: "Paragraph", attrs: {} }), new DropdownSubmenu([ - blockTypeItem(schema.nodes.callout, { + blockTypeItem(index.nodes.callout, { label: "Info Callout", attrs: {type: 'info'} }), - blockTypeItem(schema.nodes.callout, { + blockTypeItem(index.nodes.callout, { label: "Danger Callout", attrs: {type: 'danger'} }), - blockTypeItem(schema.nodes.callout, { + blockTypeItem(index.nodes.callout, { label: "Success Callout", attrs: {type: 'success'} }), - blockTypeItem(schema.nodes.callout, { + blockTypeItem(index.nodes.callout, { label: "Warning Callout", attrs: {type: 'warning'} }) diff --git a/resources/js/editor/schema-marks.js b/resources/js/editor/schema-marks.js new file mode 100644 index 000000000..d4c546c08 --- /dev/null +++ b/resources/js/editor/schema-marks.js @@ -0,0 +1,40 @@ +import {schema as basicSchema} from "prosemirror-schema-basic"; + +const baseMarks = basicSchema.spec.marks; + +const underline = { + parseDOM: [{tag: "u"}, {style: "text-decoration=underline"}], + toDOM() { + return ["span", {style: "text-decoration: underline;"}, 0]; + } +}; + +const strike = { + parseDOM: [{tag: "s"}, {tag: "strike"}, {style: "text-decoration=line-through"}], + toDOM() { + return ["span", {style: "text-decoration: line-through;"}, 0]; + } +}; + +const superscript = { + parseDOM: [{tag: "sup"}], + toDOM() { + return ["sup", 0]; + } +}; + +const subscript = { + parseDOM: [{tag: "sub"}], + toDOM() { + return ["sub", 0]; + } +}; + +const marks = baseMarks.append({ + underline, + strike, + superscript, + subscript, +}); + +export default marks; \ No newline at end of file diff --git a/resources/js/editor/schema-nodes.js b/resources/js/editor/schema-nodes.js new file mode 100644 index 000000000..19c0ecba0 --- /dev/null +++ b/resources/js/editor/schema-nodes.js @@ -0,0 +1,30 @@ +import {schema as basicSchema} from "prosemirror-schema-basic"; +import {addListNodes} from "prosemirror-schema-list"; + +const baseNodes = addListNodes(basicSchema.spec.nodes, "paragraph block*", "block"); + +const callout = { + attrs: { + type: {default: 'info'}, + }, + content: "inline*", + group: "block", + defining: true, + parseDOM: [ + {tag: 'p.callout.info', attrs: {type: 'info'}, priority: 75,}, + {tag: 'p.callout.success', attrs: {type: 'success'}, priority: 75,}, + {tag: 'p.callout.danger', attrs: {type: 'danger'}, priority: 75,}, + {tag: 'p.callout.warning', attrs: {type: 'warning'}, priority: 75,}, + {tag: 'p.callout', attrs: {type: 'info'}, priority: 75}, + ], + toDOM(node) { + const type = node.attrs.type || 'info'; + return ['p', {class: 'callout ' + type}, 0]; + } +}; + +const nodes = baseNodes.append({ + callout, +}); + +export default nodes; \ No newline at end of file diff --git a/resources/js/editor/schema.js b/resources/js/editor/schema.js index e81d00608..6aa230b21 100644 --- a/resources/js/editor/schema.js +++ b/resources/js/editor/schema.js @@ -1,72 +1,11 @@ import {Schema} from "prosemirror-model"; -import {schema as basicSchema} from "prosemirror-schema-basic"; -import {addListNodes} from "prosemirror-schema-list"; -const baseNodes = addListNodes(basicSchema.spec.nodes, "paragraph block*", "block"); -const baseMarks = basicSchema.spec.marks; +import nodes from "./schema-nodes"; +import marks from "./schema-marks"; -const nodeCallout = { - attrs: { - type: {default: 'info'}, - }, - content: "inline*", - group: "block", - defining: true, - parseDOM: [ - {tag: 'p.callout.info', attrs: {type: 'info'}, priority: 75,}, - {tag: 'p.callout.success', attrs: {type: 'success'}, priority: 75,}, - {tag: 'p.callout.danger', attrs: {type: 'danger'}, priority: 75,}, - {tag: 'p.callout.warning', attrs: {type: 'warning'}, priority: 75,}, - {tag: 'p.callout', attrs: {type: 'info'}, priority: 75}, - ], - toDOM(node) { - const type = node.attrs.type || 'info'; - return ['p', {class: 'callout ' + type}, 0]; - } -}; - -const markUnderline = { - parseDOM: [{tag: "u"}, {style: "text-decoration=underline"}], - toDOM() { - return ["span", {style: "text-decoration: underline;"}, 0]; - } -}; - -const markStrike = { - parseDOM: [{tag: "s"}, {tag: "strike"}, {style: "text-decoration=line-through"}], - toDOM() { - return ["span", {style: "text-decoration: line-through;"}, 0]; - } -}; - -const markSuperscript = { - parseDOM: [{tag: "sup"}], - toDOM() { - return ["sup", 0]; - } -}; - -const markSubscript = { - parseDOM: [{tag: "sub"}], - toDOM() { - return ["sub", 0]; - } -}; - -const customNodes = baseNodes.append({ - callout: nodeCallout, +const index = new Schema({ + nodes, + marks, }); -const customMarks = baseMarks.append({ - underline: markUnderline, - strike: markStrike, - superscript: markSuperscript, - subscript: markSubscript, -}); - -const schema = new Schema({ - nodes: customNodes, - marks: customMarks, -}) - -export default schema; \ No newline at end of file +export default index; \ No newline at end of file